diff --git a/src/about/index.html b/src/about/index.html index ed8df11..f6e38fa 100644 --- a/src/about/index.html +++ b/src/about/index.html @@ -4,11 +4,12 @@ About - Beacon Blend +

Beacon Blend

-
-
-

About

+
+

About

-

About LCS Beacon Blend

-

About paragraph here

+

About LCS Beacon Blend

+
+ +
+

Beacon Blend is the coffee shop run by Lighthouse Christian School as a fundraiser. We serve many varieties of coffee with all of your favorite add-ons. All of our profit supports us to go to A.C.E.'s Regional and International Student Conventions. There, we compete in events in categories such as music, platform, athletics, art, photography, and more. The trip to ISC is where most of the money is spent because of the distance. We appreciate all of the support we receive through the coffee shop, and we aim to please all of our customers with the best service and quality we can.

-

About Lighthouse Christian School

-

About LCS paragraph here

-
-
-

Images here

+

About Lighthouse Christian School

+
+ +
+

Lighthouse Christian School is the model school of A.C.E. School of Tomorrow, located in the world headquarters. Although we are a small school, we make up for it with our unique personalities and interests, as well as our competition at convention. We have other fundraisers besides the coffee shop, like bake sales, vending machines, dinner nights, banquets, coupon cards, and more. All of this money helps us to go to RSC and ISC.

+ \ No newline at end of file diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 07df78c..a92b357 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -23,6 +23,7 @@ nav ul { list-style: none; display: inline-block; padding: 0; + transition: display 500ms; } nav li { @@ -45,10 +46,34 @@ nav a:hover { font-size: calc(1rem + 10px); } +.button { + text-decoration: none; + color: inherit; + padding: 15px; + background-color: #eed3b3; + border-radius: 20px; + font-size: 1rem; + transition: background-color 200ms; + border: none; + cursor: pointer; +} + +.button-container { + text-align: center; +} + +.button:hover { + background-color: #ddc2a2; +} + +.button-alt { + background-color: #ffe4c4; +} + body { background-color : #ffe4c4; color: #222222; - font-family: 'Libre Baskerville', sans-serif; + font-family: 'Libre Baskerville', s100ans-serif; margin: 0; } @@ -65,17 +90,42 @@ body { z-index: 10; } + .cover-tagline { font-size: 2rem; color: #dddddd; } +.flex { + display: flex; +} + +.img-container { + width: 33%; + margin: 10px; +} + +img { + width: 100%; + border-radius: 30px; +} + @media screen and (max-width: 950px) { .cover-tagline { margin: 25% 0; } } +@media screen and (max-width: 750px) { + .flex { + flex-direction: column; + } + .img-container { + width: 96.5%; + margin: 10px, 0; + } +} + @media screen and (max-width: 600px) { .cover-tagline { margin-top: 50%; @@ -83,5 +133,120 @@ body { } main { - margin: 30px; + margin: 10px; +} + +.top { + margin-top: 250px; +} + +section { + margin: 20px; + padding: 20px; + background-color: #eed3b3; + border-radius: 30px; +} + +footer { + text-align: center; +} + +footer ul { + list-style: none; + display: inline-block; + padding: 0; +} + +footer li { + display: inline-block; + padding: 0; +} + +footer a { + color: #000000; + font-weight: bolder; + text-decoration: none; +} + +.title { + text-align: center; +} + +.center { + text-align: center; +} + +.extrapad { + padding: 30px; +} + +form { + text-align: center; +} + +label { + text-align: center; + font-size: 20px; +} + +input { + border: 2px solid #222222; + font-size: 20px; + padding: 5px; + border-radius: 20px; + background-color: #ffe4c4; + font-family: inherit; + text-align: center; +} + +select { + border: 2px solid #222222; + font-size: 20px; + padding: 5px; + border-radius: 20px; + background-color: #ffe4c4; + font-family: inherit; + text-align: center; +} + +input[type=checkbox] { + width: 25px; + height: 25px; + background-color: #ffe4c4; + border-radius: 50%; + vertical-align: middle; + border: 2px solid #222222; + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + outline: none; + margin: 10px; +} + +input[type=checkbox]:checked { + background-color: #222222; +} + +.pumps { + width: 60px; +} + +#ext::-webkit-outer-spin-button, +#ext::-webkit-inner-spin-button { + -webkit-appearance: none; + appearance: none; +} + +#ext { + -moz-appearance: textfield; + appearance: textfield; +} + +.hidden { + display: none +} + +#note { + color: inherit; + font-weight: bolder; } \ No newline at end of file diff --git a/src/assets/img/ace.jpg b/src/assets/img/ace.jpg new file mode 100644 index 0000000..04e5ff0 Binary files /dev/null and b/src/assets/img/ace.jpg differ diff --git a/src/assets/img/coffee1.png b/src/assets/img/coffee1.png new file mode 100644 index 0000000..c445cc5 Binary files /dev/null and b/src/assets/img/coffee1.png differ diff --git a/src/assets/img/coffee2.png b/src/assets/img/coffee2.png new file mode 100644 index 0000000..cb42b36 Binary files /dev/null and b/src/assets/img/coffee2.png differ diff --git a/src/assets/img/machine.png b/src/assets/img/machine.png new file mode 100644 index 0000000..29f6ff9 Binary files /dev/null and b/src/assets/img/machine.png differ diff --git a/src/assets/js/formhide.js b/src/assets/js/formhide.js new file mode 100644 index 0000000..9cbe9a4 --- /dev/null +++ b/src/assets/js/formhide.js @@ -0,0 +1,161 @@ +const step1 = document.getElementById("step1") +const step2 = document.getElementById("step2") +const step3 = document.getElementById("step3") +const step4 = document.getElementById("step4") + +const menu1 = document.getElementById("menu1") +const menu2 = document.getElementById("menu2") + +const step1next = document.getElementById("step1next") +const step2back = document.getElementById("step2back") +const step2next = document.getElementById("step2next") +const step3back = document.getElementById("step3back") +const step3next = document.getElementById("step3next") +const step4back = document.getElementById("step4back") + +const phoneext = document.getElementById("phoneext") +const extDiv = document.getElementById("extDiv") +const phoneDiv = document.getElementById("phoneDiv") + +const hoticed = document.getElementById("hoticed") +const hotDiv = document.getElementById("hotDiv") +const icedDiv = document.getElementById("icedDiv") + +const caramel = document.getElementById("caramel"); +const pecan = document.getElementById("pecan"); +const pumpkin = document.getElementById("pumpkin"); +const sfvanilla = document.getElementById("sfvanilla"); +const hazelnut = document.getElementById("hazelnut"); +const peppermint = document.getElementById("peppermint"); +const vanilla = document.getElementById("vanilla"); +const sfmarshmallow = document.getElementById("sfmarshmallow"); + +const caramelPumps = document.getElementById("caramelpumps"); +const pecanPumps = document.getElementById("pecanpumps"); +const pumpkinPumps = document.getElementById("pumpkinpumps"); +const sfvanillaPumps = document.getElementById("sfvanillapumps"); +const hazelnutPumps = document.getElementById("hazelnutpumps"); +const peppermintPumps = document.getElementById("peppermintpumps"); +const vanillaPumps = document.getElementById("vanillapumps"); +const sfmarshmallowPumps = document.getElementById("sfmarshmallowpumps"); + +step1next.addEventListener("click", () => { + menu1.classList.add("hidden") + menu2.classList.add("hidden") + step1.classList.add("hidden") + step2.classList.remove("hidden") +}) + +step2back.addEventListener("click", () => { + menu1.classList.remove("hidden") + menu2.classList.remove("hidden") + step1.classList.remove("hidden") + step2.classList.add("hidden") +}) + +step2next.addEventListener("click", () => { + step2.classList.add("hidden") + step3.classList.remove("hidden") +}) + +step3back.addEventListener("click", () => { + step2.classList.remove("hidden") + step3.classList.add("hidden") +}) + +step3next.addEventListener("click", () => { + step3.classList.add("hidden") + step4.classList.remove("hidden") +}) + +step4back.addEventListener("click", () => { + step3.classList.remove("hidden") + step4.classList.add("hidden") +}) + +caramel.addEventListener("click", () => { + if (caramel.checked) { + caramelPumps.classList.remove("hidden"); + } else { + caramelPumps.classList.add("hidden"); + } +}); + +pecan.addEventListener("click", () => { + if (pecan.checked) { + pecanPumps.classList.remove("hidden"); + } else { + pecanPumps.classList.add("hidden"); + } +}); + +pumpkin.addEventListener("click", () => { + if (pumpkin.checked) { + pumpkinPumps.classList.remove("hidden"); + } else { + pumpkinPumps.classList.add("hidden"); + } +}); + +sfvanilla.addEventListener("click", () => { + if (sfvanilla.checked) { + sfvanillaPumps.classList.remove("hidden"); + } else { + sfvanillaPumps.classList.add("hidden"); + } +}); + +hazelnut.addEventListener("click", () => { + if (hazelnut.checked) { + hazelnutPumps.classList.remove("hidden"); + } else { + hazelnutPumps.classList.add("hidden"); + } +}); + +peppermint.addEventListener("click", () => { + if (peppermint.checked) { + peppermintPumps.classList.remove("hidden"); + } else { + peppermintPumps.classList.add("hidden"); + } +}); + +vanilla.addEventListener("click", () => { + if (vanilla.checked) { + vanillaPumps.classList.remove("hidden"); + } else { + vanillaPumps.classList.add("hidden"); + } +}); + +sfmarshmallow.addEventListener("click", () => { + if (sfmarshmallow.checked) { + sfmarshmallowPumps.classList.remove("hidden"); + } else { + sfmarshmallowPumps.classList.add("hidden"); + } +}); + +phoneext.addEventListener("change", () => { + if (phoneext.value == "ext") { + extDiv.classList.remove("hidden") + phoneDiv.classList.add("hidden") + } else if (phoneext.value == "phone") { + extDiv.classList.add("hidden") + phoneDiv.classList.remove("hidden") + } else { + extDiv.classList.add("hidden") + phoneDiv.classList.add("hidden") + } +}) + +hoticed.addEventListener("change", () => { + if (hoticed.value == "hot") { + hotDiv.classList.remove("hidden") + icedDiv.classList.add("hidden") + } else if (hoticed.value == "iced") { + hotDiv.classList.add("hidden") + icedDiv.classList.remove("hidden") + } +}) \ No newline at end of file diff --git a/src/assets/js/navhide.js b/src/assets/js/navhide.js new file mode 100644 index 0000000..9f5a406 --- /dev/null +++ b/src/assets/js/navhide.js @@ -0,0 +1,16 @@ +window.onscroll = () => { + navScroll() +} + +const nav = document.getElementsByTagName("nav")[0] +const h1 = document.getElementsByTagName("h1")[0] + +function navScroll() { + if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { + nav.classList.add("hidden"); + h1.style.fontSize = "20px" + } else { + nav.classList.remove("hidden"); + h1.style.fontSize = "2rem" + } +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index b9f0859..e9330e8 100644 --- a/src/index.html +++ b/src/index.html @@ -28,21 +28,21 @@
-

Hours

+

Hours

Monday-Friday mornings: 7:30-8:00
Monday-Thursday afternoons: 1:00-1:30

-

Upcoming dates

+

Upcoming dates

-

Location

+

Location

The coffee shop is located in the break room at A.C.E. School of Tomorrow headquarters. We may open the coffee shop at other locations or during other fundraisers, so keep an eye out here!
-

What's new?

+

What's new?

Mocha

A latte with a mix of hot chocolate! Try it hot or iced with all your favorite add-ons!

Almond milk

@@ -51,12 +51,21 @@

Sugar-free hot chocolate and add-ons are here! Try some sugar-free vanilla or toasted marshmallow syrup in any drink today!

- -

Images here

+
+
+ +
+
+ +
+
+ +
+
+ \ No newline at end of file diff --git a/src/menu/index.html b/src/menu/index.html index 2d73c2a..b68556f 100644 --- a/src/menu/index.html +++ b/src/menu/index.html @@ -4,6 +4,7 @@ Menu - Beacon Blend +
@@ -17,13 +18,13 @@
-
-

Menu

+
+

Menu

+
+ Order online +
- Order online -
-
-

16oz Hot Drinks - $2.50 each

+

16oz Hot Drinks - $2.50 each

  • Espresso (single or double)
  • Latte
    • @@ -32,17 +33,17 @@
  • Cappucino
  • Hot Chocolate (available sugar-free)
-

16oz Cold Drinks - $2.50 each

+

16oz Cold Drinks - $2.50 each

  • Iced Coffee (Espresso and Milk)
  • Espresso (single or double)
  • Latte
  • Mocha
-

All drinks are available with whole or almond milk.

+

All drinks are available with whole or almond milk.

-

Syrups (with sugar)

+

Syrups (with sugar)

  • Salted Caramel
  • French Vanilla
    • @@ -51,22 +52,26 @@
  • Pumpkin
  • Peppermint
-

Syrups (sugar-free)

+

Syrups (sugar-free)

  • Vanilla
  • Toasted Marshmallow
-

Swirls

+
+
+

Swirls

  • Mocha
  • White Mocha
  • Caramel
-

Whipped cream is available as an option for each drink.

+

Whipped cream is available as an option for each drink.

-
-

Sound good?

- Order online now! +
+

Sound good?

+
+ Order online now! +

+ \ No newline at end of file diff --git a/src/notetojudges.html b/src/notetojudges.html new file mode 100644 index 0000000..d5bfb5b --- /dev/null +++ b/src/notetojudges.html @@ -0,0 +1,15 @@ + + + + + + Note to judges + + +

Note to judges

+

The order page is disabled on this version of the site. I plan to use it to replace the current system I have created as it looks and works much better. This version, however, does not have the backend needed to process orders. This will go to an order placed screen in production. Also, thank you for all that you do to help judge our projects for convention! I really appreciate it!

+ - David
+ Return to order page
+ Return to home + + \ No newline at end of file diff --git a/src/order/index.html b/src/order/index.html index f812929..7368732 100644 --- a/src/order/index.html +++ b/src/order/index.html @@ -4,6 +4,7 @@ Order - Beacon Blend +
@@ -17,90 +18,105 @@
-
-

Order Online

-
-

Just want to browse the menu?

- Menu -
-
-
+
+

Order Online

+ +
+
+ Note to judges about this page +
+ +

Your contact information

- - +
+

+

- +
-
+ - Next +


+
+ Next +

-
+ -
+ -
-

Your payment

- + - -

Special notes

- - +

+
+

+
+ Back + +
@@ -114,5 +130,7 @@ ©2024 Lighthouse Christian School
Created for LCS and Student Conventions by David Jentes + + \ No newline at end of file