Skip to content

Commit 8b599f0

Browse files
push42push42
committed
Changed the overall design of the register and login
- Fixed some minor bugs modified: css/navigation.css modified: css/onlineusers.css modified: css/style_login.css modified: index.php modified: login.php
1 parent da39b29 commit 8b599f0

File tree

5 files changed

+174
-120
lines changed

5 files changed

+174
-120
lines changed

‎css/navigation.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,3 +135,9 @@
135135
background-position: 0% 0%;
136136
}
137137
}
138+
139+
/* Hyperlinks */
140+
.navigation-grid a:hover,
141+
.navigation-grid a:visited {
142+
color: transparent;
143+
}

‎css/onlineusers.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* Online Users Counter */
22
.online-users-count {
33
position: absolute; /* Fixed positioning allows you to place it anywhere on the screen */
4-
right: 150px; /* Adjust as needed to move it from the right edge */
4+
right: 170px; /* Adjust as needed to move it from the right edge */
55
top: 285px; /* Adjust as needed to move it from the top edge */
66
display: flex;
77
align-items: center;

‎css/style_login.css

Lines changed: 130 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,173 @@
11
body {
22
font-family: 'Montserrat', sans-serif;
3+
background: linear-gradient(to right, #0a0a0a, #1b1b1b);
34
display: flex;
4-
justify-content: center;
55
align-items: center;
6+
justify-content: center;
67
height: 100vh;
78
margin: 0;
8-
position: relative;
9+
color: #fff;
910
}
1011

11-
#particles-js {
12-
position: absolute;
13-
width: 100%;
14-
height: 100%;
15-
background-color: #0e0e0e;
16-
z-index: -1;
17-
}
18-
19-
.login-container {
20-
color: #003cff;
21-
background: rgb(24,26,71);
22-
background: radial-gradient(circle, rgba(24,26,71,0.9) 0%, rgba(27,27,27,1) 100%);
23-
border: 1px solid #003cff;
24-
border-radius: 8px;
25-
padding: 20px;
26-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
27-
display: flex;
28-
flex-direction: column;
29-
align-items: center;
12+
.register-container {
13+
background: #121212;
14+
padding: 60px 80px;
15+
border-radius: 10px;
16+
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
17+
width: 450px;
18+
max-width: 90%;
19+
animation: fadeIn 0.5s ease;
20+
}
21+
22+
.register-logo {
23+
display: block;
24+
max-width: 150px;
25+
margin: 0 auto 20px auto;
3026
}
3127

32-
.login-container h2 {
33-
margin-top: 0;
28+
.header-text h2 {
3429
text-align: center;
35-
margin-top: -50px;
30+
font-size: 22px;
31+
font-weight: bold;
32+
margin-bottom: 30px;
33+
color: #1e90ff;
3634
}
3735

38-
.login-container input[type="text"],
39-
.login-container input[type="password"] {
40-
width: 90%;
41-
padding: 10px;
42-
border: 3px solid #003cff;
43-
background: linear-gradient(to bottom, #eeeeee, #414141);
44-
border-radius: 6px;
45-
outline: none;
36+
.form-field {
37+
margin-bottom: 25px;
38+
position: relative;
4639
}
4740

48-
.login-container input[type="submit"] {
41+
.register-container label {
4942
font-weight: 500;
50-
font-size: 12px;
51-
bottom: 0;
52-
right: 50%;
53-
width: 50%;
54-
padding: 10px;
55-
margin-top: 10px;
56-
background: transparent;
57-
box-shadow: 5px #0e0e0e;
43+
display: block;
44+
margin-bottom: 10px;
45+
color: #eee;
46+
}
47+
48+
.register-container input[type="text"],
49+
.register-container input[type="password"] {
50+
padding: 15px;
51+
border: 2px solid #333;
52+
background: #333;
53+
border-radius: 10px;
54+
outline: none;
55+
color: #fff;
56+
font-size: 16px;
57+
width: 100%;
58+
}
59+
60+
.register-container input[type="text"]:focus,
61+
.register-container input[type="password"]:focus {
62+
border-color: #1e90ff;
63+
}
64+
65+
.register-container input[type="submit"] {
66+
width: 107%;
67+
padding: 18px;
68+
border: none;
69+
background-color: #1e90ff;
5870
color: #fff;
59-
border: 2px solid #414141;
60-
border-radius: 25px;
71+
font-weight: bold;
72+
font-size: 18px;
73+
border-radius: 10px;
6174
cursor: pointer;
6275
transition: background-color 0.3s ease;
63-
display: flex;
64-
justify-content: center;
65-
align-items: center;
66-
margin: auto;
67-
font-family: 'Montserrat', sans-serif;
6876
}
6977

70-
.login-container button:hover {
71-
background-color: #a8a8a8;
78+
.register-container input[type="submit"]:hover {
79+
background-color: #0066cc;
7280
}
7381

74-
.logo-image {
75-
width: 200px;
76-
height: auto;
77-
margin-bottom: 20px;
82+
@keyframes fadeIn {
83+
from {
84+
opacity: 0;
85+
}
86+
to {
87+
opacity: 1;
88+
}
7889
}
7990

80-
.login-username,
81-
.login-password {
82-
font-family: 'Montserrat', sans-serif;
83-
font-size: 14px;
84-
font-weight: 900;
85-
text-transform: uppercase;
86-
color: #a8a8a8;
87-
padding-bottom: 10px;
91+
/* Footer */
92+
footer {
93+
position: absolute;
94+
right: 10px;
95+
bottom: 10px;
96+
color: #eee;
97+
}
98+
99+
.footer-container {
88100
display: flex;
89101
align-items: center;
102+
font-size: 14px;
103+
padding: 10px 20px;
104+
border-radius: 5px;
105+
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
106+
transition: box-shadow 0.3s ease;
90107
}
91108

92-
.form-icons {
93-
margin-right: 8px;
109+
.footer-container:hover {
110+
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5);
94111
}
95112

96-
.form-icons2 {
97-
margin-right: 10px;
113+
.footer-container a {
114+
color: #1e90ff;
115+
text-decoration: none;
116+
margin: 0 5px;
117+
transition: color 0.3s ease;
98118
}
99119

100-
@media (max-width: 480px) {
101-
.login-container input[type="submit"] {
102-
width: 75%;
103-
}
120+
.footer-container a:hover {
121+
color: #0066cc;
104122
}
105123

106-
.spacer01 {
107-
font-family: 'Montserrat', sans-serif;
108-
font-size: 8.5px;
109-
font-weight: 600;
110-
text-transform: none;
111-
color: #a8a8a8;
112-
padding: 10px 10px;
124+
.heart {
125+
color: #ff4d4d;
126+
margin: 0 5px;
113127
}
114128

115-
.madeby {
116-
font-family: 'Montserrat', sans-serif;
117-
font-weight: 400;
118-
color: #fff;
119-
font-size: 7px;
120-
margin-top: 25px;
121-
text-align: center;
129+
.footer-container a:visited {
130+
color: #1e90ff; /* Same color as unvisited links */
122131
}
123132

124-
.hinweis {
125-
padding: 9px;
126-
color: #fff;
133+
134+
/* Info Banner register */
135+
.info-banner {
136+
background: #121212;
137+
padding: 15px 0;
138+
text-align: center;
139+
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
140+
position: fixed;
141+
top: 0;
142+
left: 0;
143+
right: 0;
144+
z-index: 1000;
145+
animation: slideDown 0.5s ease;
127146
}
128147

129-
.login-container p {
130-
color: #fff;
131-
font-weight: 600;
132-
font-family: 'Montserrat', sans-serif;
133-
font-size: 9px;
134-
margin-top: -10px;
148+
.info-banner p {
149+
margin: 0;
150+
font-size: 16px;
151+
color: #eee;
152+
}
153+
154+
.info-banner a {
155+
color: #1e90ff;
156+
text-decoration: underline;
157+
transition: color 0.3s ease;
158+
}
159+
160+
/* Hyperlinks */
161+
.info-banner a:hover,
162+
.info-banner a:visited {
163+
color: #0066cc;
135164
}
136165

137-
.iconsfont {
138-
padding: 8px;
139-
}
166+
@keyframes slideDown {
167+
from {
168+
top: -50px;
169+
}
170+
to {
171+
top: 0;
172+
}
173+
}

‎index.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,7 @@ function totalAccounts($conn) {
368368
</div>
369369

370370
<div class="online-users-count" id="onlineUsersCount">
371-
<span class="online-badge"></span>Teamler eingeloggt: <span id="onlineUsersCounter"></span>
371+
<span class="online-badge"></span>Staff Online: <span id="onlineUsersCounter"></span>
372372
</div>
373373

374374
<div class="server-status-container">

‎login.php

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<link rel="stylesheet" href="css/style_login.css">
56
<link rel="shortcut icon" href="img/favicon.png">
@@ -11,35 +12,37 @@
1112
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
1213
<title>Login</title>
1314
</head>
15+
1416
<body>
15-
<div id="particles-js"></div>
16-
<div class="login-container">
17-
<img src="https://i.ibb.co/smLg902/Untitled-1.gif" alt="Logo" class="logo-image">
18-
<h2>ROGUE-V DASHBOARD</h2>
19-
<p>Willkommen, bitte melde dich an.</p>
17+
<body>
18+
19+
<div class="info-banner">
20+
<p>Noch keinen Account? <a href="register.php">Erstelle dir einen Account</a> hier!</p>
21+
</div>
22+
23+
<div class="register-container">
24+
<img class="register-logo" src="img/system_avatar.png" alt="Logo">
25+
<div class="header-text">
26+
<h2>Willkommen zurück!</h2>
27+
</div>
28+
<form action="" method="post">
29+
<div class="form-field">
30+
<label><i class="form-icons"></i>Benutzername</label>
31+
<input type="text" name="username" placeholder="Gib deinen Benutzernamen ein">
32+
</div>
33+
<div class="form-field">
34+
<label><i class="form-icons"></i>Passwort</label>
35+
<input type="password" name="password" placeholder="Gib dein Passwort ein">
36+
</div>
37+
<input type="submit" value="Login" name="submit">
38+
</form>
2039
<?php
2140
ini_set('display_errors', 1);
2241
ini_set('display_startup_errors', 1);
2342
error_reporting(E_ALL);
2443
include "login_handler.php";
2544
include "gather_info.php";
2645
?>
27-
<form method="post" action="">
28-
<div class="login-username">
29-
<label></label>
30-
</div>
31-
<i class="fa-solid fa-user-shield form-icons" style="color: #ffffff;"></i><input type="text" name="username" required>
32-
<div class="login-username">
33-
<label></label>
34-
<div>
35-
<i class="fa-solid fa-lock form-icons2" style="color: #ffffff;"></i><input type="password" name="password" required>
36-
<div class="spacer01"><i class="fa-solid fa-info hinweis"></i>Solltest du noch keinen Account haben,</br> melde dich bitte im Discord im Teamchannel.</div>
37-
<input type="submit" value="ANMELDEN">
38-
</form>
39-
<div class="madeby"><i class="fa-solid fa-heart fa-beat iconsfont" style="color: #ff0000;"></i>made by push42
40-
<i class="fa-brands fa-discord fa-beat iconsfont" style="color: #1395ff;"></i>dsc.gg/roguev
41-
</div>
42-
</div>
4346
<script>
4447
// Particle.js configuration
4548
particlesJS("particles-js", {
@@ -61,4 +64,15 @@
6164
});
6265
</script>
6366
</body>
64-
</html>
67+
68+
<footer>
69+
<div class="footer-container">
70+
Made with <span class="heart">❤️</span> by <a href="https://github.com/reverseHaze" target="_blank">push.42</a> |
71+
<a href="https://roguev.de/" target="_blank">Projekt #1</a> |
72+
<a href="https://trap-life.de/" target="_blank">Projekt #2</a>
73+
</div>
74+
</footer>
75+
76+
77+
78+
</html>

0 commit comments

Comments
 (0)