Spaces:
No application file
No application file
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>#⨜.৻.Ι.Ξ.Π.৻.Ξ.⨜</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body, html { | |
| margin: 0; | |
| padding: 0; | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| font-family: Arial, sans-serif; | |
| background-color: #000000; | |
| color: #ffffff; | |
| cursor: url('./image/cursor.png'), auto; | |
| } | |
| #container { | |
| display: flex; | |
| width: 300vw; | |
| height: 100vh; | |
| transition: transform 1s ease; | |
| } | |
| .main-section { | |
| width: 100vw; | |
| height: 100vh; | |
| flex-shrink: 0; | |
| transition: opacity 1s ease, transform 1s ease, filter 1s ease; | |
| opacity: 0; | |
| transform: scale(0.8) rotateY(10deg); | |
| filter: brightness(70%) blur(10px); | |
| overflow: hidden; | |
| } | |
| #left-section { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #vertical-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 300vh; | |
| transition: transform 1s ease; | |
| } | |
| .vertical-section { | |
| width: 100%; | |
| height: 100vh; | |
| transition: opacity 1s ease, transform 1s ease, filter 1s ease; | |
| opacity: 0; | |
| transform: scale(0.8) rotateX(10deg); | |
| filter: brightness(70%) blur(10px); | |
| } | |
| .iframe-container { | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| } | |
| .iframe-container iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .grid-background { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), | |
| linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| pointer-events: none; | |
| z-index: -1; | |
| animation: gridPulse 10s infinite alternate; | |
| } | |
| @keyframes gridPulse { | |
| 0% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .vertical-navbar, .horizontal-navbar { | |
| transition: opacity 0.5s ease, transform 0.5s ease; | |
| } | |
| .vertical-navbar { | |
| position: absolute; | |
| right: 20px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| padding: 10px; | |
| border-radius: 10px; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .vertical-navbar.hidden { | |
| opacity: 0; | |
| transform: translateY(-50%) translateX(50px); | |
| } | |
| .horizontal-navbar { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 20px; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| padding: 10px; | |
| border-radius: 10px; | |
| z-index: 1000; | |
| } | |
| .horizontal-navbar.hidden { | |
| opacity: 0; | |
| transform: translateX(-50%) translateY(50px); | |
| } | |
| .nav-item { | |
| width: 15px; | |
| height: 15px; | |
| background-color: rgba(255, 255, 255, 0.5); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .nav-item.active { | |
| background-color: white; | |
| transform: scale(1.2); | |
| } | |
| .vertical-navbar .nav-item::after { | |
| content: attr(data-title); | |
| position: absolute; | |
| right: 25px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background-color: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| white-space: nowrap; | |
| } | |
| .vertical-navbar .nav-item:hover::after { | |
| opacity: 1; | |
| } | |
| .horizontal-navbar .nav-item::after { | |
| content: none; | |
| } | |
| .section-title { | |
| position: absolute; | |
| left: 20px; | |
| top: 20px; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| color: white; | |
| padding: 10px 15px; | |
| border-radius: 5px; | |
| font-size: 18px; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div id="left-section" class="main-section"> | |
| <div id="vertical-container"> | |
| <div class="vertical-section"> | |
| <div class="iframe-container"> | |
| <iframe src="solarsystem.html"></iframe> | |
| </div> | |
| </div> | |
| <div class="vertical-section"> | |
| <div class="iframe-container"> | |
| <iframe src="1.html"></iframe> | |
| </div> | |
| </div> | |
| <div class="vertical-section"> | |
| <div class="iframe-container"> | |
| <iframe src="2.html"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="vertical-navbar"> | |
| <div class="nav-item" data-title="solarsystem.html"></div> | |
| <div class="nav-item" data-title="1.html"></div> | |
| <div class="nav-item" data-title="2.html"></div> | |
| </div> | |
| <div class="section-title"></div> | |
| </div> | |
| <div id="middle-section" class="main-section"> | |
| <div class="iframe-container"> | |
| <iframe src="presentation.html"></iframe> | |
| </div> | |
| </div> | |
| <div id="right-section" class="main-section"> | |
| <div class="iframe-container"> | |
| <iframe src="chatgpt.html"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="horizontal-navbar hidden"> | |
| <div class="nav-item"></div> | |
| <div class="nav-item"></div> | |
| <div class="nav-item"></div> | |
| </div> | |
| <div class="grid-background"></div> | |
| <audio id="backgroundAudio" loop preload="auto"> | |
| <source src="song/ground-music.mp3" type="audio/mpeg"> | |
| Votre navigateur ne supporte pas l'élément audio. | |
| </audio> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const container = document.getElementById('container'); | |
| const mainSections = document.querySelectorAll('.main-section'); | |
| const verticalContainer = document.getElementById('vertical-container'); | |
| const verticalSections = document.querySelectorAll('.vertical-section'); | |
| let currentMainIndex = 1; // Commence au milieu (section présentation.html) | |
| let currentVerticalIndex = 0; | |
| const audio = document.getElementById('backgroundAudio'); | |
| function attemptPlayAudio() { | |
| audio.play().catch(() => { | |
| setTimeout(attemptPlayAudio, 1000); | |
| }); | |
| } | |
| attemptPlayAudio(); | |
| document.addEventListener('visibilitychange', () => { | |
| if (document.hidden) { | |
| audio.pause(); | |
| } else { | |
| attemptPlayAudio(); | |
| } | |
| }); | |
| const verticalNavbar = document.querySelector('.vertical-navbar'); | |
| const horizontalNavbar = document.querySelector('.horizontal-navbar'); | |
| const sectionTitle = document.querySelector('.section-title'); | |
| let navbarTimeout; | |
| function showNavbars() { | |
| verticalNavbar.classList.remove('hidden'); | |
| horizontalNavbar.classList.remove('hidden'); | |
| clearTimeout(navbarTimeout); | |
| navbarTimeout = setTimeout(() => { | |
| verticalNavbar.classList.add('hidden'); | |
| horizontalNavbar.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| function updateMainSection() { | |
| mainSections.forEach((section, index) => { | |
| if (index === currentMainIndex) { | |
| section.style.opacity = 1; | |
| section.style.transform = 'scale(1) rotateY(0deg)'; | |
| section.style.filter = 'brightness(100%) blur(0)'; | |
| } else { | |
| section.style.opacity = 0; | |
| section.style.transform = 'scale(0.8) rotateY(10deg)'; | |
| section.style.filter = 'brightness(70%) blur(10px)'; | |
| } | |
| }); | |
| container.style.transform = `translateX(-${currentMainIndex * 100}vw)`; | |
| updateNavbar(); | |
| showHorizontalNavbar(); | |
| } | |
| function updateVerticalSection() { | |
| verticalSections.forEach((section, index) => { | |
| if (index === currentVerticalIndex) { | |
| section.style.opacity = 1; | |
| section.style.transform = 'scale(1) rotateX(0deg)'; | |
| section.style.filter = 'brightness(100%) blur(0)'; | |
| } else { | |
| section.style.opacity = 0; | |
| section.style.transform = 'scale(0.8) rotateX(10deg)'; | |
| section.style.filter = 'brightness(70%) blur(10px)'; | |
| } | |
| }); | |
| verticalContainer.style.transform = `translateY(-${currentVerticalIndex * 100}vh)`; | |
| updateNavbar(); | |
| showSectionTitle(verticalSections[currentVerticalIndex].querySelector('iframe').src.split('/').pop()); | |
| } | |
| function updateNavbar() { | |
| const verticalNavItems = verticalNavbar.querySelectorAll('.nav-item'); | |
| const horizontalNavItems = horizontalNavbar.querySelectorAll('.nav-item'); | |
| verticalNavItems.forEach((item, index) => { | |
| item.classList.toggle('active', index === currentVerticalIndex); | |
| }); | |
| horizontalNavItems.forEach((item, index) => { | |
| item.classList.toggle('active', index === currentMainIndex); | |
| }); | |
| } | |
| function showSectionTitle(title) { | |
| sectionTitle.textContent = title; | |
| sectionTitle.style.opacity = 1; | |
| setTimeout(() => { | |
| sectionTitle.style.opacity = 0; | |
| }, 2000); | |
| } | |
| function showVerticalNavbar() { | |
| verticalNavbar.classList.remove('hidden'); | |
| clearTimeout(navbarTimeout); | |
| navbarTimeout = setTimeout(() => { | |
| verticalNavbar.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| function showHorizontalNavbar() { | |
| horizontalNavbar.classList.remove('hidden'); | |
| clearTimeout(navbarTimeout); | |
| navbarTimeout = setTimeout(() => { | |
| horizontalNavbar.classList.add('hidden'); | |
| }, 3000); | |
| } | |
| function handleKeyNavigation(key) { | |
| switch (key) { | |
| case 'ArrowLeft': | |
| if (currentMainIndex > 0) { | |
| currentMainIndex--; | |
| } | |
| break; | |
| case 'ArrowRight': | |
| if (currentMainIndex < 2) { | |
| currentMainIndex++; | |
| } | |
| break; | |
| case 'ArrowUp': | |
| if (currentMainIndex === 0 && currentVerticalIndex > 0) { | |
| currentVerticalIndex--; | |
| updateVerticalSection(); | |
| } | |
| break; | |
| case 'ArrowDown': | |
| if (currentMainIndex === 0 && currentVerticalIndex < verticalSections.length - 1) { | |
| currentVerticalIndex++; | |
| updateVerticalSection(); | |
| } | |
| break; | |
| } | |
| updateMainSection(); | |
| showNavbars(); | |
| } | |
| // Gestion globale des événements clavier | |
| document.addEventListener('keydown', (event) => { | |
| if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) { | |
| event.preventDefault(); | |
| handleKeyNavigation(event.key); | |
| } | |
| }); | |
| // Gestion spécifique pour les iframes | |
| document.querySelectorAll('iframe').forEach(iframe => { | |
| iframe.addEventListener('load', () => { | |
| iframe.contentWindow.addEventListener('keydown', (event) => { | |
| if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) { | |
| event.preventDefault(); | |
| event.stopPropagation(); | |
| handleKeyNavigation(event.key); | |
| } | |
| }, true); | |
| }); | |
| }); | |
| document.addEventListener('mousemove', showNavbars); | |
| window.addEventListener('message', (event) => { | |
| if (event.data && event.data.key) { | |
| handleKeyNavigation(event.data.key); | |
| } | |
| }, false); | |
| const verticalNavItems = verticalNavbar.querySelectorAll('.nav-item'); | |
| verticalNavItems.forEach((item, index) => { | |
| item.addEventListener('click', () => { | |
| currentVerticalIndex = index; | |
| updateVerticalSection(); | |
| }); | |
| }); | |
| const horizontalNavItems = horizontalNavbar.querySelectorAll('.nav-item'); | |
| horizontalNavItems.forEach((item, index) => { | |
| item.addEventListener('click', () => { | |
| if (currentMainIndex !== index) { | |
| currentMainIndex = index; | |
| updateMainSection(); | |
| } | |
| }); | |
| }); | |
| updateMainSection(); | |
| updateVerticalSection(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |