167 lines
9.0 KiB
PHP
167 lines
9.0 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- SEO & Meta Tags -->
|
|
<title>HuisWiki - Complete adresinformatie Nederland</title>
|
|
<meta name="description" content="Vind complete adresinformatie in Nederland. Zoek op postcode en huisnummer voor details over gebouwen, waarde, en omgeving. Gebouwd met Flatlogic." />
|
|
<meta name="keywords" content="adresinformatie, postcode zoeken, huisnummer, woningwaarde, kadaster, WOZ, energielabel, vastgoed data, Nederland, Flatlogic Generator" />
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="HuisWiki - Complete adresinformatie Nederland">
|
|
<meta property="og:description" content="Vind complete adresinformatie in Nederland. Zoek op postcode en huisnummer voor details over gebouwen, waarde, en omgeving. Gebouwd met Flatlogic.">
|
|
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
|
|
|
<!-- Twitter -->
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:title" content="HuisWiki - Complete adresinformatie Nederland">
|
|
<meta name="twitter:description" content="Vind complete adresinformatie in Nederland. Zoek op postcode en huisnummer voor details over gebouwen, waarde, en omgeving. Gebouwd met Flatlogic.">
|
|
<meta name="twitter:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
|
|
|
<!-- Fonts & Styles -->
|
|
<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=Work+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
|
|
<!-- Chart.js for graphs -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<div>
|
|
<h1 class="logo mono">HuisWiki</h1>
|
|
<p class="tagline">Complete adresinformatie van Nederland</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container">
|
|
<section class="hero">
|
|
<h2 class="hero-title">Vind alles over elk adres</h2>
|
|
<p class="hero-subtitle">Voer een postcode en huisnummer in en krijg direct toegang tot uitgebreide informatie over elk adres in Nederland.</p>
|
|
|
|
<div class="search-container">
|
|
<form id="search-form" class="search-wrapper">
|
|
<input type="text" id="search-input" class="search-input" placeholder="Bijv. 1012JS 1A" required>
|
|
<button type="submit" id="search-btn" class="search-btn">Zoek</button>
|
|
</form>
|
|
<div class="examples">
|
|
Voorbeeld:
|
|
<a href="#" class="example-link mono">Coolsingel 40</a>
|
|
<a href="#" class="example-link mono">Dam 1</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="results-container" class="results-container">
|
|
<div class="results-header">
|
|
<h3 id="address-title" class="address-title mono"></h3>
|
|
<p id="address-subtitle" class="address-subtitle"></p>
|
|
</div>
|
|
|
|
<div class="info-grid">
|
|
<!-- Card: Basisgegevens -->
|
|
<div class="info-card">
|
|
<div class="card-header">
|
|
<span class="card-icon">📍</span>
|
|
<h4 class="card-title">Basisgegevens</h4>
|
|
</div>
|
|
<div class="info-row"><span class="info-label">Postcode</span><span id="info-postcode" class="info-value mono"></span></div>
|
|
<div class="info-row"><span class="info-label">Plaats</span><span id="info-plaats" class="info-value"></span></div>
|
|
<div class="info-row"><span class="info-label">Gemeente</span><span id="info-gemeente" class="info-value"></span></div>
|
|
<div class="info-row"><span class="info-label">Provincie</span><span id="info-provincie" class="info-value"></span></div>
|
|
<div class="info-row"><span class="info-label">Buurt</span><span id="info-buurt" class="info-value"></span></div>
|
|
<div class="info-row"><span class="info-label">Wijk</span><span id="info-wijk" class="info-value"></span></div>
|
|
</div>
|
|
|
|
<!-- Card: Kadastrale info -->
|
|
<div class="info-card">
|
|
<div class="card-header">
|
|
<span class="card-icon">🏠</span>
|
|
<h4 class="card-title">Kadastrale Informatie</h4>
|
|
</div>
|
|
<div class="info-row"><span class="info-label">Perceel</span><span id="info-perceelnummer" class="info-value mono"></span></div>
|
|
<div class="info-row"><span class="info-label">Eigendom</span><span id="info-eigendomssituatie" class="info-value"></span></div>
|
|
<div class="info-row"><span class="info-label">Type</span><span id="info-type" class="info-value"></span></div>
|
|
<div class="info-row"><span class="info-label">Bouwjaar</span><span id="info-bouwjaar" class="info-value mono"></span></div>
|
|
<div class="info-row"><span class="info-label">Oppervlakte</span><span id="info-oppervlakte" class="info-value mono"></span></div>
|
|
</div>
|
|
|
|
<!-- Card: WOZ Waarde -->
|
|
<div class="info-card card-large">
|
|
<div class="card-header">
|
|
<span class="card-icon">📈</span>
|
|
<h4 class="card-title">WOZ-Waarde</h4>
|
|
</div>
|
|
<div class="woz-main">
|
|
<p class="woz-label">Huidige Waarde</p>
|
|
<p id="info-woz-waarde" class="woz-value"></p>
|
|
</div>
|
|
<div class="chart-container">
|
|
<canvas id="woz-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card: Energielabel -->
|
|
<div class="info-card">
|
|
<div class="card-header">
|
|
<span class="card-icon">⚡️</span>
|
|
<h4 class="card-title">Energielabel</h4>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Label</span>
|
|
<span id="info-energielabel" class="info-value mono"></span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">Gechatte Kosten p/m</span>
|
|
<span id="info-energiekosten" class="info-value mono"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card: Buurtstatistieken -->
|
|
<div class="info-card">
|
|
<div class="card-header">
|
|
<span class="card-icon">📊</span>
|
|
<h4 class="card-title">Buurtstatistieken</h4>
|
|
</div>
|
|
<div class="info-row"><span class="info-label">Gem. WOZ</span><span id="info-gem-woz" class="info-value mono"></span></div>
|
|
<div class="info-row"><span class="info-label">Inwoners</span><span id="info-inwoners" class="info-value mono"></span></div>
|
|
<div class="info-row"><span class="info-label">Gem. Leeftijd</span><span id="info-gem-leeftijd" class="info-value mono"></span></div>
|
|
<div class="info-row"><span class="info-label">Groenscore</span><span id="info-groen-score" class="info-value mono"></span></div>
|
|
<div class="info-row"><span class="info-label">Veiligheidsscore</span><span id="info-veiligheid-score" class="info-value mono"></span></div>
|
|
</div>
|
|
|
|
<!-- Card: Verkoophistorie -->
|
|
<div class="info-card card-large">
|
|
<div class="card-header">
|
|
<span class="card-icon">📜</span>
|
|
<h4 class="card-title">Verkoophistorie</h4>
|
|
</div>
|
|
<table class="history-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Datum</th>
|
|
<th>Type</th>
|
|
<th>Prijs</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="verkoophistorie-body">
|
|
<!-- Rows will be injected by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
|
|
</body>
|
|
</html>
|