Spaces:
Sleeping
Sleeping
| <html lang="en" class="toggleMenu"> | |
| <head> | |
| <meta charSet="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> | |
| <link rel="preload" href="/_next/static/media/25e11f223a13018e-s.p.woff2" as="font" crossorigin="" type="font/woff2" /> | |
| <link rel="preload" href="/_next/static/media/6905431624c34d00-s.p.woff2" as="font" crossorigin="" type="font/woff2" /> | |
| <link rel="stylesheet" href="/_next/static/css/e4887d32fecac951.css" crossorigin="" data-precedence="next" /> | |
| <link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-a5591398fe5534e2.js" crossorigin="" /> | |
| <script src="/_next/static/chunks/fd9d1056-d7dd7ab1b204318c.js" async="" crossorigin=""></script> | |
| <script src="/_next/static/chunks/472-323e97dcd87f02be.js" async="" crossorigin=""></script> | |
| <script src="/_next/static/chunks/main-app-892c3dff08e9cd4c.js" async="" crossorigin=""></script> | |
| <script src="/_next/static/chunks/326-1870c15fd85c544e.js?dpl=dpl_J1tbkvrtzchrmWyLBiAfJW1Wv2FE" async=""></script> | |
| <script src="/_next/static/chunks/app/(user)/sign-up/page-30aefdb3500631cb.js?dpl=dpl_J1tbkvrtzchrmWyLBiAfJW1Wv2FE" async=""></script> | |
| <title>Techwave NextJs | Sign Out</title> | |
| <meta property="og:title" content="Sign Out" /> | |
| <meta name="twitter:card" content="summary" /> | |
| <meta name="twitter:title" content="Sign Out" /> | |
| <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" /> | |
| <meta name="next-size-adjust" /> | |
| <script src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js" crossorigin="" noModule=""></script> | |
| </head> | |
| <style> | |
| .input-div { | |
| position: relative; | |
| width: 100px; | |
| height: 100px; | |
| border-radius: 50%; | |
| border: 2px solid #7c5fe3; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| overflow: hidden; | |
| box-shadow: 0px 0px 100px #7c5fe3 , inset 0px 0px 10px #7c5fe3,0px 0px 5px rgb(255, 255, 255); | |
| animation: flicker 2s linear infinite; | |
| } | |
| .icon { | |
| color: #7c5fe3; | |
| font-size: 2rem; | |
| cursor: pointer; | |
| animation: iconflicker 2s linear infinite; | |
| } | |
| .input2 { | |
| position: absolute; | |
| opacity: 0; | |
| width: 100%; | |
| height: 100%; | |
| cursor: pointer ; | |
| } | |
| @keyframes flicker { | |
| 0% { | |
| border: 2px solid #7c5fe3; | |
| box-shadow: 0px 0px 100px #7c5fe3 , inset 0px 0px 10px #7c5fe3,0px 0px 5px rgb(255, 255, 255); | |
| } | |
| 5% { | |
| border: none; | |
| box-shadow: none; | |
| } | |
| 10% { | |
| border: 2px solid #7c5fe3; | |
| box-shadow: 0px 0px 100px #7c5fe3 , inset 0px 0px 10px #7c5fe3,0px 0px 5px rgb(255, 255, 255); | |
| } | |
| 25% { | |
| border: none; | |
| box-shadow: none; | |
| } | |
| 30% { | |
| border: 2px solid #7c5fe3; | |
| box-shadow: 0px 0px 100px #7c5fe3 , inset 0px 0px 10px #7c5fe3,0px 0px 5px rgb(255, 255, 255); | |
| } | |
| 100% { | |
| border: 2px solid #7c5fe3; | |
| box-shadow: 0px 0px 100px #7c5fe3 , inset 0px 0px 10px #7c5fe3,0px 0px 5px rgb(255, 255, 255); | |
| } | |
| } | |
| @keyframes iconflicker { | |
| 0% { | |
| opacity: 1; | |
| } | |
| 5% { | |
| opacity: 0.2; | |
| } | |
| 10% { | |
| opacity: 1; | |
| } | |
| 25% { | |
| opacity: 0.2; | |
| } | |
| 30% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| <style> | |
| .error-message { | |
| color: red; | |
| border: 1px solid red; | |
| padding: 10px; | |
| list-style: none; | |
| } | |
| .success-message { | |
| color: green; | |
| border: 1px solid green; | |
| padding: 10px; | |
| list-style: none; | |
| } | |
| </style> | |
| <body> | |
| <!--$--> | |
| <div class="techwave_fn_sign"> | |
| <div class="sign__content"> | |
| <img src="desine/img/logo-desktop-full.png"> | |
| <br> | |
| <h1 class="logo">Designed by Frenify</h1> | |
| <form class="signup" method="POST" action="/sign-up" onsubmit="return validateForm()" enctype="multipart/form-data"> | |
| <div class="form__content"> | |
| <h1 class="logo">Designed by Frenify</h1> | |
| <br> | |
| {% with messages = get_flashed_messages() %} | |
| {% if messages %} | |
| <ul> | |
| {% for message in messages %} | |
| {% if message == "Username is already taken. Please choose a different username." %} | |
| <li class="error-message">{{ message }}</li> | |
| {% elif message == "Failed to upload image to DataBase." %} | |
| <li class="error-message">{{ message }}</li> | |
| {% else %} | |
| {% endif %} | |
| {% endfor %} | |
| </ul> | |
| {% endif %} | |
| {% endwith %} | |
| <div class="form__username"> | |
| <label for="first_name">First Name</label> | |
| <input type="text" class="input" id="first_name" name="first_name" placeholder="First Name" required /> | |
| </div> | |
| <div class="form__username"> | |
| <label for="last_name">Last Name</label> | |
| <input type="text" class="input" id="last_name" name="last_name" placeholder="Last Name" required /> | |
| </div> | |
| <div class="form__username"> | |
| <label for="username">Username</label> | |
| <input type="text" class="input" id="username" name="username" placeholder="Username" required /> | |
| </div> | |
| <div class="form__pass"> | |
| <label for="password">Password</label> | |
| <input type="password" id="password" name="password" autoComplete="current-password" spellCheck="false" placeholder="password" required /> | |
| </div> | |
| <div class="form__confirm-pass"> | |
| <label for="confirm_password">Confirm Password</label> | |
| <input type="password" id="confirm_password" name="confirm_password" autoComplete="current-password" spellCheck="false" placeholder="Confirm password" required /> | |
| </div> | |
| <br> | |
| <div class="input-div"> | |
| <input class="input2" type="file" id="profile_image" name="profile_image" required onchange="displayImageName()"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 24 24" stroke-width="2" fill="none" stroke="currentColor" class="icon"><polyline points="16 16 12 12 8 16"></polyline><line y2="21" x2="12" y1="12" x1="12"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg> | |
| </div> | |
| <br> | |
| <p class="file-message" id="file-message">Please upload an image for your profile</p> | |
| <br> | |
| <div class="form__submit"> | |
| <label class="fn__submit"> | |
| <input type="submit" name="submit" value="Create Account" /> | |
| </label> | |
| </div> | |
| <div class="form__alternative "> | |
| <div class="fn__lined_text"> | |
| </div> | |
| </div> | |
| <script> | |
| function validateForm() { | |
| var password = document.getElementById("password").value; | |
| var confirm_password = document.getElementById("confirm_password").value; | |
| var username = document.getElementById("username").value; | |
| var passwordErrorMessage = document.createElement("p"); | |
| var usernameErrorMessage = document.createElement("p"); | |
| passwordErrorMessage.className = "error-message"; | |
| usernameErrorMessage.className = "error-message"; | |
| // Clear previous error messages | |
| var errorMessages = document.querySelectorAll(".error-message"); | |
| errorMessages.forEach(function(message) { | |
| message.remove(); | |
| }); | |
| // Password validation | |
| if (password.length < 8 || !/[A-Z]/.test(password)) { | |
| passwordErrorMessage.innerHTML = "Password must be at least 8 characters long and contain at least one capital letter."; | |
| var passwordField = document.getElementById("password"); | |
| passwordField.insertAdjacentElement("afterend", passwordErrorMessage); | |
| return false; | |
| } | |
| if (password !== confirm_password) { | |
| var confirmPassField = document.getElementById("confirm_password"); | |
| var confirmErrorMessage = document.createElement("p"); | |
| confirmErrorMessage.className = "error-message"; | |
| confirmErrorMessage.innerHTML = "Passwords do not match."; | |
| confirmPassField.insertAdjacentElement("afterend", confirmErrorMessage); | |
| return false; | |
| } | |
| // Username validation | |
| if (username.length < 6 || /[A-Z]/.test(username) || /[^a-z0-9]/.test(username)) { | |
| usernameErrorMessage.innerHTML = "Username must be at least 6 characters long, contain no capital letters, and contain no special symbols."; | |
| var usernameField = document.getElementById("username"); | |
| usernameField.insertAdjacentElement("afterend", usernameErrorMessage); | |
| return false; | |
| } | |
| return true; | |
| } | |
| function displayImageName() { | |
| var input = document.getElementById('profile_image'); | |
| var fileMessage = document.getElementById('file-message'); | |
| if (input.files && input.files[0]) { | |
| fileMessage.innerText = "Uploaded file: " + input.files[0].name; | |
| } else { | |
| fileMessage.innerText = "Please upload an image for your profile"; | |
| } | |
| } | |
| </script> <div class="sign__desc"> | |
| <p>Already have an account? <a href="/login">Sign In</a></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!--/$--> | |
| <script src="/_next/static/chunks/webpack-a5591398fe5534e2.js" crossorigin="" async=""></script> | |
| </body> | |
| </html> |