up liens, explication de score de complétion

This commit is contained in:
Tykayn 2025-06-17 13:23:47 +02:00 committed by tykayn
parent 81c613e93c
commit 21d4d5b850
9 changed files with 425 additions and 292 deletions

View file

@ -6,7 +6,55 @@
{{ parent() }}
<style>
.city-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.city-item {
padding: 1rem;
border: 1px solid #ddd;
border-radius: 4px;
text-align: center;
}
.city-item a {
text-decoration: none;
color: inherit;
}
.suggestion-list {
position: absolute;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
max-height: 200px;
overflow-y: auto;
width: 100%;
z-index: 1000;
display: none;
}
.suggestion-item {
padding: 8px 12px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
.suggestion-item:hover {
background-color: #f5f5f5;
}
.suggestion-name {
font-weight: bold;
}
.suggestion-details {
font-size: 0.9em;
color: #666;
}
.suggestion-type {
margin-right: 8px;
}
.search-container {
position: relative;
margin-bottom: 1rem;
}
</style>
{% endblock %}
@ -14,40 +62,61 @@
<div class="container mt-4">
<div class="row">
<div class="col-12">
<h1>
<i class="bi bi-shop"></i> Mon Commerce OSM
</h1>
<p class="mt-4 p-4">
Bonjour, ce site permet de modifier les informations de votre commerce sur OpenStreetMap afin de gagner en visibilité sur des milliers de sites web à la fois en une minute, c'est gratuit et sans engagement.
<br>Nous sommes bénévoles dans une association à but non lucratif.
<br>Nous vous enverrons un lien unique pour cela par email, et si vous en avez besoin, nous pouvons vous aider.
</p>
<div class="row">
<div class="col-12">
<label class="label" for="researchShop">
<i class="bi bi-search bi-2x"></i> Rechercher un commerce, écrivez son nom et la ville
</label>
<input class="form-control" type="text" id="researchShop" placeholder="Mon commerce, Paris">
</div>
</div>
<div id="resultsList"></div>
<div id="proposeLink" class="d-none"></div>
<div id="proposeMail" class="d-none">
<input type="email" id="emailInput" class="form-control" placeholder="mon_email_de_commerce@exemple.com">
<button type="submit" class="btn btn-primary p-4 d-block"> <i class="bi bi-envelope"></i> Envoyer</button>
</div>
<div id="emailForm"></div>
<h1>
<i class="bi bi-shop"></i> Mon Commerce OSM
</h1>
<p class="mt-4 p-4">
Bonjour, ce site permet de modifier les informations de votre commerce sur OpenStreetMap afin de gagner en visibilité sur des milliers de sites web à la fois en une minute, c'est gratuit et sans engagement.
<br>Nous sommes bénévoles dans une association à but non lucratif.
<br>Nous vous enverrons un lien unique pour cela par email, et si vous en avez besoin, nous pouvons vous aider.
</p>
<p>
<div class="row">
<div class="col-12">
<label class="label" for="researchShop"><i class="bi bi-search bi-2x"></i> Rechercher un commerce, écrivez son nom et la ville
</label>
<input class="form-control" type="text" id="researchShop" placeholder="Mon commerce, Paris">
</div>
</div>
<div id="resultsList"></div>
<div id="proposeLink" class="d-none"></div>
<div id="proposeMail" class="d-none">
<input type="email" id="emailInput" class="form-control" placeholder="mon_email_de_commerce@exemple.com">
<button type="submit" class="btn btn-primary p-4 d-block"> <i class="bi bi-envelope"></i> Envoyer</button>
</div>
<div id="emailForm"></div>
</div>
</div>
<div class="row city-list ">
<div class="mt-5">
<h2><i class="bi bi-geo-alt"></i> Villes disponibles</h2>
<p>Visualisez un tableau de bord de la complétion des commerces et autres lieux d'intérêt pour votre ville grâce à OpenStreetMap</p>
</div>
<div class="col-md-8">
<div class="list-group">
{% for stat in stats %}
<a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
{{ stat.zone }} {{ stat.name }}
<span class="badge bg-primary rounded-pill">{{ stat.placesCount }} commerces</span>
</a>
{% endfor %}
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
Ajoutez votre ville
</div>
</div>
</div>
</div>
</div>
<script>
// Créer le formulaire email