Skip to content

Commit 49ce30b

Browse files
chris-everettchris-sparks
chris-everett
authored and
chris-sparks
committed
Modernise login forms and structure.
1 parent 3abbca8 commit 49ce30b

File tree

2 files changed

+281
-76
lines changed

2 files changed

+281
-76
lines changed

‎DynmapCore/src/main/resources/extracted/web/css/dynmap_style.css‎

Lines changed: 233 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
:root {
2+
--colour-highlight: oklch(0.56 0.16 142.24);
3+
--smokey-white: oklch(0.99 0 0);
4+
--gunmetal: oklch(0.29 0.02 277.99);
5+
--charcoal-grey: oklch(0.34 0.03 273.24);
6+
--ship-grey: oklch(0.36 0.02 278.37);
7+
--vampire-grey: oklch(0.45 0.02 278.64);
8+
--cool-grey: oklch(0.72 0.02 270.22);
9+
--slate-grey: oklch(0.6 0.02 264.54);
10+
--status-error: oklch(0.51 0.12 22.01);
11+
}
12+
13+
.montserrat-font {
14+
font-family: "Montserrat", sans-serif;
15+
font-optical-sizing: auto;
16+
font-weight: 400;
17+
font-style: normal;
18+
}
19+
120
/* TILE DEBUGGING */
221
/*.leaflet-tile {
322
margin: -1;
@@ -1019,46 +1038,227 @@
10191038

10201039
/* Login/register panel */
10211040
.dynmaplogin {
1022-
text-align: center;
1023-
width: 100%;
1024-
font-weight: bold;
1025-
color: #FFFFFF;
1041+
display: grid;
1042+
width: 100%;
1043+
height: 100%;
1044+
place-items: center;
1045+
width: 100%;
1046+
font-weight: bold;
1047+
color: #FFFFFF;
1048+
background: var(--vampire-grey);
1049+
font-family: "Montserrat", sans-serif;
1050+
font-optical-sizing: auto;
1051+
font-weight: 400;
1052+
font-style: normal;
1053+
box-sizing: border-box;
1054+
1055+
& * {
1056+
box-sizing: border-box;
1057+
}
1058+
1059+
.container {
1060+
--outer-margin: 2rem;
1061+
container-type: inline-size;
1062+
container-name: container;
1063+
position: relative;
1064+
width: calc(100% - var(--outer-margin) * 2);
1065+
max-width: 960px;
1066+
padding: 3rem;
1067+
margin: var(--outer-margin);
1068+
padding-block-start: 3rem;
1069+
border-radius: 20px;
1070+
/*background-image: url("https://wallpapersok.com/images/file/minecraft-landscape-with-cloudy-sky-b9nxzmdukp1j51zq.jpg"); */
1071+
background-color: var(--gunmetal);
1072+
box-shadow: 0px 30px 30px -5px var(--ship-grey);
1073+
1074+
&::before {
1075+
position: absolute;
1076+
top: 0;
1077+
left: 0;
1078+
z-index: 0;
1079+
content: '';
1080+
display: flex;
1081+
width: 100%;
1082+
height: 100%;
1083+
background: url("https://cdn.modrinth.com/data/fRQREgAc/2eaa1e6a6fa03e485a319a628d6b29ba382855b4_96.webp");
1084+
background-position: right 1rem;
1085+
background-repeat: no-repeat;
1086+
background-size: 25%;
1087+
pointer-events: none;
1088+
opacity: 0.4;
1089+
mix-blend-mode: overlay;
1090+
}
1091+
}
1092+
1093+
h2 {
1094+
margin: 0;
1095+
font-size: 2rem;
1096+
font-weight: 700;
1097+
color: var(--smokey-white);
1098+
1099+
span {
1100+
color: var(--colour-highlight);
1101+
}
1102+
}
1103+
h3 {
1104+
margin: 0;
1105+
margin-block-end: 5rem;
1106+
padding-right: 40px;
1107+
font-size: 1rem;
1108+
font-weight: 700;
1109+
color: var(--cool-grey);
1110+
text-transform: uppercase;
1111+
text-decoration: underline;
1112+
text-decoration-thickness: 1px;
1113+
text-underline-offset: 5px;
1114+
text-decoration-color: var(--colour-highlight);
1115+
1116+
&:has(~ .statusmessage > div) {
1117+
margin-block-end: 3rem;
1118+
}
1119+
}
1120+
1121+
p {
1122+
line-height: 1.4;
1123+
}
1124+
1125+
a {
1126+
color: var(--colour-highlight);
1127+
}
1128+
1129+
code {
1130+
font-family: 'Courier New', Courier, monospace;
1131+
font-size: 14px;
1132+
padding: 4px 6px;
10261133
background: #000000;
1027-
}
1134+
border-radius: 5px;
1135+
}
10281136

1029-
table.loginregister {
1030-
color: #ffffff;
1031-
border: 1px solid rgba(64,64,64,0.6);
1032-
background: #bbb;
1033-
font-weight: bold;
1034-
margin: auto;
1035-
}
1137+
.loginregister {
1138+
font-size: 1rem;
10361139

1037-
td.login {
1038-
vertical-align: top;
1039-
color: #000000;
1040-
background-color: #bbb;
1041-
border: 1px solid rgba(64,64,64,0.6);
1042-
font-weight: bold;
1043-
margin: 2em;
1044-
width: 40em;
1045-
}
1140+
&:has(#register-form:target) #login-form {
1141+
display: none;
1142+
}
10461143

1047-
td.register {
1048-
vertical-align: top;
1049-
color: #000000;
1050-
background-color: #bbb;
1051-
border: 1px solid rgba(64,64,64,0.6);
1052-
font-weight: bold;
1053-
margin: 2em;
1054-
width: 40em;
1144+
#login-form { }
1145+
1146+
#register-form {
1147+
display: none;
1148+
&:target {
1149+
display: block;
1150+
}
1151+
}
1152+
input {
1153+
width: 100%;
1154+
padding: 0;
1155+
font-size: 1rem;
1156+
color: var(--smokey-white);
1157+
border: none;
1158+
background: transparent;
1159+
font-family: inherit;
1160+
font-weight: 500;
1161+
&::placeholder {
1162+
opacity: 0.1;
1163+
color: var(--smokey-white);
1164+
1165+
}
1166+
&:focus-visible {
1167+
background: none;
1168+
border: none;
1169+
outline: none;
1170+
}
1171+
&:is(:-webkit-autofill, :autofill) {
1172+
border: none;
1173+
}
1174+
1175+
&[type="submit"] {
1176+
max-width: 20ch;
1177+
padding-block: 1rem;
1178+
padding-inline: 2rem;
1179+
background-color: var(--colour-highlight);
1180+
border-radius: calc(infinity * 1px);
1181+
border: 2px solid transparent;
1182+
cursor: pointer;
1183+
transition: .2s background ease;
1184+
&:hover {
1185+
background-color: oklch(from var(--colour-highlight) calc(l - 0.04) c h);
1186+
}
1187+
&:focus-visible {
1188+
border: 2px solid var(--smokey-white);
1189+
}
1190+
}
1191+
}
1192+
1193+
label {
1194+
margin-block-end: .2rem;
1195+
color: var(--slate-grey);
1196+
font-size: 0.813rem;
1197+
font-weight: 400;
1198+
}
1199+
}
1200+
1201+
form {
1202+
display: grid;
1203+
grid-template-columns: minmax(100px, 1fr);
1204+
gap: 2rem;
1205+
max-width: 60ch;
1206+
1207+
p {
1208+
grid-column: 1 / -1;
1209+
}
1210+
}
1211+
.form-item {
1212+
position: relative;
1213+
grid-column: 1 / -1;
1214+
display: flex;
1215+
flex-direction: column;
1216+
padding-block: 1rem;
1217+
padding-inline: 2rem;
1218+
background-color: var(--charcoal-grey);
1219+
border-radius: 10px;
1220+
border: 2px solid transparent;
1221+
transition: border .5s ease;
1222+
&:focus-within {
1223+
border: 2px solid var(--colour-highlight);
1224+
color: black;
1225+
}
1226+
}
1227+
1228+
@container (width > 400px) {
1229+
form {
1230+
grid-template-columns: repeat(2, minmax(100px, 1fr));
1231+
1232+
}
1233+
1234+
.form-item.shortened {
1235+
grid-column: 1;
1236+
+ .shortened {
1237+
grid-column: 2;
1238+
}
1239+
}
1240+
1241+
h3 {
1242+
padding: 0;
1243+
}
1244+
}
10551245
}
10561246

10571247
div.statusmessage {
1058-
color: #FF0000;
1059-
font-weight: bold;
1060-
font-size: 24px;
1061-
1248+
position: relative;
1249+
z-index: 2;
1250+
&:empty {
1251+
display: none;
1252+
}
1253+
> div {
1254+
margin-block-end: 2rem;
1255+
padding: 1rem;
1256+
color: var(--smokey-white);
1257+
font-weight: bold;
1258+
font-size: 16px;
1259+
background: linear-gradient(90deg, var(--status-error) 30%, transparent 80%);
1260+
font-weight: 300;
1261+
border-radius: 5px;
10621262
}
10631263

10641264
.logincontainer {

‎DynmapCore/src/main/resources/extracted/web/login.html‎

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@
22
<html>
33
<head>
44
<meta charset="utf-8" />
5-
65
<META HTTP-EQUIV = "Pragma" CONTENT="no-cache">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<title> Minecraft Dynamic Map - Login/Register </title>
88
<link rel="icon" href="images/dynmap.ico" type="image/ico" />
99

1010
<link rel="stylesheet" type="text/css" href="css/leaflet.css?_=${version}-${buildnumber}" />
1111
<link rel="stylesheet" type="text/css" href="css/standalone.css?_=${version}-${buildnumber}" media="screen" />
1212
<link rel="stylesheet" type="text/css" href="css/dynmap_style.css?_=${version}-${buildnumber}" media="screen" />
13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
1316
<script type="text/javascript" src="standalone/config.js?_=${version}-${buildnumber}"></script>
1417
<script type="text/javascript" src="js/jquery-3.5.1.js?_=${version}-${buildnumber}"></script>
1518

@@ -55,48 +58,50 @@
5558
</head>
5659
<body>
5760
<div class='dynmaplogin'>
58-
<h2>Minecraft Dynamic Map - Login/Register</h2>
59-
<div id="status_message" class="statusmessage"></div>
60-
<table class='loginregister'>
61-
<tr><th>Existing User:</th></tr>
62-
<tr><td class='login'>
63-
<FORM METHOD=POST name=login ACTION="up/login">
64-
<p>
65-
Enter username and password:
66-
<BR>
67-
<BR>
68-
<table>
69-
<tr><td>Username</td><td><input type="text" size="20" name="j_username"></td></tr>
70-
<tr><td>Password</td><td><input type="password" size="20" name="j_password"></td></tr>
71-
</table>
72-
<BR>
73-
<input type="submit" name="login" value="Login">
74-
</p>
75-
</form>
76-
<p>
77-
</td></tr>
78-
<tr><th>Register New User:</th></tr>
79-
<tr>
80-
<td class='register'>
81-
<FORM METHOD=POST name=register ACTION="up/register">
82-
<p>
83-
Run '/dynmap webregister' and enter your username and registration code, and create a password:
84-
<BR>
85-
<BR>
86-
<table>
87-
<tr><td>Username</td><td><input type="text" size="20" name="j_username"></td></tr>
88-
<tr><td>Password</td><td><input type="password" size="20" name="j_password"></td></tr>
89-
<tr><td>Verify Password</td><td><input type="password" size="20" name="j_verify_password"></td></tr>
90-
<tr><td>Registration Code</td><td><input type="text" size="20" name="j_passcode"></td></tr>
91-
</table>
92-
<BR>
93-
<BR>
94-
<input type="submit" name="register" value="Register">
95-
</p>
96-
</form>
97-
</td>
98-
</tr>
99-
</table>
61+
<div class="container">
62+
<h3 class="">Minecraft Dynamic Map</h3>
63+
<div id="status_message" class="statusmessage"></div>
64+
65+
<div class="loginregister">
66+
<div class="login" id="login-form">
67+
<h2>Login<span>.</span></h2>
68+
69+
<p>Need an account? <a href="#register-form">Register a new user</a></p>
70+
<form method="post" name="login" action="up/login">
71+
<div class="form-item">
72+
<label for="j_username">Username</label><input type="text" size="20" name="j_username" id="j_username" placeholder="Enter username">
73+
</div>
74+
<div class="form-item">
75+
<label for="j_password">Password</label><input type="password" size="20" name="j_password" id="j_password" placeholder="Enter password">
76+
</div>
77+
<input type="submit" name="login" value="Login">
78+
</form>
79+
</div>
80+
81+
<div class="register" id="register-form">
82+
<h2>Register New User<span>.</span></h2>
83+
84+
<p>Already have an account? <a href="#login-form">Log in</a></p>
85+
<form method="post" name="register" action="up/register">
86+
<p>Run <code>/dynmap webregister [username]</code> enter your username and password, followed by the registration code</p>
87+
<div class="form-item">
88+
<label for="j_username">Username</label><input type="text" size="20" name="j_username" id="j_username" placeholder="Enter username">
89+
</div>
90+
<div class="form-item shortened">
91+
<label for="j_password">Password</label><input type="password" size="20" name="j_password" id="j_password" placeholder="Enter password">
92+
</div>
93+
<div class="form-item shortened">
94+
<label for="j_verify_password">Verify password</label><input type="password" size="20" name="j_verify_password" id="j_verify_password" placeholder="Re-enter password">
95+
</div>
96+
<div class="form-item">
97+
<label for="j_passcode">Registration code</label><input type="password" size="20" name="j_passcode" id="j_passcode" placeholder="Enter registration code">
98+
</div>
99+
<input type="submit" name="register" value="Register">
100+
</form>
101+
</div>
102+
</div>
103+
104+
</div>
100105
</div>
101106

102107
</body>

0 commit comments

Comments
 (0)