<!--                                                                                                             
               ████                                                                           ████               
             ███                                                                                 ███             
           ███                                        ██                                           ███           
        ████                                          ██                                             ████        
      ████                                                                                             ████      
    ████                                                                                                 ████    
  █████████████████████     ██               ████     ██    █████████████   █████████     █████████████████████  
                 ████     ████             ██████     ██              ███                   ████                 
               ███      ████             ███   ██     ██            ███                       ████               
             ███      ████             ███     ██     ██         ████       ███████████████      ███             
          ████      ███              ████████████     ██       ████                                ███           
        ████      ███              ███         ██     ██     ████                                    ████        
      ████      ██████████████  ████           ██     ██   ██████████████   ████████████████████       ████      
                                                                                                                 
       ██ INITIATING CONNECTION ██ TARGET: SLAIZEN.COM ██ ACCESSING CODEBASE ██ CONNECTION ESTABLISHED ██        
                                         ██ WELCOME TO THE UNDER-GRID ██                                         
      21  06    2007                                                                        08  10   1992        
         19 12 1 9 26 5 14                                                           10  9  13 13  25            
            14  5 26 9 1 12 19                                                 18 9 22  1 18 4  53853            
                  16   9 18  1  20 5                                       14 9 14 10  1                         
                      08       2724483                                   636679      76883647                    
              08 27328466  08       3335                              0 5683      08  08 3668466                 
          152883 65        85 38 7  77 34 3                           17     74   79      8    95697             
        96977   81         7817  53       1                          9     9   15          8    8 38895          
                8    4Ω4    8  2   3                                     8  17     3♎︎3    1    3                
           8    58          8    8   6                                 7   4   8           8    2                
            7    18       78     2 2                                  9  3 8    82       88    8                 
              2    7888883      8    1                                 287  2      88885    39                   
                08 1916918920                                                168251993112                        
-->
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <script>
        /* Immediate Language Detection to prevent FOUT */
        (function () {
            const savedLang = localStorage.getItem('selectedLanguage') || 'fr';
            document.documentElement.lang = savedLang;
            if (savedLang === 'en') {
                document.documentElement.classList.add('i18n-loading');
                setTimeout(function () {
                    document.documentElement.classList.remove('i18n-loading');
                }, 1000);
            }
        })();
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mes Favoris du vieux Web - Détails</title>
	<link rel="icon" type="image/x-icon" href="../favicon.ico">
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                       ██ ACCESSING: CSS CORE ██                                       ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
    <link rel="stylesheet" href="../coreSystem/interface.css">
    <link rel="stylesheet" href="../coreSystem/auth.css">
    <link rel="stylesheet" href="../coreSystem/modals.css">
    <link rel="stylesheet" href="../coreSystem/comments.css">
    <link rel="stylesheet" href="../coreSystem/notifications.css">
    <link rel="stylesheet" href="../coreSystem/profiles.css">
    <style>
        .floating-surf {
            position: fixed;
            bottom: 10px;
            right: 25px;
            width: 350px;
            height: auto;
            z-index: 2002;
            pointer-events: none;
            animation: floatEffect 3s ease-in-out infinite;
            filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.15));
        }

        .floating-morla {
            position: fixed;
            bottom: 350px;
            right: 75px;
            width: 90px;
            height: auto;
            z-index: 2000;
            pointer-events: none;
            animation: floatEffect 5s ease-in-out infinite;
            animation-delay: -1.5s;
            filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.12));
            opacity: 0.85;
        }

        .mediaplayer-container {
            position: fixed;
            bottom: 20px;
            right: 30px;
            z-index: 2010;
            animation: floatEffectMinor 5s ease-in-out infinite;
            pointer-events: none;
            display: flex;
            align-items: center;
            flex-direction: row;
            gap: 15px;
        }

        .floating-mediaplayer {
            width: 120px;
            height: auto;
            cursor: pointer;
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
            transition: all 0.2s ease-in-out;
            pointer-events: auto;
            display: block;
        }

        .floating-mediaplayer:hover {
            transform: scale(1.08) !important;
            filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
        }

        .floating-mediaplayer:active {
            transform: scale(0.96) !important;
            filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
        }



        .rotation-wrapper {
            transition: transform 0.3s ease;
        }

        .rotation-wrapper.rotating {
            animation: spinning 4s linear infinite;
        }

        @keyframes spinning {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .audio-monitor {
            width: 250px;
            height: 100px;
            background: transparent;
            border: none;
            margin: 0;
            display: none;
            overflow: visible;
            pointer-events: none;
        }

        .audio-monitor canvas {
            width: 100%;
            height: 70px; /* Reduced to leave space for text */
            display: block;
        }

        .track-box {
            width: 180px;
            height: 20px;
            margin: 5px -50px 5px auto;
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(34, 255, 34, 0.5);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: inset 0 0 8px rgba(0,0,0,0.8), 0 0 10px rgba(34, 255, 34, 0.1);
            position: relative;
            display: flex;
            align-items: center;
        }

        .track-display {
            color: #22ff22;
            font-family: 'Consolas', 'Courier New', monospace;
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
            white-space: nowrap;
            animation: marquee 12s linear infinite;
            padding-left: 100%;
            height: 20px;
            line-height: 20px;
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }

        .floating-sims {
            position: fixed;
            bottom: 360px;
            right: 220px;
            width: 62px;
            height: auto;
            z-index: 2005;
            pointer-events: none;
            animation: floatEffect 3s ease-in-out infinite;
            filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.15)) drop-shadow(0 0 10px rgba(0, 255, 0, 0.3));
        }

        .static-stickfigure {
            position: fixed;
            bottom: 85px;
            left: 35px;
            width: 80px;
            height: auto;
            z-index: 2001;
            pointer-events: none;
            transform: rotate(-15deg);
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
            opacity: 0.9;
        }

        @keyframes floatEffectMinor {

            0%,
            100% {
                transform: translateY(0) rotate(1deg);
            }

            50% {
                transform: translateY(-8px) rotate(-1deg);
            }
        }

        @keyframes floatEffect {

            0%,
            100% {
                transform: translateY(0) rotate(2deg);
            }

            50% {
                transform: translateY(-20px) rotate(-2deg);
            }
        }

        .side-column {
            position: fixed;
            top: 20px;
            bottom: 20px;
            width: 100px;
            background-image: url('colomn.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            z-index: 500;
            pointer-events: none;
            filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
        }

        .column-left {
            left: 40px;
        }

        .column-right {
            right: 40px;
            transform: scaleX(-1);
        }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), #f0f2f5 url('background.png') fixed;
            background-size: cover;
            color: #1a1a1a;
            padding: 30px 180px 0;
            margin: 0;
            line-height: 1.5;
        }

        header {
            max-width: 850px;
            margin: 0 auto 15px auto;
            border-left: 6px solid #2b5797;
            padding-left: 25px;
            display: flex;
            align-items: center;
            gap: 30px;
        }

        .header-logo {
            width: 150px;
            height: auto;
            flex-shrink: 0;
            filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
            animation: rotate3d 8s linear infinite;
            transform-style: preserve-3d;
        }

        @keyframes rotate3d {
            from {
                transform: rotateY(0deg);
            }

            to {
                transform: rotateY(360deg);
            }
        }

        .header-text {
            display: flex;
            flex-direction: column;
        }

        h1 {
            font-size: 48px;
            font-weight: 800;
            color: #2b5797;
            margin: 0;
            letter-spacing: -1px;
            line-height: 1.1;
        }

        /* Navigation Tabs */
        .museum-nav {
            max-width: 850px;
            margin: 0 auto 20px auto;
            display: flex;
            gap: 15px;
        }

        .nav-tab {
            padding: 12px 35px;
            background: #e0e4eb;
            border: 1px solid #c8cedb;
            border-radius: 8px;
            color: #555;
            font-weight: 700;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 12px;
            height: 48px;
        }

        .nav-tab.active {
            background: #2662dd;
            color: white;
            border-color: #2662dd;
            box-shadow: 0 4px 12px rgba(38, 98, 221, 0.25);
        }

        .nav-tab:hover:not(.active) {
            background: #d1d9e6;
            transform: translateY(-2px);
        }

        .category-section {
            max-width: 850px;
            margin: 0 auto 10px auto;
        }

        .category-title {
            font-size: 18px;
            color: #4a4a4a;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            border-bottom: 2px solid #c8cedb;
            padding-bottom: 0;
            margin-bottom: 8px;
        }

        .site-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .site-entry {
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid #d1d9e6;
            border-radius: 10px;
            padding: 10px;
            display: flex;
            flex-direction: row;
            gap: 15px;
            align-items: flex-start;
            transition: all 0.2s ease-in-out;
            position: relative;
            cursor: pointer;
        }

        .site-gif-overlay {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 150px;
            height: auto;
            z-index: 1000;
            filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.3));
            pointer-events: none;
        }

        .site-gif-left {
            left: -110px;
        }

        .site-gif-right {
            right: -110px;
        }

        .site-entry:hover {
            box-shadow: 0 8px 25px rgba(43, 87, 151, 0.08);
            border-color: #2b5797;
        }

        @keyframes stupidBounceSquash {

            0%,
            20%,
            40%,
            60%,
            100% {
                transform: translateY(-50%) scale(1);
            }

            10% {
                transform: translateY(-75%) scale(1);
            }

            30% {
                transform: translateY(-75%) scale(1);
            }

            70% {
                transform: translateY(-40%) scale(1.1, 0.7);
            }

            80% {
                transform: translateY(-50%) scale(1);
            }
        }

        .stupid-logo-anim {
            animation: stupidBounceSquash 3s ease-in-out infinite;
        }

        .skeleton-anim {
            width: 130px !important;
            animation: skeletonLaugh 2s steps(15) infinite;
            transform-origin: bottom center;
        }

        @keyframes skeletonLaugh {

            0%,
            10%,
            20%,
            30%,
            40% {
                transform: translateY(-58%) scale(1, 1);
            }

            5%,
            15%,
            25%,
            35% {
                transform: translateY(-58%) scale(1.1, 0.9);
            }

            41%,
            100% {
                transform: translateY(-58%) scale(1, 1);
            }
        }

        .rating-stars {
            color: #fbc02d;
            font-size: 18px;
            margin-left: 12px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }

        .site-years {
            font-size: 14px;
            color: #999;
            font-weight: bold;
            margin-left: 6px;
            font-family: 'Consolas', monospace;
            background: #f4f4f4;
            padding: 1px 4px;
            border-radius: 4px;
            border: 1px solid #ddd;
        }

        .preview-container {
            width: 210px;
            flex-shrink: 0;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow: hidden;
            background: #000;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .preview-img {
            width: 100%;
            height: 115px;
            object-fit: cover;
            object-position: top;
            display: block;
        }

        .entry-content {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex-grow: 1;
        }

        .entry-header {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .favicon {
            width: 28px;
            height: 28px;
            border-radius: 4px;
            background: #f8f9fa;
        }

        .site-name {
            font-size: 20px;
            font-weight: 700;
            color: #2b5797;
        }

        .url-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .site-url {
            font-size: 13px;
            color: #2e7d32;
            font-family: 'Consolas', monospace;
            background: #e8f5e9;
            padding: 5px 12px;
            border-radius: 6px;
            text-decoration: none;
            border: 1px solid #c8e6c9;
            transition: all 0.2s;
        }

        .site-url:hover {
            background: #c8e6c9;
            transform: translateY(-1px);
        }

        .modern-url {
            color: #2b5797;
            background: #e1f5fe;
            border-color: #b3e5fc;
        }

        .site-desc {
            font-size: 15px;
            color: #4a4a4a;
            margin: 0;
        }

        .personal-note {
            background: #fff9c4;
            border-left: 4px solid #fbc02d;
            padding: 10px 15px;
            font-size: 13px;
            font-style: italic;
            color: #5d4037;
            margin-top: 5px;
        }

        .play-overlay {
            position: absolute;
            bottom: 35%;
            left: 50%;
            transform: translate(-50%, 50%);
            width: 40px;
            height: 40px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            pointer-events: none;
        }

        .site-grid {
            display: flex;
            gap: 15px;
            margin-top: 5px;
        }

        .site-entry.mini {
            flex: 0 0 auto;
            flex-direction: row;
            padding: 8px 15px;
            gap: 10px;
            background: #fff;
            min-height: auto;
        }

        .site-entry.mini .entry-content {
            padding: 0;
            flex: 0 0 auto;
        }

        .site-entry.mini .entry-header {
            gap: 10px;
        }

        .site-entry.mini .site-name {
            font-size: 14px;
        }

        .site-entry.mini .favicon {
            width: 20px;
            height: 20px;
        }

        .rotating-earth {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 70%);
            width: 155vw;
            max-width: 2900px;
            z-index: -1;
            pointer-events: none;
            opacity: 0.85;
            animation: rotateEarth 450s linear infinite;
            filter: drop-shadow(0 0 110px rgba(0, 100, 255, 0.45));
        }

        .limewire-launcher-container {
            position: fixed;
            top: 150px;
            right: -100px;
            z-index: 9999;
            pointer-events: none;
        }

        .limewire-rotation-wrapper {
            animation: slowRotate 35s linear infinite;
        }

        @keyframes slowRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .limewire-launcher {
            width: 200px;
            height: 200px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
            pointer-events: none;
            display: block;
        }

        .limewire-launcher:hover {
            transform: scale(1.1);
            filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.3));
        }

        .limewire-launcher:active {
            transform: scale(0.92);
        }

        @keyframes rotateEarth {
            from {
                transform: translate(-50%, 70%) rotate(0deg);
            }

            to {
                transform: translate(-50%, 70%) rotate(360deg);
            }
        }

        /* ============================================
           BAS DE PAGE (FOOTER)
           ============================================ */
        .site-footer {
            width: 100%;
            margin-top: 10px;
            padding-bottom: 10px;
            text-align: center;
            position: relative;
            z-index: 5;
        }

        .footer-line {
            max-width: 850px;
            margin: 40px auto 0 auto;
            height: 2px;
            background: #c8cedb;
        }

        .footer-text {
            display: inline-block;
            font-family: 'Consolas', monospace;
            font-size: 13px;
            font-weight: bold;
            color: #2b5797;
            background: #e1f5fe;
            padding: 5px 15px;
            border-radius: 6px;
            border: 1px solid #b3e5fc;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-decoration: none;
            transition: all 0.2s;
            opacity: 0.85;
            cursor: default;
        }

        .footer-text:hover {
            opacity: 1;
            background: #b3e5fc;
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(43, 87, 151, 0.1);
        }

        /* --- Windows XP Luna Button Style (Auth) --- */
        #auth-nav .btn {
            background: linear-gradient(to bottom, #7ba2f7 0%, #5b8bf7 5%, #4a7ff0 14%, #2662dd 28%, #2662dd 41%, #2662dd 57%, #1e4fc7 71%, #1a47b3 89%, #1640a1 100%) !important;
            border: 1px solid #003c74 !important;
            border-radius: 4px !important;
            color: #ffffff !important;
            font-family: 'Tahoma', 'Verdana', sans-serif !important;
            font-size: 11px !important;
            font-weight: bold !important;
            padding: 2px 15px !important;
            height: 23px !important;
            line-height: 18px !important;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) !important;
            box-shadow: inset 1px 1px 1px #ffffff, 
                        inset -1px -1px 1px rgba(0,0,0,0.1) !important;
            transition: none !important;
            text-transform: none !important;
            letter-spacing: normal !important;
            margin: 0 4px !important;
            cursor: pointer;
            box-sizing: border-box !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        #auth-nav .btn:hover {
            background: linear-gradient(to bottom, #7ba2f7 0%, #6b9cf5 5%, #5b8bf7 14%, #4a7ff0 28%, #3a6df0 41%, #2662dd 57%, #2662dd 71%, #1e4fc7 89%, #1a47b3 100%) !important;
            box-shadow: inset 1px 1px 1px #ffffff, 
                        inset -1px -1px 1px rgba(0,0,0,0.1),
                        0 0 2px #e59700 !important;
            border-color: #003c74 !important;
        }

        #auth-nav .btn:focus {
            outline: 1px dotted #ffffff !important;
            outline-offset: -4px !important;
        }

        #auth-nav .btn:active {
            background: linear-gradient(to bottom, #1640a1 0%, #1a47b3 11%, #1e4fc7 29%, #2662dd 43%, #2662dd 59%, #2662dd 72%, #4a7ff0 86%, #5b8bf7 95%, #7ba2f7 100%) !important;
            box-shadow: none !important;
            padding-top: 3px !important;
            padding-left: 16px !important;
        }

        /* Notifications & Profile Specific XP look */
        #auth-nav .btn-notifications {
            font-size: 13px !important;
            padding: 0 6px !important;
        }

        #auth-nav .btn-lang {
            background: linear-gradient(to bottom, #e3e3e3 0%, #d6d6d6 100%) !important;
            color: #333 !important;
            border-color: #707070 !important;
            text-shadow: none !important;
        }

        #auth-nav-container {
            position: relative;
            z-index: 10000;
        }

        #auth-nav .auth-nav {
            padding: 10px 20px 0 0 !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        #auth-nav #login-btn {
            min-width: 90px;
        }

        #auth-nav #lang-toggle-btn {
            min-width: 45px;
        }
    </style>
</head>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                      ██ ACCESSING: LOCAL PAGE ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<body>
    <div id="auth-nav-container"></div>
    <div class="side-column column-left"></div>
    <div class="side-column column-right"></div>
    <img src="earth.png" alt="Earth" class="rotating-earth">
    <img src="morla.png" alt="Morla" class="floating-morla">
    <img src="sims-crystal.gif" alt="Sims Crystal" class="floating-sims">
    <img src="surf.png" alt="Surf" class="floating-surf">
    <img src="stickfigure.gif" alt="Stickfigure" class="static-stickfigure">
    <div class="limewire-launcher-container">
        <div class="limewire-rotation-wrapper">
            <img id="limewireLauncher" src="logo_limewire.png" class="limewire-launcher"
                title="Limewire - Decorative Icon">
        </div>
    </div>

    <div class="mediaplayer-container">
        <div id="audioMonitor" class="audio-monitor">
            <canvas id="waveform"></canvas>
            <div class="track-box">
                <div id="trackDisplay" class="track-display">Chargement...</div>
            </div>
        </div>
        <div id="rotationWrapper" class="rotation-wrapper">
            <img src="logo_mediaplayer.png" alt="Media Player" class="floating-mediaplayer" onclick="toggleMusic(this)"
                title="Activer/Désactiver la musique">
        </div>
    </div>
    <header>
        <img src="Internet-Explorer-Logo-2005.png" alt="IE Logo" class="header-logo">
        <div class="header-text">
            <h1>
                <span class="lang-fr">L'Archive du vieux Web</span>
                <span class="lang-en">The Old Web Archive</span>
            </h1>
            <p style="color: #666; margin-top: 5px; font-size: 20px;">
                <span class="lang-fr">Ma collection personnelle de sites vintage.</span>
                <span class="lang-en">My personal collection of vintage sites.</span>
            </p>
        </div>
    </header>

    <div class="museum-nav">
        <button class="nav-tab active" onclick="showCategory('sites')">
            <span>🌐</span>
            <span class="lang-fr">Sites Web</span>
            <span class="lang-en">Websites</span>
        </button>
        <button class="nav-tab" onclick="showCategory('videos')">
            <span>📽️</span>
            <span class="lang-fr">Vidéos</span>
            <span class="lang-en">Videos</span>
        </button>
    </div>

    <!-- Sites Web -->
    <div id="sites-content" class="content">
        <!-- Classique -->
        <section class="category-section">
            <h2 class="category-title">
                <span class="lang-fr">Classique</span>
                <span class="lang-en">Classic</span>
            </h2>
            <div class="site-list">
                <div class="site-entry" onclick="openArchive('lapatate.com/index.html', 'center')">
                    <div class="preview-container">
                        <img src="lapatate.com/preview.webp" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="lapatate.com/favicon.ico" class="favicon" alt="Icon">
                            <span class="site-name">LaPatate.com</span>
                            <span class="rating-stars">★★★★☆</span>
                            <a href="https://www.lapatate.fr/" target="_blank" class="site-url modern-url"
                                onclick="event.stopPropagation()" style="margin-left: auto;">
                                <span class="lang-fr">Site actuel : lapatate.fr</span>
                                <span class="lang-en">Current site: lapatate.fr</span>
                            </a>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Un classique incontournable du web français, simple et efficace.</span>
                            <span class="lang-en">An essential classic of the French web, simple and effective.</span>
                        </p>
                    </div>
                </div>
                <div class="site-entry" onclick="openArchive('perdu.com/index.html', 'off')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/http://www.perdu.com/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="perdu.com/favicon.ico" class="favicon" alt="Icon">
                            <span class="site-name">Perdu.com</span>
                            <span class="site-years">[1998-2026]</span>
                            <span class="rating-stars">★★★☆☆</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Le seul site qui ne vous décevra jamais : tout est possible sur Perdu.com.</span>
                            <span class="lang-en">The only site that will never disappoint you: anything is possible on Perdu.com.</span>
                        </p>
                    </div>
                </div>
            </div>

            <!-- 3rd Row: Extra Sites (Side by side) -->
            <div class="site-grid">
                <!-- Zombo.com -->
                <div class="site-entry mini" onclick="window.open('https://zombo.com/', '_blank')">
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=zombo.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Zombo.com</span>
                        </div>
                    </div>
                </div>

                <!-- End Of The Inter -->
                <div class="site-entry mini" onclick="window.open('https://endoftheinter.net/', '_blank')">
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=endoftheinter.net&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">EOTI</span>
                        </div>
                    </div>
                </div>

                <!-- HMPG.net -->
                <div class="site-entry mini" onclick="window.open('https://hmpg.net/', '_blank')">
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=hmpg.net&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">HMPG.net</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Humour Québécois -->
        <section class="category-section">
            <h2 class="category-title">
                <span class="lang-fr">Humour Québécois</span>
                <span class="lang-en">Quebec Humor</span>
            </h2>
            <div class="site-list">
                <div class="site-entry" onclick="window.open('https://tomchums.blogspot.com/', '_blank')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/http://tomchums.blogspot.com/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=tomchums.blogspot.com&sz=32"
                                class="favicon" alt="Icon">
                            <span class="site-name">Tom et ses Chums</span>
                            <span class="site-years">[2004-2011]</span>
                            <span class="rating-stars">★★★★★</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Le blog officiel de Tom et ses Chums, avec toutes les dernières nouvelles sur leurs productions.</span>
                            <span class="lang-en">The official blog of Tom et ses Chums, with all the latest news on their productions.</span>
                        </p>
                    </div>
                </div>
                <div class="site-entry" onclick="openArchive('lestupidshow.com/index.html', 'top center')">
                    <div class="preview-container">
                        <img src="lestupidshow-preview.webp" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="lestupidshow.com/stupid.jpg" class="favicon" alt="Icon">
                            <span class="site-name">LeStupidShow.com</span>
                            <span class="site-years">[2006-2008]</span>
                            <span class="rating-stars">★★★★☆</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Un site de vidéos et d'animations flash absurdes qui a fait fureur au milieu des années 2000.</span>
                            <span class="lang-en">An absurd flash video and animation site that was a huge hit in the mid-2000s.</span>
                        </p>
                    </div>
                    <img src="lestupidshow-website.webp" class="site-gif-overlay site-gif-right stupid-logo-anim">
                </div>
                <div class="site-entry" onclick="openArchive('follerie.com/index.html', 'top center')">
                    <div class="preview-container">
                        <img src="preview-follerie.com.webp" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="follerie.com/favicon.ico" class="favicon" alt="Icon">
                            <span class="site-name">Follerie.com</span>
                            <span class="site-years">[2003-2009]</span>
                            <span class="rating-stars">★★★★☆</span>
                            <a href="http://follerie.com/" target="_blank" class="site-url modern-url"
                                onclick="event.stopPropagation()" style="margin-left: auto;">
                                <img src="https://www.google.com/s2/favicons?domain=follerie.com&sz=16"
                                    style="width:12px; height:12px; vertical-align:middle; margin-right:4px; margin-bottom:2px;">
                                <span class="lang-fr">Site actuel : follerie.com</span>
                                <span class="lang-en">Current site: follerie.com</span>
                            </a>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Un site d'humour quebecois culte qui a marqué toute une epoque du web.</span>
                            <span class="lang-en">A cult Quebec humor site that marked an entire era of the web.</span>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Humour Français -->
        <section class="category-section">
            <h2 class="category-title">
                <span class="lang-fr">Humour Français</span>
                <span class="lang-en">French Humor</span>
            </h2>
            <div class="site-list">
                <div class="site-entry" onclick="openArchive('ledemondurire/index.html', 'off')">
                    <div class="preview-container">
                        <img src="ledemondurire-preview.webp" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=ledemondurire.free.fr&sz=32"
                                class="favicon" alt="Icon">
                            <span class="site-name">LeDemonDuRire.org</span>
                            <span class="site-years">[2002-2007]</span>
                            <a href="http://ledemondurire.free.fr/edito.php" target="_blank" class="site-url modern-url"
                                onclick="event.stopPropagation()" style="margin-left: auto;">
                                <img src="https://www.google.com/s2/favicons?domain=ledemondurire.free.fr&sz=16"
                                    style="width:12px; height:12px; vertical-align:middle; margin-right:4px; margin-bottom:2px;">
                                <span class="lang-fr">Site actuel : ledemondurire.free.fr</span>
                                <span class="lang-en">Current site: ledemondurire.free.fr</span>
                            </a>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">L'ancien site du vidéaste cinéma Durendal, un portail d'humour proposant des images, blagues et vidéos absurdes de l'époque.</span>
                            <span class="lang-en">The former site of cinema videographer Durendal, a humor portal offering absurd images, jokes, and videos from the era.</span>
                        </p>
                    </div>
                    <img src="ledemondurire-website.webp" class="site-gif-overlay site-gif-left skeleton-anim">
                </div>
                <div class="site-entry" onclick="openArchive('wfanimation.com/index.htm', 'off')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/http://wfanimation.fr.free.fr/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=wfanimation.fr.free.fr&sz=32"
                                class="favicon" alt="Icon">
                            <span class="site-name">WFAnimation</span>
                            <span class="site-years">[2006-2007]</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Un studio de création d'animations Flash déjantées, connu pour ses séries humoristiques et ses personnages absurdes comme Mr Shibby.</span>
                            <span class="lang-en">A studio for crazy Flash animations, known for its humorous series and absurd characters like Mr Shibby.</span>
                        </p>
                    </div>
                </div>
            </div>
        </section>



        <!-- Saga MP3 -->
        <section class="category-section">
            <h2 class="category-title">
                <span class="lang-fr">Saga MP3</span>
                <span class="lang-en">Audio Sagas</span>
            </h2>
            <div class="site-list">
                <div class="site-entry" onclick="openArchive('http://www.penofchaos.com/', 'off')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/http://www.penofchaos.com/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=penofchaos.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">PenOfChaos (Naheulbeuk)</span>
                            <span class="site-years">[2000-2026]</span>
                        </div>
                        <p class="personal-note">"ma beaucoup inspiré dans la création de jeu video et la création de
                            mon propre universe jadore parcourir tout ce que l'auteur avais mis en place..."</p>
                    </div>
                    <img src="website-penofchaos.gif" class="site-gif-overlay site-gif-right">
                </div>
                <div class="site-entry" onclick="openArchive('https://www.knarfworld.net', 'off')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/https://www.knarfworld.net?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=knarfworld.net&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Survivaure</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Le site officiel de Knarf et des aventures du Survivaure.</span>
                            <span class="lang-en">The official site of Knarf and the Survivaure adventures.</span>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Jeux Flash -->
        <section class="category-section">
            <h2 class="category-title">
                <span class="lang-fr">Jeux Flash</span>
                <span class="lang-en">Flash Games</span>
            </h2>
            <div class="site-list">
                <div class="site-entry" onclick="window.open('https://www.newgrounds.com/', '_blank')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/https://www.newgrounds.com/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=newgrounds.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Newgrounds</span>
                            <span class="site-years">[1998-2026]</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Le portail historique de la culture Flash. Jeux, animations, art et musique.</span>
                            <span class="lang-en">The historic portal of Flash culture. Games, animations, art, and music.</span>
                        </p>
                    </div>
                    <img src="website-newgrounds_pico.gif" class="site-gif-overlay site-gif-right">
                    <img src="website-newgrounds_madness.gif" class="site-gif-overlay site-gif-left">
                </div>
                <div class="site-entry" onclick="window.open('https://ici.radio-canada.ca/jeunesse', '_blank')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/https://ici.radio-canada.ca/jeunesse?w=600"
                            class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=radio-canada.ca&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Radio Canada</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">La zone jeunesse du site de Radio Canada pour les classiques quebequois.</span>
                            <span class="lang-en">The youth zone of the Radio Canada site for Quebec classics.</span>
                        </p>
                    </div>
                </div>
                <div class="site-entry" onclick="window.open('https://www.battleon.com/', '_blank')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/https://www.battleon.com/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=battleon.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Battleon (AQ)</span>
                        </div>
                        <p class="personal-note">
                            <span class="lang-fr">"Fireball ! Fireball ! Dafuk u playing ? Hum... c un jeu battleon"</span>
                            <span class="lang-en">"Fireball! Fireball! Dafuk u playing? Um... it's a battleon game"</span>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Naruto -->
        <section class="category-section">
            <h2 class="category-title">
                <span class="lang-fr">Naruto</span>
                <span class="lang-en">Naruto</span>
            </h2>
            <div class="site-list">
                <div class="site-entry" onclick="openArchive('http://www.captainaruto.com/', 'top center')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/https://www.captainaruto.com/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=captainaruto.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Captain Naruto</span>
                            <span class="site-years">[2005-2026]</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Actualité, scans et épisodes de Naruto au sommet de sa popularité.</span>
                            <span class="lang-en">News, scans, and episodes of Naruto at the height of its popularity.</span>
                        </p>
                    </div>
                </div>
                <div class="site-entry" onclick="openArchive('http://naruto.mx.free.fr/', 'off')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/http://naruto.mx.free.fr/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=naruto.mx.free.fr&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Naruto-MX</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Site communautaire sur l'univers Naruto.</span>
                            <span class="lang-en">Community site about the Naruto universe.</span>
                        </p>
                    </div>
                </div>
                <div class="site-entry"
                    onclick="openArchive('https://web.archive.org/web/20080305093156/http://www.japflap.com/', 'off')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/http://www.japflap.com/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=japflap.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">JapFlap</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">L'une des plus grandes références de l'époque pour les scans et dossiers Naruto.</span>
                            <span class="lang-en">One of the greatest references of the time for Naruto scans and files.</span>
                        </p>
                    </div>
                </div>
                <div class="site-entry" onclick="openArchive('http://www.wonaruto.com/', 'top center')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/http://www.wonaruto.com/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=wonaruto.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">WoNaruto</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Le portail de référence pour tout l'univers Naruto : News, dossiers et communauté.</span>
                            <span class="lang-en">The reference portal for the entire Naruto universe: News, files, and community.</span>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Rpg Maker -->
        <section class="category-section">
            <h2 class="category-title">
                <span class="lang-fr">Rpg Maker</span>
                <span class="lang-en">RPG Maker</span>
            </h2>
            <div class="site-list">
                <div class="site-entry" onclick="openArchive('http://www.rpg-creative.net/', 'off')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/http://www.rpg-creative.net/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=rpg-creative.net&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Rpg Créative</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">La vitrine du making francophone, une archive vivante de jeux amateurs.</span>
                            <span class="lang-en">The showcase of Francophone game making, a living archive of amateur games.</span>
                        </p>
                    </div>
                </div>
                <div class="site-entry" onclick="openArchive('http://rpgstory.free.fr/', 'off')">
                    <div class="preview-container">
                        <img src="https://s0.wp.com/mshots/v1/http://rpgstory.free.fr/?w=600" class="preview-img">
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=rpgstory.free.fr&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Rpg Story</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Histoires et tutoriels pour les passionnés de RPG Maker.</span>
                            <span class="lang-en">Stories and tutorials for RPG Maker enthusiasts.</span>
                        </p>
                    </div>
                </div>
            </div>
        </section>

    </div>

    <!-- Vidéos Content -->
    <div id="videos-content" class="content" style="display: none;">
        <!-- Tom et ses chums -->
        <section class="category-section">
            <h2 class="category-title" style="display: flex; justify-content: space-between; align-items: center;">
                <span class="lang-fr">Tom et ses chums</span>
                <span class="lang-en">Tom et ses Chums</span>
                <a href="https://tomchums.blogspot.com/" target="_blank" class="site-url modern-url"
                    style="font-size: 11px; text-transform: none; letter-spacing: normal;">
                    <span class="lang-fr">Site Officiel : tomchums.blogspot.com</span>
                    <span class="lang-en">Official Site: tomchums.blogspot.com</span>
                </a>
            </h2>
            <div class="site-list">
                <div class="site-entry" onclick="openArchive('https://www.youtube.com/embed/omG1JVac10A', 'off')">
                    <div class="preview-container">
                        <img src="https://img.youtube.com/vi/omG1JVac10A/mqdefault.jpg" class="preview-img">
                        <div class="play-overlay">▶</div>
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">TOM ET SES CHUMS EPISODE 01</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">L'épisode qui a tout lancé. Un classique absolu de l'humour absurde.</span>
                            <span class="lang-en">The episode that started it all. An absolute classic of absurd humor.</span>
                        </p>
                    </div>
                </div>
                <div class="site-entry" onclick="openArchive('https://www.youtube.com/embed/bvI1yLWvJig', 'off')">
                    <div class="preview-container">
                        <img src="https://img.youtube.com/vi/bvI1yLWvJig/mqdefault.jpg" class="preview-img">
                        <div class="play-overlay">▶</div>
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Episode 08 - La bataille de Farador 1/2</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">Le début de la quête légendaire pour Farador. "C'est nous la bataille !"</span>
                            <span class="lang-en">The beginning of the legendary quest for Farador. "It's us, the battle!"</span>
                        </p>
                    </div>
                </div>
                <div class="site-entry" onclick="openArchive('https://www.youtube.com/embed/ReTPMme1nS4', 'off')">
                    <div class="preview-container">
                        <img src="https://img.youtube.com/vi/ReTPMme1nS4/mqdefault.jpg" class="preview-img">
                        <div class="play-overlay">▶</div>
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Episode 08 - La bataille de Farador 2/2</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">La conclusion épique de l'affrontement pour Farador.</span>
                            <span class="lang-en">The epic conclusion of the battle for Farador.</span>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- EMC Monkey -->
        <section class="category-section">
            <h2 class="category-title">
                <span class="lang-fr">EMC Monkey</span>
                <span class="lang-en">EMC Monkey</span>
            </h2>
            <div class="site-list">
                <div class="site-entry" onclick="openArchive('https://www.youtube.com/embed/D2kJZOfq7zk', 'off')">
                    <div class="preview-container"><img src="https://img.youtube.com/vi/D2kJZOfq7zk/mqdefault.jpg"
                            class="preview-img">
                        <div class="play-overlay">▶</div>
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Urban Ninja</span>
                        </div>
                        <p class="site-desc">
                            <span class="lang-fr">L'un des pionniers du parkour viral.</span>
                            <span class="lang-en">One of the pioneers of viral parkour.</span>
                        </p>
                    </div>
                </div>
                <div class="site-entry" onclick="openArchive('https://www.youtube.com/embed/l0fgsp89LCA', 'off')">
                    <div class="preview-container"><img src="https://img.youtube.com/vi/l0fgsp89LCA/mqdefault.jpg"
                            class="preview-img">
                        <div class="play-overlay">▶</div>
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Ultimate Showdown: Ninja Vs Pirate</span>
                        </div>
                    </div>
                </div>
                <div class="site-entry" onclick="openArchive('https://www.youtube.com/embed/c36RUFP0KoE', 'off')">
                    <div class="preview-container"><img src="https://img.youtube.com/vi/c36RUFP0KoE/mqdefault.jpg"
                            class="preview-img">
                        <div class="play-overlay">▶</div>
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">King of Fighters - EMC Edition</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Classiques du Web -->
        <section class="category-section">
            <h2 class="category-title">
                <span class="lang-fr">Classiques du Web</span>
                <span class="lang-en">Web Classics</span>
            </h2>
            <div class="site-list">
                <div class="site-entry" onclick="openArchive('https://www.youtube.com/embed/CMNry4PE93Y', 'off')">
                    <div class="preview-container"><img src="https://img.youtube.com/vi/CMNry4PE93Y/mqdefault.jpg"
                            class="preview-img">
                        <div class="play-overlay">▶</div>
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">I Like Turtles</span>
                        </div>
                    </div>
                </div>


                <div class="site-entry" onclick="openArchive('https://www.youtube.com/embed/3gg5LOd_Zus', 'off')">
                    <div class="preview-container"><img src="https://img.youtube.com/vi/3gg5LOd_Zus/mqdefault.jpg"
                            class="preview-img">
                        <div class="play-overlay">▶</div>
                    </div>
                    <div class="entry-content">
                        <div class="entry-header">
                            <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32" class="favicon"
                                alt="Icon">
                            <span class="site-name">Numa Numa 2: New Numa</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                       ██ AI JAVASCRIPT OUTPUT ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
    <script>
        // Tell parent to hide zoom button on load
        window.parent.postMessage('zoom:off', '*');

        function openArchive(url, zoomOrigin) {
            if (zoomOrigin === 'off') {
                window.parent.postMessage('zoom:off', '*');
            } else if (zoomOrigin) {
                window.parent.postMessage('zoom:on:' + zoomOrigin, '*');
            }
            window.location.href = url;
        }

        function showCategory(type) {
            document.querySelectorAll('.nav-tab').forEach(tab => tab.classList.remove('active'));
            const activeTab = Array.from(document.querySelectorAll('.nav-tab')).find(tab => {
                // Check both languages
                const text = tab.innerText.toLowerCase();
                if (type === 'sites') {
                    return text.includes('sites web') || text.includes('websites');
                } else {
                    return text.includes('vidéos') || text.includes('videos');
                }
            });
            if (activeTab) activeTab.classList.add('active');

            if (type === 'sites') {
                document.getElementById('sites-content').style.display = 'block';
                document.getElementById('videos-content').style.display = 'none';
            } else {
                document.getElementById('sites-content').style.display = 'none';
                document.getElementById('videos-content').style.display = 'block';
            }
        }
        // Music Player Logic
        let musicPlayer = null;
        let isMusicPlaying = false;
        let currentTrackIndex = 0;

        const trackList = [
            'music/À l\'Aventure Compagnon (Vintage).mp3'
        ];

        // Load saved state
        const savedTime = parseFloat(localStorage.getItem('musicPlayerTime')) || 0;
        const savedItem = localStorage.getItem('musicPlayerTrack');
        const wasPlaying = localStorage.getItem('musicPlayerPlaying') === 'true';
        if (savedItem) currentTrackIndex = parseInt(savedItem);

        function initPlayer() {
            if (!musicPlayer) {
                musicPlayer = new Audio();
                musicPlayer.volume = 0.4;
                musicPlayer.src = trackList[currentTrackIndex];
                musicPlayer.currentTime = savedTime;

                updateTrackDisplay();

                musicPlayer.onended = function () {
                    playNextTrack();
                };

                musicPlayer.ontimeupdate = function () {
                    localStorage.setItem('musicPlayerTime', musicPlayer.currentTime);
                };

                // Attempt to auto-resume on load if it was playing
                if (wasPlaying) {
                    musicPlayer.play().then(() => {
                        isMusicPlaying = true;
                        document.querySelector('.floating-mediaplayer').classList.add('playing');
                        document.getElementById('rotationWrapper').classList.add('rotating');
                        document.getElementById('audioMonitor').style.display = 'block';
                        startSimulatedMonitor();
                    }).catch(e => {
                        console.log("Lecture automatique bloquée par le navigateur.");
                        localStorage.setItem('musicPlayerPlaying', 'false');
                    });
                }
            }
        }

        // Initialize on load
        window.addEventListener('load', initPlayer);

        function toggleMusic(element) {
            if (!musicPlayer) initPlayer();

            if (isMusicPlaying) {
                musicPlayer.pause();
                isMusicPlaying = false;
                element.classList.remove('playing');
                document.getElementById('rotationWrapper').classList.remove('rotating');
                document.getElementById('audioMonitor').style.display = 'none';
                localStorage.setItem('musicPlayerPlaying', 'false');
                if (animationId) cancelAnimationFrame(animationId);
            } else {
                if (trackList.length > 0) {
                    musicPlayer.play().catch(error => { console.error(error); });
                    isMusicPlaying = true;
                    element.classList.add('playing');
                    document.getElementById('rotationWrapper').classList.add('rotating');
                    document.getElementById('audioMonitor').style.display = 'block';
                    localStorage.setItem('musicPlayerPlaying', 'true');
                    startSimulatedMonitor();
                }
            }
        }

        // --- Simulated Visualizer (Heartbeat mode) ---
        let animationId = null;
        let offset = 0;

        function startSimulatedMonitor() {
            if (animationId) cancelAnimationFrame(animationId);
            drawHeartbeat();
        }

        function drawHeartbeat() {
            const canvas = document.getElementById('waveform');
            const ctx = canvas.getContext('2d');
            if (!canvas || !ctx) return;

            animationId = requestAnimationFrame(drawHeartbeat);
            offset += 0.3;

            // Clear for transparency
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // Neon line
            ctx.lineWidth = 3;
            ctx.strokeStyle = '#22ff22';
            ctx.shadowBlur = 10;
            ctx.shadowColor = '#00ff00';
            ctx.beginPath();

            ctx.moveTo(0, canvas.height / 2);
            for (let x = 0; x < canvas.width; x++) {
                // Larger amplitude Heartbeat simulation
                let base = Math.sin(x * 0.08 + offset) * 5;
                let spike = 0;
                let pulsePos = (x + offset * 30) % 150;

                if (pulsePos > 50 && pulsePos < 65) spike = Math.sin((pulsePos - 50) * Math.PI / 15) * 45;
                if (pulsePos > 65 && pulsePos < 75) spike = -Math.sin((pulsePos - 65) * Math.PI / 10) * 20;

                ctx.lineTo(x, (canvas.height / 2) + base + spike);
            }
            ctx.stroke();
            ctx.shadowBlur = 0;
        }

        function playNextTrack() {
            currentTrackIndex = (currentTrackIndex + 1) % trackList.length;
            musicPlayer.src = trackList[currentTrackIndex];
            localStorage.setItem('musicPlayerTrack', currentTrackIndex);
            updateTrackDisplay();
            musicPlayer.play();
        }

        function updateTrackDisplay() {
            const display = document.getElementById('trackDisplay');
            if (!display) return;
            const fullPath = trackList[currentTrackIndex];
            const fileName = fullPath.split('/').pop().replace('.mp3', '');
            display.textContent = "NOW PLAYING: " + decodeURIComponent(fileName);
        }

        /**
         * PROTECTION & SÉCURITÉ
         */
        document.addEventListener('contextmenu', e => e.preventDefault());
        document.addEventListener('dragstart', e => { 
            if (['IMG', 'VIDEO'].includes(e.target.tagName)) e.preventDefault(); 
        });
        document.addEventListener('keydown', e => {
            if (
                e.keyCode === 123 || // F12
                (e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74)) || // Ctrl+Shift+I/J
                (e.ctrlKey && e.keyCode === 85) // Ctrl+U
            ) {
                e.preventDefault();
                return false;
            }
        });
        /**
         * SYNCHRONISATION BILINGUE (iframe -> parent)
         */
        document.addEventListener('languageChanged', (e) => {
            if (window.parent !== window) {
                window.parent.postMessage({ type: 'languageChanged', lang: e.detail.lang }, '*');
            }
        });
    </script>
    <footer class="site-footer">
        <div class="footer-line"></div>
        <p class="footer-text" data-fr="© 2025 Slaizen Archive | Tout droits réservés"
            data-en="© 2025 Slaizen Archive | All rights reserved">
            © 2025 Slaizen Archive | Tout droits réservés
        </p>
    </footer>
    <!-- Scripts Supabase -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script src="../coreSystem/supabase.js"></script>

    <!-- Chargeur du menu d'authentification (doit être chargé avant auth.js) -->
    <script src="../coreSystem/auth-nav-loader.js"></script>

    <!-- Chargeur des modales (doit être chargé avant les autres scripts) -->
    <script src="../coreSystem/modals-loader.js"></script>

    <!-- Scripts modulaires séparés -->
    <script src="../coreSystem/profiles-config.js"></script>
    <script src="../coreSystem/profiles.js"></script>
    <script src="../coreSystem/auth.js"></script>
    <script src="../coreSystem/avatars.js"></script>
    <script src="../coreSystem/comments.js"></script>
    <script src="../coreSystem/notifications.js"></script>
    <script src="../coreSystem/app.js"></script>
    <script src="../coreSystem/tracking.js"></script>

    <!-- i18n.js doit être chargé en dernier pour initialiser les traductions -->
    <script src="../coreSystem/i18n.js"></script>
</body>

</html>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                      ██ FIRST CREATED: 2025-04-24 ██ LAST UPDATED: 2026-04-24 ██                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ INTRUSION DETECTED ██                                                                              ║    
    ║ ██ UNAUTHORIZED ACCESS ATTEMPT LOGGED ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ TERMINATING CONNECTION ██                                                                          ║    
    ║ ██ DISCONNECTING FROM SLAIZEN.COM ██                                                                  ║    
    ║ ██ CONNECTION CLOSED ██                                                                               ║    
    ║                                                                                                       ║    
    ║ ██ YOU ARE NOW LEAVING THE UNDER-GRID ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝    
  ███████ ██       █████  ██ ███████ ███████ ███    ██     ██    ███ ███████ ███████ ██  █████       ██ ███████  
  ██      ██      ██   ██ ██    ███  ██      ████   ██     ██   ████      ██  ███    ██ ██   ██      ██      ██  
  ███████ ██      ███████ ██   ███   █████   ██ ██  ██     ██  ██ ██   █████   ███   ██ ███████      ██ ███████  
       ██ ██      ██   ██ ██  ███    ██      ██  ██ ██     ██ ██  ██      ██    ███  ██ ██   ██      ██ ██       
  ███████ ███████ ██   ██ ██ ███████ ███████ ██   ████     ████   ██ ███████ ███████ ██ ██   ██ ███████ ███████  
-->