1#@!#!123s

��JFIF�� 1#@!#!123s
: / home / econfoy / devam / Helper /
Filename : contact_icons.php
back
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contactez-nous</title>
    <!-- FontAwesome pour les icônes -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
    /* Style pour le bouton + */
    .toggle-button {
        position: fixed;
        right: 10px;
        bottom: 80px;
        color: white;
        padding: 10px;
        border-radius: 50%;
        font-size: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 60px;
        height: 60px;
        background: #1B1464;
        z-index: 1000;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .toggle-button:hover {
        background-color: #0056b3;
    }

    /* Style global pour chaque icône */
    .contact-icon {
        position: fixed;
        right: 15px;
        bottom: 160px;
        color: white;
        border-radius: 50%;
        font-size: 20px;
        width: 50px;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        z-index: 1000;
        background: #1B1464;
        transform: scale(0);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .contact-icon.facebook {
        background: #1B1464;
    }

    .contact-icon.phone {
        background: #1B1464;
        bottom: 340px;
    }

    .contact-icon.email {
        background: #1B1464;
        bottom: 280px;
    }

    .contact-icon.whatsapp {
        background: #25D366;
        bottom: 220px;
    }

    /* Changer la couleur au survol */
    .contact-icon:hover {
        background-color: #0056b3;
    }

    /* Classes pour afficher les icônes */
    .contact-icon.show {
        transform: scale(1);
        opacity: 1;
    }
    </style>
</head>

<body>

    <!-- Bouton + -->
    <div class="toggle-button" onclick="toggleIcons()">
        <img width="50px" src="https://www.zellusmarketing.com/wp-content/uploads/2021/03/Marketing-Gif-2.gif" />
    </div>

    <!-- Icône Facebook -->
    <a href="https://www.facebook.com/profile.php?id=61571455636050" class="contact-icon facebook" target="_blank"
        title="Facebook">
        <i class="fab fa-facebook"></i>
    </a>

    <!-- Icône Téléphone -->
    <a href="tel:+21650114930" class="contact-icon phone" title="Téléphone">
        <i class="fas fa-phone"></i>
    </a>

    <!-- Icône Email -->
    <a href="mailto:cherif.amine.devam@gmail.com" class="contact-icon email" title="Email">
        <i class="fas fa-envelope"></i>
    </a>

    <!-- Icône WhatsApp -->
    <a href="https://wa.me/21650114930" class="contact-icon whatsapp" target="_blank" title="WhatsApp">
        <i class="fab fa-whatsapp"></i>
    </a>

    <!-- Ajouter un élément audio -->
    <audio id="click-sound" src="./uploads/sounds/notification-sound.mp3'"></audio>

    <script>
    function toggleIcons() {
        // Jouer un son
        const clickSound = document.getElementById('click-sound');
        clickSound.play();

        // Sélectionner toutes les icônes de contact
        const icons = document.querySelectorAll('.contact-icon');

        // Basculer la classe show pour animer les icônes
        icons.forEach((icon, index) => {
            setTimeout(() => {
                icon.classList.toggle('show');
            }, index * 100); // Ajouter un délai pour l'effet de cascade
        });
    }
    </script>

</body>

</html>