PHP Countdown Timer & Event Page
Build a dynamic countdown timer for events with animated flip-clock digits, powered by PHP date calculations.
Overview
Create a beautiful flip-clock style countdown timer. PHP calculates the time difference and serves the target date; CSS styles the flipping digits.
index.php
<?php
$event_name = "Product Launch ������";
$target_date = "2026-12-31 00:00:00";
$now = new DateTime();
$target = new DateTime($target_date);
$diff = $now->diff($target);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown to <?= htmlspecialchars($event_name) ?></title>
<style>
body { font-family: sans-serif; background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
h1 { font-size: 2.5rem; margin-bottom: 2rem; }
.countdown { display: flex; gap: 1.5rem; }
.unit { text-align: center; }
.flip-card { background: #1e1e3f; width: 100px; height: 120px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: bold; color: #6c63ff; box-shadow: 0 8px 30px rgba(108,99,255,0.3); position: relative; overflow: hidden; }
.flip-card::after { content: ''; position: absolute; width: 100%; height: 1px; background: rgba(0,0,0,0.3); top: 50%; }
.label { margin-top: 0.5rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; opacity: 0.7; }
</style>
</head>
<body>
<h1><?= htmlspecialchars($event_name) ?></h1>
<div class="countdown">
<div class="unit"><div class="flip-card" id="days"><?= $diff->days ?></div><div class="label">Days</div></div>
<div class="unit"><div class="flip-card" id="hours"><?= $diff->h ?></div><div class="label">Hours</div></div>
<div class="unit"><div class="flip-card" id="mins"><?= $diff->i ?></div><div class="label">Minutes</div></div>
<div class="unit"><div class="flip-card" id="secs"><?= $diff->s ?></div><div class="label">Seconds</div></div>
</div>
<script>
const target = new Date("<?= $target_date ?>").getTime();
setInterval(() => {
const diff = target - Date.now();
if (diff <= 0) return location.reload();
document.getElementById('days').textContent = Math.floor(diff / 86400000);
document.getElementById('hours').textContent = String(Math.floor((diff % 86400000) / 3600000)).padStart(2,'0');
document.getElementById('mins').textContent = String(Math.floor((diff % 3600000) / 60000)).padStart(2,'0');
document.getElementById('secs').textContent = String(Math.floor((diff % 60000) / 1000)).padStart(2,'0');
}, 1000);
</script>
</body>
</html>Technologies
- PHP — date/time calculation with DateTime - CSS — flip-card styling, gradients, shadows - JavaScript — live second-by-second countdown
Related Projects
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.
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
Comments (0)
No comments yet. Be the first to comment!