Refactoring for publish, and also addition of "Services" page

2026-04-04 13:54:37 +01:00
parent b016e6bd13
commit e4f387d27a
235 changed files with 174 additions and 91 deletions
@@ -0,0 +1,360 @@
+@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;
+        padding-right:1vh;
+        background-image: url("Logo.png");
+        background-repeat: no-repeat;
+        background-size: contain;
+        width: 6vh;
+        height:6vh;
+    }
+    .Title{
+        transition: 0.25s;
+        text-shadow: #8cefff 0vh 0vh 0vh;
+        user-select: none;
+        font-family: "Arial", serif;
+        font-weight: bolder;
+        color:white;
+        font-size: 2.5vh;
+    }
+    .HotbarButton:hover{
+        cursor: pointer;
+        margin-right: 1vh;
+        width:30vw;
+        height: 6vh;
+        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: 0.5vh;
+        margin-left: 0.5vh;
+        display: flex;
+        justify-content: center;
+        flex-direction: row;
+        align-content: center;
+        align-items: center;
+        font-family: "Arial", serif;
+        font-weight: bolder;
+        font-size: 2vh;
+        width: 25vw;
+        height: 5vh;
+        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;
+    }
+    .HotbarWrapper{
+        flex-direction: column !important;
+        overflow-x: clip;
+        transition: 0.5s;
+        width: 100vw;
+        height: 15vh;
+        display: flex;
+        justify-content: start;
+        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;
+    }
+    .ErrorMessageWrapper{
+        display: flex;
+        position: absolute;
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+        flex-direction: column;
+        width: 75vw;
+        height: 50vh;
+        top: 50vh;
+        left:50vw;
+        transform: translate(-50%,-50%);
+    }
+    .ErrorMessageImage{
+        background-image: url("../Desktop/GeneralAssets/mascotchibi/chibilost.png");
+        background-repeat: no-repeat;
+        background-size: 7.5vh;
+        transition: 0.25s;
+        min-width: 7.5vh !important;
+        min-height: 8.4375vh !important;
+        image-rendering: pixelated;
+
+    }
+    .ErrorMessage:hover{
+        .ErrorMessageImage{
+            transform: scale(1);
+            max-width: 6.43vh !important;
+            min-height: 8.9375vh !important;
+            background-position-y: 105%;
+            background-image: url("../Desktop/GeneralAssets/mascotchibi/chibiquestion.png");
+        }
+    }
+    .ErrorMessage{
+        padding: 1vh;
+        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;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        transition: 0.25s;
+        user-select: none;
+        font-family: "Arial", serif;
+        font-weight: bolder;
+        color:white;
+        font-size: 2vh;
+        text-align: center;
+    }
+}
+@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;
+        padding-right:1vh;
+        background-image: url("Logo.png");
+        background-repeat: no-repeat;
+        background-size: contain;
+        width: 8vh;
+        height:8vh;
+    }
+    .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;
+    }
+    .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;
+    }
+    .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;
+    }
+    .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;
+    }
+    .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("../Desktop/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("../Desktop/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;
+    }
+}
+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;
+}
+
+.LogInButtonWrapper{
+    transform: scale(1.5);
+    margin-top: 5vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    flex-direction: row;
+}
+.AccountIcon:hover{
+    transform: scale(1.2) translateY(0);
+    filter: drop-shadow(0 0 2vh #8cefff);
+ }
+.Logo:hover{
+    transform: scale(1.2) translateY(0);
+    filter: drop-shadow(0 0 2vh #8cefff);
+}
+.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;
+}
+.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;
+}
@@ -0,0 +1,45 @@
+<?php
+$HomeLocation = "../index.php";
+if(isset($_SESSION["ReturnPage"])) {
+    switch($_SESSION["ReturnPage"]) {
+        case "Forum":
+            $HomeLocation = 'https://halbear.net/Desktop/Forum.php';
+            break;
+        case "Index":
+            $HomeLocation = 'https://halbear.net/Desktop/index.php';
+            break;
+        case "Software":
+            $HomeLocation = 'https://halbear.net/Desktop/Software.php';
+            break;
+        case "Artwork":
+            $HomeLocation = 'https://halbear.net/Desktop/Artwork.php';
+            break;
+        case "Contact":
+            $HomeLocation = 'https://halbear.net/Desktop/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>
@@ -0,0 +1,3 @@
+<div class="">
+
+</div>
@@ -0,0 +1,428 @@
+@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;
+        backdrop-filter: blur(15px);
+        background-color: RGBA(10,30,40,0.5);
+        border-radius: 2.5vh;
+        margin-bottom: 1vh;
+        flex-direction: column-reverse;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+    }
+    .IconText{
+        font-family: "Arial", serif;
+        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;
+        font-family: "Arial", serif;
+        color: white;
+        font-size: 2vh;
+    }
+    .PopUpWrapper{
+        pointer-events: all;
+        z-index: 100 !important;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+        flex-direction: column;
+        width: 95vw;
+        min-height: 85vh;
+        left: 50vw;
+        top: 50vh;
+        position: absolute;
+        transform: translate(-50%,-50%);
+    }
+    .WindowTitle{
+        font-family: "Arial", serif;
+        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;
+        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;
+    }
+    .WindowTitle{
+        font-family: "Arial", serif;
+        font-size: 2.35vh;
+        color: white;
+        text-shadow: #0e4044 0.15vh 0.35vh 1vh;
+        margin-left:0.25vh;
+    }
+    .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%);
+    }
+    .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;
+    }
+}
+.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;
+}
+
+.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("../Desktop/GeneralAssets/ExitButton.png");
+}
+.ExitButton:hover{
+    transform: scale(1.2);
+    background-image: url("../Desktop/GeneralAssets/ExitButtonHover.png");
+}
+.MinimiseButton{
+    background-image: url("../Desktop/GeneralAssets/MinimiseButton.png");
+    margin-right: 0.25vh;
+}
+.MinimiseButton:hover{
+    background-image: url("../Desktop/GeneralAssets/MinimiseButtonHover.png");
+}
+.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.Dragging{
+    box-shadow: 2vh 3vh 3vh #121e29;
+}
+input{
+    text-align: center;
+    text-anchor: middle;
+}
+.FormBoxWrapper{
+    margin-top: 3vh;
+    margin-right: 3vh;
+    margin-left: 3vh;
+    min-width: 90%;
+}
+.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;
+}
+
+.showpassword{
+    backdrop-filter: none !important;
+}
@@ -0,0 +1,55 @@
+function DragWindow(Window) {
+    var Touchscreen = false;
+    var CalculatedLeft = 0, CalculatedTop = 0, OldLeft = 0, OldTop = 0;
+    Window.children[0].addEventListener('mousedown', mouseDown);
+
+    function mouseDown(mouse) {
+        mouse.preventDefault();
+        if (!Window.classList.contains('DraggingActive')) {
+            Window.style.zIndex = "" + 55;
+            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';
+        }
+    }
+
+    function mouseUp(mouse) {
+        Window.children[1].classList.remove('Dragging');
+        Window.classList.remove('DraggingActive');
+        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;
+}
@@ -0,0 +1,47 @@
+<div id='FormBox' class="PopUpWrapper minimised animationTransition">
+        <div class="WindowTitleBar">
+            <div class="WindowTitleBarContainer">
+                <div class="WindowThumbnail" style="background-image: url('../Desktop/GeneralAssets/windowsbutton.png');"></div>
+                <div class="WindowTitle">log In</div>
+            </div>
+            <div class="WindowTitleBarContainer">
+                <Button id="FormBoxExitBtn" class=" ExitButton appTitleButton" onclick="removeWindow();" on></Button>
+            </div>
+        </div>
+        <div class="WindowBody" style="padding: 0; margin: 0;">
+            <div class="FormBoxWrapper">
+            <form action="AccountActions/LogIn.php" METHOD="post">
+                <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>
+                </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="ForgotPass" href="#">Forgot Password?</a>
+                </div>
+                <div class="LoginField showpassword">
+                    <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 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">
+                        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>
@@ -0,0 +1,47 @@
+<div id='FormBox' class="PopUpWrapper minimised animationTransition">
+        <div class="WindowTitleBar">
+            <div class="WindowTitleBarContainer">
+                <div class="WindowThumbnail" style="background-image: url('../Desktop/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 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>
+                </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"  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 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>
@@ -1,7 +1,4 @@
-<?php
-$UniqueSession = false;
-require("../Hidden/Security/StartSession.php");
-?>
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -1,7 +1,4 @@
-<?php
-$UniqueSession = false;
-require("../Hidden/Security/StartSession.php");
-?>
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -1,7 +1,4 @@
-<?php
-$UniqueSession = false;
-require("../Hidden/Security/StartSession.php");
-?>
+
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -0,0 +1,31 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Halbear.Net</title>
+    <link rel="stylesheet" href="default.css">
+</head>
+<body onload="CalculateGrid(); SetUp();  startApps();">
+<?php
+$_SESSION['desktop'] = false;
+$Page = "Account";
+require_once("Hotbar.php");
+?>
+<script src="WindowManager.js"></script>
+<script src="AlignDesktopApps.js"></script>
+<script>
+    var Button = document.getElementById("AccountBtn");
+    Button.onclick = function(){document.location.href='index.php';};
+    Button.classList.remove('hotbarButtonSquare');
+    Button.classList.add('hotbarButton');
+    Button.children[0].textContent = "Home";
+    Button.children[0].classList.remove('accountimg');
+    Button.children[0].classList.add('buttontext');
+
+    function startApps() {
+        OpenApp(document.querySelectorAll('.AccountManagerIcon')[0], true, 50, 45);
+    }
+</script>
+</body>
+</html>
@@ -0,0 +1,5 @@
+<div style="Padding:2vh;">
+    <button class="AccButton">
+        <a class="button-text SignOutButton" class="whiteText">Sign Out</a>
+    </button>
+</div>
@@ -0,0 +1,48 @@
+<div class="AccountManager Initialised" id="AccountManagerBody" style="display: flex; flex-direction: row; align-content: center; align-items: center; justify-content: center; justify-items: center;"></div>
+<script>
+    function AppInit(ID) {
+        if (sessionStorage.getItem("UID") == null) sessionStorage.setItem("UID", "Inactive");
+        const Body = document.getElementById("AccountManagerBody");
+        if (sessionStorage.getItem("ActiveSession") === true && sessionStorage.getItem("UID") !== "Inactive") {
+            var NewAppLoaded = new XMLHttpRequest();
+            NewAppLoaded.open('GET', "AccountApps/AccountLandingPage.html", true);
+            NewAppLoaded.onreadystatechange = function () {
+                if (NewAppLoaded.readyState !== 4) return;
+                if (NewAppLoaded.status !== 200) return;
+                document.getElementById("AccountManagerBody").insertAdjacentHTML("beforeend", NewAppLoaded.responseText);
+            };
+            NewAppLoaded.send();
+        } else {
+            var NewAppLoaded = new XMLHttpRequest();
+            NewAppLoaded.open('GET', "AccountApps/SignIn.html", true);
+            NewAppLoaded.onreadystatechange = function () {
+                if (NewAppLoaded.readyState !== 4) return;
+                if (NewAppLoaded.status !== 200) return;
+                document.getElementById("AccountManagerBody").insertAdjacentHTML("beforeend", NewAppLoaded.responseText);
+            };
+            NewAppLoaded.send();
+        }
+    }
+
+    function SwitchPage(ID, OldID){
+        document.getElementById(OldID).remove();
+        var NewAppLoaded = new XMLHttpRequest();
+        NewAppLoaded.open('GET', "AccountApps/"+ID+".html", true);
+        NewAppLoaded.onreadystatechange = function () {
+            if (NewAppLoaded.readyState !== 4) return;
+            if (NewAppLoaded.status !== 200) return;
+            Body.insertAdjacentHTML("beforeend",NewAppLoaded.responseText);
+        };
+        NewAppLoaded.send();
+    }
+    function showpass(ID) {
+        var Element = document.getElementById(ID);
+        if (Element.type === "password") {
+            document.getElementById("showpasswordcheckbox").checked = true;
+            Element.type = "text";
+        } else {
+            document.getElementById("showpasswordcheckbox").checked = false;
+            Element.type = "password";
+        }
+    }
+</script>
@@ -0,0 +1,3 @@
+<div class="AccountManagerIcon windowIcon hidden 80 80" onclick="OpenApp(this, false, 50, 50);" >
+    <img src="GeneralAssets/AccountSymbol.png" style="width: 8vh; height: 8vh;">
+    <a class="whiteText IconText" style="overflow: hidden;">
@@ -0,0 +1,32 @@
+<div id="SignInBody" style="Padding:2vh;">
+    <form action="#">
+    <div class="flexboxLoginField">
+        <input type="text" id="username" name="username" required>
+        <label for="username" class="whiteText">Username/Email*</label>
+    </div>
+    <div class="flexboxLoginField">
+        <input type="password" id="password" name="password" required>
+        <label for="password" class="whiteText">Password*</label>
+    </div>
+    <div class="flexboxLoginField showpassword">
+        <input id="showloginpasswordcheckbox" type="checkbox" onclick="showpass('showloginpasswordcheckbox')" style="cursor:pointer" ><a class="whiteText" onclick="showpass('showloginpasswordcheckbox')" style="cursor:pointer; user-select: none;">Show Password</a>
+    </div>
+    <div class="flexboxLoginField">
+        <input type="checkbox" id="capapacha" name="humanverification" value="yes" required>
+        <label for="capapacha" class="whiteText"> i think im not a robot*</label><br>
+    </div>
+    <div class="flexboxLoginField">
+        <input type="checkbox" id="remember" name="remember" value="yes">
+        <label for="remember" class="whiteText"> remember me?</label><br>
+    </div>
+    <div class="ForgotPass">
+        <a class="hyperlink" href="#">Forgot Password?</a>
+    </div>
+    <div class="flexboxLoginField">
+        <button class="AccButton" type="submit">
+            <a class="button-text signintxt" class="whiteText">Log In</a>
+        </button>
+        <p class="whiteText">Don't have a halbear.net account? <a href="#" class="hyperlink register-link" onclick="SwitchPage('SignUp','SignInBody');">>Create One</a></p>
+    </div>
+</form>
+</div>
@@ -0,0 +1,37 @@
+<div id="SignUpBody" style="Padding:2vh;">
+    <form action="includes/RegisterAccount.php" method="POST" style="width: 100%;">
+        <div class="flexboxLoginField">
+            <input type="email" id="email" name="email" required maxlength="50">
+            <label for="Email" class="whiteText">Email Address*</label>
+        </div>
+        <div class="flexboxLoginField">
+            <input type="text" id="newusername" name="newusername" required maxlength="20">
+            <label for="newusername" class="whiteText">New Username*</label>
+        </div>
+        <div class="flexboxLoginField">
+            <input type="text" id="displayname" name="displayname" maxlength="15">
+            <label for="DisplayName" class="whiteText">New Display Name</label>
+        </div>
+        <div class="flexboxLoginField">
+            <input type="password" id="newpassword" name="newpassword" required maxlength="25">
+            <label for="newpassword" class="whiteText">New Password*</label>
+        </div>
+        <div class="flexboxLoginField">
+            <input style="width: 50px;" type="text" id="capaacha" name="captcha" maxlength="5" >
+            <a class="whiteText"> Type "human"</a><br>
+        </div>
+        <div class="flexboxLoginField showpassword">
+            <input id="showpasswordcheckbox" type="checkbox" onclick="showpass('showpasswordcheckbox')" style="cursor:pointer" ><a class="whiteText" onclick="showpass('showpasswordcheckbox')" style="cursor:pointer; user-select: none;">Show Password</a>
+        </div>
+        <div class="flexboxLoginField">
+            <input type="checkbox" id="terms" name="terms" value="yes" required>
+            <label for="terms" class="whiteText"> I agree to the <a href="termsAndConditions.html" class="hyperlink tc">terms and conditions</a>*</label><br>
+        </div>
+        <div class="flexboxLoginField" style="width: 95%; display: flex; justify-content: center; align-items: center; justify-items: center; flex-direction: column;">
+            <button type="submit" class="ButtonHalNetSytle">
+                <a class="buttontext signintxt">Create Account</a>
+            </button>
+            <p class="whiteText">have a halbear.net account? <a href="#" class="hyperlink login-link" onclick="SwitchPage('SignIn','SignUpBody');">Log In</a></p>
+        </div>
+    </form>
+</div>
@@ -0,0 +1,99 @@
+const DesktopApps = document.querySelectorAll('.windowIcon');
+var AppGrid = null;
+var XtileSize;
+var YtileSize;
+var XTiles;
+var YTiles;
+function SetUp(){
+    for (i = 0; i < DesktopApps.length; i++) {
+        DragIcon(DesktopApps[i])
+    }
+}
+function CalculateGrid(){
+
+    XtileSize = DesktopApps[0].offsetWidth + (DesktopApps[0].offsetWidth/12);
+    YtileSize = DesktopApps[0].offsetHeight + (DesktopApps[0].offsetHeight/12);
+    console.log(XtileSize + " " + YtileSize);
+
+    XTiles = Math.round(innerWidth / XtileSize);
+    YTiles = Math.round((innerHeight - document.querySelector('.hotbarWrapper').offsetHeight) / YtileSize);
+    console.log(XTiles + " " + YTiles);
+
+    var iteratorX = 0;
+    var iteratorY = Math.round(document.querySelector('.hotbarWrapper').offsetHeight/YtileSize);
+    console.log(iteratorY);
+    for (i = 0; i < DesktopApps.length; i++) {
+        if (iteratorY >= YTiles) {
+            iteratorY = Math.round(document.querySelector('.hotbarWrapper').offsetHeight/YtileSize);
+            iteratorX++;
+        }
+        DesktopApps[i].style.top = (((4 + (YtileSize * iteratorY))/innerHeight)*100) + "vh";
+        DesktopApps[i].style.left = (((4 + (XtileSize * iteratorX))/innerWidth)*100) + "vw";
+        iteratorY++;
+    }
+}
+function calculatePosition(AppIcon, startPosX, startPosY) {
+    var valid = true
+    Xpos = Math.round(AppIcon.offsetLeft / XtileSize);
+    Ypos = Math.round(AppIcon.offsetTop / YtileSize);
+    for (var j = 0; j < DesktopApps.length; j++) {
+        if (DesktopApps[j].offsetLeft === 4 + (Xpos * XtileSize)
+            && DesktopApps[j].offsetTop === 4 + (Ypos * YtileSize)) {
+            valid = false;
+        }
+    }
+    if (valid === false) {
+        AppIcon.style.top = ((startPosY/innerHeight)*100) + "vh";
+        AppIcon.style.left = ((startPosX/innerWidth)*100) + "vw";
+        AppIcon.style.left =  startPosX + "px";
+        AppIcon.style.top = startPosY + "px";
+    } else {
+        AppIcon.style.top = (((4 + (Ypos * YtileSize))/innerHeight)*100) + "vh";
+        AppIcon.style.left = (((4 + (Xpos * XtileSize))/innerWidth)*100) + "vw";
+    }
+}
+
+function DragIcon(AppIcon){
+    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0, startposX = AppIcon.offsetLeft, startposY = AppIcon.offsetTop;
+    AppIcon.addEventListener('mousedown', mouseDown);
+    function mouseDown(e) {
+        startposX = AppIcon.offsetLeft;
+        startposY = AppIcon.offsetTop;
+        AppIcon.style.zIndex = 125;
+        e.preventDefault();
+        document.addEventListener('mousemove', mouseMove);
+        document.addEventListener('mouseup', mouseUp);
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+    }
+    function mouseMove(e){
+        e.preventDefault();
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        if (AppIcon.offsetTop < window.innerHeight) {
+            AppIcon.style.top = (AppIcon.offsetTop - pos2) + 'px';
+        }
+        else if( pos2 >= 0){
+            AppIcon.style.top = (AppIcon.offsetTop - pos2) + 'px';
+        }
+        if (AppIcon.offsetLeft + (AppIcon.clientWidth/2) + 3< window.innerWidth) {
+            AppIcon.style.left = (AppIcon.offsetLeft - pos1) + 'px';
+        }
+        else if(pos1 >= 0) {
+            AppIcon.style.left = (AppIcon.offsetLeft - pos1) + 'px';
+        }
+    }
+    function mouseUp(e) {
+        document.removeEventListener('mousemove', mouseMove);
+        document.removeEventListener('mouseup', mouseUp);
+        document.removeEventListener('touchend', mouseUp);
+        AppIcon.style.zIndex = 105;
+        calculatePosition(AppIcon, startposX, startposY);
+        startposX = AppIcon.offsetLeft;
+        startposY = AppIcon.offsetTop
+    }
+}
+
+
@@ -0,0 +1,15 @@
+<div tabindex="0" id="{id}" class="DraggableWrapper {x} {y} {ApplicationName} minimised">
+    <div class="WindowTitleBar">
+        <div class="WindowTitleBarContainer">
+            <div class="WindowThumbnail" style="background-image: url('{WindowIconImage}');"></div>
+            <div class="WindowTitle">Application</div>
+        </div>
+        <div class="WindowTitleBarContainer">
+            <button id="{id}MinimiseBtn" class=" MinimiseButton appTitleButton" ></button>
+            <button id="{id}ExitBtn" class=" ExitButton appTitleButton" ></button>
+        </div>
+    </div>
+    <div class="WindowBody" style="padding: 0; margin: 0;">
+{body}
+    </div>
+</div>
@@ -0,0 +1,16 @@
+<div tabindex="0" id="{id}" class="DraggableWrapper {x} {y} {ApplicationName} minimised">
+    <div class="WindowTitleBar">
+        <div class="WindowTitleBarContainer">
+            <div class="WindowThumbnail" style="background-image: url('{WindowIconImage}');"></div>
+            <div class="WindowTitle">Application</div>
+        </div>
+        <div class="WindowTitleBarContainer">
+            <button id="{id}MinimiseBtn" class=" MinimiseButton appTitleButton" ></button>
+            <button id="{id}FullscreenBtn" class=" FullscreenButton appTitleButton" onclick="document.location.href='{FullScreenLocation}';"  ></button>
+            <button id="{id}ExitBtn" class=" ExitButton appTitleButton"></button>
+        </div>
+    </div>
+    <div class="WindowBody" style="padding: 0; margin: 0;">
+{body}
+    </div>
+</div>
@@ -0,0 +1,23 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Halbear.Net</title>
+    <link rel="stylesheet" href="Modernised.css">
+</head>
+<body onload="CalculateGrid(); SetUp();  startApps();">
+<?php
+$_SESSION['desktop'] = false;
+$Page = "Artwork";
+    require_once("Hotbar.php");
+?>
+<script src="WindowManager.js"></script>
+<script src="AlignDesktopApps.js"></script>
+<script>
+    var Button = document.getElementById("ArtworkBtn");
+    Button.onclick = function(){document.location.href='index.php';};
+    Button.children[0].textContent = "Home";
+</script>
+</body>
+</html>
@@ -0,0 +1,4 @@
+<img src="GeneralAssets/halnetmascot.png" style="width: auto; height: 100%;">
+<div style="height: 100%; width: 50%; left: 50%; top: 0;">
+    <p class="16 whiteText variableFont" style="overflow: hidden;">This is a character called Melona Arame, she is the halbear.net mascot!<br><br>Melona was drawn on a whim when i(halbear) got my animation tablet so there's not much to say about her, i make stuff up as i go, which is what i normally do for most things, she came to be the mascot of this website when i read about windows "OS-tans" which were anime mascots for the windows operating system, and since i want this website to take inspiration from older windows versions, i decided to use this character i have been drawing. <br><br> one thing about her is that shes kinda stupid i guess, most of my drawings of her have an ahoge on top of her head, which is a trope to show a character is clutzy or stupid<br></p>
+</div>
@@ -0,0 +1,3 @@
+<div tabindex="0" class="MelonaArameIcon windowIcon hidden 70 80" onclick="OpenApp(this, false, 50, 50);" >
+    <img class="NoAA" src="GeneralAssets/mascotchibi/chibismug.png" style="width: 8vh; height: 8vh;">
+    <a class="whiteText IconText" style="overflow: hidden;">
@@ -0,0 +1,3 @@
+<div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center;">
+    <iframe src="https://what.everboard.art" style="width: 100%; height: 100%; border:none;"></iframe>
+</div>
@@ -0,0 +1,3 @@
+<div tabindex="0" class="WhateverBoardApp windowIcon hidden 120 80 Fullscreen" onclick="OpenApp(this, false, 50, 50);" >
+    <img class="NoAA" src="GeneralAssets/applicationIcon.png" style="width: 8vh; height: 8vh;">
+    <a class="whiteText IconText" style="overflow: hidden;">
@@ -0,0 +1,21 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Halbear.Net</title>
+    <link rel="stylesheet" href="Modernised.css">
+</head>
+<body>
+<?php
+$_SESSION['desktop'] = false;
+$Page = "Contact";
+require_once("Hotbar.php");
+?>
+<script>
+    var Button = document.getElementById("ContactBtn");
+    Button.onclick = function(){document.location.href='index.php';};
+    Button.children[0].textContent = "Home";
+</script>
+</body>
+</html>
@@ -0,0 +1,31 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Halbear.Net</title>
+    <link rel="stylesheet" href="Modernised.css">
+</head>
+<body onload="CalculateGrid(); SetUp();">
+<?php
+$_SESSION['desktop'] = false;
+$Page = "Forum";
+require_once("Hotbar.php");
+?>
+<script>
+    var Button = document.getElementById("ForumBtn");
+    Button.onclick = function(){document.location.href='index.php';};
+    Button.children[0].textContent = "Home";
+</script>
+<script src="WindowManager.js"></script>
+<script src="AlignDesktopApps.js"></script>
+<?php
+if(!isset($_SESSION["logged_in"]) || !$_SESSION["logged_in"]) {
+echo("
+    <script>OpenApp(document.querySelectorAll('.LoggedOutIcon')[0], true, 50, 45); </script >");
+}else{
+    echo("<script>OpenApp(document.querySelectorAll('.ForumAppIcon')[0], true, 50, 45);</script >");
+}
+?>
+</body>
+</html>
@@ -0,0 +1,3 @@
+<div style="width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center;">
+    <iframe src="ForumWindow.php" style="width: 100%; height: 100%; border:none;"></iframe>
+</div>
@@ -0,0 +1,3 @@
+<div tabindex="0" class="ForumAppIcon windowIcon hidden 120 80 Fullscreen" onclick="OpenApp(this, false, 50, 50);" >
+    <img src="GeneralAssets/ForumsIcon.png" style="width: 8vh; height: 8vh; image-rendering: pixelated;">
+    <a class="whiteText IconText" style="overflow: hidden;">
@@ -0,0 +1,8 @@
+<div style="width: 100%; margin:2vh; height: 100%; display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center;">
+<p class="16 whiteText variableFont" style="overflow: hidden; padding: 1vh; margin: 0">It seems you are not logged in, users need to be signed in to post on the forums and to view restricted or private posts<br><br>if you don't intend to do that, close this and continue</p>
+<div style="height: 100px; width: 100%; color:transparent;">sigma</div>
+<img src="GeneralAssets/cricket.png" style="height: 40%; width: auto; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-25%);">
+<div class="hotbarButton" id="SignInBtn" onclick="document.location.href='../../AccountCentre/AccountCentre.php';">
+    <a class="buttontext">Log In?</a>
+</div>
+</div>
@@ -0,0 +1,3 @@
+<div tabindex="0" class="LoggedOutIcon windowIcon hidden 50 50" onclick="OpenApp(this, false, 50, 50);" >
+    <img src="GeneralAssets/cricketHead.png" style="width: 8vh; height: 8vh;">
+    <a class="whiteText IconText" style="overflow: hidden;">
@@ -0,0 +1,21 @@
+<?php
+if(isset($_GET['desktop'])) $_SESSION['desktop'] = $_GET['desktop'];
+if(isset($_GET['fullscreen']) && $_GET['fullscreen']){
+    $Page = "Forum";
+    require_once("Hotbar.php");
+}
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Halbear.Net</title>
+    <link rel="stylesheet" href="Modernised.css">
+</head>
+<body>
+<script>
+    var Button = document.getElementById("ForumBtn");
+    Button.onclick = function(){document.location.href='index.php';};
+    Button.children[0].textContent = "Home";
+</script>
+</body>
--- a/Show More
+++ b/Show More