Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Interactive Transformer Architecture</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+Mono:wght@400;500&family=Inter:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-color: #121212; | |
| --surface-color: #1e1e1e; | |
| --primary-color: #bb86fc; | |
| --primary-variant-color: #3700b3; | |
| --secondary-color: #03dac6; | |
| --text-color: #e0e0e0; | |
| --border-color: #333; | |
| --label-color: #bbb; | |
| } | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 2rem; | |
| min-height: 100vh; | |
| } | |
| #root { | |
| width: 100%; | |
| max-width: 1600px; /* Increased max-width for the new layout */ | |
| margin: 0 auto; | |
| } | |
| .app-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 2rem; | |
| position: relative; | |
| } | |
| .header { | |
| text-align: center; | |
| } | |
| .header h1 { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| margin-bottom: 0.5rem; | |
| } | |
| .header p { | |
| font-size: 1.1rem; | |
| max-width: 800px; | |
| } | |
| .save-button-container { | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 2rem; | |
| } | |
| .save-button { | |
| background-color: var(--primary-color); | |
| color: var(--bg-color); | |
| border: none; | |
| padding: 12px 24px; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease, transform 0.2s ease; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.2); | |
| } | |
| .save-button:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| .save-button:active { | |
| transform: scale(0.98); | |
| } | |
| .toast { | |
| position: fixed; | |
| bottom: 20px; | |
| background-color: var(--secondary-color); | |
| color: var(--bg-color); | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.2); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity 0.3s, visibility 0.3s, transform 0.3s; | |
| transform: translateY(20px); | |
| z-index: 1000; | |
| } | |
| .toast.show { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translateY(0); | |
| } | |
| .architecture-container { | |
| display: grid; | |
| grid-template-columns: 1fr auto 1fr; | |
| align-items: start; | |
| gap: 2rem; | |
| width: 100%; | |
| } | |
| .notes-column { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| height: 100%; | |
| } | |
| .column-title { | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 1.5rem; | |
| color: var(--secondary-color); | |
| margin-bottom: 1rem; | |
| border-bottom: 2px solid var(--secondary-color); | |
| padding-bottom: 0.5rem; | |
| text-align: center; | |
| } | |
| .note-block { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .note-label { | |
| font-size: 1rem; | |
| font-weight: 500; | |
| color: var(--label-color); | |
| font-family: 'Roboto Mono', monospace; | |
| } | |
| .note-block textarea { | |
| width: 100%; | |
| min-height: 120px; | |
| background-color: var(--surface-color); | |
| border: 1px solid var(--border-color); | |
| border-radius: 8px; | |
| color: var(--text-color); | |
| padding: 10px; | |
| font-family: 'Inter', sans-serif; | |
| font-size: 0.9rem; | |
| resize: vertical; | |
| transition: border-color 0.3s, box-shadow 0.3s; | |
| } | |
| .note-block textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(187, 134, 252, 0.2); | |
| } | |
| .image-column { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding-top: 5rem; /* Align image with note sections */ | |
| } | |
| .architecture-image { | |
| max-width: 500px; | |
| width: 100%; | |
| height: auto; | |
| border-radius: 8px; | |
| background: #fff; /* Add a white background for the transparent PNG */ | |
| padding: 1rem; | |
| box-shadow: 0 8px 16px rgba(0,0,0,0.3); | |
| } | |
| @media (max-width: 1200px) { | |
| .architecture-container { | |
| grid-template-columns: 1fr; | |
| gap: 3rem; | |
| } | |
| .image-column { | |
| padding-top: 0; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| body { | |
| padding: 1rem; | |
| } | |
| .header h1 { | |
| font-size: 2rem; | |
| } | |
| .header p { | |
| font-size: 1rem; | |
| } | |
| .architecture-image { | |
| max-width: 100%; | |
| padding: 0.5rem; | |
| } | |
| .note-block textarea { | |
| min-height: 100px; | |
| } | |
| } | |
| </style> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "react/": "https://esm.sh/react@^19.1.0/", | |
| "react": "https://esm.sh/react@^19.1.0", | |
| "react-dom/": "https://esm.sh/react-dom@^19.1.0/" | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="/index.css"> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="module" src="/index.tsx"></script> | |
| </body> | |
| </html> |