校胁褨泄褌懈

<!DOCTYPE html> <html lang="uk" dir="" class="relative min-h-full"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>校胁褨泄褌懈</title> <link rel="stylesheet" href="/vendor/tabler/tabler-icons.min.css"> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-50"> <header class="sticky top-0 flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-white border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav class="relative max-w-[85rem] w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div class="flex items-center justify-between"> <a class="flex-none flex items-center text-xl font-semibold " href="/" aria-label="Brand"> <img class="mr-3" src="/assets/image/logo.png" alt="Logo"> <span>袘邪薪泻袚械芯写械蟹懈褔薪懈褏袛邪薪懈褏</span> </a> <div class="sm:hidden"> <button type="button" class="hs-collapse-toggle p-2 inline-flex justify-center items-center gap-2 rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-teal-600 transition-all text-sm " data-hs-collapse="#navbar-collapse-with-animation" aria-controls="navbar-collapse-with-animation" aria-label="Toggle navigation"> <svg class="hs-collapse-open:hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"> </path> </svg> <svg class="hs-collapse-open:block hidden w-4 h-4" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"> </path> </svg> </button> </div> </div> </nav> </header> <main class="flex min-h-screen items-center justify-center py-12 px-4 sm:px-6 lg:px-8">  <div class="max-w-lg w-full space-y-8 p-10 bg-white rounded-xl shadow-lg">  <div> <h1 class="text-4xl text-center font-semibold text-gray-900"> 校胁褨泄褌懈 </h1> </div>   <div id="error-message" class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert"> <span class="block sm:inline" id="error-text"></span> </div>   <form id="login-form" class="mt-8 space-y-6"> <div class="space-y-4"> <div> <label for="username" class="block text-sm font-medium text-gray-700">袥芯谐褨薪</label> <input id="username" name="username" type="text" autocomplete="username" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm" placeholder="袥芯谐褨薪"> </div> <div> <label for="password" class="block text-sm font-medium text-gray-700">袩邪褉芯谢褜</label> <input id="password" name="password" type="password" autocomplete="current-password" required class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm" placeholder="袩邪褉芯谢褜"> </div> </div> <div class="flex space-x-2"> <button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> 校胁褨泄褌懈 </button> <a type="button" href="/registration" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> 袟邪褉械褦褋褌褉褍胁邪褌懈褋褟 </a> </div> <div class="flex justify-center"> <a href="/forgot-password" class="text-sm text-teal-600 hover:text-teal-700">袟邪斜褍谢懈锌邪褉芯谢褜?</a> </div> </form> </div>  </main> <footer class="bg-gray-900"> <div class="max-w-[85rem] py-4 px-4 sm:px-6 lg:px-8 lg:pt-4 mx-auto"> <div class="mt-5 sm:mt-12 grid gap-y-2 sm:gap-y-0 sm:flex sm:justify-center sm:items-center"> <div class="flex justify-between items-center"> <p class="text-sm text-gray-400">漏 2024 袘邪薪泻袚械芯写械蟹懈褔薪懈褏袛邪薪懈褏</p> </div> </div> </div> </footer> <script> document.getElementById('login-form').addEventListener('submit', async function (event) { event.preventDefault(); const username = document.getElementById('username').value; const password = document.getElementById('password').value; const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); console.log(response) if (response.redirected) { window.location.href = '/'; } else { const errorMessage = document.getElementById('error-message'); const errorText = document.getElementById('error-text'); errorText.textContent = '袧械锌褉邪胁懈谢褜薪懈泄谢芯谐褨薪邪斜芯锌邪褉芯谢褜'; errorMessage.classList.remove('hidden'); } }); </script> </body> </html>

CINXE.COM

校胁褨泄褌懈