up emoji on demo map

oedb/resources/demo/templates/property_stats.html

@@ -0,0 +1,177 @@
+{% extends "layout.html" %}
+
+{% block title %}Statistiques des propriétés - OpenEventDatabase{% endblock %}
+
+{% block css %}
+<style>
+.stats-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.stats-summary {
+    background-color: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 30px;
+    border-left: 4px solid #0078ff;
+}
+
+.stats-table {
+    width: 100%;
+    border-collapse: collapse;
+    background-color: white;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.stats-table th,
+.stats-table td {
+    padding: 12px 15px;
+    text-align: left;
+    border-bottom: 1px solid #eee;
+}
+
+.stats-table th {
+    background-color: #0078ff;
+    color: white;
+    font-weight: bold;
+}
+
+.stats-table tbody tr:hover {
+    background-color: #f8f9fa;
+}
+
+.stats-table tbody tr:nth-child(even) {
+    background-color: #fafafa;
+}
+
+.percentage {
+    color: #666;
+    font-size: 0.9em;
+}
+
+.property-name {
+    font-family: monospace;
+    background-color: #f1f3f4;
+    padding: 2px 4px;
+    border-radius: 3px;
+}
+
+.occurrence-count {
+    font-weight: bold;
+    color: #0078ff;
+}
+
+.nav-breadcrumb {
+    margin-bottom: 20px;
+    color: #666;
+}
+
+.nav-breadcrumb a {
+    color: #0078ff;
+    text-decoration: none;
+}
+
+.nav-breadcrumb a:hover {
+    text-decoration: underline;
+}
+
+.refresh-info {
+    font-size: 0.9em;
+    color: #666;
+    margin-bottom: 20px;
+    text-align: right;
+}
+</style>
+{% endblock %}
+
+{% block header %}Statistiques des propriétés des événements{% endblock %}
+
+{% block content %}
+<div class="stats-container">
+    <div class="nav-breadcrumb">
+        <a href="/">Accueil</a> › 
+        <a href="/demo">Demo</a> › 
+        Statistiques des propriétés
+    </div>
+
+    <div class="refresh-info">
+        Basé sur les {{ total_events }} derniers événements de la base de données
+    </div>
+
+    <div class="stats-summary">
+        <h2>Résumé</h2>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
+            <div>
+                <strong>Nombre total d'événements analysés:</strong><br>
+                <span style="font-size: 1.5em; color: #0078ff;">{{ total_events }}</span>
+            </div>
+            <div>
+                <strong>Propriétés uniques trouvées:</strong><br>
+                <span style="font-size: 1.5em; color: #28a745;">{{ unique_properties }}</span>
+            </div>
+            <div>
+                <strong>Propriété la plus commune:</strong><br>
+                {% if property_stats %}
+                <span class="property-name">{{ property_stats[0][0] }}</span><br>
+                <small>({{ property_stats[0][1] }} occurrences)</small>
+                {% else %}
+                <span>Aucune donnée</span>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    {% if property_stats %}
+    <table class="stats-table">
+        <thead>
+            <tr>
+                <th style="width: 50px;">Rang</th>
+                <th>Nom de la propriété</th>
+                <th style="width: 120px;">Occurrences</th>
+                <th style="width: 100px;">Pourcentage</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for property_name, count in property_stats %}
+            <tr>
+                <td>{{ loop.index }}</td>
+                <td><span class="property-name">{{ property_name }}</span></td>
+                <td class="occurrence-count">{{ count }}</td>
+                <td class="percentage">{{ "%.1f"|format((count / total_events * 100)) }}%</td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+    {% else %}
+    <div style="text-align: center; padding: 40px; color: #666;">
+        <h3>Aucune donnée disponible</h3>
+        <p>Impossible de récupérer les statistiques des propriétés pour le moment.</p>
+    </div>
+    {% endif %}
+
+    <div style="margin-top: 30px; text-align: center;">
+        <a href="/demo" style="display: inline-block; padding: 10px 20px; background-color: #0078ff; color: white; text-decoration: none; border-radius: 5px;">
+            ← Retour à la démo
+        </a>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+// Auto-refresh every 5 minutes
+setTimeout(function() {
+    window.location.reload();
+}, 5 * 60 * 1000);
+
+// Add click handler to property names for future enhancement
+document.querySelectorAll('.property-name').forEach(function(element) {
+    element.style.cursor = 'pointer';
+    element.title = 'Propriété: ' + element.textContent;
+});
+</script>
+{% endblock %}