119 lines
4.8 KiB
HTML
Executable File
119 lines
4.8 KiB
HTML
Executable File
|
|
<!DOCTYPE html>
|
|
<html lang="ru" class="h-full">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<title>Суверенная LLM - Башкортостан</title>
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='70' stroke='%23ff4b4b' stroke-width='6' fill='none' stroke-dasharray='15 85'%3E%3C/circle%3E%3Ccircle cx='100' cy='100' r='50' stroke='%23ff4b4b' stroke-width='6' fill='none' stroke-dasharray='12 58' transform='rotate(30 100 100)'%3E%3C/circle%3E%3Ccircle cx='100' cy='100' r='30' stroke='%23ff4b4b' stroke-width='6' fill='none' stroke-dasharray='8 32' transform='rotate(60 100 100)'%3E%3C/circle%3E%3C/svg%3E" />
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap');
|
|
|
|
:root {
|
|
/* Default Dark Theme (Anime.js style) */
|
|
--bg-color: #0e0e10;
|
|
--card-bg: #161618;
|
|
--text-main: #ffffff;
|
|
--text-muted: #888899;
|
|
--border-color: #333333;
|
|
--accent-red: #ff4b4b;
|
|
--accent-cyan: #20e3b2;
|
|
--grid-color: #222;
|
|
}
|
|
|
|
/* Light / Sand Theme */
|
|
body.theme-light {
|
|
--bg-color: #e3e1db; /* Slightly darker sand for contrast */
|
|
--card-bg: #ebe9e4;
|
|
--text-main: #1a1a1a;
|
|
--text-muted: #5c5c55;
|
|
--border-color: #c4c3be;
|
|
--accent-red: #d13030;
|
|
--accent-cyan: #008f72;
|
|
--grid-color: #d1d0ca;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-main);
|
|
overflow: hidden; /* Prevent body scroll, handle in App container */
|
|
height: 100%;
|
|
transition: background-color 0.8s ease, color 0.8s ease;
|
|
}
|
|
|
|
.font-mono {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
}
|
|
|
|
/* Utilities using CSS variables */
|
|
.bg-theme-main { background-color: var(--bg-color); transition: background-color 0.8s ease; }
|
|
.bg-theme-card { background-color: var(--card-bg); transition: background-color 0.8s ease; }
|
|
.text-theme-main { color: var(--text-main); transition: color 0.8s ease; }
|
|
.text-theme-muted { color: var(--text-muted); transition: color 0.8s ease; }
|
|
.border-theme { border-color: var(--border-color); transition: border-color 0.8s ease; }
|
|
|
|
/* Custom scrollbar for the container */
|
|
.snap-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
.snap-container::-webkit-scrollbar-track {
|
|
background: var(--bg-color);
|
|
}
|
|
.snap-container::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 3px;
|
|
}
|
|
.snap-container::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-red);
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent-red);
|
|
color: white;
|
|
}
|
|
|
|
/* Grid Background Pattern */
|
|
.grid-pattern {
|
|
background-image: linear-gradient(var(--grid-color) 1px, transparent 1px),
|
|
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
|
|
background-size: 40px 40px;
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"react": "https://esm.sh/react@18.3.1",
|
|
"react/": "https://esm.sh/react@18.3.1/",
|
|
"react-dom": "https://esm.sh/react-dom@18.3.1",
|
|
"react-dom/": "https://esm.sh/react-dom@18.3.1/",
|
|
"react-dom/client": "https://esm.sh/react-dom@18.3.1/client",
|
|
"recharts": "https://esm.sh/recharts@2.12.7?external=react,react-dom",
|
|
"lucide-react": "https://esm.sh/lucide-react@0.395.0?external=react",
|
|
"framer-motion": "https://esm.sh/framer-motion@11.2.10?external=react,react-dom",
|
|
"three": "https://esm.sh/three@0.165.0",
|
|
"@react-three/fiber": "https://esm.sh/@react-three/fiber@8.16.8?external=react,react-dom,three",
|
|
"@react-three/drei": "https://esm.sh/@react-three/drei@9.108.3?external=react,react-dom,three,@react-three/fiber"
|
|
}
|
|
}
|
|
</script>
|
|
<link rel="stylesheet" href="/index.css">
|
|
</head>
|
|
<body class="h-full">
|
|
<div id="root" class="h-full"></div>
|
|
|
|
<!-- Filters for visual effects -->
|
|
<svg style="position: absolute; width: 0; height: 0;">
|
|
<defs>
|
|
<filter id="sand-dissolve">
|
|
<feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" result="noise" />
|
|
<feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="G" />
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
<script type="module" src="/index.tsx"></script>
|
|
</body>
|
|
</html> |