<!DOCTYPE html>

<html lang="fr">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <meta name="theme-color" content="#ffffff">

  <meta name="description" content="Carte professionnelle d'Alaeddine Oulidi. Informatique, audiovisuel et médias.">

  <title>Alaeddine Oulidi | Carte professionnelle</title>

  <style>

    * { box-sizing: border-box; }

    body {

      margin: 0;

      font-family: Arial, Helvetica, sans-serif;

      background: #f5f5f5;

      color: #171717;

      line-height: 1.6;

    }

    a { color: inherit; text-decoration: none; }

    .container {

      width: min(100% - 32px, 560px);

      margin: 32px auto;

    }

    .card {

      background: #fff;

      border: 1px solid #e5e5e5;

      border-radius: 20px;

      overflow: hidden;

    }

    header {

      text-align: center;

      padding: 38px 22px 28px;

      border-bottom: 1px solid #eee;

    }

    .monogram {

      width: 76px;

      height: 76px;

      display: grid;

      place-items: center;

      margin: 0 auto 18px;

      border-radius: 50%;

      background: #171717;

      color: white;

      font-size: 25px;

      font-weight: bold;

      letter-spacing: 2px;

    }

    h1 { margin: 0; font-size: 27px; }

    .role { margin: 6px 0 0; color: #666; }

    .specialities { font-size: 13px; color: #777; margin-top: 15px; }

    .content { padding: 24px; }

    .actions {

      display: grid;

      grid-template-columns: 1fr 1fr;

      gap: 10px;

      margin-bottom: 30px;

    }

    .btn {

      display: flex;

      align-items: center;

      justify-content: center;

      min-height: 48px;

      padding: 12px;

      border: 1px solid #171717;

      border-radius: 10px;

      font-size: 14px;

      font-weight: 600;

      text-align: center;

    }

    .btn-dark { background: #171717; color: #fff; }

    .btn-light { background: #fff; color: #171717; }

    h2 {

      font-size: 16px;

      margin: 26px 0 12px;

    }

    .activity {

      display: flex;

      justify-content: space-between;

      align-items: center;

      gap: 12px;

      padding: 17px 0;

      border-bottom: 1px solid #eee;

    }

    .activity:last-child { border-bottom: 0; }

    .activity strong { display: block; font-size: 15px; }

    .activity p { margin: 3px 0; color: #777; font-size: 13px; }

    .visit { font-size: 13px; font-weight: bold; white-space: nowrap; }

    .contact-line {

      display: block;

      padding: 12px 0;

      border-bottom: 1px solid #eee;

      overflow-wrap: anywhere;

      font-size: 14px;

    }

    .qr-section {

      margin-top: 28px;

      padding: 24px 16px;

      text-align: center;

      background: #fafafa;

      border: 1px solid #eee;

      border-radius: 14px;

    }

    .qr-section img {

      display: block;

      width: 190px;

      height: 190px;

      margin: 16px auto;

      background: #fff;

    }

    .small { color: #777; font-size: 12px; }

    footer { padding: 20px; text-align: center; color: #888; font-size: 12px; }

    @media (max-width: 380px) {

      .actions { grid-template-columns: 1fr; }

      h1 { font-size: 24px; }

      .content { padding: 18px; }

    }

  </style>

</head>

<body>

  <main class="container">

    <article class="card">

      <header>

        <div class="monogram" aria-hidden="true">AO</div>

        <h1>Alaeddine Oulidi</h1>

        <p class="role">Entrepreneur</p>

        <p class="specialities">INFORMATIQUE · AUDIOVISUEL · MÉDIAS</p>

      </header>

      <div class="content">

        <div class="actions">

          <a class="btn btn-dark" href="tel:+212661228330">Appeler</a>

          <a class="btn btn-light"

             href="https://wa.me/212661228330"

             target="_blank" rel="noopener">WhatsApp</a>

          <a class="btn btn-light"

             href="mailto:alae.oulidi@servalog.ma">Envoyer un e-mail</a>

          <button class="btn btn-light" id="saveContact" type="button">

            Enregistrer mon contact

          </button>

        </div>

        <h2>Mes activités</h2>

        <a class="activity" href="https://servalog.ma"

           target="_blank" rel="noopener">

          <div>

            <strong>Servalog</strong>

            <p>Informatique, réseaux et sécurité</p>

          </div>

          <span class="visit">Visiter ↗</span>

        </a>

        <a class="activity" href="https://fpstudios.ma"

           target="_blank" rel="noopener">

          <div>

            <strong>FramePulse Studios</strong>

            <p>Production audiovisuelle et cinématographique</p>

          </div>

          <span class="visit">Visiter ↗</span>

        </a>

        <a class="activity" href="https://roeyatv.ma"

           target="_blank" rel="noopener">

          <div>

            <strong>Roeya TV</strong>

            <p>Presse et médias</p>

          </div>

          <span class="visit">Visiter ↗</span>

        </a>

        <h2>Coordonnées</h2>

        <a class="contact-line" href="tel:+212661228330">

          Téléphone : 0661228330

        </a>

        <a class="contact-line" href="mailto:alae.oulidi@servalog.ma">

          E-mail : alae.oulidi@servalog.ma

        </a>

        <a class="contact-line"

           href="https://www.instagram.com/servalog.ma?vrfl=cWtnYnptN3h1OW9k&utm_source=qr"

           target="_blank" rel="noopener">

          Instagram : @servalog.ma ↗

        </a>

        <section class="qr-section">

          <strong>Ma carte professionnelle</strong>

          <p class="small">Scannez pour ouvrir cette carte numérique.</p>

          <img id="qr" alt="QR code vers ma carte professionnelle">

          <p class="small">

            Le QR code nécessite une connexion Internet.

          </p>

        </section>

      </div>

      <footer>© <span id="year"></span> Alaeddine Oulidi</footer>

    </article>

  </main>

  <script>

    const cardUrl = "https://fpstudios.ma/carte/";

    document.getElementById("year").textContent =

      new Date().getFullYear();

    // QR code fourni par un service externe.

    document.getElementById("qr").src =

      "https://api.qrserver.com/v1/create-qr-code/?size=240x240&margin=8&data=" +

      encodeURIComponent(cardUrl);

    document.getElementById("saveContact").addEventListener("click", () => {

      const vcard = [

        "BEGIN:VCARD",

        "VERSION:3.0",

        "N:Oulidi;Alaeddine;;;",

        "FN:Alaeddine Oulidi",

        "TITLE:Entrepreneur",

        "TEL;TYPE=CELL:+212661228330",

        "EMAIL;TYPE=WORK:alae.oulidi@servalog.ma",

        "URL:https://servalog.ma",

        "URL:https://fpstudios.ma",

        "URL:https://roeyatv.ma",

        "END:VCARD"

      ].join("\r\n") + "\r\n";

      const blob = new Blob([vcard], {

        type: "text/vcard;charset=utf-8"

      });

      const url = URL.createObjectURL(blob);

      const link = document.createElement("a");

      link.href = url;

      link.download = "Alaeddine_Oulidi.vcf";

      document.body.appendChild(link);

      link.click();

      link.remove();

      setTimeout(() => URL.revokeObjectURL(url), 1000);

    });

  </script>

</body>

</html>