Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Visualingo - Learn Languages Visually</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom styles */ | |
| .blob { | |
| position: absolute; | |
| width: 500px; | |
| height: 500px; | |
| background: linear-gradient(45deg, #4f46e5 0%, #10b981 100%); | |
| border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; | |
| filter: blur(80px); | |
| opacity: 0.15; | |
| z-index: 0; | |
| animation: morph 8s ease-in-out infinite; | |
| } | |
| .blob2 { | |
| width: 300px; | |
| height: 300px; | |
| right: -100px; | |
| bottom: -100px; | |
| background: linear-gradient(45deg, #f43f5e 0%, #f59e0b 100%); | |
| animation-delay: 2s; | |
| } | |
| @keyframes morph { | |
| 0% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; } | |
| 50% { border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; } | |
| 100% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; } | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #4f46e5, #10b981); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .language-card { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .language-card:hover { | |
| transform: translateY(-5px) scale(1.02); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .feature-icon { | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 16px; | |
| font-size: 24px; | |
| flex-shrink: 0; | |
| } | |
| @media (max-width: 767px) { | |
| .hero-content { | |
| flex-direction: column-reverse; | |
| text-align: center; | |
| } | |
| .hero-image { | |
| max-width: 300px; | |
| margin: 0 auto 2rem; | |
| } | |
| .feature-card { | |
| text-align: center; | |
| } | |
| .feature-icon { | |
| margin: 0 auto; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="h-8 w-8 rounded-md bg-indigo-600 flex items-center justify-center"> | |
| <i class="fas fa-language text-white"></i> | |
| </div> | |
| <span class="ml-2 text-xl font-bold text-gray-900">Visualingo</span> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden"> | |
| <div class="blob"></div> | |
| <div class="blob blob2"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-16 pb-20 md:pt-24 md:pb-32"> | |
| <div class="flex flex-col md:flex-row hero-content items-center"> | |
| <div class="md:w-1/2 text-center md:text-left mb-12 md:mb-0"> | |
| <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"> | |
| <span class="block">Learn languages the</span> | |
| <span class="block gradient-text">visual way</span> | |
| </h1> | |
| <p class="mt-3 max-w-md mx-auto text-lg text-gray-600 sm:text-xl md:mt-5 md:max-w-3xl"> | |
| Associate words with vivid images that create lasting mental connections. | |
| </p> | |
| </div> | |
| <div class="md:w-1/2 hero-image"> | |
| <div class="animate-float"> | |
| <div class="relative"> | |
| <div class="w-full max-w-md mx-auto rounded-lg shadow-xl bg-white p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="h-3 w-24 bg-indigo-200 rounded"></div> | |
| <div class="h-2 w-16 bg-gray-200 rounded mt-1"></div> | |
| </div> | |
| </div> | |
| <div class="text-xs text-gray-400">Now learning</div> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-4 h-48 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <img src="https://img.icons8.com/color/96/000000/apple.png" class="mx-auto h-16 w-16" alt="apple"> | |
| <div class="mt-2 text-xl font-bold">Apple</div> | |
| <div class="mt-1 text-lg text-gray-600">Manzana</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-4"> | |
| <button class="px-4 py-2 bg-gray-200 rounded-lg text-gray-700"> | |
| <i class="fas fa-times"></i> Don't know | |
| </button> | |
| <button class="px-4 py-2 bg-green-100 text-green-700 rounded-lg"> | |
| <i class="fas fa-check"></i> Know it | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| How visual learning works | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| Our brain processes images 60,000x faster than text | |
| </p> | |
| </div> | |
| <div class="mt-16"> | |
| <div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3"> | |
| <div class="feature-card pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full"> | |
| <div class="feature-icon bg-indigo-50 text-indigo-600 mx-auto"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-gray-900">Dual Coding</h3> | |
| <p class="mt-5 text-base text-gray-600"> | |
| Words + images create two memory pathways, making recall easier. | |
| </p> | |
| <div class="mt-4 p-2 bg-white rounded border"> | |
| <div class="flex"> | |
| <img src="https://img.icons8.com/color/48/000000/dog.png" class="h-10 w-10"> | |
| <div class="ml-2"> | |
| <div class="font-medium">Dog</div> | |
| <div class="text-sm text-gray-500">Perro (Spanish)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-card pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full"> | |
| <div class="feature-icon bg-green-50 text-green-600 mx-auto"> | |
| <i class="fas fa-history"></i> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-gray-900">Spaced Repetition</h3> | |
| <p class="mt-5 text-base text-gray-600"> | |
| Optimal timing between reviews strengthens memory retention. | |
| </p> | |
| <div class="mt-4 flex justify-around"> | |
| <div class="text-center"> | |
| <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center mx-auto">1</div> | |
| <div class="text-xs mt-1">Today</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center mx-auto">2</div> | |
| <div class="text-xs mt-1">3 days</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center mx-auto">3</div> | |
| <div class="text-xs mt-1">1 week</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="h-8 w-8 bg-green-100 rounded-full flex items-center justify-center mx-auto">4</div> | |
| <div class="text-xs mt-1">1 month</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="feature-card pt-6"> | |
| <div class="flow-root bg-gray-50 rounded-lg px-6 pb-8 h-full"> | |
| <div class="feature-icon bg-blue-50 text-blue-600 mx-auto"> | |
| <i class="fas fa-film"></i> | |
| </div> | |
| <h3 class="mt-8 text-lg font-medium text-gray-900">Contextual Learning</h3> | |
| <p class="mt-5 text-base text-gray-600"> | |
| Words learned in context are remembered better than isolated vocabulary. | |
| </p> | |
| <div class="mt-4 p-2 bg-white rounded border text-sm italic"> | |
| "The <span class="font-bold text-blue-600">dog</span> chased its <span class="font-bold text-blue-600">ball</span> in the park" | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demonstration --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> | |
| Try it yourself | |
| </h2> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> | |
| A sample of our visual learning system | |
| </p> | |
| </div> | |
| <div class="mt-12 max-w-lg mx-auto"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-4 bg-indigo-600 text-white text-center font-bold"> | |
| Visual Vocabulary Trainer | |
| </div> | |
| <div id="flashcard-container" class="p-6"> | |
| <div id="flashcard" class="bg-gray-100 rounded-lg p-8 h-64 flex flex-col items-center justify-center cursor-pointer transition-all duration-300"> | |
| <img id="flashcard-image" src="https://img.icons8.com/color/96/000000/dog.png" class="h-24 w-24"> | |
| <div id="flashcard-text" class="mt-4 text-center"> | |
| <div class="text-2xl font-bold">Dog</div> | |
| <div class="text-lg text-gray-600 mt-2">Click to reveal translation</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button onclick="handleDonKnow()" class="px-4 py-2 bg-gray-200 rounded-lg text-gray-700"> | |
| <i class="fas fa-times"></i> Don't know | |
| </button> | |
| <button onclick="handleKnowIt()" class="px-4 py-2 bg-green-100 text-green-700 rounded-lg"> | |
| <i class="fas fa-check"></i> Know it | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gray-50 border-t text-center text-sm text-gray-500"> | |
| Progress: <span id="progress">0</span>/5 words learned | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Flashcard data | |
| const vocabulary = [ | |
| { word: "Dog", translation: "Perro (Spanish)", image: "https://img.icons8.com/color/96/000000/dog.png" }, | |
| { word: "House", translation: "Maison (French)", image: "https://img.icons8.com/color/96/000000/home.png" }, | |
| { word: "Book", translation: "本 (Japanese)", image: "https://img.icons8.com/color/96/000000/book.png" }, | |
| { word: "Apple", translation: "Manzana (Spanish)", image: "https://img.icons8.com/color/96/000000/apple.png" }, | |
| { word: "Water", translation: "水 (Japanese)", image: "https://img.icons8.com/color/96/000000/water.png" } | |
| ]; | |
| let currentCard = 0; | |
| let score = 0; | |
| let revealed = false; | |
| // Initialize first card | |
| updateCard(); | |
| function updateCard() { | |
| const card = vocabulary[currentCard]; | |
| document.getElementById('flashcard-image').src = card.image; | |
| document.getElementById('flashcard-text').innerHTML = ` | |
| <div class="text-2xl font-bold">${card.word}</div> | |
| <div class="text-lg text-gray-600 mt-2">${revealed ? card.translation : 'Click to reveal translation'}</div> | |
| `; | |
| } | |
| document.getElementById('flashcard').addEventListener('click', function() { | |
| revealed = !revealed; | |
| updateCard(); | |
| }); | |
| function handleDonKnow() { | |
| nextCard(); | |
| } | |
| function handleKnowIt() { | |
| score++; | |
| document.getElementById('progress').textContent = score; | |
| nextCard(); | |
| } | |
| function nextCard() { | |
| revealed = false; | |
| currentCard = (currentCard + 1) % vocabulary.length; | |
| updateCard(); | |
| if (score >= 5) { | |
| document.getElementById('progress').textContent = '5'; | |
| } | |
| } | |
| </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=luigi12345/visualingo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |