24dbc7cd6a
API réception alertes chute (SmartEye/YOLO), analyse IA (Gemini 2.5 Flash), gestion alertes avec escalade (watchdog), notifications Firebase, dashboard web, documentation MkDocs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
328 lines
9.8 KiB
HTML
328 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LUCAS - Veiller sans surveiller</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-cream: #FAF9F6;
|
|
--text-dark: #1A2530;
|
|
--accent-terra: #D96C5B;
|
|
--bg-navy: #1A2530;
|
|
--text-light: #F0F4F8;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-cream);
|
|
color: var(--text-dark);
|
|
overflow-x: hidden;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Classes d'animation d'apparition au scroll */
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(40px);
|
|
transition: opacity 1s ease-out, transform 1s ease-out;
|
|
}
|
|
|
|
.fade-in.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* SECTION 1 : HERO (L'éblouissement) */
|
|
.hero {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
/* Gradient doux pour simuler une belle lumière matinale */
|
|
background: linear-gradient(135deg, #FAF9F6 0%, #E8E2D9 100%);
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 4.5rem;
|
|
font-weight: 800;
|
|
letter-spacing: -2px;
|
|
margin-bottom: 1.5rem;
|
|
max-width: 900px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.5rem;
|
|
font-weight: 300;
|
|
color: #555;
|
|
max-width: 700px;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.btn {
|
|
background-color: var(--accent-terra);
|
|
color: white;
|
|
padding: 1.2rem 2.5rem;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
border: none;
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
box-shadow: 0 10px 20px rgba(217, 108, 91, 0.3);
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 15px 25px rgba(217, 108, 91, 0.4);
|
|
}
|
|
|
|
/* SECTION 2 : LE DILEMME */
|
|
.dilemma {
|
|
background-color: var(--bg-navy);
|
|
color: var(--text-light);
|
|
padding: 8rem 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.dilemma h2 {
|
|
font-size: 3.5rem;
|
|
font-weight: 600;
|
|
margin-bottom: 2rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.dilemma p {
|
|
font-size: 1.3rem;
|
|
font-weight: 300;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
color: #A0B2C6;
|
|
}
|
|
|
|
.dilemma .highlight {
|
|
color: var(--accent-terra);
|
|
font-style: italic;
|
|
}
|
|
|
|
/* SECTION 3 : LA RÉVÉLATION (Features) */
|
|
.features {
|
|
padding: 8rem 2rem;
|
|
background-color: var(--bg-cream);
|
|
text-align: center;
|
|
}
|
|
|
|
.features h2 {
|
|
font-size: 3rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 3rem;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
padding: 3rem 2rem;
|
|
border-radius: 20px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
.card .icon {
|
|
font-size: 3rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.card h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.card p {
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* SECTION 4 : LE SPLIT SCREEN */
|
|
.split {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
min-height: 80vh;
|
|
}
|
|
|
|
.split-half {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
padding: 6rem 4rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.split-left {
|
|
background-color: #E8E2D9;
|
|
}
|
|
|
|
.split-right {
|
|
background-color: var(--bg-cream);
|
|
}
|
|
|
|
.split-half h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.split-half p {
|
|
font-size: 1.2rem;
|
|
line-height: 1.8;
|
|
color: #555;
|
|
}
|
|
|
|
/* SECTION 5 : FOOTER / CTA */
|
|
.footer-cta {
|
|
background-color: var(--bg-navy);
|
|
color: white;
|
|
text-align: center;
|
|
padding: 8rem 2rem;
|
|
}
|
|
|
|
.footer-cta h2 {
|
|
font-size: 3rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.footer-cta p {
|
|
font-size: 1.2rem;
|
|
color: #A0B2C6;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
/* Responsive basique */
|
|
@media (max-width: 768px) {
|
|
.hero h1 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.dilemma h2 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.split-half {
|
|
padding: 4rem 2rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<section class="hero">
|
|
<div class="fade-in">
|
|
<h1>Leur maison est leur royaume.<br>Qu'elle le reste.</h1>
|
|
<p>Veiller sans surveiller. La première Intelligence Artificielle qui protège vos parents en cas de chute,
|
|
sans jamais filmer leur quotidien.</p>
|
|
<a href="#decouvrir" class="btn">Découvrir la révolution LUCAS</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="dilemma" id="decouvrir">
|
|
<div class="fade-in">
|
|
<h2>Vous voulez les savoir en sécurité.<br>Ils veulent simplement vivre libres.</h2>
|
|
<p>La dignité n'est pas une option. <span class="highlight">C'est un droit absolu.</span><br><br>Fini le
|
|
choix impossible entre l'angoisse silencieuse de la chute et l'humiliation d'une caméra de surveillance
|
|
qui les infantilise. Il existe désormais une autre voie.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features">
|
|
<div class="fade-in">
|
|
<h2>Une présence invisible.<br>Une tranquillité absolue.</h2>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="card fade-in" style="transition-delay: 0.1s;">
|
|
<div class="icon">✨</div>
|
|
<h3>Il ressent, il ne regarde pas</h3>
|
|
<p>LUCAS analyse les postures et les mouvements sans aucune lentille photographique. Zéro image, zéro
|
|
vidéo. L'intimité est totalement sacrée.</p>
|
|
</div>
|
|
<div class="card fade-in" style="transition-delay: 0.2s;">
|
|
<div class="icon">⚡</div>
|
|
<h3>Il ne dort jamais</h3>
|
|
<p>Une chute soudaine ? Une immobilité anormale ? L'IA détecte l'urgence en une fraction de seconde et
|
|
alerte instantanément les proches.</p>
|
|
</div>
|
|
<div class="card fade-in" style="transition-delay: 0.3s;">
|
|
<div class="icon">💬</div>
|
|
<h3>Il recrée le lien</h3>
|
|
<p>Grâce à son intercom audio bidirectionnel de haute qualité, parlez directement à votre proche pour le
|
|
rassurer en attendant les secours.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="split">
|
|
<div class="split-half split-left">
|
|
<div class="fade-in">
|
|
<h2>Pour elle :<br>La vie, tout simplement.</h2>
|
|
<p>Aucune installation compliquée. Pas de bouton rouge stigmatisant à porter autour du cou. Pas de
|
|
regard inquisiteur dans le salon. LUCAS est un objet d'art discret qui se fond dans le décor. Elle
|
|
vit sa vie, libre et digne, avec la certitude qu'en cas de pépin, elle ne sera jamais seule.</p>
|
|
</div>
|
|
</div>
|
|
<div class="split-half split-right">
|
|
<div class="fade-in">
|
|
<h2>Pour vous :<br>Le souffle retrouvé.</h2>
|
|
<p>Le poids de la culpabilité s'envole. Vous n'avez plus besoin d'appeler trois fois par jour juste pour
|
|
"vérifier". Votre smartphone ne s'allume que si c'est strictement nécessaire. Vous protégez ce que
|
|
vous avez de plus cher, tout en reprenant le cours de votre propre vie.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="footer-cta">
|
|
<div class="fade-in">
|
|
<h2>La technologie au service de l'humain.</h2>
|
|
<p>Conçu en France. Chiffrement de niveau bancaire. Respect absolu de la vie privée.</p>
|
|
<a href="#" class="btn">Réserver mon système LUCAS</a>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.15 });
|
|
|
|
const hiddenElements = document.querySelectorAll('.fade-in');
|
|
hiddenElements.forEach((el) => observer.observe(el));
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |