fr:sistema:discos:descargas:pcw16en []

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>
  /* --- MOTEUR VISUEL CRT --- */
  .term { background:#000b00; font-family:'Courier New',monospace; padding:30px; border:2px solid #004400; color:#00ff00; }
  .title { font-size:1.8em; text-align:center; text-transform:uppercase; font-weight:900; margin-bottom:25px; text-shadow:0 0 20px #00ff00; }
  #scr { border:2px solid #00ff00; background:rgba(0,30,0,0.4); margin:20px auto; min-height:140px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:15px; box-sizing:border-box; }
  .bl-y { color:#ffff00; animation:b-m 1s linear infinite; font-weight:bold; }
  @keyframes b-m { 50% { opacity: 0; } }

  .dl-rescue { display:none; margin-top:15px; padding:10px 20px; border:3px solid #ffff00; color:#ffff00 !important; font-weight:bold; text-decoration:none; text-transform:uppercase; background:rgba(255,255,0,0.1); animation: b-bord 0.8s infinite; font-size:12px; }
  @keyframes b-bord { 50% { border-color: transparent; opacity: 0.5; } }

  /* --- LECTEUR DE DISQUETTE 3.5" BEIGE --- */
  .bay-35 { background: #ded7bc; width: 440px; height: 140px; margin: 0 auto 30px auto; position: relative; border-radius: 4px; border: 1px solid #b7b096; box-shadow: inset 2px 2px 2px rgba(255,255,255,0.5), 3px 5px 15px rgba(0,0,0,0.4); }
  .slot-tunnel { background: #000; width: 390px; height: 26px; margin: 25px auto 0; position: relative; border-radius: 1px; overflow: hidden; }
  .flap-door { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #c9c2a6 0%, #b7b096 100%); border-bottom: 1px solid #8c8572; transition: transform 0.3s ease-in; z-index: 2; }
  .unit-active .flap-door { transform: translateY(-26px); }
  .notch-grip { position: absolute; top: 51px; left: 50%; transform: translateX(-50%); width: 130px; height: 45px; background: #ded7bc; clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%); box-shadow: inset 0 10px 10px rgba(0,0,0,0.15); border-top: 1.5px solid #aba48b; z-index: 5; }
  .ej-bt-35 { width: 70px; height: 26px; background: #ded7bc; position: absolute; bottom: 15px; right: 25px; border: 2px solid #b7b096; border-bottom: 4px solid #8c8572; border-right: 3px solid #8c8572; cursor: pointer; z-index: 100; }
  .led-housing { width: 30px; height: 14px; background: #222; position: absolute; bottom: 22px; left: 55px; border-radius: 1px; display: flex; align-items: center; justify-content: center; }
  .led-35 { width: 16px; height: 4px; background: #020; border-radius: 1px; }
  .led-ac { background: #0f0; box-shadow: 0 0 12px #0f0; animation: l-f 0.12s infinite; }
  @keyframes l-f { 50% { opacity: 0.2; } }

  /* --- DISQUETTE 3D --- */
  .shelf { display:flex; flex-wrap:wrap; gap:40px; justify-content:center; margin-top:30px; perspective:1200px; }
  .d-cont { width:195px; height:205px; position:relative; transition:transform 0.6s; transform-style:preserve-3d; }
  .face, .back { position:absolute; width:100%; height:100%; backface-visibility:hidden !important; background:#121212 !important; border:1px solid #000; border-radius:6px; overflow:hidden; cursor: pointer; }
  .back { transform:rotateY(180deg); }
  .flipped { transform:rotateY(180deg); }

  .disk-window { position:absolute; top:12px; left:50%; margin-left:-13px; width:26px; height:52px; background:#1a130e; border-radius:1px; z-index:1; overflow:hidden; border:1px solid #222; }
  .mylar-flow { width:300%; height:100%; background: repeating-linear-gradient(90deg, #3d2b1f 0px, #4a3528 4px, #3d2b1f 8px, #5c4033 10px, #3d2b1f 20px); position:absolute; top:0; left:0; display: none; }
  .is-spinning .mylar-flow { display: block; animation: lateral-flow 0.12s linear infinite; }
  @keyframes lateral-flow { from { transform: translateX(0); } to { transform: translateX(-40px); } }
  
  .motor-hub { position:absolute; top:58%; left:50%; transform:translate(-50%,-50%); width:65px; height:65px; background: radial-gradient(circle, #bbb 0%, #888 45%, #999 50%, #666 100%); border-radius: 50%; border: 2px solid #222; }
  .drive-hole { position:absolute; top:15px; left:50%; margin-left:-6px; width:12px; height:12px; background:#111; border-radius:2px; }
  .is-spinning .motor-hub { animation: hub-spin 0.2s linear infinite; }
  @keyframes hub-spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

  .shutter-box { position:absolute; top:0; width:100px; height:78px; z-index:10; transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }
  .face .shutter-box { left:50%; margin-left:-40px; }
  .back .shutter-box { right:50%; margin-right:-40px; }
  .m-part { position:absolute; background: linear-gradient(180deg, #999, #bbb 50%, #999); box-sizing:border-box; }
  .m-t { top:0; left:0; width:100%; height:12px; } .m-b { bottom:0; left:0; width:100%; height:14px; }
  .face .m-mid { top:12px; left:0; width:60px; height:52px; border-right:1px solid #888; }
  .face .m-edge { top:12px; right:0; width:14px; height:52px; border-left:1px solid #888; }
  .back .m-mid { top:12px; right:0; width:60px; height:52px; border-left:1px solid #888; }
  .back .m-edge { top:12px; left:0; width:14px; height:52px; border-right:1px solid #888; }
  .sh-o .face .shutter-box { transform: translateX(-33px); }
  .sh-o .back .shutter-box { transform: translateX(33px); }

  /* ÉTIQUETTE PcW 16 */
  .label { position:absolute; top:84px; left:8px; right:8px; bottom:8px; background:#fff; border-radius:2px; display:flex; flex-direction:row; z-index:20; border:1px solid #ccc; overflow:hidden; cursor: pointer !important; }
  .l-left { width: 44px; min-width: 44px; display: flex; flex-direction: column; align-items: center; background:#fff; height: 100%; border-right: 1.5px solid #4a4099; }
  .l-blue { background: #4a4099; height: 60%; display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 0; }
  .l-pcw { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Arial Black', sans-serif; color: #fff; font-size: 15px; font-weight:900; }
  .l-icon { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:100%; }
  .mon { width:22px; height:14px; border:1.8px solid #4a4099; border-radius:2px; position:relative; }
  .mon::after { content:''; position:absolute; bottom:-3px; left:7px; width:4px; height:2px; background:#4a4099; }
  .kb { width:26px; height:4px; background:#4a4099; border-radius:1px; }
  .l-lilac { width: 100%; height: 12px; background: #4a4099; margin-top: auto; }
  .l-right { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; color: #4a4099; padding: 2px; position: relative; min-width: 0; }
  .l-am { font-family: 'Times New Roman', serif; font-size: 28px; font-weight: bold; font-style: italic; letter-spacing: -1.2px; line-height: 0.9; margin-top: 2px; width: 100%; }
  .l-rs { font-family: Arial, sans-serif; font-size: 14px; font-weight: 900; font-style: italic; width: 100%; }
  .l-wn { font-family: Arial, sans-serif; font-size: 6.8px; font-weight: bold; line-height: 1.1; margin-top: 2px; width: 100%; }
  .l-lg { position: absolute; bottom: 2px; font-family: Arial, sans-serif; font-size: 4.5px; color: #555; border-top: 0.5px solid #eee; width: 90%; padding-top: 1px; }
  .wp-hole { position:absolute; top:12px; left:12px; width:15px; height:15px; background:#000; border-radius:1px; }
</style>

<div class="term">
  <div class="title">SYSTÈME AMSTRAD PCW 16 ANNE (EN)</div>
  <div id="unit" class="bay-35">
    <div class="slot-tunnel"><div id="flap" class="flap-door"></div></div>
    <div class="notch-grip"></div>
    <div class="led-housing"><div id="led" class="led-35"></div></div>
    <!-- BOUTON EJECT VERS fr:software:systeme -->
    <div class="ej-bt-35" title="ÉJECTER" onclick="window.location.href='/doku.php?id=fr:software:systeme'"></div>
  </div>
  <div id="scr">
    <div id="msg" style="color:#0f0;font-weight:bold">VEUILLEZ INSÉRER UN DISQUE :</div>
    <a id="lnk" href="/lib/exe/fetch.php?media=sistema:discos:descargas:pcw_16_en_rescue.zip" class="dl-rescue">TÉLÉCHARGER LE DISQUE DE SECOURS</a>
  </div>
  <div class="shelf">
    <div style="text-align:center">
      <div class="d-cont" id="dk1">
        <div class="face" onclick="load()">
          <div class="wp-hole"></div>
          <div class="disk-window"><div class="mylar-flow"></div></div>
          <div class="shutter-box"><div class="m-part m-t"></div><div class="m-part m-mid"></div><div class="m-part m-edge"></div><div class="m-part m-b"></div></div>
          <div class="label">
            <div class="l-left">
              <div class="l-blue"><span class="l-pcw">PcW16</span></div>
              <div class="l-icon"><div class="mon"></div><div class="kb"></div></div>
              <div class="l-lilac"></div>
            </div>
            <div class="l-right">
              <div class="l-am">Amstrad</div>
              <div class="l-rs">Disque Secours</div>
              <div class="l-wn">Gardez ce disque en lieu sûr.<br>Ne pas utiliser sans consulter<br>le manuel.</div>
              <div class="l-lg">SOUMIS AUX CONDITIONS DE LICENCE.</div>
            </div>
          </div>
        </div>
        <div class="back" onclick="document.getElementById('dk1').classList.toggle('flipped')">
          <div class="disk-window"><div class="mylar-flow"></div></div>
          <div class="shutter-box"><div class="m-part m-t"></div><div class="m-part m-mid"></div><div class="m-part m-edge"></div><div class="m-part m-b"></div></div>
          <div class="motor-hub"><div class="drive-hole"></div></div>
        </div>
      </div>
      <button onclick="document.getElementById('dk1').classList.toggle('flipped');" style="background:none; color:#0f0; border:1px solid #0f0; font-size:10px; cursor:pointer; padding:5px 12px; margin-top:10px; font-weight:bold;">⟲ RETOURNER LE DISQUE</button>
    </div>
  </div>
</div>

<script>
var aCtx=null, mNode=null, mLFO=null, cLoad=null;
function iA(){ if(!aCtx) aCtx=new(window.AudioContext||window.webkitAudioContext)(); }

function pStp(){
  iA(); var n=aCtx.currentTime, o=aCtx.createOscillator(), g=aCtx.createGain(), f=aCtx.createBiquadFilter();
  o.type='triangle'; o.frequency.setValueAtTime(120, n);
  f.type='bandpass'; f.frequency.value=1200; f.Q.value=10;
  g.gain.setValueAtTime(0.9, n);
  g.gain.exponentialRampToValueAtTime(0.001, n+0.06);
  o.connect(f); f.connect(g); g.connect(aCtx.destination);
  o.start(); o.stop(n+0.06);
}

function sMot(){
  iA(); mNode=aCtx.createOscillator(); var g=aCtx.createGain(), f=aCtx.createBiquadFilter();
  mNode.type='sine'; mNode.frequency.value=32; 
  f.type='lowpass'; f.frequency.value=150;
  g.gain.value=0.006;
  mNode.connect(f); f.connect(g); g.connect(aCtx.destination);
  mNode.start();
}

function load() {
  if(cLoad) clearInterval(cLoad);
  var msg=document.getElementById('msg'), l=document.getElementById('led'), dk = document.getElementById('dk1'), unit = document.getElementById('unit'), lnk = document.getElementById('lnk');
  lnk.style.display = 'none'; msg.className="bl-y"; l.className="led-35 led-ac";
  unit.classList.add('unit-active'); dk.classList.add('sh-o', 'is-spinning');
  iA(); pStp(); setTimeout(pStp, 100); setTimeout(sMot, 400);

  var trk=0; cLoad=setInterval(function(){
    msg.innerHTML="LECTURE... PISTE "+trk;
    if(trk % 2 === 0) pStp();
    trk++;
    if(trk > 79){ 
        clearInterval(cLoad); if(mNode){ mNode.stop(); mNode=null; }
        l.className="led-35"; dk.classList.remove('sh-o', 'is-spinning'); unit.classList.remove('unit-active');
        msg.innerHTML='<span style="color:#0f0">SYSTÈME CHARGÉ</span>'; lnk.style.display = 'inline-block';
    }
  }, 110);
}
</script>
</html>