mirror of
https://forge.chapril.org/tykayn/parking-land
synced 2025-06-20 01:44:42 +02:00
406 lines
No EOL
9.8 KiB
HTML
406 lines
No EOL
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>Analyse urbaine - Ville Test</title>
|
|
<style>
|
|
:root {
|
|
--primary-color: #3498db;
|
|
--secondary-color: #2ecc71;
|
|
--accent-color: #e74c3c;
|
|
--text-color: #333;
|
|
--light-bg: #f9f9f9;
|
|
--card-bg: #fff;
|
|
--border-color: #ddd;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
background-color: var(--light-bg);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
header {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
padding: 20px 0;
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
border-radius: 0 0 10px 10px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: 2.5em;
|
|
}
|
|
|
|
.subtitle {
|
|
font-style: italic;
|
|
margin-top: 10px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.dashboard {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--card-bg);
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
padding: 20px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.card h2 {
|
|
color: var(--primary-color);
|
|
margin-top: 0;
|
|
border-bottom: 2px solid var(--border-color);
|
|
padding-bottom: 10px;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.stat-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 15px;
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9em;
|
|
color: #666;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.4em;
|
|
font-weight: bold;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.highlight {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
.positive {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid var(--border-color);
|
|
padding: 12px;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.progress-container {
|
|
width: 100%;
|
|
background-color: #e0e0e0;
|
|
border-radius: 5px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
background-color: var(--secondary-color);
|
|
}
|
|
|
|
.ratio-bad {
|
|
background-color: var(--accent-color);
|
|
}
|
|
|
|
.ratio-medium {
|
|
background-color: #f39c12;
|
|
}
|
|
|
|
.ratio-good {
|
|
background-color: var(--secondary-color);
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
margin-top: 40px;
|
|
padding: 20px;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.stat-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<h1>Analyse urbaine de {{ city_name }}</h1>
|
|
<p class="subtitle">Données d'infrastructure et d'aménagement urbain</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="dashboard">
|
|
<!-- Carte des routes -->
|
|
<div class="card">
|
|
<h2>🛣️ Réseau routier</h2>
|
|
<div class="stat-grid">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Longueur totale</span>
|
|
<span class="stat-value">228.33 km</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Nombre de routes</span>
|
|
<span class="stat-value">3530</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Surface totale</span>
|
|
<span class="stat-value">1.59 km²</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Ronds-points</span>
|
|
<span class="stat-value">17</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Carte des pistes cyclables -->
|
|
<div class="card">
|
|
<h2>🚴♂️ Mobilité douce</h2>
|
|
<div class="stat-grid">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Longueur pistes cyclables</span>
|
|
<span class="stat-value">12.50 km</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Nombre de pistes</span>
|
|
<span class="stat-value">42</span>
|
|
</div>
|
|
</div>
|
|
<p>Ratio cyclable/routier:</p>
|
|
<div class="progress-container">
|
|
<div class="progress-bar ratio-medium" style='width: 5.47 %'></div>
|
|
</div>
|
|
<p>5.47% du réseau routier</p>
|
|
</div>
|
|
|
|
<!-- Carte des parkings -->
|
|
<div class="card">
|
|
<h2>🅿️ Stationnement</h2>
|
|
<div class="stat-grid">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Surface parkings voiture</span>
|
|
<span class="stat-value">0.35 km²</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Capacité renseignée</span>
|
|
<span class="stat-value">491 places</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Surface parkings vélo</span>
|
|
<span class="stat-value">0.04200 km²</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Ratio parking/route</span>
|
|
<span class="stat-value ">22.01%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Carte des bâtiments -->
|
|
<div class="card">
|
|
<h2>🏢 Bâtiments</h2>
|
|
<div class="stat-grid">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Nombre total</span>
|
|
<span class="stat-value">2516</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Surface totale</span>
|
|
<span class="stat-value">2.65 km²</span>
|
|
</div>
|
|
</div>
|
|
<table>
|
|
<tr>
|
|
<th>Taille</th>
|
|
<th>Nombre</th>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
< 10 m²</td>
|
|
<td>120</td>
|
|
</tr>
|
|
<tr>
|
|
<td>10-50 m²</td>
|
|
<td>450</td>
|
|
</tr>
|
|
<tr>
|
|
<td>50-100 m²</td>
|
|
<td>780</td>
|
|
</tr>
|
|
<tr>
|
|
<td>100-200 m²</td>
|
|
<td>650</td>
|
|
</tr>
|
|
<tr>
|
|
<td>200-500 m²</td>
|
|
<td>400</td>
|
|
</tr>
|
|
<tr>
|
|
<td>> 500 m²</td>
|
|
<td>116</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Carte des bornes de recharge -->
|
|
<div class="card">
|
|
<h2>⚡ Bornes de recharge</h2>
|
|
<div class="stat-grid">
|
|
<div class="stat-item">
|
|
<span class="stat-label">Nombre de stations</span>
|
|
<span class="stat-value">14</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Capacité totale</span>
|
|
<span class="stat-value">28</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Points de charge</span>
|
|
<span class="stat-value">32</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-label">Stations avec capacité</span>
|
|
<span class="stat-value">12</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>📊 Tableau récapitulatif</h2>
|
|
<table>
|
|
<tr>
|
|
<th>Mesure</th>
|
|
<th>Valeur</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Longueur de route (km) 🛣️</td>
|
|
<td>228.33</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Longueur de piste cyclable (km) 🚴♂️</td>
|
|
<td>12.50</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nombre de routes 🚗</td>
|
|
<td>3530</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Surface des routes (km²) 🌍</td>
|
|
<td>1.59</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nombre de pistes cyclables 🚲</td>
|
|
<td>42</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nombre de ronds-points ⭕</td>
|
|
<td>12</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nombre de mini ronds-points 🔵</td>
|
|
<td>5</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Surface des parkings (km²) 🅿️</td>
|
|
<td>0.35</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Surface des parkings à vélos (km²) 🚲🅿️</td>
|
|
<td>0.04200</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nombre de parkings avec capacité renseignée 🚗💼</td>
|
|
<td>491</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nombre de bâtiments 🏢</td>
|
|
<td>2516</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Aire des bâtiments (km²) 📏</td>
|
|
<td>2.65000</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nombre de stations de recharge ⚡</td>
|
|
<td>14</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Capacité totale des stations de recharge ⚡📦</td>
|
|
<td>28</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Nombre de points de charge 🔌</td>
|
|
<td>32</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>Rapport généré le 16/03/2025 12:35:11</p>
|
|
<p>Analyse des infrastructures urbaines et de mobilité</p>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |