Detalii Tehnice
Template gratuit pentru pagină de mentenanță preventivă. Design modern, efect glitch, terminal live și securitate afișată elegant.
Acest template gratuit pentru pagină de mentenanță preventivă este ideal pentru site-urile care au nevoie de întreținere regulată și securitate sporită.
🔑 Funcționalități:
- Design modern cu efect glitch și progress bar animat.
- Caution tape animat pentru impact vizual.
- Terminal live cu efect typing, simulând operațiunile de securitate.
- Badge-uri de status pentru WAF, 2FA, backup, patch-uri și scan anti-bot.
- Butoane CTA pentru notificări și verificarea statusului serviciilor.
- Compatibil cu toate device-urile (responsive, mobile-friendly).
⚙️ Tehnologie:
- HTML5, CSS3, JavaScript pur.
- Font Awesome pentru icon-uri.
- Google Fonts (Inter).
📦 Utilizare:
- Perfect pentru agenții, freelanceri și companii care doresc să transmită profesionalism și siguranță chiar și atunci când site-ul este în mentenanță.
- Poate fi integrat rapid pe orice platformă web.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Site în mentenanță preventivă | RTEC DESIGN</title>
<meta name="description" content="Actualizăm și securizăm sistemele. Fără mentenanță regulată, site‑urile devin ținte ușoare pentru atacatori. Revenim în curând."/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet"/>
<style>
:root{
--bg:#070b14; --panel:#0d1424; --ink:#eaf2ff; --muted:#9fb0cf;
--acc1:#7c5cff; --acc2:#22d3ee; --ok:#2bd99f; --warn:#ffb84d; --danger:#ff6b6b;
--radius:20px; --border:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto; color:var(--ink);
background:
radial-gradient(1400px 700px at -10% -10%, #1a1740 0%, transparent 60%),
radial-gradient(1200px 600px at 110% 0%, #041a2a 0%, transparent 60%),
linear-gradient(180deg,#0a0f1c,#060a15);
overflow-x:hidden;
}
/* Caution tape */
.tape{
position:fixed; left:-10vw; right:-10vw; top:60px; height:48px; z-index:10;
background:repeating-linear-gradient(45deg, rgba(255,235,59,.95) 0 16px, rgba(0,0,0,.95) 16px 32px);
border-top:2px solid rgba(0,0,0,.7); border-bottom:2px solid rgba(0,0,0,.7);
box-shadow:0 10px 30px rgba(0,0,0,.35);
transform:rotate(-3deg);
overflow:hidden;
}
.tape::after{
content:"MENTENANȚĂ • NU INTRAȚI • SECURITATE"; letter-spacing:.2em; font-weight:900; color:#111;
position:absolute; inset:0; display:grid; place-items:center; text-shadow:0 1px 0 rgba(255,255,255,.2);
mix-blend-mode:overlay; animation:scrollText 12s linear infinite;
white-space:nowrap;
}
@keyframes scrollText{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.wrap{min-height:100%; display:grid; place-items:center; padding:96px 16px 32px}
.card{
width:min(980px, 96vw); border:1px solid var(--border); border-radius:var(--radius);
background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
box-shadow:0 20px 60px rgba(0,0,0,.35);
position:relative; overflow:hidden; isolation:isolate;
}
.card::before{
content:""; position:absolute; inset:-20% -50% auto -50%; height:70%;
background:radial-gradient(500px 220px at 60% 30%, rgba(124,92,255,.35), transparent 70%),
radial-gradient(480px 240px at 20% 20%, rgba(34,211,238,.3), transparent 70%);
filter: blur(30px);
}
header.hero{ display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; padding:36px; align-items:center; }
@media (max-width: 900px){ header.hero{ grid-template-columns:1fr; } }
.shield{
--size:220px; width:var(--size); height:var(--size); margin-inline:auto; position:relative;
display:grid; place-items:center;
}
.ring{ position:absolute; inset:0; border-radius:50%; background:
conic-gradient(from 0deg, var(--acc1), var(--acc2), var(--acc1));
-webkit-mask: radial-gradient(circle 48% at 50% 50%, transparent 49%, #000 50%);
mask: radial-gradient(circle 48% at 50% 50%, transparent 49%, #000 50%);
filter:blur(.6px); animation:spin 8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.shield-core{
width:72%; height:72%; border-radius:20px; background:linear-gradient(180deg,#0f1b34,#0a1224);
border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 10px 30px rgba(0,0,0,.4);
display:grid; place-items:center; position:relative; overflow:hidden;
}
.shield-core i{ font-size:58px; color:var(--ok); filter:drop-shadow(0 6px 14px rgba(43,217,159,.35)); animation:pulse 2.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1)} 50%{ transform:scale(1.08)} }
.title{ margin:0 0 10px 0; font-size:clamp(1.6rem, 2.5vw, 2.2rem); font-weight:900; letter-spacing:.3px }
.lead{ color:var(--muted); margin:0; line-height:1.6 }
.progress{ margin-top:20px; width:100%; height:12px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; border:1px solid var(--border); }
.bar{ height:100%; width:12%; border-radius:inherit; background:linear-gradient(90deg,var(--acc2),var(--acc1));
animation:load 14s ease-in-out infinite; box-shadow:0 0 18px rgba(124,92,255,.35);
}
@keyframes load{ 0%{width:8%} 35%{width:64%} 55%{width:72%} 80%{width:92%} 100%{width:96%} }
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.badge{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; border:1px solid var(--border);
background:rgba(255,255,255,.04); font-weight:600; color:#d5e2ff; }
.badge.ok i{ color:var(--ok) } .badge.warn i{ color:var(--warn) } .badge.danger i{ color:var(--danger) }
/* Terminal */
.terminal{ margin:10px 0 0 0; background:#0a1222; border:1px solid var(--border); border-radius:12px; padding:14px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.95rem; color:#cfe3ff; }
.term-head{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.dot{ width:10px; height:10px; border-radius:50%; background:#ff5f56; box-shadow:18px 0 0 #ffbd2e, 36px 0 0 #27c93f }
.term-body{ max-height:160px; overflow:auto; padding-right:4px }
.line{ white-space:pre; }
.blink{ animation:blink 1.2s steps(2,end) infinite }
@keyframes blink{ 50%{ opacity:.1 } }
/* Footer */
.foot{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-top:18px; color:var(--muted) }
.actions{ display:flex; gap:10px; }
.btn{ border:1px solid var(--border); background:rgba(255,255,255,.05); color:var(--ink); padding:10px 14px; border-radius:12px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:10px; }
.btn.primary{ background:linear-gradient(180deg,var(--acc1),#5b3dff); border-color:transparent }
.btn:hover{ filter:saturate(1.05); transform:translateY(-1px) }
/* Glitch title effect (subtil) */
.glitch{ position:relative; display:inline-block }
.glitch::before,.glitch::after{
content:attr(data-text); position:absolute; left:0; top:0; color:var(--acc2); opacity:.35; clip-path:inset(0 0 0 0); mix-blend-mode:screen;
animation:gl1 2.5s infinite steps(8);
}
.glitch::after{ color:#e14cff; animation:gl2 2.5s infinite steps(8) }
@keyframes gl1{ 0%{ transform:translate(0,0) } 20%{ transform:translate(-1px,-1px) } 40%{ transform:translate(1px,1px) } 60%{ transform:translate(0,1px) } 80%{ transform:translate(1px,0) } 100%{ transform:translate(0,0) } }
@keyframes gl2{ 0%{ transform:translate(0,0) } 20%{ transform:translate(1px,1px) } 40%{ transform:translate(-1px,0) } 60%{ transform:translate(0,-1px) } 80%{ transform:translate(-1px,1px) } 100%{ transform:translate(0,0) } }
/* Mobile tweaks */
@media (max-width:560px){ .shield{ --size:180px } .term-body{ max-height:140px } }
</style>
</head>
<body>
<div class="tape" aria-hidden="true"></div>
<main class="wrap" aria-labelledby="titlu">
<article class="card" role="region" aria-label="Mentenanță preventivă & securitate">
<header class="hero">
<section>
<h1 id="titlu" class="title glitch" data-text="Site în mentenanță preventivă">Site în mentenanță preventivă</h1>
<p class="lead">Actualizăm componente, aplicăm patch‑uri de securitate și efectuăm backup‑uri.
<strong>Fără mentenanță corectă</strong>, un site poate deveni o <strong>țintă ușoară pentru hackeri</strong>.
Mulțumim pentru răbdare!
</p>
<div class="progress" aria-label="Progres mentenanță"><div class="bar" aria-hidden="true"></div></div>
<div class="badges" aria-label="Stare măsuri de protecție">
<span class="badge ok"><i class="fa-solid fa-shield-halved"></i> WAF activ</span>
<span class="badge ok"><i class="fa-solid fa-user-lock"></i> 2FA</span>
<span class="badge ok"><i class="fa-solid fa-database"></i> Backup cronometrat</span>
<span class="badge warn"><i class="fa-solid fa-plug-circle-exclamation"></i> Patch pluginuri</span>
<span class="badge ok"><i class="fa-solid fa-robot"></i> Scan anti‑bot</span>
</div>
<div class="terminal" aria-live="polite">
<div class="term-head"><span class="dot"></span><span style="margin-left:56px;color:#9fb0cf">console · securitate</span></div>
<div class="term-body" id="termBody" aria-label="Jurnal de operațiuni">
<!-- linii dinamice -->
</div>
</div>
<footer class="foot">
<div>ETA estimat: <strong id="eta">în curând</strong></div>
<div class="actions">
<a href="#" class="btn"><i class="fa-solid fa-envelope"></i> Anunță‑mă când revine</a>
<a href="#" class="btn primary"><i class="fa-solid fa-rectangle-list"></i> Status servicii</a>
</div>
</footer>
</section>
<section aria-hidden="true">
<div class="shield" title="Protecție & scanare">
<div class="ring"></div>
<div class="shield-core">
<i class="fa-solid fa-lock"></i>
</div>
</div>
</section>
</header>
</article>
</main>
<script>
// Linii dinamice în terminal (typing effect)
const lines = [
'[INFO] Inițiere mentenanță programată...\n',
'[OK] Backup complet al bazei de date... ',
'[OK] Backup fișiere (incremental)... ',
'[SCAN] Audit fișiere & permisiuni... ',
'[PATCH] Actualizare nuclee CMS... ',
'[WARN] 2 pluginuri depășite — aplic patch... ',
'[OK] Patch aplicat · compatibilitate verificată. ',
'[FIREWALL] Reguli WAF reîmprospătate... ',
'[BOT] Rată bruteforce blocată (IP: ***.***.12.34)... ',
'[SCAN] Malware: 0 semnături detectate. ',
'[HARDEN] Headers securitate (HSTS,CSP,COEP)... ',
'[DONE] Reluare servicii treptat... '\n ];
const termBody = document.getElementById('termBody');
const eta = document.getElementById('eta');
function typeLine(text, i=0){
const line = document.createElement('div');
line.className = 'line';
termBody.appendChild(line);
const speed = 10 + Math.random()*30; // typing speed variabil
const cursor = document.createElement('span');
cursor.className = 'blink'; cursor.textContent = '▍';
line.appendChild(cursor);
function step(){
const chunk = text.slice(0, i);
line.firstChild && (line.firstChild.textContent = chunk);
termBody.scrollTop = termBody.scrollHeight;
if(i < text.length){ i++; requestAnimationFrame(step); }
else { cursor.remove(); }
}
requestAnimationFrame(step);
}
(async function run(){
for(const l of lines){
typeLine(l);
await new Promise(r=> setTimeout(r, 400 + Math.random()*500));
}
eta.textContent = 'foarte curând';
})();
// Previne saltul la # în butoanele demo
document.querySelectorAll('a[href="#"]').forEach(a=>{
a.addEventListener('click', e=> e.preventDefault());
});
</script>
</body>
</html>
