HNS/ExampleWebsite
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

InitialCommit

Browse Source
This commit is contained in:
Harrison Corlett
2026-05-12 13:17:44 +01:00
commit 4847365f99
18 changed files with 684 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SeparateExamples/Cart/CartCSS.css
+55
View File
@@ -0,0 +1,55 @@
/* no CSS is needed for this but this just gives it structure */
.VFlexBox{
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}
.CartContainer{
width: 100vw;
min-height: 50vh;
margin-top: 10vh;
}
.ExampleText{
font-size: 4vh;
font-family: Arial,serif;
font-weight: normal;
text-align: center;
}
.ExampleText2{
font-size: 4vh;
font-family: "Monotype",serif;
font-weight: bold;
text-align: center;
}
.ExampleButton:hover{
color:white;
background-color: black;
transform: scale(1.1);
}
.ExampleButton{
color:black;
background-color: white;
transition: 0.25s;
cursor: pointer;
width: 10vw;
height: 5vh;
align-items: center;
justify-content: center;
display: flex;
text-align: center;
}
/*Not needed but is good for setting up the web page */
*{
box-sizing: border-box;
margin:0;
padding:0;
border:1px black solid; /*set this to none in the actual site if you dont plan on a border */
background-color: transparent;
}
body{
max-width: 100vw;
overflow-x:hidden;
}
SeparateExamples/Cart/CartHtml.html
+18
View File
@@ -0,0 +1,18 @@
<head>
<link rel="stylesheet" href="CartCSS.css">
</head>
<script src="CartManager.js"></script>
<!-- load what's in cart -->
<div class="CartContainer VFlexBox" id="CartContainer">
<script>
LoadWhatsInCart(document.getElementById('CartContainer'));
</script>
</div>
<!-- Button to add something to cart -->
<div class="VFlexBox">
<p class="ExampleText">SomeItem</p>
<!-- the first value in the AddToCart function is the actual cart item itself, you can load these with JS or just do it manually like here -->
<button class="ExampleButton" id="CartButton1" onclick="AddToCart('Name=SuperAwesomeItem&Description=EpicDescription&Delivery=NextDay&Price=£30','CartButton1','ProductCategory1');">Add to Cart</button>
</div>
SeparateExamples/Cart/CartManager.js
+39
View File
@@ -0,0 +1,39 @@
function AddToCart(object, buttonID, type){
if(object !== "null" && object !== null) {
if (sessionStorage.getItem("CartObjects") === null || sessionStorage.getItem("CartObjects") === '' || !sessionStorage.getItem("CartObjects").includes(object)) {
sessionStorage.setItem("CartObjects", sessionStorage.getItem("CartObjects") + "?Type=" + type + "&" + object);
}
document.getElementById(buttonID).classList.add("ClickedBtn");
document.getElementById(buttonID).innerHTML = 'Added <img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-solid.svg" style=" margin:0 0.5vh; width: 4vh; height: 4vh;">'
document.getElementById(buttonID).onclick = null;
}
}
function LoadWhatsInCart(SourceContainer){
if(sessionStorage.getItem("CartObjects") !== null && sessionStorage.getItem("CartObjects") !== ''){
let CartItems = sessionStorage.getItem("CartObjects").split("?");
for(let i = 0; i < CartItems.length; i++){
if(CartItems[i] !== null && CartItems[i] !== "null" && CartItems[i] !== '') {
let ElementToDisplay = "<div class='VFlexBox' id='CartListing" + i + "' style='margin:2vh;'>"
let ItemsInsideCart = CartItems[i].split("&");
for (let Item = 0; Item < ItemsInsideCart.length; Item++) {
let Variable = ItemsInsideCart[Item].split("=");
ElementToDisplay += "<div class='HFlexBox'><p class='ExampleText'>" + Variable[0] + ":</p>"
ElementToDisplay += "<p class='ExampleText2'>&emsp;" + Variable[1] + "</p></div>";
}
ElementToDisplay += '<button class="ExampleButton" onclick="RemoveFromCart(' + "'" + CartItems[i] + "','" + i + "'" + ');">Remove</button></div>';
SourceContainer.innerHTML += ElementToDisplay;
}
}
}
}
function RemoveFromCart(object, index){
if(sessionStorage.getItem("CartObjects").includes(("?" + object))) {
sessionStorage.setItem("CartObjects", sessionStorage.getItem("CartObjects").replace(("?" + object), ""));
}
let buttonID = "CartListing" + index;
let ListingID = "CartListing" + index;
document.getElementById(buttonID).onclick = null;
document.getElementById(buttonID).remove();
document.getElementById(ListingID).remove();
}
SeparateExamples/Hamburger Menu/Hamburger.css
+140
View File
@@ -0,0 +1,140 @@
/*the hamburgers container, lays them in a centred column to make sure they're even */
.Hamburger{
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
align-items: center;
margin: 0 2vh;
width: 5vh;
height: 5vh;
cursor: pointer;
}
/*turns the hamburger shape into a cross when its enabled*/
.Hamburger.Active{
.HamburgerSlab.First{
transform: rotate(45deg) translateX(1.125vh)translateY(0.9vh);
}
.HamburgerSlab.Middle{
color:transparent;
background-color:transparent;
}
.HamburgerSlab.Last{
transform: rotate(-45deg) translateX(0.75vh)translateY(-0.75vh);
}
}
.HamburgerNavMenu.Active{
transform: translateX(0) translateY(0);
}
.Hamburger:hover{
.HamburgerSlab{
transform: scaleX(1.2);
}
}
.HamburgerSlab{
outline: none;
width:5vh ;
height: 0.75vh;
margin-top:0.25vh;
margin-bottom: 0.25vh;
transition: 0.5s;
border-radius: 0 !important;
}
/*gives each hamburger bar a separate colour*/
.Hamburger{
/*you can reference two consecutive classes for styling
so for example here, the hamburger slab span element has
class="HamburgerSlab First" or class="HamburgerSlab Middle"
and you can reference them individually
*/
.HamburgerSlab.First{
color:slategray;
background-color:slategray;
}
.HamburgerSlab.Middle{
color:dimgrey;
background-color:dimgray;
}
.HamburgerSlab.Last{
color:darkslategray;
background-color:darkslategray;
}
}
/*this is for only mobile or 4:3 and lower screen aspect ratios*/
@media only screen and (max-aspect-ratio: 12/9) {
/* drop down menu is a window not in the hotbar */
.HamburgerNavMenu {
padding: 0.5vh;
position: fixed;
display: flex;
top: 9vh;
right: 0;
transform: translateX(0) translateY(-100vh);
transition: 0.25s;
justify-content: flex-start;
flex-direction: column;
align-items: flex-start;
align-content: flex-start;
}
/* ::After is a pseudo element, it allows us to put the little point arrow */
.HamburgerNavMenu::After {
content: '';
position: absolute; /* if the parent element is positioned as relative, absolute defines position relative to the parent*/
right: 15%;
bottom: 100%;
width: 0;
height: 0;
border-left: 1.2vh solid transparent;
border-right: 1.2vh solid transparent;
border-bottom: 1.7vh solid black;
clear: both;
}
}
/*this is only for desktop screen aspect ratios */
@media only screen and (min-aspect-ratio: 12/9) {
/*positions hamburger elements on hotbar when open
to always have a window style, move whats inside the @media only screen and (max-aspect-ratio: 12/9)
outside of the query and delete the @media boxes*/
.HamburgerNavMenu {
padding: 0.5vh;
position: relative;
display: flex;
transform: translateX(100vw) translateY(0);
transition: 0.25s;
justify-content: left;
flex-direction: row;
align-items: center;
align-content: center;
}
}
/*this isnt part of the hamburger itself but its needed for laying out the buttons horizontally*/
/* sets the alignment of an element to be horizontal, flexbox allows dynamic resizing */
.HFlexBox{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
/*this isnt part of the hamburger menu but its necessary for the buttons inside it*/
.NavIcon:hover{
transform: scale(1.1);
}
.NavIcon{
margin:0 0.5vh;
width: 4vh;
height: 4vh;
transition: 0.5s;
}
.NavButton{
font-size: 3vh;
height: 6vh;
min-width: 6vh;
font-family: Arial,serif;
font-weight: bolder;
text-align: center;
margin: 0 1vh; /*this sets the horizontal margin to 1% of the viewport height but the vertical margin to nothing*/
}
SeparateExamples/Hamburger Menu/Hamburger.html
+16
View File
@@ -0,0 +1,16 @@
<head>
<link rel="stylesheet" href="Hamburger.css">
</head>
<div class="HamburgerWrapper HFlexBox">
<div id="HamburgerNavContent" class="HamburgerNavMenu">
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-line.svg" style="">My Cart</button>
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/gallery.svg" style="">Gallery</button>
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/about.svg" style="">About Us</button>
</div>
<button id="HamburgerNav" class="Hamburger VFlexBox Center" onclick="ExpandHamburgerMenu();">
<span class="HamburgerSlab First"></span>
<span class="HamburgerSlab Middle"></span>
<span class="HamburgerSlab Last"></span>
</button>
</div>
<script src="Hamburger.js"></script>
SeparateExamples/Hamburger Menu/Hamburger.js
+16
View File
@@ -0,0 +1,16 @@
var hamburger = document.getElementById("HamburgerNav");
var hamburgerContent = document.getElementById("HamburgerNavContent");
function Setup(){
hamburger = document.getElementById("HamburgerNav");
hamburgerContent = document.getElementById("HamburgerNavContent");
}
function ExpandHamburgerMenu(){
if(hamburger.classList.contains("Active")){
hamburger.classList.remove("Active");
hamburgerContent.classList.remove("Active");
}
else {
hamburger.classList.add("Active");
hamburgerContent.classList.add("Active");
}
}