Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>YTLearn - Transformez vos vidéos en jeux éducatifs</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --yt-red: #FF0000; | |
| --yt-red-dark: #CC0000; | |
| --deep-black: #0A0A0A; | |
| --pure-white: #FFFFFF; | |
| --glass-effect: rgba(255, 255, 255, 0.08); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--deep-black); | |
| color: var(--pure-white); | |
| overflow-x: hidden; | |
| } | |
| #particles-js { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| background: var(--deep-black); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(10,10,10,0.9) 0%, rgba(20,20,30,0.95) 100%); | |
| } | |
| .input-glow:focus { | |
| box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.3); | |
| } | |
| .yt-button { | |
| background: var(--yt-red); | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .yt-button:hover { | |
| background: var(--yt-red-dark); | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px -5px rgba(255, 0, 0, 0.3); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .slide-up { | |
| animation: slideUp 0.8s ease-out forwards; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(30px); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .glass-card { | |
| background: var(--glass-effect); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .floating { | |
| animation: floating 8s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .scroll-indicator { | |
| animation: bounce 2s infinite; | |
| } | |
| @keyframes bounce { | |
| 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} | |
| 40% {transform: translateY(-10px);} | |
| 60% {transform: translateY(-5px);} | |
| } | |
| @media (max-width: 768px) { | |
| .mobile-sticky-cta { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 90%; | |
| z-index: 100; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Particles Background --> | |
| <div id="particles-js"></div> | |
| <!-- Hero Section --> | |
| <div class="relative min-h-screen flex items-center justify-center px-4 sm:px-6 lg:px-8 overflow-hidden hero-gradient"> | |
| <div class="absolute inset-0 z-10"> | |
| <div class="absolute top-0 left-0 w-full h-full opacity-20"> | |
| <div class="absolute top-1/4 left-1/4 w-64 h-64 rounded-full bg-red-500 filter blur-3xl opacity-20"></div> | |
| <div class="absolute top-2/3 left-1/3 w-96 h-96 rounded-full bg-blue-500 filter blur-3xl opacity-10"></div> | |
| <div class="absolute top-1/3 right-1/4 w-80 h-80 rounded-full bg-purple-500 filter blur-3xl opacity-15"></div> | |
| </div> | |
| </div> | |
| <div class="relative z-20 w-full max-w-4xl mx-auto text-center"> | |
| <!-- Logo --> | |
| <div class="flex justify-center mb-8 slide-up" style="animation-delay: 0.2s;"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-youtube text-4xl text-red-500 mr-3"></i> | |
| <span class="text-3xl font-bold tracking-tight">YTLearn</span> | |
| </div> | |
| </div> | |
| <!-- Main Heading --> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 slide-up" style="animation-delay: 0.4s;"> | |
| <span class="block">Transformez vos</span> | |
| <span class="text-red-500">vidéos en jeux</span> | |
| <span class="block">éducatifs</span> | |
| </h1> | |
| <!-- Subheading --> | |
| <p class="text-lg md:text-xl text-gray-300 max-w-2xl mx-auto mb-12 slide-up" style="animation-delay: 0.6s;"> | |
| L'IA crée instantanément des quiz interactifs, flashcards et exercices à partir de vos liens YouTube ou PDF. | |
| </p> | |
| <!-- Main Input Card --> | |
| <div class="glass-card rounded-2xl p-6 md:p-8 mb-8 slide-up" style="animation-delay: 0.8s;"> | |
| <div class="mb-6"> | |
| <div class="relative"> | |
| <input | |
| type="text" | |
| placeholder="Collez votre lien YouTube ou importez un PDF" | |
| class="w-full px-5 py-4 bg-black bg-opacity-40 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-red-500 input-glow transition duration-200" | |
| > | |
| <div class="absolute right-2 top-1/2 transform -translate-y-1/2"> | |
| <button class="px-2 py-1 text-xs bg-gray-800 text-gray-300 rounded-md"> | |
| <i class="fas fa-paperclip mr-1"></i> Importer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <textarea | |
| placeholder="Ajoutez un texte pour guider votre jeu (ex.: 'axe sur vocabulaire', 'focus formules mathématiques')" | |
| rows="2" | |
| class="w-full px-5 py-3 bg-black bg-opacity-40 border border-gray-700 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:border-red-500 input-glow transition duration-200" | |
| ></textarea> | |
| </div> | |
| <button class="w-full yt-button text-white font-bold py-4 px-6 rounded-xl text-lg flex items-center justify-center pulse-animation"> | |
| <span>Générer mon quiz</span> | |
| <i class="fas fa-bolt ml-2"></i> | |
| </button> | |
| </div> | |
| <!-- Trust Indicators --> | |
| <div class="flex flex-wrap justify-center items-center gap-6 text-gray-400 text-sm slide-up" style="animation-delay: 1s;"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-shield-alt mr-2 text-green-400"></i> | |
| <span>Sécurisé & privé</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt mr-2 text-yellow-400"></i> | |
| <span>Instantané</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-magic mr-2 text-purple-400"></i> | |
| <span>IA puissante</span> | |
| </div> | |
| </div> | |
| <!-- Scroll Indicator --> | |
| <div class="mt-16 scroll-indicator"> | |
| <i class="fas fa-chevron-down text-gray-400 text-xl"></i> | |
| </div> | |
| </div> | |
| <!-- Floating Elements --> | |
| <div class="absolute bottom-20 left-10 w-16 h-16 rounded-full bg-red-500 filter blur-xl opacity-20 floating" style="animation-delay: 0.5s;"></div> | |
| <div class="absolute top-1/3 right-20 w-24 h-24 rounded-full bg-blue-500 filter blur-xl opacity-15 floating" style="animation-delay: 1s;"></div> | |
| </div> | |
| <!-- Mobile Sticky CTA --> | |
| <div class="md:hidden mobile-sticky-cta"> | |
| <button class="w-full yt-button text-white font-bold py-4 px-6 rounded-xl text-lg flex items-center justify-center shadow-xl"> | |
| <span>Générer mon quiz</span> | |
| <i class="fas fa-bolt ml-2"></i> | |
| </button> | |
| </div> | |
| <!-- Features Section --> | |
| <div class="relative py-20 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-90"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| <span class="text-white">Apprentissage</span> | |
| <span class="text-red-500">réinventé</span> | |
| </h2> | |
| <p class="text-lg text-gray-400 max-w-2xl mx-auto"> | |
| Découvrez comment YTLearn transforme votre façon d'étudier | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="glass-card rounded-2xl p-8 transition-all duration-300 hover:bg-opacity-20"> | |
| <div class="w-14 h-14 rounded-xl bg-red-500 bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i class="fab fa-youtube text-2xl text-red-500"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Vidéos YouTube</h3> | |
| <p class="text-gray-400"> | |
| Transformez n'importe quelle vidéo en expérience d'apprentissage interactive en quelques secondes. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="glass-card rounded-2xl p-8 transition-all duration-300 hover:bg-opacity-20"> | |
| <div class="w-14 h-14 rounded-xl bg-blue-500 bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-gamepad text-2xl text-blue-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Jeux interactifs</h3> | |
| <p class="text-gray-400"> | |
| Quiz, puzzles et challenges adaptés à votre niveau pour une mémorisation optimale. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="glass-card rounded-2xl p-8 transition-all duration-300 hover:bg-opacity-20"> | |
| <div class="w-14 h-14 rounded-xl bg-purple-500 bg-opacity-20 flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-2xl text-purple-400"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Flashcards intelligentes</h3> | |
| <p class="text-gray-400"> | |
| Des cartes mémoire optimisées par l'IA qui s'adaptent à votre rythme d'apprentissage. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Demo Preview --> | |
| <div class="relative py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| <span class="text-white">Une interface</span> | |
| <span class="text-red-500">ultra-immersive</span> | |
| </h2> | |
| <p class="text-lg text-gray-400 mb-8"> | |
| Plongez dans des quiz interactifs avec des animations fluides et des feedbacks instantanés qui rendent l'apprentissage addictif. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-white font-medium">Rétroaction immédiate</p> | |
| <p class="text-gray-400 mt-1">Explications détaillées après chaque réponse</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-white font-medium">Adaptatif</p> | |
| <p class="text-gray-400 mt-1">Difficulté qui s'ajuste automatiquement</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 rounded-full bg-red-500 flex items-center justify-center"> | |
| <i class="fas fa-check text-white text-sm"></i> | |
| </div> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-white font-medium">Visuel impactant</p> | |
| <p class="text-gray-400 mt-1">Illustrations et animations pour mieux retenir</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 relative"> | |
| <div class="relative max-w-md mx-auto"> | |
| <div class="absolute -inset-4 bg-red-500 rounded-2xl opacity-20 blur-xl"></div> | |
| <div class="relative bg-gray-900 rounded-2xl overflow-hidden shadow-2xl"> | |
| <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" | |
| alt="App preview" | |
| class="w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Final CTA --> | |
| <div class="relative py-20 px-4 sm:px-6 lg:px-8 bg-black"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| <span class="text-white">Prêt à révolutionner</span> | |
| <span class="text-red-500">votre apprentissage ?</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto"> | |
| Essayez YTLearn gratuitement. Aucune carte de crédit requise. | |
| </p> | |
| <div class="max-w-md mx-auto"> | |
| <div class="relative"> | |
| <input | |
| type="text" | |
| placeholder="Votre email" | |
| class="w-full px-5 py-4 bg-gray-900 border border-gray-800 rounded-xl text-white placeholder-gray-500 focus:outline-none focus:border-red-500 transition duration-200" | |
| > | |
| <button class="absolute right-2 top-1/2 transform -translate-y-1/2 yt-button text-white font-bold py-2 px-6 rounded-lg"> | |
| Essayer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="relative bg-gray-900 py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-6 md:mb-0"> | |
| <i class="fab fa-youtube text-3xl text-red-500 mr-3"></i> | |
| <span class="text-2xl font-bold">YTLearn</span> | |
| </div> | |
| <div class="flex space-x-6 mb-6 md:mb-0"> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Fonctionnalités</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Tarifs</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">À propos</a> | |
| <a href="#" class="text-gray-400 hover:text-white transition">Confidentialité</a> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm"> | |
| © 2023 YTLearn. Tous droits réservés. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize particles.js | |
| document.addEventListener('DOMContentLoaded', function() { | |
| particlesJS('particles-js', { | |
| "particles": { | |
| "number": { | |
| "value": 60, | |
| "density": { | |
| "enable": true, | |
| "value_area": 800 | |
| } | |
| }, | |
| "color": { | |
| "value": "#ff0000" | |
| }, | |
| "shape": { | |
| "type": "circle", | |
| "stroke": { | |
| "width": 0, | |
| "color": "#000000" | |
| }, | |
| "polygon": { | |
| "nb_sides": 5 | |
| } | |
| }, | |
| "opacity": { | |
| "value": 0.3, | |
| "random": true, | |
| "anim": { | |
| "enable": true, | |
| "speed": 1, | |
| "opacity_min": 0.1, | |
| "sync": false | |
| } | |
| }, | |
| "size": { | |
| "value": 3, | |
| "random": true, | |
| "anim": { | |
| "enable": false, | |
| "speed": 40, | |
| "size_min": 0.1, | |
| "sync": false | |
| } | |
| }, | |
| "line_linked": { | |
| "enable": true, | |
| "distance": 150, | |
| "color": "#ff0000", | |
| "opacity": 0.2, | |
| "width": 1 | |
| }, | |
| "move": { | |
| "enable": true, | |
| "speed": 1, | |
| "direction": "none", | |
| "random": true, | |
| "straight": false, | |
| "out_mode": "out", | |
| "bounce": false, | |
| "attract": { | |
| "enable": false, | |
| "rotateX": 600, | |
| "rotateY": 1200 | |
| } | |
| } | |
| }, | |
| "interactivity": { | |
| "detect_on": "canvas", | |
| "events": { | |
| "onhover": { | |
| "enable": true, | |
| "mode": "grab" | |
| }, | |
| "onclick": { | |
| "enable": true, | |
| "mode": "push" | |
| }, | |
| "resize": true | |
| }, | |
| "modes": { | |
| "grab": { | |
| "distance": 140, | |
| "line_linked": { | |
| "opacity": 0.5 | |
| } | |
| }, | |
| "bubble": { | |
| "distance": 400, | |
| "size": 40, | |
| "duration": 2, | |
| "opacity": 8, | |
| "speed": 3 | |
| }, | |
| "repulse": { | |
| "distance": 200, | |
| "duration": 0.4 | |
| }, | |
| "push": { | |
| "particles_nb": 4 | |
| }, | |
| "remove": { | |
| "particles_nb": 2 | |
| } | |
| } | |
| }, | |
| "retina_detect": true | |
| }); | |
| // Scroll animations | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.slide-up'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementPosition < windowHeight - 100) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', animateOnScroll); | |
| animateOnScroll(); // Trigger on load for elements already in view | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=iamTheFoxCoder/ytlearn-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |