30a09fdee6
Primera version. Cinco motores (projectM, Butterchurn, Hydra, Shaders GLSL y mezclador VJ con camara y video), panel de control web, deteccion de BPM propia, pantalla de conexion con codigo QR, instalador robusto para Raspberry Pi 4 y 5 y documentacion completa en docs/. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
69 lines
2.4 KiB
HTML
69 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>FOSFENO :: Escenario</title>
|
|
<style>
|
|
html, body {
|
|
margin: 0; padding: 0; width: 100%; height: 100%;
|
|
background: #000; overflow: hidden; cursor: none;
|
|
}
|
|
canvas {
|
|
position: absolute; top: 0; left: 0;
|
|
width: 100vw; height: 100vh; display: none;
|
|
}
|
|
canvas.visible { display: block; }
|
|
#msg {
|
|
position: absolute; top: 50%; left: 0; right: 0;
|
|
transform: translateY(-50%); text-align: center;
|
|
color: #2a2a35; font-family: monospace; font-size: 2vw;
|
|
letter-spacing: 0.3em;
|
|
}
|
|
/* Pantalla de conexion: se muestra hasta que alguien abre el panel */
|
|
#info {
|
|
position: absolute; inset: 0; display: none;
|
|
flex-direction: column; align-items: center; justify-content: center;
|
|
gap: 2.2vh; background: #050805;
|
|
font-family: "Segoe UI", system-ui, sans-serif;
|
|
}
|
|
.info-title {
|
|
color: #b4ff00; font-size: 5vh; font-weight: 800; letter-spacing: 0.4em;
|
|
text-shadow: 0 0 24px rgba(180, 255, 0, 0.6);
|
|
}
|
|
.info-text { color: #cfe8ad; font-size: 2.8vh; }
|
|
.info-url {
|
|
color: #ff9d2a; font-size: 4.4vh; font-weight: 800; font-family: monospace;
|
|
text-shadow: 0 0 18px rgba(255, 157, 42, 0.5);
|
|
}
|
|
.info-qr {
|
|
width: 34vh; height: 34vh; background: #fff;
|
|
padding: 1.6vh; border-radius: 1.4vh; image-rendering: pixelated;
|
|
}
|
|
.info-sub { color: #6f8a52; font-size: 2.3vh; font-family: monospace; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="msg">FOSFENO</div>
|
|
|
|
<!-- Pantalla de conexion (QR + direccion del panel) -->
|
|
<div id="info">
|
|
<div class="info-title">F O S F E N O</div>
|
|
<div class="info-text">Escanea el codigo con el movil, o abre la direccion:</div>
|
|
<div class="info-url" id="info-url">buscando direccion...</div>
|
|
<img id="info-qr" class="info-qr" alt="codigo QR del panel">
|
|
<div class="info-sub" id="info-sub"></div>
|
|
</div>
|
|
|
|
<canvas id="butterchurn"></canvas>
|
|
<canvas id="hydra"></canvas>
|
|
<canvas id="shaders"></canvas>
|
|
|
|
<script src="/lib/socket.io.min.js"></script>
|
|
<script src="/lib/qrcode.js"></script>
|
|
<script src="/lib/butterchurn.min.js"></script>
|
|
<script src="/lib/butterchurn-presets.min.js"></script>
|
|
<script src="/lib/hydra-synth.js"></script>
|
|
<script src="/stage/stage.js"></script>
|
|
</body>
|
|
</html>
|