fr:sistema:discos:descargas:pcw10en []

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; transition: 0.1s; }
  .led-ac { background: #0f0 !important; box-shadow: 0 0 12px #0f0; animation: l-f 0.12s infinite !important; }
  @keyframes l-f { 50% { opacity: 0.2; } }

  /* --- DISQUETTES 3.5" BLEU ROYAL --- */
  .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:#2a4da1 !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; z-index: 5; }
  .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 10 --- */
  .label { position:absolute; top:84px; left:8px; right:8px; bottom:8px; background:#1b367d; border-radius:2px; display:flex; flex-direction:row; z-index:20; overflow:hidden; cursor: pointer !important; }
  .l-side-panel { width: 42px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; padding-top: 8px; }
  .l-pcw-txt { writing-mode: vertical-rl; transform: rotate(180deg); font-family: Arial, sans-serif; color: #fff; font-size: 18px; font-weight: bold; }
  .l-divider { width: 6px; background: #fff; height: 100%; } 
  .l-main-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 6px; }
  .l-white-box { background: #fff; width: 100%; height: 95%; border-radius: 1px; display: flex; flex-direction: column; align-items: center; padding: 4px; box-sizing: border-box; }
  .l-amstrad { font-family: 'Times New Roman', serif; font-size: 28px; font-weight: bold; color: #1b367d; margin-top: 2px; }
  .l-title-disk { font-family: 'Times New Roman', serif; font-size: 14px; color: #1b367d; margin-top: 2px; white-space: nowrap; font-weight: bold; }
  .l-disclaimer { font-family: Arial, sans-serif; font-size: 5px; color: #333; text-align: center; margin-top: auto; line-height: 1.1; font-weight: bold; padding: 0 5px 6px 5px; }

  .wp-hole { position:absolute; top:12px; left:12px; width:15px; height:15px; background:#000; border-radius:1px; }
  .f-bt { background:none; color:#0f0; border:1px solid #0f0; font-size:10px; cursor:pointer; padding:5px 12px; margin-top:10px; font-weight:bold; outline:none; }
  .f-bt:hover { background:#0f0 !important; color:#000 !important; }
</style>

<div class="term">
  <div class="title">SYSTÈME DE DISQUES AMSTRAD PCW 10 (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="#" class="dl-rescue" download>TÉLÉCHARGER</a>
  </div>

  <div class="shelf">
    <!-- DISQUE 1 -->
    <div style="text-align:center">
      <div class="d-cont" id="dk1">
        <div class="face" onclick="load(1, 'Locoscript 1', 'pcw_10_en_locoscript.zip')">
          <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-side-panel"><span class="l-pcw-txt">PcW10</span></div>
            <div class="l-divider"></div>
            <div class="l-main-body">
              <div class="l-white-box">
                <div class="l-amstrad">Amstrad</div>
                <div class="l-title-disk">Locoscript 1</div>
                <div class="l-disclaimer">L'utilisation de ce logiciel est soumise aux conditions du contrat de licence dans le guide de l'utilisateur du produit.</div>
              </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 class="f-bt" onclick="document.getElementById('dk1').classList.toggle('flipped');">⟲ RETOURNER LE DISQUE</button>
    </div>

    <!-- DISQUE 2 -->
    <div style="text-align:center">
      <div class="d-cont" id="dk2">
        <div class="face" onclick="load(2, 'CP/M Plus', 'pcw_10_en_cpmplus.zip')">
          <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-side-panel"><span class="l-pcw-txt">PcW10</span></div>
            <div class="l-divider"></div>
            <div class="l-main-body">
              <div class="l-white-box">
                <div class="l-amstrad">Amstrad</div>
                <div class="l-title-disk">CP/M PLUS</div>
                <div style="font-size:7px; color:#1b367d; margin-top:-2px">systèmes/utilitaires/BASIC</div>
                <div class="l-disclaimer">L'utilisation de ce logiciel est soumise aux conditions du contrat de licence dans le guide de l'utilisateur du produit.</div>
              </div>
            </div>
          </div>
        </div>
        <div class="back" onclick="document.getElementById('dk2').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 class="f-bt" onclick="document.getElementById('dk2').classList.toggle('flipped');">⟲ RETOURNER LE DISQUE</button>
    </div>
  </div>
</div>

<script>
var aCtx=null, mNode=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(num, name, file) {
  if(cLoad) clearInterval(cLoad);
  var msg=document.getElementById('msg'), l=document.getElementById('led'), unit = document.getElementById('unit'), lnk = document.getElementById('lnk');
  var dk = document.getElementById('dk'+num);
  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 DE "+name.toUpperCase()+"... 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">'+name.toUpperCase()+' CHARGÉ</span>'; 
        lnk.href = "/lib/exe/fetch.php?media=sistema:discos:descargas:" + file;
        lnk.innerHTML = "TÉLÉCHARGER LE DISQUE " + name.toUpperCase();
        lnk.style.display = 'inline-block';
    }
  }, 110);
}
</script>
</html>