otros:agradecimientos
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anteriorRevisión previa | |||
| otros:agradecimientos [2026/05/06 17:27] – jesus | otros:agradecimientos [2026/05/06 17:28] (actual) – jesus | ||
|---|---|---|---|
| Línea 2: | Línea 2: | ||
| < | < | ||
| < | < | ||
| - | #pcw_master_unit | + | #pcw_theater_system |
| background-color: | background-color: | ||
| height: 600px; width: 100%; overflow: hidden; position: relative; | height: 600px; width: 100%; overflow: hidden; position: relative; | ||
| - | border: 4px solid #1a1a1a; margin: 20px 0; cursor: default; | + | border: 4px solid #1a1a1a; margin: 20px 0; |
| } | } | ||
| - | /* --- LÍDER | + | /* --- LÍDER |
| #pcw_leader { | #pcw_leader { | ||
| position: absolute; inset: 0; background: #1a1a1a; z-index: 200; | position: absolute; inset: 0; background: #1a1a1a; z-index: 200; | ||
| display: flex; flex-direction: | display: flex; flex-direction: | ||
| } | } | ||
| - | .pcw_brand_main { color: #0f0; font-size: 3.2em; font-weight: | + | |
| + | | ||
| .pcw_academy_frame { | .pcw_academy_frame { | ||
| width: 340px; height: 340px; border-radius: | width: 340px; height: 340px; border-radius: | ||
| position: relative; display: flex; align-items: | position: relative; display: flex; align-items: | ||
| - | background: #000; overflow: hidden; | + | background: #000; overflow: hidden; box-shadow: 0 0 30px rgba(255, |
| } | } | ||
| - | | + | |
| + | /* Anillos concéntricos técnicos */ | ||
| + | | ||
| + | .pcw_ring_inner { position: absolute; width: 240px; height: 240px; border: 2px solid rgba(255, | ||
| + | |||
| + | /* Cruceta de mira telescópica */ | ||
| .pcw_axis_v { position: absolute; width: 2px; height: 100%; background: #fff; left: 50%; opacity: 0.4; } | .pcw_axis_v { position: absolute; width: 2px; height: 100%; background: #fff; left: 50%; opacity: 0.4; } | ||
| .pcw_axis_h { position: absolute; height: 2px; width: 100%; background: #fff; top: 50%; opacity: 0.4; } | .pcw_axis_h { position: absolute; height: 2px; width: 100%; background: #fff; top: 50%; opacity: 0.4; } | ||
| + | |||
| + | /* Aguja de reloj (Barrido de luz) */ | ||
| .pcw_clock_hand { | .pcw_clock_hand { | ||
| position: absolute; width: 100%; height: 100%; | position: absolute; width: 100%; height: 100%; | ||
| background: conic-gradient(rgba(255, | background: conic-gradient(rgba(255, | ||
| - | border-radius: | + | border-radius: |
| } | } | ||
| - | @keyframes | + | @keyframes |
| - | #pcw_num { color: #fff; font-size: 160px; font-weight: | + | |
| + | #pcw_num { color: #fff; font-size: 160px; font-weight: | ||
| /* --- MOTOR DE SCROLL --- */ | /* --- MOTOR DE SCROLL --- */ | ||
| Línea 42: | Línea 51: | ||
| </ | </ | ||
| - | <div id="pcw_master_unit" | + | <div id="pcw_theater_system"> |
| + | <!-- LÍDER ACADEMY --> | ||
| <div id=" | <div id=" | ||
| <div class=" | <div class=" | ||
| <div class=" | <div class=" | ||
| - | <div class=" | + | <div class=" |
| - | <div class=" | + | <div class=" |
| + | <div class=" | ||
| + | | ||
| <div class=" | <div class=" | ||
| <div id=" | <div id=" | ||
| Línea 54: | Línea 66: | ||
| </ | </ | ||
| + | <!-- CONTENIDO SCROLL --> | ||
| <div id=" | <div id=" | ||
| <div style=" | <div style=" | ||
| Línea 59: | Línea 72: | ||
| <p style=" | <p style=" | ||
| </ | </ | ||
| + | | ||
| <div id=" | <div id=" | ||
| <div class=" | <div class=" | ||
| Línea 64: | Línea 78: | ||
| <div class=" | <div class=" | ||
| <div class=" | <div class=" | ||
| - | <div class=" | + | |
| + | <div class=" | ||
| + | | ||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <div class=" | ||
| <div class=" | <div class=" | ||
| </ | </ | ||
| + | |||
| <div style=" | <div style=" | ||
| </ | </ | ||
| Línea 72: | Línea 92: | ||
| < | < | ||
| - | let posY = 600, engineOn = false, firstRun = true, aCtx = null; | + | let posY = 600, engineOn = false, firstRun = true; |
| - | + | ||
| - | function playBeep(f, d) { | + | |
| - | if (!aCtx || aCtx.state !== ' | + | |
| - | const o = aCtx.createOscillator(), | + | |
| - | o.type = " | + | |
| - | g.gain.setValueAtTime(0.1, | + | |
| - | g.gain.exponentialRampToValueAtTime(0.01, | + | |
| - | o.connect(g); | + | |
| - | o.start(); o.stop(aCtx.currentTime + d/1000); | + | |
| - | } | + | |
| - | + | ||
| - | function unlockAudio() { | + | |
| - | if (!aCtx) aCtx = new (window.AudioContext || window.webkitAudioContext)(); | + | |
| - | if (aCtx.state === ' | + | |
| - | } | + | |
| function start() { | function start() { | ||
| - | const leader = document.getElementById(' | + | const leader = document.getElementById(' |
| - | engineOn = false; posY = 600; | + | const canvas = document.getElementById(' |
| + | const num = document.getElementById(' | ||
| + | | ||
| + | engineOn = false; | ||
| + | | ||
| if (firstRun) { | if (firstRun) { | ||
| - | canvas.style.display = ' | + | canvas.style.display = ' |
| + | | ||
| let c = 3; num.innerText = c; | let c = 3; num.innerText = c; | ||
| - | playBeep(440, | ||
| let timer = setInterval(() => { | let timer = setInterval(() => { | ||
| c--; | c--; | ||
| - | if (c > 0) { num.innerText = c; playBeep(440, | + | if (c > 0) num.innerText = c; |
| else { | else { | ||
| - | clearInterval(timer); playBeep(880, | + | clearInterval(timer); |
| - | leader.style.display = ' | + | leader.style.display = ' |
| - | engineOn = true; firstRun = false; tick(); | + | |
| + | engineOn = true; | ||
| + | | ||
| + | | ||
| } | } | ||
| }, 1000); | }, 1000); | ||
| } else { | } else { | ||
| - | leader.style.display = ' | + | leader.style.display = ' |
| - | engineOn = true; tick(); | + | |
| + | engineOn = true; | ||
| + | | ||
| } | } | ||
| } | } | ||
| Línea 114: | Línea 128: | ||
| function tick() { | function tick() { | ||
| if (!engineOn) return; | if (!engineOn) return; | ||
| - | posY -= 0.55; | + | posY -= 0.55; // VELOCIDAD ULTRA LENTA DE LECTURA |
| const canvas = document.getElementById(' | const canvas = document.getElementById(' | ||
| canvas.style.top = posY + ' | canvas.style.top = posY + ' | ||
| - | if (Math.abs(posY) > (canvas.offsetHeight)) { engineOn = false; start(); | + | |
| - | else { requestAnimationFrame(tick); | + | |
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| } | } | ||
| Línea 124: | Línea 143: | ||
| </ | </ | ||
| </ | </ | ||
| - | |||
otros/agradecimientos.1778088476.txt.gz · Última modificación: por jesus
