/home/fdhrevqn/new.fdhrd.org/index.php
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Under Maintenance β’ 2025</title>
<meta name="description" content="Cool maintenance page with CSS & JavaScript animations β single file." />
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='%23ff7a18'/><text x='50' y='57' font-size='40' text-anchor='middle' font-family='Arial' fill='%23fff'>π </text></svg>">
<style>
/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#fff; background:#0b1020; overflow:hidden}
/* Animated gradient background */
.bg-gradient{
position:fixed;inset:0;background:linear-gradient(120deg,#0f1724 0%, #0b1222 20%, #06202b 50%, #00121a 100%);z-index:0;filter:blur(8px) brightness(.85);
animation:rotateBG 20s linear infinite;
transform-origin:50% 50%;
}
@keyframes rotateBG{0%{transform:rotate(0deg) scale(1)}50%{transform:rotate(6deg) scale(1.03)}100%{transform:rotate(0deg) scale(1)}}
/* Floating orbs */
.orb{position:fixed;border-radius:50%;filter:blur(30px);opacity:.18;mix-blend-mode:screen}
.orb.o1{width:520px;height:520px;left:-10%;top:-10%;background:radial-gradient(circle at 30% 30%, #ff7a18, transparent 40%)}
.orb.o2{width:360px;height:360px;right:-6%;top:10%;background:radial-gradient(circle at 70% 30%, #7b61ff, transparent 40%)}
.orb.o3{width:240px;height:240px;left:5%;bottom:-8%;background:radial-gradient(circle at 60% 60%, #06b6d4, transparent 40%)}
/* Layout */
.wrap{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px}
.card{width:100%;max-width:980px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border-radius:18px;padding:36px;backdrop-filter: blur(6px);box-shadow:0 10px 30px rgba(3,7,18,0.6);display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:center}
/* Left area */
.hero{padding-right:10px}
h1{font-size:clamp(28px,4.5vw,44px);line-height:1.02;margin-bottom:10px;letter-spacing:-0.02em}
.sub{color:rgba(255,255,255,0.78);margin-bottom:18px;font-size:16px}
.countdown{display:flex;gap:12px;margin-top:16px}
.countdown .box{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));padding:12px 16px;border-radius:10px;min-width:74px;text-align:center}
.countdown .num{font-weight:700;font-size:20px}
.countdown .label{font-size:12px;color:rgba(255,255,255,0.6);margin-top:4px}
/* Right area */
.panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:14px;align-items:stretch}
.pulse{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,#ff7a18,#ffb86b);font-weight:700;color:#08101a;font-size:13px;box-shadow:0 6px 18px rgba(255,122,24,0.18)}
.desc{font-size:14px;color:rgba(255,255,255,0.8)}
/* Email input */
.subscribe{display:flex;gap:8px;margin-top:6px}
.subscribe input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit;outline:none}
.subscribe button{padding:10px 14px;border-radius:10px;border:none;background:linear-gradient(90deg,#7b61ff,#06b6d4);color:#fff;font-weight:700;cursor:pointer}
.note{font-size:12px;color:rgba(255,255,255,0.55)}
/* Rocket / illustration */
.scene{position:relative;height:100%;display:flex;align-items:center;justify-content:center}
.rocket{width:160px;height:160px;position:relative}
.rocket svg{width:100%;height:100%;display:block}
.rocket .flame{transform-origin:50% 10%;animation:flame 400ms infinite}
@keyframes flame{0%{transform:scaleY(1)}50%{transform:scaleY(.75)}100%{transform:scaleY(1)}}
/* small screen */
@media (max-width:880px){
.card{grid-template-columns:1fr;max-width:720px}
.scene{order:-1;margin-bottom:8px}
}
/* floating sparkles */
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:white;opacity:.85;box-shadow:0 6px 20px rgba(255,255,255,0.12)}
/* subtle tilt animation */
.card{animation:cardFloat 8s ease-in-out infinite}
@keyframes cardFloat{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
/* footer */
.f{margin-top:12px;font-size:13px;color:rgba(255,255,255,0.55);display:flex;justify-content:space-between;align-items:center}
/* small helper */
.muted{color:rgba(255,255,255,0.55)}
</style>
</head>
<body>
<div class="bg-gradient" aria-hidden="true"></div>
<div class="orb o1" aria-hidden="true"></div>
<div class="orb o2" aria-hidden="true"></div>
<div class="orb o3" aria-hidden="true"></div>
<main class="wrap" role="main">
<section class="card" aria-labelledby="title">
<div class="hero">
<div class="scene" aria-hidden="true">
<div class="rocket" id="rocket">
<!-- Simple rocket SVG with animated flame -->
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="g1" x1="0" x2="1"><stop offset="0" stop-color="#7b61ff"/><stop offset="1" stop-color="#06b6d4"/></linearGradient>
</defs>
<g transform="translate(8,4)">
<path d="M24 0c-6.6 0-12 5.4-12 12 0 9.5 12 20 12 20s12-10.5 12-20c0-6.6-5.4-12-12-12z" fill="url(#g1)"/>
<circle cx="24" cy="12" r="5" fill="#fff" opacity="0.95"/>
<g class="flame" transform="translate(12,34)">
<ellipse cx="0" cy="0" rx="6" ry="12" fill="#ff7a18" opacity="0.95"/>
</g>
</g>
</svg>
</div>
</div>
<h1 id="title">We Are Under Maintenance β 2025</h1>
<p class="sub">We are updating our system for a better experience. Thank you for your patience β we will be back soon.</p>
<div class="countdown" aria-live="polite" id="countdown">
<div class="box"><div class="num" id="days">--</div><div class="label">Days</div></div>
<div class="box"><div class="num" id="hours">--</div><div class="label">Hours</div></div>
<div class="box"><div class="num" id="minutes">--</div><div class="label">Minutes</div></div>
<div class="box"><div class="num" id="seconds">--</div><div class="label">Seconds</div></div>
</div>
<div class="f">
<div class="muted">Status: <strong id="status">Maintenance</strong></div>
<div class="muted">Version: <strong>2025.1</strong></div>
</div>
</div>
<aside class="panel" aria-label="Information & contact">
<div style="display:flex;justify-content:space-between;align-items:center">
<span class="pulse">Updating</span>
<span class="muted">Estimated ready soon</span>
</div>
<div class="desc">We are rolling out a major update: security, performance & UI. If you need quick info, leave your email β we will notify you once weβre back online.</div>
<form class="subscribe" id="form">
<input id="email" type="email" placeholder="email@example.com" aria-label="email" />
<button type="submit">Notify Me</button>
</form>
<div class="note">We store your email only in this device (localStorage). No backend is used in this demo.</div>
<div style="margin-top:6px;display:flex;gap:8px;flex-wrap:wrap">
<button id="statusToggle" style="padding:8px 10px;border-radius:8px;border:none;cursor:pointer;background:rgba(255,255,255,0.02);color:inherit">Simulate: Finished</button>
<button id="downloadBtn" style="padding:8px 10px;border-radius:8px;border:none;cursor:pointer;background:rgba(255,255,255,0.02);color:inherit">Download Page</button>
</div>
<div style="margin-top:6px;font-size:12px;color:rgba(255,255,255,0.52)">Tip: You can save this file as <code>maintenance.html</code> and place it in your site root whenever you need downtime.</div>
</aside>
</section>
</main>
<!-- Sparkles generated by JS -->
<script>
/* Configuration */
const targetDate = new Date('2025-10-01T00:00:00+07:00').getTime();
/* Countdown */
function updateCountdown(){
const now = Date.now();
const diff = Math.max(0, targetDate - now);
const s = Math.floor(diff/1000);
const days = Math.floor(s / 86400);
const hours = Math.floor((s % 86400) / 3600);
const minutes = Math.floor((s % 3600) / 60);
const seconds = s % 60;
document.getElementById('days').textContent = String(days).padStart(2,'0');
document.getElementById('hours').textContent = String(hours).padStart(2,'0');
document.getElementById('minutes').textContent = String(minutes).padStart(2,'0');
document.getElementById('seconds').textContent = String(seconds).padStart(2,'0');
const status = document.getElementById('status');
status.textContent = diff>0 ? 'Maintenance' : 'Finished';
}
updateCountdown();
setInterval(updateCountdown, 1000);
/* Rocket subtle float */
(function(){
const r = document.getElementById('rocket');
let t=0;
function anim(){
t+=0.02;
r.style.transform = `translateY(${Math.sin(t)*6}px) rotate(${Math.sin(t/6)*2}deg)`;
requestAnimationFrame(anim);
}
anim();
})();
/* Sparkles */
(function(){
const count = 12;
for(let i=0;i<count;i++){
const s = document.createElement('div');
s.className='spark';
s.style.left = Math.random()*100+'%';
s.style.top = Math.random()*100+'%';
s.style.opacity = (0.2+Math.random()*0.8).toFixed(2);
const scale = 0.5 + Math.random()*1.8;
s.style.transform = `scale(${scale})`;
document.body.appendChild(s);
(function(el){
const dur = 6 + Math.random()*8;
el.animate([
{transform: `translateY(0) scale(${scale})`, opacity:el.style.opacity},
{transform: `translateY(${(Math.random()*40-20)}px) scale(${scale})`, opacity:0.02}
],{duration:dur*1000,iterations:Infinity,direction:'alternate',easing:'ease-in-out'});
})(s);
}
})();
/* Particles */
(function(){
const c = document.createElement('canvas');
c.style.position='fixed';c.style.inset='0';c.style.zIndex=1; c.style.pointerEvents='none';
document.body.appendChild(c);
const ctx = c.getContext('2d');
let w=0,h=0,particles=[];
function resize(){w=c.width=innerWidth;h=c.height=innerHeight}
addEventListener('resize',resize);resize();
function add(){
particles.push({x:Math.random()*w,y:Math.random()*h,dx:(Math.random()-0.5)*0.2,dy:(Math.random()-0.5)*0.2,r:1+Math.random()*2,alpha:0.05+Math.random()*0.2});
}
for(let i=0;i<120;i++)add();
function loop(){
ctx.clearRect(0,0,w,h);
for(let p of particles){
p.x += p.dx; p.y += p.dy;
if(p.x<0) p.x=w; if(p.x> w) p.x=0; if(p.y<0) p.y=h; if(p.y>h) p.y=0;
ctx.beginPath(); ctx.fillStyle = `rgba(255,255,255,${p.alpha})`; ctx.arc(p.x,p.y,p.r,0,Math.PI*2); ctx.fill();
}
requestAnimationFrame(loop);
}
loop();
})();
/* Email subscribe demo */
(function(){
const form = document.getElementById('form');
const email = document.getElementById('email');
const storageKey = 'maintenance_emails_demo_v1';
const saved = localStorage.getItem(storageKey);
if(saved){
try{const arr=JSON.parse(saved); if(arr.length) email.value = arr[arr.length-1];}catch(e){}
}
form.addEventListener('submit', (e)=>{
e.preventDefault();
const v = email.value.trim();
if(!v || !v.includes('@')){ alert('Please enter a valid email.'); return; }
let arr = [];
try{arr = JSON.parse(localStorage.getItem(storageKey)||'[]');}catch(e){arr=[]}
arr.push(v); localStorage.setItem(storageKey, JSON.stringify(arr.slice(-20)));
alert('Thank you β email saved locally in browser (demo).');
email.blur();
});
// download page
document.getElementById('downloadBtn').addEventListener('click', ()=>{
const html = '<!doctype html>\n' + document.documentElement.outerHTML;
const blob = new Blob([html],{type:'text/html'});
const url = URL.createObjectURL(blob);
const a = document.createElement('a'); a.href=url; a.download='maintenance-2025.html'; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
});
// simulation toggle
document.getElementById('statusToggle').addEventListener('click', ()=>{
const status = document.getElementById('status');
if(status.textContent === 'Maintenance'){
status.textContent = 'Finished';
document.querySelector('.pulse').textContent = 'Finished';
document.querySelector('.pulse').style.background = 'linear-gradient(90deg,#34d399,#10b981)';
}else{
status.textContent = 'Maintenance';
document.querySelector('.pulse').textContent = 'Updating';
document.querySelector('.pulse').style.background = 'linear-gradient(90deg,#ff7a18,#ffb86b)';
}
});
})();
</script>
</body>
</html>