Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Learn Auslan - Australian Sign Language</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> | |
| .sign-video { | |
| width: 100%; | |
| max-width: 300px; | |
| height: auto; | |
| border-radius: 10px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .practice-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .webcam-feed { | |
| width: 100%; | |
| border-radius: 10px; | |
| transform: scaleX(-1); | |
| } | |
| .feedback-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| border-radius: 10px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .feedback-visible { | |
| opacity: 1; | |
| } | |
| .alphabet-card { | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .alphabet-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform-origin: 50% 50%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-blue-600 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-hands-helping text-2xl"></i> | |
| <span class="text-xl font-bold">Learn Auslan</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#lessons" class="hover:text-blue-200 transition">Lessons</a> | |
| <a href="#alphabet" class="hover:text-blue-200 transition">Alphabet</a> | |
| <a href="#practice" class="hover:text-blue-200 transition">Practice</a> | |
| <a href="#resources" class="hover:text-blue-200 transition">Resources</a> | |
| </div> | |
| <button class="md:hidden text-xl" id="mobile-menu-button"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="md:hidden hidden bg-blue-700 px-4 py-2" id="mobile-menu"> | |
| <a href="#lessons" class="block py-2 hover:text-blue-200 transition">Lessons</a> | |
| <a href="#alphabet" class="block py-2 hover:text-blue-200 transition">Alphabet</a> | |
| <a href="#practice" class="block py-2 hover:text-blue-200 transition">Practice</a> | |
| <a href="#resources" class="block py-2 hover:text-blue-200 transition">Resources</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Learn Australian Sign Language</h1> | |
| <p class="text-xl mb-6">Discover the beauty of Auslan and connect with the Deaf community in Australia.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#lessons" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-100 transition text-center">Start Learning</a> | |
| <a href="#practice" class="border-2 border-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition text-center">Practice Now</a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1600857544200-b2f666a9a1ec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="People signing" class="rounded-lg shadow-2xl max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Why Learn Auslan?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Connect with Community</h3> | |
| <p class="text-gray-600">Auslan is the primary language of the Australian Deaf community. Learning it helps bridge communication gaps.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Cognitive Benefits</h3> | |
| <p class="text-gray-600">Learning sign language improves memory, spatial awareness, and multitasking skills.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fas fa-hands"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Express Yourself</h3> | |
| <p class="text-gray-600">Auslan is a rich, visual language with its own grammar and cultural nuances.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lessons --> | |
| <section id="lessons" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-8">Beginner Lessons</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Start your Auslan journey with these foundational lessons. Each lesson includes video demonstrations and interactive exercises.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Lesson 1 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Greetings in Auslan" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 left-2 bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Beginner</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Greetings & Basics</h3> | |
| <p class="text-gray-600 mb-4">Learn how to introduce yourself and basic greetings in Auslan.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <a href="#" class="text-blue-500 font-semibold hover:text-blue-700">Start Lesson</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lesson 2 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1600857544200-b2f666a9a1ec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Alphabet in Auslan" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 left-2 bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Beginner</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Auslan Alphabet</h3> | |
| <p class="text-gray-600 mb-4">Master the Auslan alphabet for fingerspelling names and words.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <a href="#" class="text-blue-500 font-semibold hover:text-blue-700">Start Lesson</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lesson 3 --> | |
| <div class="bg-white rounded-xl overflow-hidden shadow-md hover:shadow-lg transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1603383928972-0b3b1266621b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Numbers in Auslan" class="w-full h-48 object-cover"> | |
| <div class="absolute top-2 left-2 bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-semibold">Beginner</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Numbers & Counting</h3> | |
| <p class="text-gray-600 mb-4">Learn to sign numbers and use them in everyday situations.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| <a href="#" class="text-blue-500 font-semibold hover:text-blue-700">Start Lesson</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block bg-blue-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition">View All Lessons</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Alphabet Section --> | |
| <section id="alphabet" class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-8">Auslan Alphabet</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">The Auslan alphabet uses two hands for fingerspelling. Practice each letter to improve your signing skills.</p> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> | |
| <!-- Letters A-F --> | |
| <div class="alphabet-card bg-gray-50 p-4 rounded-lg shadow-sm text-center cursor-pointer" onclick="showLetterVideo('A')"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">A</div> | |
| <img src="https://via.placeholder.com/100x100?text=Auslan+A" alt="Auslan letter A" class="w-20 h-20 mx-auto mb-2 rounded"> | |
| <div class="text-sm text-gray-500">Click to practice</div> | |
| </div> | |
| <div class="alphabet-card bg-gray-50 p-4 rounded-lg shadow-sm text-center cursor-pointer" onclick="showLetterVideo('B')"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">B</div> | |
| <img src="https://via.placeholder.com/100x100?text=Auslan+B" alt="Auslan letter B" class="w-20 h-20 mx-auto mb-2 rounded"> | |
| <div class="text-sm text-gray-500">Click to practice</div> | |
| </div> | |
| <div class="alphabet-card bg-gray-50 p-4 rounded-lg shadow-sm text-center cursor-pointer" onclick="showLetterVideo('C')"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">C</div> | |
| <img src="https://via.placeholder.com/100x100?text=Auslan+C" alt="Auslan letter C" class="w-20 h-20 mx-auto mb-2 rounded"> | |
| <div class="text-sm text-gray-500">Click to practice</div> | |
| </div> | |
| <div class="alphabet-card bg-gray-50 p-4 rounded-lg shadow-sm text-center cursor-pointer" onclick="showLetterVideo('D')"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">D</div> | |
| <img src="https://via.placeholder.com/100x100?text=Auslan+D" alt="Auslan letter D" class="w-20 h-20 mx-auto mb-2 rounded"> | |
| <div class="text-sm text-gray-500">Click to practice</div> | |
| </div> | |
| <div class="alphabet-card bg-gray-50 p-4 rounded-lg shadow-sm text-center cursor-pointer" onclick="showLetterVideo('E')"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">E</div> | |
| <img src="https://via.placeholder.com/100x100?text=Auslan+E" alt="Auslan letter E" class="w-20 h-20 mx-auto mb-2 rounded"> | |
| <div class="text-sm text-gray-500">Click to practice</div> | |
| </div> | |
| <div class="alphabet-card bg-gray-50 p-4 rounded-lg shadow-sm text-center cursor-pointer" onclick="showLetterVideo('F')"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">F</div> | |
| <img src="https://via.placeholder.com/100x100?text=Auslan+F" alt="Auslan letter F" class="w-20 h-20 mx-auto mb-2 rounded"> | |
| <div class="text-sm text-gray-500">Click to practice</div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-8"> | |
| <button id="show-more-letters" class="text-blue-500 font-semibold hover:text-blue-700">Show More Letters</button> | |
| </div> | |
| <!-- Letter Video Modal --> | |
| <div id="letter-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-6 max-w-md w-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-2xl font-bold" id="modal-letter">A</h3> | |
| <button onclick="closeLetterModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <video id="letter-video" class="sign-video mb-4" controls> | |
| <source src="#" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| <div class="flex justify-between"> | |
| <button onclick="practiceLetter()" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"> | |
| <i class="fas fa-hands mr-2"></i> Practice | |
| </button> | |
| <button onclick="closeLetterModal()" class="border border-gray-300 px-4 py-2 rounded hover:bg-gray-100"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Practice Section --> | |
| <section id="practice" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-8">Practice Your Auslan</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Use your webcam to practice Auslan signs and get instant feedback on your form.</p> | |
| <div class="flex flex-col lg:flex-row gap-8 items-center"> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-xl font-semibold mb-4">Sign the Word:</h3> | |
| <div class="bg-white p-6 rounded-lg shadow-md mb-6"> | |
| <div class="text-4xl font-bold text-center mb-4" id="practice-word">HELLO</div> | |
| <div class="flex justify-center mb-4"> | |
| <video class="sign-video" controls> | |
| <source src="https://example.com/hello.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| </div> | |
| <div class="text-center text-gray-600 mb-4">Watch the demonstration, then try signing it yourself.</div> | |
| </div> | |
| <div class="flex justify-center space-x-4"> | |
| <button id="start-practice" class="bg-blue-500 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-600 transition"> | |
| <i class="fas fa-video mr-2"></i> Start Practice | |
| </button> | |
| <button id="next-word" class="border border-blue-500 text-blue-500 px-6 py-3 rounded-lg font-semibold hover:bg-blue-50 transition"> | |
| Next Word | |
| </button> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="practice-container"> | |
| <video id="webcam" class="webcam-feed hidden" autoplay playsinline></video> | |
| <canvas id="canvas" class="hidden"></canvas> | |
| <div class="bg-gray-200 rounded-lg aspect-video flex items-center justify-center" id="webcam-placeholder"> | |
| <div class="text-center p-6"> | |
| <div class="text-6xl text-gray-400 mb-4"> | |
| <i class="fas fa-video-slash"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Webcam Disabled</h3> | |
| <p class="text-gray-600 mb-4">Click "Start Practice" to enable your webcam and begin signing.</p> | |
| </div> | |
| </div> | |
| <div id="feedback-overlay" class="feedback-overlay"> | |
| <div class="text-white text-center"> | |
| <div class="text-6xl mb-4" id="feedback-icon"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2" id="feedback-title">Great Job!</h3> | |
| <p class="text-xl" id="feedback-message">Your sign looks correct!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-white p-4 rounded-lg shadow-sm"> | |
| <h4 class="font-semibold mb-2">Practice Tips:</h4> | |
| <ul class="list-disc pl-5 space-y-1 text-gray-600"> | |
| <li>Make sure your hands are well-lit and visible to the camera</li> | |
| <li>Sign slowly and clearly at first, then increase speed</li> | |
| <li>Pay attention to hand shape, movement, and facial expressions</li> | |
| <li>Practice each sign multiple times</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Progress Tracking --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-8">Your Learning Progress</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Track your Auslan learning journey and see how far you've come.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-semibold mb-4 text-center">Letters Mastered</h3> | |
| <div class="flex justify-center"> | |
| <div class="relative w-32 h-32"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <circle class="text-gray-200" stroke-width="10" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> | |
| <circle class="text-blue-500 progress-ring-circle" stroke-width="10" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="175.84" /> | |
| </svg> | |
| <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center"> | |
| <span class="text-3xl font-bold">14/26</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <p class="text-gray-600">You've mastered 14 out of 26 letters</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-semibold mb-4 text-center">Words Learned</h3> | |
| <div class="flex justify-center"> | |
| <div class="relative w-32 h-32"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <circle class="text-gray-200" stroke-width="10" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> | |
| <circle class="text-green-500 progress-ring-circle" stroke-width="10" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="150.72" /> | |
| </svg> | |
| <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center"> | |
| <span class="text-3xl font-bold">42</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <p class="text-gray-600">You've learned 42 Auslan words</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-semibold mb-4 text-center">Practice Streak</h3> | |
| <div class="flex justify-center"> | |
| <div class="relative w-32 h-32"> | |
| <svg class="w-full h-full" viewBox="0 0 100 100"> | |
| <circle class="text-gray-200" stroke-width="10" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" /> | |
| <circle class="text-yellow-500 progress-ring-circle" stroke-width="10" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="200.96" /> | |
| </svg> | |
| <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center"> | |
| <span class="text-3xl font-bold">5</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <p class="text-gray-600">5 day practice streak! Keep it up!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 bg-blue-50 p-6 rounded-lg border border-blue-100"> | |
| <h3 class="text-xl font-semibold mb-3">Daily Practice Goal</h3> | |
| <div class="flex items-center"> | |
| <div class="w-full bg-gray-200 rounded-full h-4"> | |
| <div class="bg-blue-500 h-4 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <span class="ml-4 font-medium">65% complete</span> | |
| </div> | |
| <p class="mt-2 text-gray-600">Practice 3 more signs today to reach your goal!</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section id="resources" class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-8">Auslan Resources</h2> | |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Explore these additional resources to deepen your Auslan learning experience.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-3xl mb-4"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Auslan Dictionary</h3> | |
| <p class="text-gray-600 mb-4">Comprehensive online dictionary with video demonstrations of thousands of Auslan signs.</p> | |
| <a href="#" class="text-blue-500 font-semibold hover:text-blue-700 inline-flex items-center"> | |
| Visit Resource <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-3xl mb-4"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Deaf Societies</h3> | |
| <p class="text-gray-600 mb-4">Connect with your local Deaf society for classes, events, and community engagement.</p> | |
| <a href="#" class="text-blue-500 font-semibold hover:text-blue-700 inline-flex items-center"> | |
| Find Local Groups <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-3xl mb-4"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Certified Courses</h3> | |
| <p class="text-gray-600 mb-4">Information about nationally accredited Auslan courses for serious learners.</p> | |
| <a href="#" class="text-blue-500 font-semibold hover:text-blue-700 inline-flex items-center"> | |
| Explore Courses <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-3xl mb-4"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Auslan Apps</h3> | |
| <p class="text-gray-600 mb-4">Mobile applications to practice Auslan on the go with interactive quizzes.</p> | |
| <a href="#" class="text-blue-500 font-semibold hover:text-blue-700 inline-flex items-center"> | |
| View App List <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-3xl mb-4"> | |
| <i class="fas fa-film"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Auslan Media</h3> | |
| <p class="text-gray-600 mb-4">TV shows, movies, and YouTube channels in Auslan for immersive learning.</p> | |
| <a href="#" class="text-blue-500 font-semibold hover:text-blue-700 inline-flex items-center"> | |
| Browse Media <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-3xl mb-4"> | |
| <i class="fas fa-child"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">For Kids</h3> | |
| <p class="text-gray-600 mb-4">Fun resources to teach children Auslan through games and stories.</p> | |
| <a href="#" class="text-blue-500 font-semibold hover:text-blue-700 inline-flex items-center"> | |
| Kids Resources <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4 max-w-4xl"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold mb-2">Stay Updated</h2> | |
| <p class="text-blue-100">Subscribe to our newsletter for new lessons, tips, and Auslan community news.</p> | |
| </div> | |
| <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto"> | |
| <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300 text-gray-800"> | |
| <button type="submit" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-blue-100 transition whitespace-nowrap"> | |
| Subscribe | |
| </button> | |
| </form> | |
| <p class="text-center text-blue-200 text-sm mt-4">We respect your privacy. Unsubscribe at any time.</p> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-hands-helping text-2xl"></i> | |
| <span class="text-xl font-bold">Learn Auslan</span> | |
| </div> | |
| <p class="text-gray-400">Helping Australians learn and connect through Auslan since 2023.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#lessons" class="text-gray-400 hover:text-white transition">Lessons</a></li> | |
| <li><a href="#alphabet" class="text-gray-400 hover:text-white transition">Alphabet</a></li> | |
| <li><a href="#practice" class="text-gray-400 hover:text-white transition">Practice</a></li> | |
| <li><a href="#resources" class="text-gray-400 hover:text-white transition">Resources</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Connect</h4> | |
| <div class="flex space-x-4 mb-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition text-xl"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| <p class="text-gray-400">contact@learnauslan.edu.au</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Learn Auslan. All rights reserved.</p> | |
| <p class="mt-2 text-sm">Auslan is the language of the Deaf community in Australia. We acknowledge and respect Deaf culture and community.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Show more letters | |
| document.getElementById('show-more-letters').addEventListener('click', function() { | |
| // In a real implementation, this would load more letter cards | |
| alert('In a full implementation, this would load more letters of the alphabet.'); | |
| this.textContent = 'All Letters Loaded'; | |
| this.classList.add('text-gray-500'); | |
| this.classList.remove('text-blue-500', 'hover:text-blue-700', 'font-semibold'); | |
| this.disabled = true; | |
| }); | |
| // Letter modal functions | |
| function showLetterVideo(letter) { | |
| document.getElementById('modal-letter').textContent = letter; | |
| // In a real implementation, this would set the video source for the selected letter | |
| document.getElementById('letter-modal').classList.remove('hidden'); | |
| } | |
| function closeLetterModal() { | |
| document.getElementById('letter-modal').classList.add('hidden'); | |
| } | |
| function practiceLetter() { | |
| closeLetterModal(); | |
| // Scroll to practice section | |
| document.getElementById('practice').scrollIntoView({ behavior: 'smooth' }); | |
| // Set the practice word to the selected letter | |
| document.getElementById('practice-word').textContent = document.getElementById('modal-letter').textContent; | |
| } | |
| // Practice section functionality | |
| const practiceWords = ['HELLO', 'THANK YOU', 'GOOD', 'AUSLAN', 'NAME', 'HOW', 'YOU', 'SORRY', 'PLEASE', 'YES', 'NO']; | |
| document.getElementById('next-word').addEventListener('click', function() { | |
| const currentWord = document.getElementById('practice-word').textContent; | |
| let nextWord; | |
| do { | |
| nextWord = practiceWords[Math.floor(Math.random() * practiceWords.length)]; | |
| } while (nextWord === currentWord); | |
| document.getElementById('practice-word').textContent = nextWord; | |
| // In a real implementation, this would update the demonstration video | |
| }); | |
| document.getElementById('start-practice').addEventListener('click', function() { | |
| const webcam = document.getElementById('webcam'); | |
| const placeholder = document.getElementById('webcam-placeholder'); | |
| if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { | |
| navigator.mediaDevices.getUserMedia({ video: true }) | |
| .then(function(stream) { | |
| webcam.srcObject = stream; | |
| webcam.classList.remove('hidden'); | |
| placeholder.classList.add('hidden'); | |
| this.innerHTML = '<i class="fas fa-stop mr-2"></i> Stop Practice'; | |
| this.classList.remove('bg-blue-500', 'hover:bg-blue-600'); | |
| this.classList.add('bg-red-500', 'hover:bg-red-600'); | |
| // Change the click handler to stop practice | |
| this.onclick = function() { | |
| stopPractice(); | |
| }; | |
| // Start sign recognition (simulated in this example) | |
| simulateSignRecognition(); | |
| }) | |
| .catch(function(error) { | |
| console.error("Error accessing webcam:", error); | |
| alert("Could not access the webcam. Please ensure you've granted camera permissions."); | |
| }); | |
| } else { | |
| alert("Webcam access is not supported by your browser."); | |
| } | |
| }); | |
| function stopPractice() { | |
| const webcam = document.getElementById('webcam'); | |
| const placeholder = document.getElementById('webcam-placeholder'); | |
| const startButton = document.getElementById('start-practice'); | |
| if (webcam.srcObject) { | |
| webcam.srcObject.getTracks().forEach(track => track.stop()); | |
| } | |
| webcam.classList.add('hidden'); | |
| placeholder.classList.remove('hidden'); | |
| startButton.innerHTML = '<i class="fas fa-video mr-2"></i> Start Practice'; | |
| startButton.classList.remove('bg-red-500', 'hover:bg-red-600'); | |
| startButton.classList.add('bg-blue-500', 'hover:bg-blue-600'); | |
| // Reset the click handler | |
| startButton.onclick = function() { | |
| document.getElementById('start-practice').click(); | |
| }; | |
| } | |
| function simulateSignRecognition() { | |
| // In a real implementation, this would use machine learning to analyze the webcam feed | |
| // For this demo, we'll just simulate occasional feedback | |
| setInterval(() => { | |
| if (Math.random() > 0.7) { // 30% chance to show feedback | |
| showFeedback(Math.random() > 0.3); // 70% chance of positive feedback | |
| } | |
| }, 3000); | |
| } | |
| function showFeedback(isCorrect) { | |
| const overlay = document.getElementById('feedback-overlay'); | |
| const icon = document.getElementById('feedback-icon'); | |
| const title = document.getElementById('feedback-title'); | |
| const message = document.getElementById('feedback-message'); | |
| if (isCorrect) { | |
| icon.innerHTML = '<i class="fas fa-check-circle"></i>'; | |
| icon.className = 'text-6xl mb-4 text-green-400'; | |
| title.textContent = 'Great Job!'; | |
| message.textContent = 'Your sign looks correct!'; | |
| } else { | |
| icon.innerHTML = '<i class="fas fa-times-circle"></i>'; | |
| icon.className = 'text-6xl mb-4 text-red-400'; | |
| title.textContent = 'Try Again'; | |
| message.textContent = 'Check the demonstration and try again.'; | |
| } | |
| overlay.classList.add('feedback-visible'); | |
| setTimeout(() => { | |
| overlay.classList.remove('feedback-visible'); | |
| }, 2000); | |
| } | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </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=DECLANEDWARDS/learn-auslan" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |