Update templates/index.html

templates/index.html

@@ -18,20 +18,24 @@
             display: flex;
             height: 100%;
             position: relative;
-            z-index: 1;
+            z-index: 2;
         }
         .terminal {
             flex: 1;
             padding: 20px;
             overflow-y: auto;
             box-sizing: border-box;
+            background-color: rgba(0, 0, 0, 0.7);
+            border: 1px solid #0f0;
+            box-shadow: 0 0 20px #0f0;
         }
         .file-explorer {
             width: 200px;
-            background-color: #111;
+            background-color: rgba(17, 17, 17, 0.8);
             padding: 10px;
             overflow-y: auto;
             display: none;
+            border-left: 1px solid #0f0;
         }
         #output {
             margin-bottom: 20px;
@@ -56,10 +60,11 @@
         .file-item {
             cursor: pointer;
             padding: 5px;
-            transition: background-color 0.3s;
+            transition: background-color 0.3s, color 0.3s;
         }
         .file-item:hover {
-            background-color: #222;
+            background-color: #0f0;
+            color: #000;
         }
         #file-editor {
             display: none;
@@ -69,16 +74,16 @@
             transform: translate(-50%, -50%);
             width: 80%;
             height: 80%;
-            background-color: #111;
+            background-color: rgba(17, 17, 17, 0.9);
             border: 1px solid #0f0;
             padding: 20px;
-            box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+            box-shadow: 0 0 30px #0f0;
             z-index: 1000;
         }
         #editor-textarea {
             width: 100%;
             height: calc(100% - 40px);
-            background-color: #000;
+            background-color: rgba(0, 0, 0, 0.8);
             color: #0f0;
             border: none;
             resize: none;
@@ -92,6 +97,11 @@
             color: #000;
             border: none;
             cursor: pointer;
+            transition: background-color 0.3s, color 0.3s;
+        }
+        #save-button:hover {
+            background-color: #000;
+            color: #0f0;
         }
         .ai-executed {
             color: #ff00ff;
@@ -136,7 +146,7 @@
             width: 100%;
             height: 100%;
             z-index: 0;
-            opacity: 0.1;
+            opacity: 0.2;
             pointer-events: none;
         }
         @keyframes codeFlow {
@@ -149,21 +159,15 @@
             color: #0f0;
             white-space: nowrap;
             animation: codeFlow 20s linear infinite;
+            text-shadow: 0 0 5px #0f0;
         }
-        #ai-text-container {
+        #ai-text {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             font-size: 200px;
             font-weight: bold;
-            z-index: 0;
-            opacity: 0.3;
-            pointer-events: none;
-            overflow: hidden;
-        }
-        #ai-text {
-            position: relative;
             color: transparent;
             background: repeating-linear-gradient(
                 0deg,
@@ -177,25 +181,17 @@
             -webkit-background-clip: text;
             background-clip: text;
             animation: gradientFlow 10s linear infinite;
+            z-index: 1;
+            opacity: 0.2;
+            pointer-events: none;
         }
         @keyframes gradientFlow {
             0% { background-position: 0 0; }
             100% { background-position: 0 -200%; }
         }
-        .ai-code-text {
-            position: absolute;
-            font-size: 16px;
-            color: #0f0;
-            white-space: nowrap;
-            animation: aiCodeFlow 15s linear infinite;
-        }
-        @keyframes aiCodeFlow {
-            0% { transform: translateY(-100%); }
-            100% { transform: translateY(100%); }
-        }
         #ai-sleep {
             position: fixed;
-            top: 30%;
+            top: 10%;
             left: 50%;
             transform: translateX(-50%);
             font-size: 48px;
@@ -215,13 +211,59 @@
         #ai-sleep span:nth-child(2) { animation-delay: 0.2s; }
         #ai-sleep span:nth-child(3) { animation-delay: 0.4s; }
         #ai-sleep span:nth-child(4) { animation-delay: 0.6s; }
+        .particle {
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            background-color: #0f0;
+            border-radius: 50%;
+            pointer-events: none;
+            opacity: 0.5;
+        }
+        @keyframes particleFloat {
+            0% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
+            100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
+        }
+        .hexagon {
+            position: absolute;
+            width: 100px;
+            height: 57.74px;
+            background-color: rgba(0, 255, 0, 0.1);
+            margin: 28.87px 0;
+            border-left: solid 2px #0f0;
+            border-right: solid 2px #0f0;
+            pointer-events: none;
+        }
+        .hexagon:before,
+        .hexagon:after {
+            content: "";
+            position: absolute;
+            z-index: 1;
+            width: 70.71px;
+            height: 70.71px;
+            transform: scaleY(0.5774) rotate(-45deg);
+            background-color: inherit;
+            left: 13.64px;
+        }
+        .hexagon:before {
+            top: -35.3553px;
+            border-top: solid 2.8284px #0f0;
+            border-right: solid 2.8284px #0f0;
+        }
+        .hexagon:after {
+            bottom: -35.3553px;
+            border-bottom: solid 2.8284px #0f0;
+            border-left: solid 2.8284px #0f0;
+        }
+        @keyframes hexRotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
     </style>
 </head>
 <body>
     <div id="ai-background"></div>
-    <div id="ai-text-container">
-        <div id="ai-text">AI</div>
-    </div>
+    <div id="ai-text">AI</div>
     <div id="ai-sleep" aria-live="polite">
         <span>z</span><span>z</span><span>z</span><span>z</span>
     </div>
@@ -251,7 +293,6 @@
         const editorTextarea = document.getElementById('editor-textarea');
         const saveButton = document.getElementById('save-button');
         const aiBackground = document.getElementById('ai-background');
-        const aiTextContainer = document.getElementById('ai-text-container');
         const aiSleep = document.getElementById('ai-sleep');
 
         let currentEditingFile = '';
@@ -300,6 +341,7 @@
             });
 
             codeInput.value = '';
+            createParticles(10);
         }
 
         function updateFileList() {
@@ -369,13 +411,13 @@
             "    train(model, data[i])"
         ];
 
-        function createCodeLine(container, className) {
+        function createCodeLine() {
             const codeLine = document.createElement('div');
-            codeLine.className = className;
+            codeLine.className = 'code-line';
             codeLine.style.left = `${Math.random() * 100}%`;
             codeLine.style.animationDuration = `${15 + Math.random() * 10}s`;
             codeLine.textContent = codeSnippets[Math.floor(Math.random() * codeSnippets.length)];
-            container.appendChild(codeLine);
+            aiBackground.appendChild(codeLine);
 
             codeLine.addEventListener('animationiteration', () => {
                 codeLine.style.left = `${Math.random() * 100}%`;
@@ -384,8 +426,32 @@
         }
 
         for (let i = 0; i < 20; i++) {
-            createCodeLine(aiBackground, 'code-line');
-            createCodeLine(aiTextContainer, 'ai-code-text');
+            createCodeLine();
+        }
+
+        function createParticles(num) {
+            for (let i = 0; i < num; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.style.left = `${Math.random() * 100}%`;
+                particle.style.top = `${Math.random() * 100}%`;
+                particle.style.animation = `particleFloat ${2 + Math.random() * 3}s linear forwards`;
+                document.body.appendChild(particle);
+                setTimeout(() => particle.remove(), 5000);
+            }
+        }
+
+        function createHexagon() {
+            const hexagon = document.createElement('div');
+            hexagon.className = 'hexagon';
+            hexagon.style.left = `${Math.random() * 100}%`;
+            hexagon.style.top = `${Math.random() * 100}%`;
+            hexagon.style.animation = `hexRotate ${10 + Math.random() * 10}s linear infinite`;
+            document.body.appendChild(hexagon);
+        }
+
+        for (let i = 0; i < 5; i++) {
+            createHexagon();
         }
 
         // Initial message