feat: update index.astro
This commit is contained in:
Clément SAILLANT
+211
-26
@@ -5,7 +5,8 @@ import '@/styles/global.css';
|
||||
|
||||
<BaseLayout title="L'Electron Rare — Bientôt" description="L'Electron Rare arrive. Systèmes électroniques spécifiques, formations, prototypage.">
|
||||
<main class="countdown-page">
|
||||
<img src="/assets/brand/logo-mark.png" alt="L'Electron Rare" class="logo-mark" width="200" height="200" />
|
||||
<div class="logo-sprite" id="logo-sprite" aria-label="L'Electron Rare — logo animé"></div>
|
||||
|
||||
<svg class="atom" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
|
||||
<ellipse cx="150" cy="150" rx="120" ry="45" fill="none" stroke="var(--trace-cyan-soft, #5bd1d866)" stroke-width="0.8" transform="rotate(-30 150 150)"/>
|
||||
<ellipse cx="150" cy="150" rx="120" ry="45" fill="none" stroke="var(--trace-amber-soft, #f1c27a66)" stroke-width="0.8" transform="rotate(30 150 150)"/>
|
||||
@@ -28,18 +29,30 @@ import '@/styles/global.css';
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
<h1 class="title">L'<span class="electric">é</span>lectron rare</h1>
|
||||
<div class="timer" id="timer">
|
||||
<div class="unit"><span class="num" id="days">--</span><span class="label">jours</span></div>
|
||||
<div class="sep">:</div>
|
||||
<div class="unit"><span class="num" id="hours">--</span><span class="label">heures</span></div>
|
||||
<div class="sep">:</div>
|
||||
<div class="unit"><span class="num" id="minutes">--</span><span class="label">minutes</span></div>
|
||||
<div class="sep">:</div>
|
||||
<div class="unit"><span class="num" id="seconds">--</span><span class="label">secondes</span></div>
|
||||
|
||||
<div class="title-bubble">
|
||||
<h1 class="title" data-text="L'électron rare">L'<span class="electric">é</span>lectron rare</h1>
|
||||
</div>
|
||||
|
||||
<div class="timer-bubble">
|
||||
<div class="timer" id="timer">
|
||||
<div class="unit"><span class="num" id="days">--</span><span class="label">jours</span></div>
|
||||
<div class="sep">:</div>
|
||||
<div class="unit"><span class="num" id="hours">--</span><span class="label">heures</span></div>
|
||||
<div class="sep">:</div>
|
||||
<div class="unit"><span class="num" id="minutes">--</span><span class="label">minutes</span></div>
|
||||
<div class="sep">:</div>
|
||||
<div class="unit"><span class="num" id="seconds">--</span><span class="label">secondes</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tagline-bubble" id="tagline-bubble" aria-live="polite">
|
||||
<span class="tagline-text" id="tagline"></span>
|
||||
</div>
|
||||
|
||||
<div class="footnote-bubble">
|
||||
<span>Systèmes électroniques spécifiques · Formations · Prototypage</span>
|
||||
</div>
|
||||
<p class="tagline" id="tagline" aria-live="polite"></p>
|
||||
<p class="footnote">Systèmes électroniques spécifiques · Formations · Prototypage</p>
|
||||
</main>
|
||||
</BaseLayout>
|
||||
|
||||
@@ -63,6 +76,7 @@ import '@/styles/global.css';
|
||||
"Analyse du spectre RF..."
|
||||
];
|
||||
let msgIndex = Math.floor(Math.random() * messages.length);
|
||||
|
||||
function pad(n) { return String(n).padStart(2, '0'); }
|
||||
function update() {
|
||||
const diff = Math.max(0, LAUNCH - Date.now());
|
||||
@@ -72,27 +86,198 @@ import '@/styles/global.css';
|
||||
document.getElementById('seconds').textContent = pad(Math.floor((diff % 60000) / 1000));
|
||||
}
|
||||
function rotateMessage() {
|
||||
const bubble = document.getElementById('tagline-bubble');
|
||||
const el = document.getElementById('tagline');
|
||||
el.style.opacity = '0';
|
||||
setTimeout(() => { el.textContent = messages[msgIndex]; el.style.opacity = '1'; msgIndex = (msgIndex + 1) % messages.length; }, 400);
|
||||
bubble.style.opacity = '0';
|
||||
bubble.style.transform = 'translateY(4px)';
|
||||
setTimeout(() => {
|
||||
el.textContent = messages[msgIndex];
|
||||
bubble.style.opacity = '1';
|
||||
bubble.style.transform = 'translateY(0)';
|
||||
msgIndex = (msgIndex + 1) % messages.length;
|
||||
}, 400);
|
||||
}
|
||||
|
||||
// Logo sprite animation - cycle through 4 frames
|
||||
const frames = [
|
||||
'/assets/brand/logo-frame-1.png',
|
||||
'/assets/brand/logo-frame-2.png',
|
||||
'/assets/brand/logo-frame-3.png',
|
||||
'/assets/brand/logo-frame-4.png',
|
||||
'/assets/brand/logo-frame-3.png',
|
||||
'/assets/brand/logo-frame-2.png',
|
||||
];
|
||||
let frameIdx = 0;
|
||||
const sprite = document.getElementById('logo-sprite');
|
||||
|
||||
// Preload frames
|
||||
frames.forEach(f => { const img = new Image(); img.src = f; });
|
||||
|
||||
function animateLogo() {
|
||||
sprite.style.opacity = '0.85';
|
||||
setTimeout(() => {
|
||||
sprite.style.backgroundImage = `url(${frames[frameIdx]})`;
|
||||
sprite.style.opacity = '1';
|
||||
frameIdx = (frameIdx + 1) % frames.length;
|
||||
}, 150);
|
||||
}
|
||||
|
||||
update(); rotateMessage();
|
||||
sprite.style.backgroundImage = `url(${frames[0]})`;
|
||||
setInterval(update, 1000);
|
||||
setInterval(rotateMessage, 8000);
|
||||
setInterval(animateLogo, 2000);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.countdown-page { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px 24px; background:url('/assets/hero-bg.png') center/cover no-repeat var(--bg,#0b0a09); }
|
||||
.logo-mark { width:clamp(120px,20vw,180px); height:auto; margin-bottom:16px; filter:drop-shadow(0 0 20px rgba(91,209,216,0.3)); }
|
||||
.atom { width:clamp(140px,25vw,200px); height:auto; margin-bottom:24px; opacity:0.6; }
|
||||
.title { font-family:'Fraunces',serif; font-size:clamp(28px,5vw,48px); font-weight:700; color:var(--text,#f4eee3); margin:0 0 32px; letter-spacing:-1px; }
|
||||
.electric { color:var(--electric,#5bd1d8); animation:pulse 3s ease-in-out infinite; }
|
||||
.countdown-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 48px 24px;
|
||||
background: linear-gradient(rgba(11,10,9,0.85), rgba(11,10,9,0.92)), url('/assets/hero-bg.png') center/cover no-repeat;
|
||||
background-color: var(--bg, #0b0a09);
|
||||
}
|
||||
|
||||
/* Logo sprite animation */
|
||||
.logo-sprite {
|
||||
width: clamp(140px, 22vw, 200px);
|
||||
height: clamp(140px, 22vw, 200px);
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
margin-bottom: 12px;
|
||||
transition: opacity 0.15s ease;
|
||||
filter: drop-shadow(0 0 24px rgba(91,209,216,0.3));
|
||||
animation: logo-float 6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes logo-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
|
||||
|
||||
.atom { width: clamp(120px, 20vw, 170px); height: auto; margin-bottom: 20px; opacity: 0.4; }
|
||||
|
||||
.title-bubble {
|
||||
background: rgba(244, 238, 227, 0.92);
|
||||
border: 1px solid rgba(91, 209, 216, 0.3);
|
||||
border-radius: 14px;
|
||||
padding: 16px 36px;
|
||||
margin-bottom: 28px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 40px rgba(91,209,216,0.06);
|
||||
}
|
||||
.title-bubble::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
repeating-linear-gradient(90deg, transparent 0, rgba(91,209,216,0.03) 1px, transparent 2px, transparent 4px),
|
||||
repeating-linear-gradient(0deg, transparent 0, rgba(241,194,122,0.02) 1px, transparent 2px, transparent 6px);
|
||||
animation: scanlines 8s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
.title-bubble::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: -100%; width: 60%; height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(91,209,216,0.08), transparent);
|
||||
animation: glitch-sweep 4s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
@keyframes scanlines { from{transform:translateY(0)} to{transform:translateY(6px)} }
|
||||
@keyframes glitch-sweep { 0%,100%{left:-100%} 50%{left:140%} }
|
||||
|
||||
.title {
|
||||
font-family: 'Fraunces', serif;
|
||||
font-size: clamp(28px, 5vw, 48px);
|
||||
font-weight: 700;
|
||||
color: #0b0a09;
|
||||
margin: 0;
|
||||
letter-spacing: -1px;
|
||||
position: relative;
|
||||
animation: title-glitch 6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes title-glitch {
|
||||
0%,92%,100% { transform:none; text-shadow:none; }
|
||||
93% { transform:translateX(-2px) skewX(-0.5deg); text-shadow:2px 0 var(--electric,#5bd1d8), -2px 0 var(--accent,#f1c27a); }
|
||||
94% { transform:translateX(1px) skewX(0.3deg); text-shadow:-1px 0 var(--electric,#5bd1d8), 1px 0 #d89b63; }
|
||||
95% { transform:translateX(-1px); text-shadow:1px 0 var(--accent,#f1c27a); }
|
||||
96% { transform:none; text-shadow:none; }
|
||||
}
|
||||
.electric { color: var(--electric, #5bd1d8); animation: pulse 3s ease-in-out infinite; }
|
||||
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.6;text-shadow:0 0 12px var(--electric,#5bd1d8)} }
|
||||
.timer { display:flex; align-items:center; gap:8px; margin-bottom:32px; }
|
||||
.unit { display:flex; flex-direction:column; align-items:center; }
|
||||
.num { font-family:'IBM Plex Mono','Share Tech Mono',monospace; font-size:clamp(36px,8vw,72px); font-weight:600; color:var(--text,#f4eee3); line-height:1; min-width:2ch; }
|
||||
.label { font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-dim,#b6a894); text-transform:uppercase; letter-spacing:2px; margin-top:6px; }
|
||||
.sep { font-family:'IBM Plex Mono',monospace; font-size:clamp(28px,6vw,56px); color:var(--accent,#f1c27a); opacity:.5; margin-bottom:20px; }
|
||||
.tagline { font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--accent,#f1c27a); margin:0 0 40px; min-height:1.5em; transition:opacity .4s ease; }
|
||||
.footnote { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim,#b6a894); opacity:.4; letter-spacing:.5px; }
|
||||
|
||||
/* Bubbles */
|
||||
.timer-bubble {
|
||||
background: rgba(244, 238, 227, 0.92);
|
||||
border: 1px solid rgba(91, 209, 216, 0.3);
|
||||
border-radius: 16px;
|
||||
padding: 20px 32px;
|
||||
margin-bottom: 24px;
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.15), 0 0 40px rgba(91,209,216,0.06);
|
||||
}
|
||||
.timer { display: flex; align-items: center; gap: 8px; }
|
||||
.unit { display: flex; flex-direction: column; align-items: center; }
|
||||
.num {
|
||||
font-family: 'IBM Plex Mono', 'Share Tech Mono', monospace;
|
||||
font-size: clamp(32px, 7vw, 64px);
|
||||
font-weight: 600;
|
||||
color: var(--bg, #0b0a09);
|
||||
line-height: 1;
|
||||
min-width: 2ch;
|
||||
}
|
||||
.label {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.sep {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: clamp(24px, 5vw, 48px);
|
||||
color: #b8860b;
|
||||
opacity: 0.6;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.tagline-bubble {
|
||||
background: rgba(244, 238, 227, 0.88);
|
||||
border: 1px solid rgba(241, 194, 122, 0.35);
|
||||
border-radius: 12px;
|
||||
padding: 12px 24px;
|
||||
margin-bottom: 20px;
|
||||
min-height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity 0.4s ease, transform 0.4s ease;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
}
|
||||
.tagline-text {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 14px;
|
||||
color: #8b6914;
|
||||
}
|
||||
|
||||
.footnote-bubble {
|
||||
background: rgba(244, 238, 227, 0.7);
|
||||
border: 1px solid rgba(182, 168, 148, 0.2);
|
||||
border-radius: 10px;
|
||||
padding: 10px 20px;
|
||||
}
|
||||
.footnote-bubble span {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.logo-sprite { animation: none; }
|
||||
.electric { animation: none; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user