Spaces:

b08x
/

anycoder-6a0aba2e

Running

App Files Files Community

b08x commited on Feb 18

Commit

35f3ceb

verified ·

1 Parent(s): f451940

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +603 -19

index.html CHANGED Viewed

@@ -1,19 +1,603 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Syncopated Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              rustic: {
+                900: '#1c1917', // Very dark warm background
+                800: '#292524', // Card background
+                700: '#44403c', // Borders
+                600: '#57534e', // Hover states
+                500: '#78716c', // Muted text
+              },
+              rust: {
+                DEFAULT: '#c2410c', // Primary Rust
+                light: '#ea580c',
+                dim: 'rgba(194, 65, 12, 0.2)',
+              }
+            },
+            fontFamily: {
+              sans: ['Inter', 'sans-serif'],
+            }
+          }
+        }
+      }
+    </script>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+      body {
+        background-color: #1c1917;
+        color: #e7e5e4;
+        font-family: 'Inter', sans-serif;
+      }
+      /* Custom Scrollbar */
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: #1c1917;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #44403c;
+        border-radius: 4px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #c2410c;
+      }
+      /* Chatbot Popup Animations */
+      .chatbot-toggle {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .chatbot-panel {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        transform-origin: bottom right;
+      }
+      .chatbot-panel.closed {
+        opacity: 0;
+        transform: scale(0.95) translateY(20px);
+        pointer-events: none;
+      }
+      /* Link Cards Hover Effects */
+      .link-card {
+        transition: all 0.2s ease;
+        border-left: 3px solid transparent;
+      }
+      .link-card:hover {
+        background-color: #292524;
+        border-left: 3px solid #c2410c;
+        transform: translateX(4px);
+      }
+      /* Input Focus Styles */
+      input:focus, select:focus {
+        outline: none;
+        border-color: #c2410c;
+        box-shadow: 0 0 0 2px rgba(194, 65, 12, 0.2);
+      }
+      .nav-item.active {
+        background-color: rgba(194, 65, 12, 0.1);
+        color: #c2410c;
+        border-right: 3px solid #c2410c;
+      }
+      .iframe-container {
+        background: #000;
+        border-radius: 0.5rem;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body class="h-screen flex flex-col overflow-hidden">
+    <!-- Header -->
+    <header class="h-16 bg-rustic-800 border-b border-rustic-700 flex items-center justify-between px-6 shrink-0 z-20">
+      <div class="flex items-center space-x-4">
+        <div class="w-8 h-8 rounded bg-rust flex items-center justify-center shadow-lg shadow-rust/20">
+          <i class="fas fa-cube text-white text-sm"></i>
+        </div>
+        <h1 class="text-xl font-semibold tracking-wide text-gray-100">SYNCOPATED</h1>
+      </div>
+      <div class="flex-1 max-w-2xl mx-8 hidden md:block">
+        <div class="flex space-x-2">
+          <form id="meta-search-form" class="relative flex-1">
+            <input
+              type="text"
+              id="search-input"
+              name="q"
+              placeholder="Search Global..."
+              class="w-full bg-rustic-900 border border-rustic-700 rounded-md py-1.5 px-4 pl-9 text-sm text-gray-300 focus:outline-none focus:border-rust transition"
+            />
+            <button type="submit" class="absolute left-3 top-2 text-rustic-500">
+              <i class="fas fa-globe text-xs"></i>
+            </button>
+          </form>
+          <form id="rubygems-search-form" class="relative w-64 hidden lg:block">
+            <input
+              type="text"
+              id="rubygems-search-input"
+              name="q"
+              placeholder="RubyGems..."
+              class="w-full bg-rustic-900 border border-rustic-700 rounded-md py-1.5 px-4 pl-9 text-sm text-gray-300 focus:outline-none focus:border-rust transition"
+            />
+            <button type="submit" class="absolute left-3 top-2 text-rustic-500">
+              <i class="fas fa-gem text-xs text-rust-light"></i>
+            </button>
+          </form>
+        </div>
+      </div>
+      <div class="flex items-center space-x-4">
+        <button class="text-gray-400 hover:text-rust-light transition">
+          <i class="fas fa-bell"></i>
+        </button>
+        <div class="w-8 h-8 rounded-full bg-rustic-700 flex items-center justify-center cursor-pointer border border-rustic-600">
+          <i class="fas fa-user text-gray-400 text-xs"></i>
+        </div>
+      </div>
+    </header>
+    <!-- Main Layout -->
+    <div class="flex flex-1 overflow-hidden">
+      <!-- Left Column: Link Modals (Prominently Featured) -->
+      <aside class="w-80 bg-rustic-900 border-r border-rustic-700 flex flex-col overflow-y-auto shrink-0 hidden md:flex">
+        <div class="p-4">
+          <h2 class="text-xs font-bold text-rustic-500 uppercase tracking-wider mb-4 pl-2">Launcher</h2>
+          <!-- Dashboard View (Link Categories) -->
+          <div id="dashboard-links-view" class="space-y-6">
+            <!-- Links will be injected here via JS -->
+          </div>
+        </div>
+        <!-- Secondary Nav for other tabs -->
+        <div class="mt-auto p-4 border-t border-rustic-700">
+           <nav class="space-y-1">
+            <button class="nav-item w-full text-left px-3 py-2 rounded-md text-sm font-medium flex items-center space-x-3 text-gray-400 hover:bg-rustic-800" data-tab="documents">
+              <i class="fas fa-file-alt w-4"></i>
+              <span>Documents</span>
+            </button>
+            <button class="nav-item w-full text-left px-3 py-2 rounded-md text-sm font-medium flex items-center space-x-3 text-gray-400 hover:bg-rustic-800" data-tab="generate">
+              <i class="fas fa-code w-4"></i>
+              <span>Generate</span>
+            </button>
+            <button class="nav-item w-full text-left px-3 py-2 rounded-md text-sm font-medium flex items-center space-x-3 text-gray-400 hover:bg-rustic-800" data-tab="settings">
+              <i class="fas fa-cog w-4"></i>
+              <span>Settings</span>
+            </button>
+          </nav>
+        </div>
+      </aside>
+      <!-- Right Column: Main Content Area -->
+      <main class="flex-1 bg-rustic-900 overflow-y-auto relative p-6" id="main-content-area">
+        <!-- Tab Content: Documents -->
+        <div id="documents" class="tab-content hidden">
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <div class="bg-rustic-800 rounded-xl p-1 border border-rustic-700 shadow-lg">
+              <div class="bg-rustic-900 rounded-t-lg px-4 py-3 border-b border-rustic-700 flex justify-between items-center">
+                <span class="text-sm font-medium text-gray-300">Document Management</span>
+                <i class="fas fa-external-link-alt text-xs text-gray-500"></i>
+              </div>
+              <div class="h-64 iframe-container">
+                <iframe src="https://docs.example.com/browse" class="w-full h-full" allowfullscreen></iframe>
+              </div>
+            </div>
+            <div class="bg-rustic-800 rounded-xl p-1 border border-rustic-700 shadow-lg">
+              <div class="bg-rustic-900 rounded-t-lg px-4 py-3 border-b border-rustic-700 flex justify-between items-center">
+                <span class="text-sm font-medium text-gray-300">Knowledge Base</span>
+                <i class="fas fa-external-link-alt text-xs text-gray-500"></i>
+              </div>
+              <div class="h-64 iframe-container">
+                <iframe src="https://wiki.example.com/home" class="w-full h-full" allowfullscreen></iframe>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Tab Content: Generate -->
+        <div id="generate" class="tab-content hidden">
+          <div class="grid grid-cols-1 gap-6">
+             <div class="bg-rustic-800 rounded-xl p-1 border border-rustic-700 shadow-lg">
+              <div class="bg-rustic-900 rounded-t-lg px-4 py-3 border-b border-rustic-700 flex justify-between items-center">
+                <span class="text-sm font-medium text-gray-300">Code Generator</span>
+                <i class="fas fa-robot text-rust"></i>
+              </div>
+              <div class="h-96 iframe-container">
+                <iframe src="https://directory.example.com" class="w-full h-full" allowfullscreen></iframe>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Tab Content: Settings -->
+        <div id="settings" class="tab-content hidden">
+          <div class="max-w-2xl">
+            <div class="bg-rustic-800 rounded-xl p-6 border border-rustic-700">
+              <h3 class="text-lg font-medium text-white mb-6">Data Management</h3>
+              <div class="flex items-center space-x-4">
+                <button id="exportLinksBtn" class="bg-rust hover:bg-rust-light text-white font-medium py-2 px-4 rounded-lg flex items-center space-x-2 transition shadow-lg shadow-rust/20">
+                  <i class="fas fa-file-export"></i>
+                  <span>Export Config</span>
+                </button>
+                <button id="importLinksBtn" class="bg-rustic-700 hover:bg-rustic-600 text-white font-medium py-2 px-4 rounded-lg flex items-center space-x-2 transition">
+                  <i class="fas fa-file-import"></i>
+                  <span>Import Config</span>
+                </button>
+                <input type="file" id="importFileInput" class="hidden" accept=".json" />
+              </div>
+              <p class="text-sm text-rustic-500 mt-4">
+                Manage your sidebar link configuration here.
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- Default View (Welcome / Empty state if needed, but links are in sidebar now) -->
+        <div id="dashboard" class="tab-content block h-full flex items-center justify-center text-rustic-500 flex-col">
+            <div class="text-center">
+                <i class="fas fa-compass text-4xl mb-4 text-rustic-700"></i>
+                <p>Select a category from the launcher to get started.</p>
+            </div>
+        </div>
+      </main>
+    </div>
+    <!-- Chatbot Popup (Refactored Main View) -->
+    <div class="fixed bottom-6 right-6 z-50 flex flex-col items-end">
+        <!-- Chat Panel -->
+        <div id="chatbot-panel" class="chatbot-panel closed bg-rustic-800 rounded-xl shadow-2xl border border-rustic-700 w-[380px] h-[500px] mb-4 flex flex-col overflow-hidden">
+            <div class="bg-rust p-3 flex justify-between items-center shrink-0">
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 bg-white rounded-full animate-pulse"></div>
+                    <span class="font-medium text-white text-sm">Assistant</span>
+                </div>
+                <button id="closeChatBtn" class="text-white hover:text-gray-200">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="flex-1 bg-black relative">
+                <iframe
+                    src="http://ninjabot/chatbot/YuXRYou2mbnDqCXc"
+                    class="w-full h-full"
+                    frameborder="0"
+                    allow="microphone">
+                </iframe>
+            </div>
+        </div>
+        <!-- Toggle Button -->
+        <button id="chatbot-toggle-btn" class="chatbot-toggle w-14 h-14 bg-rust hover:bg-rust-light rounded-full shadow-lg shadow-rust/40 flex items-center justify-center text-white transform hover:scale-110">
+            <i class="fas fa-comment-dots text-xl"></i>
+        </button>
+    </div>
+    <!-- Link Settings Modal -->
+    <div id="linkSettingsModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center hidden z-[60]">
+      <div class="bg-rustic-800 border border-rustic-700 rounded-lg p-6 w-full max-w-md shadow-2xl">
+        <div class="flex justify-between items-center mb-6">
+          <h3 class="text-xl font-semibold text-white">Edit Launcher</h3>
+          <button id="modalCloseBtn" class="text-gray-400 hover:text-white transition">
+            <i class="fas fa-times"></i>
+          </button>
+        </div>
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-400 mb-1">Category Title</label>
+            <input type="text" id="categoryName" class="w-full bg-rustic-900 border border-rustic-700 rounded px-3 py-2 text-white" />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-400 mb-2">Links</label>
+            <div id="linkItems" class="space-y-3 max-h-64 overflow-y-auto pr-2">
+              <!-- Links injected here -->
+            </div>
+            <button id="addNewLinkBtn" class="mt-3 text-rust text-sm flex items-center space-x-1 hover:text-rust-light transition">
+              <i class="fas fa-plus"></i>
+              <span>Add New Link</span>
+            </button>
+          </div>
+        </div>
+        <div class="flex justify-end space-x-3 mt-8">
+          <button id="modalCancelBtn" class="px-4 py-2 rounded-md bg-rustic-900 hover:bg-rustic-700 text-gray-300 transition border border-rustic-700">
+            Cancel
+          </button>
+          <button id="saveChangesBtn" class="px-4 py-2 rounded-md bg-rust hover:bg-rust-light text-white transition shadow-lg shadow-rust/20">
+            Save Changes
+          </button>
+        </div>
+      </div>
+    </div>
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        // --- State ---
+        let currentCategory = "";
+        const storageKey = "dashboardLinks";
+        const iconClasses = {
+          blue: "fa-tachometer-alt text-blue-400",
+          green: "fa-project-diagram text-green-400",
+          purple: "fa-comments text-purple-400",
+          yellow: "fa-calendar text-yellow-400",
+          red: "fa-book text-red-400",
+          teal: "fa-users text-teal-400",
+          rust: "fa-link text-rust-light",
+          gray: "fa-anchor text-gray-400"
+        };
+        const defaultLinks = {
+          quick: {
+            title: "Quick Access",
+            links: [
+              { name: "Analytics Dashboard", url: "#", color: "blue" },
+              { name: "Project Tracker", url: "#", color: "green" },
+              { name: "Team Chat", url: "#", color: "purple" },
+            ],
+          },
+          resources: {
+            title: "Company Hub",
+            links: [
+              { name: "Company Calendar", url: "#", color: "yellow" },
+              { name: "Employee Handbook", url: "#", color: "red" },
+              { name: "Org Directory", url: "#", color: "teal" },
+            ],
+          },
+          support: {
+            title: "Support Zone",
+            links: [
+              { name: "Submit Ticket", url: "#", color: "rust" },
+              { name: "Help Center", url: "#", color: "gray" },
+            ],
+          }
+        };
+        // --- Functions ---
+        const getStoredLinks = () => {
+          const links = localStorage.getItem(storageKey);
+          return links ? JSON.parse(links) : defaultLinks;
+        };
+        const saveLinksToStorage = (links) => {
+          localStorage.setItem(storageKey, JSON.stringify(links));
+        };
+        const renderSidebarLinks = () => {
+          const container = document.getElementById("dashboard-links-view");
+          const allLinks = getStoredLinks();
+          container.innerHTML = "";
+          Object.keys(allLinks).forEach((category) => {
+            const data = allLinks[category];
+            const section = document.createElement("div");
+            section.className = "mb-2";
+            // Header with Edit Button
+            const header = document.createElement("div");
+            header.className = "flex justify-between items-center mb-2 px-2";
+            header.innerHTML = `
+              <h3 class="font-semibold text-gray-200 text-sm uppercase tracking-wide">${data.title}</h3>
+              <button class="text-rustic-500 hover:text-rust transition text-xs" data-category="${category}">
+                <i class="fas fa-cog"></i>
+              </button>
+            `;
+            // Links List
+            const list = document.createElement("div");
+            list.className = "space-y-1";
+            data.links.forEach(link => {
+                const icon = iconClasses[link.color] || "fa-link text-gray-400";
+                const a = document.createElement("a");
+                a.href = link.url;
+                a.target = "_blank";
+                a.className = "link-card flex items-center space-x-3 py-2 px-3 rounded-md text-gray-400 hover:text-white cursor-pointer";
+                a.innerHTML = `
+                    <i class="fas ${icon} w-4 text-center"></i>
+                    <span class="text-sm truncate">${link.name}</span>
+                `;
+                list.appendChild(a);
+            });
+            section.appendChild(header);
+            section.appendChild(list);
+            container.appendChild(section);
+          });
+          // Re-attach event listeners for edit buttons
+          document.querySelectorAll("#dashboard-links-view button[data-category]").forEach(btn => {
+            btn.addEventListener("click", (e) => showLinkSettings(e.currentTarget.dataset.category));
+          });
+        };
+        const hideLinkSettings = () => document.getElementById("linkSettingsModal").classList.add("hidden");
+        const addNewLink = (name = "", url = "", color = "rust") => {
+          const linkItems = document.getElementById("linkItems");
+          const newLink = document.createElement("div");
+          newLink.className = "flex items-center space-x-2 link-item-entry";
+          let optionsHtml = Object.keys(iconClasses)
+            .map((key) => `<option value="${key}" ${key === color ? "selected" : ""}>${key.charAt(0).toUpperCase() + key.slice(1)}</option>`)
+            .join("");
+          newLink.innerHTML = `
+            <input type="text" placeholder="Name" class="flex-1 bg-rustic-900 border border-rustic-700 rounded px-2 py-1.5 text-white text-sm" value="${name}">
+            <input type="text" placeholder="URL" class="flex-1 bg-rustic-900 border border-rustic-700 rounded px-2 py-1.5 text-white text-sm" value="${url}">
+            <select class="bg-rustic-900 border border-rustic-700 rounded px-1 py-1.5 text-white text-sm">${optionsHtml}</select>
+            <button class="text-red-500 hover:text-red-400 p-1.5 remove-link-btn"><i class="fas fa-trash"></i></button>
+          `;
+          linkItems.appendChild(newLink);
+        };
+        const showLinkSettings = (category) => {
+          currentCategory = category;
+          const allLinks = getStoredLinks();
+          const data = allLinks[currentCategory];
+          document.getElementById("categoryName").value = data.title;
+          const linkItemsContainer = document.getElementById("linkItems");
+          linkItemsContainer.innerHTML = "";
+          if (data.links) {
+            data.links.forEach(link => addNewLink(link.name, link.url, link.color));
+          }
+          document.getElementById("linkSettingsModal").classList.remove("hidden");
+        };
+        const saveLinkSettings = () => {
+          const newTitle = document.getElementById("categoryName").value;
+          const linkItems = document.querySelectorAll("#linkItems .link-item-entry");
+          const newLinks = Array.from(linkItems)
+            .map((item) => ({
+              name: item.children[0].value,
+              url: item.children[1].value,
+              color: item.children[2].value,
+            }))
+            .filter((link) => link.name && link.url);
+          const allLinks = getStoredLinks();
+          allLinks[currentCategory] = { title: newTitle, links: newLinks };
+          saveLinksToStorage(allLinks);
+          renderSidebarLinks();
+          hideLinkSettings();
+        };
+        // --- Chatbot Logic ---
+        const chatPanel = document.getElementById('chatbot-panel');
+        const chatBtn = document.getElementById('chatbot-toggle-btn');
+        const closeChatBtn = document.getElementById('closeChatBtn');
+        let isChatOpen = false;
+        const toggleChat = () => {
+            isChatOpen = !isChatOpen;
+            if(isChatOpen) {
+                chatPanel.classList.remove('closed');
+                chatBtn.classList.add('hidden');
+            } else {
+                chatPanel.classList.add('closed');
+                setTimeout(() => {
+                    if(!isChatOpen) chatBtn.classList.remove('hidden');
+                }, 300);
+            }
+        };
+        chatBtn.addEventListener('click', toggleChat);
+        closeChatBtn.addEventListener('click', toggleChat);
+        // --- Tab Logic ---
+        const switchTab = (event) => {
+            const tabId = event.currentTarget.dataset.tab;
+            // Hide all tab contents
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('block'));
+            // Show target
+            const target = document.getElementById(tabId);
+            if(target) {
+                target.classList.remove('hidden');
+                target.classList.add('block');
+            }
+            // Update nav state (if it's a side nav item)
+            document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
+            event.currentTarget.classList.add('active');
+        };
+        // --- Search Handlers ---
+        const handleMetaSearch = (e) => {
+            e.preventDefault();
+            const q = document.getElementById('search-input').value;
+            if(q) window.open(`https://www.google.com/search?q=${encodeURIComponent(q)}`, '_blank');
+        };
+        const handleRubyGemsSearch = (e) => {
+            e.preventDefault();
+            const q = document.getElementById('rubygems-search-input').value;
+            if(q) window.open(`https://rubygems.org/search?query=${encodeURIComponent(q)}`, '_blank');
+        };
+        // --- Import/Export ---
+        const handleExport = () => {
+            const data = localStorage.getItem(storageKey);
+            if(!data) return;
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(new Blob([data], {type: 'application/json'}));
+            a.download = 'links.json';
+            a.click();
+        };
+        const handleImport = (e) => {
+            const file = e.target.files[0];
+            if(!file) return;
+            const r = new FileReader();
+            r.onload = (ev) => {
+                try {
+                    const data = JSON.parse(ev.target.result);
+                    localStorage.setItem(storageKey, JSON.stringify(data));
+                    renderSidebarLinks();
+                    alert("Imported successfully");
+                } catch(err) { alert("Invalid file"); }
+            };
+            r.readAsText(file);
+            e.target.value = '';
+        };
+        // --- Init ---
+        renderSidebarLinks();
+        // Listeners
+        document.getElementById('meta-search-form').addEventListener('submit', handleMetaSearch);
+        document.getElementById('rubygems-search-form').addEventListener('submit', handleRubyGemsSearch);
+        // Sidebar Navigation
+        document.querySelectorAll('.nav-item').forEach(item => {
+            item.addEventListener('click', switchTab);
+        });
+        // Modal
+        document.getElementById('modalCloseBtn').addEventListener('click', hideLinkSettings);
+        document.getElementById('modalCancelBtn').addEventListener('click', hideLinkSettings);
+        document.getElementById('saveChangesBtn').addEventListener('click', saveLinkSettings);
+        document.getElementById('addNewLinkBtn').addEventListener('click', () => addNewLink());
+        document.getElementById('linkItems').addEventListener('click', (e) => {
+            if(e.target.closest('.remove-link-btn')) e.target.closest('.link-item-entry').remove();
+        });
+        // Import/Export
+        document.getElementById('exportLinksBtn').addEventListener('click', handleExport);
+        document.getElementById('importLinksBtn').addEventListener('click', () => document.getElementById('importFileInput').click());
+        document.getElementById('importFileInput').addEventListener('change', handleImport);
+      });
+    </script>
+  </body>
+</html>