Diferencias

Muestra las diferencias entre dos versiones de la página.

--- otros:inventario [2026/05/18 16:27] – jesus
+++ otros:inventario [2026/05/18 16:29] (actual) – jesus
@@ Línea 2: / Línea 2: @@
 <html>
 <style>
-  /* --- MOTEUR DE CATALOGATION CRT --- */
+  /* --- MOTOR VISUAL INVENTARIO CRT --- */
-  .pcw-monitor-ultra {
+  .pcw-inventory-container {
-    background-color: #000b00; border: 12px solid #2a2a2a; border-radius: 15px;
+    background-color: #000500;
-    padding: 25px; margin: 25px 0; font-family: 'Courier New', Courier, monospace;
+    border: 10px solid #333333;
-    position: relative; overflow: hidden; box-shadow: inset 0 0 60px rgba(0,255,0,0.15);
+    border-radius: 12px;
+    padding: 25px;
+    margin: 25px 0;
+    font-family: 'Courier New', Courier, monospace;
+    position: relative;
+    overflow: hidden;
+    box-shadow: inset 0 0 50px rgba(0,255,0,0.1), 0 10px 20px rgba(0,0,0,0.8);
   }
-  .pcw-monitor-ultra::after {
+  .pcw-inventory-container::after {
     content: " "; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
-    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
+    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.12) 50%);
     background-size: 100% 3px; z-index: 2; pointer-events: none;
   }
-  .pcw-title-ultra {
+  .inv-title {
-    color: #00ff00; font-size: 1.6em; font-weight: bold; margin-bottom: 25px;
+    color: #00ff00; font-size: 1.6em; font-weight: bold; margin-bottom: 20px;
-    display: block; text-shadow: 0 0 10px #00ff00;
+    text-transform: uppercase; text-shadow: 0 0 10px rgba(0, 255, 0, 0.7);
   }
-  /* Tabla Técnica de Inventario */
+  /* Navegación de Comandos */
-  .inv-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
+  .inv-nav {
-  .inv-table th { background-color: #00ff00; color: #000b00; padding: 8px; text-align: left; font-weight: bold; }
+    display: flex; justify-content: space-between; background-color: #000;
-  .inv-table td { padding: 10px 8px; border-bottom: 1px solid #003300; vertical-align: middle; color: #00ff00; }
+    padding: 8px; border: 2px solid #00ff00; margin-bottom: 25px;
-  /* --- SISTEMA LIGHTBOX INTERACTIVO (CSS PURO) --- */
-  .lightbox-container { position: relative; display: inline-block; }
-  .lightbox-check { display: none; } /* Checkbox oculto */
-  /* Miniatura del libro */
-  .thumb-img {
-    width: 45px; height: 60px; object-fit: cover; border: 1px solid #00ff00;
-    cursor: pointer; transition: 0.2s; display: block;
   }
-  .thumb-img:hover { box-shadow: 0 0 8px #00ff00; transform: scale(1.05); }
+  .inv-nav a {
+    color: #00ff00 !important; text-decoration: none !important; font-weight: bold; transition: 0.2s;
+  }
+  .inv-nav a:hover { background-color: #00ff00; color: #000 !important; }
-  /* Comportamiento al hacer Click (Checkbox Activo) */
+  /* Grid de Módulos del Inventario */
-  .lightbox-check:checked ~ .thumb-img {
+  .inv-grid {
-    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    object-fit: contain; background-color: rgba(0, 0, 0, 0.92);
+    gap: 15px; margin-top: 20px;
-    z-index: 9999; margin: 0; padding: 20px; box-sizing: border-box;
-    border: none; animation: fadeIn 0.2s ease-out;
-    left: 50%; top: 50%; transform: translate(-50%, -50%);
   }
+  .inv-card {
+    border: 1px solid #004400; padding: 15px; background: rgba(0,20,0,0.3);
+    transition: 0.2s; position: relative;
+  }
+  .inv-card:hover { border: 1px solid #00ff00; transform: translateY(-3px); }
-  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+  .inv-card-title { font-weight: bold; color: #00ff00; margin-bottom: 10px; display: block; }
-  /* --- AUTOMATIZACIÓN DE COLOR DE PRESERVACIÓN --- */
+  /* --- CONTROL AUTOMÁTICO DE PRESERVACIÓN --- */
-  .dokuwiki .pcw-monitor-ultra .inv-item-link a {
+  .dokuwiki .pcw-inventory-container .inv-link a {
     text-decoration: none !important; border: none !important; font-weight: bold !important;
   }
-  /* PRESERVADO = Verde Neón con brillo */
+  /* ENLACE ACTIVO = MATERIAL PRESERVADO (Verde Neón) */
-  .dokuwiki .pcw-monitor-ultra .inv-item-link a.wikilink,
+  .dokuwiki .pcw-inventory-container .inv-link a.wikilink,
-  .dokuwiki .pcw-monitor-ultra .inv-item-link a:not(.wikilink2) {
+  .dokuwiki .pcw-inventory-container .inv-link a:not(.wikilink2) {
     color: #00ff00 !important; text-shadow: 0 0 8px #00ff00 !important;
   }
-  /* NO PRESERVADO / EN BÚSQUEDA = Rojo Alerta con brillo */
+  /* ENLACE INACTIVO = NO PRESERVADO / BUSCADO (Rojo Fósforo) */
-  .dokuwiki .pcw-monitor-ultra .inv-item-link a.wikilink2 {
+  .dokuwiki .pcw-inventory-container .inv-link a.wikilink2 {
     color: #ff3333 !important; text-shadow: 0 0 8px #ff3333 !important;
   }
-  .dokuwiki .pcw-monitor-ultra .inv-item-link a:hover { text-decoration: underline !important; }
+  .dokuwiki .pcw-inventory-container .inv-link a:hover { text-decoration: underline !important; }
 </style>
-<div class="pcw-monitor-ultra">
+<div class="pcw-inventory-container">
-  <div class="pcw-title-ultra"> A:\INVENTARIO> CATALOGO DE LIBROS PUBLICADOS </div>
+  <div class="inv-title">SYS:\INVENTARIO> INDICE GENERAL DE PRESERVACION</div>
+  <div class="inv-nav">
+    <a href="#A">APLICACIONES</a> ➔ <a href="#C">CATALOGOS</a> ➔ <a href="#J">JUEGOS</a> ➔ <a href="#L">LIBROS</a> ➔ <a href="#M">MANUALES</a> ➔ <a href="#R">REVISTAS</a>
+  </div>
+  <div class="inv-grid">
+    <div id="A" class="inv-card">
+      <span class="inv-card-title">[A:] APLICACIONES</span>
+      <div class="inv-link"></html>[[:inventario:aplicaciones|LOG_APLICACIONES.SYS]]<html></div>
+    </div>
+    <div id="C" class="inv-card">
+      <span class="inv-card-title">[C:] CATALOGOS</span>
+      <div class="inv-link"></html>[[:inventario:catalogos|LOG_CATALOGOS.SYS]]<html></div>
+    </div>
+    <div id="J" class="inv-card">
+      <span class="inv-card-title">[J:] JUEGOS</span>
+      <div class="inv-link"></html>[[:inventario:juegos|LOG_JUEGOS.SYS]]<html></div>
+    </div>
-  <table class="inv-table">
+    <div id="L" class="inv-card">
-    <thead>
+      <span class="inv-card-title">[L:] LIBROS</span>
-      <tr>
+      <div class="inv-link"></html>[[:inventario:libros|LOG_LIBROS.SYS]]<html></div>
-        <th style="width: 60px;">PORTADA</th>
+    </div>
-        <th>TITULO DEL VOLUMEN / REGISTRO GENERAL</th>
-        <th style="width: 120px;">ESTADO</th>
-      </tr>
-    </thead>
-    <tbody>
-      <!-- REGISTRO 1: LIBRO PRESERVADO (La página debe existir) -->
+    <div id="M" class="inv-card">
-      <tr>
+      <span class="inv-card-title">[M:] MANUALES</span>
-        <td>
+      <div class="inv-link"></html>[[:inventario:manuales|LOG_MANUALES.SYS]]<html></div>
-          <div class="lightbox-container">
+    </div>
-            <input type="checkbox" id="book1" class="lightbox-check">
-            <img src="libros:portada_mallard_intro.png" class="thumb-img" title="Click para ampliar">
-          </div>
-        </td>
-        <td class="inv-item-link">
-          </html>[[:inventario:libros:mallard_basic_introduction|MALLARD BASIC - INTRODUCTION AND REFERENCE]]<html>
-        </td>
-        <td><span style="color: #00ff00; font-weight: bold;">[ OK ] SAFE</span></td>
-      </tr>
-      <!-- REGISTRO 2: LIBRO NO PRESERVADO (La página NO debe existir todavía) -->
+    <div id="R" class="inv-card">
-      <tr>
+      <span class="inv-card-title">[R:] REVISTAS</span>
-        <td>
+      <div class="inv-link"></html>[[:inventario:revistas|LOG_REVISTAS.SYS]]<html></div>
-          <div class="lightbox-container">
+    </div>
-            <input type="checkbox" id="book2" class="lightbox-check">
-            <img src="libros:portada_juegos_pcw.png" class="thumb-img" title="Click para ampliar">
-          </div>
-        </td>
-        <td class="inv-item-link">
-          </html>[[:inventario:libros:juegos_amstrad_pcw_8256|80 JUEGOS PARA EL AMSTRAD PCW 8256]]<html>
-        </td>
-        <td><span style="color: #ff3333; font-weight: bold;">[ !! ] MISSING</span></td>
-      </tr>
-    </tbody>
+  </div>
-  </table>
 </div>
 </html>