<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GENESIS CHALLENGE | FREAKCOIN GAME CONSOLE</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'sq-bg': '#030706',
'sq-panel': 'rgba(6, 17, 13, 0.88)',
'sq-border': '#112b23',
'sq-border-bright': '#1d483b',
'sq-cyan': '#00ffd2',
'sq-cyan-dim': '#1cb89b',
'sq-gold': '#c2a366',
'sq-gold-bright': '#f0d399',
'sq-text-muted': '#6b8a80',
'sq-text': '#8fa89e',
'sq-text-light': '#c5ded5',
},
fontFamily: {
mono: ['"JetBrains Mono"', 'monospace'],
chakra: ['"Chakra Petch"', 'sans-serif'],
}
}
}
}
</script>
<style>
body {
background-color: #020605;
background-image:
radial-gradient(circle at 50% 30%, #0d211a 0%, transparent 65%),
linear-gradient(to bottom, #020504, #050a08);
font-family: 'JetBrains Mono', monospace;
color: #8fa89e;
user-select: none;
}
/* Custom Dark Sci-Fi Sliders */
input[type=range] {
-webkit-appearance: none;
width: 100%;
background: transparent;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
background: #091c16;
border-radius: 3px;
border: 1px solid #143b2f;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
input[type=range]::-webkit-slider-thumb {
height: 16px;
width: 16px;
border-radius: 3px;
background: #00ffd2;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
box-shadow: 0 0 10px rgba(0, 255, 210, 0.8);
transition: transform 0.1s ease, background-color 0.2s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
transform: scale(1.15);
background: #ffffff;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: #040907;
}
::-webkit-scrollbar-thumb {
background: #123328;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #00ffd2;
}
.panel-glow {
box-shadow: 0 0 25px rgba(0, 255, 210, 0.03), inset 0 0 15px rgba(0, 0, 0, 0.7);
}
.coin-hover {
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.coin-hover:hover {
transform: translateY(-2px) scale(1.025);
filter: drop-shadow(0 0 20px rgba(0, 255, 210, 0.4));
}
.btn-sq {
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.btn-sq:active {
transform: translateY(1px);
}
/* Module card subtle glow */
.module-card {
background: rgba(8, 22, 17, 0.6);
border: 1px solid #112d23;
transition: all 0.25s ease;
}
.module-card:hover {
border-color: #00ffd2;
background: rgba(12, 33, 26, 0.85);
box-shadow: 0 0 15px rgba(0, 255, 210, 0.15);
transform: translateY(-1px);
}
/* CRT Screen Scanline effect (subtle) */
.scanline {
background: linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,0) 50%,
rgba(0, 0, 0, 0.25) 50%,
rgba(0, 0, 0, 0.25)
);
background-size: 100% 4px;
pointer-events: none;
}
</style>
</head>
<body class="min-h-screen flex flex-col justify-between p-3 md:p-5 text-xs text-sq-text relative">
<!-- Scanline Overlay -->
<div class="fixed inset-0 scanline z-50 opacity-40"></div>
<!-- MAIN CONSOLE CONTAINER -->
<div class="max-w-[1440px] w-full mx-auto flex flex-col gap-4 z-10 flex-grow">
<!-- HEADER BAR -->
<header class="flex flex-col sm:flex-row justify-between items-start sm:items-center pb-2 border-b border-sq-border/60 gap-2">
<div class="text-[10px] tracking-[0.25em] text-sq-text-muted font-medium">
SQ-ONE RESEARCH LABS · ORIGINAL PUZZLE CONCEPT
</div>
<div class="px-3 py-1 bg-sq-panel border border-sq-border rounded text-[10px] tracking-widest text-sq-gold flex items-center gap-1.5 font-semibold shadow-sm">
<span class="w-1.5 h-1.5 rounded-full bg-sq-gold animate-pulse"></span>
FREAKCOIN / GAME MODULES
</div>
</header>
<!-- MAIN TITLE -->
<div class="py-1">
<h1 class="font-chakra text-3xl md:text-4xl font-extrabold tracking-wider text-white flex items-center gap-3">
GENESIS <span class="text-sq-cyan drop-shadow-[0_0_12px_rgba(0,255,210,0.5)]">CHALLENGE</span>
</h1>
</div>
<!-- MAIN 3-COLUMN GRID WORKSPACE -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-4 flex-grow">
<!-- LEFT COLUMN: CONSOLA - AJUSTES (3 cols) -->
<aside class="lg:col-span-3 bg-sq-panel border border-sq-border rounded-lg p-4 flex flex-col justify-between panel-glow">
<div>
<!-- Section Title -->
<div class="text-sq-text-muted text-[11px] font-bold tracking-[0.2em] border-b border-sq-border pb-2 mb-4 uppercase flex justify-between items-center">
<span>CONSOLA - AJUSTES</span>
<span class="w-1.5 h-1.5 bg-sq-cyan rounded-full opacity-60"></span>
</div>
<!-- Sliders Stack -->
<div class="space-y-4">
<!-- Control 1 -->
<div>
<div class="flex justify-between text-[11px] mb-1 font-medium">
<span class="text-sq-text-light">Tamaño de piezas</span>
</div>
<div class="flex items-center gap-3">
<input type="range" id="slider-pieces" min="50" max="150" value="100" oninput="updateVal('val-pieces', this.value + '%')">
<span id="val-pieces" class="text-[11px] text-sq-cyan font-mono w-10 text-right">100%</span>
</div>
</div>
<!-- Control 2 -->
<div>
<div class="flex justify-between text-[11px] mb-1 font-medium">
<span class="text-sq-text-light">Tamaño de letras y números</span>
</div>
<div class="flex items-center gap-3">
<input type="range" id="slider-font" min="70" max="130" value="100" oninput="updateVal('val-font', this.value + '%')">
<span id="val-font" class="text-[11px] text-sq-cyan font-mono w-10 text-right">100%</span>
</div>
</div>
<!-- Control 3 -->
<div>
<div class="flex justify-between text-[11px] mb-1 font-medium">
<span class="text-sq-text-light">Luminosidad de la consola</span>
</div>
<div class="flex items-center gap-3">
<input type="range" id="slider-lum" min="20" max="100" value="100" oninput="updateVal('val-lum', this.value + '%'); updateLuminosity(this.value)">
<span id="val-lum" class="text-[11px] text-sq-cyan font-mono w-10 text-right">100%</span>
</div>
</div>
<!-- Control 4: Sound Toggle -->
<div class="pt-2">
<div class="text-[11px] mb-1.5 text-sq-text-light font-medium">Sonido</div>
<button id="btn-sound" onclick="toggleSound()" class="w-full py-2.5 px-3 bg-[#081712] border border-sq-border hover:border-sq-cyan text-sq-text-light font-bold text-[11px] tracking-wider rounded text-center btn-sq shadow-inner">
SONIDO: <span id="sound-state-text" class="text-sq-text-muted">DESACTIVADO</span>
</button>
</div>
<!-- Control 5: Volume -->
<div class="pt-1">
<div class="flex justify-between text-[11px] mb-1 font-medium">
<span class="text-sq-text-light">Volumen</span>
</div>
<div class="flex items-center gap-3">
<input type="range" id="slider-vol" min="0" max="100" value="70" oninput="updateVal('val-vol', this.value + '%')">
<span id="val-vol" class="text-[11px] text-sq-cyan font-mono w-10 text-right">70%</span>
</div>
</div>
</div>
</div>
<!-- Helper Footer Note -->
<p class="text-[10px] text-sq-text-muted leading-relaxed border-t border-sq-border/60 pt-3 mt-4">
La luminosidad regula los efectos visuales de la consola, no el brillo físico de la pantalla.
</p>
</aside>
<!-- CENTER COLUMN: MAIN GAME HUB & FREAKCOIN EMBLEM (6 cols) -->
<main class="lg:col-span-6 bg-sq-panel border border-sq-border rounded-lg p-6 flex flex-col justify-between items-center panel-glow relative overflow-hidden">
<!-- Background Ambient Glow -->
<div class="absolute inset-0 bg-radial from-sq-cyan/5 via-transparent to-transparent pointer-events-none"></div>
<!-- COIN VECTOR EMBLEM -->
<div class="my-auto py-4 flex flex-col items-center w-full max-w-md">
<div id="coin-trigger" onclick="coinClickEffect()" class="w-48 h-48 sm:w-56 sm:h-56 coin-hover cursor-pointer relative filter drop-shadow-[0_10px_25px_rgba(0,0,0,0.8)]">
<svg class="w-full h-full" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="octBgGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#0e2a22"/>
<stop offset="65%" stop-color="#061611"/>
<stop offset="100%" stop-color="#020806"/>
</radialGradient>
<linearGradient id="goldEdgeTop" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#544320"/>
<stop offset="35%" stop-color="#d9b873"/>
<stop offset="65%" stop-color="#f5e1b5"/>
<stop offset="100%" stop-color="#544320"/>
</linearGradient>
<linearGradient id="goldEdgeBottom" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#2b210e"/>
<stop offset="50%" stop-color="#91743b"/>
<stop offset="100%" stop-color="#2b210e"/>
</linearGradient>
<linearGradient id="cyanEdgeSide" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#0f332a"/>
<stop offset="50%" stop-color="#00ffd2"/>
<stop offset="100%" stop-color="#0a261f"/>
</linearGradient>
<linearGradient id="fcGoldFont" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#fce2ad"/>
<stop offset="50%" stop-color="#c9a35e"/>
<stop offset="100%" stop-color="#735a28"/>
</linearGradient>
<linearGradient id="cyanLineGlow" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#00ffd2" stop-opacity="0"/>
<stop offset="25%" stop-color="#00ffd2" stop-opacity="0.8"/>
<stop offset="50%" stop-color="#00ffd2" stop-opacity="1"/>
<stop offset="75%" stop-color="#00ffd2" stop-opacity="0.8"/>
<stop offset="100%" stop-color="#00ffd2" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- Outer Octagon Base -->
<polygon points="90,12 210,12 288,90 288,210 210,288 90,288 12,210 12,90" fill="#030a08" stroke="#0e2b21" stroke-width="2"/>
<!-- Top Gold Bevel Rim -->
<polygon points="90,12 210,12 202,20 98,20" fill="url(#goldEdgeTop)"/>
<line x1="90" y1="12" x2="210" y2="12" stroke="#fff3d6" stroke-width="1.5" opacity="0.8"/>
<!-- Bottom Gold Bevel Rim -->
<polygon points="90,288 210,288 202,280 98,280" fill="url(#goldEdgeBottom)"/>
<!-- Vertical Cyan Beveled Highlights -->
<line x1="12" y1="90" x2="12" y2="210" stroke="url(#cyanEdgeSide)" stroke-width="3"/>
<line x1="288" y1="90" x2="288" y2="210" stroke="url(#cyanEdgeSide)" stroke-width="3"/>
<!-- Corner Framing -->
<line x1="90" y1="12" x2="12" y2="90" stroke="#164234" stroke-width="1.5"/>
<line x1="210" y1="12" x2="288" y2="90" stroke="#164234" stroke-width="1.5"/>
<line x1="288" y1="210" x2="210" y2="288" stroke="#164234" stroke-width="1.5"/>
<line x1="12" y1="210" x2="90" y2="288" stroke="#164234" stroke-width="1.5"/>
<!-- Octagon Inner Core Area -->
<polygon points="93,22 207,22 278,93 278,207 207,278 93,278 22,207 22,93" fill="url(#octBgGrad)"/>
<!-- Inner Cyan Accent Octagon Ring -->
<polygon points="96,28 204,28 272,96 272,204 204,272 96,272 28,204 28,96" fill="none" stroke="#00ffd2" stroke-width="1" opacity="0.35"/>
<!-- Top Horizontal Glow Accent -->
<line x1="75" y1="72" x2="225" y2="72" stroke="url(#cyanLineGlow)" stroke-width="1.5"/>
<!-- FC CENTRAL INITIALS -->
<text x="150" y="152"
font-family="'Chakra Petch', sans-serif"
font-size="82"
font-weight="700"
fill="url(#fcGoldFont)"
text-anchor="middle"
letter-spacing="2"
style="text-shadow: 0 4px 10px rgba(0,0,0,0.9);">FC</text>
<!-- Bottom Horizontal Glow Accent -->
<line x1="75" y1="176" x2="225" y2="176" stroke="url(#cyanLineGlow)" stroke-width="1.5"/>
<!-- Text Subtitle Line 1 -->
<text x="150" y="202"
font-family="'JetBrains Mono', monospace"
font-size="11"
font-weight="700"
fill="#1cb89b"
text-anchor="middle"
letter-spacing="4">GENESIS I</text>
<!-- Text Subtitle Line 2 -->
<text x="150" y="220"
font-family="'JetBrains Mono', monospace"
font-size="10"
font-weight="700"
fill="#c2a366"
text-anchor="middle"
letter-spacing="3"
opacity="0.9">FREAKCOIN</text>
<!-- Bottom Dot Accent -->
<circle cx="150" cy="242" r="2" fill="#00ffd2" opacity="0.7"/>
</svg>
</div>
<!-- Emblem Title Section -->
<h2 class="font-chakra text-lg font-bold text-white tracking-widest mt-4">GENESIS CHALLENGE</h2>
<p class="text-[11px] text-sq-text-muted mt-1 text-center font-medium">
Elegí un módulo para comenzar. Podés volver aquí cuando quieras.
</p>
</div>
<!-- 5 GAME MODULE BUTTONS GRID -->
<div class="w-full grid grid-cols-1 sm:grid-cols-3 gap-2.5 mt-2">
<!-- Module 1 -->
<div onclick="selectModule('SIMON')" class="module-card p-3 rounded cursor-pointer flex flex-col justify-between">
<div class="font-bold text-sq-cyan text-[11px] tracking-wide flex items-center gap-1">
<span class="text-sq-cyan font-bold">•</span> SIMON
</div>
<div class="text-[10px] text-sq-text-muted mt-1 leading-snug">
Memorizá la secuencia de luces y tonos.
</div>
</div>
<!-- Module 2 -->
<div onclick="selectModule('MEMO TEST')" class="module-card p-3 rounded cursor-pointer flex flex-col justify-between">
<div class="font-bold text-sq-cyan text-[11px] tracking-wide flex items-center gap-1">
<span class="text-sq-cyan font-bold">•</span> MEMO TEST
</div>
<div class="text-[10px] text-sq-text-muted mt-1 leading-snug">
Emparejá figuras sólidas con sus contornos.
</div>
</div>
<!-- Module 3 -->
<div onclick="selectModule('SUDOKU')" class="module-card p-3 rounded cursor-pointer flex flex-col justify-between">
<div class="font-bold text-sq-cyan text-[11px] tracking-wide flex items-center gap-1">
<span class="text-sq-cyan font-bold">•</span> SUDOKU
</div>
<div class="text-[10px] text-sq-text-muted mt-1 leading-snug">
Completá una cuadrícula lógica 9 × 9.
</div>
</div>
<!-- Module 4 (Spans across or 2 cols on row 2) -->
<div onclick="selectModule('SOPA HEXAGONAL')" class="module-card p-3 rounded cursor-pointer flex flex-col justify-between sm:col-span-1">
<div class="font-bold text-sq-cyan text-[11px] tracking-wide flex items-center gap-1">
<span class="text-sq-cyan font-bold">•</span> SOPA HEXAGONAL
</div>
<div class="text-[10px] text-sq-text-muted mt-1 leading-snug">
Conectá letras y encontrá palabras ocultas.
</div>
</div>
<!-- Module 5 -->
<div onclick="selectModule('DESAFÍO GEOMÉTRICO')" class="module-card p-3 rounded cursor-pointer flex flex-col justify-between sm:col-span-2">
<div class="font-bold text-sq-cyan text-[11px] tracking-wide flex items-center gap-1">
<span class="text-sq-cyan font-bold">•</span> DESAFÍO GEOMÉTRICO
</div>
<div class="text-[10px] text-sq-text-muted mt-1 leading-snug">
Ordená las tres capas del tablero original.
</div>
</div>
</div>
</main>
<!-- RIGHT COLUMN: GENESIS CHALLENGE INFO & IMMERSIVE VIEW (3 cols) -->
<aside class="lg:col-span-3 bg-sq-panel border border-sq-border rounded-lg p-4 flex flex-col justify-between panel-glow">
<div>
<!-- Section Title -->
<div class="text-sq-text-muted text-[11px] font-bold tracking-[0.2em] border-b border-sq-border pb-2 mb-4 uppercase flex justify-between items-center">
<span>GENESIS CHALLENGE</span>
<span class="w-1.5 h-1.5 bg-sq-gold rounded-full opacity-60"></span>
</div>
<p class="text-[11px] text-sq-text mb-6 leading-relaxed">
Entrá por la moneda FREAKCOIN y elegí una experiencia.
</p>
<!-- ENTRADA SECTION -->
<div class="space-y-3">
<div class="text-[11px] font-bold text-sq-text-light tracking-wider">ENTRADA</div>
<p class="text-[11px] text-sq-text-muted leading-relaxed">
Tocá la moneda y elegí una experiencia.
</p>
<!-- VISTA INMERSIVA BUTTON -->
<button id="btn-immersive" onclick="toggleImmersiveView()" class="w-full mt-4 py-3 px-4 bg-transparent border border-sq-cyan hover:bg-sq-cyan/10 text-sq-cyan font-bold text-[11px] tracking-widest rounded text-center btn-sq shadow-[0_0_15px_rgba(0,255,210,0.15)]">
VISTA INMERSIVA
</button>
</div>
</div>
<!-- Helper Footer Note -->
<p class="text-[10px] text-sq-text-muted leading-relaxed border-t border-sq-border/60 pt-3 mt-6">
En horizontal, los paneles se ubican a los lados. En vertical, podés navegar arriba y abajo.
</p>
</aside>
</div>
<!-- BOTTOM PANEL: PREFERENCIAS Y ACCESIBILIDAD -->
<section class="bg-sq-panel border border-sq-border rounded-lg p-4 panel-glow">
<div class="text-sq-text-muted text-[11px] font-bold tracking-[0.2em] border-b border-sq-border pb-3 mb-4 uppercase">
PREFERENCIAS Y ACCESIBILIDAD
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
<!-- Dropdown 1 -->
<div>
<label class="block text-[11px] text-sq-text-light font-medium mb-1.5">Tamaño del texto</label>
<select id="select-fontsize" onchange="changeFontSize(this.value)" class="w-full bg-[#071611] border border-sq-border hover:border-sq-cyan text-sq-text-light text-[11px] rounded px-3 py-2 outline-none font-mono cursor-pointer">
<option value="100%">Actual</option>
<option value="90%">Compacto (90%)</option>
<option value="110%">Grande (110%)</option>
</select>
</div>
<!-- Dropdown 2 -->
<div>
<label class="block text-[11px] text-sq-text-light font-medium mb-1.5">Apariencia</label>
<select id="select-theme" class="w-full bg-[#071611] border border-sq-border hover:border-sq-cyan text-sq-text-light text-[11px] rounded px-3 py-2 outline-none font-mono cursor-pointer">
<option value="sqone">Original SQ-ONE</option>
<option value="dark">Alto Contraste</option>
<option value="cyber">Matriz Ciber</option>
</select>
</div>
<!-- Descriptive text -->
<div class="lg:col-span-1 text-[10px] text-sq-text-muted leading-relaxed">
Las preferencias cambian la presentación, no las reglas de la partida. El audio sintético está integrado; activá el sonido desde su control.
</div>
<!-- Reset Button -->
<div class="flex justify-end">
<button onclick="resetPreferences()" class="w-full sm:w-auto px-4 py-2 bg-transparent border border-sq-border hover:border-sq-text-light text-sq-text hover:text-white text-[10px] tracking-wider rounded font-bold btn-sq">
RESTABLECER PREFERENCIAS
</button>
</div>
</div>
</section>
<!-- FOOTER BAR -->
<footer class="flex flex-col sm:flex-row justify-between items-center text-[10px] text-sq-text-muted pt-2 border-t border-sq-border/40 gap-2">
<div>THREE LAYERS · ONE HIDDEN RELATIONSHIP</div>
<div class="text-sq-gold/80 font-medium">FREAKCOIN GAME CONSOLE · 2026</div>
<div>VISUAL RECURSION · ENGINE PRESERVED</div>
</footer>
</div>
<!-- Notification Toast / Modal Box -->
<div id="toast-modal" class="fixed bottom-6 right-6 bg-[#081f18] border border-sq-cyan text-sq-text-light px-4 py-3 rounded shadow-2xl transition-all duration-300 opacity-0 pointer-events-none transform translate-y-4 z-50 flex items-center gap-3">
<span class="w-2 h-2 rounded-full bg-sq-cyan animate-ping"></span>
<span id="toast-message" class="text-[11px] font-bold">Módulo activado</span>
</div>
<!-- JAVASCRIPT LOGIC -->
<script>
// Audio Synthesizer via Web Audio API (no external files)
let audioCtx = null;
let isSoundOn = false;
function initAudio() {
if (!audioCtx) {
audioCtx = new (window.AudioContext || window.webkitAudioContext)();
}
}
function playBeep(freq = 440, type = 'sine', duration = 0.1) {
if (!isSoundOn) return;
try {
initAudio();
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
const vol = parseInt(document.getElementById('slider-vol').value) / 100;
osc.type = type;
osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
gain.gain.setValueAtTime(vol * 0.15, audioCtx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start();
osc.stop(audioCtx.currentTime + duration);
} catch (e) {
console.warn('Audio Context disabled or not initialized', e);
}
}
// Toggle Sound State
function toggleSound() {
isSoundOn = !isSoundOn;
const textElem = document.getElementById('sound-state-text');
const btnElem = document.getElementById('btn-sound');
if (isSoundOn) {
initAudio();
textElem.innerText = 'ACTIVADO';
textElem.className = 'text-sq-cyan';
btnElem.classList.add('border-sq-cyan');
showToast('Sonido sintético activado');
playBeep(880, 'sine', 0.15);
} else {
textElem.innerText = 'DESACTIVADO';
textElem.className = 'text-sq-text-muted';
btnElem.classList.remove('border-sq-cyan');
showToast('Sonido desactivado');
}
}
// Value display updater for range sliders
function updateVal(id, value) {
document.getElementById(id).innerText = value;
playBeep(200 + parseInt(value), 'triangle', 0.03);
}
// Adjust console luminosity effect
function updateLuminosity(val) {
const opacity = val / 100;
document.querySelector('.max-w-\\[1440px\\]').style.filter = `brightness(${opacity})`;
}
// Coin click interaction
function coinClickEffect() {
playBeep(523.25, 'sine', 0.1);
setTimeout(() => playBeep(659.25, 'sine', 0.15), 80);
showToast('Moneda FREAKCOIN seleccionada · Módulo listo');
}
// Module selection trigger
function selectModule(name) {
playBeep(440, 'square', 0.08);
showToast(`Módulo cargado: ${name}`);
}
// Fullscreen / Immersive view toggle
function toggleImmersiveView() {
playBeep(330, 'sine', 0.12);
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().catch(() => {});
showToast('Modo Inmersivo: Pantalla completa');
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
showToast('Modo Inmersivo: Desactivado');
}
}
}
// Font size preference adjustment
function changeFontSize(val) {
document.body.style.fontSize = val === '90%' ? '11px' : val === '110%' ? '13px' : '12px';
showToast(`Tamaño de texto: ${val}`);
}
// Reset preferences
function resetPreferences() {
document.getElementById('slider-pieces').value = 100;
document.getElementById('val-pieces').innerText = '100%';
document.getElementById('slider-font').value = 100;
document.getElementById('val-font').innerText = '100%';
document.getElementById('slider-lum').value = 100;
document.getElementById('val-lum').innerText = '100%';
updateLuminosity(100);
document.getElementById('slider-vol').value = 70;
document.getElementById('val-vol').innerText = '70%';
document.getElementById('select-fontsize').value = '100%';
changeFontSize('100%');
document.getElementById('select-theme').value = 'sqone';
if (isSoundOn) toggleSound();
showToast('Preferencias restablecidas al origen');
}
// Notification Toast Handler
let toastTimeout;
function showToast(msg) {
const toast = document.getElementById('toast-modal');
const toastMsg = document.getElementById('toast-message');
toastMsg.innerText = msg;
toast.classList.remove('opacity-0', 'pointer-events-none', 'translate-y-4');
toast.classList.add('opacity-100', 'translate-y-0');
clearTimeout(toastTimeout);
toastTimeout = setTimeout(() => {
toast.classList.remove('opacity-100', 'translate-y-0');
toast.classList.add('opacity-0', 'pointer-events-none', 'translate-y-4');
}, 2500);
}
</script>
</body>
</html>