| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Contact Homepage</title>
- <script src="https://cdn.tailwindcss.com"></script>
- <script type="importmap">
- {
- "imports": {
- "react": "https://esm.sh/react@18.2.0",
- "react-dom/client": "https://esm.sh/react-dom@18.2.0/client",
- "react-router-dom": "https://esm.sh/react-router-dom@6",
- "recharts": "https://esm.sh/recharts@2.12.7",
- "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
- "react/": "https://aistudiocdn.com/react@^19.2.0/"
- }
- }
- </script>
- <style>
- /* Holographic Gleam Effect */
- .holographic-gleam::before {
- content: '';
- position: absolute;
- top: -10%;
- left: -50%;
- width: 200%;
- height: 200%;
- background: linear-gradient(
- 110deg,
- rgba(0, 255, 255, 0) 40%,
- rgba(0, 255, 255, 0.5) 48%,
- rgba(255, 0, 255, 0.5) 52%,
- rgba(255, 0, 255, 0) 60%
- );
- background-size: 200% 100%;
- animation: holographic-gleam 3s linear infinite;
- transform: rotate(25deg);
- z-index: 1;
- opacity: 1; /* Always active */
- }
- @keyframes holographic-gleam {
- 0% { background-position: 200% 0; }
- 100% { background-position: -200% 0; }
- }
- @keyframes spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
- }
- </style>
- <link rel="stylesheet" href="/index.css">
- </head>
- <body class="bg-slate-100">
- <div id="root"></div>
- <script type="module" src="/src/index.tsx"></script>
- <script type="module" src="/index.tsx"></script>
- </body>
- </html>
|
