539 lines
19 KiB
HTML
539 lines
19 KiB
HTML
{{define "index"}}
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<!--=============== FAVICON ===============-->
|
|
<link rel="shortcut icon" href="/public/assets/img/toutaloue-logo.jpg" type="image/x-icon" />
|
|
|
|
<!--=============== REMIXICONS ===============-->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.5.0/remixicon.css"
|
|
/>
|
|
|
|
<title>{{.Title}} - Toutaloue</title>
|
|
|
|
<!--=============== SWIPER CSS ===============-->
|
|
<link rel="stylesheet" href="/public/assets/css/swiper-bundle.min.css" />
|
|
|
|
<!--=============== CSS ===============-->
|
|
<link rel="stylesheet" href="/public/assets/css/style.css" />
|
|
|
|
<!--=============== HTMX ===============-->
|
|
<script src="https://unpkg.com/htmx.org@2.0.8"></script>
|
|
|
|
<title>Toutaloue | {{.Title}}</title>
|
|
</head>
|
|
|
|
<body>
|
|
<!--==================== HEADER ====================-->
|
|
<header class="header">
|
|
<nav class="nav container">
|
|
<!--<a href="/" class="nav__logo">Toutaloué</a>-->
|
|
<a href="/" class="nav__logo"><img src="/public/assets/img/toutaloue-logo.jpg" alt="logo"></a>
|
|
|
|
<div class="nav__menu" id="nav-menu">
|
|
<ul class="nav__list">
|
|
<li class="dropdownagency__item">
|
|
<div class="dropdown__button">
|
|
Nos agences
|
|
<img
|
|
src="/public/assets/img/arrow-dropdown.png"
|
|
alt="image"
|
|
class="dropdown__arrow"
|
|
/>
|
|
</div>
|
|
<div class="dropdownagency__container">
|
|
<div class="dropdownagency__content">
|
|
<div class="dropdown__group">
|
|
<span class="dropdown__title">Zones géographiques</span>
|
|
<ul class="dropdown__list">
|
|
<li>
|
|
<a
|
|
hx-get="/songon"
|
|
hx-target="#view"
|
|
hx-push-url="true"
|
|
class="dropdown__link"
|
|
onclick="zoneSongon()"
|
|
>Songon</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Yopougon</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Dabou</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dropdown__item">
|
|
<div class="dropdown__button">
|
|
Nos produits
|
|
<img
|
|
src="/public/assets/img/arrow-dropdown.png"
|
|
alt="image"
|
|
class="dropdown__arrow"
|
|
/>
|
|
</div>
|
|
<div class="dropdown__container">
|
|
<div class="dropdown__content">
|
|
|
|
<div class="dropdown__group">
|
|
<div class="dropdown__icon">
|
|
<img
|
|
src="/public/assets/img/tools/terres-agricoles.jpg"
|
|
alt="image"
|
|
/>
|
|
</div>
|
|
<span class="dropdown__title"
|
|
>Terres agricoles</span
|
|
>
|
|
<ul class="dropdown__list">
|
|
<li>
|
|
<a href="#" class="dropdown__link">Terrain Nord</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Terrain Sud</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Terrain Ouest</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Terrain Est</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="dropdown__group">
|
|
<div class="dropdown__icon">
|
|
<img
|
|
src="/public/assets/img/tools/mat-construction.jpg"
|
|
alt="image"
|
|
/>
|
|
</div>
|
|
<span class="dropdown__title"
|
|
>Matériels de construction</span
|
|
>
|
|
<ul class="dropdown__list">
|
|
<li>
|
|
<a href="#" class="dropdown__link">Pelleteuses</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Marteaux-piqueurs</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Bennes à béton</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Goulottes à matériaux</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Bétonnières</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Burineurs</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Débroussailleuses</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Échafaudage</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Échelle</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="dropdown__group">
|
|
<div class="dropdown__icon">
|
|
<img
|
|
src="/public/assets/img/tools/electromenagers.avif"
|
|
alt="image"
|
|
/>
|
|
</div>
|
|
<span class="dropdown__title">Électroménagers</span>
|
|
<ul class="dropdown__list">
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Robots aspirateurs laveur</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Télévisions 4K UHD</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Réfrigérateurs multi portes</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Laves linges séchant</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Sèches linges</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Fours encastrables</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Expressos Broyeurs</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Robots pâtissiers</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Cuisinières à cuisson</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="dropdown__group">
|
|
<div class="dropdown__icon">
|
|
<img
|
|
src="/public/assets/img/tools/vehicules.jpg"
|
|
alt="image"
|
|
/>
|
|
</div>
|
|
<span class="dropdown__title">Véhicules</span>
|
|
<ul class="dropdown__list">
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Voitures électriques</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Utilitaires</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Camions bennes</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Motos</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Chariots élévateurs</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Camions</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Bateaux moteurs</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="dropdown__group">
|
|
<div class="dropdown__icon">
|
|
<img
|
|
src="/public/assets/img/tools/salles-evenementielles.jpg"
|
|
alt="image"
|
|
/>
|
|
</div>
|
|
<span class="dropdown__title">Salles événementielles</span>
|
|
<ul class="dropdown__list">
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Vêtements d'événementiel</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Barres son</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Chaises</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Vaisselles</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Lots de lumières</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Tables personnalisées</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Bâches sur mesure</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Groupes électrogènes</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Lieux privatisés</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="dropdown__group">
|
|
<div class="dropdown__icon">
|
|
<img
|
|
src="/public/assets/img/tools/logements-meubles.jpg"
|
|
alt="image"
|
|
/>
|
|
</div>
|
|
<span class="dropdown__title"
|
|
>Logements meublés</span
|
|
>
|
|
<ul class="dropdown__list">
|
|
<li>
|
|
<a href="#" class="dropdown__link">Appartement 3 pièces</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Appartement 2 pièces</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Studio</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link"
|
|
>Appartement 4 pièces</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Appartement 5 pièces</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Appartement duplex 3 pièces</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="dropdown__link">Appartement duplex 4 pièces</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<li>
|
|
<a
|
|
hx-get="/deposer-annonce"
|
|
hx-target="#view"
|
|
hx-push-url="true"
|
|
class="nav__link slim-button"
|
|
onclick="deposerAnnonce()">
|
|
Déposer une annonce
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Close button -->
|
|
<div class="nav__close" id="nav-close">
|
|
<i class="ri-close-large-line"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav__actions">
|
|
<!-- Login button -->
|
|
<i class="ri-user-line login-button" id="login-button"></i>
|
|
</div>
|
|
|
|
<!-- Toggle button -->
|
|
<div class="nav__toggle" id="nav-toggle">
|
|
<i class="ri-menu-5-line"></i>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!--==================== LOGIN ====================-->
|
|
<div class="login grid" id="login-content">
|
|
<form action="" class="login__form grid">
|
|
<h3 class="login__title">Me connecter</h3>
|
|
<div class="login__group grid">
|
|
<div>
|
|
<label for="login-email" class="login__label">Email</label>
|
|
<input
|
|
type="email"
|
|
placeholder="Entrez votre email"
|
|
id="login-email"
|
|
class="login__input"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="login-pass" class="login__label">Mot de passe</label>
|
|
<input
|
|
type="password"
|
|
placeholder="Entrez votre mot de passe"
|
|
id="login-pass"
|
|
class="login__input"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span class="login__signup">
|
|
Vous n'avez pas de mot de passe ? <a href="#">S'enregistrer</a>
|
|
</span>
|
|
<a href="#" class="login__forgot"> Mot de passe oublié </a>
|
|
<button type="submit" class="login__button button">
|
|
Se connecter
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<i class="ri-close-line login__close" id="login-close"></i>
|
|
</div>
|
|
|
|
<!--==================== BOOKING BY PHONE MODAL ====================-->
|
|
<div class="modal grid" id="modal-content">
|
|
<form action="" class="modal__form grid">
|
|
<h3 class="modal__title">Bienvenue chez Toutaloué</h3>
|
|
<p>Nous contacter au 01 84 21 13 96</p>
|
|
</form>
|
|
<i class="ri-close-line modal__close" id="modal-close"></i>
|
|
</div>
|
|
|
|
<!-- The container where HTMX will swap content -->
|
|
<!--==================== MAIN ====================-->
|
|
<main class="main" id="view">
|
|
<!-- Server-side conditional for Full Page Load -->
|
|
{{if eq .Page "home"}} {{template "home" .}} {{end}} {{if eq .Page
|
|
"explore"}} {{template "explore" .}} {{end}} {{if eq .Page "songon"}}
|
|
{{template "songon" .}} {{end}} {{if eq .Page "contact"}} {{template
|
|
"contact" .}} {{end}}
|
|
{{if eq .Page "deposer-annonce"}}
|
|
{{template "deposer-annonce" .}} {{end}}
|
|
{{if eq .Page "inscription"}}
|
|
{{template "inscription" .}} {{end}}
|
|
</main>
|
|
|
|
<!--=============== FOOTER ===============-->
|
|
<footer class="footer">
|
|
<div class="footer__container container grid">
|
|
<div>
|
|
<a href="#" class="footer__logo">Toutaloué</a>
|
|
<p class="footer__description">
|
|
Trouve et explore les <br />
|
|
meilleurs produits
|
|
</p>
|
|
</div>
|
|
<div class="footer__data grid">
|
|
<div>
|
|
<h3 class="footer__title">À propos</h3>
|
|
<ul class="footer__links">
|
|
<li>
|
|
<a href="#" class="footer__link">Récompenses</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="footer__link">FAQs</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="footer__link"
|
|
>Politique de confidentialité</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="footer__link">Conditions d'utilisation</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="footer__title">Entreprise</h3>
|
|
<ul class="footer__links">
|
|
<li>
|
|
<a href="#" class="footer__link">Blogs</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="footer__link">Communauté</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="footer__link">Notre équipe</a>
|
|
</li>
|
|
<li>
|
|
<a href="#" class="footer__link">Aide</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="footer__title">Contact</h3>
|
|
<ul class="footer__links">
|
|
<li>
|
|
<address class="footer__info">
|
|
BASSAM MOOSSOU <br />
|
|
RÉSIDENTIEL LOT 393
|
|
</address>
|
|
</li>
|
|
<li>
|
|
<address class="footer__info">
|
|
contact@toutaloue.com <br />
|
|
0987-654-321
|
|
</address>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="footer__title">Social</h3>
|
|
<div class="footer__social">
|
|
<a
|
|
href="https://www.facebook.com/"
|
|
target="_blank"
|
|
class="footer__social-link"
|
|
>
|
|
<i class="ri-facebook-circle-line"></i>
|
|
</a>
|
|
<a
|
|
href="https://www.instagram.com/"
|
|
target="_blank"
|
|
class="footer__social-link"
|
|
>
|
|
<i class="ri-instagram-line"></i>
|
|
</a>
|
|
<a
|
|
href="https://twitter.com/"
|
|
target="_blank"
|
|
class="footer__social-link"
|
|
>
|
|
<i class="ri-twitter-x-line"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="footer__copy"> © Tous Droits Réservés par JKI </span>
|
|
</footer>
|
|
|
|
<!--=============== SCROLLUP ===============-->
|
|
<a href="#" class="scrollup" id="scroll-up">
|
|
<i class="ri-arrow-up-line"></i>
|
|
</a>
|
|
|
|
<!--=============== SCROLLREVEAL JS ===============-->
|
|
<script src="/public/assets/js/scrollreveal.min.js"></script>
|
|
|
|
<!--=============== SWIPER JS ===============-->
|
|
<script src="/public/assets/js/swiper-bundle.min.js"></script>
|
|
|
|
<!--=============== MAIN JS ===============-->
|
|
<script src="/public/assets/js/main.js"></script>
|
|
</body>
|
|
</html>
|
|
{{end}}
|