Spaces:

00Boobs00
/

anycoder-4996a77b

Running

App Files Files

00Boobs00 commited on Jan 18

Commit

39077ed

verified ·

1 Parent(s): 31c2fd1

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +68 -101

index.html CHANGED Viewed

@@ -4,15 +4,13 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>🚀 Studio Workflow Engine Enterprise v3.0 - The Odyssey Edition</title>
-  <meta name="description" content="Enterprise AI-Powered Development Platform - Revitalized">
   <!-- Google Fonts: Space Grotesk (Headers), Inter (Body), Fira Code (Code) -->
   <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=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;700&display=swap"
-    rel="stylesheet">
   <!-- FontAwesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@@ -38,7 +36,7 @@
       --gradient-odyssey: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 50%, #c084fc 100%);
       --gradient-text: linear-gradient(to right, #c084fc, #f472b6);
-      --gradient-border: linear-gradient(to bottom right, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
       --text-main: #f3f4f6;
       --text-muted: #9ca3af;
@@ -79,12 +77,13 @@
       display: flex;
       flex-direction: column;
       overflow-x: hidden;
-      background-image:
         radial-gradient(circle at 10% 20%, rgba(76, 29, 149, 0.15) 0%, transparent 40%),
         radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 40%);
     }
-    /* --- Ambient Animation --- */
     @keyframes drift {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
@@ -92,20 +91,10 @@
     }
     /* --- Scrollbar Styling --- */
-    ::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    ::-webkit-scrollbar-track {
-      background: var(--bg-deep);
-    }
-    ::-webkit-scrollbar-thumb {
-      background: #333;
-      border-radius: 4px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: var(--primary);
-    }
     /* --- Typography --- */
     h1, h2, h3, h4 {
@@ -133,8 +122,8 @@
       width: 80px;
       height: 80px;
       border: 2px solid transparent;
-      border-top: 2px solid var(--primary);
-      border-right: 2px solid var(--secondary);
       border-radius: 50%;
       animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
       position: relative;
@@ -146,7 +135,7 @@
       top: 5px; left: 5px; right: 5px; bottom: 5px;
       border-radius: 50%;
       border: 2px solid transparent;
-      border-top: 2px solid var(--accent);
       animation: spin 2s linear infinite reverse;
     }
@@ -175,7 +164,7 @@
       border-left: 3px solid var(--primary);
       padding: 1rem 1.5rem;
       border-radius: var(--radius-sm);
-      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
       display: flex;
       align-items: center;
       gap: 12px;
@@ -230,7 +219,7 @@
     }
     .version-tag {
-      background: rgba(255,255,255,0.05);
       border: 1px solid var(--border);
       padding: 2px 8px;
       border-radius: 4px;
@@ -311,7 +300,9 @@
     .nav-dock::before {
       content: '';
       position: absolute;
-      bottom: 0; left: 0; right: 0;
       height: 1px;
       background: linear-gradient(90deg, transparent, var(--primary), transparent);
       opacity: 0.5;
@@ -339,7 +330,7 @@
     .nav-item:hover {
       color: var(--text-main);
-      background: rgba(255,255,255,0.03);
     }
     .nav-item.active {
@@ -348,9 +339,7 @@
       box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
     }
-    .nav-item i {
-      font-size: 1.1rem;
-    }
     /* --- Content Sections --- */
     .section-view {
@@ -358,9 +347,7 @@
       animation: fadeUp 0.5s ease-out forwards;
     }
-    .section-view.active {
-      display: grid;
-    }
     /* --- Cards: The Artifacts --- */
     .card {
@@ -376,8 +363,8 @@
     }
     .card:hover {
-      border-color: rgba(255,255,255,0.15);
-      box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
     }
     .card-header {
@@ -398,9 +385,7 @@
       gap: 0.75rem;
     }
-    .card-title i {
-      color: var(--primary);
-    }
     /* --- Code Editor: The Forge --- */
     .editor-container {
@@ -469,12 +454,7 @@
       color: #d1d5db;
     }
-    .log-entry {
-      margin-bottom: 0.5rem;
-      display: flex;
-      gap: 0.5rem;
-    }
     .log-time { color: var(--text-dim); }
     .log-type.info { color: var(--info); }
     .log-type.success { color: var(--accent); }
@@ -517,20 +497,14 @@
     }
     .btn-secondary:hover {
-      background: rgba(255,255,255,0.05);
       border-color: var(--text-muted);
     }
-    .btn-group {
-      display: flex;
-      gap: 1rem;
-      margin-top: 1.5rem;
-    }
     /* --- Forms --- */
-    .form-group {
-      margin-bottom: 1.25rem;
-    }
     label {
       display: block;
@@ -544,7 +518,7 @@
     input, select, textarea {
       width: 100%;
-      background: rgba(0,0,0,0.3);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       padding: 0.75rem 1rem;
@@ -560,17 +534,9 @@
     }
     /* --- Analytics Bars --- */
-    .bar-chart {
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    }
-    .bar-item {
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-    }
     .bar-label {
       display: flex;
@@ -602,7 +568,7 @@
     }
     .member-card {
-      background: rgba(255,255,255,0.02);
       padding: 1.5rem;
       border-radius: var(--radius-md);
       border: 1px solid var(--border);
@@ -613,7 +579,7 @@
     }
     .member-card:hover {
-      background: rgba(255,255,255,0.05);
       transform: translateY(-3px);
       border-color: var(--primary);
     }
@@ -634,10 +600,7 @@
     /* --- Animations --- */
     @keyframes spin { to { transform: rotate(360deg); } }
     @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
-    @keyframes fadeUp {
-      from { opacity: 0; transform: translateY(20px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
     /* --- Footer --- */
     footer {
@@ -654,26 +617,13 @@
       text-decoration: none;
       transition: color 0.2s;
     }
     footer a:hover { color: white; text-decoration: underline; }
     /* --- Grid Layouts --- */
-    .layout-split {
-      display: grid;
-      grid-template-columns: 1.2fr 0.8fr;
-      gap: 2rem;
-    }
-    .layout-dashboard {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: 1.5rem;
-    }
-    .layout-form {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 2rem;
-    }
     @media (max-width: 1024px) {
       .layout-split, .layout-form { grid-template-columns: 1fr; }
@@ -708,7 +658,7 @@
           <div class="status-dot"></div>
           <span>SYSTEM OPTIMAL</span>
         </div>
         <button class="profile-btn" onclick="toggleUserMenu()">
           <i class="fas fa-user-astronaut"></i>
         </button>
@@ -717,7 +667,7 @@
   </header>
   <div class="main-container">
     <!-- Navigation -->
     <nav class="nav-dock">
       <button class="nav-item active" onclick="switchTab('studio')">
@@ -754,7 +704,7 @@
           </div>
           <div class="editor-main">
             <div class="line-numbers" id="lineNumbers">1</div>
-            <textarea id="codeInput" class="code-input" spellcheck="false"
             placeholder="# Begin your odyssey here..."
             oninput="updateLineNumbers()"></textarea>
           </div>
@@ -787,7 +737,7 @@
         <div class="card-header">
           <span class="card-title"><i class="fas fa-satellite-dish"></i> Output Stream</span>
           <div style="display: flex; gap: 0.5rem;">
-             <button class="btn btn-secondary" style="padding: 0.25rem 0.75rem; font-size: 0.75rem;" onclick="clearTerminal()">
               Clear
             </button>
           </div>
@@ -843,7 +793,8 @@
         <div class="card-header">
           <span class="card-title"><i class="fas fa-list-tree"></i> Active Operations</span>
         </div>
-        <div id="projectDashboard" class="terminal-window" style="max-height: 100%; background: transparent; border: none; padding: 0;">
           <div style="text-align: center; padding-top: 4rem; color: var(--text-dim);">
             <i class="fas fa-cube fa-3x" style="margin-bottom: 1rem; opacity: 0.2;"></i>
             <p>No active constructs found.</p>
@@ -885,19 +836,25 @@
           <div class="bar-chart">
             <div class="bar-item">
               <div class="bar-label"><span>GPT-4 Turbo</span><span>98%</span></div>
-              <div class="bar-track"><div class="bar-fill" style="width: 98%;"></div></div>
             </div>
             <div class="bar-item">
               <div class="bar-label"><span>Claude 3 Opus</span><span>95%</span></div>
-              <div class="bar-track"><div class="bar-fill" style="width: 95%; background: var(--secondary);"></div></div>
             </div>
             <div class="bar-item">
               <div class="bar-label"><span>DeepSeek Coder</span><span>92%</span></div>
-              <div class="bar-track"><div class="bar-fill" style="width: 92%; background: var(--accent);"></div></div>
             </div>
           </div>
         </div>
         <div class="card">
           <div class="card-header"><span class="card-title">System Logs</span></div>
           <div class="terminal-window" id="analyticsLogs" style="height: 200px;">
@@ -938,8 +895,9 @@
               <div style="font-size: 0.8rem; color: var(--text-dim);">Security • Offline</div>
             </div>
           </div>
-          <div class="member-card" style="border-style: dashed; justify-content: center; color: var(--text-muted); cursor: pointer;">
-             <i class="fas fa-plus"></i> Add New Operative
           </div>
         </div>
       </div>
@@ -954,4 +912,13 @@
   <!-- Scripts -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>🚀 Studio Workflow Engine - The Alchemical Fusion</title>
+  <meta name="description" content="Prince x Wu-Tang x Attenborough - The Ultimate Code Forge">
   <!-- Google Fonts: Space Grotesk (Headers), Inter (Body), Fira Code (Code) -->
   <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=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
   <!-- FontAwesome for Icons -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
       --gradient-odyssey: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 50%, #c084fc 100%);
       --gradient-text: linear-gradient(to right, #c084fc, #f472b6);
+      --gradient-border: linear-gradient(to bottom right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
       --text-main: #f3f4f6;
       --text-muted: #9ca3af;
       display: flex;
       flex-direction: column;
       overflow-x: hidden;
+      /* Attenborough's Ambient Background */
+      background-image:
         radial-gradient(circle at 10% 20%, rgba(76, 29, 149, 0.15) 0%, transparent 40%),
         radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 40%);
     }
+    /* --- Ambient Animation: The Breath of the Machine --- */
     @keyframes drift {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
     }
     /* --- Scrollbar Styling --- */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: var(--bg-deep); }
+    ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
+    ::-webkit-scrollbar-thumb:hover { background: var(--primary); }
     /* --- Typography --- */
     h1, h2, h3, h4 {
       width: 80px;
       height: 80px;
       border: 2px solid transparent;
+      border-top: 2px solid var(--primary); /* Prince Purple */
+      border-right: 2px solid var(--secondary); /* Wu Gold */
       border-radius: 50%;
       animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
       position: relative;
       top: 5px; left: 5px; right: 5px; bottom: 5px;
       border-radius: 50%;
       border: 2px solid transparent;
+      border-top: 2px solid var(--accent); /* Attenborough Green */
       animation: spin 2s linear infinite reverse;
     }
       border-left: 3px solid var(--primary);
       padding: 1rem 1.5rem;
       border-radius: var(--radius-sm);
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
       display: flex;
       align-items: center;
       gap: 12px;
     }
     .version-tag {
+      background: rgba(255, 255, 255, 0.05);
       border: 1px solid var(--border);
       padding: 2px 8px;
       border-radius: 4px;
     .nav-dock::before {
       content: '';
       position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
       height: 1px;
       background: linear-gradient(90deg, transparent, var(--primary), transparent);
       opacity: 0.5;
     .nav-item:hover {
       color: var(--text-main);
+      background: rgba(255, 255, 255, 0.03);
     }
     .nav-item.active {
       box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
     }
+    .nav-item i { font-size: 1.1rem; }
     /* --- Content Sections --- */
     .section-view {
       animation: fadeUp 0.5s ease-out forwards;
     }
+    .section-view.active { display: grid; }
     /* --- Cards: The Artifacts --- */
     .card {
     }
     .card:hover {
+      border-color: rgba(255, 255, 255, 0.15);
+      box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
     }
     .card-header {
       gap: 0.75rem;
     }
+    .card-title i { color: var(--primary); }
     /* --- Code Editor: The Forge --- */
     .editor-container {
       color: #d1d5db;
     }
+    .log-entry { margin-bottom: 0.5rem; display: flex; gap: 0.5rem; }
     .log-time { color: var(--text-dim); }
     .log-type.info { color: var(--info); }
     .log-type.success { color: var(--accent); }
     }
     .btn-secondary:hover {
+      background: rgba(255, 255, 255, 0.05);
       border-color: var(--text-muted);
     }
+    .btn-group { display: flex; gap: 1rem; margin-top: 1.5rem; }
     /* --- Forms --- */
+    .form-group { margin-bottom: 1.25rem; }
     label {
       display: block;
     input, select, textarea {
       width: 100%;
+      background: rgba(0, 0, 0, 0.3);
       border: 1px solid var(--border);
       border-radius: var(--radius-sm);
       padding: 0.75rem 1rem;
     }
     /* --- Analytics Bars --- */
+    .bar-chart { display: flex; flex-direction: column; gap: 1rem; }
+    .bar-item { display: flex; flex-direction: column; gap: 0.25rem; }
     .bar-label {
       display: flex;
     }
     .member-card {
+      background: rgba(255, 255, 255, 0.02);
       padding: 1.5rem;
       border-radius: var(--radius-md);
       border: 1px solid var(--border);
     }
     .member-card:hover {
+      background: rgba(255, 255, 255, 0.05);
       transform: translateY(-3px);
       border-color: var(--primary);
     }
     /* --- Animations --- */
     @keyframes spin { to { transform: rotate(360deg); } }
     @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
     /* --- Footer --- */
     footer {
       text-decoration: none;
       transition: color 0.2s;
     }
     footer a:hover { color: white; text-decoration: underline; }
     /* --- Grid Layouts --- */
+    .layout-split { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 2rem; }
+    .layout-dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
+    .layout-form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
     @media (max-width: 1024px) {
       .layout-split, .layout-form { grid-template-columns: 1fr; }
           <div class="status-dot"></div>
           <span>SYSTEM OPTIMAL</span>
         </div>
         <button class="profile-btn" onclick="toggleUserMenu()">
           <i class="fas fa-user-astronaut"></i>
         </button>
   </header>
   <div class="main-container">
     <!-- Navigation -->
     <nav class="nav-dock">
       <button class="nav-item active" onclick="switchTab('studio')">
           </div>
           <div class="editor-main">
             <div class="line-numbers" id="lineNumbers">1</div>
+            <textarea id="codeInput" class="code-input" spellcheck="false"
             placeholder="# Begin your odyssey here..."
             oninput="updateLineNumbers()"></textarea>
           </div>
         <div class="card-header">
           <span class="card-title"><i class="fas fa-satellite-dish"></i> Output Stream</span>
           <div style="display: flex; gap: 0.5rem;">
+            <button class="btn btn-secondary" style="padding: 0.25rem 0.75rem; font-size: 0.75rem;" onclick="clearTerminal()">
               Clear
             </button>
           </div>
         <div class="card-header">
           <span class="card-title"><i class="fas fa-list-tree"></i> Active Operations</span>
         </div>
+        <div id="projectDashboard" class="terminal-window"
+          style="max-height: 100%; background: transparent; border: none; padding: 0;">
           <div style="text-align: center; padding-top: 4rem; color: var(--text-dim);">
             <i class="fas fa-cube fa-3x" style="margin-bottom: 1rem; opacity: 0.2;"></i>
             <p>No active constructs found.</p>
           <div class="bar-chart">
             <div class="bar-item">
               <div class="bar-label"><span>GPT-4 Turbo</span><span>98%</span></div>
+              <div class="bar-track">
+                <div class="bar-fill" style="width: 98%;"></div>
+              </div>
             </div>
             <div class="bar-item">
               <div class="bar-label"><span>Claude 3 Opus</span><span>95%</span></div>
+              <div class="bar-track">
+                <div class="bar-fill" style="width: 95%; background: var(--secondary);"></div>
+              </div>
             </div>
             <div class="bar-item">
               <div class="bar-label"><span>DeepSeek Coder</span><span>92%</span></div>
+              <div class="bar-track">
+                <div class="bar-fill" style="width: 92%; background: var(--accent);"></div>
+              </div>
             </div>
           </div>
         </div>
         <div class="card">
           <div class="card-header"><span class="card-title">System Logs</span></div>
           <div class="terminal-window" id="analyticsLogs" style="height: 200px;">
               <div style="font-size: 0.8rem; color: var(--text-dim);">Security • Offline</div>
             </div>
           </div>
+          <div class="member-card"
+            style="border-style: dashed; justify-content: center; color: var(--text-muted); cursor: pointer;">
+            <i class="fas fa-plus"></i> Add New Operative
           </div>
         </div>
       </div>
   <!-- Scripts -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
+  <script>
+    /**
+     * THE FUSION LOGIC
+     * Where Prince meets Wu-Tang in the jungle of code.
+     */
+    // --- Initialization ---
+    window.addEventListener('load',