Reloj Online Pantalla Completa - Digital Analogico - Modo Nocturno Dayspedia New! -

En un mundo donde la puntualidad y la gestión del tiempo son fundamentales, disponer de una herramienta visualmente clara y adaptable es esencial. El Reloj Online de Dayspedia se presenta como una solución integral para quienes buscan una visualización de la hora precisa, estética y funcional desde cualquier navegador . Visualización en Pantalla Completa

Una de las características más potentes de esta herramienta es su capacidad para entrar en modo de pantalla completa. Esto transforma cualquier dispositivo —desde un ordenador de escritorio hasta una tablet o televisor inteligente— en un reloj de pared digital de alta visibilidad .

Sin distracciones: Al activar el modo completo, los controles de navegación y otros elementos del navegador desaparecen, dejando únicamente la hora como protagonista .

Ideal para entornos compartidos: Perfecto para aulas de clase, oficinas de planta abierta, o durante eventos y conferencias donde todos los presentes necesitan ver la hora exacta con un solo vistazo . Versatilidad de Estilos: Digital y Analógico

Dayspedia permite alternar instantáneamente entre dos conceptos fundamentales de cronometría según la preferencia del usuario o la necesidad del momento : En un mundo donde la puntualidad y la

Reloj Digital: Ofrece una precisión numérica inmediata. Es la opción preferida para tareas que requieren una lectura exacta al segundo, como en laboratorios o sesiones de entrenamiento .

Reloj Analógico: Proporciona una "imagen" visual del tiempo. Es excelente para estimar rápidamente cuánto tiempo queda de una hora o para aquellos que prefieren una estética clásica que se integre con la decoración del espacio de trabajo . Modo Nocturno: Confort Visual en la Oscuridad

El Modo Nocturno de Dayspedia está diseñado específicamente para entornos de baja luminosidad. Al activarlo, la interfaz reduce el brillo y utiliza una paleta de colores oscuros que previene la fatiga visual y minimiza la interrupción del ritmo circadiano antes de dormir . Online Clock: Full Screen - Digital/Analog - Dayspedia.com

Online Clock - exact time with seconds on the full screen. Night mode, analogue or digital view switch. Dayspedia.com Change your clock's display - Android Help )(); </script> </body> </html>

Here is the HTML/CSS/JS write-up for a Full-Screen Online Clock with Analog, Digital, and Night Mode, as requested. You can save and run this file in any browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Full-Screen Clock | Analog + Digital + Night Mode | Dayspedia Style</title>
  <style>
    * 
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      user-select: none; /* avoid accidental text selection on click */

body 
  background: radial-gradient(circle at 30% 10%, #1a2a3a, #0b1219);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', 'Poppins', 'Inter', system-ui, -apple-system, 'Roboto', monospace;
  transition: background 0.4s ease, color 0.3s ease;
  padding: 20px;
/* NIGHT MODE STYLES (dark elegant) */
body.night-mode 
  background: radial-gradient(circle at 30% 10%, #0a0f1c, #03060c);
body.night-mode .clock-card 
  background: rgba(12, 20, 28, 0.75);
  backdrop-filter: blur(12px);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(66, 180, 255, 0.15);
body.night-mode .digital-time 
  color: #eef5ff;
  text-shadow: 0 0 8px #3bc9ff, 0 0 2px #7fd4ff;
body.night-mode .date-info 
  color: #bbd9ff;
body.night-mode .analog-clock .hour-hand 
  background: #cfebff;
  box-shadow: 0 0 2px #5bc0ff;
body.night-mode .analog-clock .minute-hand 
  background: #e0f0ff;
body.night-mode .analog-clock .second-hand 
  background: #ff9f7c;
  box-shadow: 0 0 4px #ffaa70;
body.night-mode .center-dot 
  background: #ffbc7a;
  border: 2px solid #1e2f3c;
body.night-mode .tick 
  background: #8aaec0;
body.night-mode .toggle-night-btn 
  background: #ffdd99;
  color: #0c1b27;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
body.night-mode .toggle-night-btn:hover 
  background: #ffe5b4;
/* MAIN CARD */
.clock-card 
  background: rgba(245, 248, 255, 0.82);
  backdrop-filter: blur(14px);
  border-radius: 64px;
  padding: 2rem 2rem 2rem 2rem;
  box-shadow: 0 30px 50px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: all 0.3s;
  width: 100%;
  max-width: 850px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
/* FULLSCREEN BUTTON (left side style) + night mode toggle */
.action-bar 
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
.fullscreen-btn, .toggle-night-btn 
  background: #1f3b4c;
  border: none;
  padding: 10px 20px;
  border-radius: 60px;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(4px);
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
.fullscreen-btn 
  background: #2c5a6e;
  color: white;
.fullscreen-btn:hover 
  background: #1e4657;
  transform: scale(0.97);
.toggle-night-btn 
  background: #1f2f3a;
  color: #f9e0a0;
/* DIGITAL AREA */
.digital-area 
  text-align: center;
  width: 100%;
  padding: 0.5rem;
.digital-time 
  font-size: 5rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', 'Fira Mono', monospace;
  letter-spacing: 8px;
  color: #0a2e42;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: color 0.2s;
  word-break: keep-all;
.date-info 
  font-size: 1.5rem;
  margin-top: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #2c5a6e;
  background: rgba(255, 255, 255, 0.4);
  display: inline-block;
  padding: 0.2rem 1.4rem;
  border-radius: 60px;
  backdrop-filter: blur(2px);
/* ANALOG CLOCK CONTAINER */
.analog-container 
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
canvas 
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  width: 260px;
  height: 260px;
  max-width: 60vw;
  max-height: 60vw;
  transition: all 0.2s;
/* extra footer dayspedia vibe */
.info-footer 
  font-size: 0.75rem;
  color: #5f7f8f;
  margin-top: 8px;
  letter-spacing: 1px;
  font-weight: 400;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  padding: 8px 16px;
  border-radius: 60px;
body.night-mode .info-footer 
  color: #6e8faa;
  background: rgba(255, 255, 255, 0.05);
@media (max-width: 550px) 
  .clock-card 
    padding: 1.5rem;
    border-radius: 40px;
.digital-time 
    font-size: 2.8rem;
    letter-spacing: 3px;
.date-info 
    font-size: 1rem;
.action-bar 
    justify-content: center;
.fullscreen-btn, .toggle-night-btn 
    padding: 6px 15px;
    font-size: 0.75rem;
button 
  border: none;
  background: none;
button:active 
  transform: scale(0.96);



</style>
</head>
<body>


<div class="clock-card" id="clockCard">
<div class="action-bar">
<button class="fullscreen-btn" id="fullscreenBtn">⛶ FULL SCREEN</button>
<button class="toggle-night-btn" id="nightModeBtn">🌙 NIGHT MODE</button>
</div>


<!-- DIGITAL CLOCK -->
<div class="digital-area">
<div class="digital-time" id="digitalClock">--:--:--</div>
<div class="date-info" id="dateDisplay">--, -- --, ----</div>
</div> Reloj online pantalla completa — Digital


<!-- ANALOG CANVAS CLOCK -->
<div class="analog-container">
<canvas id="analogCanvas" width="400" height="400" style="width:100%; height:auto; max-width:280px; max-height:280px; aspect-ratio:1/1"></canvas>
</div>


<div class="info-footer">
<span>🕒 reloj online · pantalla completa</span>
<span>⚡ modo nocturno activable</span>
<span>📅 Dayspedia spirit · tiempo real</span>
</div>
</div>


<script>
(function() 
// DOM elements
const digitalElem = document.getElementById('digitalClock');
const dateElem = document.getElementById('dateDisplay');
const canvas = document.getElementById('analogCanvas');
const ctx = canvas.getContext('2d');


// night mode toggle
const nightBtn = document.getElementById('nightModeBtn');
const bodyEl = document.body;
// fullscreen
const fullBtn = document.getElementById('fullscreenBtn');
// Resize canvas for crisp rendering (set dimensions properly)
function resizeCanvas() 
  const size = Math.min(280, window.innerWidth * 0.45);
  const canvasParent = canvas.parentElement;
  let targetSize = 260;
  if (window.innerWidth < 500) targetSize = 200;
  else targetSize = 260;
  // keep canvas actual drawing resolution high
  canvas.width = 400;
  canvas.height = 400;
  canvas.style.width = `$targetSizepx`;
  canvas.style.height = `$targetSizepx`;
window.addEventListener('resize', () => 
  resizeCanvas();
  drawAnalogClock(); // redraw after resize
);
// draw analog clock (based on current Date)
function drawAnalogClock() 
  if (!ctx) return;
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();
  const milliseconds = now.getMilliseconds();
const secWithMs = seconds + milliseconds / 1000;
  const minuteWithSec = minutes + secWithMs / 60;
  const hourWithMin = (hours % 12) + minuteWithSec / 60;
const radius = canvas.width / 2;
  const centerX = radius;
  const centerY = radius;
// clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
// background style influenced by night mode (soft gradient)
  const isNight = bodyEl.classList.contains('night-mode');
  const dialGrad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  if (isNight) 
    dialGrad.addColorStop(0, '#1f2e3c');
    dialGrad.addColorStop(1, '#0d1820');
    ctx.fillStyle = dialGrad;
   else 
    dialGrad.addColorStop(0, '#fafefd');
    dialGrad.addColorStop(1, '#eef2f7');
    ctx.fillStyle = dialGrad;
ctx.beginPath();
  ctx.arc(centerX, centerY, radius - 4, 0, Math.PI * 2);
  ctx.fill();
// outer rim
  ctx.strokeStyle = isNight ? '#3a5f78' : '#4f7e96';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius - 4, 0, Math.PI * 2);
  ctx.stroke();
// hour markers
  for (let i = 1; i <= 12; i++) 
    let angle = (i * 30 - 90) * Math.PI / 180;
    let innerRadius = radius - 20;
    let outerRadius = radius - 8;
    let x1 = centerX + innerRadius * Math.cos(angle);
    let y1 = centerY + innerRadius * Math.sin(angle);
    let x2 = centerX + outerRadius * Math.cos(angle);
    let y2 = centerY + outerRadius * Math.sin(angle);
    ctx.beginPath();
    ctx.lineWidth = (i % 3 === 0) ? 4 : 2.5;
    ctx.strokeStyle = isNight ? '#bcd9ff' : '#2e5f73';
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
// optional numerals (elegant minimalist)
    ctx.font = `bold $radius * 0.12px 'Segoe UI', system-ui`;
    ctx.fillStyle = isNight ? '#cae3ff' : '#1b4b5e';
    ctx.shadowBlur = 0;
    let textRadius = radius - 32;
    let numX = centerX + textRadius * Math.cos(angle);
    let numY = centerY + textRadius * Math.sin(angle) + (radius * 0.04);
    ctx.fillText(i.toString(), numX - 7, numY + 5);
// minute ticks (60 small)
  for (let i = 0; i < 60; i++) 
    let angle = (i * 6 - 90) * Math.PI / 180;
    let innerTick = radius - 12;
    let outerTick = radius - 4;
    let x1 = centerX + innerTick * Math.cos(angle);
    let y1 = centerY + innerTick * Math.sin(angle);
    let x2 = centerX + outerTick * Math.cos(angle);
    let y2 = centerY + outerTick * Math.sin(angle);
    ctx.beginPath();
    ctx.lineWidth = 1.2;
    ctx.strokeStyle = isNight ? '#7f9fc0' : '#7299ae';
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
// HOUR HAND
  let hourAngle = (hourWithMin * 30 - 90) * Math.PI / 180;
  let hourLength = radius * 0.5;
  let hourX = centerX + hourLength * Math.cos(hourAngle);
  let hourY = centerY + hourLength * Math.sin(hourAngle);
  ctx.beginPath();
  ctx.lineWidth = 6;
  ctx.lineCap = 'round';
  ctx.strokeStyle = isNight ? '#f0fcff' : '#1a4458';
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(hourX, hourY);
  ctx.stroke();
// MINUTE HAND
  let minuteAngle = (minuteWithSec * 6 - 90) * Math.PI / 180;
  let minuteLength = radius * 0.72;
  let minuteX = centerX + minuteLength * Math.cos(minuteAngle);
  let minuteY = centerY + minuteLength * Math.sin(minuteAngle);
  ctx.beginPath();
  ctx.lineWidth = 4;
  ctx.strokeStyle = isNight ? '#ddf0ff' : '#1b5c73';
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(minuteX, minuteY);
  ctx.stroke();
// SECOND HAND (with dynamic redish feel)
  let secondAngle = (secWithMs * 6 - 90) * Math.PI / 180;
  let secondLength = radius * 0.82;
  let secondX = centerX + secondLength * Math.cos(secondAngle);
  let secondY = centerY + secondLength * Math.sin(secondAngle);
  ctx.beginPath();
  ctx.lineWidth = 2.2;
  ctx.strokeStyle = isNight ? '#ffaa77' : '#e0482a';
  ctx.moveTo(centerX, centerY);
  ctx.lineTo(secondX, secondY);
  ctx.stroke();
// center dot
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius * 0.06, 0, 2 * Math.PI);
  ctx.fillStyle = isNight ? '#f5bc70' : '#a03e2a';
  ctx.fill();
  ctx.beginPath();
  ctx.arc(centerX, centerY, radius * 0.025, 0, 2 * Math.PI);
  ctx.fillStyle = '#faf9f0';
  ctx.fill();
// add glass effect highlight
  ctx.beginPath();
  ctx.arc(centerX - 5, centerY - 5, 7, 0, 2 * Math.PI);
  ctx.fillStyle = 'rgba(255,255,245,0.2)';
  ctx.fill();
// Update digital & date, then analog
function updateTime() 
  const now = new Date();
// digital - 24h format with leading zeros
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  digitalElem.textContent = `$hours:$minutes:$seconds`;
// date formatting: "Friday, April 25, 2026" style (Dayspedia friendly)
  const options =  weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' ;
  const formattedDate = now.toLocaleDateString(undefined, options);
  dateElem.textContent = formattedDate;
drawAnalogClock();
// Night Mode toggle with localstorage memory (nice extra)
function initNightMode() 
  const savedMode = localStorage.getItem('relojNightMode');
  if (savedMode === 'enabled') 
    bodyEl.classList.add('night-mode');
    nightBtn.innerHTML = '☀️ DAY MODE';
   else 
    bodyEl.classList.remove('night-mode');
    nightBtn.innerHTML = '🌙 NIGHT MODE';
drawAnalogClock(); // refresh clock style
function toggleNightMode() 
  if (bodyEl.classList.contains('night-mode')) 
    bodyEl.classList.remove('night-mode');
    localStorage.setItem('relojNightMode', 'disabled');
    nightBtn.innerHTML = '🌙 NIGHT MODE';
   else 
    bodyEl.classList.add('night-mode');
    localStorage.setItem('relojNightMode', 'enabled');
    nightBtn.innerHTML = '☀️ DAY MODE';
drawAnalogClock(); // Re-render analog with new theme
// FULLSCREEN API (works for cross-browser)
function toggleFullscreen() 
  const elem = document.documentElement;
  if (!document.fullscreenElement && !document.webkitFullscreenElement) 
    if (elem.requestFullscreen) 
      elem.requestFullscreen();
     else if (elem.webkitRequestFullscreen)  /* Safari */
      elem.webkitRequestFullscreen();
     else if (elem.msRequestFullscreen) 
      elem.msRequestFullscreen();
fullBtn.textContent = '✖ EXIT';
   else 
    if (document.exitFullscreen) 
      document.exitFullscreen();
     else if (document.webkitExitFullscreen) 
      document.webkitExitFullscreen();
fullBtn.textContent = '⛶ FULL SCREEN';
// Update fullscreen button text on change
function handleFullscreenChange()  document.webkitFullscreenElement) 
    fullBtn.textContent = '✖ EXIT';
   else 
    fullBtn.textContent = '⛶ FULL SCREEN';
// Re-draw ensures canvas adapts after fullscreen switch
  setTimeout(() => 
    resizeCanvas();
    drawAnalogClock();
  , 50);
// Event listeners + interval
fullBtn.addEventListener('click', toggleFullscreen);
nightBtn.addEventListener('click', toggleNightMode);
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
// Start clock updates
updateTime();
setInterval(updateTime, 250); // smooth second hand movement
// initial canvas resize and theme draw
resizeCanvas();
initNightMode();
window.addEventListener('load', () => 
  resizeCanvas();
  drawAnalogClock();
);
// optional re-draw on any orientation change
window.addEventListener('orientationchange', () => 
  setTimeout(() => 
    resizeCanvas();
    drawAnalogClock();
  , 30);
);
// extra polish: ensure canvas draw after any class theme change re-trigger
const observer = new MutationObserver(() => drawAnalogClock());
observer.observe(bodyEl,  attributes: true, attributeFilter: ['class'] );



)();
</script>
</body>
</html>

Paso 4: Pantalla Completa Real

1. Full-Screen Mode (Pantalla Completa)

Reloj online pantalla completa — Digital, Analógico y Modo nocturno (Dayspedia)

Dayspedia ofrece un reloj online en pantalla completa con opciones para visualización digital y analógica, además de un modo nocturno pensado para lecturas con baja luz. Aquí tienes un artículo informativo y claro que puedes usar tal cual o adaptar: