Update templates/index.html
Browse files- templates/index.html +29 -10
templates/index.html
CHANGED
|
@@ -150,13 +150,20 @@
|
|
| 150 |
white-space: nowrap;
|
| 151 |
animation: codeFlow 20s linear infinite;
|
| 152 |
}
|
| 153 |
-
#ai-text {
|
| 154 |
position: fixed;
|
| 155 |
top: 50%;
|
| 156 |
left: 50%;
|
| 157 |
transform: translate(-50%, -50%);
|
| 158 |
-
font-size:
|
| 159 |
font-weight: bold;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 160 |
color: transparent;
|
| 161 |
background: repeating-linear-gradient(
|
| 162 |
0deg,
|
|
@@ -170,14 +177,22 @@
|
|
| 170 |
-webkit-background-clip: text;
|
| 171 |
background-clip: text;
|
| 172 |
animation: gradientFlow 10s linear infinite;
|
| 173 |
-
z-index: 0;
|
| 174 |
-
opacity: 0.3;
|
| 175 |
-
pointer-events: none;
|
| 176 |
}
|
| 177 |
@keyframes gradientFlow {
|
| 178 |
0% { background-position: 0 0; }
|
| 179 |
100% { background-position: 0 -200%; }
|
| 180 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 181 |
#ai-sleep {
|
| 182 |
position: fixed;
|
| 183 |
top: 30%;
|
|
@@ -204,7 +219,9 @@
|
|
| 204 |
</head>
|
| 205 |
<body>
|
| 206 |
<div id="ai-background"></div>
|
| 207 |
-
<div id="ai-text">
|
|
|
|
|
|
|
| 208 |
<div id="ai-sleep" aria-live="polite">
|
| 209 |
<span>z</span><span>z</span><span>z</span><span>z</span>
|
| 210 |
</div>
|
|
@@ -234,6 +251,7 @@
|
|
| 234 |
const editorTextarea = document.getElementById('editor-textarea');
|
| 235 |
const saveButton = document.getElementById('save-button');
|
| 236 |
const aiBackground = document.getElementById('ai-background');
|
|
|
|
| 237 |
const aiSleep = document.getElementById('ai-sleep');
|
| 238 |
|
| 239 |
let currentEditingFile = '';
|
|
@@ -351,13 +369,13 @@
|
|
| 351 |
" train(model, data[i])"
|
| 352 |
];
|
| 353 |
|
| 354 |
-
function createCodeLine() {
|
| 355 |
const codeLine = document.createElement('div');
|
| 356 |
-
codeLine.className =
|
| 357 |
codeLine.style.left = `${Math.random() * 100}%`;
|
| 358 |
codeLine.style.animationDuration = `${15 + Math.random() * 10}s`;
|
| 359 |
codeLine.textContent = codeSnippets[Math.floor(Math.random() * codeSnippets.length)];
|
| 360 |
-
|
| 361 |
|
| 362 |
codeLine.addEventListener('animationiteration', () => {
|
| 363 |
codeLine.style.left = `${Math.random() * 100}%`;
|
|
@@ -366,7 +384,8 @@
|
|
| 366 |
}
|
| 367 |
|
| 368 |
for (let i = 0; i < 20; i++) {
|
| 369 |
-
createCodeLine();
|
|
|
|
| 370 |
}
|
| 371 |
|
| 372 |
// Initial message
|
|
|
|
| 150 |
white-space: nowrap;
|
| 151 |
animation: codeFlow 20s linear infinite;
|
| 152 |
}
|
| 153 |
+
#ai-text-container {
|
| 154 |
position: fixed;
|
| 155 |
top: 50%;
|
| 156 |
left: 50%;
|
| 157 |
transform: translate(-50%, -50%);
|
| 158 |
+
font-size: 200px;
|
| 159 |
font-weight: bold;
|
| 160 |
+
z-index: 0;
|
| 161 |
+
opacity: 0.3;
|
| 162 |
+
pointer-events: none;
|
| 163 |
+
overflow: hidden;
|
| 164 |
+
}
|
| 165 |
+
#ai-text {
|
| 166 |
+
position: relative;
|
| 167 |
color: transparent;
|
| 168 |
background: repeating-linear-gradient(
|
| 169 |
0deg,
|
|
|
|
| 177 |
-webkit-background-clip: text;
|
| 178 |
background-clip: text;
|
| 179 |
animation: gradientFlow 10s linear infinite;
|
|
|
|
|
|
|
|
|
|
| 180 |
}
|
| 181 |
@keyframes gradientFlow {
|
| 182 |
0% { background-position: 0 0; }
|
| 183 |
100% { background-position: 0 -200%; }
|
| 184 |
}
|
| 185 |
+
.ai-code-text {
|
| 186 |
+
position: absolute;
|
| 187 |
+
font-size: 16px;
|
| 188 |
+
color: #0f0;
|
| 189 |
+
white-space: nowrap;
|
| 190 |
+
animation: aiCodeFlow 15s linear infinite;
|
| 191 |
+
}
|
| 192 |
+
@keyframes aiCodeFlow {
|
| 193 |
+
0% { transform: translateY(-100%); }
|
| 194 |
+
100% { transform: translateY(100%); }
|
| 195 |
+
}
|
| 196 |
#ai-sleep {
|
| 197 |
position: fixed;
|
| 198 |
top: 30%;
|
|
|
|
| 219 |
</head>
|
| 220 |
<body>
|
| 221 |
<div id="ai-background"></div>
|
| 222 |
+
<div id="ai-text-container">
|
| 223 |
+
<div id="ai-text">AI</div>
|
| 224 |
+
</div>
|
| 225 |
<div id="ai-sleep" aria-live="polite">
|
| 226 |
<span>z</span><span>z</span><span>z</span><span>z</span>
|
| 227 |
</div>
|
|
|
|
| 251 |
const editorTextarea = document.getElementById('editor-textarea');
|
| 252 |
const saveButton = document.getElementById('save-button');
|
| 253 |
const aiBackground = document.getElementById('ai-background');
|
| 254 |
+
const aiTextContainer = document.getElementById('ai-text-container');
|
| 255 |
const aiSleep = document.getElementById('ai-sleep');
|
| 256 |
|
| 257 |
let currentEditingFile = '';
|
|
|
|
| 369 |
" train(model, data[i])"
|
| 370 |
];
|
| 371 |
|
| 372 |
+
function createCodeLine(container, className) {
|
| 373 |
const codeLine = document.createElement('div');
|
| 374 |
+
codeLine.className = className;
|
| 375 |
codeLine.style.left = `${Math.random() * 100}%`;
|
| 376 |
codeLine.style.animationDuration = `${15 + Math.random() * 10}s`;
|
| 377 |
codeLine.textContent = codeSnippets[Math.floor(Math.random() * codeSnippets.length)];
|
| 378 |
+
container.appendChild(codeLine);
|
| 379 |
|
| 380 |
codeLine.addEventListener('animationiteration', () => {
|
| 381 |
codeLine.style.left = `${Math.random() * 100}%`;
|
|
|
|
| 384 |
}
|
| 385 |
|
| 386 |
for (let i = 0; i < 20; i++) {
|
| 387 |
+
createCodeLine(aiBackground, 'code-line');
|
| 388 |
+
createCodeLine(aiTextContainer, 'ai-code-text');
|
| 389 |
}
|
| 390 |
|
| 391 |
// Initial message
|