File: /home/zeusxp5/streetliveweather.com/index.php
<!DOCTYPE html>
<?php
$year = date('Y');
$time = date('H:i:s');
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maintenance | Coming Soon 2025</title>
<style>
:root{
--bg:#02040a;
--panel:#070b16;
--accent:#06b6d4;
--accent2:#22c55e;
--accent3:#f97316;
--text:#f8fafc;
--muted:#94a3b8;
--border:#1e293b;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,Inter,Segoe UI,Arial,sans-serif}
body{
min-height:100vh;
background:
radial-gradient(circle at 20% 20%,rgba(6,182,212,.12),transparent 40%),
radial-gradient(circle at 80% 80%,rgba(34,197,94,.12),transparent 40%),
linear-gradient(180deg,#02040a,#02040a 60%,#01030a);
color:var(--text);
overflow:hidden;
}
.noise::before{
content:"";
position:fixed;
inset:0;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.035"/></svg>');
pointer-events:none;
}
.container{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:40px;
}
.card{
width:100%;
max-width:1100px;
background:linear-gradient(180deg,#070b16,#02040a);
border:1px solid var(--border);
border-radius:28px;
padding:90px 70px;
position:relative;
overflow:hidden;
box-shadow:0 40px 120px rgba(0,0,0,.8);
}
.card::after{
content:"";
position:absolute;
inset:-40%;
background:conic-gradient(from 0deg,var(--accent),transparent 30%,var(--accent2),transparent 60%,var(--accent3));
animation:spin 14s linear infinite;
opacity:.15;
}
@keyframes spin{to{transform:rotate(360deg)}}
.content{position:relative;z-index:2;text-align:center}
.badge{
display:inline-block;
padding:10px 22px;
border-radius:999px;
background:rgba(6,182,212,.15);
border:1px solid rgba(6,182,212,.4);
color:var(--accent);
letter-spacing:2px;
font-size:.75rem;
margin-bottom:30px;
}
h1{
font-size:clamp(3rem,6vw,4.8rem);
line-height:1.1;
background:linear-gradient(90deg,#fff,var(--accent),var(--accent2));
-webkit-background-clip:text;
color:transparent;
animation:textGlow 4s ease-in-out infinite;
}
@keyframes textGlow{50%{filter:drop-shadow(0 0 18px rgba(6,182,212,.6))}}
p{
max-width:820px;
margin:30px auto 0;
color:var(--muted);
font-size:1.1rem;
}
.loader{
margin:60px auto 0;
width:120px;
height:120px;
border-radius:50%;
border:2px solid rgba(255,255,255,.05);
border-top:3px solid var(--accent);
animation:rotate 1.4s linear infinite;
}
@keyframes rotate{to{transform:rotate(360deg)}}
.countdown{
margin-top:70px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:30px;
}
.time-box{
background:linear-gradient(180deg,#020617,#02040a);
border:1px solid var(--border);
border-radius:18px;
padding:28px 10px;
}
.time-box strong{display:block;font-size:2.4rem;color:var(--accent)}
.time-box span{font-size:.85rem;color:var(--muted);letter-spacing:1px}
footer{
margin-top:80px;
font-size:.85rem;
color:var(--muted);
}
.float{
position:absolute;
width:240px;height:240px;
border-radius:50%;
background:radial-gradient(circle,var(--accent),transparent 70%);
filter:blur(60px);
animation:float 10s ease-in-out infinite;
opacity:.35;
}
.float.one{top:-80px;left:-80px}
.float.two{bottom:-100px;right:-100px;animation-delay:5s}
@keyframes float{50%{transform:translateY(-40px) translateX(30px)}}
</style>
</head>
<body class="noise">
<div class="container">
<div class="card">
<div class="float one"></div>
<div class="float two"></div>
<div class="content">
<div class="badge">SYSTEM MAINTENANCE</div>
<h1>We Are Coming Back Soon</h1>
<p>
Our platform is currently undergoing scheduled maintenance to deliver a faster,
more secure, and more refined digital experience in 2025. We appreciate your patience
while we finalize critical system upgrades and performance optimizations.
</p>
<div class="loader"></div>
<div class="countdown" id="countdown">
<div class="time-box"><strong id="d">0</strong><span>DAYS</span></div>
<div class="time-box"><strong id="h">0</strong><span>HOURS</span></div>
<div class="time-box"><strong id="m">0</strong><span>MINUTES</span></div>
<div class="time-box"><strong id="s">0</strong><span>SECONDS</span></div>
</div>
<footer>
Maintenance Mode © <?php echo $year; ?> | Server Time: <?php echo $time; ?>
</footer>
</div>
</div>
</div>
<script>
// Countdown Timer
const target = new Date('2025-12-31T23:59:59').getTime();
setInterval(()=>{
const now = new Date().getTime();
let diff = target - now;
if(diff < 0) diff = 0;
const d = Math.floor(diff / (1000*60*60*24));
const h = Math.floor((diff / (1000*60*60)) % 24);
const m = Math.floor((diff / (1000*60)) % 60);
const s = Math.floor((diff / 1000) % 60);
document.getElementById('d').textContent = d;
document.getElementById('h').textContent = h;
document.getElementById('m').textContent = m;
document.getElementById('s').textContent = s;
},1000);
</script>
</body>
</html>