Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>STEAM Malaysia - Complete LMS Portal</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #4a00e0; | |
| --secondary: #8e2de2; | |
| --accent: #00c6ff; | |
| --light: #f5f7fb; | |
| --dark: #1a3a6e; | |
| --success: #4caf50; | |
| --warning: #ff9800; | |
| --danger: #f44336; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); | |
| } | |
| .gradient-text { | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .gradient-button { | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| transition: all 0.3s ease; | |
| } | |
| .gradient-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 20px rgba(74, 0, 224, 0.2); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .hero-overlay { | |
| background: linear-gradient(to right, rgba(74, 0, 224, 0.8), rgba(42, 94, 151, 0.8)); | |
| } | |
| .social-icon:hover { | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| color: white; | |
| transform: translateY(-3px); | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen flex flex-col items-center py-8 px-4"> | |
| <div class="container mx-auto max-w-7xl"> | |
| <!-- Header --> | |
| <header class="bg-white rounded-t-2xl shadow-lg flex flex-col md:flex-row justify-between items-center p-6"> | |
| <div class="logo flex items-center space-x-4"> | |
| <img src="https://via.placeholder.com/50x50?text=STEAM" alt="STEAM Malaysia Logo" class="h-12"> | |
| <h1 class="text-2xl font-bold text-gray-800">STEAM Malaysia</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-4 mt-4 md:mt-0"> | |
| <a href="#" class="px-4 py-2 rounded-lg bg-gradient-to-r from-purple-600 to-blue-500 text-white font-medium">Home</a> | |
| <a href="#" class="px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100 font-medium transition">Courses</a> | |
| <a href="#" class="px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100 font-medium transition">Resources</a> | |
| <a href="ai-assistant.html" class="px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100 font-medium transition">AI Assistant</a> | |
| <a href="#" class="px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100 font-medium transition">About</a> | |
| <a href="#" class="px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100 font-medium transition">Contact</a> | |
| </nav> | |
| <div class="flex space-x-3 mt-4 md:mt-0"> | |
| <button class="px-6 py-2 border-2 border-purple-600 text-purple-600 rounded-full font-medium hover:bg-purple-50 transition auth-buttons">Login</button> | |
| <button class="px-6 py-2 gradient-button text-white rounded-full font-medium hover:opacity-90 transition-opacity auth-buttons">Sign Up</button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative bg-cover bg-center rounded-b-2xl overflow-hidden mb-8" style="background-image: url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80')"> | |
| <div class="hero-overlay absolute inset-0"></div> | |
| <div class="relative z-10 p-12 md:p-20 flex flex-col md:flex-row"> | |
| <div class="max-w-xl mb-8 md:mb-0"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">Welcome to STEAM Malaysia LMS</h2> | |
| <p class="text-xl text-white opacity-90 mb-8">Empowering Malaysian Secondary Students through Interdisciplinary STEAM learning that bridges academic excellence with cultural relevance</p> | |
| <button class="gradient-button text-white px-8 py-3 rounded-full text-lg font-semibold">Get Started</button> | |
| <p class="text-white mt-4 font-medium">Your learning dashboard</p> | |
| </div> | |
| <div class="bg-white bg-opacity-90 rounded-xl p-8 ml-auto max-w-md"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6">LMS Components</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full gradient-button flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| </div> | |
| <span class="text-gray-700 font-medium">Dashboard</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full gradient-button flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <span class="text-gray-700 font-medium">Modules</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full gradient-button flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <span class="text-gray-700 font-medium">Projects</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full gradient-button flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-chalkboard-teacher"></i> | |
| </div> | |
| <span class="text-gray-700 font-medium">Virtual Classrooms</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full gradient-button flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-user-tie"></i> | |
| </div> | |
| <span class="text-gray-700 font-medium">Teacher</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full gradient-button flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <span class="text-gray-700 font-medium">Forum</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <h2 class="text-3xl font-bold text-center text-white mb-12">Key Features</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16"> | |
| <div class="bg-white rounded-xl p-8 shadow-lg transition duration-300 feature-card" data-aos="fade-up"> | |
| <div class="w-16 h-16 rounded-full gradient-button flex items-center justify-center text-white text-2xl mb-6"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">AI-Powered Learning</h3> | |
| <p class="text-gray-600">Our intelligent chatbot assistant provides personalized guidance and support in both English and Bahasa Malaysia.</p> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 shadow-lg transition duration-300 feature-card" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="w-16 h-16 rounded-full gradient-button flex items-center justify-center text-white text-2xl mb-6"> | |
| <i class="fas fa-certificate"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Micro-Certifications</h3> | |
| <p class="text-gray-600">Earn stackable credentials in specialized STEAM fields and build your portfolio as you learn.</p> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 shadow-lg transition duration-300 feature-card" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="w-16 h-16 rounded-full gradient-button flex items-center justify-center text-white text-2xl mb-6"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">Progress Analytics</h3> | |
| <p class="text-gray-600">Track your learning journey with detailed analytics and personalized recommendations.</p> | |
| </div> | |
| <div class="bg-white rounded-xl p-8 shadow-lg transition duration-300 feature-card" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="w-16 h-16 rounded-full gradient-button flex items-center justify-center text-white text-2xl mb-6"> | |
| <i class="fas fa-globe-asia"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-3">ESG/SDG Integration</h3> | |
| <p class="text-gray-600">Learn how STEAM skills contribute to Environmental, Social, Governance goals and Sustainable Development.</p> | |
| </div> | |
| </div> | |
| <!-- Signup Form --> | |
| <h2 class="text-3xl font-bold text-center text-white mb-12">Get Started</h2> | |
| <div class="bg-white rounded-xl shadow-lg p-10 max-w-2xl mx-auto mb-16" data-aos="zoom-in"> | |
| <h2 class="text-2xl font-bold text-center text-gray-800 mb-8">Create Your Account</h2> | |
| <form id="signup-form" class="space-y-6"> | |
| <div> | |
| <label for="fullname" class="block text-gray-700 font-medium mb-2">Full Name</label> | |
| <input type="text" id="fullname" placeholder="Enter your full name" class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:outline-none transition" required> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label> | |
| <input type="email" id="email" placeholder="Enter your email" class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:outline-none transition" required> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-gray-700 font-medium mb-2">Password</label> | |
| <input type="password" id="password" placeholder="Create a password" class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:outline-none transition" required> | |
| </div> | |
| <div> | |
| <label for="role" class="block text-gray-700 font-medium mb-2">I am a</label> | |
| <select id="role" class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:outline-none transition" required> | |
| <option value="">Select your role</option> | |
| <option value="student">Student</option> | |
| <option value="teacher">Teacher</option> | |
| <option value="parent">Parent</option> | |
| <option value="administrator">Administrator</option> | |
| </select> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full gradient-button text-white py-3 rounded-lg text-lg font-semibold">Create Account</button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Lesson Plans Section --> | |
| <h2 class="text-3xl font-bold text-center text-white mb-6">Aligned Lesson Plans</h2> | |
| <div class="text-center mb-12"> | |
| <a href="courses.html" class="text-white hover:underline font-medium">View All Courses</a> | |
| </div> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden mb-16" data-aos="fade-up"> | |
| <div class="gradient-button p-6"> | |
| <h2 class="text-xl font-bold text-white">Form 1-5 STEAM Subjects</h2> | |
| </div> | |
| <div class="p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Form 1</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="ai-assistant.html" class="text-gray-600 hover:text-purple-600 transition">AI Assistant</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Science</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Technology & Design</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Engineering</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Art</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Mathematics</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Form 2</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Science</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Technology & Design</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Engineering</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Art</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Mathematics</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Form 3</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Science</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Technology & Design</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Engineering</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Art</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Mathematics</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Form 4</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Science</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Technology & Design</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Engineering</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Art</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Mathematics</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Form 5</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Science</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Technology & Design</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Engineering</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Art</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Mathematics</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="gradient-button p-6 flex flex-col md:flex-row justify-between items-center"> | |
| <h2 class="text-xl font-bold text-white">Student Dashboard Preview</h2> | |
| <div class="flex space-x-3 mt-4 md:mt-0"> | |
| <button class="px-4 py-2 border-2 border-white text-white rounded-full text-sm font-medium hover:bg-white hover:bg-opacity-10 transition">Teacher View</button> | |
| <button class="px-4 py-2 bg-white bg-opacity-20 text-white rounded-full text-sm font-medium hover:bg-opacity-30 transition">Admin View</button> | |
| </div> | |
| </div> | |
| <div class="p-8 grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6">My Progress</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> | |
| <div class="bg-gray-50 rounded-xl p-4 text-center transition duration-300 stat-card"> | |
| <div class="text-3xl font-bold gradient-text mb-1">7</div> | |
| <div class="text-gray-600 text-sm">Courses</div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-4 text-center transition duration-300 stat-card"> | |
| <div class="text-3xl font-bold gradient-text mb-1">82%</div> | |
| <div class="text-gray-600 text-sm">Completed</div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-4 text-center transition duration-300 stat-card"> | |
| <div class="text-3xl font-bold gradient-text mb-1">15</div> | |
| <div class="text-gray-600 text-sm">Certificates</div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Recent Activity</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="w-2 h-2 bg-purple-500 rounded-full mt-2 mr-3"></div> | |
| <p class="text-gray-700">You completed the "Introduction to Python" course</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-2 h-2 bg-purple-500 rounded-full mt-2 mr-3"></div> | |
| <p class="text-gray-700">You earned the "Data Visualization" micro-certification</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-2 h-2 bg-purple-500 rounded-full mt-2 mr-3"></div> | |
| <p class="text-gray-700">You joined the "Robotics Club" community</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6">Recommended For You</h3> | |
| <div class="bg-gray-50 rounded-xl p-6 transition duration-300 hover:shadow-md"> | |
| <h4 class="text-lg font-bold text-gray-800 mb-2">Environmental Science Project</h4> | |
| <p class="text-gray-600 mb-4">Apply your skills to solve real-world environmental challenges in your community.</p> | |
| <button class="gradient-button text-white px-6 py-2 rounded-full text-sm font-medium">Start Learning</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white rounded-2xl shadow-lg p-10"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-10"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Learning</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">STEAM Modules</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">STEAM Projects</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Virtual Classroom</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Community</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Discussion Forums</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Teacher Resources</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Malaysian MOE</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Support</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Contact Us</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Accessibility</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">STEAM Malaysia</h3> | |
| <p class="text-gray-600 mb-6">Empowering the next generation of Malaysian innovators through comprehensive STEAM education.</p> | |
| <div class="flex space-x-3"> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:text-white transition duration-300 social-icon"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:text-white transition duration-300 social-icon"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:text-white transition duration-300 social-icon"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-700 hover:text-white transition duration-300 social-icon"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Home</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Courses</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Forums</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Resources</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Legal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Privacy Policy</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Terms of Service</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Cookie Policy</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-purple-600 transition">Data Protection</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-4">Contact Info</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope text-purple-500 mt-1 mr-3"></i> | |
| <span class="text-gray-600">info@steammalaysia.edu.my</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone text-purple-500 mt-1 mr-3"></i> | |
| <span class="text-gray-600">+60 3 1234 5678</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-purple-500 mt-1 mr-3"></i> | |
| <span class="text-gray-600">Kuala Lumpur, Malaysia</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 mt-10 pt-6 text-center"> | |
| <div class="flex justify-center space-x-6 mb-4"> | |
| <a href="#" class="text-gray-600 hover:text-purple-600 transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-600 hover:text-purple-600 transition">Terms of Service</a> | |
| </div> | |
| <p class="text-gray-600">© 2023 STEAM Malaysia. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize animations | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| // Form submission with validation | |
| const signupForm = document.getElementById('signup-form'); | |
| if (signupForm) { | |
| signupForm.addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| const formData = { | |
| fullname: document.getElementById('fullname').value, | |
| email: document.getElementById('email').value, | |
| password: document.getElementById('password').value, | |
| role: document.getElementById('role').value | |
| }; | |
| // Validate form | |
| if (!formData.fullname || !formData.email || !formData.password || !formData.role) { | |
| alert('Please fill in all fields'); | |
| return; | |
| } | |
| // Show loading state | |
| const submitBtn = signupForm.querySelector('button[type="submit"]'); | |
| const originalBtnText = submitBtn.textContent; | |
| submitBtn.textContent = 'Processing...'; | |
| submitBtn.disabled = true; | |
| try { | |
| // Simulate API call | |
| await new Promise(resolve => setTimeout(resolve, 1500)); | |
| // Show success message | |
| const successMsg = document.createElement('div'); | |
| successMsg.className = 'bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4'; | |
| successMsg.innerHTML = ` | |
| <strong class="font-bold">Success!</strong> | |
| <span class="block sm:inline">Account created successfully. Redirecting...</span> | |
| `; | |
| signupForm.prepend(successMsg); | |
| // Reset form and redirect after delay | |
| setTimeout(() => { | |
| signupForm.reset(); | |
| window.location.href = 'dashboard.html'; | |
| }, 2000); | |
| } catch (error) { | |
| alert('Registration failed. Please try again.'); | |
| } finally { | |
| submitBtn.textContent = originalBtnText; | |
| submitBtn.disabled = false; | |
| } | |
| }); | |
| } | |
| // Auth buttons functionality | |
| document.querySelectorAll('.auth-buttons button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| if (this.textContent.includes('Login')) { | |
| window.location.href = 'login.html'; | |
| } else { | |
| document.getElementById('signup-form').scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Course navigation | |
| document.querySelectorAll('.course-nav a').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const courseId = this.getAttribute('data-course'); | |
| document.querySelector(`#${courseId}`).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Interactive dashboard preview | |
| document.querySelectorAll('.dashboard-preview .btn').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const viewType = this.textContent.includes('Teacher') ? 'teacher' : 'admin'; | |
| document.querySelectorAll('.dashboard-preview .stat-card').forEach(card => { | |
| card.querySelector('div').textContent = viewType === 'teacher' ? | |
| Math.floor(Math.random() * 30) + 10 : | |
| Math.floor(Math.random() * 500) + 100; | |
| }); | |
| }); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuBtn = document.createElement('button'); | |
| mobileMenuBtn.className = 'md:hidden text-gray-700 p-2'; | |
| mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>'; | |
| mobileMenuBtn.addEventListener('click', function() { | |
| const nav = document.querySelector('nav'); | |
| nav.classList.toggle('hidden'); | |
| nav.classList.toggle('flex'); | |
| nav.classList.toggle('flex-col'); | |
| nav.classList.toggle('absolute'); | |
| nav.classList.toggle('bg-white'); | |
| nav.classList.toggle('top-20'); | |
| nav.classList.toggle('left-0'); | |
| nav.classList.toggle('right-0'); | |
| nav.classList.toggle('p-4'); | |
| nav.classList.toggle('z-50'); | |
| }); | |
| document.querySelector('.logo').appendChild(mobileMenuBtn); | |
| // Initialize icons | |
| feather.replace(); | |
| // Scroll progress indicator | |
| window.addEventListener('scroll', function() { | |
| const scrollTop = document.documentElement.scrollTop; | |
| const scrollHeight = document.documentElement.scrollHeight; | |
| const clientHeight = document.documentElement.clientHeight; | |
| const scrollPercent = (scrollTop / (scrollHeight - clientHeight)) * 100; | |
| document.querySelector('.scroll-progress').style.width = scrollPercent + '%'; | |
| }); | |
| // Add scroll progress bar to header | |
| const progressBar = document.createElement('div'); | |
| progressBar.className = 'scroll-progress h-1 bg-gradient-to-r from-purple-600 to-blue-500 fixed top-0 left-0 z-50'; | |
| progressBar.style.width = '0%'; | |
| document.body.prepend(progressBar); | |
| }); | |
| // Course filtering functionality | |
| function filterCourses(form) { | |
| const formData = new FormData(form); | |
| const searchTerm = formData.get('search').toLowerCase(); | |
| const level = formData.get('level'); | |
| document.querySelectorAll('.course-list li').forEach(item => { | |
| const matchesSearch = item.textContent.toLowerCase().includes(searchTerm); | |
| const matchesLevel = level === 'all' || item.classList.contains(level); | |
| item.style.display = (matchesSearch && matchesLevel) ? 'block' : 'none'; | |
| }); | |
| return false; | |
| } | |
| </script> | |
| </body> | |
| </html> | |