| <html><head><base href="https://example.com/"> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title></title> |
| <link rel="manifest" href="manifest.json"> |
| <meta name="theme-color" content="#000"> |
| <meta name="apple-mobile-web-app-capable" content="yes"> |
| <meta name="apple-mobile-web-app-status-bar-style" content="black"> |
| <meta name="apple-mobile-web-app-title" content=> |
| <link rel="apple-touch-icon" href="/Captureds (1).PNG"> |
| <style> |
| body { |
| font-family: sans-serif; |
| margin: 0; |
| background-color: #000; |
| color: #fff; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| padding-top: 60px; |
| min-height: 100vh; |
| padding-bottom: 120px; |
| } |
| |
| header { |
| flex-direction: column; |
| padding: 1rem 0; |
| background-color: #000; |
| color: #fff; |
| width: 100%; |
| position: fixed; |
| top: 0; |
| z-index: 100; |
| border-bottom: 2px solid #fff; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| } |
| |
| .logo { |
| height: 120px; |
| width: auto; |
| max-width: 90%; |
| border-radius: 15px; |
| transition: all 0.3s ease; |
| } |
| |
| .tagline { |
| font-size: 1.2em; |
| margin-top: 0.5em; |
| font-style: italic; |
| color: #fff; |
| text-align: center; |
| animation: fadeIn 1s ease-out; |
| } |
| |
| .container { |
| background-color: #111; |
| padding: 30px; |
| border-radius: 10px; |
| box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3); |
| width: 80%; |
| max-width: 900px; |
| margin-top: 80px; |
| text-align: center; |
| position: relative; |
| margin-bottom: 20px !important; |
| animation: fadeIn 1s ease-out; |
| } |
| |
| .services { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 20px; |
| margin-top: 30px; |
| cursor: pointer; |
| } |
| |
| .service-card { |
| padding: 20px; |
| border: 1px solid #fff; |
| border-radius: 8px; |
| text-align: center; |
| cursor: pointer; |
| background-color: #222; |
| transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| min-height: 300px; |
| overflow: visible; |
| margin-bottom: 20px; |
| box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2); |
| } |
| |
| .service-card:not(.submenu-open) { |
| transform: none !important; |
| } |
| |
| .service-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 4px 8px rgba(255, 255, 255, 0.5); |
| } |
| |
| .submenu { |
| position: relative; |
| top: auto; |
| left: auto; |
| right: auto; |
| background-color: transparent; |
| border: none; |
| border-top: 1px solid #fff; |
| padding: 10px 0; |
| display: none; |
| margin-top: 15px; |
| width: 100%; |
| z-index: 10; |
| } |
| |
| .submenu.show { |
| display: block; |
| } |
| |
| .submenu li { |
| list-style: none; |
| padding: 8px; |
| margin: 5px 0; |
| border-radius: 4px; |
| background-color: #333; |
| } |
| |
| .submenu li a { |
| color: #fff; |
| text-decoration: none; |
| display: block; |
| font-size: 0.9em; |
| } |
| |
| .submenu li:hover { |
| background-color: #444; |
| } |
| |
| button { |
| background-color: #fff; |
| color: #000; |
| border: none; |
| padding: 10px 20px; |
| border-radius: 5px; |
| cursor: pointer; |
| font-size: 16px; |
| transition: background-color 0.3s ease; |
| } |
| |
| button:hover { |
| background-color: #ddd; |
| } |
| |
| .issue-form textarea { |
| width: 90%; |
| min-height: 120px; |
| margin: 15px auto; |
| display: block; |
| padding: 12px; |
| } |
| |
| .issue-form input[type="file"] { |
| width: 90%; |
| margin: 15px auto; |
| display: block; |
| padding: 8px; |
| height: 40px; |
| border: 2px solid #555; |
| border-radius: 5px; |
| position: relative; |
| cursor: pointer; |
| } |
| |
| .issue-form input[type="file"]::before { |
| content: '\f030 Ajouter photo'; |
| font-family: 'Font Awesome 6 Free', sans-serif; |
| font-weight: 900; |
| position: absolute; |
| left: 0; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| background: #333; |
| color: white; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 3px; |
| cursor: pointer; |
| border: 1px solid #555; |
| } |
| |
| .issue-form input[type="file"]:hover::before { |
| background: #444; |
| } |
| |
| .issue-form input[type="file"]:active::before { |
| background: #222; |
| } |
| |
| .issue-form input[type="file"]::-webkit-file-upload-button { |
| visibility: hidden; |
| width: 0; |
| } |
| |
| .issue-form input[type="file"]::file-selector-button { |
| visibility: hidden; |
| width: 0; |
| } |
| |
| .issue-form { |
| display: none; |
| margin-top: 15px; |
| padding: 10px; |
| background: #333; |
| border-radius: 8px; |
| } |
| |
| .issue-form.show { |
| display: block; |
| } |
| |
| footer { |
| margin-top: auto; |
| text-align: center; |
| padding: 20px 0; |
| color: #555; |
| width: 100%; |
| position: fixed; |
| bottom: 0; |
| background-color: #000; |
| } |
| |
| .whatsapp-btn { |
| display: inline-block; |
| background-color: #25D366; |
| color: white; |
| padding: 15px 30px; |
| border-radius: 30px; |
| text-decoration: none; |
| font-size: 1.2em; |
| transition: background-color 0.3s ease; |
| } |
| |
| .whatsapp-btn:hover { |
| background-color: #128C7E; |
| } |
| |
| .footer-image { |
| width: 100%; |
| max-width: 900px; |
| height: auto; |
| margin: 20px auto; |
| border-radius: 10px; |
| box-shadow: 0 2px 5px rgba(255, 255, 255, 0.3); |
| } |
| |
| |
| @keyframes fadeIn { |
| from { |
| opacity: 0; |
| } |
| to { |
| opacity: 1; |
| } |
| } |
| |
| @keyframes wiggle { |
| 0% { transform: rotate(0deg); } |
| 25% { transform: rotate(-5deg); } |
| 75% { transform: rotate(5deg); } |
| 100% { transform: rotate(0deg); } |
| } |
| |
| @keyframes scrollText { |
| 0% { transform: translateX(100%); } |
| 100% { transform: translateX(-100%); } |
| } |
| |
| |
| @media (max-width: 768px) { |
| header { |
| padding: 0.5rem 0; |
| } |
| |
| .logo { |
| height: 90px; |
| } |
| |
| .tagline { |
| font-size: 1em; |
| padding: 0 10px; |
| } |
| |
| .container { |
| width: 95%; |
| margin-top: 70px; |
| padding: 20px; |
| } |
| |
| .services { |
| grid-template-columns: 1fr; |
| gap: 20px; |
| } |
| |
| .service-card { |
| min-height: 200px; |
| padding: 15px; |
| } |
| |
| button { |
| padding: 8px 16px; |
| font-size: 14px; |
| } |
| } |
| |
| @media (max-width: 480px) { |
| .logo { |
| height: 70px; |
| } |
| |
| .tagline { |
| font-size: 0.9em; |
| } |
| } |
| |
| .btn-icon { |
| margin-right: 8px; |
| } |
| |
| .service-icon { |
| font-size: 5.5em; |
| color: #fff; |
| margin: 20px 0; |
| animation: wiggle 2s ease-in-out infinite; |
| } |
| |
| .whatsapp-btn .btn-icon { |
| font-size: 1.4em; |
| vertical-align: middle; |
| } |
| |
| button .btn-icon { |
| font-size: 1.3em; |
| vertical-align: middle; |
| } |
| |
| .service-card h3 { |
| margin-bottom: 0; |
| } |
| |
| .scroll-container { |
| width: 100%; |
| overflow: hidden; |
| white-space: nowrap; |
| margin: 20px 0; |
| background-color: #fff; |
| padding: 10px 0; |
| } |
| |
| .scroll-text { |
| display: inline-block; |
| animation: scrollText 15s linear infinite; |
| color: #000; |
| font-weight: bold; |
| } |
| |
| .contact-section { |
| margin-top: 0 !important; |
| padding-top: 0 !important; |
| } |
| |
| .contact-section h2 { |
| margin-bottom: 10px; |
| } |
| |
| .contact-section p { |
| margin: 5px 0; |
| } |
| </style> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
| </head> |
| <body> |
| <header> |
| <img src="https://i.ibb.co/Vq1ZHGB/Captureds.png" alt="HAMBI Logo" class="logo"> |
| <div class="tagline">Restez calme, on gère</div> |
| </header> |
|
|
| <div class="container"> |
| <h2>Nos Services de Réparation et Sécurité Informatique</h2> |
| <p class="scroll-container"><span class="scroll-text">Cliquez sur un service pour voir les détails :</span></p> |
|
|
| <div class="services" id="services"> |
| <div class="service-card"> |
| <h3>Réparation de Smartphones</h3> |
| <i class="service-icon fas fa-mobile-alt"></i> |
| <ul class="submenu"> |
| <li> |
| <a href="https://example.com/smartphone-reparations/ecran">Réparation d'écran</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre écran..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| <li> |
| <a href="https://example.com/smartphone-reparations/batterie">Remplacement de batterie</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre batterie..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| <li> |
| <a href="https://example.com/smartphone-reparations/autres">Autres réparations</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre smartphone..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| </ul> |
| </div> |
|
|
| <div class="service-card"> |
| <h3>Réparation d'Ordinateurs</h3> |
| <i class="service-icon fas fa-laptop"></i> |
| <ul class="submenu"> |
| <li> |
| <a href="https://example.com/ordinateur-reparations/materiel">Réparation Matérielle</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre ordinateur..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| <li> |
| <a href="https://example.com/ordinateur-reparations/logiciel">Réparation Logicielle</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre logiciel..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| <li> |
| <a href="https://example.com/ordinateur-reparations/nettoyage">Nettoyage & Optimisation</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre ordinateur..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| </ul> |
| </div> |
|
|
| <div class="service-card"> |
| <h3>Dépannage Réseaux</h3> |
| <i class="service-icon fas fa-network-wired"></i> |
| <ul class="submenu"> |
| <li> |
| <a href="https://example.com/reseau-depannage/wifi">Problèmes de Wi-Fi</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre Wi-Fi..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| <li> |
| <a href="https://example.com/reseau-depannage/connexion">Problèmes de Connexion</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre connexion..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| <li> |
| <a href="https://example.com/reseau-depannage/configuration">Configuration Réseau</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre réseau..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| </ul> |
| </div> |
|
|
| <div class="service-card"> |
| <h3>Sécurité Informatique</h3> |
| <i class="service-icon fas fa-shield-alt"></i> |
| <ul class="submenu"> |
| <li> |
| <a href="https://example.com/securite-informatique/virus">Suppression de Virus</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre ordinateur..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| <li> |
| <a href="https://example.com/securite-informatique/parefeu">Configuration Pare-feu</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre pare-feu..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| <li> |
| <a href="https://example.com/securite-informatique/audit">Audit de Sécurité</a> |
| <form class="issue-form"> |
| <textarea placeholder="Décrivez le problème avec votre sécurité..."></textarea> |
| <input type="file" accept="image/*" multiple> |
| <button type="submit"><i class="btn-icon fas fa-paper-plane"></i>Envoyer à HAMBI</button> |
| </form> |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| <section class="contact-section" id="contact"> |
| <h2>Contactez-nous</h2> |
| <p>Pour tous besoins particulier non mentionnés dans le menu de HAMBI.</p> |
| <a href="https://wa.me/yourphonenumber" class="whatsapp-btn" target="_blank"> |
| <i class="btn-icon fab fa-whatsapp"></i>Contactez-nous sur WhatsApp |
| </a> |
| </section> |
| </div> |
|
|
| <div class="container" style="margin-bottom: 0;"> |
| <img src="https://i.ibb.co/MGTLSGW/r-parateur-de-logiciel-et-de-mat-riel-informatique-5.jpg" alt="Réparateur informatique au travail" class="footer-image"> |
| </div> |
|
|
| <footer> |
| <p>© 2025 HAMBI. Tous droits réservés.</p> |
| </footer> |
|
|
| <script> |
| let deferredPrompt; |
| |
| window.addEventListener('beforeinstallprompt', (e) => { |
| e.preventDefault(); |
| deferredPrompt = e; |
| }); |
| |
| function formatMessage(description, serviceType) { |
| return `Nouveau problème signalé:\nService: ${serviceType}\nDescription: ${description}`; |
| } |
| async function handleFormSubmit(event, serviceType) { |
| event.preventDefault(); |
| const form = event.target; |
| const description = form.querySelector('textarea').value; |
| const files = form.querySelector('input[type="file"]').files; |
| const message = formatMessage(description, serviceType); |
| const whatsappUrl = `https://wa.me/76966265?text=${encodeURIComponent(message)}`; |
| window.open(whatsappUrl, '_blank'); |
| } |
| document.addEventListener('DOMContentLoaded', () => { |
| const serviceCards = document.querySelectorAll('.service-card'); |
| serviceCards.forEach(card => { |
| card.addEventListener('click', e => { |
| if (e.target.closest('.submenu')) { |
| e.stopPropagation(); |
| return; |
| } |
| serviceCards.forEach(otherCard => { |
| if (otherCard !== card) { |
| const otherSubmenu = otherCard.querySelector('.submenu'); |
| if (otherSubmenu && otherSubmenu.classList.contains('show')) { |
| otherSubmenu.classList.remove('show'); |
| otherCard.classList.remove('submenu-open'); |
| } |
| } |
| }); |
| const submenu = card.querySelector('.submenu'); |
| if (submenu) { |
| const wasShown = submenu.classList.contains('show'); |
| submenu.classList.toggle('show'); |
| card.classList.toggle('submenu-open'); |
| if (!wasShown) { |
| card.style.transform = 'translateY(-5px)'; |
| } else { |
| card.style.transform = 'none'; |
| } |
| } |
| }); |
| }); |
| document.addEventListener('click', event => { |
| if (!event.target.closest('.service-card')) { |
| serviceCards.forEach(card => { |
| const submenu = card.querySelector('.submenu'); |
| if (submenu && submenu.classList.contains('show')) { |
| submenu.classList.remove('show'); |
| card.classList.remove('submenu-open'); |
| } |
| }); |
| } |
| }); |
| const submenuLinks = document.querySelectorAll('.submenu li a'); |
| submenuLinks.forEach(link => { |
| link.addEventListener('click', e => { |
| e.preventDefault(); |
| const form = link.parentElement.querySelector('.issue-form'); |
| form.classList.toggle('show'); |
| }); |
| }); |
| const issueForms = document.querySelectorAll('.issue-form'); |
| issueForms.forEach(form => { |
| form.addEventListener('submit', e => { |
| const serviceType = form.parentElement.querySelector('a').textContent; |
| handleFormSubmit(e, serviceType); |
| }); |
| }); |
| }); |
| |
| if ('serviceWorker' in navigator) { |
| navigator.serviceWorker.register('/sw.js') |
| .then(registration => { |
| console.log('ServiceWorker registration successful'); |
| }) |
| .catch(err => { |
| console.log('ServiceWorker registration failed: ', err); |
| }); |
| } |
| </script> |
| </body> |
| </html> |
