en:software:system []

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
~~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 !important; color: #000 !important; 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; }
  .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; display: flex; flex-direction: column; align-items: center; }
  .disk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; justify-items: center; width: 100%; margin-bottom: 25px; }
  .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; cursor: zoom-in; }

  .download-zone { margin-top: 10px; text-align: center; width: 100%; }
  .btn-download { display: inline-block; background: transparent; color: #ffff00; border: 2px solid #ffff00; padding: 10px 20px; font-family: 'Courier New', monospace; font-weight: bold; cursor: pointer; text-decoration: none; transition: 0.3s; font-size: 13px; }
  .btn-download:hover { background: #ffff00; color: #000; box-shadow: 0 0 15px rgba(255,255,0,0.5); }

  #disk-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,11,0,0.9); align-items: center; justify-content: center; flex-direction: column; }
  #modal-img { border: 3px solid #00ff00; max-width: 80%; max-height: 80%; }
  .close-modal { margin-top: 20px; background: transparent; color: #00ff00; border: 2px solid #00ff00; padding: 10px 20px; cursor: pointer; font-family: 'Courier New', monospace; }
</style>

<div class="system-terminal">
  <div class="main-system-title">SYSTEM DISKS</div>
  <div class="selector-panel">
    <button class="btn-model" onclick="seleccionarPCW('8256', this)">PCW 8256</button>
    <button class="btn-model" onclick="seleccionarPCW('8512', this)">PCW 8512</button>
    <button class="btn-model" onclick="seleccionarPCW('9512', this)">PCW 9512</button>
    <button class="btn-model" onclick="seleccionarPCW('9256', this)">PCW 9256</button>
    <button class="btn-model" onclick="seleccionarPCW('9512plus', this)">PCW 9512+</button>
    <button class="btn-model" onclick="seleccionarPCW('10', this)">PCW 10</button>
    <button class="btn-model" onclick="seleccionarPCW('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;">SELECT MODEL:</div></div>
</div>

<div id="disk-modal" onclick="cerrarZoom()">
  <img id="modal-img" src="">
  <button class="close-modal">CLOSE [ESC]</button>
</div>

<script>
var pcwActual = '';
var rutaBanderas = "/lib/exe/fetch.php?media=botones:";
var rutaDiscos = "/lib/exe/fetch.php?media=sistema:discos:imagenes:";

function seleccionarPCW(modelo, boton) {
  pcwActual = modelo;
  var botones = document.getElementsByClassName('btn-model');
  for (var i = 0; i < botones.length; i++) { botones[i].classList.remove('active'); }
  boton.classList.add('active');
  document.getElementById('display-screen').innerHTML = '<div style="text-align:center; padding-top:100px; opacity:0.5;">SELECT LANGUAGE:</div>';
  
  var contenedor = document.getElementById('lang-container');
  contenedor.innerHTML = '';
  
  var listaIdiomas = (modelo === '8256' || modelo === '8512') ? 
    [{id:'es', img:'españa.jpg'}, {id:'en', img:'reino_unido.jpg'}, {id:'de', img:'alemania.jpg'}, {id:'fr', img:'francia.jpg'}] : 
    [{id:'en', img:'reino_unido.jpg'}];

  listaIdiomas.forEach(function(lang) {
    var img = document.createElement('img');
    img.src = rutaBanderas + lang.img;
    img.className = 'flag-btn';
    img.onclick = function() {
      var flags = document.getElementsByClassName('flag-btn');
      for (var j = 0; j < flags.length; j++) { flags[j].classList.remove('active'); }
      this.classList.add('active');
      mostrarDiscos(lang.id);
    };
    contenedor.appendChild(img);
  });
}

function mostrarDiscos(idLang) {
  var pantalla = document.getElementById('display-screen');
  var htmlDiscos = '';
  
  if (pcwActual === '8256' || pcwActual === '8512') {
    htmlDiscos = '<div class="disk-grid">' +
      '<div class="disk-item"><img src="' + rutaDiscos + 'systemdisk_' + idLang + '_side1.jpg" onclick="abrirZoom(this.src)">DISK 1</div>' +
      '<div class="disk-item"><img src="' + rutaDiscos + 'systemdisk_' + idLang + '_side2.jpg" onclick="abrirZoom(this.src)">DISK 2</div>' +
      '<div class="disk-item"><img src="' + rutaDiscos + 'systemdisk_' + idLang + '_side3.jpg" onclick="abrirZoom(this.src)">DISK 3</div>' +
      '<div class="disk-item"><img src="' + rutaDiscos + 'systemdisk_' + idLang + '_side4.jpg" onclick="abrirZoom(this.src)">DISK 4</div>' +
      '</div>';
  } else if (pcwActual === '9512plus') {
    htmlDiscos = '<div class="disk-grid">' +
      '<div class="disk-item"><img src="' + rutaDiscos + 'locoscript2_9512plus_bubblejet_disk_front.jpg" onclick="abrirZoom(this.src)">LOCO FRONT</div>' +
      '<div class="disk-item"><img src="' + rutaDiscos + 'locoscript2_9512plus_bubblejet_disk_back.jpg" onclick="abrirZoom(this.src)">LOCO BACK</div>' +
      '<div class="disk-item"><img src="' + rutaDiscos + 'cpm_plus_9512plus_bubblejet_disk_front.jpg" onclick="abrirZoom(this.src)">CPM FRONT</div>' +
      '<div class="disk-item"><img src="' + rutaDiscos + 'cpm_plus_9512plus_bubblejet_disk_back.jpg" onclick="abrirZoom(this.src)">CPM BACK</div>' +
      '</div>';
  } else if (pcwActual === '9512' || pcwActual === '10' || pcwActual === '16' || pcwActual === '9256') {
     var discosData = {
        '9512': ['systemdisk_9512_en_disc1.jpg', 'systemdisk_9512_en_disc2.jpg'],
        '10': ['systemdisk_10_en_disc2.jpg', 'systemdisk_10_en_disc1.jpg'],
        '16': ['systemdisk_16_en_rescue.jpg'],
        '9256': ['systemdisk_9256_en_disc1.jpg', 'systemdisk_9256_en_disc2.jpg']
     };
     var lista = discosData[pcwActual] || [];
     htmlDiscos = '<div class="disk-grid">';
     lista.forEach(function(img, index){
        htmlDiscos += '<div class="disk-item"><img src="' + rutaDiscos + img + '" onclick="abrirZoom(this.src)">DISK ' + (index+1) + '</div>';
     });
     htmlDiscos += '</div>';
  }

  if (htmlDiscos !== '') {
    // ENGLISH FINAL ROUTE: Forcing the en: namespace
    var urlFinal = "doku.php?id=en:sistema:discos:descargas:pcw" + pcwActual + idLang;
    
    htmlDiscos += '<div class="download-zone">' +
                  '<a href="' + urlFinal + '" target="_blank" class="btn-download">DOWNLOAD SYSTEM DISKS PCW ' + pcwActual.toUpperCase() + ' (' + idLang.toUpperCase() + ')</a>' +
                  '</div>';
    pantalla.innerHTML = htmlDiscos;
  } else {
    pantalla.innerHTML = '<div style="text-align:center; padding-top:100px; opacity:0.5;">CONTENT NOT AVAILABLE_</div>';
  }
}

function abrirZoom(src) {
  document.getElementById('modal-img').src = src;
  document.getElementById('disk-modal').style.display = 'flex';
}

function cerrarZoom() {
  document.getElementById('disk-modal').style.display = 'none';
}

document.onkeydown = function(evt) {
  if (evt.key === "Escape") cerrarZoom();
};
</script>
</html>