File size: 3,513 Bytes
3ff1432 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up - Book Reading Streak Tracker</title>
<style>
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background: url('https://source.unsplash.com/1920x1080/?book') no-repeat center center fixed;
background-size: cover;
color: white;
}
header {
background-color: rgba(0, 0, 0, 0.7);
padding: 10px 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
#container {
background: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 10px;
margin-top: 60px;
}
h1 {
color: #333;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
color: #333;
font-size: 18px;
margin-top: 10px;
}
input {
padding: 10px;
margin: 5px;
width: 100%;
box-sizing: border-box;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
margin: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
width: 100%;
}
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
</style>
</head>
<body>
<div class="scrollmenu">
<a href="signedin.html">Home</a>
<a href="signup.html">Sign Up</a>
<a href="signin.html">Sign In</a>
<a href="#about">About</a>
<a href="#support">Support</a>
</div>
<div id="container">
<h1>Sign Up</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<a type="submit" onclick="showNotification()" href="signedin.html">Sign Up</a>
</form>
</div>
<div class="notification-bar">
This website uses cookies to save your reading streak data. By using this site, you agree to our use of cookies.
</div>
<script>
// Function to show notification
function showNotification() {
document.querySelector('.notification-bar').style.display = 'block';
setTimeout(function() {
document.querySelector('.notification-bar').style.display = 'none';
}, 5000);
}
// Function to toggle menu options
function toggleMenu() {
const menuOptions = document.querySelector('.menu-options');
menuOptions.style.transform = menuOptions.style.transform === 'translateY(0)' ? 'translateY(-100%)' : 'translateY(0)';
}
</script>
</body>
</html>
|