From 4847365f99463b2eda51d9ca4f2f2f6ae5f4bed2 Mon Sep 17 00:00:00 2001 From: Halbear Date: Tue, 12 May 2026 13:17:44 +0100 Subject: [PATCH] InitialCommit --- .idea/.gitignore | 14 ++ Assets/Icons/about.svg | 1 + Assets/Icons/gallery.svg | 1 + Assets/Icons/palmtree.svg | 1 + Assets/Icons/shopping-cart-line.svg | 1 + Assets/Icons/shopping-cart-outline-badged.svg | 1 + Assets/Icons/shopping-cart-solid.svg | 1 + Cart.html | 37 +++ Javascript/CartManager.js | 40 +++ Javascript/Hamburger.js | 16 ++ SeparateExamples/Cart/CartCSS.css | 55 +++++ SeparateExamples/Cart/CartHtml.html | 18 ++ SeparateExamples/Cart/CartManager.js | 39 +++ SeparateExamples/Hamburger Menu/Hamburger.css | 140 +++++++++++ .../Hamburger Menu/Hamburger.html | 16 ++ SeparateExamples/Hamburger Menu/Hamburger.js | 16 ++ StyleSheets/ExampleStructure.css | 233 ++++++++++++++++++ index.html | 54 ++++ 18 files changed, 684 insertions(+) create mode 100644 .idea/.gitignore create mode 100644 Assets/Icons/about.svg create mode 100644 Assets/Icons/gallery.svg create mode 100644 Assets/Icons/palmtree.svg create mode 100644 Assets/Icons/shopping-cart-line.svg create mode 100644 Assets/Icons/shopping-cart-outline-badged.svg create mode 100644 Assets/Icons/shopping-cart-solid.svg create mode 100644 Cart.html create mode 100644 Javascript/CartManager.js create mode 100644 Javascript/Hamburger.js create mode 100644 SeparateExamples/Cart/CartCSS.css create mode 100644 SeparateExamples/Cart/CartHtml.html create mode 100644 SeparateExamples/Cart/CartManager.js create mode 100644 SeparateExamples/Hamburger Menu/Hamburger.css create mode 100644 SeparateExamples/Hamburger Menu/Hamburger.html create mode 100644 SeparateExamples/Hamburger Menu/Hamburger.js create mode 100644 StyleSheets/ExampleStructure.css create mode 100644 index.html diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..252b57d --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,14 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Ignored default folder with query files +/queries/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml +# Editor-based HTTP Client requests +/httpRequests/ +/ExampleWebsiyte.iml +/modules.xml +/vcs.xml +/php.xml diff --git a/Assets/Icons/about.svg b/Assets/Icons/about.svg new file mode 100644 index 0000000..714eb4a --- /dev/null +++ b/Assets/Icons/about.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Assets/Icons/gallery.svg b/Assets/Icons/gallery.svg new file mode 100644 index 0000000..95a9a45 --- /dev/null +++ b/Assets/Icons/gallery.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Assets/Icons/palmtree.svg b/Assets/Icons/palmtree.svg new file mode 100644 index 0000000..0326a54 --- /dev/null +++ b/Assets/Icons/palmtree.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Assets/Icons/shopping-cart-line.svg b/Assets/Icons/shopping-cart-line.svg new file mode 100644 index 0000000..72409ab --- /dev/null +++ b/Assets/Icons/shopping-cart-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Assets/Icons/shopping-cart-outline-badged.svg b/Assets/Icons/shopping-cart-outline-badged.svg new file mode 100644 index 0000000..e7e4bef --- /dev/null +++ b/Assets/Icons/shopping-cart-outline-badged.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Assets/Icons/shopping-cart-solid.svg b/Assets/Icons/shopping-cart-solid.svg new file mode 100644 index 0000000..67dd154 --- /dev/null +++ b/Assets/Icons/shopping-cart-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Cart.html b/Cart.html new file mode 100644 index 0000000..a429ce3 --- /dev/null +++ b/Cart.html @@ -0,0 +1,37 @@ + + + + + Title + + + +
+
+ +

ExampleTitle

+
+
+
+
+ + + +
+ +
+
+
+ +
+ +
+ + + \ No newline at end of file diff --git a/Javascript/CartManager.js b/Javascript/CartManager.js new file mode 100644 index 0000000..af1ef39 --- /dev/null +++ b/Javascript/CartManager.js @@ -0,0 +1,40 @@ +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 ' + 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 = "
" + let ItemsInsideCart = CartItems[i].split("&"); + for (let Item = 0; Item < ItemsInsideCart.length; Item++) { + let Variable = ItemsInsideCart[Item].split("="); + ElementToDisplay += "

" + Variable[0] + ":

" + ElementToDisplay += "

 " + Variable[1] + "

"; + } + ElementToDisplay += '
'; + 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(); +} \ No newline at end of file diff --git a/Javascript/Hamburger.js b/Javascript/Hamburger.js new file mode 100644 index 0000000..1de39ef --- /dev/null +++ b/Javascript/Hamburger.js @@ -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"); + } +} diff --git a/SeparateExamples/Cart/CartCSS.css b/SeparateExamples/Cart/CartCSS.css new file mode 100644 index 0000000..f7323f3 --- /dev/null +++ b/SeparateExamples/Cart/CartCSS.css @@ -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; +} \ No newline at end of file diff --git a/SeparateExamples/Cart/CartHtml.html b/SeparateExamples/Cart/CartHtml.html new file mode 100644 index 0000000..3ff4a9f --- /dev/null +++ b/SeparateExamples/Cart/CartHtml.html @@ -0,0 +1,18 @@ + + + + + + +
+ +
+ + +
+

SomeItem

+ + +
\ No newline at end of file diff --git a/SeparateExamples/Cart/CartManager.js b/SeparateExamples/Cart/CartManager.js new file mode 100644 index 0000000..9ead889 --- /dev/null +++ b/SeparateExamples/Cart/CartManager.js @@ -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 ' + 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 = "
" + let ItemsInsideCart = CartItems[i].split("&"); + for (let Item = 0; Item < ItemsInsideCart.length; Item++) { + let Variable = ItemsInsideCart[Item].split("="); + ElementToDisplay += "

" + Variable[0] + ":

" + ElementToDisplay += "

 " + Variable[1] + "

"; + } + ElementToDisplay += '
'; + 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(); +} \ No newline at end of file diff --git a/SeparateExamples/Hamburger Menu/Hamburger.css b/SeparateExamples/Hamburger Menu/Hamburger.css new file mode 100644 index 0000000..64fe053 --- /dev/null +++ b/SeparateExamples/Hamburger Menu/Hamburger.css @@ -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*/ +} \ No newline at end of file diff --git a/SeparateExamples/Hamburger Menu/Hamburger.html b/SeparateExamples/Hamburger Menu/Hamburger.html new file mode 100644 index 0000000..bd87046 --- /dev/null +++ b/SeparateExamples/Hamburger Menu/Hamburger.html @@ -0,0 +1,16 @@ + + + +
+
+ + + +
+ +
+ \ No newline at end of file diff --git a/SeparateExamples/Hamburger Menu/Hamburger.js b/SeparateExamples/Hamburger Menu/Hamburger.js new file mode 100644 index 0000000..647732a --- /dev/null +++ b/SeparateExamples/Hamburger Menu/Hamburger.js @@ -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"); + } +} \ No newline at end of file diff --git a/StyleSheets/ExampleStructure.css b/StyleSheets/ExampleStructure.css new file mode 100644 index 0000000..2ac9709 --- /dev/null +++ b/StyleSheets/ExampleStructure.css @@ -0,0 +1,233 @@ +/*so you can see the structure of the page when body has the tag .debug*/ +.debug{ + *{ + outline: 1px black solid; + } +} +/*removing default styling for body and buttons*/ +*{ + box-sizing: border-box; + margin:0; + padding:0; + border:none; + background-color: transparent; +} +body{ + max-width: 100vw; + overflow-x:hidden; +} +/* child elements inside a flexbox with this class will be centered*/ +.Center{ + justify-content: center; +} +/* child elements inside a flexbox with this class will be separated as far apart as they can be*/ +.SpaceBetween{ + justify-content: space-between !important; /*Important overrides any other styles that set justify content*/ +} +.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; +} +.Title{ + font-size: 5vh; + font-family: Arial,serif; + font-weight: bolder; + text-align: center; +} +/* these allow elements to set their own alignment even within a flex box*/ +.AlignLeft{ + justify-self: flex-start; +} +.AlignRight{ + justify-self: flex-end; +} +/*sets the position of the navigation bar to the top of the page and makes*/ +.NavBarWrapper{ + position: fixed; + top:0; + left:0; + max-width:100vw; /*max width so it does not get wider than the viewport*/ + width: 100vw; + min-height: 7vh; /*min height so it can be dynamically re-sized*/ + padding: 0.5vh; +} +/* 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; +} + +/*Navigation classes*/ +.NavBarSection{ + min-width: 30%; + flex-wrap: nowrap; + margin:1vh; + padding:0; +} +.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*/ +} +/*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; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..38cec17 --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + Title + + + +
+
+ +

ExampleTitle

+
+
+
+
+ + + +
+ +
+
+
+
+
+

SomeItem

+ +
+
+

SomeItem1

+ +
+
+

SomeItem2

+ +
+
+

SomeItem3

+ +
+
+

SomeItem4

+ +
+
+ + + + \ No newline at end of file