|
|
<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> |
