<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chronos Live Me</title>
<style>
/* RESET */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* VARIABLES — DARK WELLNESS DESIGN */
:root{
--bg:#020617;
--bg-soft:#0f172a;
--primary:#6366f1;
--accent:#22c55e;
--text:#f8fafc;
--soft:#94a3b8;
}
/* BODY */
body{
background:radial-gradient(circle at top,#1e293b,#020617);
color:var(--text);
min-height:100vh;
display:flex;
flex-direction:column;
align-items:center;
padding:40px;
}
/* CONTAINER */
.container{
max-width:720px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(18px);
padding:45px;
border-radius:20px;
box-shadow:0 25px 70px rgba(0,0,0,0.6);
border:1px solid rgba(255,255,255,0.08);
text-align:center;
}
/* TITLES */
h1{
font-size:34px;
margin-bottom:10px;
}
/* ✅ MODIFICATION ICI */
.subtitle{
opacity:0.9;
color:var(--soft);
margin-bottom:30px;
}
/* BUTTON */
button{
background:linear-gradient(135deg,#6366f1,#22c55e);
color:white;
border:none;
padding:16px 30px;
border-radius:999px;
font-size:16px;
cursor:pointer;
transition:0.3s;
}
button:hover{
transform:translateY(-2px);
box-shadow:0 12px 35px rgba(34,197,94,0.4);
}
/* SCORE CIRCLE */
.score-box{
margin-top:35px;
display:flex;
flex-direction:column;
align-items:center;
}
.circle{
width:160px;
height:160px;
border-radius:50%;
background:conic-gradient(#22c55e 75%, rgba(255,255,255,0.08) 0);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 40px rgba(34,197,94,0.4);
}
.circle span{
font-size:32px;
font-weight:bold;
}
/* SCIENCE SECTION */
.science{
margin-top:60px;
padding:30px;
max-width:720px;
border-radius:18px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(10px);
text-align:left;
}
.science h2{
margin-bottom:15px;
}
/* DISCLAIMER */
.disclaimer{
font-size:12px;
margin-top:40px;
opacity:0.6;
}
</style>
</head>
<body>
<div class="container">
<h1>Chronos Live Me</h1>
<p class="subtitle">
Comprendre votre santé aujourd’hui pour améliorer votre futur.
</p>
<button onclick="startTest()">Commencer l'évaluation</button>
<div class="score-box" id="scoreBox" style="display:none;">
<div class="circle" id="circle">
<span id="scoreValue">75</span>
</div>
<p style="margin-top:15px;opacity:0.8;">Score santé estimé</p>
</div>
</div>
<!-- SECTION SCIENTIFIQUE -->
<section class="science">
<h2>Fondements scientifiques</h2>
<p>
Cette évaluation repose sur des données issues de recommandations internationales
et de la recherche en santé publique.
</p>
<ul>
<li>OMS — prévention des maladies chroniques</li>
<li>Santé Publique France — comportements de santé</li>
<li>INSERM — recherche biomédicale</li>
<li>Études épidémiologiques populationnelles</li>
</ul>
</section>
<div class="disclaimer">
Cette application ne constitue pas un avis médical.
</div>
<script>
function startTest(){
const score = Math.floor(Math.random()*40)+60;
document.getElementById("scoreValue").innerText = score;
document.getElementById("circle").style.background =
`conic-gradient(#22c55e ${score}%, rgba(255,255,255,0.08) 0)`;
document.getElementById("scoreBox").style.display="flex";
}
</script>
</body>
</html>