-
-
Notifications
You must be signed in to change notification settings - Fork 65
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #135 from Sakshamp19/feature/signin-signup
added a new signin and signup page
- Loading branch information
Showing
4 changed files
with
426 additions
and
1 deletion.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,209 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Chaos Web - Sign In</title> | ||
| <style> | ||
| img{ | ||
| width: 170px; | ||
| height: 170px; | ||
| /* border: white 5px solid; */ | ||
| position: absolute; | ||
| top: 10px; | ||
| left: 50px; | ||
| border-radius: 50%; | ||
| box-shadow: 0 1px 10px #87ceeb, 0 1px 20px #87ceeb; | ||
| } | ||
| body { | ||
| background: url('3d-effect-hypnosis-spiral-vector-7844424.jpg') center center fixed, #000; | ||
| background-size: cover; | ||
| animation: moveBackground 15s infinite linear; | ||
| color: #fff; | ||
| font-family: 'Comic Sans MS', cursive, sans-serif; | ||
| text-align: center; | ||
| font-size: 22px; | ||
| z-index: 1; | ||
| overflow: hidden; /* Prevent scrolling */ | ||
| } | ||
|
|
||
| @keyframes moveBackground { | ||
| 0% { background-position: 0 0; } | ||
| 50% { background-position: 100% 100%; } | ||
| 100% { background-position: 0 0; } | ||
| } | ||
|
|
||
| body::before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background: rgba(0, 0, 0, 0.6); /* Dark overlay */ | ||
| z-index: -1; | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 48px; | ||
| font-weight: bold; | ||
| margin-bottom: 20px; | ||
| text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); | ||
| } | ||
|
|
||
| .container { | ||
| margin-top: 100px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .form-group { | ||
| margin-bottom: 30px; | ||
| position: relative; | ||
| display: flex; /* Use flexbox to align fields horizontally */ | ||
| justify-content: center; /* Center items horizontally */ | ||
| gap: 20px; /* Space between username and password fields */ | ||
| } | ||
|
|
||
| label { | ||
| font-size: 28px; | ||
| display: block; | ||
| text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); | ||
| } | ||
|
|
||
| input { | ||
| padding: 15px; | ||
| border: 3px solid #fff; | ||
| background: #333; | ||
| color: #fff; | ||
| width: 300px; | ||
| font-size: 20px; | ||
| } | ||
| a{ | ||
| text-decoration: none; | ||
| color: inherit; | ||
| } | ||
|
|
||
| .button-group { | ||
| display: flex; /* Use flexbox to align buttons below the input fields */ | ||
| flex-direction: column; /* Stack buttons vertically */ | ||
| align-items: center; /* Center buttons */ | ||
| margin-top: 30px; /* Margin above buttons for spacing */ | ||
| } | ||
|
|
||
| button { | ||
| padding: 15px 30px; | ||
| background: linear-gradient(135deg, #555, #888); | ||
| color: #fff; | ||
| border: 2px solid #aaa; | ||
| cursor: pointer; | ||
| font-size: 22px; | ||
| border-radius: 10px; | ||
| margin: 5px 0; /* Margin between buttons */ | ||
| position: absolute; /* Allow buttons to move freely */ | ||
| transition: left 0.3s, top 0.3s; /* Smooth transition */ | ||
| } | ||
|
|
||
| button:hover { | ||
| background: linear-gradient(135deg, #777, #999); | ||
| transform: rotate(10deg) scale(1.1); | ||
| transition: background 0.3s ease, transform 0.3s ease; | ||
| } | ||
|
|
||
| #errorMessage { | ||
| color: red; | ||
| display: none; | ||
| font-size: 26px; | ||
| } | ||
|
|
||
| /* Style for the logo */ | ||
| .logo { | ||
| position: fixed; | ||
| top: 10px; | ||
| left: 10px; | ||
| z-index: 10; | ||
| width: 100px; /* Adjust the size of the logo */ | ||
| height: auto; | ||
| } | ||
|
|
||
| /* Blank screen effect */ | ||
| .blank-screen { | ||
| display: none; | ||
| position: fixed; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100vw; | ||
| height: 100vh; | ||
| z-index: 9999; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <!-- Add the logo here --> | ||
| <img src="https://chaosweb.vercel.app/assets/logo-DJRpIUaM.png" type="image/x-icon"> | ||
|
|
||
| <div class="container"> | ||
| <h1>Welcome Back!</h1> | ||
| <div class="form-group"> | ||
| <div> | ||
| <label for="username">Definitely not your username</label> | ||
| <input type="text" id="username" required> | ||
| </div> | ||
| <div> | ||
| <label for="password">Password... or is it?</label> | ||
| <input type="password" id="password" required> | ||
| </div> | ||
| </div> | ||
| <div class="button-group"> | ||
| <button id="signInButton">Do not press</button> | ||
| <button id="backButton"><a href="./signup.html">Back to Sign Up</a></button> | ||
| </div> | ||
| <p id="errorMessage">Error: You haven’t even started yet!</p> | ||
| </div> | ||
|
|
||
| <!-- Blank screen div --> | ||
| <div class="blank-screen"></div> | ||
| <script> | ||
| // Function to get random position within the screen bounds | ||
| function getRandomPosition(button) { | ||
| const windowWidth = window.innerWidth; | ||
| const windowHeight = window.innerHeight; | ||
|
|
||
| // Calculate the maximum position allowed for the button to prevent it from going out of the screen | ||
| const maxX = windowWidth - button.offsetWidth; | ||
| const maxY = windowHeight - button.offsetHeight; | ||
|
|
||
| // Generate random target positions | ||
| const randomX = Math.random() * maxX; | ||
| const randomY = Math.random() * maxY; | ||
|
|
||
| return { randomX, randomY }; | ||
| } | ||
|
|
||
| // Function to move a button to a random position | ||
| function moveButtonToRandomPosition(button) { | ||
| const { randomX, randomY } = getRandomPosition(button); | ||
| button.style.left = `${randomX}px`; | ||
| button.style.top = `${randomY}px`; | ||
| } | ||
|
|
||
| // Event listeners for mouseover to move buttons instantly | ||
| document.getElementById('signInButton').addEventListener('mouseover', function() { | ||
| moveButtonToRandomPosition(this); | ||
| }); | ||
|
|
||
| document.getElementById('backButton').addEventListener('mouseover', function() { | ||
| moveButtonToRandomPosition(this); | ||
| }); | ||
|
|
||
| // Function to continuously move buttons | ||
| function animateButtons() { | ||
| moveButtonToRandomPosition(document.getElementById('signInButton')); | ||
| moveButtonToRandomPosition(document.getElementById('backButton')); | ||
| requestAnimationFrame(animateButtons); // Call again to create a continuous loop | ||
| } | ||
|
|
||
| // Start the animation | ||
| animateButtons(); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.