532d7541d6
- Update Tailwind config with new color tokens (primary-blue, active-blue, electric-violet, lime, grey-100/300/700/900, success, warning, error) - Add Inter font from Google Fonts as Barclays Effra alternative - Update Sidebar with primary-blue background and white active state - Update Hero with electric-violet accent and pill-shaped buttons - Update all tables with lime (#C3FB5A) header backgrounds - Implement alternating row colors (white/grey-100) on tables - Update status badges: In Progress (amber), Completed (green) - Update tabs with active-blue underline styling - Apply 10px border radius to cards and containers - Update button styling to pill-shaped with active-blue - Update input/dropdown borders to grey-700 with 2px - Update selected state highlighting to info-light (#E7F0FB) - Update FeedbackReport RAG status colors to new design system Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
97 lines
No EOL
3 KiB
HTML
Executable file
97 lines
No EOL
3 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Barclays Mod Comms</title>
|
|
<!-- Google Fonts - Inter (Barclays Effra alternative) -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
'sans': ['Inter', 'Arial', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
// Legacy colors (kept for backwards compatibility during migration)
|
|
'brand-dark-blue': '#1A2142',
|
|
'brand-light-blue': '#00AEEF',
|
|
'brand-accent': '#006DE3',
|
|
'brand-gray': '#F6F6F6',
|
|
'sidebar-bg': '#1A2142',
|
|
|
|
// Primary Brand Colors
|
|
'primary-blue': '#1A2142',
|
|
'active-blue': '#006DE3',
|
|
'electric-violet': '#7A0FF9',
|
|
'lime': '#C3FB5A',
|
|
'cyan-brand': '#00AEEF',
|
|
|
|
// Functional Colors
|
|
'grey-100': '#F6F6F6',
|
|
'grey-300': '#E2E2E2',
|
|
'grey-700': '#8E8E8E',
|
|
'grey-900': '#515151',
|
|
'black-title': '#272727',
|
|
|
|
// Status Colors
|
|
'info-light': '#E7F0FB',
|
|
'success': '#09821F',
|
|
'success-light': '#E9F4EA',
|
|
'warning': '#FFBA00',
|
|
'warning-light': '#FFF8E7',
|
|
'error': '#E3000F',
|
|
'error-light': '#FDE7E9',
|
|
},
|
|
animation: {
|
|
'slow-ping': 'ping 2s cubic-bezier(0, 0, 0.2, 1) infinite',
|
|
},
|
|
keyframes: {
|
|
ping: {
|
|
'75%, 100%': {
|
|
transform: 'scale(2)',
|
|
opacity: '0'
|
|
}
|
|
},
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
@keyframes spin-animation {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.custom-spinner {
|
|
animation: spin-animation 1s linear infinite;
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"react": "https://aistudiocdn.com/react@^19.1.1",
|
|
"react/": "https://aistudiocdn.com/react@^19.1.1/",
|
|
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.20.0",
|
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.1.1/",
|
|
"jspdf": "https://aistudiocdn.com/jspdf@^2.5.1",
|
|
"html2canvas": "https://aistudiocdn.com/html2canvas@^1.4.1"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="/index.css">
|
|
</head>
|
|
<body class="bg-white">
|
|
<div id="root"></div>
|
|
<script type="module" src="/index.tsx"></script>
|
|
</body>
|
|
</html> |