dl-dev2.github.com/index.html at main · Dl-dev2/dl-dev2.github.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>DL DeV - Création de sites web et Beats Yamaha</title>
  <meta name="description" content="DL DeV propose des services professionnels en création de sites web modernes et en vente de beats exclusifs pour piano Yamaha.">
  <meta name="keywords" content="création site web, beat Yamaha, site vitrine, ecommerce, SEO, DL DeV">
  <meta name="author" content="DL DeV">
  <link rel="canonical" href="https://dldev.cm" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

<header>
  <div class="logo" title="DL DeV - Création de sites & Beats Yamaha">DL <span class="dev">DeV</span></div>
  <div class="hamburger" id="hamburger" aria-label="Menu">&#9776;</div>
  <nav id="nav-menu">
    <a href="#hero">Accueil</a>
    <a href="#services">Services</a>
    <a href="#contact">Contact</a>
  </nav>
</header>

<section class="hero" id="hero">
  <h1>Bienvenue chez DL DeV</h1>
  <button id="btnContactHero">Nous contacter</button>
</section>

<section class="intro">
  <p>DL DeV propose des solutions professionnelles en <strong>création de sites web</strong> et <strong>vente de beats pour piano Yamaha</strong>. Découvrez nos services et demandez votre devis personnalisé.</p>
</section>

<section id="services">
  <h2>Nos Services</h2>
  <article class="service">
    <h3>Création de sites web</h3>
    <ul>
      <li>Site vitrine professionnel</li>
      <li>Site e-commerce avec paiement mobile</li>
      <li>Design moderne et responsive</li>
      <li>Optimisation SEO</li>
    </ul>
    <button class="btnDevis" data-service="Création de sites web">Demander mon devis</button>
  </article>

  <article class="service">
    <h3>Vente de beats pour piano Yamaha</h3>
    <ul>
      <li>Beats exclusifs pour Yamaha PSR-E/S/SX</li>
      <li>Styles variés et personnalisés</li>
      <li>Support technique et conseils</li>
    </ul>
    <button class="btnDevis" data-service="Vente de beats pour piano Yamaha">Commander</button>
  </article>
</section>

<!-- Modal formulaire -->
<div class="modal" id="modalForm" aria-hidden="true">
  <div class="modal-content">
    <span class="close-btn" id="closeModal" aria-label="Fermer le formulaire">&times;</span>
    <h2>Demande de devis</h2>
    <form id="formDevis">
      <label for="name">Nom complet</label>
      <input type="text" id="name" name="name" required />

      <label for="phone">Numéro de téléphone</label>
      <input type="tel" id="phone" name="phone" required pattern="[0-9+ ]{8,15}" />

      <label for="serviceSelected">Service demandé</label>
      <input type="text" id="serviceSelected" name="serviceSelected" readonly />

      <button type="submit" class="submit-btn">Envoyer via WhatsApp</button>
    </form>
  </div>
</div>

<section id="contact">
  <h2>Contactez-nous</h2>
  <p>Numéro WhatsApp : <a href="https://wa.me/237656785832" target="_blank" rel="noopener noreferrer">+237 656 785 832</a></p>
  <p>Email : <a href="mailto:dldeveloppeur@gmail.com">dldeveloppeur@gmail.com</a></p>
</section>

<script>
  const hamburger = document.getElementById('hamburger');
  const navMenu = document.getElementById('nav-menu');
  hamburger.addEventListener('click', () => {
    navMenu.classList.toggle('open');
  });

  const modal = document.getElementById('modalForm');
  const closeModalBtn = document.getElementById('closeModal');
  const btnDeviss = document.querySelectorAll('.btnDevis');
  const btnContactHero = document.getElementById('btnContactHero');
  const serviceInput = document.getElementById('serviceSelected');

  btnDeviss.forEach(btn => {
    btn.addEventListener('click', () => {
      serviceInput.value = btn.getAttribute('data-service');
      modal.classList.add('show');
    });
  });

  btnContactHero.addEventListener('click', () => {
    serviceInput.value = '';
    modal.classList.add('show');
  });

  closeModalBtn.addEventListener('click', () => {
    modal.classList.remove('show');
  });

  modal.addEventListener('click', e => {
    if (e.target === modal) {
      modal.classList.remove('show');
    }
  });

  const form = document.getElementById('formDevis');
  form.addEventListener('submit', e => {
    e.preventDefault();
    const name = form.name.value.trim();
    const phone = form.phone.value.trim();
    const service = form.serviceSelected.value.trim() || "Non spécifié";

    if (!name || !phone) {
      alert('Veuillez remplir tous les champs correctement.');
      return;
    }

    const message =
      `Bonjour, je vous contacte pour le service suivant:\n` +
      `${service}\n\n` +
      `Mes coordonnées:\n` +
      `Nom: ${name}\n` +
      `Téléphone: ${phone}`;

    const url = `https://wa.me/237656785832?text=${encodeURIComponent(message)}`;
    window.open(url, '_blank');
    modal.classList.remove('show');
    form.reset();
  });
</script>

</body>
</html>