Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Immo Predict</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <canvas id="bg-canvas"></canvas> | |
| <header> | |
| <div class="logo">IMMO<span>PREDICT</span></div> | |
| <div class="header-right"> | |
| <span class="badge-live">● LIVE</span> | |
| <span class="header-sub">3,7M transactions DVF</span> | |
| </div> | |
| </header> | |
| <main> | |
| <section class="hero"> | |
| <div class="hero-tag">ESTIMATION PAR INTELLIGENCE ARTIFICIELLE</div> | |
| <h1> | |
| <span class="line">Découvrez la</span> | |
| <span class="line accent">valeur réelle</span> | |
| <span class="line">de votre bien.</span> | |
| </h1> | |
| <div class="hero-stats"> | |
| <div class="stat"> | |
| <span class="stat-n" data-target="3700000">0</span> | |
| <span class="stat-l">Transactions</span> | |
| </div> | |
| <div class="stat-div"></div> | |
| <div class="stat"> | |
| <span class="stat-n" data-target="87">0</span> | |
| <span class="stat-l">% Précision max</span> | |
| </div> | |
| <div class="stat-div"></div> | |
| <div class="stat"> | |
| <span class="stat-n" data-target="8">0</span> | |
| <span class="stat-l">Segments IA</span> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="form-card"> | |
| <div class="type-selector"> | |
| <button class="type-btn active" data-value="Appartement" onclick="selectType(this)"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> | |
| <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="1.5"/> | |
| <path d="M3 9h18M9 9v12" stroke="currentColor" stroke-width="1.5"/> | |
| </svg> | |
| Appartement | |
| </button> | |
| <button class="type-btn" data-value="Maison" onclick="selectType(this)"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none"> | |
| <path d="M3 12L12 3l9 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> | |
| <path d="M5 10v9a1 1 0 001 1h4v-4h4v4h4a1 1 0 001-1v-9" stroke="currentColor" stroke-width="1.5"/> | |
| </svg> | |
| Maison | |
| </button> | |
| </div> | |
| <div class="form-grid"> | |
| <div class="field"> | |
| <label>Surface habitable</label> | |
| <div class="input-wrap"> | |
| <input type="number" id="surface" value="70" min="9" max="500"> | |
| <span class="unit">m²</span> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <label>Nombre de pièces</label> | |
| <div class="stepper"> | |
| <button class="step-btn" onclick="step('pieces',-1)">−</button> | |
| <span id="pieces-val">3</span> | |
| <input type="hidden" id="pieces" value="3"> | |
| <button class="step-btn" onclick="step('pieces',1)">+</button> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <label>Département</label> | |
| <div class="select-wrap"> | |
| <select id="departement" onchange="loadCommunes()"></select> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <label>Commune</label> | |
| <div class="select-wrap"> | |
| <select id="commune"></select> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <label>Surface terrain</label> | |
| <div class="input-wrap"> | |
| <input type="number" id="terrain" value="0" min="0"> | |
| <span class="unit">m²</span> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <label>Lots copropriété</label> | |
| <div class="stepper"> | |
| <button class="step-btn" onclick="step('lots',-1)">−</button> | |
| <span id="lots-val">1</span> | |
| <input type="hidden" id="lots" value="1"> | |
| <button class="step-btn" onclick="step('lots',1)">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="cta" onclick="predict()" id="cta-btn"> | |
| <span id="cta-label">Estimer maintenant</span> | |
| <svg id="cta-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"> | |
| <path d="M4 10h12M10 4l6 6-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> | |
| </svg> | |
| <div class="cta-loader" id="cta-loader"></div> | |
| </button> | |
| </section> | |
| <section class="result" id="result"> | |
| <div class="result-top"> | |
| <div class="result-label">PRIX ESTIMÉ</div> | |
| <div class="result-price" id="result-price">—</div> | |
| <div class="result-sub" id="result-sub">—</div> | |
| </div> | |
| <div class="result-grid"> | |
| <div class="res-card"> | |
| <div class="res-card-label">Fourchette basse</div> | |
| <div class="res-card-val" id="r-bas">—</div> | |
| </div> | |
| <div class="res-card res-card-mid"> | |
| <div class="res-card-label">Prix au m²</div> | |
| <div class="res-card-val" id="r-m2">—</div> | |
| </div> | |
| <div class="res-card"> | |
| <div class="res-card-label">Fourchette haute</div> | |
| <div class="res-card-val" id="r-haut">—</div> | |
| </div> | |
| </div> | |
| <div class="precision-block"> | |
| <div class="precision-top"> | |
| <span>Précision du modèle</span> | |
| <span id="r-precision" class="precision-pct">—</span> | |
| </div> | |
| <div class="bar-track"> | |
| <div class="bar-fill" id="bar-fill"></div> | |
| </div> | |
| <div class="segment-row"> | |
| <span class="segment-badge" id="r-segment">—</span> | |
| <span class="disclaimer">Données DVF 2022–2025 · Hors luxe > 2M€</span> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |