Hopefully RSC
dugo3number2
parent
329f3cffda
commit
f52e551c79
|
|
@ -4,11 +4,12 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>About - Beacon Blend</title>
|
||||
<link rel="stylesheet" href="../assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Beacon Blend</h1>
|
||||
<nav class="top">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="..">Home</a></li>
|
||||
<li><a href="#" id="current">About</a></li>
|
||||
|
|
@ -17,18 +18,21 @@
|
|||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h2>About</h2>
|
||||
<main class="top">
|
||||
<h2 class="title">About</h2>
|
||||
<section>
|
||||
<h2>About LCS Beacon Blend</h2>
|
||||
<p>About paragraph here</p>
|
||||
<h2 class="title">About LCS Beacon Blend</h2>
|
||||
<div class="img-container center">
|
||||
<img src="../assets/img/coffee1.png" />
|
||||
</div>
|
||||
<p>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.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>About Lighthouse Christian School</h2>
|
||||
<p>About LCS paragraph here</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Images here</h2>
|
||||
<h2 class="title">About Lighthouse Christian School</h2>
|
||||
<div class="img-container center">
|
||||
<img src="../assets/img/ace.jpg" />
|
||||
</div>
|
||||
<p>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.</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
|
|
@ -44,5 +48,6 @@
|
|||
<span>©2024 Lighthouse Christian School</span><br />
|
||||
<span>Created for LCS and Student Conventions by David Jentes</span>
|
||||
</footer>
|
||||
<script src="../assets/js/navhide.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 388 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 MiB |
|
|
@ -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")
|
||||
}
|
||||
})
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -28,21 +28,21 @@
|
|||
</section>
|
||||
<section>
|
||||
<!-- Dates and hours -->
|
||||
<h2>Hours</h2>
|
||||
<h2 class="title">Hours</h2>
|
||||
<span>Monday-Friday mornings: 7:30-8:00</span><br />
|
||||
<span>Monday-Thursday afternoons: 1:00-1:30</span><br /><br />
|
||||
<h2>Upcoming dates</h2>
|
||||
<h2 class="title">Upcoming dates</h2>
|
||||
<ul>
|
||||
<li>March 25-29</li>
|
||||
<li>April 15-19</li>
|
||||
<li>May 6-10</li>
|
||||
</ul>
|
||||
<h2>Location</h2>
|
||||
<h2 class="title">Location</h2>
|
||||
<span>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!</span>
|
||||
</section>
|
||||
<section>
|
||||
<!-- New at the coffee shop -->
|
||||
<h2>What's new?</h2>
|
||||
<h2 class="title">What's new?</h2>
|
||||
<h2>Mocha</h2>
|
||||
<p>A latte with a mix of hot chocolate! Try it hot or iced with all your favorite add-ons!</p>
|
||||
<h2>Almond milk</h2>
|
||||
|
|
@ -51,12 +51,21 @@
|
|||
<p>Sugar-free hot chocolate and add-ons are here! Try some sugar-free vanilla or toasted marshmallow syrup in any drink today!</p>
|
||||
</section>
|
||||
<section>
|
||||
<!-- Images -->
|
||||
<h2>Images here</h2>
|
||||
<div class="flex">
|
||||
<div class="img-container">
|
||||
<img src="assets/img/coffee1.png" />
|
||||
</div>
|
||||
<div class="img-container">
|
||||
<img src="assets/img/coffee2.png" />
|
||||
</div>
|
||||
<div class="img-container">
|
||||
<img src="assets/img/machine.png" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<span>Beacon Blend</span>
|
||||
<span>Beacon Blend</span><br />
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="about">About</a></li>
|
||||
|
|
@ -66,5 +75,6 @@
|
|||
<span>©2024 Lighthouse Christian School</span><br />
|
||||
<span>Created for LCS and Student Conventions by David Jentes</span>
|
||||
</footer>
|
||||
<script src="assets/js/navhide.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Menu - Beacon Blend</title>
|
||||
<link rel="stylesheet" href="../assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -17,13 +18,13 @@
|
|||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Menu</h2>
|
||||
<main class="top">
|
||||
<h2 class="title">Menu</h2>
|
||||
<div class="button-container">
|
||||
<a href="order" class="button">Order online</a>
|
||||
</div>
|
||||
<section>
|
||||
<a href="order">Order online</a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>16oz Hot Drinks - $2.50 each</h2>
|
||||
<h2 class="title">16oz Hot Drinks - $2.50 each</h2>
|
||||
<ul>
|
||||
<li>Espresso (single or double)</li>
|
||||
<li>Latte</li>
|
||||
|
|
@ -32,17 +33,17 @@
|
|||
<li>Cappucino</li>
|
||||
<li>Hot Chocolate (available sugar-free)</li>
|
||||
</ul>
|
||||
<h2>16oz Cold Drinks - $2.50 each</h2>
|
||||
<h2 class="title">16oz Cold Drinks - $2.50 each</h2>
|
||||
<ul>
|
||||
<li>Iced Coffee (Espresso and Milk)</li>
|
||||
<li>Espresso (single or double)</li>
|
||||
<li>Latte</li>
|
||||
<li>Mocha</li>
|
||||
</ul>
|
||||
<h2>All drinks are available with whole or almond milk.</h2>
|
||||
<h2 class="title">All drinks are available with whole or almond milk.</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Syrups (with sugar)</h2>
|
||||
<h2 class="title">Syrups (with sugar)</h2>
|
||||
<ul>
|
||||
<li>Salted Caramel</li>
|
||||
<li>French Vanilla</li>
|
||||
|
|
@ -51,22 +52,26 @@
|
|||
<li>Pumpkin</li>
|
||||
<li>Peppermint</li>
|
||||
</ul>
|
||||
<h2>Syrups (sugar-free)</h2>
|
||||
<h2 class="title">Syrups (sugar-free)</h2>
|
||||
<ul>
|
||||
<li>Vanilla</li>
|
||||
<li>Toasted Marshmallow</li>
|
||||
</ul>
|
||||
<h2>Swirls</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2 class="title">Swirls</h2>
|
||||
<ul>
|
||||
<li>Mocha</li>
|
||||
<li>White Mocha</li>
|
||||
<li>Caramel</li>
|
||||
</ul>
|
||||
<h2>Whipped cream is available as an option for each drink.</h2>
|
||||
<h2 class="title">Whipped cream is available as an option for each drink.</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Sound good?</h2>
|
||||
<a href="order">Order online now!</a>
|
||||
<section class="extrapad">
|
||||
<h2 class="title">Sound good?</h2>
|
||||
<div class="button-container">
|
||||
<a href="order" class="button button-alt">Order online now!</a>
|
||||
</div><br />
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
|
|
@ -80,5 +85,6 @@
|
|||
<span>©2024 Lighthouse Christian School</span><br />
|
||||
<span>Created for LCS and Student Conventions by David Jentes</span>
|
||||
</footer>
|
||||
<script src="../assets/js/navhide.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Note to judges</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Note to judges</h1>
|
||||
<p>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!</p>
|
||||
<span>- David</span><br />
|
||||
<a href="order/index.html">Return to order page</a><br />
|
||||
<a href="index.html">Return to home</a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Order - Beacon Blend</title>
|
||||
<link rel="stylesheet" href="../assets/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
|
|
@ -17,90 +18,105 @@
|
|||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Order Online</h2>
|
||||
<section>
|
||||
<h2>Just want to browse the menu?</h2>
|
||||
<a href="menu">Menu</a>
|
||||
</section>
|
||||
<form>
|
||||
<section>
|
||||
<main class="top">
|
||||
<h2 class="title">Order Online</h2>
|
||||
<h2 class="title" id="menu1">Just want to browse the menu?</h2>
|
||||
<div class="button-container" id="menu2">
|
||||
<a href="menu" class="button">Menu</a>
|
||||
</div><br />
|
||||
<div class="button-container">
|
||||
<a href="../notetojudges.html" id="note">Note to judges about this page</a>
|
||||
</div>
|
||||
<form action="../notetojudges.html">
|
||||
<section id="step1">
|
||||
<h2>Your contact information</h2>
|
||||
<label for="name">Your name</label>
|
||||
<input type="text" name="name" id="name" />
|
||||
<label for="name">Your name</label><br />
|
||||
<input type="text" name="name" id="name" /><br /><br />
|
||||
<select id="phoneext" name="phoneext">
|
||||
<option value="ext">Contact A.C.E. phone extension</option>
|
||||
<option value="phone">Contact phone number</option>
|
||||
<option value="school">I am a student</option>
|
||||
</select>
|
||||
</select><br /><br />
|
||||
<div id="extDiv">
|
||||
<input type="number" size="4" name="ext" id="ext" />
|
||||
<input type="number" size="4" name="ext" id="ext" value="" />
|
||||
</div>
|
||||
<div id="phoneDiv">
|
||||
<div id="phoneDiv" class="hidden">
|
||||
<input type="tel" name="phone" id="phone" />
|
||||
</div>
|
||||
<a href="#">Next</a>
|
||||
</div><br /><br />
|
||||
<div class="button-container">
|
||||
<a href="#" class="button button-alt" id="step1next">Next</a>
|
||||
</div><br />
|
||||
</section>
|
||||
<section>
|
||||
<section id="step2" class="hidden">
|
||||
<h2>Your drink</h2>
|
||||
<h2>$2.50</h2>
|
||||
<h2>$2.50 - 16oz</h2>
|
||||
<select id="hoticed" name="hoticed">
|
||||
<option value="hot">Hot drinks</option>
|
||||
<option value="iced">Iced drinks</option>
|
||||
</select>
|
||||
</select><br /><br />
|
||||
<div id="hotDiv">
|
||||
<select id="hot" name="hot">
|
||||
<option value="espresso">Espresso</option>
|
||||
<option value="dblespresso">Double Espresso</option>
|
||||
<option value="latte">Latte</option>
|
||||
<option value="mocha">Mocha</option>
|
||||
<option value="americano">Americano</option>
|
||||
<option value="cappuccino">Cappuccino</option>
|
||||
<option value="americano">Americano</option>
|
||||
<option value="espresso">Espresso</option>
|
||||
<option value="dblespresso">Double Espresso</option>
|
||||
<option value="hotchoc">Hot Chocolate</option>
|
||||
<option value="sfhotchoc">Sugar-free Hot Chocolate</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="icedDiv">
|
||||
<div id="icedDiv" class="hidden">
|
||||
<select id="hot" name="hot">
|
||||
<option value="icedlatte">Iced Latte</option>
|
||||
<option value="icedcoffee">Iced Coffee (espresso and milk)</option>
|
||||
<option value="icedmocha">Iced Mocha</option>
|
||||
<option value="icedespresso">Iced Espresso</option>
|
||||
<option value="iceddblespresso">Iced Double Espresso</option>
|
||||
<option value="icedlatte">Iced Latte</option>
|
||||
<option value="icedmocha">Iced Mocha</option>
|
||||
</select>
|
||||
</div>
|
||||
<a href="#">Next</a>
|
||||
</div><br /><br />
|
||||
<div class="button-container">
|
||||
<a href="#" class="button button-alt" id="step2back">Back</a>
|
||||
<a href="#" class="button button-alt" id="step2next">Next</a>
|
||||
</div><br />
|
||||
</section>
|
||||
<section>
|
||||
<section id="step3" class="hidden">
|
||||
<h2>Your milk choice</h2>
|
||||
<select id="milk" name="milk">
|
||||
<option value="whole">Whole milk</option>
|
||||
<option value="almond">Almond milk</option>
|
||||
</select>
|
||||
<h2>Your add-ons</h2>
|
||||
<label><input type="checkbox" name="caramel" id="caramel" value="true" /> Salted Caramel</label><span id="caramelpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="caramelpumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="pecan" id="pecan" value="true" /> Butter Pecan</label><span id="pecanpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pecanpumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="pumpkin" id="pumpkin" value="true" /> Pumpkin</label><span id="pumpkinpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pumpkinpumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="sfvanilla" id="sfvanilla" value="true" /> Sugar-free Vanilla</label><span id="sfvanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfvanillapumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="hazelnut" id="hazelnut" value="true" /> Hazelnut</label><span id="hazelnutpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="hazelnutpumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="peppermint" id="peppermint" value="true" /> Peppermint</label><span id="peppermintpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="peppermintpumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="vanilla" id="vanilla" value="true" /> French Vanilla</label><span id="vanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="vanillapumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="sfmarshmallow" id="sfmarshmallow" value="true" /> Sugar-free Toasted Marshmallow</label><span id="sfmarshmallowpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfmarshmallowpumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="caramel" id="caramel" value="true" /> Salted Caramel</label><span id="caramelpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="caramelpumps" class="pumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="pecan" id="pecan" value="true" /> Butter Pecan</label><span id="pecanpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pecanpumps" class="pumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="pumpkin" id="pumpkin" value="true" /> Pumpkin</label><span id="pumpkinpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="pumpkinpumps" class="pumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="sfvanilla" id="sfvanilla" value="true" /> Sugar-free Vanilla</label><span id="sfvanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfvanillapumps" class="pumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="hazelnut" id="hazelnut" value="true" /> Hazelnut</label><span id="hazelnutpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="hazelnutpumps" class="pumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="peppermint" id="peppermint" value="true" /> Peppermint</label><span id="peppermintpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="peppermintpumps" class="pumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="vanilla" id="vanilla" value="true" /> French Vanilla</label><span id="vanillapumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="vanillapumps" class="pumps" /> pumps</span><br />
|
||||
<label><input type="checkbox" name="sfmarshmallow" id="sfmarshmallow" value="true" /> Sugar-free Toasted Marshmallow</label><span id="sfmarshmallowpumps" class="hidden"> - <input type="number" min="0.5" max="5" step="0.5" value="2" inputmode="decimal" required name="sfmarshmallowpumps" class="pumps" /> pumps</span><br /><br />
|
||||
<label><input type="checkbox" name="mocha" value="true"> Mocha Swirl</label><br />
|
||||
<label><input type="checkbox" name="whitemocha" value="true"> White Mocha Swirl</label><br />
|
||||
<label><input type="checkbox" name="caramels" value="true"> Caramel Swirl</label><br />
|
||||
<label><input type="checkbox" name="whippedcream" value="true"> Whipped Cream</label><br />
|
||||
<a href="#">Next</a>
|
||||
<label><input type="checkbox" name="whippedcream" value="true"> Whipped Cream</label><br /><br /><br />
|
||||
<div class="button-container">
|
||||
<a href="#" class="button button-alt" id="step3back">Back</a>
|
||||
<a href="#" class="button button-alt" id="step3next">Next</a>
|
||||
</div><br />
|
||||
</section>
|
||||
<section>
|
||||
<h2>Your payment</h2>
|
||||
<select name="payment" id="payment">
|
||||
<section id="step4" class="hidden">
|
||||
<label for="payment">Your payment</label><br />
|
||||
<select name="payment" id="payment" required>
|
||||
<option value="" default>Please select</option>
|
||||
<option value="cash">Cash - $2.50 for one</option>
|
||||
<option value="punchcard">Punchcard - $10 for five</option>
|
||||
</select>
|
||||
<h2>Special notes</h2>
|
||||
<input type="text" id="notes" name="notes" />
|
||||
<input type="submit" value="Place order" />
|
||||
</select><br /><br />
|
||||
<label for="notes">Special notes</label><br />
|
||||
<input type="text" id="notes" name="notes" /><br /><br />
|
||||
<div class="button-container">
|
||||
<a href="#" class="button button-alt" id="step4back">Back</a>
|
||||
<input type="submit" value="Place order" class="button button-alt" />
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
|
|
@ -114,5 +130,7 @@
|
|||
<span>©2024 Lighthouse Christian School</span><br />
|
||||
<span>Created for LCS and Student Conventions by David Jentes</span>
|
||||
</footer>
|
||||
<script src="../assets/js/navhide.js"></script>
|
||||
<script src="../assets/js/formhide.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue