diff --git a/AccountCentre/AccountCentre.css b/AccountCentre/AccountCentre.css index e9d33d5..44833b9 100644 --- a/AccountCentre/AccountCentre.css +++ b/AccountCentre/AccountCentre.css @@ -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); diff --git a/AccountCentre/AccountCentre.php b/AccountCentre/AccountCentre.php index a9c2304..adbe44f 100644 --- a/AccountCentre/AccountCentre.php +++ b/AccountCentre/AccountCentre.php @@ -1 +1 @@ - Halbear.Net setTimeout(()=>{signInForm();},500);"); } $LoggedIn = (isset($_SESSION["logged_in"])) ? $_SESSION["logged_in"] : false; $Page = "AccountCentre"; require_once("../Hidden/Security/PasswordObfsucation.php"); require_once("AccountCentreHotbar.php"); if(!$LoggedIn){ echo("
Uh Oh! looks like you aren't logged in, please log in or sign up to manage your account!
"); } else{ echo("
DisplayName: ".$_SESSION["display_name"]."
UserName: ".$_SESSION["username"]."
"); } ?>
\ No newline at end of file + Halbear.Net setTimeout(()=>{signInForm();},500);"); } $LoggedIn = (isset($_SESSION["logged_in"])) ? $_SESSION["logged_in"] : false; $Page = "AccountCentre"; require_once("../Hidden/Security/PasswordObfsucation.php"); require_once("AccountCentreHotbar.php"); if(!$LoggedIn){ echo("
Uh Oh! looks like you aren't logged in, please log in or sign up to manage your account!
"); } else{ echo("
DisplayName: ".$_SESSION["display_name"]."
UserName: ".$_SESSION["username"]."
"); } ?>
\ No newline at end of file diff --git a/AccountCentre/AccountWindow.css b/AccountCentre/AccountWindow.css index f45da19..ff17a10 100644 --- a/AccountCentre/AccountWindow.css +++ b/AccountCentre/AccountWindow.css @@ -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; } \ No newline at end of file diff --git a/AccountCentre/LogInForm.php b/AccountCentre/LogInForm.php index e290be7..e5ce499 100644 --- a/AccountCentre/LogInForm.php +++ b/AccountCentre/LogInForm.php @@ -11,7 +11,7 @@
-

Log Into Existing Account

+

Log Into Existing Account

@@ -21,18 +21,19 @@
-
- -
+
+ + +
- \ No newline at end of file + \ No newline at end of file diff --git a/HalbearNetLanding/StyleSheets/MainStyle.css b/HalbearNetLanding/StyleSheets/MainStyle.css index a643bc3..377630c 100644 --- a/HalbearNetLanding/StyleSheets/MainStyle.css +++ b/HalbearNetLanding/StyleSheets/MainStyle.css @@ -3,6 +3,9 @@ font-optical-sizing: auto; font-weight: 600; font-style: normal; +} +body{ + } .dotgothic16-regular { font-family: "DotGothic16", sans-serif; @@ -67,7 +70,49 @@ body{ overflow-x: hidden; width: 100%; } + +.Copyright{ + font-family: "Lexend", system-ui; + color: white; + display: flex; + justify-content: center; + align-items: center; +} @media only screen and (max-aspect-ratio: 1.165/1) { + .HotbarButton:active{ + cursor: grabbing !important; + height: 9vh; + background: white; + filter: drop-shadow(0 0 2vh #8cefff); + border-top: #8cefff 0.3vh solid; + border-left: #8cefff 0.3vh solid; + border-bottom: none; + border-right: none; + } + .ShowOffContent{ + width: 100%; + } + .ShowOffContainer.showOffFlipped{ + flex-direction: column-reverse !important; + } + .ShowOffContainer{ + margin: 2vh; + min-width: 90vw; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + align-content: center; + } + .Copyright{ + position: fixed; + font-size: 1.75vh !important; + border-radius: 5vh; + backdrop-filter: blur(15px); + left: 0; + bottom: 0; + z-index: 100; + } .EntireContentWrapper{ min-height: 100vh; overflow-y: hidden; @@ -106,6 +151,19 @@ body{ background-color: rgba(190,240,240,.1); transition: 0.5s; } + .ContentContainerImage{ + border-radius: 5vh; + margin-top: 5vh; + min-width: 95vw; + cursor: default; + background-image: url("../Assets/Programming.PNG"); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + border:none; + filter: none; + min-height: 45vw; + } .ContentContainer{ padding: 0; filter: drop-shadow(0 0.5vh 3vh #8cefff); @@ -193,7 +251,7 @@ body{ height: 13vh !important; } .TerrainGenBG{ - margin-top: 5vh; + margin-top: 10vh; top:57vh; height: 52.174vw; width: 96vw; @@ -221,7 +279,70 @@ body{ height: 5vh !important; } } +.ContentContainerImage{ + transition: 0.25s; +} +.ContentContainerImage:hover { + transform: scale(1.1); +} @media only screen and (min-aspect-ratio: 1.165/1) { + .HotbarButton:hover { + cursor: pointer; + height: 8vh; + 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:active{ + cursor: grabbing !important; + height: 9vh; + background: white; + 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; + } + .ContentContainerImage{ + border-radius: 5vh; + min-width: 45vw; + min-height: 25vw; + cursor: default; + background-image: url("../Assets/Programming.PNG"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + border:none; + filter: none; + } + .ShowOffContent{ + width: 50%; + } + .ShowOffContainer{ + margin: 2vh; + min-width: 90vw; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + align-content: center; + } + .Copyright{ + border-radius: 5vh; + font-size: 2vh; + backdrop-filter: blur(15px); + position: fixed; + left: 0; + bottom: 0; + z-index: 100; + } + .contactUsContainer{ + width: 95vw; + } .FadeIndex{ height: 220vh !important; } @@ -230,6 +351,7 @@ body{ flex-direction: column; justify-content: space-evenly; align-items: center; + min-height: 16vw; width: 100%; height: 100%; } @@ -355,26 +477,27 @@ body{ border-bottom: #8cefff 0.3vh solid; transition: 0.5s; } -.HotbarButton:active{ - cursor: grabbing !important; - height: 9vh; - background: white; - 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; +.hidden{ + display: none !important; + height: 0vh !important; + min-height: 0vh !important; + max-height: 0vh !important; + overflow-y: hidden !important; } -.HotbarButton:hover { - cursor: pointer; - height: 8vh; - 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; +.ShowOffContent{ + display: flex; + justify-content: start; + flex-direction: column; + align-content: center; + align-items: center; +} +.ShowOffContainer{ + max-width: 100vw; + margin-top: 5vh; + padding: 2vh 2vh 6vh; + border-radius: 5vh; + //background-image: linear-gradient(to bottom, rgba(100,200,255,0.15), rgba(100,200,255,0.125), rgba(100,200,255,0.015), rgba(100,200,255,0.135)); + } .RightFloat.Long{ width: 100vh; @@ -418,6 +541,19 @@ body{ flex-direction: column; justify-content: flex-start; } +.ShowOffContent{ + //width: 50%; +} +.ShowOffSection{ + transition: 0.5s; + width: 100vw; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + align-content: space-evenly; +} .halbearnetFooter{ border-top: white solid; z-index: 35; @@ -432,14 +568,6 @@ body{ background-image: linear-gradient(to bottom, rgba(180,220,255,0.125), rgba(180,220,255,0.225), rgba(180,220,255,0.0525), rgba(100,200,255,0.0725)); } -.Copyright{ - border-radius: 5vh; - backdrop-filter: blur(15px); - position: fixed; - left: 0; - bottom: 0; - z-index: 100; -} .Title{ user-select: none; font-family: "Lexend", sans-serif; @@ -483,14 +611,14 @@ Button{ z-index: -2; } body{ - //background-image: linear-gradient(to bottom right, #063657,#031d2e ); - //background-image: url("../Assets/Programming.PNG"); background-color: black; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; margin: 0; padding: 0; + overflow-x: clip; + max-width: 100vw; height: 100%; } ::-webkit-scrollbar { diff --git a/HalbearNetLanding/UserAgreement.php b/HalbearNetLanding/UserAgreement.php index a7ca58b..ed1a2ba 100644 --- a/HalbearNetLanding/UserAgreement.php +++ b/HalbearNetLanding/UserAgreement.php @@ -78,7 +78,7 @@ require_once("Hotbar.php"); Company Information
-
+
\ No newline at end of file diff --git a/HalbearNetLanding/index.php b/HalbearNetLanding/index.php index 7c518fc..543e471 100644 --- a/HalbearNetLanding/index.php +++ b/HalbearNetLanding/index.php @@ -28,20 +28,20 @@ require_once("Hotbar.php"); Welcome to Halbear.Net! + +
+
Halbear Networking & Software Ltd is a Software Developer based in Wales who specialises in Game Engine Development!

- +
-
-
-
-
+
this webiste is a landing page to make the important stuff easy to access, here are some shortcuts:

@@ -49,13 +49,84 @@ require_once("Hotbar.php"); - +
+
What we offer:
-
+
-
+ -
+
\ No newline at end of file diff --git a/Hotbar.php b/Hotbar.php index 354dea0..dbd8805 100644 --- a/Hotbar.php +++ b/Hotbar.php @@ -17,7 +17,7 @@
Artwork
-
+