Class Website Homepage - Copy this Html, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Welcome to 12A1 Class Website - A hub for our academic journey and memories"> <title>12A1 DIGIUATROIRUCRO</title> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="font-[Montserrat] bg-[rgb(241,240,232)]"> <header class="bg-[rgb(179,200,207)] sticky top-0 z-50"> <nav class="container mx-auto px-6 py-3"> <div class="flex items-center justify-between"> <div class="flex items-center"> <img src="c:\Users\Admin\OneDrive\Pictures\lớp cấp 3\z5486727628594_8b6a940aff1c2507b9d77526af47f6e5.jpg" alt="School Logo" class="h-12 w-auto"> <span class="ml-3 text-2xl font-bold">12A1 DIGIUATROIRUCRO</span> </div> <div class="hidden md:flex space-x-8"> <a href="file:///C:/Users/Admin/OneDrive/Documents/New%20folder/index.html" class="hover:text-white transition">Trang Chủ</a> <a href="#" class="hover:text-white transition">Học Tập</a> <a href="#" class="hover:text-white transition">Hoạt Động</a> </div> <button onclick="document.getElementById('Đăng nhập').classList.remove('hidden')" class="bg-white px-6 py-2 rounded-full hover:bg-gray-100 transition shadow-md">Đăng nhập</button> <button onclick="document.getElementById('đăng ký').classList.remove('hidden')" class="bg-white px-6 py-2 rounded-full hover:bg-gray-100 transition shadow-md">Đăng ký</button> </div> </nav> </header> <!-- Đăng nhập --> <div id="Đăng nhập" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center"> <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4"> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold">Đăng nhập</h2> <button onclick="document.getElementById('Đăng nhập').classList.add('hidden')" class="text-gray-500 hover:text-gray-700"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <form onsubmit="return validateđăngnhập(event)" class="space-y-4"> <div> <label class="block text-sm font-medium mb-1">Email</label> <input type="email" id="nhập Email" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-[rgb(179,200,207)]" required> </div> <div> <label class="block text-sm font-medium mb-1">Mật khẩu</label> <input type="password" id="nhập mật khẩu" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-[rgb(179,200,207)]" required> </div> <div class="flex items-center justify-between mb-4"> <label class="flex items-center"> <input type="checkbox" class="form-checkbox text-[rgb(179,200,207)]"> <span class="ml-2 text-sm">Bạn không phải máy chứ</span> </label> <a href="#" class="text-sm text-[rgb(179,200,207)] hover:underline">Quên mật khẩu?</a> </div> <button type="submit" class="w-full bg-[rgb(179,200,207)] text-white py-2 rounded-lg hover:bg-opacity-90">Dăng nhập</button> <p class="text-center text-sm mt-4">Chưa có tài khoản? <a href="đăng ký.html" class="text-[rgb(179,200,207)] hover:underline">Đăng ký</a></p> </form> </div> </div> <!-- đăng ký --> <div id="Đăng ký" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center"> <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4"> <div class="flex justify-between items-center mb-6"> <h2 class="text-2xl font-bold">Đăng ký</h2> <button onclick="document.getElementById('Đăng ký').classList.add('hidden')" class="text-gray-500 hover:text-gray-700"> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <form onsubmit="return handleRegistration(event)" class="space-y-4"> <div> <label class="block text-sm font-medium mb-1">Tên</label> <input type="text" id="tên đăng ký" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-[rgb(179,200,207)]" required> </div> <div> <label class="block text-sm font-medium mb-1">Email</label> <input type="email" id="Email đăng ký" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-[rgb(179,200,207)]" required> </div> <div> <label class="block text-sm font-medium mb-1">Mật khẩu</label> <input type="mật khẩu" id="mật khẩu đăng ký" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-[rgb(179,200,207)]" required> <p class="text-xs text-gray-500 mt-1">Ít nhất 6 ký tự nha</p> </div> <div> <label class="block text-sm font-medium mb-1">Nhập lại mật khẩu</label> <input type="mật khẩu" id="nhập lại mật khẩu đăng ký" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-[rgb(179,200,207)]" required> </div> <button type="submit" class="w-full bg-[rgb(179,200,207)] text-white py-2 rounded-lg hover:bg-opacity-90">Đăng ký</button> <p class="text-center text-sm mt-4">Đã có tài khoản? <a href="#" onclick="switchToĐăngnhập ()" class="text-[rgb(179,200,207)] hover:underline">Đăng nhập</a></p> </form> </div> </div> <!--Thông tin xác thực--> <script> let users = tũn.parse(localStorage.getItem('người sử dụng')) || []; function handleRegistration(event) { event.preventDefault(); const tên = document.getElementById('tên đăng ký').value; const email = document.getElementById('Email đăng ký').value; const mậtkhẩu = document.getElementById('mật khẩu đăng ký').value; const nhậplạimậtkhẩu = document.getElementById('nhập lại mật khẩu đăng ký').value; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const mậtkhẩuRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/; if (!emailRegex.test(email)) { alert('vui lòng nhập email hợp lệ'); return false; } if (!mậtkhẩuRegex.test(mậtkhẩu)) { alert('mật khẩu dài ít nhất 6 ký tự'); return false; } if (mậtkhẩu !== nhậplạimậtkhẩu) { alert('mật khẩu không đúng'); return false; } if (ngườisửdụng.some(ngườisửdụng => ngườisửdụng.email === email)) { alert('email đã được đăng ký'); return false; } ngườisửdụng.push({ tên, email, mậtkhẩu }); localStorage.setItem('ngườisửdụng', tũn.stringify(ngườisửdụng)); alert('Đăng ký thành công! vui lòng đăng nhập'); document.getElementById('đăng ký').classList.add('hidden'); document.getElementById('dăng nhập').classList.remove('hidden'); return false; } function validateLogin(event) { event.preventDefault(); const email = document.getElementById('nhập Email').value; const mậtkhẩu= document.getElementById('nhập mật khẩu').value; const ngườisửdụng = ngườisửdụng.find(ngườisửdụng => ngườisửdụng.email === email && ngườisửdụng.mậtkhẩu === mậtkhẩu); if (ngườisửdụng) { document.getElementById('người sử dụng').classList.add('hidden'); localStorage.setItem('người dụng hiện tại', tũn.stringify(ngườisửdụng)); updateUIForLoggedInUser(ngườisửdụng); return true; } else { alert('Thông tin không chính xác'); return false; } } function updateUIForLoggedInngườisửdụng(ngườisửdụng) { document.getElementById('nút xác thực').classList.add('hidden'); document.getElementById('mục người dùng').classList.remove('hidden'); document.getElementById('mục người dùng').classList.add('flex'); document.getElementById('tên người dùng').textContent = user.name; } function handleLogout() { localStorage.removeItem('người dùng hiện tại'); document.getElementById('mục người dùng').classList.add('hidden'); document.getElementById('mục người dùng').classList.remove('flex'); document.getElementById('nút xác thực').classList.remove('hidden'); } function switchToLogin() { document.getElementById('đăng ký').classList.add('hidden'); document.getElementById('đăng nhập').classList.remove('hidden'); } window.addEventListener('đang tải', () => { const currentngườisửdụng = tũn.parse(localStorage.getItem('người dùng hiện tại')); if (ngườidùnghiệntại) { updateUIForLoggedInngườisửdụng(ngườidùnghiệntại); } }); </script> <section class="container mx-auto px-6 py-16"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2"> <h1 class="text-5xl font-bold mb-6">Chào mừng đến với 12A1</h1> <p class="text-xl mb-8">Nơi sản sinh ra các thiên tài trai xinh gái đẹp </p> <button class="bg-[rgb(179,200,207)] text-white px-8 py-3 rounded-full hover:shadow-lg transition">Bắt đầu thoiii</button> </div> <div class="md:w-1/2 mt-8 md:mt-0"> <img src="https://cdn.glitch.global/7dfaa9f4-fbf0-4d06-b114-277841e25e43/47fc57f4-476c-40c9-ae8b-e9be31abd1a3.image.png?v=1740278921710" alt="Students studying" class="rounded-2xl shadow-xl w-full"> </div> </div> </section> <section class="bg-white py-16"> <div class="container mx-auto px-6"> <h2 class="text-3xl font-bold mb-12 text-center">Sự đa dạng của lớp tui</h2> <div class="grid md:grid-cols-2 gap-12 items-center"> <div> <ul class="space-y-4"> <li class="flex items-center"><span class="h-2 w-2 bg-[rgb(179,200,207)] rounded-full mr-3"></span>Thành tích học tập siêu việt</li> <li class="flex items-center"><span class="h-2 w-2 bg-[rgb(179,200,207)] rounded-full mr-3"></span>Tinh thần đoàn kết mãnh liệt</li> <li class="flex items-center"><span class="h-2 w-2 bg-[rgb(179,200,207)] rounded-full mr-3"></span>Sự sáng tạo không giới hạn</li> <li class="flex items-center"><span class="h-2 w-2 bg-[rgb(179,200,207)] rounded-full mr-3"></span>Thiên tài của từng lĩnh vực</li> </ul> </div> <img src="c:\Users\Admin\OneDrive\Pictures\lớp cấp 3\z6224284676115_23c743a8ad57718ed4ffeb1c05c786a0.jpg" alt="Lịch học và hoạt động sắp tới" class="rounded-2xl shadow-lg"> </div> </div> </section> <section class="container mx-auto px-6 py-16"> <h2 class="text-3xl font-bold mb-12 text-center">Lịch học và hoạt động sắp tới</h2> <div class="grid md:grid-cols-3 gap-8"> <div class="bg-white rounded-xl shadow-lg overflow-hidden"> <img src="C:\Users\Admin\OneDrive\Pictures\lớp cấp 3\z6346228196257_2d05f3c1718fa91bd8b5945ead5f6660.jpg" alt="Sports" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="font-bold text-xl mb-2">Thời khóa biểu</h3> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden"> <img src="c:\Users\Admin\OneDrive\Pictures\lớp cấp 3\z6332005201512_0d19a2176177f94106821f84549ec51e.jpg" alt="Cultural Day" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="font-bold text-xl mb-2">Chụp kỷ yếu</h3> </div> </div> <div class="bg-white rounded-xl shadow-lg overflow-hidden"> <img src="c:\Users\Admin\OneDrive\Pictures\lớp cấp 3\z6237071574901_f6a818ed9b1258467730895a5551eff8.jpg" alt="Science Fair" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="font-bold text-xl mb-2">Ôn thi tốt nghiệp</h3> </div> </div> </div> </section> <section class="bg-[rgb(179,200,207)] py-16"> <div class="container mx-auto px-6 text-center"> <h2 class="text-3xl font-bold mb-8 text-white">Thư viện kí ức</h2> <p class="text-white mb-8 text-xl">Trân trọng những khoảnh khắc bên nhau</p> <button class="bg-white px-8 py-3 rounded-full hover:shadow-lg transition">Xem Thư viện ảnh</button> </div> </section> <footer class="bg-gray-900 text-white py-12"> <div class="container mx-auto px-6"> <div class="grid md:grid-cols-3 gap-8"> <div> <h3 class="font-bold text-xl mb-4">Liên hệ</h3> <p>Email: 12a1_digiuatroirucro@school.com</p> <p>SĐT: 0348278582 (TUẤN)</p> </div> <div> <h3 class="font-bold text-xl mb-4">Vị Trí</h3> <ul class="space-y-2"> <li><a href="https://c3phanboichau.daknong.edu.vn/" class="hover:text-[rgb(179,200,207)] transition">Trường THPT Phan Bội Châu</a></li> <li><a href="https://cujut.daknong.gov.vn/" class="hover:text-[rgb(179,200,207)] transition">Huyện Cư Jut</a></li> <li><a href="https://daknong.gov.vn/" class="hover:text-[rgb(179,200,207)] transition">Tỉnh Đắk Nông</a></li> </ul> </div> <div> <h3 class="font-bold text-xl mb-4">theo dõi chúng mình nha</h3> <div class="flex space-x-4"> <a href="https://www.facebook.com/a1.k19luonvuituoi" class="hover:text-[rgb(179,200,207)] transition">Facebook</a> <a href="https://www.instagram.com/12a1_digiuatroirucro/" class="hover:text-[rgb(179,200,207)] transition">Instagram</a> <a href="https://www.tiktok.com/@a1k19pbcmaichay" class="hover:text-[rgb(179,200,207)] transition">TikTok</a> </div> </div> </div> </div> </footer> </body> </html>