-
-
Notifications
You must be signed in to change notification settings - Fork 71
/
chaos.html
218 lines (195 loc) · 6.83 KB
/
chaos.html
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!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;
position: absolute;
top: 10px;
left: 50px;
border-radius: 50%;
box-shadow: 0 1px 20px rgba(135, 206, 235, 0.5), 0 1px 30px rgba(135, 206, 235, 0.5); /* Soften shadow with transparency */
background-color: rgba(0, 0, 0, 0.2); /* Optional: slight dark overlay for better blending */
animation: rotate 5s linear infinite; /* Rotate continuously */
}
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 rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@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>