halbear/HalbearNetDesktopSite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more mobile support and misc changes

Browse Source
This commit is contained in:
Halbear
2026-03-11 20:04:44 +00:00
parent b70fb4d2af
commit b016e6bd13
15 changed files with 524 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
AccountCentre/AccountCentre.css
View File

@@ -1,4 +1,19 @@
@media only screen and (max-aspect-ratio: 1.165/1) {
.AccountIcon{
border-style: inset;
border-top: #8cefff 0.5vh solid;
border-left: #8cefff 0.5vh solid;
border-bottom: none;
border-right: none;
filter: drop-shadow(-1vh -1vh 1vh #8cefff);
margin-left:1vh;
transition: 0.25s;
margin-right:1vh;
border-radius: 4vh;
background-image: linear-gradient(to bottom, rgba(100,200,255,0.5), rgba(100,200,255,0.25), rgba(100,200,255,0.15), rgba(100,200,255,0.35));
width: 5vh;
height:5vh;
}
.Logo{
margin-left:1vh;
transition: 0.25s;
@@ -21,7 +36,7 @@
.HotbarButton:hover{
cursor: pointer;
margin-right: 1vh;
width:35vw;
width:30vw;
height: 6vh;
filter: drop-shadow(0 0 2vh #8cefff);
transform: scale(1.1) translateY(1%);
@@ -44,7 +59,7 @@
font-family: "Arial", serif;
font-weight: bolder;
font-size: 2vh;
width: 30vw;
width: 25vw;
height: 5vh;
border-radius: 5vh;
color:white;
@@ -124,6 +139,21 @@
}
}
@media only screen and (min-aspect-ratio: 1.165/1) {
.AccountIcon{
border-style: inset;
border-top: #8cefff 0.5vh solid;
border-left: #8cefff 0.5vh solid;
border-bottom: none;
border-right: none;
filter: drop-shadow(-1vh -1vh 1vh #8cefff);
margin-left:1vh;
transition: 0.25s;
margin-right:1vh;
border-radius: 4vh;
background-image: linear-gradient(to bottom, rgba(100,200,255,0.5), rgba(100,200,255,0.25), rgba(100,200,255,0.15), rgba(100,200,255,0.35));
width: 8vh;
height:8vh;
}
.Logo{
margin-left:1vh;
transition: 0.25s;
@@ -288,21 +318,6 @@ body{
transform: scale(1.2) translateY(0);
filter: drop-shadow(0 0 2vh #8cefff);
}
.AccountIcon{
border-style: inset;
border-top: #8cefff 0.5vh solid;
border-left: #8cefff 0.5vh solid;
border-bottom: none;
border-right: none;
filter: drop-shadow(-1vh -1vh 1vh #8cefff);
margin-left:1vh;
transition: 0.25s;
margin-right:1vh;
border-radius: 4vh;
background-image: linear-gradient(to bottom, rgba(100,200,255,0.5), rgba(100,200,255,0.25), rgba(100,200,255,0.15), rgba(100,200,255,0.35));
width: 8vh;
height:8vh;
}
.Logo:hover{
transform: scale(1.2) translateY(0);
filter: drop-shadow(0 0 2vh #8cefff);

2
AccountCentre/AccountCentre.php
View File

File diff suppressed because one or more lines are too long

284
AccountCentre/AccountWindow.css
View File

@@ -1,9 +1,104 @@
@media only screen and (max-aspect-ratio: 1.165/1) {
.showpassword{
flex-direction: row-reverse !important;
justify-content: center !important;
align-content: center;
align-items: center;
text-align: center;
flex-wrap: nowrap;
min-height:2vh !important;
}
.appTitleButton{
background-size: contain;
background-repeat: no-repeat;
height: 4.5vh;
width: 4.5vh;
}
.WindowBody{
justify-content: center;
align-content: start;
align-items: center;
font-family: "Arial", serif;
/*z-index: 5;*/
box-sizing: border-box;
min-height: 100%;
width: 100%;
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-bottom: #121e29 0.3vh solid;
border-right: #121e29 0.3vh solid;
filter: drop-shadow(1vh 1vh 1vh #121e29);
backdrop-filter:brightness(0.9) blur(5px);
text-shadow: #223342 0 0 2vh;
border-radius: 2.5vh;
display: flex;
flex-wrap: wrap;
box-shadow: 1vh 1vh 1vh #121e29;
padding:1vh;
transition: 0.6s;
}
input:hover{
height:3vh;
min-width: 3vh;
}
.ForgotPass{
transition: 0.25s;
font-weight: bold;
color: white !important;
font-family: "Arial", serif;
font-size: 2vh;
margin: 1vh;
}
.Formcheckbox{
margin-left: 2vh;
margin-bottom: 1vh;
}
input{
transition: 0.25s;
box-shadow: 0 0 1vh #5dacb1;
//margin-right: 5vh;
margin-bottom: 1vh;
transform: scale(1.2);
height:2vh;
min-width: 2vh;
border-radius: 1vh;
border: #8cefff 0.2vh solid;
background: transparent !important;
background-image: linear-gradient(to bottom, rgba(25,50,75,0.75), rgba(25,75,125,0.525), rgba(25,75,125,0.315), rgba(25,75,125,0.315)) !important;
}
.WindowBody{
background-image: linear-gradient(to bottom,rgba(22, 184, 224,0.5) ,rgba(22, 184, 224,0.75),rgba(22, 184, 224,0.35),rgba(42, 184, 224,0.25)),linear-gradient(to bottom, rgba(200,200,255,0.75),rgba(200,200,255,0.4),rgba(200,200,255,0.0),rgba(200,200,255,0.6));
}
.ButtonArea{
align-items: center !important;
margin-top: 2.5vh;
flex-direction: column-reverse;
}
.LogInButton:hover{
width: 80%;
transform: scale(1.3) translateY(1vh)!important;
}
.LogInButton{
border-radius: 2vh !important;
width: 75%;
transform: scale(1.2) translateY(-1vh);
background: transparent !important;
background-image: linear-gradient(to bottom, rgba(100,200,255,0.5), rgba(100,200,255,0.25), rgba(100,200,255,0.15), rgba(100,200,255,0.35)) !important;
}
.FormTitle{
font-size: 2.5vh !important;
}
.LoginField{
border-top: #121e29 0.3vh solid;
border-left: #121e29 0.3vh solid;
border-bottom: #8cefff 0.3vh solid;
border-right: #8cefff 0.3vh solid;
min-width: 90%;
max-width: 100%;
min-height:5vh;
padding: 1vh 5vh;
padding: 1vh;// 5vh;
backdrop-filter: blur(15px);
background-color: RGBA(10,30,40,0.5);
border-radius: 2.5vh;
margin-bottom: 1vh;
flex-direction: column-reverse;
@@ -14,10 +109,11 @@
}
.IconText{
font-family: "Arial", serif;
font-size: 1vh !important;
font-size: 1.5vh !important;
user-select: none;
}
.whiteText{
font-weight: bolder;
padding-bottom: 1vh;
text-align: center;
text-shadow: #0e4044 0.15vh 0.35vh 1vh;
@@ -34,7 +130,7 @@
align-content: center;
flex-direction: column;
width: 95vw;
height: 85vh;
min-height: 85vh;
left: 50vw;
top: 50vh;
position: absolute;
@@ -42,13 +138,123 @@
}
.WindowTitle{
font-family: "Arial", serif;
font-size: 1.35vh !important;
font-size: 2vh !important;
color: white;
text-shadow: #0e4044 0.15vh 0.35vh 1vh;
margin-left:0.25vh;
}
}
.HideSpinner{
display: none;
}
.LockCentre{
display: block;
position: fixed;
left: 50vw;
top: 50vh;
}
.LoadingSpinner{
width: 10vh;
height: 10vh;
border-radius: 50%;
background: transparent;
border: solid 1vh #8cefff;
border-bottom: solid 1vh transparent !important;
animation: spin 1.5s ease-in-out infinite;
filter: drop-shadow(0 0vh 1vh #8cefff);
}
@keyframes spin {
0% {
filter: drop-shadow(0 0vh 1vh #121e29);
border: solid 1vh #8cefff;
transform:translate(-50%,-50%) rotate(0deg);
}
50%{
filter: drop-shadow(0 0vh 1vh #8cefff);
border: solid 1vh #121e29;
}
100% {
filter: drop-shadow(0 0vh 1vh #121e29);
border: solid 1vh #8cefff;
transform:translate(-50%,-50%) rotate(360deg);
}
}
@media only screen and (min-aspect-ratio: 1.165/1) {
.ForgotPass:hover{
font-size: 3vh;
cursor: pointer;
color: white !important;
}
.ForgotPass{
transition: 0.25s;
color: #8cefff !important;
font-family: "Arial", serif;
}
.appTitleButton{
background-size: contain;
background-repeat: no-repeat;
height: 3.5vh;
width: 3.5vh;
}
.WindowBody{
justify-content: center;
align-content: start;
align-items: center;
font-family: "Arial", serif;
/*z-index: 5;*/
box-sizing: border-box;
height: 100%;
width: 100%;
filter: drop-shadow(1vh 1vh 1vh #121e29);
backdrop-filter:brightness(0.9) blur(5px);
text-shadow: #223342 0 0 2vh;
border-radius: 5vh;
display: flex;
flex-wrap: wrap;
box-shadow: 1vh 1vh 1vh #121e29;
padding:1vh;
transition: 0.6s;
margin-bottom: 3vh;
}
input:hover{
height:5vh;
min-width: 5vh;
}
input{
transition: 0.25s;
box-shadow: 0 0 1vh #8cefff;
margin-right: 5vh;
transform: scale(1.2);
border: none;
height:4vh;
min-width: 4vh;
border-radius: 1.5vh;
border-bottom: #8cefff 0.5vh solid;
background: transparent !important;
background-image: linear-gradient(to bottom, rgba(25,50,75,0.5), rgba(50,100,155,0.25), rgba(50,100,155,0.15), rgba(50,100,155,0.15)) !important;
}
.WindowBody{
background-image: linear-gradient(to bottom,rgba(22, 184, 224,0.1) ,rgba(22, 184, 224,0.25),rgba(22, 184, 224,0.15),rgba(42, 184, 224,0.05)),linear-gradient(to bottom, rgba(200,200,255,0.5),rgba(200,200,255,0.1),rgba(200,200,255,0.0),rgba(200,200,255,0.2));
}
.ButtonArea{
align-items: flex-start !important;
margin-top: 5vh;
flex-direction: column;
}
.LogInButton:hover{
width: 17vw;
transform: scale(1.3) translateY(1vh)!important;
}
.LogInButton{
border-radius: 2vh !important;
width: 15vw;
transform: scale(1.2) translateY(1vh);
background: transparent !important;
background-image: linear-gradient(to bottom, rgba(100,200,255,0.5), rgba(100,200,255,0.25), rgba(100,200,255,0.15), rgba(100,200,255,0.35)) !important;
}
.FormTitle{
font-size: 5vh !important;
}
.LoginField{
min-width: 90%;
min-height:5vh;
@@ -163,12 +369,6 @@ Button{
.MinimiseButton:hover{
background-image: url("../GeneralAssets/MinimiseButtonHover.png");
}
.appTitleButton{
background-size: contain;
background-repeat: no-repeat;
height: 3.5vh;
width: 3.5vh;
}
.appTitleButton:hover{
cursor: pointer;
}
@@ -192,33 +392,17 @@ Button{
flex-wrap: nowrap;
height: 100%;
}
.WindowBody{
justify-content: center;
align-content: start;
align-items: center;
font-family: "Arial", serif;
/*z-index: 5;*/
box-sizing: border-box;
height: 100%;
width: 100%;
filter: drop-shadow(1vh 1vh 1vh #121e29);
backdrop-filter:brightness(0.9) blur(5px);
text-shadow: #223342 0 0 2vh;
background-image: linear-gradient(to bottom,rgba(22, 184, 224,0.1) ,rgba(22, 184, 224,0.25),rgba(22, 184, 224,0.15),rgba(42, 184, 224,0.05)),linear-gradient(to bottom, rgba(200,200,255,0.5),rgba(200,200,255,0.1),rgba(200,200,255,0.0),rgba(200,200,255,0.2));
border-radius: 5vh;
display: flex;
flex-wrap: wrap;
box-shadow: 1vh 1vh 1vh #121e29;
padding:1vh;
transition: 0.6s;
margin-bottom: 3vh;
}
.WindowBody.Dragging{
box-shadow: 2vh 3vh 3vh #121e29;
}
input{
text-align: center;
text-anchor: middle;
}
.FormBoxWrapper{
margin: 3vh;
margin-top: 3vh;
margin-right: 3vh;
margin-left: 3vh;
min-width: 90%;
}
.minimised{
@@ -238,39 +422,7 @@ Button{
color: #8cefff !important;
font-family: "Arial", serif;
}
.ButtonArea{
align-items: flex-start !important;
margin-top: 5vh;
flex-direction: column;
}
.LogInButton:hover{
width: 17vw;
transform: scale(1.3) translateY(1vh)!important;
}
input:hover{
height:5vh;
min-width: 5vh;
}
input{
transition: 0.25s;
box-shadow: 0 0 1vh #8cefff;
margin-right: 5vh;
transform: scale(1.2);
border: none;
height:3vh;
min-width: 3vh;
border-radius: 1.5vh;
border-bottom: #8cefff 0.5vh solid;
background: transparent !important;
background-image: linear-gradient(to bottom, rgba(25,50,75,0.5), rgba(50,100,155,0.25), rgba(50,100,155,0.15), rgba(50,100,155,0.15)) !important;
}
.showpassword{
backdrop-filter: none !important;
}
.LogInButton{
border-radius: 2vh !important;
width: 15vw;
transform: scale(1.2) translateY(1vh);
background: transparent !important;
background-image: linear-gradient(to bottom, rgba(100,200,255,0.5), rgba(100,200,255,0.25), rgba(100,200,255,0.15), rgba(100,200,255,0.35)) !important;
}

13
AccountCentre/LogInForm.php
View File

@@ -11,7 +11,7 @@
<div class="WindowBody" style="padding: 0; margin: 0;">
<div class="FormBoxWrapper">
<form action="AccountActions/LogIn.php" METHOD="post">
<p class="whiteText" style="text-align: center; font-size: 5vh; padding: 0; margin: 1vh; font-weight: bolder;">Log Into Existing Account</p>
<p class="whiteText FormTitle" style="text-align: center; padding: 0; margin: 1vh; font-weight: bolder;">Log Into Existing Account</p>
<div class="LoginField">
<input class="whiteText" type="text" id="emailLogin" name="email" required maxlength="50">
<label for="emailLogin" class="whiteText">Email*</label>
@@ -21,18 +21,19 @@
<label for="password" class="whiteText">Password*</label>
</div>
<div class="ForgotPass">
<a class="hyperlink" href="#">Forgot Password?</a>
<a class="ForgotPass" href="#">Forgot Password?</a>
</div>
<div class="LoginField showpassword">
<input id="showloginpasswordcheckbox" type="checkbox" onclick="showpass()" style="cursor:pointer" ><a class="whiteText" onclick="showpasstext()" style="cursor:pointer; user-select: none;">Show Password</a>
<input id="showloginpasswordcheckbox" class="Formcheckbox" type="checkbox" onclick="showpass()" style="cursor:pointer" ><a class="whiteText" onclick="showpasstext()" style="cursor:pointer; user-select: none;">Show Password</a>
</div>
<div class="LoginField">
<input class="whiteText" style="max-width: 25vh;" type="text" id="captcha" name="captcha" maxlength="25" >
<a class="whiteText"> Type your username reversed*</a><br>
</div>
<div class="LoginField">
<input class="whiteText" type="checkbox" id="remember" name="remember" value="yes">
<label for="remember" class="whiteText"> remember me?</label><br>
<div class="LoginField showpassword">
<input class="Formcheckbox" type="checkbox" id="remember" name="remember" value="yes">
<label for="remember" class="whiteText" > remember me?</label><br>
</div>
<div class="LoginField ButtonArea">
<button class="HotbarButton LogInButton" type="submit">

4
AccountCentre/SignUpForm.php
View File

@@ -11,7 +11,7 @@
<div class="WindowBody" style="padding: 0; margin: 0;">
<div class="FormBoxWrapper">
<form action="AccountActions/SignUp.php" method="post">
<p class="whiteText" style="text-align: center; font-size: 5vh; padding: 0; margin: 1vh; font-weight: bolder;">Create New Account</p>
<p class="whiteText FormTitle" style="text-align: center; padding: 0; margin: 1vh; font-weight: bolder;">Create New Account</p>
<div class="LoginField" >
<input class="whiteText" type="text" id="username" name="username" required maxlength="25">
<label for="username" class="whiteText">Username*</label>
@@ -29,7 +29,7 @@
<label for="password" class="whiteText">Password*</label>
</div>
<div class="LoginField showpassword">
<input id="showloginpasswordcheckbox" type="checkbox" onclick="showpass()" style="cursor:pointer" ><a class="whiteText" onclick="showpasstext()" style="cursor:pointer; user-select: none;">Show Password</a>
<input id="showloginpasswordcheckbox" class="Formcheckbox" type="checkbox" onclick="showpass()" style="cursor:pointer" ><a class="whiteText" onclick="showpasstext()" style="cursor:pointer; user-select: none;">Show Password</a>
</div>
<div class="LoginField">
<input class="whiteText" style="max-width: 25vh;" type="text" id="captcha" name="captcha" maxlength="25" >