AI_BTC

Sleeping

File size: 9,344 Bytes

<!DOCTYPE html>
<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 !important;
}

@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>