Spaces:

Artificial-superintelligence
/

Athspi

Running

App Files Files Community

Artificial-superintelligence commited on Dec 4, 2024

Commit

ef199f8

verified ·

1 Parent(s): ab2ace0

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +106 -18

templates/index.html CHANGED Viewed

@@ -17,6 +17,8 @@
         .container {
             display: flex;
             height: 100%;
         }
         .terminal {
             flex: 1;
@@ -71,6 +73,7 @@
             border: 1px solid #0f0;
             padding: 20px;
             box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
         }
         #editor-textarea {
             width: 100%;
@@ -126,34 +129,84 @@
         .glitch {
             animation: glitch 1s linear infinite;
         }
-        #ai-sleeping {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             font-size: 48px;
-            text-align: center;
-            z-index: 1000;
-            text-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0;
         }
-        @keyframes blink {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0; }
         }
-        #ai-sleeping span {
             display: inline-block;
-            animation: blink 1s infinite;
         }
-        #ai-sleeping span:nth-child(2) { animation-delay: 0.2s; }
-        #ai-sleeping span:nth-child(3) { animation-delay: 0.4s; }
-        #ai-sleeping span:nth-child(4) { animation-delay: 0.6s; }
-        #ai-sleeping span:nth-child(5) { animation-delay: 0.8s; }
     </style>
 </head>
 <body>
-    <div id="ai-sleeping" aria-live="polite">
-        AI<br>
-        <span>z</span><span>z</span><span>z</span><span>z</span><span>z</span>
     </div>
     <div class="container">
         <div class="terminal">
@@ -180,7 +233,8 @@
         const fileEditor = document.getElementById('file-editor');
         const editorTextarea = document.getElementById('editor-textarea');
         const saveButton = document.getElementById('save-button');
-        const aiSleeping = document.getElementById('ai-sleeping');
         let currentEditingFile = '';
         let isFirstInteraction = true;
@@ -196,7 +250,7 @@
         function executeCode() {
             if (isFirstInteraction) {
-                aiSleeping.style.display = 'none';
                 isFirstInteraction = false;
             }
@@ -281,6 +335,40 @@
         window.addEventListener('load', updateFileList);
         window.addEventListener('beforeunload', cleanup);
         // Initial message
         addToOutput("Welcome to the AI-Powered Hacker's Python Terminal. Type your commands below.");
         addToOutput("Available commands:");

         .container {
             display: flex;
             height: 100%;
+            position: relative;
+            z-index: 1;
         }
         .terminal {
             flex: 1;
             border: 1px solid #0f0;
             padding: 20px;
             box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
+            z-index: 1000;
         }
         #editor-textarea {
             width: 100%;
         .glitch {
             animation: glitch 1s linear infinite;
         }
+        #ai-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            opacity: 0.1;
+            pointer-events: none;
+        }
+        @keyframes codeFlow {
+            0% { transform: translateY(-100%); }
+            100% { transform: translateY(100%); }
+        }
+        .code-line {
+            position: absolute;
+            font-size: 14px;
+            color: #0f0;
+            white-space: nowrap;
+            animation: codeFlow 20s linear infinite;
+        }
+        #ai-text {
             position: fixed;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            font-size: 150px;
+            font-weight: bold;
+            color: transparent;
+            background: repeating-linear-gradient(
+                0deg,
+                #0f0 0%,
+                #0fa 25%,
+                #0f0 50%,
+                #0fa 75%,
+                #0f0 100%
+            );
+            background-size: 100% 200%;
+            -webkit-background-clip: text;
+            background-clip: text;
+            animation: gradientFlow 10s linear infinite;
+            z-index: 0;
+            opacity: 0.3;
+            pointer-events: none;
+        }
+        @keyframes gradientFlow {
+            0% { background-position: 0 0; }
+            100% { background-position: 0 -200%; }
+        }
+        #ai-sleep {
+            position: fixed;
+            top: 30%;
+            left: 50%;
+            transform: translateX(-50%);
             font-size: 48px;
+            color: #0f0;
+            text-shadow: 0 0 10px #0f0, 0 0 20px #0f0;
+            z-index: 2;
+            pointer-events: none;
         }
+        @keyframes float {
+            0%, 100% { transform: translateY(0) translateX(-50%); }
+            50% { transform: translateY(-20px) translateX(-50%); }
         }
+        #ai-sleep span {
             display: inline-block;
+            animation: float 2s ease-in-out infinite;
         }
+        #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; }
     </style>
 </head>
 <body>
+    <div id="ai-background"></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>
     <div class="container">
         <div class="terminal">
         const fileEditor = document.getElementById('file-editor');
         const editorTextarea = document.getElementById('editor-textarea');
         const saveButton = document.getElementById('save-button');
+        const aiBackground = document.getElementById('ai-background');
+        const aiSleep = document.getElementById('ai-sleep');
         let currentEditingFile = '';
         let isFirstInteraction = true;
         function executeCode() {
             if (isFirstInteraction) {
+                aiSleep.style.display = 'none';
                 isFirstInteraction = false;
             }
         window.addEventListener('load', updateFileList);
         window.addEventListener('beforeunload', cleanup);
+        // Create flowing code background
+        const codeSnippets = [
+            "def ai_function():",
+            "    return 'Hello, World!'",
+            "class AIAssistant:",
+            "    def __init__(self):",
+            "        self.knowledge = []",
+            "import tensorflow as tf",
+            "model = tf.keras.Sequential()",
+            "x = np.array([1, 2, 3, 4])",
+            "y = x * 2 + 1",
+            "plt.plot(x, y, 'r-')",
+            "for i in range(100):",
+            "    train(model, data[i])"
+        ];
+        function createCodeLine() {
+            const codeLine = document.createElement('div');
+            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)];
+            aiBackground.appendChild(codeLine);
+            codeLine.addEventListener('animationiteration', () => {
+                codeLine.style.left = `${Math.random() * 100}%`;
+                codeLine.textContent = codeSnippets[Math.floor(Math.random() * codeSnippets.length)];
+            });
+        }
+        for (let i = 0; i < 20; i++) {
+            createCodeLine();
+        }
         // Initial message
         addToOutput("Welcome to the AI-Powered Hacker's Python Terminal. Type your commands below.");
         addToOutput("Available commands:");