GIF title
Tap to Customize
File Name:
Created by:
Parent:
Children:
/* Footer / Info bar - clean minimal UI, fades on idle but always accessible */ .info-bar position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 0.9rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); padding: 10px 20px; border-radius: 60px; width: fit-content; margin: 0 auto; color: #f0ead8; font-weight: 500; letter-spacing: 0.5px; border: 1px solid rgba(255, 245, 200, 0.3); pointer-events: none; z-index: 20; font-family: monospace; transition: opacity 0.3s; white-space: nowrap;
<div class="clock-container"> <div class="canvas-wrapper"> <canvas id="analogCanvas" width="800" height="800" style="width: min(85vmin, 800px); height: min(85vmin, 800px);"> Your browser does not support the canvas element. </canvas> </div> </div> reloj analógico online pantalla completa
<div class="info-bar"> 🕰️ RELOJ ANALÓGICO | <span class="digital-time" id="liveDigitalClock">--:--:--</span> ⏻ </div> /* Footer / Info bar - clean minimal
body background: radial-gradient(circle at center, #1a2a3a, #0a0f1a); min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Segoe UI', 'Poppins', 'Roboto', system-ui, -apple-system, 'Inter', sans-serif; overflow: hidden; /* Kill any scrollbars for fullscreen purity */ touch-action: manipulation; padding: 10px 20px
/* subtle interactive shine */ canvas:active transform: scale(0.99); transition: transform 0.05s;
/* Footer / Info bar - clean minimal UI, fades on idle but always accessible */ .info-bar position: fixed; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 0.9rem; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(10px); padding: 10px 20px; border-radius: 60px; width: fit-content; margin: 0 auto; color: #f0ead8; font-weight: 500; letter-spacing: 0.5px; border: 1px solid rgba(255, 245, 200, 0.3); pointer-events: none; z-index: 20; font-family: monospace; transition: opacity 0.3s; white-space: nowrap;
<div class="clock-container"> <div class="canvas-wrapper"> <canvas id="analogCanvas" width="800" height="800" style="width: min(85vmin, 800px); height: min(85vmin, 800px);"> Your browser does not support the canvas element. </canvas> </div> </div>
<div class="info-bar"> 🕰️ RELOJ ANALÓGICO | <span class="digital-time" id="liveDigitalClock">--:--:--</span> ⏻ </div>
body background: radial-gradient(circle at center, #1a2a3a, #0a0f1a); min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Segoe UI', 'Poppins', 'Roboto', system-ui, -apple-system, 'Inter', sans-serif; overflow: hidden; /* Kill any scrollbars for fullscreen purity */ touch-action: manipulation;
/* subtle interactive shine */ canvas:active transform: scale(0.99); transition: transform 0.05s;