Spaces:
No application file
No application file
| <html> | |
| <head> | |
| <base href=""> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Galerie d'Images</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap'); | |
| html, body { | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| cursor: url('./image/cursor.png'), auto ; | |
| user-select: none; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #000000; | |
| color: #ffffff; | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| } | |
| .content-wrapper { | |
| flex: 1; | |
| overflow-y: auto; | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| } | |
| .content-wrapper::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .top-bar { | |
| width: 100%; | |
| background-color: #000000; | |
| padding: 20px 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| box-shadow: 0 2px 10px rgba(255,255,255,0.1); | |
| } | |
| .search-container { | |
| width: 80%; | |
| max-width: 600px; | |
| display: flex; | |
| align-items: center; | |
| background-color: #000000; | |
| border-radius: 30px; | |
| padding: 5px 15px; | |
| border: 1px solid #333; | |
| transition: all 0.3s ease; | |
| } | |
| .search-container:focus-within { | |
| border-color: #555; | |
| box-shadow: 0 0 10px rgba(255,255,255,0.1); | |
| } | |
| input[type="text"] { | |
| flex-grow: 1; | |
| background-color: transparent; | |
| border: none; | |
| color: #ffffff; | |
| font-family: 'Roboto Condensed', sans-serif; | |
| font-size: 18px; | |
| padding: 12px; | |
| outline: none; | |
| cursor: url('./image/cursor.png'), text ; | |
| } | |
| input[type="text"]::placeholder { | |
| color: #555; | |
| } | |
| .search-icon { | |
| width: 24px; | |
| height: 24px; | |
| fill: #555; | |
| opacity: 0.8; | |
| transition: opacity 0.3s ease, transform 0.3s ease; | |
| } | |
| .search-icon:hover { | |
| opacity: 1; | |
| cursor: url('./image/cursor.png'), pointer ; | |
| transform: scale(1.1); | |
| } | |
| .content { | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| align-items: center; | |
| padding: 40px 20px; | |
| } | |
| h1 { | |
| font-weight: 300; | |
| text-align: center; | |
| font-size: 3.5em; | |
| margin: 0 0 20px 0; | |
| letter-spacing: 3px; | |
| text-transform: uppercase; | |
| } | |
| .image-gallery { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 20px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .image-container { | |
| position: relative; | |
| width: calc(33.33% - 20px); | |
| aspect-ratio: 1 / 1; | |
| overflow: hidden; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 10px rgba(0,255,255,0.1); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .image-container:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 6px 15px rgba(0,255,255,0.2); | |
| } | |
| .image-container img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: opacity 0.3s ease; | |
| pointer-events: none; | |
| } | |
| .image-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.2)); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .image-container:hover .image-overlay { | |
| opacity: 1; | |
| } | |
| .image-title { | |
| color: #ffffff; | |
| font-size: 1.2em; | |
| text-align: center; | |
| padding: 10px; | |
| background-color: rgba(0,0,0,0.7); | |
| border-radius: 5px; | |
| } | |
| #search-results { | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 80%; | |
| max-width: 600px; | |
| background-color: #000000; | |
| border: 1px solid #333; | |
| border-top: none; | |
| border-radius: 0 0 15px 15px; | |
| max-height: 0; | |
| overflow: hidden; | |
| z-index: 1000; | |
| transition: max-height 0.3s ease-out, opacity 0.3s ease-out; | |
| opacity: 0; | |
| } | |
| #search-results.active { | |
| max-height: 300px; | |
| opacity: 1; | |
| overflow-y: auto; | |
| } | |
| #search-results::-webkit-scrollbar { | |
| display: none; | |
| } | |
| #search-results div { | |
| padding: 10px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease; | |
| } | |
| #search-results div:hover { | |
| background-color: #333; | |
| } | |
| .popup { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .popup.show { | |
| opacity: 1; | |
| } | |
| .popup-content { | |
| background-color: black; | |
| color: #fff; | |
| font-family: 'Poppins', sans-serif; | |
| padding: 30px; | |
| border-radius: 5px; | |
| width: 90%; | |
| height: 90%; | |
| overflow: hidden; | |
| position: relative; | |
| transform: scale(0.7); | |
| transition: transform 0.3s ease; | |
| background-image: | |
| linear-gradient(to right, rgba(128, 128, 128, 0.1) 1px, transparent 1px), | |
| linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| .popup.show .popup-content { | |
| transform: scale(1); | |
| } | |
| .popup-content .markdown-content { | |
| font-family: 'Poppins', sans-serif; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| max-height: 100%; | |
| overflow-y: auto; | |
| scrollbar-width: none; | |
| -ms-overflow-style: none; | |
| font-size: 16px; | |
| line-height: 1.6; | |
| } | |
| .popup-content .markdown-content::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .close-button { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: none; | |
| border: none; | |
| color: #fff; | |
| font-size: 24px; | |
| cursor: pointer; | |
| } | |
| ::selection { | |
| background-color: #98FF98; | |
| color: #000; | |
| } | |
| * { | |
| cursor: url('./image/cursor.png'), auto ; | |
| user-select: none; | |
| } | |
| input[type="text"], textarea { | |
| cursor: url('./image/cursor.png'), text ; | |
| } | |
| input[type="text"], textarea { | |
| caret-color: transparent; | |
| } | |
| input[type="text"]::after, textarea::after { | |
| content: '|'; | |
| position: absolute; | |
| color: #ffffff; | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| input[type="text"]::selection { | |
| background-color: #98FF98; | |
| color: #000000; | |
| } | |
| </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/2.0.3/marked.min.js"></script> | |
| <script> | |
| let allFiles = []; | |
| async function loadFileNames() { | |
| const response = await fetch('/api/files'); | |
| allFiles = await response.json(); | |
| } | |
| function displaySearchResults(searchTerm) { | |
| const resultsDiv = document.getElementById('search-results'); | |
| resultsDiv.innerHTML = ''; | |
| const matchingFiles = allFiles.filter(file => | |
| file.toLowerCase().includes(searchTerm.toLowerCase()) | |
| ); | |
| matchingFiles.forEach(file => { | |
| const div = document.createElement('div'); | |
| div.textContent = file; | |
| div.addEventListener('click', () => showFileContent(file)); | |
| resultsDiv.appendChild(div); | |
| }); | |
| resultsDiv.classList.add('active'); | |
| } | |
| function hideSearchResults() { | |
| const resultsDiv = document.getElementById('search-results'); | |
| resultsDiv.classList.remove('active'); | |
| } | |
| async function showFileContent(fileName) { | |
| const response = await fetch(`/api/file/${fileName}`); | |
| const content = await response.text(); | |
| const popup = document.createElement('div'); | |
| popup.className = 'popup'; | |
| popup.innerHTML = ` | |
| <div class="popup-content"> | |
| <button class="close-button" onclick="closePopup(this)">×</button> | |
| <div class="markdown-content"></div> | |
| </div> | |
| `; | |
| document.body.appendChild(popup); | |
| // Use marked.js to render Markdown | |
| const markdownContent = popup.querySelector('.markdown-content'); | |
| markdownContent.innerHTML = marked(content); | |
| // Trigger reflow before adding 'show' class for animation | |
| popup.offsetWidth; | |
| popup.classList.add('show'); | |
| popup.addEventListener('click', (e) => { | |
| if (e.target === popup) { | |
| closePopup(popup); | |
| } | |
| }); | |
| } | |
| function closePopup(element) { | |
| const popup = element.closest('.popup'); | |
| popup.classList.remove('show'); | |
| setTimeout(() => popup.remove(), 300); // Remove after animation | |
| } | |
| window.addEventListener('load', async () => { | |
| await loadFileNames(); | |
| const searchInput = document.getElementById('search-input'); | |
| const searchResults = document.getElementById('search-results'); | |
| searchInput.addEventListener('input', (e) => { | |
| displaySearchResults(e.target.value); | |
| }); | |
| searchInput.addEventListener('focus', () => { | |
| if (searchInput.value) { | |
| displaySearchResults(searchInput.value); | |
| } | |
| }); | |
| document.addEventListener('click', (e) => { | |
| if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) { | |
| hideSearchResults(); | |
| } | |
| }); | |
| }); | |
| document.addEventListener('keydown', (event) => { | |
| if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') { | |
| event.preventDefault(); | |
| window.parent.postMessage({ key: event.key }, '*'); | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="top-bar"> | |
| <div class="search-container"> | |
| <input type="text" id="search-input" placeholder=""spellcheck="false"autocomplete="off"> | |
| <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> | |
| </svg> | |
| </div> | |
| <div id="search-results"></div> | |
| </div> | |
| <div class="content-wrapper"> | |
| <div class="content"> | |
| <h1># SCIENCES</h1> | |
| <div class="image-gallery"> | |
| <div class="image-container"> | |
| <img src="./image/europeanforest.webp" alt="Galaxie bleue et verte dans l'espace"> | |
| <div class="image-overlay"> | |
| <div class="image-title">European Forest</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/planet extra.jpeg" alt="Grande planète vue de l'espace"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Extra-terrestrial planet</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/graphicalpaint.webp" alt="Forêt bleue et verte vue du dessus"> | |
| <div class="image-overlay"> | |
| <div class="image-title"> | |
| Graphical draw</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/blueneb.webp" alt="Nébuleuse cosmique bleue"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Nebula</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/aurore.webp" alt="Aurores boréales"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Northern Lights</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/Brazil.webp" alt="Forêt tropicale vue du ciel"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Amazonia</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/milky way.webp" alt="Voie lactée dans le ciel"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Milky Way</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/atmosphere.webp" alt="Atmosphère terrestre vue de l'espace" width="800" height="800"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Atmosphere</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/sequoiaforest.jpeg" alt="Forêt de séquoias" width="800" height="800"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Sequoia forest</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/blackhole.webp" alt="Poussière cosmique dans l'espace" width="800" height="800"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Blackhole</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/saturn.webp" alt="Planète avec anneaux" width="800" height="800"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Saturn</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/mangrove.jpg" alt="Forêt de mangroves" width="800" height="800"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Mangrove</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/stars.webp" alt="Amas d'étoiles" width="800" height="800"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Star cluster</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/pinforests.webp" alt="Comète dans l'espace" width="800" height="800"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Pine forest</div> | |
| </div> | |
| </div> | |
| <div class="image-container"> | |
| <img src="./image/blueneb.webp" alt="Forêt de bambous" width="800" height="800"> | |
| <div class="image-overlay"> | |
| <div class="image-title">Stardust</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |