<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui, viewport-fit=cover">
        <title>Nanow.xyz</title>
    
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
     <link rel="stylesheet" href="./css/style.css" />
     <link rel="stylesheet" href="./css/songbar.css" />
     <link rel="stylesheet" 
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <link rel="stylesheet" href="css/jquery-ui.css">

     <style>
        /* Le style de l'overlay */
        #blackbox {
            position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0);
    z-index: 9999999;
    opacity: 0;
    visibility: visible;
    transition: opacity 2s ease, visibility 0s linear 3s;
    pointer-events: none;
}

#blackbox:after {

    animation: grain 8s steps(10) infinite;
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/paper-pattern.png);
    content: "";
    height: 300%;
    left: -50%;
    opacity: 0.06;
    mix-blend-mode: color-dodge;
    position: fixed;
    top: -100%;
    width: 300%;
   
    pointer-events:none;

}
        
  /* Classe pour afficher l'overlay */
  #blackbox.show {
            opacity: 1; /* Visible */
            visibility: visible; /* Affiché */
            transition: opacity 3s ease, visibility 0s linear 0s; /* Transition du fondu */
        }

        #compteur {
            
            color: #f7f7f7;


text-shadow: 0px 0px 10px white;


    }

    .discordinfo {
            
        color: #e8d2ff;
    font-size: 21px;
    position: absolute;
    left: 1032px;
    width: 251px;
    text-align: right;
    transform: scale3d(1.2, 0.8, 1);
    letter-spacing: 1px;
    text-shadow: 0px 0px 10px #6e14ff;
    opacity: 1;
}
    

    .testicon {
        top: 9px;
    margin-left: -30px;
    color: #a795d1;
    transform: scale(1, 1.5);
    font-size: 17px;
    text-shadow: 0 0 BLACK;
    }
    </style>

</head>

<body ondragstart="return false;" ondrop="return false;">
 
    <div class="cursor-circle"></div>
   
    <div class="cursor-point"></div>
    <svg width="0" height="0">
        <filter id="rgb-split">
          <feOffset in="SourceGraphic" dx="1" dy="1" result="layer-one" />
          <feComponentTransfer in="layer-one" result="red">
              <feFuncR type="identity" />
              <feFuncG type="discrete" tableValues="0" />
              <feFuncB type="discrete" tableValues="0" />
          </feComponentTransfer>
      
          <feOffset in="SourceGraphic" dx="-1" dy="-1" result="layer-two" />
          <feComponentTransfer in="layer-two" result="green">
              <feFuncR type="discrete" tableValues="0" />
              <feFuncG type="identity" />
              <feFuncB type="identity" />
          </feComponentTransfer>
      
          <feBlend in="red" in2="green" mode="screen" result="color-split" />
        </filter>
      </svg>

     <!-- black fade  -->
     <div id="blackbox"></div>

    <div class="overlay"></div>
  
      <!-- Preloader -->
      <div id="preloader">
        <img class="test12" src="imgs/LOGO_.png" alt="Logo">
        <button id="enterButton" onclick="hidePreloader()"></button>
    </div>

       
     <!-- Particles Container -->
     <div id="particles-js"></div>
     <div id="particles-js2"></div>
     <!-- Import particles.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/particles.js"></script>

    
    

    <div class="outer-frame">
        
        <div class="video-container">
          
            <div id="player">
                
                <img id="arrowright" href="#" class="right_arrow" src="imgs/right_arrow.png">

                <i id="songicon" class="fas fa-volume-up song-icon"></i>
                <div id="volume"></div>
                <!-- <i class="fa fa-volume-up"></i> -->
              </div>


              <img id="titleChamp" src="imgs/title/vayne.png" alt="Vayne" class="vayne">

            <!-- Background video -->
            <video id="bgvideo" preload="auto" poster="imgs/poster.png" class="yone" autoplay loop muted>
                <source id="bgSource" src="nw_yone.mp4" type="video/mp4">
                <!-- Fallback content if the video is not supported -->
                Your browser does not support the video tag.
            </video>

            <!-- Logo container with fire animation overlay -->
            <div class="logo-container">
                <!-- Fire animation (webm) as an overlay -->
                <video class="fire-overlay" autoplay loop muted>
                    <source src="Flame.webm" type="video/webm">
                    <!-- Fallback content if the video is not supported -->
                    Your browser does not support the video tag.
                </video>
                <!-- Logo superposed on top of the fire animation -->
                <img src="imgs/logo_resized.png" alt="Logo" class="logo">
            </div>


           


         <!-- Barre de progression de la chanson -->
      <div class="song-container" style="position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 27%; text-align: center;">
        <p id="current-song" style="color: #fff; font-size: 16px; margin-bottom: 5px;"><img src="imgs/currentsong.png"> <i id="reloadsong" href="#" class="fa-solid fa-angles-right reload"></i><br>  <div class="parent">
            <p id="song-title">Song Title</p>
            
            <div class="discordinfo" bis_skin_checked="1"><i class="fa-brands fa-discord testicon"></i>souldeception | <span id="compteur"></span></div>
        </div></p>
        
        <progress id="song-progress-bar" value="0" max="100" style="width: 100%; height: 3px; background-color: rgba(113, 113, 113, 0.5); border: none; border-radius: 5px; box-shadow: 0 0 10px #6d6d6d;"></progress>
    </div>

    <!-- Lecteur audio pour jouer la chanson -->
  

    <!-- Musique de hover -->
<audio id="hover-sound" preload="auto">
    <source src="songs/click-21156.mp3" type="audio/mp3">
    Votre navigateur ne supporte pas l'élément audio.
</audio>

 <!-- Musique de hover -->
 <audio id="click-sound" preload="auto">
    <source src="songs/1.wav" type="audio/wav">
    Votre navigateur ne supporte pas l'élément audio.
</audio>

        </div>
    </div>


     
    <!-- Chain images 
    <img src="chain_top.png" class="chain-top-right" alt="Chain top right">
    <img src="chain_bot.png" class="chain-bottom-left" alt="Chain bottom left">-->

    <div id="chains" style="z-index: 9999999999;">
    <img src="imgs/chain_animation.png" class="chain_top" alt="Chain top right">
    <img src="imgs/chain_animation.png" class="chain_bot" alt="Chain top right">
    </div>
    
    <video autoplay="true" loop="" id="videoBackground" class="videobg1" style=""><source id="videobgSource" src="" type="video/mp4"></video>
</body></div>


<script>
    

    function playAudio() {
        const audioPlayer = document.getElementById('audio-player');
        audioPlayer.play();
    }
</script>



<script src="js/particle1.js"></script>
<script src="js/particle2.js"></script>


<script>


const audioPlayer2 = document.getElementById("audio-player");

$( document ).ready(function() {

var audioElement = $("<audio>");

function setVolume(myVolume) {
  if (audioPlayer2 !== undefined) {
    changeVolume(myVolume);
  }
}

$("#volume").slider({
  min: 0,
  max: 0.1,
  value: 0.035,
  step: 0.01,
  range: "min",
  slide: function(event, ui) {
    setVolume(ui.value);
  }
});


$("#player").hover(
function() {
  $('.ui-slider-range-min').css("background-color", "#483EF1")
  $('.ui-slider-handle').css("display", "block")
},
function() {
  $('.ui-slider-range-min').css("background-color", "#B3B3B3")
  $('.ui-slider-handle').css("display", "none")
}
);

});


    
</script>

<script>
    $(document).ready(function() {
        const clickSound = document.getElementById("click-sound");
        $('#arrowright').click(function() {
            loadNextVideo();  // Exécute la fonction changeSong()
            clickSound.play();
    });

        $('#showOverlayBtn').click(function() {
            // Afficher l'overlay avec un effet de fondu
            $('#blackbox').fadeIn(1000, function() {
                // Masquer l'overlay après 3 secondes avec un fondu
                setTimeout(function() {
                    $('#blackbox').fadeOut(1000);
                }, 3000);
            });
        });
    });
</script>




<script>
  document.addEventListener("DOMContentLoaded", function () {
    const isMobile = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
    const isAlreadyOnMobile = window.location.pathname.includes("mobile.html");

    // Redirige si l'utilisateur est sur mobile mais pas encore sur la version mobile
    if (isMobile && !isAlreadyOnMobile) {
      window.location.href = "mobile.html";
    }
  });
</script>



<script>
   
  const songTitle = document.getElementById('song-title');
  const progressBar = document.getElementById("song-progress-bar");

  const songs = [
    { title: "Xanny Bar - oxycodone", file: "songs/p__2.mp3" },
    { title: "Are we there yet?(feat. Odarka) - Lyz", file: "songs/p__1.mp3" },
    { title: "пепел - билборды", file: "songs/t.mp3" },
    { title: "Скучно - билборды, EXILED", file: "songs/p__3.mp3" },
    { title: "СУМ І ГНІВ - СТРУКТУРА ЩАСТЯ", file: "songs/p__4.mp3" },
    { title: "Я НЕ ХОЧУ! - Flerian, Lieless", file: "songs/p__5.mp3" },
    { title: "Glaza - ANGUISH, ПОЧТИСЧАСТЛИВ & ily ", file: "songs/p__6.mp3" },
    { title: "давай расскажем - тринадцать карат", file: "songs/p__7.mp3" },
  ];

  let lastSong = null;
  let fft;
  let soundFile;
  let volume = 0;
  let video;

   // Fonction pour changer de chanson de manière aléatoire
   function changeSong() {
    let randomSong;
    do {
      randomSong = songs[Math.floor(Math.random() * songs.length)];
    } while (randomSong.title === lastSong);

    // Mettre à jour le titre de la chanson
    songTitle.textContent = randomSong.title;

    // Si soundFile existe déjà, on stoppe l'audio en cours avant de charger un nouveau fichier
    if (soundFile) {
      soundFile.stop(); // Arrêter le son actuel avant de charger un nouveau fichier
      soundFile.onended(null); // Enlever l'écouteur d'événement "onended" pour éviter des appels multiples
      soundFile = null;  // Libérer l'ancienne instance pour éviter la duplication
    }

    // Assigner directement le nouveau fichier audio à soundFile sans recréer une nouvelle instance
    soundFile = new p5.SoundFile(randomSong.file, () => {
      soundFile.play(); // Jouer la nouvelle chanson
      soundFile.onended(() => {
        setTimeout(changeSong, 100);  // Attendre 100ms avant de changer la chanson
      });
      soundFile.amp(volume);  // Commencer avec le volume à 0 pour le fondu
      fadeIn();  // Démarrer l'effet de fondu au démarrage de la musique
    });

    lastSong = randomSong.title;
  }

   // Fonction de fondu (augmentation progressive du volume)
function fadeIn() {
  let fadeInterval = setInterval(() => {
    if (volume < 0.1) {
      volume += 0.02; // Augmenter le volume de 2% à chaque intervalle
      if (volume > 0.1) {
        volume = 0.1; // Assurez-vous que le volume ne dépasse pas 0.1
      }
      soundFile.amp(volume); // Appliquer le volume
    } else {
      clearInterval(fadeInterval);  // Arrêter l'intervalle une fois le volume atteint 0.1
    }
  }, 100);  // Toutes les 100ms
}


    // Mise à jour de la progress bar
    const updateProgressBar = () => {
      if (soundFile) {
        const currentTime = soundFile.currentTime();
        const duration = soundFile.duration();

        if (duration > 0) {
          const progress = (currentTime / duration) * 100;
          progressBar.value = progress;
        }
      }
    };

    // Fonction pour actualiser la progress bar toutes les 100ms
    setInterval(updateProgressBar, 100);

    const s = (p) => {
  let previousBass = 0;
  let previousMid = 0;
  let previousTreble = 0;
  let fft;
  let targetBrightness = 0.7;  // La luminosité cible
  let currentBrightness = 0.7;  // La luminosité actuelle
  const easing = 0.85;  // Le facteur d'interpolation pour la transition

  p.setup = () => {
    fft = new p5.FFT(0.8, 512);  // Augmenter la résolution pour mieux capter les basses
    fft.setInput(soundFile);  // Assurez-vous d'analyser soundFile avec FFT
  };

  p.draw = () => {
    fft.analyze();

    // Récupérer l'énergie des basses, médiums et aigus
    const bass = fft.getEnergy("bass");
    const mid = fft.getEnergy("mid");
    const treble = fft.getEnergy("treble");

    // Mappage de l'énergie des basses, médiums et aigus pour la luminosité
    const bassBrightness = p.map(bass, 0, 255, 0.7, 2.1); // Basses plus réactives
    const midBrightness = p.map(mid, 0, 255, 0.5, 0.7);   // Médiums avec un léger effet
    const trebleBrightness = p.map(treble, 0, 255, 0.1, 1.5); // Aigus plus subtils

    // Comparer les valeurs de la fréquence actuelle avec la précédente pour l'effet de mouvement
    // Initialisation de la luminosité cible en fonction des variations de fréquence
    let newBrightness = 1; // Valeur par défaut

    const bassChange = Math.abs(bass - previousBass);
    const midChange = Math.abs(mid - previousMid);
    const trebleChange = Math.abs(treble - previousTreble);

    if (bassChange > midChange && bassChange > trebleChange) {
      newBrightness = bassBrightness;
    } else if (midChange > bassChange && midChange > trebleChange) {
      newBrightness = midBrightness;
    } else if (trebleChange > bassChange && trebleChange > midChange) {
      newBrightness = trebleBrightness;
    }

    // Appliquer l'effet de transition linéaire pour lisser les changements de luminosité
    currentBrightness += (newBrightness - currentBrightness) * easing;  // Interpolation linéaire

    // Appliquer la luminosité au body
    document.body.style.filter = `brightness(${currentBrightness})`;

    // Sauvegarder les valeurs actuelles pour la comparaison dans la prochaine itération
    previousBass = bass;
    previousMid = mid;
    previousTreble = treble;
  };

  p.windowResized = () => {
    p.resizeCanvas(p.windowWidth, p.windowHeight);
  };
};

// Créer une instance p5
new p5(s);

 


    // Fonction pour changer le volume de soundFile
    function changeVolume(newVolume) {
      if (soundFile) {
        soundFile.setVolume(newVolume);  // Modifier le volume de soundFile
        console.log('Volume changé à :', newVolume);  // Affiche le nouveau volume
      } else {
        console.log('Aucun fichier audio n\'est en cours de lecture.');
      }
    }

  </script>

<script>

    
    // Fonction pour démarrer la musique avec fondu et afficher le contenu
    document.getElementById("enterButton").addEventListener("click", function() {

        
        const audioPlayer = document.getElementById("audio-player");
        const preloader = document.getElementById("preloader");
        const outerframe = document.getElementById("outer-frame");
        const blackbox = document.getElementById("blackbox");
        const clickSound = document.getElementById("click-sound");
        const hoverSound = document.getElementById("hover-sound");
        
        
        
        clickSound.volume = 0.5;
        // Joue le son du clic
        clickSound.play();

        // Affiche le contenu après 2 secondes
        setTimeout(() => {
            
            // Applique un fondu en démarrant la musique à 0
             // commence à 0
            
           
          
       

            setTimeout(() => {
                changeSong();
                preloader.style.opacity = 0;
                
            }, 1500);

           





        
            
            // Fait disparaitre le preloader avec un fadeOut
            //
            blackbox.style.opacity = 1;
            setTimeout(() => {
                blackbox.style.opacity = 0;
                
                $(".outer-frame").toggle();
                //$("#chains").toggle();
                     // Après 2 secondes, on commence à augmenter le volume progressivement
            let volume = 0;
          

            }, 2000);

           preloader.style.pointerEvents = 'none'; 
            //
           
           
            

            // Affiche le contenu (outerframe)
           
            setTimeout(() => {
                outerframe.style.opacity = 1;
                outerframe.style.transition = "opacity 1s ease";
            }, 1000);

                


        }, 1); // Attends 2 secondes avant de démarrer le fondu de musique
    });

    function AnimLeft() {
    // Supprimer les classes d'animation existantes avant de les réappliquer
    $('#titleChamp').removeClass('animate-slide animate-slide-out');

    // Appliquer l'animation "animate-slide" immédiatement
    $('#titleChamp').addClass('animate-slide');

    // Après 7.5 secondes, retirer l'animation "animate-slide" et appliquer "animate-slide-out"
    setTimeout(() => {
        $('#titleChamp').removeClass('animate-slide');
        $('#titleChamp').addClass('animate-slide-out');

        // Retirer l'animation "animate-slide-out" après la fin de l'animation
        setTimeout(() => {
            $('#titleChamp').removeClass('animate-slide-out');
        }, 1000); // Durée de l'animation "animate-slide-out"
    }, 7500); // Durée de l'animation "animate-slide"
}

function startAnimationLoop() {
    function runAnimation() {
        AnimLeft();

        // Générer un délai aléatoire entre 10 et 20 secondes
        const randomDelay = Math.floor(Math.random() * (20000 - 10000 + 1)) + 10000;

        // Planifier la prochaine exécution
        setTimeout(runAnimation, randomDelay);
    }

    runAnimation(); // Lancer la première animation
}

// Démarrer la boucle
startAnimationLoop();

    // Ajoute un son au hover du bouton
    document.getElementById("enterButton").addEventListener("mouseenter", function() {
        const hoverSound = document.getElementById("hover-sound");
        hoverSound.volume = 0.015;
        hoverSound.play();
    });
</script>

<script>
    $(document).ready(function() {

        $('#reloadsong').click(function() {
      changeSong();  // Exécute la fonction changeSong()
    });


    const $rightarrow = $('.right_arrow');

    $rightarrow.hover(
                function() {
                    // Changer l'image au survol
                    $(this).attr('src', 'imgs/right_arrow_h.png');
                },
                function() {
                    // Revenir à l'image par défaut
                    $(this).attr('src', 'imgs/right_arrow.png');
                }
            );

      // Sélectionner l'élément du songicon et l'élément audio
      const audioPlayer = $('#audio-player')[0]; // Utilise [0] pour accéder à l'objet DOM natif
      const songIcon = $('#songicon');
  
      // Ajouter un événement 'click' sur songicon
      songIcon.click(function() {
        // Si la musique est en cours de lecture, la mettre en pause et changer l'icône
        if (!audioPlayer.paused) {
          audioPlayer.pause(); // Mettre la musique en pause
          songIcon.removeClass('fa-volume-down').addClass('fa-volume-mute'); // Changer l'icône
        } else {
          audioPlayer.play(); // Reprendre la musique
          songIcon.removeClass('fa-volume-mute').addClass('fa-volume-down'); // Rétablir l'icône
        }
      });
    });
  </script>

<script>
    // Empêcher le zoom par pincement
    document.addEventListener('touchstart', function(e) {
        if (e.touches.length > 1) {
            e.preventDefault();  // Empêcher le geste de zoom
        }
    }, { passive: false });

    document.addEventListener('gesturestart', function(e) {
        e.preventDefault();  // Empêcher le geste de zoom sur certains navigateurs
    });

    // Si le navigateur essaie de redimensionner la fenêtre (écran mobile)
    window.addEventListener('resize', function() {
        document.documentElement.style.zoom = '100%';  // Force la taille du zoom à 100%
    });

    // Empêcher tout zoom au niveau du DOM
    document.documentElement.addEventListener('wheel', function(e) {
        if (e.ctrlKey) {
            e.preventDefault();  // Empêcher le zoom avec la molette
        }
    });
</script>

<script>
    // Empêcher le zoom via Ctrl + molette de la souris
    document.addEventListener('wheel', function(e) {
        if (e.ctrlKey) {
            e.preventDefault(); // Empêche le zoom via Ctrl + molette
        }
    }, { passive: false });
</script>

<script>
    // Empêcher le zoom via Ctrl + '+' et Ctrl + '-'
    document.addEventListener('keydown', function(e) {
        if (e.ctrlKey && (e.key === '+' || e.key === '-' || e.key === 'Equal' || e.key === 'Minus')) {
            e.preventDefault(); // Empêche le zoom avec Ctrl + '+' ou Ctrl + '-'
        }
    });
</script>


<script>

    
     // Liste des vidéos et leurs images associées
     const sideImage = document.getElementById('titleChamp'); // L'image à animer
     const videoBackgroundSource = document.getElementById('videobgSource'); 

     const videoData = [
            { video: 'nw_vayne1.mp4', image: 'imgs/title/vayne.png' },
            { video: 'nw_viego2.mp4', image: 'imgs/title/viego.png' },
            { video: 'nw_yone2.mp4', image: 'imgs/title/yone.png' },
        ];


        let currentIndex = 0; // Indice pour suivre la vidéo actuelle
        let isAnimating = false; // Flag pour éviter les changements rapides

     // Fonction pour changer l'opacité de la vidéo et appliquer le fondu
     function fadeOutIn(videoPlayer, videoSource, selectedVideo, $titleChamp) {
        // Si une animation est déjà en cours, ne pas changer la vidéo
        if (isAnimating) return;

        isAnimating = true; // Définir le flag comme true pour empêcher les clics multiples

        // Appliquer un fondu sortant en diminuant l'opacité de la vidéo
        let opacity = 1;
        const fadeOutInterval = setInterval(() => {
            opacity -= 0.05; // Diminuer l'opacité à chaque intervalle
            $(videoPlayer).css('opacity', opacity);
            $('#titleChamp').css('opacity', opacity); // Appliquer également le fondu à l'image

            // Appliquer l'animation de slide out sur l'image
            $('#titleChamp').css('animation', 'slideAnimationOut 1s ease-in-out forwards');

            if (opacity <= 0) {
                clearInterval(fadeOutInterval); // Arrêter le fondu sortant

                // Mettre à jour la source de la vidéo
                $(videoSource).attr('src', selectedVideo.video);
                $(videoBackgroundSource).attr('src', selectedVideo.video);

                // Recharger la vidéo
                videoPlayer.load();
                videoBackground.load();

                // Appliquer le fondu entrant
                let fadeInOpacity = 0;
                $(videoPlayer).css('opacity', fadeInOpacity); // Démarrer avec opacité à 0
                $('#titleChamp').css('opacity', fadeInOpacity); // Démarrer avec opacité à 0 pour l'image

                // Animer l'image en utilisant l'animation CSS
                $('#titleChamp').css('animation', 'slideAnimation 1s ease-in-out forwards');

                const fadeInInterval = setInterval(() => {
                    fadeInOpacity += 0.05; // Augmenter l'opacité à chaque intervalle
                    $(videoPlayer).css('opacity', fadeInOpacity);
                    $('#titleChamp').css('opacity', fadeInOpacity); // Appliquer aussi au changement d'image
                    if (fadeInOpacity >= 1) {
                        clearInterval(fadeInInterval); // Arrêter le fondu entrant
                        isAnimating = false; // Réinitialiser le flag pour permettre un autre changement
                    }
                }, 50); // Intervalle de temps pour augmenter l'opacité
            }
        }, 50); // Intervalle de temps pour diminuer l'opacité
    }


       // Fonction pour charger une vidéo aléatoire
    function loadRandomVideo() {
        const randomIndex = Math.floor(Math.random() * videoData.length);
        const selectedVideo = videoData[randomIndex];
        const sideImage = document.getElementById('titleChamp'); // L'image à animer
        const videoPlayer = document.getElementById('bgvideo');
        const videoBackground = document.getElementById('videoBackground');
        const videoBackgroundSource = document.getElementById('videobgSource'); 
        const videoSource = document.getElementById('bgSource');

       
        fadeOutIn(videoBackground, videoBackgroundSource, selectedVideo);
        fadeOutIn(videoPlayer, videoSource, selectedVideo);
        updateImage(selectedVideo.image);
    }

    // Fonction pour charger la vidéo suivante dans la liste
    function loadNextVideo() {
        currentIndex = (currentIndex + 1) % videoData.length; // Utilisation du modulo pour revenir au début de la liste
        const selectedVideo = videoData[currentIndex];

        const videoPlayer = document.getElementById('bgvideo');
        const videoSource = document.getElementById('bgSource');

        fadeOutIn(videoPlayer, videoSource, selectedVideo);
        updateImage(selectedVideo.image);
    }

    // Fonction pour changer l'image associée
    function updateImage(imageSrc) {
        const associatedImage = document.getElementById('titleChamp');
        associatedImage.src = imageSrc;
    }




        // Charger une vidéo et l'image associée au chargement de la page
        window.onload = loadRandomVideo;

        loadRandomVideo();
</script>






<script>
    // Sélectionner le cercle et le point
    const cursorCircle = document.querySelector('.cursor-circle');
    const cursorPoint = document.querySelector('.cursor-point');
    const interactiveElements = document.querySelectorAll('button, a');

    let cursorPosition = { x: 0, y: 0 };
    let lastPosition = { x: 0, y: 0 };

    // Suivre la position du curseur avec un léger délai pour l'animation fluide (cercle uniquement)
    function moveCursor() {
      const delayFactor = 0.08; // Plus faible = plus rapide (0.1 = délai léger)

      // Calculer la position avec un léger délai pour un mouvement fluide
      lastPosition.x += (cursorPosition.x - lastPosition.x) * delayFactor;
      lastPosition.y += (cursorPosition.y - lastPosition.y) * delayFactor;

      // Assurer que le cercle est centré sur la souris
      cursorCircle.style.left = `${lastPosition.x}px`;
      cursorCircle.style.top = `${lastPosition.y}px`;

      // Le point suit immédiatement la souris
      cursorPoint.style.left = `${cursorPosition.x}px`;
      cursorPoint.style.top = `${cursorPosition.y}px`;

      requestAnimationFrame(moveCursor);
    }

    // Mise à jour de la position du curseur lorsque l'utilisateur bouge la souris
    document.addEventListener('mousemove', (e) => {
      cursorPosition.x = e.pageX;
      cursorPosition.y = e.pageY;
    });

    // Ajouter une classe "hovered" quand le curseur survole un élément interactif
    interactiveElements.forEach((element) => {
      element.addEventListener('mouseenter', () => {
        cursorCircle.classList.add('hovered');
      });
      element.addEventListener('mouseleave', () => {
        cursorCircle.classList.remove('hovered');
      });
    });

    // Commencer le mouvement du curseur avec un léger délai
    moveCursor();
  </script>

<script>
    async function afficherCompteur() {
        try {
            const response = await fetch('config.php'); // Appelle le script PHP
            const data = await response.json(); // Parse la réponse JSON
            document.getElementById('compteur').innerText = 
                `VISITORS : ${data.total_visiteurs}`;
        } catch (error) {
            console.error('Error (contact Nanow)', error);
        }
    }

    // Appeler la fonction au chargement de la page
    window.onload = afficherCompteur;
</script>


<script>
    
    document.addEventListener('dragstart', function(e) {
      e.preventDefault();
    });
  
    
    document.querySelectorAll('*').forEach(function(element) {
      element.setAttribute('draggable', 'false');
    });

    document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
  });
  </script>


</html>