c7228c95a2
- Update font config to prioritize Barclays Effra with Inter fallback - Add "powered by OLIVER" text to sidebar branding - Fix sidebar user profile button border radius to consistent 10px - Update Hero "View Documentation" button to Active Blue outline style - Remove legacy color definitions from Tailwind config Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
91 lines
No EOL
2.9 KiB
HTML
Executable file
91 lines
No EOL
2.9 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 as fallback for Barclays Effra (proprietary font not available as web font) -->
|
|
<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: {
|
|
// Barclays Effra is the brand font but is proprietary; Inter is the web fallback
|
|
'sans': ['Barclays Effra', 'Inter', 'Arial', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
// 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> |