PHP Digital Clock with Theme Switcher
Create a sleek digital clock with multiple themes (neon, minimal, retro) and PHP-powered timezone support.
PHPCSSClockThemes
Overview
Build a digital clock that supports multiple visual themes and timezones, all configured from PHP.
index.php
php
<?php
$themes = ['neon', 'minimal', 'retro', 'matrix'];
$timezones = ['America/New_York', 'Europe/London', 'Asia/Tokyo', 'Australia/Sydney'];
$tz = $_GET['tz'] ?? 'America/New_York';
$theme = $_GET['theme'] ?? 'neon';
date_default_timezone_set($tz);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Digital Clock</title>
<style>
body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; font-family: 'Courier New', monospace; transition: all 0.5s; }
body.neon { background: #0a0a0a; }
body.minimal { background: #fafafa; }
body.retro { background: #2c1810; }
body.matrix { background: #0d0d0d; }
.clock { font-size: 6rem; font-weight: bold; letter-spacing: 8px; padding: 2rem 3rem; border-radius: 20px; }
.neon .clock { color: #0ff; text-shadow: 0 0 20px #0ff, 0 0 60px #0ff; }
.minimal .clock { color: #333; border: 2px solid #ddd; }
.retro .clock { color: #ff6600; background: #1a0f00; border: 3px solid #ff6600; }
.matrix .clock { color: #00ff41; text-shadow: 0 0 15px #00ff41; }
.controls { margin-top: 2rem; display: flex; gap: 1rem; }
.controls select { padding: 8px 16px; border-radius: 8px; font-size: 1rem; }
</style>
</head>
<body class="<?= htmlspecialchars($theme) ?>">
<div class="clock" id="clock"><?= date('H:i:s') ?></div>
<div style="font-size:1.2rem;margin-top:1rem;opacity:0.7;color:inherit"><?= date('l, F j, Y') ?></div>
<div class="controls">
<select onchange="location='?theme='+this.value+'&tz=<?= urlencode($tz) ?>'">
<?php foreach ($themes as $t): ?>
<option value="<?= $t ?>" <?= $t===$theme?'selected':'' ?>><?= ucfirst($t) ?></option>
<?php endforeach; ?>
</select>
<select onchange="location='?tz='+this.value+'&theme=<?= urlencode($theme) ?>'">
<?php foreach ($timezones as $t): ?>
<option value="<?= $t ?>" <?= $t===$tz?'selected':'' ?>><?= $t ?></option>
<?php endforeach; ?>
</select>
</div>
<script>
setInterval(() => {
document.getElementById('clock').textContent = new Date().toLocaleTimeString('en-GB', { timeZone: '<?= $tz ?>' });
}, 1000);
</script>
</body>
</html>Technologies
- PHP — timezone management, theme configuration - CSS — theme-based styling, text-shadow neon effects - JavaScript — live clock updates
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!