Diferencias

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

--- de:software:system [2026/05/04 16:27] – jesus
+++ de:software:system [2026/05/05 18:26] (actual) – borrado jesus
@@ Línea 1: / Línea 1: @@
-~~NOTOC~~
-<html>
-<style>
-  .system-terminal { background-color: #000b00; font-family: 'Courier New', monospace; padding: 30px; color: #00ff00; border: 2px solid #004400; display: flex; flex-direction: column; align-items: center; position: relative; }
-  .main-system-title { font-size: 2.2em; color: #00ff00; text-align: center; text-transform: uppercase; font-weight: 900; margin-bottom: 20px; text-shadow: 0 0 15px rgba(0, 255, 0, 0.7); }
-  .selector-panel { background: rgba(0, 40, 0, 0.3); border: 2px solid #00ff00; padding: 15px; text-align: center; border-radius: 4px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
-  .btn-model { background: transparent; color: #00ff00; border: 1px solid #00ff00; padding: 6px 12px; cursor: pointer; font-family: 'Courier New', monospace; font-weight: bold; transition: 0.3s; font-size: 12px; }
-  .btn-model:hover, .btn-model.active { background: #00ff00; color: #000; box-shadow: 0 0 10px #00ff00; }
-  .lang-selector { margin-bottom: 20px; display: flex; gap: 15px; justify-content: center; min-height: 50px; }
-  .flag-btn { width: 60px; height: auto; cursor: pointer; border: 1px solid #004400; transition: 0.3s; filter: grayscale(0.7); padding: 2px; background: #111; display: flex; align-items: center; justify-content: center; }
-  .flag-btn img { width: 100% !important; height: auto !important; display: block; pointer-events: none; }
-  .flag-btn:hover, .flag-btn.active { filter: grayscale(0); border-color: #00ff00; transform: scale(1.1); box-shadow: 0 0 10px #00ff00; }
-  #display-screen { border: 1px solid #004400; background: rgba(0,20,0,0.2); width: 100%; min-height: 280px; padding: 20px; box-sizing: border-box; }
-  .disk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; justify-items: center; }
-  .disk-item { text-align: center; font-size: 10px; color: #00ff00; font-weight: bold; }
-  .disk-item img { border: 1px solid #00ff00; background: #000; width: 130px; height: auto; display: block; margin: 0 auto 5px auto; }
-  /* OCULTAR PRECARGA */
-  .hidden-assets { display: none !important; }
-</style>
-<div class="system-terminal">
-  <div class="main-system-title">DISCOS DE SISTEMA</div>
-  <div class="selector-panel">
-    <button class="btn-model" onclick="selectModel('8000', this)">PCW 8256</button>
-    <button class="btn-model" onclick="selectModel('8000', this)">PCW 8512</button>
-    <button class="btn-model" onclick="selectModel('9512', this)">PCW 9512</button>
-    <button class="btn-model" onclick="selectModel('9256', this)">PCW 9256</button>
-    <button class="btn-model" onclick="selectModel('9512+', this)">PCW 9512+</button>
-    <button class="btn-model" onclick="selectModel('10', this)">PCW 10</button>
-    <button class="btn-model" onclick="selectModel('16', this)">PCW 16</button>
-  </div>
-  <div id="lang-container" class="lang-selector"></div>
-  <div id="display-screen"><div style="text-align:center; padding-top:100px; opacity:0.5;">SELECCIONE MODELO_</div></div>
-</div>
-<!-- PRECARGA USANDO CLASES (MÁS ESTABLE) -->
-<div class="hidden-assets">
-  <div class="pre-es">{{:botones:españa.jpg?60}}</div>
-  <div class="pre-en">{{:botones:reino_unido.jpg?60}}</div>
-  <div class="pre-de">{{:botones:alemania.jpg?60}}</div>
-  <div class="pre-fr">{{:botones:francia.jpg?60}}</div>
-  <div class="pre-disk-1">{{:sistema:discos:imagenes:systemdisk_es_side1.jpg?130}}</div>
-  <div class="pre-disk-2">{{:sistema:discos:imagenes:systemdisk_es_side2.jpg?130}}</div>
-  <div class="pre-disk-3">{{:sistema:discos:imagenes:systemdisk_es_side3.jpg?130}}</div>
-  <div class="pre-disk-4">{{:sistema:discos:imagenes:systemdisk_es_side4.jpg?130}}</div>
-</div>
-<script>
-let currentModel = '';
-function selectModel(model, btn) {
-  currentModel = model;
-  document.querySelectorAll('.btn-model').forEach(b => b.classList.remove('active'));
-  btn.classList.add('active');
-  const container = document.getElementById('lang-container');
-  container.innerHTML = '';
-  document.getElementById('display-screen').innerHTML = '<div style="text-align:center; padding-top:100px; opacity:0.5;">SELECCIONE IDIOMA_</div>';
-  const order = (model === '8000') ? ['es', 'en', 'de', 'fr'] : ['en'];
-  order.forEach(lang => {
-    const source = document.querySelector('.pre-' + lang);
-    if (source && source.querySelector('img')) {
-      const b = document.createElement('div');
-      b.className = 'flag-btn';
-      // Copiamos el nodo imagen completo
-      const imgClone = source.querySelector('img').cloneNode(true);
-      b.appendChild(imgClone);
-      b.onclick = function() {
-        document.querySelectorAll('.flag-btn').forEach(f => f.classList.remove('active'));
-        this.classList.add('active');
-        loadDisks(lang);
-      };
-      container.appendChild(b);
-    }
-  });
-}
-function loadDisks(lang) {
-  const screen = document.getElementById('display-screen');
-  if (currentModel === '8000' && lang === 'es') {
-    // Buscamos las imágenes precargadas de los discos
-    const d1 = document.querySelector('.pre-disk-1').innerHTML;
-    const d2 = document.querySelector('.pre-disk-2').innerHTML;
-    const d3 = document.querySelector('.pre-disk-3').innerHTML;
-    const d4 = document.querySelector('.pre-disk-4').innerHTML;
-    screen.innerHTML = `
-      <div class="disk-grid">
-        <div class="disk-item">\${d1}<div>DISCO 1</div></div>
-        <div class="disk-item">\${d2}<div>DISCO 2</div></div>
-        <div class="disk-item">\${d3}<div>DISCO 3</div></div>
-        <div class="disk-item">\${d4}<div>DISCO 4</div></div>
-      </div>`;
-  } else {
-    screen.innerHTML = '<div style="text-align:center; padding-top:100px; opacity:0.5;">CONTENIDO NO DISPONIBLE_</div>';
-  }
-}
-</script>
-</html>