Created Landing Page, Revamped account system, added account sessions and password obfuscation(not being pushed to the public branch) revamping main site bit by bit
This commit is contained in:
217
AccountCentre/AccountCentre.css
Normal file
217
AccountCentre/AccountCentre.css
Normal file
@@ -0,0 +1,217 @@
|
||||
body{
|
||||
background-image: linear-gradient(to bottom,#245a80 10vh,transparent 90vh ), linear-gradient(to bottom right, #063657,#031d2e );
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
.HotbarWrapper{
|
||||
overflow-x: clip;
|
||||
transition: 0.5s;
|
||||
width: 100vw;
|
||||
height: 9vh;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
box-shadow: #121e29 0 0 5vh;
|
||||
background-image: linear-gradient(to bottom,rgba(52, 184, 254,0.3) ,rgba(52, 184, 254,0.5),rgba(22, 144, 254,0.25),rgba(12, 64, 124,0.5));
|
||||
border-bottom: #8cefff 0.3vh solid;
|
||||
}
|
||||
.Logo{
|
||||
margin-left:1vh;
|
||||
transition: 0.25s;
|
||||
padding-right:1vh;
|
||||
background-image: url("Logo.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
width: 8vh;
|
||||
height:8vh;
|
||||
}
|
||||
.ErrorMessageWrapper{
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
width: 50vw;
|
||||
height: 50vh;
|
||||
top: 50vh;
|
||||
left:50vw;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.ErrorMessageImage{
|
||||
background-image: url("../GeneralAssets/mascotchibi/chibilost.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 15vh;
|
||||
transition: 0.25s;
|
||||
min-width: 15vh !important;
|
||||
min-height: 16.875vh !important;
|
||||
image-rendering: pixelated;
|
||||
|
||||
}
|
||||
.ErrorMessage:hover{
|
||||
.ErrorMessageImage{
|
||||
transform: scale(1);
|
||||
max-width: 12.86vh !important;
|
||||
min-height: 17.875vh !important;
|
||||
background-position-y: 105%;
|
||||
background-image: url("../GeneralAssets/mascotchibi/chibiquestion.png");
|
||||
}
|
||||
}
|
||||
.ErrorMessage{
|
||||
padding: 2vh;
|
||||
filter: drop-shadow(0 0.5vh 3vh #8cefff);
|
||||
border-top: #8cefff 0.3vh solid;
|
||||
border-left: #8cefff 0.3vh solid;
|
||||
border-right: rgba(32,120,155,1) 0.3vh solid;
|
||||
border-bottom: rgba(32,120,155,1) 0.3vh solid;
|
||||
text-shadow: #223342 0 0 2vh;
|
||||
background-image:linear-gradient(to bottom right,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.3) ,rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.0),rgba(100, 124, 254,0.25)), linear-gradient(to bottom,rgba(52, 184, 254,0.4),rgba(52, 184, 254,0.0) ,rgba(52, 184, 254,0.3),rgba(22, 144, 254,0.15),rgba(12, 64, 124,0.25));
|
||||
border-radius: 5vh;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: 0.25s;
|
||||
user-select: none;
|
||||
font-family: "Arial", serif;
|
||||
font-weight: bolder;
|
||||
color:white;
|
||||
font-size: 4vh;
|
||||
text-align: center;
|
||||
}
|
||||
.LogInButtonWrapper{
|
||||
transform: scale(1.5);
|
||||
margin-top: 5vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
.HotbarWrapper:hover{
|
||||
.Logo{
|
||||
height:9vh;
|
||||
width: 9vh;
|
||||
}
|
||||
.Title{
|
||||
font-size: 4.5vh;
|
||||
}
|
||||
.HotbarButton{
|
||||
height: 7vh;
|
||||
}
|
||||
.AccountIcon{
|
||||
margin-left:1vh;
|
||||
transition: 0.25s;
|
||||
margin-right:1vh;
|
||||
width: 9vh;
|
||||
height:9vh;
|
||||
}
|
||||
height: 12vh;
|
||||
}
|
||||
.AccountIcon:hover{
|
||||
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);
|
||||
}
|
||||
.HotbarButton:hover{
|
||||
cursor: pointer;
|
||||
margin-right: 2vh;
|
||||
width:22.5vh;
|
||||
height: 7vh;
|
||||
filter: drop-shadow(0 0 2vh #8cefff);
|
||||
transform: scale(1.1) translateY(1%);
|
||||
border-top: #8cefff 0.3vh solid;
|
||||
border-left: #8cefff 0.3vh solid;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
.HotbarButton{
|
||||
border: none;
|
||||
user-select: none;
|
||||
transition: 0.25s;
|
||||
margin-right: 1vh;
|
||||
margin-left: 1vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
font-family: "Arial", serif;
|
||||
font-weight: bolder;
|
||||
font-size: 4vh;
|
||||
width: 20vh;
|
||||
height: 6vh;
|
||||
border-radius: 5vh;
|
||||
color:white;
|
||||
text-shadow: #8cefff 0vh 0vh 0vh;
|
||||
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));
|
||||
border-bottom: #8cefff 0.3vh solid;
|
||||
border-right: #8cefff 0.3vh solid;
|
||||
}
|
||||
.HotbarSection{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
height: 8vh;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.Title:hover{
|
||||
text-shadow: #8cefff 0vh 0vh 2vh;
|
||||
}
|
||||
.FormWindowContainer{
|
||||
background: transparent;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.Title{
|
||||
transition: 0.25s;
|
||||
text-shadow: #8cefff 0vh 0vh 0vh;
|
||||
user-select: none;
|
||||
font-family: "Arial", serif;
|
||||
font-weight: bolder;
|
||||
color:white;
|
||||
font-size: 4vh;
|
||||
}
|
||||
.Copyright{
|
||||
border-radius: 5vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
user-select: none;
|
||||
transition: ease-in-out .3s;
|
||||
font-family: "Arial", serif;
|
||||
font-size: 2vh;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
1
AccountCentre/AccountCentre.php
Normal file
1
AccountCentre/AccountCentre.php
Normal file
@@ -0,0 +1 @@
|
||||
<!DOCTYPE html>
|
||||
45
AccountCentre/AccountCentreHotbar.php
Normal file
45
AccountCentre/AccountCentreHotbar.php
Normal file
@@ -0,0 +1,45 @@
|
||||
<?php
|
||||
$HomeLocation = "../HalbearNetlanding/index.php";
|
||||
if(isset($_SESSION["ReturnPage"])) {
|
||||
switch($_SESSION["ReturnPage"]) {
|
||||
case "Forum":
|
||||
$HomeLocation = '../Forum.php';
|
||||
break;
|
||||
case "Index":
|
||||
$HomeLocation = '../index.php';
|
||||
break;
|
||||
case "Software":
|
||||
$HomeLocation = '../Software.php';
|
||||
break;
|
||||
case "Artwork":
|
||||
$HomeLocation = '../Artwork.php';
|
||||
break;
|
||||
case "Contact":
|
||||
$HomeLocation = '../Contact.php';
|
||||
break;
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div class="HotbarWrapper">
|
||||
<div class="HotbarSection">
|
||||
<div class="Logo"></div>
|
||||
<div class="Title">Halbear.Net Account Centre</div>
|
||||
</div>
|
||||
<div class="HotbarSection">
|
||||
<button class="HotbarButton" onclick="HelpForm();">
|
||||
Help
|
||||
</button>
|
||||
<button class="HotbarButton" onclick="document.location.href='<?php echo $HomeLocation; ?>'">
|
||||
Back
|
||||
</button>
|
||||
<?php
|
||||
if($LoggedIn){
|
||||
$location = "'AccountCentre.php?logout=true'";
|
||||
echo '<button class="HotbarButton" onclick="document.location.href='.$location.'">Log Out</Button>';
|
||||
echo '<img class="AccountIcon" src="'.((isset($_SESSION["user_pfp"])) ? $_SESSION["user_pfp"] : "../GeneralAssets/AccountSymbol.png").'">';
|
||||
} else{
|
||||
echo '<button class="HotbarButton" onclick="signInForm();">Sign In</button>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
3
AccountCentre/AccountOverview.php
Normal file
3
AccountCentre/AccountOverview.php
Normal file
@@ -0,0 +1,3 @@
|
||||
<div class="">
|
||||
|
||||
</div>
|
||||
222
AccountCentre/AccountWindow.css
Normal file
222
AccountCentre/AccountWindow.css
Normal file
@@ -0,0 +1,222 @@
|
||||
.windowIcon{
|
||||
user-select: none;
|
||||
z-index: 55 !important;
|
||||
position: absolute;
|
||||
transition: 0.0s !important;
|
||||
width: 9.5vh;
|
||||
height: 9.5vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border-radius: 5%;
|
||||
}
|
||||
Button{
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
.PopUpWrapper{
|
||||
pointer-events: all;
|
||||
z-index: 100 !important;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
width: 50vw;
|
||||
height: 85vh;
|
||||
left: 50vw;
|
||||
top: 50vh;
|
||||
position: absolute;
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
.DraggableWrapper{
|
||||
pointer-events: all;
|
||||
z-index: 50; /*!important;*/
|
||||
padding: 0;
|
||||
Position:Absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.WindowTitleBar{
|
||||
backdrop-filter: blur(2px);
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-left: 2vh;
|
||||
padding-right: 2vh;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 5vh;
|
||||
/*z-index: 10;*/
|
||||
user-select: none;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
cursor:grab;
|
||||
flex-wrap: nowrap;
|
||||
background-image: linear-gradient(to bottom, rgba(200,200,255,0.3),rgba(200,200,255,0.1),rgba(200,200,255,0.0),rgba(200,200,255,0.2));
|
||||
border: 0.5vh white solid;
|
||||
border-radius: 2vh;
|
||||
box-shadow: 0 1vh 1vh #1d4746;
|
||||
}
|
||||
.WindowTitleBar:active{
|
||||
cursor: grabbing;
|
||||
}
|
||||
.ExitButton{
|
||||
transition: 0.25s;
|
||||
background-image: url("../GeneralAssets/ExitButton.png");
|
||||
}
|
||||
.ExitButton:hover{
|
||||
transform: scale(1.2);
|
||||
background-image: url("../GeneralAssets/ExitButtonHover.png");
|
||||
}
|
||||
.MinimiseButton{
|
||||
background-image: url("../GeneralAssets/MinimiseButton.png");
|
||||
margin-right: 0.25vh;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.appTitleButton:active{
|
||||
cursor: grabbing;
|
||||
}
|
||||
.WindowThumbnail{
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
height: 3vh;
|
||||
width: 3vh;
|
||||
|
||||
}
|
||||
.WindowTitleBarContainer{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
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;
|
||||
}
|
||||
.WindowTitle{
|
||||
font-family: "Arial", serif;
|
||||
font-size: 2.35vh;
|
||||
color: white;
|
||||
text-shadow: #0e4044 0.15vh 0.35vh 1vh;
|
||||
margin-left:0.25vh;
|
||||
}
|
||||
.IconText{
|
||||
font-family: "Arial", serif;
|
||||
font-size: 1.35vh !important;
|
||||
user-select: none;
|
||||
}
|
||||
.whiteText{
|
||||
text-shadow: #0e4044 0.15vh 0.35vh 1vh;
|
||||
font-family: "Arial", serif;
|
||||
color: white;
|
||||
font-size: 3.35vh;
|
||||
}
|
||||
.FormBoxWrapper{
|
||||
margin: 3vh;
|
||||
min-width: 90%;
|
||||
}
|
||||
.LoginField{
|
||||
min-width: 90%;
|
||||
min-height:5vh;
|
||||
padding: 1vh 5vh;
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: 2.5vh;
|
||||
margin-bottom: 1vh;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
.minimised{
|
||||
top: 200vh !important;
|
||||
transition: 0.5s !important;
|
||||
}
|
||||
.animationTransition{
|
||||
transition: 0.5s !important;
|
||||
}
|
||||
.hyperlink:hover{
|
||||
transform: scale(1.2);
|
||||
cursor: pointer;
|
||||
color: white !important;
|
||||
}
|
||||
.hyperlink{
|
||||
transition: 0.25s;
|
||||
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;
|
||||
}
|
||||
71
AccountCentre/DragAccountWindows.js
Normal file
71
AccountCentre/DragAccountWindows.js
Normal file
@@ -0,0 +1,71 @@
|
||||
function DragWindow(Window) {
|
||||
var Touchscreen = false;
|
||||
var CalculatedLeft = 0, CalculatedTop = 0, OldLeft = 0, OldTop = 0;
|
||||
Window.children[0].addEventListener('mousedown', mouseDown);
|
||||
Window.children[0].addEventListener('touchstart', mouseDown);
|
||||
|
||||
function mouseDown(mouse) {
|
||||
Touchscreen = mouse.type === "touchstart";
|
||||
mouse.preventDefault();
|
||||
if (!Window.classList.contains('DraggingActive')) {
|
||||
Window.style.zIndex = "" + 55;
|
||||
if (Touchscreen) {
|
||||
document.addEventListener('touchmove', mouseMove);
|
||||
document.addEventListener('touchend', mouseUp);
|
||||
} else {
|
||||
document.addEventListener('mousemove', mouseMove);
|
||||
document.addEventListener('mouseup', mouseUp);
|
||||
}
|
||||
Window.classList.add('DraggingActive');
|
||||
Window.children[1].classList.add("Dragging");
|
||||
OldLeft = mouse.clientX;
|
||||
OldTop = mouse.clientY;
|
||||
Window.children[1].style.transition = '0.5s';
|
||||
setTimeout(function () {
|
||||
Window.children[1].style.transition = '0.0s';
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
function mouseMove(mouse) {
|
||||
mouse.preventDefault();
|
||||
if (!Touchscreen) {
|
||||
CalculatedLeft = OldLeft - mouse.clientX;
|
||||
CalculatedTop = OldTop - mouse.clientY;
|
||||
OldLeft = mouse.clientX;
|
||||
OldTop = mouse.clientY;
|
||||
Window.style.top = ((Window.offsetTop - CalculatedTop) / innerHeight) * 100 + 'vh';//clamp(((Window.offsetTop - CalculatedTop) / innerHeight) * 100, 0, (((innerHeight - Window.offsetHeight) / innerHeight) * 100) - 5) + 'vh';
|
||||
Window.style.left = ((Window.offsetLeft - CalculatedLeft) / innerWidth) * 100 + 'vw'; //clamp(((Window.offsetLeft - CalculatedLeft) / innerWidth) * 100, 0, (((innerWidth - Window.offsetWidth) / innerWidth) * 100) - 0.5) + 'vw';
|
||||
} else {
|
||||
Window.style.top = (mouse.changedTouches[0].clientY / innerHeight) * 100 + 'vh';//clamp((mouse.changedTouches[0].clientY / innerHeight) * 100, 0, (((innerHeight - Window.offsetHeight) / innerHeight) * 100) - 5) + 'vh';
|
||||
Window.style.left = (mouse.changedTouches[0].clientX / innerWidth) * 100 + 'vw';//clamp((mouse.changedTouches[0].clientX / innerWidth) * 100, 0, (((innerWidth - Window.offsetWidth) / innerWidth) * 100) - 0.5) + 'vw';
|
||||
}
|
||||
}
|
||||
|
||||
function mouseUp(mouse) {
|
||||
Window.children[1].classList.remove('Dragging');
|
||||
Window.classList.remove('DraggingActive');
|
||||
if (Touchscreen) {
|
||||
document.removeEventListener('touchmove', mouseMove);
|
||||
document.removeEventListener('touchend', mouseUp);
|
||||
Touchscreen = false;
|
||||
} else {
|
||||
document.removeEventListener('mousemove', mouseMove);
|
||||
document.removeEventListener('mouseup', mouseUp);
|
||||
}
|
||||
Window.children[1].style.transition = '0.5s';
|
||||
Window.style.zIndex = "" + 50;
|
||||
setTimeout(function () {
|
||||
Window.children[1].style.transition = '0.0s';
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
function clamp(number, lower, upper) {
|
||||
if (number > upper) {
|
||||
return upper;
|
||||
}
|
||||
if (number < lower) {
|
||||
return lower;
|
||||
}
|
||||
return number;
|
||||
}
|
||||
46
AccountCentre/LogInForm.php
Normal file
46
AccountCentre/LogInForm.php
Normal file
@@ -0,0 +1,46 @@
|
||||
<div id='FormBox' class="PopUpWrapper minimised animationTransition">
|
||||
<div class="WindowTitleBar">
|
||||
<div class="WindowTitleBarContainer">
|
||||
<div class="WindowThumbnail" style="background-image: url('../GeneralAssets/windowsbutton.png');"></div>
|
||||
<div class="WindowTitle">log In</div>
|
||||
</div>
|
||||
<div class="WindowTitleBarContainer">
|
||||
<Button id="FormBoxExitBtn" class=" ExitButton appTitleButton" onclick="removeWindow();"></Button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="LoginField">
|
||||
<input class="whiteText" type="text" id="emailLogin" name="email" required maxlength="50">
|
||||
<label for="emailLogin" class="whiteText">Email*</label>
|
||||
</div>
|
||||
<div class="LoginField">
|
||||
<input class="whiteText" type="password" id="password" name="password" required maxlength="50">
|
||||
<label for="password" class="whiteText">Password*</label>
|
||||
</div>
|
||||
<div class="ForgotPass">
|
||||
<a class="hyperlink" 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>
|
||||
</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>
|
||||
<div class="LoginField ButtonArea">
|
||||
<button class="HotbarButton LogInButton" type="submit">
|
||||
Log In
|
||||
</button>
|
||||
<p class="whiteText">Don't have a halbear.net account? <a onclick="signUpForm()" class="hyperlink register-link">Create One</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
BIN
AccountCentre/Logo.png
Normal file
BIN
AccountCentre/Logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
47
AccountCentre/SignUpForm.php
Normal file
47
AccountCentre/SignUpForm.php
Normal file
@@ -0,0 +1,47 @@
|
||||
<div id='FormBox' class="PopUpWrapper minimised animationTransition">
|
||||
<div class="WindowTitleBar">
|
||||
<div class="WindowTitleBarContainer">
|
||||
<div class="WindowThumbnail" style="background-image: url('../GeneralAssets/windowsbutton.png');"></div>
|
||||
<div class="WindowTitle">Sign Up</div>
|
||||
</div>
|
||||
<div class="WindowTitleBarContainer">
|
||||
<Button id="FormBoxExitBtn" class=" ExitButton appTitleButton" onclick="removeWindow();"></Button>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="LoginField" >
|
||||
<input class="whiteText" type="text" id="username" name="username" required maxlength="25">
|
||||
<label for="username" class="whiteText">Username*</label>
|
||||
</div>
|
||||
<div class="LoginField">
|
||||
<input class="whiteText" type="text" id="display_name" name="display_name" required maxlength="25">
|
||||
<label for="display_name" class="whiteText">Display Name</label>
|
||||
</div>
|
||||
<div class="LoginField">
|
||||
<input class="whiteText" type="text" id="emailLogin" name="email" required maxlength="50">
|
||||
<label for="emailLogin" class="whiteText">Email*</label>
|
||||
</div>
|
||||
<div class="LoginField">
|
||||
<input class="whiteText" type="password" id="password" name="password" required maxlength="50">
|
||||
<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>
|
||||
</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 ButtonArea" style="margin-bottom: 5vh;">
|
||||
<button class="HotbarButton LogInButton" type="submit">
|
||||
Sign Up
|
||||
</button>
|
||||
<p class="whiteText">Have a halbear.net account? <a onclick="signInForm()" class="hyperlink register-link">Log In</a></p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user