101 lines
3.8 KiB
HTML
101 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<title>GymFlow AI</title>
|
|
<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=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Roboto', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
// Material 3 Dark Theme approximation
|
|
'surface': '#141218', // Very dark background
|
|
'surface-container-low': '#1D1B20',
|
|
'surface-container': '#211F26', // Cards
|
|
'surface-container-high': '#2B2930', // Input fields
|
|
'on-surface': '#E6E0E9',
|
|
'on-surface-variant': '#CAC4D0',
|
|
|
|
'primary': '#D0BCFF', // M3 Purple/Lavender tone often used as primary in dark mode, but keeping Emerald logic
|
|
// Let's map to Emerald for fitness vibe but M3 structure
|
|
'm3-primary': '#80D8FF', // Light Blue
|
|
'm3-on-primary': '#003355',
|
|
|
|
// Using the Emerald scheme from previous request but mapped to M3 tokens
|
|
'primary': '#6EE7B7', // Emerald 300 (Light for dark mode)
|
|
'on-primary': '#003828', // Emerald 900
|
|
'primary-container': '#00513B', // Emerald 800
|
|
'on-primary-container': '#6EE7B7', // Emerald 300
|
|
|
|
'secondary': '#CCC2DC',
|
|
'secondary-container': '#4A4458',
|
|
'on-secondary-container': '#E8DEF8',
|
|
|
|
'tertiary': '#EFB8C8',
|
|
'tertiary-container': '#633B48',
|
|
|
|
'error': '#F2B8B5',
|
|
'error-container': '#8C1D18',
|
|
|
|
'outline': '#938F99',
|
|
'outline-variant': '#49454F'
|
|
},
|
|
boxShadow: {
|
|
'elevation-1': '0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)',
|
|
'elevation-2': '0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)',
|
|
'elevation-3': '0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30)',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #49454F;
|
|
border-radius: 3px;
|
|
}
|
|
/* Hide number input arrows */
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"recharts": "https://aistudiocdn.com/recharts@^3.4.1",
|
|
"react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
|
|
"@google/genai": "https://aistudiocdn.com/@google/genai@^1.30.0",
|
|
"lucide-react": "https://aistudiocdn.com/lucide-react@^0.554.0",
|
|
"react": "https://aistudiocdn.com/react@^19.2.0",
|
|
"react/": "https://aistudiocdn.com/react@^19.2.0/"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="/index.css">
|
|
</head>
|
|
<body class="bg-surface text-on-surface h-screen overflow-hidden selection:bg-primary-container selection:text-on-primary-container">
|
|
<div id="root"></div>
|
|
<script type="module" src="/index.tsx"></script>
|
|
</body>
|
|
</html> |