Login Modal - Copy this React, Tailwind Component to your project
<html lang="vi"><head> <meta charset="UTF 8"> <! cách hiển thị kí tự tiếng Việt đúng cách > <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Góc nhỏ 12A1</title> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> <! thêm font cho xinh > <script src="https://cdn.tailwindcss.com"></script> <! lấy css từ bên ngoài > <style> table { width: 100%; border collapse: collapse; font family: sans serif; } th, td { border: 1px solid black; padding: 8px; text align: center; } th { background color: rgb(179, 200, 207); /* Màu xanh nhạt cho tiêu đề */ font weight: bold; } </style> <link id="favicon" rel="icon" href="https://cdn.glitch.global/d06aa12c e99e 4369 97e4 7a9bb58fd8b2/4b570c38 c487 4af3 bcbc 5b4804a69e51.image.png?v=1740298260328" type="image/x icon"> <style>*, ::before, ::after{ tw border spacing x:0; tw border spacing y:0; tw translate x:0; tw translate y:0; tw rotate:0; tw skew x:0; tw skew y:0; tw scale x:1; tw scale y:1; tw pan x: ; tw pan y: ; tw pinch zoom: ; tw scroll snap strictness:proximity; tw gradient from position: ; tw gradient via position: ; tw gradient to position: ; tw ordinal: ; tw slashed zero: ; tw numeric figure: ; tw numeric spacing: ; tw numeric fraction: ; tw ring inset: ; tw ring offset width:0px; tw ring offset color:#fff; tw ring color:rgb(59 130 246 / 0.5); tw ring offset shadow:0 0 #0000; tw ring shadow:0 0 #0000; tw shadow:0 0 #0000; tw shadow colored:0 0 #0000; tw blur: ; tw brightness: ; tw contrast: ; tw grayscale: ; tw hue rotate: ; tw invert: ; tw saturate: ; tw sepia: ; tw drop shadow: ; tw backdrop blur: ; tw backdrop brightness: ; tw backdrop contrast: ; tw backdrop grayscale: ; tw backdrop hue rotate: ; tw backdrop invert: ; tw backdrop opacity: ; tw backdrop saturate: ; tw backdrop sepia: ; tw contain size: ; tw contain layout: ; tw contain paint: ; tw contain style: }::backdrop{ tw border spacing x:0; tw border spacing y:0; tw translate x:0; tw translate y:0; tw rotate:0; tw skew x:0; tw skew y:0; tw scale x:1; tw scale y:1; tw pan x: ; tw pan y: ; tw pinch zoom: ; tw scroll snap strictness:proximity; tw gradient from position: ; tw gradient via position: ; tw gradient to position: ; tw ordinal: ; tw slashed zero: ; tw numeric figure: ; tw numeric spacing: ; tw numeric fraction: ; tw ring inset: ; tw ring offset width:0px; tw ring offset color:#fff; tw ring color:rgb(59 130 246 / 0.5); tw ring offset shadow:0 0 #0000; tw ring shadow:0 0 #0000; tw shadow:0 0 #0000; tw shadow colored:0 0 #0000; tw blur: ; tw brightness: ; tw contrast: ; tw grayscale: ; tw hue rotate: ; tw invert: ; tw saturate: ; tw sepia: ; tw drop shadow: ; tw backdrop blur: ; tw backdrop brightness: ; tw backdrop contrast: ; tw backdrop grayscale: ; tw backdrop hue rotate: ; tw backdrop invert: ; tw backdrop opacity: ; tw backdrop saturate: ; tw backdrop sepia: ; tw contain size: ; tw contain layout: ; tw contain paint: ; tw contain style: }/* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */*,::after,::before{box sizing:border box;border width:0;border style:solid;border color:#e5e7eb}::after,::before{ tw content:''}:host,html{line height:1.5; webkit text size adjust:100%; moz tab size:4;tab size:4;font family:ui sans serif, system ui, sans serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font feature settings:normal;font variation settings:normal; webkit tap highlight color:transparent}body{margin:0;line height:inherit}hr{height:0;color:inherit;border top width:1px}abbr:where([title]){ webkit text decoration:underline dotted;text decoration:underline dotted}h1,h2,h3,h4,h5,h6{font size:inherit;font weight:inherit}a{color:inherit;text decoration:inherit}b,strong{font weight:bolder}code,kbd,pre,samp{font family:ui monospace, SFMono Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font feature settings:normal;font variation settings:normal;font size:1em}small{font size:80%}sub,sup{font size:75%;line height:0;position:relative;vertical align:baseline}sub{bottom: .25em}sup{top: .5em}table{text indent:0;border color:inherit;border collapse:collapse}button,input,optgroup,select,textarea{font family:inherit;font feature settings:inherit;font variation settings:inherit;font size:100%;font weight:inherit;line height:inherit;letter spacing:inherit;color:inherit;margin:0;padding:0}button,select{text transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){ webkit appearance:button;background color:transparent;background image:none}: moz focusring{outline:auto}: moz ui invalid{box shadow:none}progress{vertical align:baseline}:: webkit inner spin button,:: webkit outer spin button{height:auto}[type=search]{ webkit appearance:textfield;outline offset: 2px}:: webkit search decoration{ webkit appearance:none}:: webkit file upload button{ webkit appearance:button;font:inherit}summary{display:list item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical align:middle}img,video{max width:100%;height:auto}[hidden]:where(:not([hidden=until found])){display:none}.container{width:100%}@media (min width: 640px){.container{max width:640px}}@media (min width: 768px){.container{max width:768px}}@media (min width: 1024px){.container{max width:1024px}}@media (min width: 1280px){.container{max width:1280px}}@media (min width: 1536px){.container{max width:1536px}}.fixed{position:fixed}.sticky{position:sticky}.inset 0{inset:0px}.top 0{top:0px}.z 50{z index:50}.mx 4{margin left:1rem;margin right:1rem}.mx auto{margin left:auto;margin right:auto}.mb 1{margin bottom:0.25rem}.mb 12{margin bottom:3rem}.mb 2{margin bottom:0.5rem}.mb 4{margin bottom:1rem}.mb 6{margin bottom:1.5rem}.mb 8{margin bottom:2rem}.ml 2{margin left:0.5rem}.ml 3{margin left:0.75rem}.mr 4{margin right:1rem}.mt 1{margin top:0.25rem}.mt 4{margin top:1rem}.mt 8{margin top:2rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h 12{height:3rem}.h 48{height:12rem}.h 6{height:1.5rem}.h 8{height:2rem}.w 6{width:1.5rem}.w 8{width:2rem}.w auto{width:auto}.w full{width:100%}.max w md{max width:28rem}.grid cols 1{grid template columns:repeat(1, minmax(0, 1fr))}.flex col{flex direction:column}.items center{align items:center}.justify center{justify content:center}.justify between{justify content:space between}.gap 8{gap:2rem}.space x 2 > :not([hidden]) ~ :not([hidden]){ tw space x reverse:0;margin right:calc(0.5rem * var( tw space x reverse));margin left:calc(0.5rem * calc(1 var( tw space x reverse)))}.space x 4 > :not([hidden]) ~ :not([hidden]){ tw space x reverse:0;margin right:calc(1rem * var( tw space x reverse));margin left:calc(1rem * calc(1 var( tw space x reverse)))}.space x 8 > :not([hidden]) ~ :not([hidden]){ tw space x reverse:0;margin right:calc(2rem * var( tw space x reverse));margin left:calc(2rem * calc(1 var( tw space x reverse)))}.space y 2 > :not([hidden]) ~ :not([hidden]){ tw space y reverse:0;margin top:calc(0.5rem * calc(1 var( tw space y reverse)));margin bottom:calc(0.5rem * var( tw space y reverse))}.space y 4 > :not([hidden]) ~ :not([hidden]){ tw space y reverse:0;margin top:calc(1rem * calc(1 var( tw space y reverse)));margin bottom:calc(1rem * var( tw space y reverse))}.overflow hidden{overflow:hidden}.rounded 2xl{border radius:1rem}.rounded full{border radius:9999px}.rounded lg{border radius:0.5rem}.border{border width:1px}.bg \[rgb\(241\2c 240\2c 232\)\]{ tw bg opacity:1;background color:rgb(241 240 232 / var( tw bg opacity, 1))}.bg \[rgb\(179\2c 200\2c 207\)\]{ tw bg opacity:1;background color:rgb(179 200 207 / var( tw bg opacity, 1))}.bg black{ tw bg opacity:1;background color:rgb(0 0 0 / var( tw bg opacity, 1))}.bg gray 900{ tw bg opacity:1;background color:rgb(17 24 39 / var( tw bg opacity, 1))}.bg red 500{ tw bg opacity:1;background color:rgb(239 68 68 / var( tw bg opacity, 1))}.bg white{ tw bg opacity:1;background color:rgb(255 255 255 / var( tw bg opacity, 1))}.bg opacity 50{ tw bg opacity:0.5}.object cover{object fit:cover}.p 6{padding:1.5rem}.p 8{padding:2rem}.px 4{padding left:1rem;padding right:1rem}.px 6{padding left:1.5rem;padding right:1.5rem}.px 8{padding left:2rem;padding right:2rem}.py 12{padding top:3rem;padding bottom:3rem}.py 16{padding top:4rem;padding bottom:4rem}.py 2{padding top:0.5rem;padding bottom:0.5rem}.py 3{padding top:0.75rem;padding bottom:0.75rem}.text center{text align:center}.font \[Montserrat\]{font family:Montserrat}.text 2xl{font size:1.5rem;line height:2rem}.text 3xl{font size:1.875rem;line height:2.25rem}.text 5xl{font size:3rem;line height:1}.text sm{font size:0.875rem;line height:1.25rem}.text xl{font size:1.25rem;line height:1.75rem}.text xs{font size:0.75rem;line height:1rem}.font bold{font weight:700}.font medium{font weight:500}.text \[rgb\(179\2c 200\2c 207\)\]{ tw text opacity:1;color:rgb(179 200 207 / var( tw text opacity, 1))}.text black{ tw text opacity:1;color:rgb(0 0 0 / var( tw text opacity, 1))}.text gray 500{ tw text opacity:1;color:rgb(107 114 128 / var( tw text opacity, 1))}.text white{ tw text opacity:1;color:rgb(255 255 255 / var( tw text opacity, 1))}.shadow lg{ tw shadow:0 10px 15px 3px rgb(0 0 0 / 0.1), 0 4px 6px 4px rgb(0 0 0 / 0.1); tw shadow colored:0 10px 15px 3px var( tw shadow color), 0 4px 6px 4px var( tw shadow color);box shadow:var( tw ring offset shadow, 0 0 #0000), var( tw ring shadow, 0 0 #0000), var( tw shadow)}.shadow xl{ tw shadow:0 20px 25px 5px rgb(0 0 0 / 0.1), 0 8px 10px 6px rgb(0 0 0 / 0.1); tw shadow colored:0 20px 25px 5px var( tw shadow color), 0 8px 10px 6px var( tw shadow color);box shadow:var( tw ring offset shadow, 0 0 #0000), var( tw ring shadow, 0 0 #0000), var( tw shadow)}.transition{transition property:color, background color, border color, fill, stroke, opacity, box shadow, transform, filter, webkit text decoration color, webkit backdrop filter;transition property:color, background color, border color, text decoration color, fill, stroke, opacity, box shadow, transform, filter, backdrop filter;transition property:color, background color, border color, text decoration color, fill, stroke, opacity, box shadow, transform, filter, backdrop filter, webkit text decoration color, webkit backdrop filter;transition timing function:cubic bezier(0.4, 0, 0.2, 1);transition duration:150ms}.hover\:bg red 600:hover{ tw bg opacity:1;background color:rgb(220 38 38 / var( tw bg opacity, 1))}.hover\:bg opacity 90:hover{ tw bg opacity:0.9}.hover\:text \[rgb\(179\2c 200\2c 207\)\]:hover{ tw text opacity:1;color:rgb(179 200 207 / var( tw text opacity, 1))}.hover\:text gray 700:hover{ tw text opacity:1;color:rgb(55 65 81 / var( tw text opacity, 1))}.hover\:text white:hover{ tw text opacity:1;color:rgb(255 255 255 / var( tw text opacity, 1))}.hover\:underline:hover{ webkit text decoration line:underline;text decoration line:underline}.hover\:shadow lg:hover{ tw shadow:0 10px 15px 3px rgb(0 0 0 / 0.1), 0 4px 6px 4px rgb(0 0 0 / 0.1); tw shadow colored:0 10px 15px 3px var( tw shadow color), 0 4px 6px 4px var( tw shadow color);box shadow:var( tw ring offset shadow, 0 0 #0000), var( tw ring shadow, 0 0 #0000), var( tw shadow)}.focus\:ring 2:focus{ tw ring offset shadow:var( tw ring inset) 0 0 0 var( tw ring offset width) var( tw ring offset color); tw ring shadow:var( tw ring inset) 0 0 0 calc(2px + var( tw ring offset width)) var( tw ring color);box shadow:var( tw ring offset shadow), var( tw ring shadow), var( tw shadow, 0 0 #0000)}.focus\:ring \[rgb\(179\2c 200\2c 207\)\]:focus{ tw ring opacity:1; tw ring color:rgb(179 200 207 / var( tw ring opacity, 1))}@media (min width: 768px){.md\:mt 0{margin top:0px}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w 1\/2{width:50%}.md\:grid cols 3{grid template columns:repeat(3, minmax(0, 1fr))}.md\:flex row{flex direction:row}}</style></head> <body class="font [Montserrat] bg [rgb(241,240,232)] "> <header class="bg [rgb(179,200,207)] sticky top 0 z 50 text black"> <nav class="container mx auto px 6 py 3"> <div class="flex items center justify between"> <div class="flex items center"> <img src="https://cdn.glitch.global/65d334ea e4d5 4b17 9e20 0579fdf35806/fd45a0f5 591d 48af ba0a 640b506174c6.image.png?v=1741180858240" class="h 12 w auto"> <span class="ml 3 text 2xl font bold ">12A1 Đi giữa trời rực rỡ</span> </div> <div class="hidden md:flex items center space x 8"> <a href="https://12a1digiuatroirucro.glitch.me/" class="hover:text white">Trang chủ</a> <a href="#" class="hover:text white">Hoạt động</a> <a href="#" class="hover:text white">Học tập</a> <div id="userSection" class="items center space x 4 flex"> <div class="flex items center space x 2"> <img id="userAvatar" src="#" alt="User Avatar" class="w 8 h 8 rounded full"> <span id="userName" class="text white">tuan</span> </div> <button onclick="handleLogout()" class="bg red 500 text white px 4 py 2 rounded full hover:bg red 600"> Đăng xuất </button> </div> <div id="authButtons" class="flex items center space x 4 hidden"> <button onclick="document.getElementById('loginModal').classList.remove('hidden')" class="bg white text black px 6 py 2 rounded full hover:bg opacity 90 mr 4"> Đăng nhập </button> <button onclick="document.getElementById('registerModal').classList.remove('hidden')" class="bg white text black px 6 py 2 rounded full hover:bg opacity 90 mr 4"> Đăng ký </button> </div> </div> <button class="md:hidden"> <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="M4 6h16M4 12h16m 16 6h16"></path> </svg> </button> </div> </nav> </header> <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> </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"> Thời khóa biểu của lớp </h2> <h1>Buổi sáng</h1> <table> <tbody><tr> <th></th> <th>Thứ 2</th> <th>Thứ 3</th> <th>Thứ 4</th> <th>Thứ 5</th> <th>Thứ 6</th> <th>Thứ 7</th> </tr> <tr> <th>1</th> <td>Chào cờ</td> <td>Hóa học</td> <td>Văn học</td> <td>Ngoại ngữ</td> <td>Tin học</td> <td></td> </tr> <tr> <th>2</th> <td>Vật lý</td> <td>Hóa học</td> <td>Sinh học</td> <td>Ngoại ngữ</td> <td>Tin học</td> <td></td> </tr> <tr> <th>3</th> <td>Văn học</td> <td>Toán</td> <td>Sinh học</td> <td>Toán</td> <td>Văn học</td> <td></td> </tr> <tr> <th>4</th> <td>GDDP</td> <td>Toán</td> <td>Lịch sử</td> <td>Toán</td> <td>Sinh học</td> <td></td> </tr> <tr> <th>5</th> <td>GDDP</td> <td>Ngoại ngữ</td> <td>Vật lý</td> <td>Vật lý</td> <td>Sinh hoạt</td> <td></td> </tr> </tbody></table> <h1>Buổi chiều</h1> <table class="buoi chieu"> <tbody><tr> <th></th> <th>Thứ 2</th> <th>Thứ 3</th> <th>Thứ 4</th> <th>Thứ 5</th> <th>Thứ 6</th> <th>Thứ 7</th> </tr> <tr> <th>1</th> <td></td> <td>HĐTN</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>2</th> <td></td> <td>HĐTN</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>3</th> <td></td> <td>HĐTN</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>4</th> <td></td> <td>GDQP</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <th>5</th> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody></table> </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 grid cols 1 md:grid cols 3 gap 8"> <div class="bg white rounded lg overflow hidden shadow lg"> <img src="#" alt="Event 1" 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 lg overflow hidden shadow lg"> <img src="#" alt="Event 2" 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 lg overflow hidden shadow lg"> <img src="#" alt="Event 3" 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 black">Thư viện kí ức</h2> <p class="text black mb 8 text xl"> Những bức ảnh và thước phim lưu giữ hành trình 3 năm qua của chúng tớ < 3 </p> <button class="bg white px 8 py 3 rounded full hover:shadow lg transition"> <a href="https://drive.google.com/drive/folders/10r_lv2wH5H9W0GxtHGGp30RXP6RLlM7C">Thư viện ảnh</a> </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">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">Kết nối với chúng mình nha</h3> <div class="flex space x 4"> <ol> <li>Email: 12a1digiuatroirucro@gmail.com</li> <li> <a href="https://www.facebook.com/a1.k19luonvuituoi">Facebook</a> </li> <li> <a href="https://www.instagram.com/12a1_digiuatroirucro/">Instagram</a> </li> <li> <a href="https://www.tiktok.com/@a1k19pbcmaichay">Tiktok</a> </li> </ol> </div> </div> </div> </div> </footer> <div id="loginModal" class="fixed inset 0 bg black bg opacity 50 z 50 flex items center justify center hidden"> <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('loginModal').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 validateLogin(event)" class="space y 4"> <div> <label class="block text sm font medium mb 1">Email</label> <input type="email" id="loginEmail" 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="loginPassword" 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">Ghi nhớ đăng nhập</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"> Đăng nhập </button> <p class="text center text sm mt 4"> Bạn chưa có tài khoản? <a href="#" onclick="switchToRegister()" class="text [rgb(179,200,207)] hover:underline">Đăng ký</a> </p> </form> </div> </div> <! Đăng ký > <div id="registerModal" class="fixed inset 0 bg black bg opacity 50 z 50 flex items center justify center hidden"> <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('registerModal').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="regName" 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="regEmail" 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="regPassword" 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"> mật khẩu phải dài ít nhất 6 ký tự trong đó có cả chữ và số </p> </div> <div> <label class="block text sm font medium mb 1">Nhập lại mật khẩu</label> <input type="password" id="regConfirmPassword" 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"> Bạn đã từng đăng nhập? <a href="#" onclick="switchToLogin()" class="text [rgb(179,200,207)] hover:underline">Đăng nhập</a> </p> </form> </div> </div> <script> let users = JSON.parse(localStorage.getItem("users")) || []; function handleRegistration(event) { event.preventDefault(); const name = document.getElementById("regName").value; const email = document.getElementById("regEmail").value; const password = document.getElementById("regPassword").value; const confirmPassword = document.getElementById("regConfirmPassword").value; const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; const passwordRegex = /^(?=.*[A Za z])(?=.*\d)[A Za z\d]{6,}$/; if (!emailRegex.test(email)) { alert("Please enter a valid email address"); return false; } if (!passwordRegex.test(password)) { alert("mật khẩu phải dài ít nhất 6 ký tự trong đó có cả chữ và số"); return false; } if (password !== confirmPassword) { alert("Passwords do not match"); return false; } if (users.some((user) => user.email === email)) { alert("Email already registered"); return false; } users.push({ name, email, password }); localStorage.setItem("users", JSON.stringify(users)); alert("Registration successful! Please login."); document.getElementById("registerModal").classList.add("hidden"); document.getElementById("loginModal").classList.remove("hidden"); return false; } function validateLogin(event) { event.preventDefault(); const email = document.getElementById("loginEmail").value; const password = document.getElementById("loginPassword").value; const user = users.find( (u) => u.email === email && u.password === password ); if (user) { document.getElementById("loginModal").classList.add("hidden"); localStorage.setItem("currentUser", JSON.stringify(user)); updateUIForLoggedInUser(user); return true; } else { alert("Invalid credentials"); return false; } } function updateUIForLoggedInUser(user) { document.getElementById("authButtons").classList.add("hidden"); document.getElementById("userSection").classList.remove("hidden"); document.getElementById("userSection").classList.add("flex"); document.getElementById("userName").textContent = user.name; } function handleLogout() { localStorage.removeItem("currentUser"); document.getElementById("userSection").classList.add("hidden"); document.getElementById("userSection").classList.remove("flex"); document.getElementById("authButtons").classList.remove("hidden"); } function switchToLogin() { document.getElementById("registerModal").classList.add("hidden"); document.getElementById("loginModal").classList.remove("hidden"); } function switchToRegister() { document.getElementById("loginModal").classList.add("hidden"); document.getElementById("registerModal").classList.remove("hidden"); } window.addEventListener("load", () => { const currentUser = JSON.parse(localStorage.getItem("currentUser")); if (currentUser) { updateUIForLoggedInUser(currentUser); } }); </script> </body></html>
