more mobile support and misc changes

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);

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;
-}

AccountCentre/LogInForm.php

@@ -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">
+                <div class="LoginField showpassword">
-                    <input class="whiteText" type="checkbox" id="remember" name="remember" value="yes">
+
-                    <label for="remember" class="whiteText"> remember me?</label><br>
+                    <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">

AccountCentre/SignUpForm.php

@@ -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" >

HalbearNetLanding/CompanyInformation.php

@@ -21,13 +21,13 @@ require("../Hidden/Security/StartSession.php");
 $Page = "CompanyInformation";
 require_once("Hotbar.php");
 ?>
-<div style="width: 100vw; height: 110vh;" onload="ChangeImg();">
+<div style="max-width: 100vw; height: 110vh; margin-right: 3vh;" onload="ChangeImg();">
-    <div tabindex="0" class="StaticContentContainer" style="position: absolute; left: 3vh; top: 11vh; width: 45vw; height: 10vh; display: flex; justify-content: center; align-items: center">
+    <div tabindex="0" class="StaticContentContainer" style="position: absolute; left: 3vh; top: 11vh;margin-right: 3vh; min-width: 45vw; height: 10vh; display: flex; justify-content: center; align-items: center">
-        <a class="Title" >
+        <a class="Title" style="margin-left: 1vh; margin-right: 1vh;" >
             Company Information
         </a>
     </div>
-    <div tabindex="0" class="StaticContentContainer" style="position: absolute; left: 3vh; top: 26vh; width: 95vw; height: 78vh; flex-direction: row;">
+    <div tabindex="0" class="StaticContentContainer" style="position: absolute; left: 3vh; margin-right: 3vh; top: 26vh; max-width: 95vw; min-height: 78vh; flex-direction: row;">
         <div style="display: flex; flex-direction: column; justify-content: start; align-items: start; width: 100%; height: 100%;">
             <a class="LargeWhiteFont" style="padding: 2vh; font-size: 3vh; text-align: left;">
                 Halbear Networking & Software Ltd is registered in Wales and was incorportated on December 24th 2025<br><br>You can contact our Customer Support through this email address: information@halbear.net<br><br>
@@ -48,6 +48,6 @@ require_once("Hotbar.php");
         <a class=" FooterFont" style="padding-bottom: 0.5vh; margin-right: 2vh; text-decoration: underline;  text-align: right;" onclick="document.location.href='CompanyInformation.php';">Company Information</a>
     </div>
 </div>
-<div class="BackgroundFade" style="height: 135vh;"></div>
+<div class="BackgroundFade" style="height: 100vh; position: fixed;"></div>
 </body>
 </html>

HalbearNetLanding/ContactUs.php

@@ -27,7 +27,7 @@ require_once("Hotbar.php");
             Contact Us
         </a>
     </div>
-    <div tabindex="0" class="StaticContentContainer" style="position: absolute; left: 3vh; margin-right: 3vh; top: 26vh; max-width: 95vw; height: 78vh; flex-direction: row;">
+    <div tabindex="0" class="StaticContentContainer contactUsContainer" style="position: absolute; left: 3vh; margin-right: 3vh; top: 26vh; max-width: 95vw; height: 78vh; flex-direction: row;">
         <div style="display: flex; flex-direction: column; justify-content: start; align-items: start; width: 100%; height: 100%;">
             <a class="LargeWhiteFont" style="padding: 2vh; font-size: 3vh; text-align: left;">
                 Halbear Networking & Software Ltd Support Email: <br> information@halbear.net<br>
@@ -49,6 +49,6 @@ require_once("Hotbar.php");
         <a class=" FooterFont" style="padding-bottom: 0.5vh; margin-right: 2vh; text-decoration: underline;  text-align: right;" onclick="document.location.href='CompanyInformation.php';">Company Information</a>
     </div>
 </div>
-<div class="BackgroundFade" style="min-height: 135vh;"></div>
+<div class="BackgroundFade" style="height: 100vh; position: fixed;"></div>
 </body>
 </html>

HalbearNetLanding/DataCollection.php

@@ -67,7 +67,7 @@ require_once("Hotbar.php");
         <a class=" FooterFont" style="padding-bottom: 0.5vh; margin-right: 2vh; text-decoration: underline;  text-align: right;" onclick="document.location.href='CompanyInformation.php';">Company Information</a>
     </div>
 </div>
-<div class="BackgroundFade" style="height: 560vh; !important;"></div>
+<div class="BackgroundFade" style="height: 100vh; position: fixed;"></div>
 
 </body>
 </html>

HalbearNetLanding/Hotbar.php

@@ -12,4 +12,4 @@
         <button class="HotbarButton" id="HalNet" onclick="window.location.href='../index.php'">Main Site</button>
     </div>
 </div>
-<div class="Copyright LargeWhiteFont" style="cursor: pointer; z-index: 20;" onclick="document.location.href='CompanyInformation.php'">©Halbear Networking & Software Ltd 2025</div>
+<div class="Copyright" style="cursor: pointer; z-index: 20;" onclick="document.location.href='CompanyInformation.php'">©Halbear Networking & Software Ltd 2025</div>

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{
+.hidden{
-    cursor: grabbing !important;
+    display: none !important;
-    height: 9vh;
+    height: 0vh !important;
-    background: white;
+    min-height: 0vh !important;
-    filter: drop-shadow(0 0 2vh #8cefff);
+    max-height: 0vh !important;
-    transform: scale(1.1) translateY(1%);
+    overflow-y: hidden !important;
-    border-top: #8cefff 0.3vh solid;
-    border-left: #8cefff 0.3vh solid;
-    border-bottom: none;
-    border-right: none;
 }
-.HotbarButton:hover {
+.ShowOffContent{
-    cursor: pointer;
+    display: flex;
-    height: 8vh;
+    justify-content: start;
-    filter: drop-shadow(0 0 2vh #8cefff);
+    flex-direction: column;
-    transform: scale(1.1) translateY(1%);
+    align-content: center;
-    border-top: #8cefff 0.3vh solid;
+    align-items: center;
-    border-left: #8cefff 0.3vh solid;
+}
-    border-bottom: none;
+.ShowOffContainer{
-    border-right: none;
+    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 {

HalbearNetLanding/UserAgreement.php

@@ -78,7 +78,7 @@ require_once("Hotbar.php");
         <a class=" FooterFont" style="padding-bottom: 0.5vh; margin-right: 2vh; text-decoration: underline;  text-align: right;" onclick="document.location.href='CompanyInformation.php';">Company Information</a>
     </div>
 </div>
-<div class="BackgroundFade" style="height: 501vh; !important;"></div>
+<div class="BackgroundFade" style="height: 100vh; position: fixed;"></div>
 
 </body>
 </html>

HalbearNetLanding/index.php

@@ -28,20 +28,20 @@ require_once("Hotbar.php");
         <a class="Title" >
             Welcome to Halbear.Net!
         </a>
+    </div>
+    <div class="TerrainGenBG" id="TerrainGen">
+
     </div>
     <div tabindex="0" class="StaticContentContainer FrontPageTextBox InfoBox" style=" ">
         <div style="display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; width: 100%; height: 100%;">
             <a class="LargeWhiteFont" style="padding: 2vh; font-size: 4vh; text-align: center;">
                 Halbear Networking & Software Ltd is a Software Developer based in Wales who specialises in Game Engine Development!<br><br>
             </a>
-            <button class="HotbarButton InfoBoxButton" style="" id="HalNet" onclick="window.location.href='../index.php'">Wanna Know More?</button>
+            <button class="HotbarButton InfoBoxButton" style="" id="HalNet" onclick="TheyWannaKnowMore();">Wanna Know More?</button>
         </div>
-    </div>
-    <div class="TerrainGenBG" id="TerrainGen">
-
     </div>
     <div tabindex="0" class="StaticContentContainer FrontPageTextBox ShortcutBox" style="">
-        <div class="StaticSizeableContainer" style="">
+        <div class="StaticSizeableContainer" style="min-height: 16vh;">
             <a class="LargeWhiteFont" style="padding: 2vh; font-size: 3vh; text-align: center;">
                 this webiste is a landing page to make the important stuff easy to access, here are some shortcuts: <br><br>
             </a>
@@ -49,13 +49,84 @@ require_once("Hotbar.php");
                 <button class="HotbarButton ShortcutButton" style="" id="HalNet" onclick="window.location.href='../store.php'">Store</button>
                 <button class="HotbarButton ShortcutButton" style="" id="HalNet" onclick="window.location.href='../ForumWindow.php?desktop=true&fullscreen=true'">Forums</button>
                 <button class="HotbarButton ShortcutButton" style="" id="HalNet" onclick="window.location.href='../Software.php'">Software</button>
-                <button class="HotbarButton ShortcutButton" style="" id="HalNet" onclick="window.location.href='../Contact.php'">Contacts</button>
+                <button class="HotbarButton ShortcutButton" style="" id="HalNet" onclick="window.location.href='ContactUs.php'">Contacts</button>
             </div>
         </div>
     </div>
 </div>
+    <div class="ShowOffSection hidden" id="showOffSection" style=" transform: translateY(-14vh);">
+        <div tabindex="0" class="StaticContentContainer" style="margin-top:14vh; padding: 1vh 2.5vh; margin-bottom: 2vh;">
+            <a class="Title" >
+                A little bit more about us:
+            </a>
+        </div>
+        <div tabindex="0" class="ShowOffContainer showOffFlipped">
+            <div class="ShowOffContent" style="padding:1vh;">
+                <div class="ContentContainerImage" style=""></div>
+            </div>
+            <div class="ShowOffContent">
+                <div tabindex="0" style="width: 100%; display: flex; flex-direction: row; justify-content: center; text-align:center; align-items: center; transform: translateY(3vh); text-shadow: #5fabe6 0 0 1vh; padding-bottom: 2vh; text-decoration: underline;" class="Title">The User Comes First</div>
+                <div tabindex="0" class="StaticContentContainer" style="min-width: 80%;">
+                    <div class="StaticSizeableContainer" style="">
+                        <a class="LargeWhiteFont" style="padding: 2vh; font-size: 3vh; text-align: center;">
+                            Our priority with our software is the end user experience, we will not sully our software with performance heavy DRM's or online-only functionality and no Low Level Anti-Cheat.<br><br>We design our software to the best possible quality for the user, optimised for many devices, and built with a UX around customisability and ease of use.<br><br> We also want to make our software engaging for the user, even if it is a mundane or simple software such as a word processor, making a software engaging, streamlined, and well performing is the best way to make the software keep a high work ethic for workers who have to use it day to day!
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div tabindex="0" class="ShowOffContainer">
+            <div class="ShowOffContent">
+                <div tabindex="0" style="width: 100%; display: flex; flex-direction: row; justify-content: center; text-align:center; align-items: center; transform: translateY(3vh); text-shadow: #5fabe6 0 0 1vh; padding-bottom: 2vh; text-decoration: underline;" class="Title">Made By Humans For Humans</div>
+                <div tabindex="0" class="StaticContentContainer" style="min-width: 80%;">
+                    <div class="StaticSizeableContainer" style="">
+                        <a class="LargeWhiteFont" style="padding: 2vh; font-size: 3vh; text-align: center;">
+                            Halbear Networking & Software Ltd is comprised of people passionate about software development and computer science, our developers make their best effort to avoid the use of LLM AI in the development process<br><br> We take pride in our work!
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="ShowOffContent" style="padding:1vh;">
+                    <div class="ContentContainerImage" style="background-image: url('Assets/Programming.PNG');"></div>
+            </div>
+        </div>
+        <div tabindex="0" class="ShowOffContainer showOffFlipped">
+            <div class="ShowOffContent" style="padding:1vh;">
+                <div class="ContentContainerImage" style="background-image: url('Assets/WinformsGameEngine.PNG');"></div>
+            </div>
+            <div class="ShowOffContent">
+                <div tabindex="0" style="width: 100%; display: flex; flex-direction: row; justify-content: center; text-align:center; align-items: center; transform: translateY(3vh); text-shadow: #5fabe6 0 0 1vh; padding-bottom: 2vh; text-decoration: underline;" class="Title">Expert Craftsmanship</div>
+                <div tabindex="0" class="StaticContentContainer" style="min-width: 80%;">
+                    <div class="StaticSizeableContainer" style="">
+                        <a class="LargeWhiteFont" style="padding: 2vh; font-size: 3vh; text-align: center;">
+                            We boast impressive developer skill sets with experience in Game Engine engineering, Game Development, Software development, and web development!<br><br>
+                        </a>
+                        <a class="LargeWhiteFont" style="justify-content: left; padding: 2vh; font-size: 3vh; text-align: left; min-width: 90%">
+                            Our skills include:<br>Rendering: Vulkan, OpenGL, GLSL, GLFW, GDI+, JavaFX<br>Object Oriented: Java, C#, C++, Kotlin<br>Procedural: C, Rust, Python, Lua, Javascript, PHP<br><br>We have experience in a multitude of different fields, from game development, to game engine development, backend server software, web development and even game modding!<br><br>You can check out our open source projects at
+                        </a>
+                        <a class="LargeWhiteFont" style="justify-content: center; padding-bottom: 3vh; font-size: 3vh; text-align: center; text-decoration:underline; color: #92c4c2; cursor: pointer; min-width: 90%" onclick="document.location.href='https://git.mallard.gdn/';">https://git.mallard.gdn!</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div tabindex="0" class="ShowOffContainer">
+            <div class="ShowOffContent">
+                <div tabindex="0" style="width: 100%; display: flex; flex-direction: row; justify-content: center; text-align:center; align-items: center; transform: translateY(3vh); text-shadow: #5fabe6 0 0 1vh; padding-bottom: 2vh; text-decoration: underline;" class="Title">Environmentally Green!</div>
+                <div tabindex="0" class="StaticContentContainer" style="min-width: 80%;">
+                    <div class="StaticSizeableContainer" style="">
+                        <a class="LargeWhiteFont" style="padding: 2vh; font-size: 3vh; text-align: center;">
+                            All our hosting is done exclusively through providers using 100% renewable energy and air cooled servers, such as IONOS and Hetzner, the data centres we rent from use no water and are powered by solar and wind energy! <br><br>And our own on-site servers are fully air-cooled, powered by the UK national grid and only ran when needed.<br><br> Almost all of our equipment is recycled from 2nd hand sellers or server auctions with the exception being the Website and Database Servers for security reasons!
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="ShowOffContent" style="padding: 1vh 1vh 5vh;">
+                <div class="ContentContainerImage" style="background-image: url('../GeneralAssets/Flowers.png');"></div>
+            </div>
+        </div>
+    </div>
 <div tabindex="0" style="width: 100vw; display: flex; flex-direction: row; justify-content: center; align-items: center; transform: translateY(3vh);" class="Title">What we offer:</div>
-<div tabindex="0" class="LandingWrapper">
+<div tabindex="0" class="LandingWrapper" id="MainOffers">
     <button class="ContentContainer SoftDev" onclick="window.location.href='https://ironhorse.games/'">
         <div class="LargeWhiteFont">Software Development</div>
         <div class="ContentImage" style="display: flex; flex-direction: column;" >
@@ -85,7 +156,7 @@ require_once("Hotbar.php");
         </div>
     </button>
 </div>
-<div class="halbearnetFooter">
+<div class="halbearnetFooter" id="footer">
     <div class="FooterContainer">
         <a class="FooterFont  " style="padding-bottom: 2vh; margin-right: 2vh; text-align: left;">©Halbear Networking & Software Ltd 2025</a>
         <a class="FooterFont " style="padding-bottom: 0.5vh; margin-right: 2vh; text-decoration: underline; text-align: left;" onclick="document.location.href='UserAgreement.php';">User Agreement</a>
@@ -97,11 +168,12 @@ require_once("Hotbar.php");
         <a class=" FooterFont" style="padding-bottom: 0.5vh; margin-right: 2vh; text-decoration: underline;  text-align: right;" onclick="document.location.href='CompanyInformation.php';">Company Information</a>
     </div>
 </div>
-    <div class="BackgroundFade FadeIndex" style=""></div>
+    <div class="BackgroundFade FadeIndex" id="backgroundFade" style="position: absolute; left: 0; top: 0;;"></div>
 </div>
 <script>
     var Images = ["Assets/TerrainGen1.gif","Assets/TerrainGen2.gif","Assets/TerrainGen3.gif"];
     var index = 0;
+    var Element = document.getElementById("backgroundFade");
     function ChangeImg(){
         document.getElementById("TerrainGen").style.backgroundImage = 'url("'+Images[index]+'")';
         index++;
@@ -113,6 +185,20 @@ require_once("Hotbar.php");
     }
     ChangeImg();
 
+    function Background(){
+        //if (window.scrollY > (Element.offsetTop + Element.offsetHeight - document.documentElement.clientHeight)) {
+            Element.style.top = Math.max(Math.min((window.scrollY + document.documentElement.clientHeight  - Element.offsetHeight + 50),document.getElementById("footer").offsetTop + document.getElementById("footer").offsetHeight - Element.offsetHeight),0) + "px";
+        //}
+        BackgroundTimer();
+    }
+    function BackgroundTimer() {
+        setTimeout(Background, 10);
+    }
+    Background();
+    function TheyWannaKnowMore(){
+        document.getElementById("showOffSection").classList.remove("hidden");
+        document.getElementById("showOffSection").scrollIntoView({ block: 'start',  behavior: 'smooth' });
+    }
 </script>
 </body>
 </html>

Hotbar.php

@@ -17,7 +17,7 @@
         <div tabindex="0" class="hotbarButton" id="ArtworkBtn" onclick="document.location.href='Artwork.php';">
             <a class="buttontext">Artwork</a>
         </div>
-        <div tabindex="0" class="hotbarButton" id="ContactBtn" onclick="document.location.href='Contact.php';">
+        <div tabindex="0" class="hotbarButton" id="ContactBtn" onclick="document.location.href='HalbearNetLanding/ContactUs.php';">
             <a class="buttontext">Contact</a>
         </div>
         <div tabindex="0" class="hotbarButtonSquare" id="AccountBtn" onclick="document.location.href='AccountCentre/AccountCentre.php?Action=Visit&SourcePage=<?php echo($Page)?>';">