Файловый менеджер

Файловый менеджер - Редактировать - /home/gqdcvggs/imators.systems/apple-present/index.html

Назад
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Apple, D'un outil, à un mode de vie</title> <script src="https://cdn.tailwindcss.com"></script> <style> @font-face { font-family: 'San Francisco'; src: local(-apple-system); font-weight: normal; font-style: normal; } body { font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; overflow: hidden; margin: 0; height: 100vh; background-color: #fff; } .scene { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); opacity: 0; pointer-events: none; z-index: 1; } .scene.active { opacity: 1; pointer-events: all; z-index: 10; } .card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; transition: all 0.4s ease; } .card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .poster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; opacity: 0; transform: translateY(20px); transition: all 1.5s cubic-bezier(0.16, 1, 0.3, 1); } .poster-grid.visible { opacity: 1; transform: translateY(0); } .key-badge { position: absolute; bottom: 8px; right: 8px; background: rgba(0, 0, 0, 0.5); color: white; border-radius: 4px; padding: 2px 8px; font-size: 12px; } .control-panel { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; gap: 10px; } .control-btn { width: 40px; height: 40px; border-radius: 20px; background: rgba(0, 0, 0, 0.7); color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .control-btn:hover { background: rgba(0, 0, 0, 0.9); transform: scale(1.1); } .apple-gradient { background: linear-gradient(135deg, #c644fc 0%, #5856d6 15%, #2189fc 30%, #33c5f3 45%, #00bd56 60%, #ffcc02 75%, #ff9500 90%, #ff3b2f 100%); background-size: 200% 200%; animation: gradientBG 15s ease infinite; } @keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .page-transition { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 1000; transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .page-transition.active { transform: translateY(0); } .product-card { transition: all 0.5s ease; cursor: pointer; } .product-card:hover { transform: scale(1.05); } .ceo-carousel { display: flex; overflow: hidden; position: relative; width: 100%; } .ceo-slide { min-width: 100%; transition: transform 0.5s ease; } .nav-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); margin: 0 5px; cursor: pointer; transition: all 0.3s ease; } .nav-dot.active { background: #000; transform: scale(1.2); } .fade-in { animation: fadeIn 1s ease forwards; opacity: 0; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .title-animation { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); animation: revealText 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards; } @keyframes revealText { 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } </style> </head> <body> <div class="control-panel"> <div class="control-btn" onclick="switchScene('home')">H</div> <div class="control-btn" onclick="switchScene('films')">K</div> <div class="control-btn" onclick="switchScene('products')">P</div> <div class="control-btn" onclick="switchScene('innovation')">I</div> </div> <div class="page-transition"></div> <section id="home-scene" class="scene active"> <div class="container mx-auto px-8 py-16 h-full flex flex-col"> <header class="mb-16"> <h1 class="text-8xl font-bold text-left title-animation">Apple,</h1> <p class="text-4xl font-light mt-4 opacity-0 animate-[fadeIn_1s_ease_0.5s_forwards]">D'un outil, à un mode de vie</p> </header> <div class="flex-grow"> <div class="max-w-4xl mb-16 opacity-0 animate-[fadeIn_1s_ease_0.8s_forwards]"> <h2 class="text-4xl font-bold mb-6">L'histoire d'Apple</h2> <p class="text-xl leading-relaxed"> Apple a été fondée le 1er avril 1976 par Steve Jobs, Steve Wozniak et Ronald Wayne. Ce qui a commencé comme une entreprise de garage à Cupertino, en Californie, est devenue l'une des entreprises les plus influentes au monde. Depuis l'Apple I jusqu'aux derniers iPhone, Mac et services numériques, Apple a constamment redéfini la technologie et la façon dont nous interagissons avec elle. </p> </div> <div class="grid grid-cols-3 gap-10 mb-16"> <div class="card bg-black text-white p-8 rounded-3xl flex flex-col items-center justify-center h-96 relative opacity-0 animate-[fadeIn_1s_ease_1s_forwards]" onclick="switchScene('films')"> <div class="absolute inset-0 bg-gradient-to-br from-gray-900 to-black rounded-3xl"></div> <div class="relative z-10 flex flex-col items-center"> <svg class="w-28 h-28 mb-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect> <line x1="7" y1="2" x2="7" y2="22"></line> <line x1="17" y1="2" x2="17" y2="22"></line> <line x1="2" y1="12" x2="22" y2="12"></line> <line x1="2" y1="7" x2="7" y2="7"></line> <line x1="2" y1="17" x2="7" y2="17"></line> <line x1="17" y1="17" x2="22" y2="17"></line> <line x1="17" y1="7" x2="22" y2="7"></line> </svg> </div> </div> <div class="card bg-gradient-to-br from-gray-50 to-gray-200 p-8 rounded-3xl flex flex-col items-center justify-center h-96 relative opacity-0 animate-[fadeIn_1s_ease_1.2s_forwards]" onclick="switchScene('products')"> <div class="relative z-10 flex flex-col items-center"> <svg class="w-28 h-28 mb-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect> <line x1="8" y1="21" x2="16" y2="21"></line> <line x1="12" y1="17" x2="12" y2="21"></line> </svg> </div> </div> <div class="card bg-gradient-to-br from-gray-50 to-gray-200 p-8 rounded-3xl flex flex-col items-center justify-center h-96 relative opacity-0 animate-[fadeIn_1s_ease_1.4s_forwards]" onclick="switchScene('innovation')"> <div class="relative z-10 flex flex-col items-center"> <svg class="w-28 h-28 mb-8" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2L2 7l10 5 10-5-10-5z"></path> <path d="M2 17l10 5 10-5"></path> <path d="M2 12l10 5 10-5"></path> </svg> </div> </div> </div> </div> <div class="opacity-0 animate-[fadeIn_1s_ease_1.6s_forwards]"> <h2 class="text-3xl font-bold mb-6">CEO de l'entreprise au cours de l'histoire</h2> <div class="ceo-carousel"> <div class="ceo-slide" id="ceo-slide-0"> <div class="flex items-center space-x-8 bg-gray-50 p-8 rounded-3xl"> <img src="/api/placeholder/200/200" alt="Steve Jobs" class="w-32 h-32 rounded-full object-cover"> <div> <h3 class="text-2xl font-bold">Steve Jobs</h3> <p class="text-lg text-gray-600">1955 - 2011</p> <p class="text-lg text-gray-600">Co-fondateur & CEO</p> <p class="mt-4 text-lg">A co-fondé Apple et a dirigé la révolution des produits Apple avec des innovations comme le Macintosh, l'iPod, l'iPhone et l'iPad.</p> </div> </div> </div> <div class="ceo-slide" id="ceo-slide-1"> <div class="flex items-center space-x-8 bg-gray-50 p-8 rounded-3xl"> <img src="/api/placeholder/200/200" alt="Tim Cook" class="w-32 h-32 rounded-full object-cover"> <div> <h3 class="text-2xl font-bold">Tim Cook</h3> <p class="text-lg text-gray-600">1960 - Présent</p> <p class="text-lg text-gray-600">CEO actuel</p> <p class="mt-4 text-lg">A pris la relève en 2011 et a continué à développer l'entreprise en introduisant des produits et services comme l'Apple Watch, AirPods et Apple TV+.</p> </div> </div> </div> <div class="ceo-slide" id="ceo-slide-2"> <div class="flex items-center space-x-8 bg-gray-50 p-8 rounded-3xl"> <img src="/api/placeholder/200/200" alt="John Sculley" class="w-32 h-32 rounded-full object-cover"> <div> <h3 class="text-2xl font-bold">John Sculley</h3> <p class="text-lg text-gray-600">1939 - Présent</p> <p class="text-lg text-gray-600">CEO 1983-1993</p> <p class="mt-4 text-lg">Ancien président de Pepsi-Cola, il a été recruté par Steve Jobs et a dirigé Apple pendant une décennie avant d'être remplacé par Michael Spindler.</p> </div> </div> </div> </div> <div class="flex justify-center mt-4"> <div class="nav-dot active" onclick="changeCEO(0)"></div> <div class="nav-dot" onclick="changeCEO(1)"></div> <div class="nav-dot" onclick="changeCEO(2)"></div> </div> </div> </div> </section> <section id="films-scene" class="scene"> <video id="apple-video" class="absolute inset-0 w-full h-full object-cover" preload="auto"> <source src="" type="video/mp4"> </video> <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center"> <div id="poster-container" class="poster-grid w-full max-w-7xl px-8"> <div class="flex flex-col items-center"> <img src="/api/placeholder/240/360" alt="Ted Lasso" class="w-full rounded-xl shadow-xl"> <p class="text-white text-xl font-medium mt-4">Ted Lasso</p> </div> <div class="flex flex-col items-center"> <img src="/api/placeholder/240/360" alt="The Morning Show" class="w-full rounded-xl shadow-xl"> <p class="text-white text-xl font-medium mt-4">The Morning Show</p> </div> <div class="flex flex-col items-center"> <img src="/api/placeholder/240/360" alt="Foundation" class="w-full rounded-xl shadow-xl"> <p class="text-white text-xl font-medium mt-4">Foundation</p> </div> <div class="flex flex-col items-center"> <img src="/api/placeholder/240/360" alt="Severance" class="w-full rounded-xl shadow-xl"> <p class="text-white text-xl font-medium mt-4">Severance</p> </div> <div class="flex flex-col items-center"> <img src="/api/placeholder/240/360" alt="For All Mankind" class="w-full rounded-xl shadow-xl"> <p class="text-white text-xl font-medium mt-4">For All Mankind</p> </div> <div class="flex flex-col items-center"> <img src="/api/placeholder/240/360" alt="CODA" class="w-full rounded-xl shadow-xl"> <p class="text-white text-xl font-medium mt-4">CODA</p> </div> </div> </div> </section> <section id="products-scene" class="scene"> <div class="bg-white h-full overflow-auto"> <div class="container mx-auto px-8 py-16"> <h2 class="text-5xl font-bold mb-6 title-animation">Produits Apple</h2> <p class="text-2xl mb-16 opacity-0 animate-[fadeIn_1s_ease_0.5s_forwards]">L'innovation au service de l'expérience utilisateur</p> <div class="grid grid-cols-2 lg:grid-cols-4 gap-10"> <div class="product-card"> <div class="bg-gray-50 p-6 rounded-3xl"> <img src="/api/placeholder/400/400" alt="iPhone" class="w-full h-auto mb-6 rounded-xl"> <h3 class="text-2xl font-bold">iPhone</h3> <p class="text-gray-600 mt-2">Lancé en 2007, l'iPhone a révolutionné le monde des smartphones avec son interface tactile intuitive.</p> </div> </div> <div class="product-card"> <div class="bg-gray-50 p-6 rounded-3xl"> <img src="/api/placeholder/400/400" alt="iPad" class="w-full h-auto mb-6 rounded-xl"> <h3 class="text-2xl font-bold">iPad</h3> <p class="text-gray-600 mt-2">Dévoilé en 2010, l'iPad a redéfini la catégorie des tablettes avec sa polyvalence et sa puissance.</p> </div> </div> <div class="product-card"> <div class="bg-gray-50 p-6 rounded-3xl"> <img src="/api/placeholder/400/400" alt="Mac" class="w-full h-auto mb-6 rounded-xl"> <h3 class="text-2xl font-bold">Mac</h3> <p class="text-gray-600 mt-2">Le Mac est l'ordinateur emblématique d'Apple, offrant une expérience utilisateur inégalée depuis 1984.</p> </div> </div> <div class="product-card"> <div class="bg-gray-50 p-6 rounded-3xl"> <img src="/api/placeholder/400/400" alt="Apple Watch" class="w-full h-auto mb-6 rounded-xl"> <h3 class="text-2xl font-bold">Apple Watch</h3> <p class="text-gray-600 mt-2">Lancée en 2015, l'Apple Watch est devenue la montre connectée la plus vendue au monde.</p> </div> </div> <div class="product-card"> <div class="bg-gray-50 p-6 rounded-3xl"> <img src="/api/placeholder/400/400" alt="AirPods" class="w-full h-auto mb-6 rounded-xl"> <h3 class="text-2xl font-bold">AirPods</h3> <p class="text-gray-600 mt-2">Les écouteurs sans fil d'Apple ont transformé la façon dont nous écoutons de la musique au quotidien.</p> </div> </div> <div class="product-card"> <div class="bg-gray-50 p-6 rounded-3xl"> <img src="/api/placeholder/400/400" alt="HomePod" class="w-full h-auto mb-6 rounded-xl"> <h3 class="text-2xl font-bold">HomePod</h3> <p class="text-gray-600 mt-2">L'enceinte intelligente d'Apple combine qualité audio exceptionnelle et assistant vocal Siri.</p> </div> </div> <div class="product-card"> <div class="bg-gray-50 p-6 rounded-3xl"> <img src="/api/placeholder/400/400" alt="Apple TV" class="w-full h-auto mb-6 rounded-xl"> <h3 class="text-2xl font-bold">Apple TV</h3> <p class="text-gray-600 mt-2">Le boîtier multimédia d'Apple pour transformer votre télévision en centre de divertissement intelligent.</p> </div> </div> <div class="product-card"> <div class="bg-gray-50 p-6 rounded-3xl"> <img src="/api/placeholder/400/400" alt="Vision Pro" class="w-full h-auto mb-6 rounded-xl"> <h3 class="text-2xl font-bold">Vision Pro</h3> <p class="text-gray-600 mt-2">Le casque de réalité mixte révolutionnaire qui combine réalité virtuelle et réalité augmentée.</p> </div> </div> </div> </div> </div> </section> <section id="innovation-scene" class="scene"> <div class="apple-gradient h-full overflow-auto text-white"> <div class="container mx-auto px-8 py-16"> <h2 class="text-5xl font-bold mb-6 title-animation">Innovation Apple</h2> <p class="text-2xl mb-16 opacity-0 animate-[fadeIn_1s_ease_0.5s_forwards]">Repousser les limites du possible</p> <div class="grid grid-cols-1 md:grid-cols-2 gap-10"> <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-md p-8 rounded-3xl opacity-0 animate-[fadeIn_1s_ease_0.7s_forwards]"> <h3 class="text-3xl font-bold mb-4">Interface utilisateur</h3> <p class="text-lg">De l'introduction de l'interface graphique avec le Macintosh en 1984 à l'interface tactile de l'iPhone, Apple a toujours placé l'expérience utilisateur au centre de ses innovations.</p> </div> <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-md p-8 rounded-3xl opacity-0 animate-[fadeIn_1s_ease_0.9s_forwards]"> <h3 class="text-3xl font-bold mb-4">Écosystème intégré</h3> <p class="text-lg">L'écosystème Apple offre une intégration transparente entre les appareils et services, créant une expérience utilisateur fluide et cohérente.</p> </div> <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-md p-8 rounded-3xl opacity-0 animate-[fadeIn_1s_ease_1.1s_forwards]"> <h3 class="text-3xl font-bold mb-4">Puces Apple Silicon</h3> <p class="text-lg">Le développement de puces Apple Silicon marque une révolution dans l'industrie, offrant des performances exceptionnelles avec une efficacité énergétique inégalée.</p> </div> <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-md p-8 rounded-3xl opacity-0 animate-[fadeIn_1s_ease_1.3s_forwards]"> <h3 class="text-3xl font-bold mb-4">Développement durable</h3> <p class="text-lg">Apple s'engage à réduire son impact environnemental avec des matériaux recyclés, une énergie 100% renouvelable et des objectifs ambitieux de neutralité carbone.</p> </div> <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-md p-8 rounded-3xl opacity-0 animate-[fadeIn_1s_ease_1.5s_forwards]"> <h3 class="text-3xl font-bold mb-4">Santé et bien-être</h3> <p class="text-lg">Avec l'Apple Watch et l'app Santé, Apple révolutionne le suivi de la santé personnelle et ouvre de nouvelles possibilités en matière de recherche médicale.</p> </div> <div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-md p-8 rounded-3xl opacity-0 animate-[fadeIn_1s_ease_1.7s_forwards]"> <h3 class="text-3xl font-bold mb-4">Confidentialité</h3> <p class="text-lg">Apple place la protection de la vie privée au cœur de ses produits et services, avec des fonctionnalités innovantes pour protéger les données des utilisateurs.</p> </div> </div> </div> </div> </section> <script> let currentScene = 'home'; let currentCEO = 0; let videoPosterTimeout; document.addEventListener('DOMContentLoaded', () => { const appleVideo = document.getElementById('apple-video'); const posterContainer = document.getElementById('poster-container'); document.addEventListener('keydown', (e) => { switch(e.key.toLowerCase()) { case 'h': switchScene('home'); break; case 'k': toggleScene('films'); break; case 'p': toggleScene('products'); break; case 'i': toggleScene('innovation'); break; case 'arrowleft': navigateCEO('prev'); break; case 'arrowright': navigateCEO('next'); break; } }); appleVideo.onloadeddata = () => { appleVideo.playbackRate = 1; appleVideo.currentTime = 0; }; }); function toggleScene(scene) { if (currentScene === scene) { switchScene('home'); } else { switchScene(scene); } } function switchScene(scene) { if (scene === currentScene) return; const appleVideo = document.getElementById('apple-video'); const posterContainer = document.getElementById('poster-container'); const transition = document.querySelector('.page-transition'); clearTimeout(videoPosterTimeout); transition.classList.add('active'); setTimeout(() => { document.querySelectorAll('.scene').forEach(el => { el.classList.remove('active'); }); document.getElementById(`${scene}-scene`).classList.add('active'); if (scene === 'films') { posterContainer.classList.remove('visible'); appleVideo.src = 'intro.mp4'; appleVideo.load(); appleVideo.play(); videoPosterTimeout = setTimeout(() => { posterContainer.classList.add('visible'); }, 4000); } else { appleVideo.pause(); } currentScene = scene; setTimeout(() => { transition.classList.remove('active'); }, 500); }, 800); } function changeCEO(index) { if (index === currentCEO) return; const carousel = document.querySelector('.ceo-carousel'); const slides = document.querySelectorAll('.ceo-slide'); const dots = document.querySelectorAll('.nav-dot'); dots[currentCEO].classList.remove('active'); dots[index].classList.add('active'); carousel.style.transform = `translateX(-${index * 100}%)`; currentCEO = index; } function navigateCEO(direction) { if (currentScene !== 'home') return; const totalCEOs = document.querySelectorAll('.ceo-slide').length; if (direction === 'prev') { changeCEO((currentCEO - 1 + totalCEOs) % totalCEOs); } else { changeCEO((currentCEO + 1) % totalCEOs); } } function updateVideoSource(url) { const video = document.getElementById('apple-video'); video.src = url; video.load(); video.play(); } function setCustomVideo() { const videoInput = document.createElement('input'); videoInput.type = 'file'; videoInput.accept = 'video/'; videoInput.onchange = (e) => { const file = e.target.files[0]; if (file) { const url = URL.createObjectURL(file); updateVideoSource(url); } }; videoInput.click(); } function cycleProductsView() { const productCards = document.querySelectorAll('.product-card'); productCards.forEach((card, index) => { setTimeout(() => { card.classList.add('animate-pulse'); setTimeout(() => card.classList.remove('animate-pulse'), 1000); }, index 200); }); } function activateScreensaver() { if (currentScene !== 'home') return; const appleLogoContainer = document.createElement('div'); appleLogoContainer.className = 'fixed inset-0 bg-black flex items-center justify-center z-50'; appleLogoContainer.innerHTML = ` <svg class="w-48 h-48 text-white animate-bounce" viewBox="0 0 814 1000" fill="currentColor"> <path d="M788.1,340.9c-5.8,4.5-108.2,62.2-108.2,190.5c0,148.4,130.3,200.9,134.2,202.2c-0.6,3.2-20.7,71.9-68.7,141.9 c-42.8,61.6-87.5,123.1-155.5,123.1s-85.5-39.5-164-39.5c-76.5,0-103.7,40.8-165.9,40.8s-105.6-57-155.5-127 c-58.6-83.6-105.5-212.6-105.5-335.7c0-125.3,53.5-241.4,150.8-305.9c45.7-30.8,106.9-48.5,169-48.5 c71.5,0,115.9,40.8,153.6,40.8c36.1,0,92.1-43.3,164.1-43.3c44.8,0,105.5,18.8,142.1,36.1C721.6,243,788.8,323.4,788.1,340.9 M642.8,112.5c30.6-36.2,51.5-85.2,51.5-133.6c0-6.6-0.4-13.4-1.3-19.1c-49.9,3.5-109.4,36.5-145.5,79.4 c-28.6,32.9-54.5,83.8-54.5,132.6c0,7.3,0.9,14.6,1.5,16.8C497.4,191.7,584.4,179.1,642.8,112.5"/> </svg> `; document.body.appendChild(appleLogoContainer); appleLogoContainer.addEventListener('click', () => { appleLogoContainer.remove(); }); setTimeout(() => { if (document.body.contains(appleLogoContainer)) { appleLogoContainer.remove(); } }, 10000); } document.addEventListener('keydown', (e) => { if (e.key === 'v' && e.ctrlKey) { setCustomVideo(); } if (e.key === 's' && e.ctrlKey) { activateScreensaver(); e.preventDefault(); } if (e.key === 'c' && e.ctrlKey && currentScene === 'products') { cycleProductsView(); e.preventDefault(); } }); setInterval(() => { if (currentScene === 'home') { navigateCEO('next'); } }, 8000); </script> </body> </html>

| ver. 1.6 | Github | . | PHP 8.1.33 | Генерация страницы: 0 | proxy | phpinfo | Настройка