a5a8ecdb20
Import initial de la documentation : statut, roadmap, plans V1/V2, specs verticales (creche, sport), audits securite, plan de test, analyse concurrentielle et maquettes de design. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
190 lines
21 KiB
HTML
190 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="./support.js"></script>
|
|
</head>
|
|
<body>
|
|
<x-dc>
|
|
<helmet>
|
|
<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;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
*{box-sizing:border-box}
|
|
body{margin:0}
|
|
.phone{--color-primary:#264863;--color-on-primary:#ffffff;--color-primary-light:#e3eaf0;--color-surface:#f8f8f8;--color-border:#e5e7eb;--color-text:#1a1a1a;--color-text-muted:#6b7280;--color-background:#fff}
|
|
</style>
|
|
</helmet>
|
|
|
|
<div style="background:#E9E6E0;min-height:100vh;font-family:'Inter',-apple-system,sans-serif;color:#1E2A33;padding:54px 36px 90px">
|
|
|
|
<div style="max-width:1180px;margin:0 auto">
|
|
<div style="color:#9C8F7E;font-size:13px;font-weight:700;letter-spacing:3px">MYINFOMATE · VISITAPP-WEB</div>
|
|
<div style="font-size:46px;font-weight:800;letter-spacing:-1.4px;margin-top:10px;line-height:1.02">Harmonisation — 4 sections</div>
|
|
<div style="max-width:720px;color:#5A6670;font-size:16.5px;line-height:1.6;margin-top:14px">Aperçu visuel des composants alignés sur le langage de <b>ParcoursSection</b> : fond warm, cards à relief, lecteur audio à waveform, badges-lettres, feedback vert/rouge, barre de progression segmentée et CTA généreux. La couleur primaire (<code style="background:#fff;padding:1px 6px;border-radius:5px;border:1px solid #E2DCD2">#264863</code>) reste pilotée par les variables CSS du thème.</div>
|
|
</div>
|
|
|
|
<div style="max-width:1180px;margin:46px auto 0;display:flex;flex-wrap:wrap;gap:50px 40px;justify-content:center">
|
|
|
|
<!-- ============ 1. ARTICLE — audio player ============ -->
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:16px">
|
|
<div style="display:flex;align-items:center;gap:9px"><span style="font-size:12px;font-weight:800;color:#fff;background:#1E2A33;border-radius:7px;padding:4px 10px">1</span><span style="font-weight:700;font-size:15px;color:#46555F">ArticleSection · lecteur audio flottant</span></div>
|
|
<div class="phone" style="width:340px;height:710px;border-radius:42px;background:#fff;box-shadow:0 30px 60px -30px rgba(20,20,30,.5),inset 0 0 0 9px #1c1c22,inset 0 0 0 11px #33333b;overflow:hidden;position:relative">
|
|
<div style="position:absolute;inset:11px;border-radius:32px;overflow:hidden;background:var(--color-background)">
|
|
<div style="height:50px;background:var(--color-primary);display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
|
|
<span style="font-weight:700;font-size:16px">La Cité Médiévale</span>
|
|
</div>
|
|
<div style="height:170px;background:linear-gradient(150deg,#5e7d8c,#264863)"></div>
|
|
<div style="padding:16px 16px 0;color:var(--color-text);font-size:13.5px;line-height:1.6">
|
|
<p style="margin:0 0 10px">Édifiée sur un éperon rocheux, la Cité domine la vallée de l'Aude depuis plus de deux mille ans. Ses tours et ses courtines forment l'un des ensembles fortifiés les mieux conservés d'Europe.</p>
|
|
<p style="margin:0">Au fil des ruelles, chaque pierre raconte un siège, une légende, un savoir-faire de bâtisseur.</p>
|
|
</div>
|
|
<!-- floating audio player -->
|
|
<div style="position:absolute;left:0;right:0;bottom:0;padding:14px 16px 16px;background:linear-gradient(to top,#F6F3EE 78%,transparent)">
|
|
<div style="border-radius:16px;overflow:hidden;background:#fff;border:1px solid #E8E3DA;box-shadow:0 6px 16px -12px rgba(0,0,0,.3)">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:12px 14px">
|
|
<div style="width:44px;height:44px;border-radius:50%;background:#1E2A33;display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="18" height="18" viewBox="0 0 24 24" fill="#fff"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg></div>
|
|
<div style="flex:1;min-width:0">
|
|
<span style="color:#6B7B86;font-size:11px;font-weight:700;letter-spacing:.5px">GUIDE AUDIO</span>
|
|
<div style="margin-top:5px;display:flex;align-items:flex-end;gap:2px;height:18px">
|
|
<sc-for list="{{ wave }}" as="b" hint-placeholder-count="25"><div style="width:3px;height:{{ b.h }};border-radius:1.5px;background:{{ b.c }}"></div></sc-for>
|
|
</div>
|
|
</div>
|
|
<span style="color:#6B7B86;font-size:12.5px;font-weight:600;flex-shrink:0">3:24</span>
|
|
</div>
|
|
<div style="height:3px;background:#F0EBE3"><div style="height:100%;width:34%;background:var(--color-primary)"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ 2. AGENDA — month pill + event detail ============ -->
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:16px">
|
|
<div style="display:flex;align-items:center;gap:9px"><span style="font-size:12px;font-weight:800;color:#fff;background:#1E2A33;border-radius:7px;padding:4px 10px">2</span><span style="font-weight:700;font-size:15px;color:#46555F">AgendaSection · sélecteur + détail</span></div>
|
|
<div class="phone" style="width:340px;height:710px;border-radius:42px;background:#fff;box-shadow:0 30px 60px -30px rgba(20,20,30,.5),inset 0 0 0 9px #1c1c22,inset 0 0 0 11px #33333b;overflow:hidden;position:relative">
|
|
<div style="position:absolute;inset:11px;border-radius:32px;overflow:hidden;background:#F6F3EE">
|
|
<div style="height:50px;background:var(--color-primary);display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
|
|
<span style="font-weight:700;font-size:16px">Événement</span>
|
|
</div>
|
|
<!-- month selector pill -->
|
|
<div style="display:flex;justify-content:center;padding:12px 16px 4px">
|
|
<div style="display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #EFEAE2;border-radius:14px;padding:4px;box-shadow:0 6px 16px -12px rgba(0,0,0,.3)">
|
|
<div style="width:36px;height:36px;border-radius:10px;background:color-mix(in srgb, var(--color-primary) 10%, white);display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" style="fill:var(--color-primary)"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></div>
|
|
<span style="color:#1E2A33;font-weight:700;font-size:14px;min-width:150px;text-align:center">Juillet 2026</span>
|
|
<div style="width:36px;height:36px;border-radius:10px;background:color-mix(in srgb, var(--color-primary) 10%, white);display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" style="fill:var(--color-primary)"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
<!-- event detail cards -->
|
|
<div style="padding:12px 16px 0;display:flex;flex-direction:column;gap:13px">
|
|
<div style="height:96px;border-radius:16px;background:linear-gradient(150deg,#7a98a6,#264863);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:12px"><span style="color:#fff;font-weight:800;font-size:18px;text-shadow:0 2px 8px rgba(0,0,0,.6)">Fête médiévale</span></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid #EFEAE2;border-radius:16px;box-shadow:0 6px 16px -12px rgba(0,0,0,.3)">
|
|
<div style="width:40px;height:40px;border-radius:10px;flex-shrink:0;background:color-mix(in srgb, var(--color-primary) 12%, white);display:flex;align-items:center;justify-content:center"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke-width="2" style="stroke:var(--color-primary)" stroke-linecap="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg></div>
|
|
<div><div style="font-size:13.5px;font-weight:700;color:#1E2A33">Samedi 12 juillet 2026</div><div style="font-size:12px;color:#6B7B86;margin-top:2px">→ Dimanche 13 juillet</div></div>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid #EFEAE2;border-radius:16px;box-shadow:0 6px 16px -12px rgba(0,0,0,.3)">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" style="fill:var(--color-primary);flex-shrink:0"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
|
|
<span style="font-size:13px;color:#1E2A33;flex:1">1 Place du Château, 11000 Carcassonne</span>
|
|
</div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid #EFEAE2;border-radius:16px;box-shadow:0 6px 16px -12px rgba(0,0,0,.3);color:var(--color-primary)">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor;flex-shrink:0"><path d="M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.05-.24c1.12.37 2.33.57 3.57.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1.05l-2.2 2.17z"/></svg>
|
|
<span style="font-size:13px">04 68 11 70 70</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ 3. QUIZ — question with badges ============ -->
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:16px">
|
|
<div style="display:flex;align-items:center;gap:9px"><span style="font-size:12px;font-weight:800;color:#fff;background:#1E2A33;border-radius:7px;padding:4px 10px">3</span><span style="font-weight:700;font-size:15px;color:#46555F">QuizSection · question (review)</span></div>
|
|
<div class="phone" style="width:340px;height:710px;border-radius:42px;background:#fff;box-shadow:0 30px 60px -30px rgba(20,20,30,.5),inset 0 0 0 9px #1c1c22,inset 0 0 0 11px #33333b;overflow:hidden;position:relative">
|
|
<div style="position:absolute;inset:11px;border-radius:32px;overflow:hidden;background:#F6F3EE">
|
|
<div style="height:50px;background:var(--color-primary);display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff"><svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg><span style="font-weight:700;font-size:16px">Quiz du patrimoine</span></div>
|
|
<div style="padding:16px 16px 0;display:flex;flex-direction:column;gap:12px">
|
|
<!-- segmented progress + pill -->
|
|
<div style="display:flex;align-items:center;gap:12px">
|
|
<div style="flex:1;display:flex;gap:4px;align-items:center">
|
|
<div style="flex:1;height:6px;border-radius:3px;background:var(--color-primary)"></div>
|
|
<div style="flex:1;height:6px;border-radius:3px;background:var(--color-primary)"></div>
|
|
<div style="flex:1;height:6px;border-radius:3px;background:var(--color-primary)"></div>
|
|
<div style="flex:1;height:6px;border-radius:3px;background:#E2DCD2"></div>
|
|
<div style="flex:1;height:6px;border-radius:3px;background:#E2DCD2"></div>
|
|
</div>
|
|
<span style="padding:6px 12px;border-radius:11px;font-size:13px;font-weight:700;background:color-mix(in srgb, var(--color-primary) 12%, white);color:var(--color-primary)">3 / 5</span>
|
|
</div>
|
|
<div style="background:#fff;border-radius:16px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.12);text-align:center;font-size:14px;font-weight:600;color:#1a1a1a">En quel matériau sont les œuvres qui illuminent la cathédrale ?</div>
|
|
<!-- answers -->
|
|
<div style="display:flex;flex-direction:column;gap:8px">
|
|
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;background:#fff;border:1.5px solid #E2DCD2;box-shadow:0 6px 16px -12px rgba(0,0,0,.3)"><span style="width:30px;height:30px;border-radius:9px;background:#E8E3DA;color:#54636E;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px">A</span><span style="font-size:14px;font-weight:500;color:#1E2A33">La fresque</span></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;background:#2E9E6B;border:1.5px solid #2E9E6B;color:#fff"><span style="width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px">B</span><span style="font-size:14px;font-weight:500">Le vitrail</span></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;background:#D14343;border:1.5px solid #D14343;color:#fff"><span style="width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px">C</span><span style="font-size:14px;font-weight:500">La mosaïque</span></div>
|
|
<div style="display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;background:#fff;border:1.5px solid #E2DCD2;box-shadow:0 6px 16px -12px rgba(0,0,0,.3)"><span style="width:30px;height:30px;border-radius:9px;background:#E8E3DA;color:#54636E;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px">D</span><span style="font-size:14px;font-weight:500;color:#1E2A33">La tapisserie</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ 4. QUIZ result + 5. MENU ============ -->
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:16px">
|
|
<div style="display:flex;align-items:center;gap:9px"><span style="font-size:12px;font-weight:800;color:#fff;background:#1E2A33;border-radius:7px;padding:4px 10px">4</span><span style="font-weight:700;font-size:15px;color:#46555F">QuizSection · résultat (CTA)</span></div>
|
|
<div class="phone" style="width:340px;height:710px;border-radius:42px;background:#fff;box-shadow:0 30px 60px -30px rgba(20,20,30,.5),inset 0 0 0 9px #1c1c22,inset 0 0 0 11px #33333b;overflow:hidden;position:relative">
|
|
<div style="position:absolute;inset:11px;border-radius:32px;overflow:hidden;background:#F6F3EE">
|
|
<div style="height:50px;background:var(--color-primary);display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff"><svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg><span style="font-weight:700;font-size:16px">Quiz du patrimoine</span></div>
|
|
<div style="padding:38px 24px 0;display:flex;flex-direction:column;align-items:center;gap:24px">
|
|
<div style="width:140px;height:140px;border-radius:50%;background:var(--color-primary);box-shadow:0 4px 20px rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff"><span style="font-size:38px;font-weight:800">4/5</span><span style="font-size:13px;opacity:.85;margin-top:2px">80%</span></div>
|
|
<div style="width:100%;background:#fff;border:1px solid #EFEAE2;border-radius:16px;box-shadow:0 6px 16px -12px rgba(0,0,0,.3);padding:16px 20px;text-align:center;font-size:13.5px;color:#1E2A33">Excellent ! Vous connaissez la Cité comme un vrai guide.</div>
|
|
<div style="width:100%;display:flex;flex-direction:column;gap:12px">
|
|
<div style="width:100%;background:var(--color-primary);color:#fff;padding:16px;border-radius:18px;font-size:16px;font-weight:700;text-align:center">Recommencer</div>
|
|
<div style="width:100%;background:#fff;color:#46555F;border:1.5px solid #E2DCD2;padding:16px;border-radius:18px;font-size:16px;font-weight:700;text-align:center">Voir les réponses</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex;flex-direction:column;align-items:center;gap:16px">
|
|
<div style="display:flex;align-items:center;gap:9px"><span style="font-size:12px;font-weight:800;color:#fff;background:#1E2A33;border-radius:7px;padding:4px 10px">5</span><span style="font-weight:700;font-size:15px;color:#46555F">MenuSection · grille + recherche</span></div>
|
|
<div class="phone" style="width:340px;height:710px;border-radius:42px;background:#fff;box-shadow:0 30px 60px -30px rgba(20,20,30,.5),inset 0 0 0 9px #1c1c22,inset 0 0 0 11px #33333b;overflow:hidden;position:relative">
|
|
<div style="position:absolute;inset:11px;border-radius:32px;overflow:hidden;background:#F6F3EE">
|
|
<div style="height:50px;background:var(--color-primary);display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff"><svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg><span style="font-weight:700;font-size:16px">Découvrir</span></div>
|
|
<div style="padding:12px 16px 8px"><div style="display:flex;align-items:center;gap:8px;padding:10px 12px;background:#F6F3EE;border:1px solid #E2DCD2;border-radius:14px"><svg width="18" height="18" viewBox="0 0 24 24" style="fill:#6B7B86"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg><span style="font-size:13.5px;color:#9AA0A4">Rechercher...</span></div></div>
|
|
<div style="padding:4px 16px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px">
|
|
<div style="border-radius:20px;overflow:hidden;background:#fff;border:1px solid #EFEAE2;box-shadow:0 6px 16px -12px rgba(0,0,0,.3);min-height:128px">
|
|
<div style="height:88px;background:linear-gradient(150deg,#7a98a6,#264863);position:relative"><div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 60%)"></div><span style="position:absolute;left:10px;bottom:7px;color:#fff;font-size:13px;font-weight:700">Monuments</span></div>
|
|
</div>
|
|
<div style="border-radius:20px;overflow:hidden;background:#fff;border:1px solid #EFEAE2;box-shadow:0 6px 16px -12px rgba(0,0,0,.3);min-height:128px">
|
|
<div style="height:88px;background:linear-gradient(150deg,#6a8a60,#3B6B4A);position:relative"><div style="position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent 60%)"></div><span style="position:absolute;left:10px;bottom:7px;color:#fff;font-size:13px;font-weight:700">Nature</span></div>
|
|
</div>
|
|
<div style="border-radius:20px;background:#fff;border:1px solid #EFEAE2;box-shadow:0 6px 16px -12px rgba(0,0,0,.3);min-height:80px;padding:14px;position:relative"><div style="font-size:13.5px;font-weight:700;color:#1E2A33">Agenda culturel</div><svg style="position:absolute;bottom:8px;right:8px;fill:#6B7B86" width="15" height="15" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></div>
|
|
<div style="border-radius:20px;background:#fff;border:1px solid #EFEAE2;box-shadow:0 6px 16px -12px rgba(0,0,0,.3);min-height:80px;padding:14px;position:relative"><div style="font-size:13.5px;font-weight:700;color:#1E2A33">Boutique</div><svg style="position:absolute;bottom:8px;right:8px;fill:#6B7B86" width="15" height="15" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="max-width:1180px;margin:50px auto 0;border-top:1px solid #D6CFC4;padding-top:22px;color:#9C8F7E;font-size:14px;line-height:1.6">
|
|
<b style="color:#5A6670">Livrable :</b> les 4 fichiers <code style="background:#fff;padding:1px 6px;border-radius:5px;border:1px solid #E2DCD2">ArticleSection.tsx</code>, <code style="background:#fff;padding:1px 6px;border-radius:5px;border:1px solid #E2DCD2">AgendaSection.tsx</code>, <code style="background:#fff;padding:1px 6px;border-radius:5px;border:1px solid #E2DCD2">QuizSection.tsx</code>, <code style="background:#fff;padding:1px 6px;border-radius:5px;border:1px solid #E2DCD2">MenuSection.tsx</code> modifiés en place. Aucune logique, prop ou appel API touché.
|
|
</div>
|
|
|
|
</div>
|
|
</x-dc>
|
|
<script type="text/x-dc" data-dc-script>
|
|
class Component extends DCLogic {
|
|
renderVals(){
|
|
const heights=[4,8,13,10,16,11,7,14,9,5,12,8,10,15,7,11,13,6,14,9,5,12,10,7,13];
|
|
const wave=heights.map((h,i)=>({ h:h+'px', c: (i/heights.length)<=0.34 ? 'var(--color-primary)' : 'rgba(100,110,120,0.2)' }));
|
|
return { wave };
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|