more mobile support and misc changes

This commit is contained in:
Halbear
2026-03-11 20:04:44 +00:00
parent b70fb4d2af
commit b016e6bd13
15 changed files with 524 additions and 142 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 305 KiB

After

Width:  |  Height:  |  Size: 288 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

View File

@@ -21,13 +21,13 @@ require("../Hidden/Security/StartSession.php");
$Page = "CompanyInformation";
require_once("Hotbar.php");
?>
<div style="width: 100vw; height: 110vh;" 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">
<a class="Title" >
<div style="max-width: 100vw; height: 110vh; margin-right: 3vh;" onload="ChangeImg();">
<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" 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>

View File

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

View File

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

View File

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

View File

@@ -3,6 +3,9 @@
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}
body{
}
.dotgothic16-regular {
font-family: "DotGothic16", sans-serif;
@@ -67,7 +70,49 @@ body{
overflow-x: hidden;
width: 100%;
}
.Copyright{
font-family: "Lexend", system-ui;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
@media only screen and (max-aspect-ratio: 1.165/1) {
.HotbarButton:active{
cursor: grabbing !important;
height: 9vh;
background: white;
filter: drop-shadow(0 0 2vh #8cefff);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-bottom: none;
border-right: none;
}
.ShowOffContent{
width: 100%;
}
.ShowOffContainer.showOffFlipped{
flex-direction: column-reverse !important;
}
.ShowOffContainer{
margin: 2vh;
min-width: 90vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
.Copyright{
position: fixed;
font-size: 1.75vh !important;
border-radius: 5vh;
backdrop-filter: blur(15px);
left: 0;
bottom: 0;
z-index: 100;
}
.EntireContentWrapper{
min-height: 100vh;
overflow-y: hidden;
@@ -106,6 +151,19 @@ body{
background-color: rgba(190,240,240,.1);
transition: 0.5s;
}
.ContentContainerImage{
border-radius: 5vh;
margin-top: 5vh;
min-width: 95vw;
cursor: default;
background-image: url("../Assets/Programming.PNG");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border:none;
filter: none;
min-height: 45vw;
}
.ContentContainer{
padding: 0;
filter: drop-shadow(0 0.5vh 3vh #8cefff);
@@ -193,7 +251,7 @@ body{
height: 13vh !important;
}
.TerrainGenBG{
margin-top: 5vh;
margin-top: 10vh;
top:57vh;
height: 52.174vw;
width: 96vw;
@@ -221,7 +279,70 @@ body{
height: 5vh !important;
}
}
.ContentContainerImage{
transition: 0.25s;
}
.ContentContainerImage:hover {
transform: scale(1.1);
}
@media only screen and (min-aspect-ratio: 1.165/1) {
.HotbarButton:hover {
cursor: pointer;
height: 8vh;
filter: drop-shadow(0 0 2vh #8cefff);
transform: scale(1.1) translateY(1%);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-bottom: none;
border-right: none;
}
.HotbarButton:active{
cursor: grabbing !important;
height: 9vh;
background: white;
filter: drop-shadow(0 0 2vh #8cefff);
transform: scale(1.1) translateY(1%);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-bottom: none;
border-right: none;
}
.ContentContainerImage{
border-radius: 5vh;
min-width: 45vw;
min-height: 25vw;
cursor: default;
background-image: url("../Assets/Programming.PNG");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border:none;
filter: none;
}
.ShowOffContent{
width: 50%;
}
.ShowOffContainer{
margin: 2vh;
min-width: 90vw;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}
.Copyright{
border-radius: 5vh;
font-size: 2vh;
backdrop-filter: blur(15px);
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
}
.contactUsContainer{
width: 95vw;
}
.FadeIndex{
height: 220vh !important;
}
@@ -230,6 +351,7 @@ body{
flex-direction: column;
justify-content: space-evenly;
align-items: center;
min-height: 16vw;
width: 100%;
height: 100%;
}
@@ -355,26 +477,27 @@ body{
border-bottom: #8cefff 0.3vh solid;
transition: 0.5s;
}
.HotbarButton:active{
cursor: grabbing !important;
height: 9vh;
background: white;
filter: drop-shadow(0 0 2vh #8cefff);
transform: scale(1.1) translateY(1%);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-bottom: none;
border-right: none;
.hidden{
display: none !important;
height: 0vh !important;
min-height: 0vh !important;
max-height: 0vh !important;
overflow-y: hidden !important;
}
.HotbarButton:hover {
cursor: pointer;
height: 8vh;
filter: drop-shadow(0 0 2vh #8cefff);
transform: scale(1.1) translateY(1%);
border-top: #8cefff 0.3vh solid;
border-left: #8cefff 0.3vh solid;
border-bottom: none;
border-right: none;
.ShowOffContent{
display: flex;
justify-content: start;
flex-direction: column;
align-content: center;
align-items: center;
}
.ShowOffContainer{
max-width: 100vw;
margin-top: 5vh;
padding: 2vh 2vh 6vh;
border-radius: 5vh;
//background-image: linear-gradient(to bottom, rgba(100,200,255,0.15), rgba(100,200,255,0.125), rgba(100,200,255,0.015), rgba(100,200,255,0.135));
}
.RightFloat.Long{
width: 100vh;
@@ -418,6 +541,19 @@ body{
flex-direction: column;
justify-content: flex-start;
}
.ShowOffContent{
//width: 50%;
}
.ShowOffSection{
transition: 0.5s;
width: 100vw;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
align-content: space-evenly;
}
.halbearnetFooter{
border-top: white solid;
z-index: 35;
@@ -432,14 +568,6 @@ body{
background-image: linear-gradient(to bottom, rgba(180,220,255,0.125), rgba(180,220,255,0.225), rgba(180,220,255,0.0525), rgba(100,200,255,0.0725));
}
.Copyright{
border-radius: 5vh;
backdrop-filter: blur(15px);
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
}
.Title{
user-select: none;
font-family: "Lexend", sans-serif;
@@ -483,14 +611,14 @@ Button{
z-index: -2;
}
body{
//background-image: linear-gradient(to bottom right, #063657,#031d2e );
//background-image: url("../Assets/Programming.PNG");
background-color: black;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
margin: 0;
padding: 0;
overflow-x: clip;
max-width: 100vw;
height: 100%;
}
::-webkit-scrollbar {

View File

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

View File

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