Update index.html

index.html

@@ -6,6 +6,7 @@
     <title>Neko-Void | Void Linux Respin</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
     <style>
+        /* --- DISEÑO INTEGRADO --- */
         :root {
             --bg-color: #282a36;
             --current-line: #44475a;
@@ -29,11 +30,14 @@
             font-family: 'Inter', sans-serif;
             line-height: 1.6;
             display: flex;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
         }
 
         h1, h2, h3 { font-family: 'Arthur Matilde', 'Inter', sans-serif; font-weight: 700; }
 
-        /* --- SIDEBAR --- */
         .sidebar {
             width: var(--sidebar-width);
             height: 100vh;
@@ -48,121 +52,48 @@
             z-index: 1000;
         }
 
-        .sidebar-brand {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            margin-bottom: 50px;
-            text-decoration: none;
-        }
-
-        .sidebar-logo-img {
-            width: 60px;
-            height: auto;
-            margin-bottom: 15px;
-        }
-
-        .sidebar-brand span {
-            color: var(--green);
-            font-size: 1.2rem;
-            font-family: 'Fira Code', monospace;
-            font-weight: bold;
-        }
+        .sidebar-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 50px; text-decoration: none; cursor: pointer; }
+        .sidebar-logo-img { width: 60px; height: auto; margin-bottom: 15px; }
+        .sidebar-brand span { color: var(--green); font-size: 1.2rem; font-family: 'Fira Code', monospace; font-weight: bold; }
 
         .nav-links { list-style: none; flex-grow: 1; }
-        .nav-link {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            color: var(--comment);
-            text-decoration: none;
-            padding: 12px 15px;
-            border-radius: 8px;
-            font-family: 'Fira Code', monospace;
-            font-size: 0.9rem;
-            transition: var(--transition);
-        }
-
-        .nav-link:hover, .nav-link.active {
-            background: var(--current-line);
-            color: var(--green);
-        }
-
-        /* --- MAIN CONTENT --- */
-        main {
-            margin-left: var(--sidebar-width);
-            width: calc(100% - var(--sidebar-width));
-        }
+        .nav-link { display: flex; align-items: center; gap: 12px; color: var(--comment); text-decoration: none; padding: 12px 15px; border-radius: 8px; font-family: 'Fira Code', monospace; font-size: 0.9rem; transition: var(--transition); cursor: pointer; }
+        .nav-link:hover, .nav-link.active { background: var(--current-line); color: var(--green); }
 
+        main { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); }
         .container { max-width: 1000px; margin: 0 auto; padding: 80px 40px; }
 
-        /* --- HERO --- */
-        .hero {
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            background: radial-gradient(circle at top, #383a59 0%, var(--bg-color) 80%);
-            padding: 60px 20px;
-        }
-
-        .main-logo {
-            width: 180px;
-            height: auto;
-            margin-bottom: 30px;
-            filter: drop-shadow(0 0 15px rgba(80, 250, 123, 0.3));
-        }
-
+        .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: radial-gradient(circle at top, #383a59 0%, var(--bg-color) 80%); padding: 60px 20px; }
+        .main-logo { width: 180px; height: auto; margin-bottom: 30px; filter: drop-shadow(0 0 15px rgba(80, 250, 123, 0.3)); }
         .hero h1 { font-size: clamp(3rem, 8vw, 5.5rem); color: var(--green); margin-bottom: 20px; }
 
         .project-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }
-        .btn-link {
-            color: var(--comment); text-decoration: none; font-family: 'Fira Code', monospace;
-            font-size: 0.8rem; padding: 6px 14px; background: rgba(0,0,0,0.2);
-            border-radius: 6px; border: 1px solid var(--selection); transition: var(--transition);
-        }
+        .btn-link { color: var(--comment); text-decoration: none; font-family: 'Fira Code', monospace; font-size: 0.8rem; padding: 6px 14px; background: rgba(0,0,0,0.2); border-radius: 6px; border: 1px solid var(--selection); transition: var(--transition); cursor: pointer; }
         .btn-link:hover { color: var(--cyan); border-color: var(--cyan); }
 
-        /* --- TABS --- */
         .tabs-wrapper { background: var(--current-line); border-radius: 12px; overflow: hidden; margin-bottom: 60px; border: 1px solid var(--selection); }
         .tabs-header { display: flex; background: rgba(0,0,0,0.3); }
-        .tab-btn {
-            flex: 1; padding: 18px; border: none; background: none; color: var(--comment);
-            font-family: 'Fira Code', monospace; cursor: pointer; transition: var(--transition);
-            font-size: 0.9rem;
-        }
+        .tab-btn { flex: 1; padding: 18px; border: none; background: none; color: var(--comment); font-family: 'Fira Code', monospace; cursor: pointer; transition: var(--transition); font-size: 0.9rem; }
         .tab-btn.active { color: var(--green); background: rgba(80, 250, 123, 0.05); border-bottom: 2px solid var(--green); }
 
         .tab-content { display: none; padding: 40px; animation: fadeIn 0.4s ease; }
         .tab-content.active { display: block; }
-
         @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
 
-        /* --- GALLERY --- */
         .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
-        .gallery-item img { width: 100%; border-radius: 8px; border: 1px solid var(--selection); display: block; transition: var(--transition); }
+        .gallery-item img { width: 100%; border-radius: 8px; border: 1px solid var(--selection); display: block; transition: var(--transition); pointer-events: none; }
         .gallery-item:hover img { border-color: var(--green); }
 
-        /* --- DOWNLOADS --- */
         .download-cta { background: #1a1b26; padding: 80px 40px; text-align: center; border-radius: 20px; margin: 40px 0; border: 1px solid var(--selection); }
         .download-group { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 35px; }
-        .btn-main {
-            padding: 16px 35px; border-radius: 10px; font-weight: 700; text-decoration: none;
-            transition: var(--transition); display: flex; align-items: center; gap: 10px; font-size: 1.05rem;
-        }
+        .btn-main { padding: 16px 35px; border-radius: 10px; font-weight: 700; transition: var(--transition); display: flex; align-items: center; gap: 10px; font-size: 1.05rem; cursor: pointer; }
         .btn-primary { background: var(--green); color: var(--bg-color); }
         .btn-outline { border: 2px solid var(--purple); color: var(--purple); }
         .btn-main:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.4); }
 
-        /* --- RESPONSIVE --- */
         @media (max-width: 992px) {
             body { flex-direction: column; }
-            .sidebar {
-                width: 100%; height: auto; position: sticky; padding: 15px 25px;
-                flex-direction: row; align-items: center; justify-content: space-between;
-            }
+            .sidebar { width: 100%; height: auto; position: sticky; padding: 15px 25px; flex-direction: row; align-items: center; justify-content: space-between; }
             .sidebar-brand { margin-bottom: 0; flex-direction: row; gap: 10px; }
             .sidebar-logo-img { width: 35px; margin-bottom: 0; }
             .nav-links { display: flex; gap: 10px; }
@@ -177,33 +108,33 @@
         }
     </style>
 </head>
-<body>
+<body oncontextmenu="return false;">
 
     <nav class="sidebar">
-        <a href="#inicio" class="sidebar-brand">
-            <img src="logo.png" alt="Logo Neko-Void" class="sidebar-logo-img">
+        <span onclick="window.location.href='#inicio'" class="sidebar-brand">
+            <img src="https://huggingface.co/arepaconcafe/neko-base/resolve/main/logo.png" alt="Logo Neko-Void" class="sidebar-logo-img">
             <span>NEKO_VOID</span>
-        </a>
+        </span>
         <ul class="nav-links">
-            <li class="nav-item"><a href="#inicio" class="nav-link active"><span>01</span> Inicio</a></li>
-            <li class="nav-item"><a href="#detalles" class="nav-link"><span>02</span> Detalles</a></li>
-            <li class="nav-item"><a href="#galeria" class="nav-link"><span>03</span> Galería</a></li>
-            <li class="nav-item"><a href="#descargas" class="nav-link"><span>04</span> Descargas</a></li>
+            <li class="nav-item"><span onclick="window.location.href='#inicio'" class="nav-link active" data-target="inicio"><span>01</span> Inicio</span></li>
+            <li class="nav-item"><span onclick="window.location.href='#detalles'" class="nav-link" data-target="detalles"><span>02</span> Detalles</span></li>
+            <li class="nav-item"><span onclick="window.location.href='#galeria'" class="nav-link" data-target="galeria"><span>03</span> Galería</span></li>
+            <li class="nav-item"><span onclick="window.location.href='#descargas'" class="nav-link" data-target="descargas"><span>04</span> Descargas</span></li>
         </ul>
-        <div style="font-size: 0.7rem; color: var(--comment); text-align: center; margin-top: 20px;">
-            v. Beta 4
+        <div id="version-tag" style="font-size: 0.7rem; color: var(--comment); text-align: center; margin-top: 20px;">
+            Cargando versión...
         </div>
     </nav>
 
     <main>
         <section id="inicio" class="hero">
-            <img src="logo.png" alt="Neko-Void Logo" class="main-logo">
+            <img src="https://huggingface.co/arepaconcafe/neko-base/resolve/main/logo.png" alt="Neko-Void Logo" class="main-logo">
             <span>&lt;respin_void_linux /&gt;</span>
             <h1>NEKO VOID</h1>
             <div class="project-links">
-                <a href="https://sourceforge.net/projects/neko-void/" class="btn-link" target="_blank">SourceForge</a>
-                <a href="https://codeberg.org/javiercplus/Neko-Void" class="btn-link" target="_blank">Codeberg</a>
-                <a href="https://codeberg.org/javiercplus/Kasha-Installer" class="btn-link" target="_blank">Kasha Installer</a>
+                <span class="btn-link" onclick="window.open('https://sourceforge.net/projects/neko-void/', '_blank')">SourceForge</span>
+                <span class="btn-link" onclick="window.open('https://codeberg.org/javiercplus/Neko-Void', '_blank')">Codeberg</span>
+                <span class="btn-link" onclick="window.open('https://codeberg.org/javiercplus/Kasha-Installer', '_blank')">Kasha Installer</span>
             </div>
         </section>
 
@@ -233,10 +164,10 @@
         <section id="galeria" class="container">
             <h2 style="color: var(--pink); text-align: center; margin-bottom: 40px;">Capturas</h2>
             <div class="gallery-grid">
-                <div class="gallery-item"><img src="./1.png" alt="Desktop View"></div>
-                <div class="gallery-item"><img src="./2.png" alt="Terminal View"></div>
-                <div class="gallery-item"><img src="./3.png" alt="Menu View"></div>
-                <div class="gallery-item"><img src="./4.png" alt="Gaming View"></div>
+                <div class="gallery-item"><img src="https://huggingface.co/arepaconcafe/neko-base/resolve/main/1.png" alt="Desktop View"></div>
+                <div class="gallery-item"><img src="https://huggingface.co/arepaconcafe/neko-base/resolve/main/2.png" alt="Terminal View"></div>
+                <div class="gallery-item"><img src="https://huggingface.co/arepaconcafe/neko-base/resolve/main/3.png" alt="Menu View"></div>
+                <div class="gallery-item"><img src="https://huggingface.co/arepaconcafe/neko-base/resolve/main/4.png" alt="Gaming View"></div>
             </div>
         </section>
 
@@ -244,8 +175,8 @@
             <div class="download-cta">
                 <h2 style="color: var(--green);">Descarga Neko-Void</h2>
                 <div class="download-group">
-                    <a href="https://sourceforge.net/projects/neko-void/files/isos/nekovoid-beta-4-xorg.iso/download" class="btn-main btn-primary">Edición Xorg</a>
-                    <a href="https://sourceforge.net/projects/neko-void/files/isos/nekovoid-beta-4-xlibre.iso/download" class="btn-main btn-outline">Edición XLibre</a>
+                    <span id="link-xorg" class="btn-main btn-primary">Edición Xorg</span>
+                    <span id="link-xlibre" class="btn-main btn-outline">Edición XLibre</span>
                 </div>
             </div>
         </section>
@@ -266,6 +197,40 @@
             evt.currentTarget.classList.add("active");
         }
 
+        async function loadDownloadsFromXML() {
+            const xmlUrl = 'https://huggingface.co/arepaconcafe/neko-base/resolve/main/downloads.xml';
+            try {
+                const response = await fetch(xmlUrl);
+                if (!response.ok) throw new Error('No se pudo cargar el archivo XML');
+                
+                const xmlText = await response.text();
+                const parser = new DOMParser();
+                const xmlDoc = parser.parseFromString(xmlText, "text/xml");
+
+                const release = xmlDoc.getElementsByTagName("release")[0];
+                if (release) {
+                    const version = release.getAttribute("version");
+                    document.getElementById('version-tag').textContent = `v. ${version}`;
+                }
+
+                const isos = xmlDoc.getElementsByTagName("iso");
+                for (let i = 0; i < isos.length; i++) {
+                    const id = isos[i].getAttribute("id");
+                    const url = isos[i].textContent.trim();
+                    
+                    if (id === "link-xorg") {
+                        document.getElementById('link-xorg').onclick = () => window.open(url, '_blank');
+                    }
+                    if (id === "link-xlibre") {
+                        document.getElementById('link-xlibre').onclick = () => window.open(url, '_blank');
+                    }
+                }
+            } catch (error) {
+                console.error("Error al sincronizar con Hugging Face:", error);
+                document.getElementById('version-tag').textContent = "Error de sincronización";
+            }
+        }
+
         window.addEventListener('scroll', () => {
             let current = '';
             const sections = document.querySelectorAll('section');
@@ -278,11 +243,13 @@
 
             document.querySelectorAll('.nav-link').forEach(link => {
                 link.classList.remove('active');
-                if (link.getAttribute('href').includes(current)) {
+                if (link.getAttribute('data-target') === current) {
                     link.classList.add('active');
                 }
             });
         });
+
+        window.onload = loadDownloadsFromXML;
     </script>
 </body>
 </html>