diff --git a/final/css/style.css b/final/css/style.css index 72bcb77..e6dd3b6 100644 --- a/final/css/style.css +++ b/final/css/style.css @@ -339,4 +339,167 @@ a { .start-order-off { background-color: #4f4f4f; opacity: 0.75; +} + +/* SECTION 4 */ + +.main-sect { + display: flex; + flex-direction: column; + gap: 20px; +} + +.main-nav { + display: grid; + grid-template-columns: 1fr 1fr; +} + +.main-icons { + width: 60px; + padding: 20px; + fill: #fa5000; +} + +.main-headline { + font-size: 5em; + padding-left: 20px; + margin: 0; +} + +.carousel { + position: relative; + z-index: 1; + height: 70vh; + margin-top: -70px; + pointer-events: none; + overflow: hidden; +} + +.carousel-item { + --items: 10; + --width: clamp(300px, 40vw, 400px); + --height: clamp(300px, 40vw, 400px); + --x: calc(var(--active) * 800%); + --y: calc(var(--active) * 200%); + --rot: calc(var(--active) * 120deg); + --opacity: calc(var(--zIndex) / var(--items) * 3 - 2); + position: absolute; + z-index: var(--zIndex); + width: var(--width); + height: var(--height); + margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5); + border-radius: 10px; + top: 50%; + left: 50%; + user-select: none; + transform-origin: 0% 100%; + pointer-events: all; + transform: translate(var(--x), var(--y)) rotate(var(--rot)) ; + transition: transform .8s cubic-bezier(0, 0.02, 0, 1); + background: transparent; + + .carousel-box { + position: absolute; + z-index: 1; + top: 0; + left: 0; + width: 100%; + height: 100%; + transition: opacity .8s cubic-bezier(0, 0.02, 0, 1); + opacity: var(--opacity); + display: grid; + grid-template-rows: 4fr 1fr; + } + + .carousel-text { + grid-row: 2; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 50px; + row-gap: 12px; + transition: all .2s ease; + } + + .carousel-hidden { + display: none; + } + + .title { + z-index: 1; + font-size: 2.5em; + grid-row: 1; + grid-column: 1 / -1; + justify-self: center; + align-self: flex-start; + margin: 0; + transition: opacity .8s cubic-bezier(0, 0.02, 0, 1); + } + + .num { + z-index: 1; + font-size: 2.5em; + grid-row: 2; + grid-column: 2; + justify-self: center; + align-self: flex-end; + margin: 0; + transition: opacity .8s cubic-bezier(0, 0.02, 0, 1); + } + + .carousel-btn { + grid-row: 2; + grid-column: 1; + background-color: #fa5000; + border-radius: 40px; + border: none; + font-size: 1.5em; + } + + img { + width: 100%; + height: 100%; + object-fit: cover; + pointer-events: none; + grid-row: 1; + justify-self: center; + align-self: center; + filter: drop-shadow(0px 0px 11px #0000006b); + } +} + +.layout { + position: absolute; + z-index: 0; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + + &:before { + content: ''; + position: absolute; + z-index: 1; + top: 0; + left: 90px; + width: 10px; + height: 100%; + border: 1px solid #fff; + border-top: none; + border-bottom: none; + opacity: .15; + } + + .box { + position: absolute; + bottom: 0; + left: 30px; + color: #fff; + transform-origin: 0% 10%; + transform: rotate(-90deg); + font-size: 9px; + line-height: 1.4; + text-transform: uppercase; + opacity: .4; + } } \ No newline at end of file diff --git a/final/images/peel.png b/final/images/peel.png new file mode 100644 index 0000000..7ecd5ae Binary files /dev/null and b/final/images/peel.png differ diff --git a/final/images/pie1.png b/final/images/pie1.png new file mode 100644 index 0000000..6bd93ba Binary files /dev/null and b/final/images/pie1.png differ diff --git a/final/images/pie2.png b/final/images/pie2.png new file mode 100644 index 0000000..2663401 Binary files /dev/null and b/final/images/pie2.png differ diff --git a/final/images/pie3.png b/final/images/pie3.png new file mode 100644 index 0000000..f5b82e9 Binary files /dev/null and b/final/images/pie3.png differ diff --git a/final/main.html b/final/main.html new file mode 100644 index 0000000..6e95ecc --- /dev/null +++ b/final/main.html @@ -0,0 +1,126 @@ + + + + + + Slice Haven + + + + +
+
+ + + + + + +
+

Find Your Pie!

+
+
+
+ +
+

Pepperoni

+

$12.50

+ +
+
+
+
+
+ +
+

Tomato & Onions

+

$13.50

+ +
+
+
+
+
+ +
+

Mushroom & Olives

+

$13.50

+ +
+
+
+
+
+ +
+

Pepperoni

+

$12.50

+ +
+
+
+
+
+ +
+

Tomato & Onions

+

$13.50

+ +
+
+
+
+
+ +
+

Mushroom & Olives

+

$13.50

+ +
+
+
+
+
+ +
+

Pepperoni

+

$12.50

+ +
+
+
+
+
+ +
+

Tomato & Onions

+

$13.50

+ +
+
+
+
+
+ +
+

Mushroom & Olives

+

$13.50

+ +
+
+
+
+
+ +
+

Pepperoni

+

$12.50

+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/final/script-temp.js b/final/script-temp.js new file mode 100644 index 0000000..b3e8cfe --- /dev/null +++ b/final/script-temp.js @@ -0,0 +1,102 @@ +/*-------------------- +Vars +--------------------*/ +let progress = 50; +let startX = 0; +let active = 0; +let isDown = false; + +/*-------------------- +Contants +--------------------*/ +const speedWheel = 0.02; +const speedDrag = -0.1; + +/*-------------------- +Get Z +--------------------*/ +const getZindex = (array, index) => (array.map((_, i) => (index === i) ? array.length : array.length - Math.abs(index - i))); + +/*-------------------- +Items +--------------------*/ +const $items = document.querySelectorAll('.carousel-item'); +const $cursors = document.querySelectorAll('.cursor'); + +const displayItems = (item, index, active) => { + const zIndex = getZindex([...$items], active)[index]; + item.style.setProperty('--zIndex', zIndex); + item.style.setProperty('--active', (index - active) / $items.length); + + // Fade in/out carousel-text based on active item + const carouselText = item.querySelector('.carousel-text'); + if (index === active) { + carouselText.style.opacity = '1'; + } else { + carouselText.style.opacity = '0'; + } +}; + +/*-------------------- +Animate +--------------------*/ +const animate = () => { + progress = Math.max(0, Math.min(progress, 100)); + active = Math.floor(progress / 100 * ($items.length - 1)); + + $items.forEach((item, index) => displayItems(item, index, active)); +}; +animate(); + +/*-------------------- +Click on Items +--------------------*/ +$items.forEach((item, i) => { + item.addEventListener('click', () => { + progress = (i / $items.length) * 100 + 10; + animate(); + }); +}); + +/*-------------------- +Handlers +--------------------*/ +const handleWheel = e => { + const wheelProgress = e.deltaY * speedWheel; + progress = progress + wheelProgress; + animate(); +}; + +const handleMouseMove = (e) => { + if (e.type === 'mousemove') { + $cursors.forEach(($cursor) => { + $cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; + }); + } + if (!isDown) return; + const x = e.clientX || (e.touches && e.touches[0].clientX) || 0; + const mouseProgress = (x - startX) * speedDrag; + progress = progress + mouseProgress; + startX = x; + animate(); +}; + +const handleMouseDown = e => { + isDown = true; + startX = e.clientX || (e.touches && e.touches[0].clientX) || 0; +}; + +const handleMouseUp = () => { + isDown = false; +}; + +/*-------------------- +Listeners +--------------------*/ +document.addEventListener('mousewheel', handleWheel); +document.addEventListener('mousedown', handleMouseDown); +document.addEventListener('mousemove', handleMouseMove); +document.addEventListener('mouseup', handleMouseUp); +document.addEventListener('touchstart', handleMouseDown); +document.addEventListener('touchmove', handleMouseMove); +document.addEventListener('touchend', handleMouseUp); diff --git a/final/script.js b/final/script.js index 19671b4..4f76001 100644 --- a/final/script.js +++ b/final/script.js @@ -7,6 +7,8 @@ document.addEventListener('DOMContentLoaded', function () { indexPage() } else if(location.href.includes("welcome.html")) { welcomePage() + } else if(this.location.href.includes("main.html")) { + mainPage() } }); @@ -47,6 +49,14 @@ function welcomePage(){ console.log(latitude, longitude) }) + startOrder.addEventListener('click', function() { + if (startOrder.classList.contains('start-order-off')) { + + } else { + window.location.href="main.html"; + } + }) + function geoCall(latitude, longitude) { const geocodingAPI = `https://geocode.maps.co/reverse?lat=${latitude}&lon=${longitude}&api_key=662080b3e8bb3517512538dtpd24bc9`; fetch(geocodingAPI) @@ -72,12 +82,88 @@ function welcomePage(){ } } +function mainPage() { + let progress = 50; + let startX = 0; + let active = 0; + let isDown = false; + + const speedWheel = 0.02; + const speedDrag = -0.1; + + const getZindex = (array, index) => (array.map((_, i) => (index === i) ? array.length : array.length - Math.abs(index - i))); + + const $items = document.querySelectorAll('.carousel-item'); + const $cursors = document.querySelectorAll('.cursor'); + + const displayItems = (item, index, active) => { + const zIndex = getZindex([...$items], active)[index]; + item.style.setProperty('--zIndex', zIndex); + item.style.setProperty('--active', (index - active) / $items.length); + + const carouselText = item.querySelector('.carousel-text'); + if (index === active) { + carouselText.style.opacity = '1'; + } else { + carouselText.style.opacity = '0'; + } + }; + + const animate = () => { + progress = Math.max(0, Math.min(progress, 100)); + active = Math.floor(progress / 100 * ($items.length - 1)); + + $items.forEach((item, index) => displayItems(item, index, active)); + }; + animate(); + + $items.forEach((item, i) => { + item.addEventListener('click', () => { + progress = (i / $items.length) * 100 + 10; + animate(); + }); + }); + + const handleWheel = e => { + const wheelProgress = e.deltaY * speedWheel; + progress = progress + wheelProgress; + animate(); + }; + + const handleMouseMove = (e) => { + if (e.type === 'mousemove') { + $cursors.forEach(($cursor) => { + $cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; + }); + } + if (!isDown) return; + const x = e.clientX || (e.touches && e.touches[0].clientX) || 0; + const mouseProgress = (x - startX) * speedDrag; + progress = progress + mouseProgress; + startX = x; + animate(); + }; + + const handleMouseDown = e => { + isDown = true; + startX = e.clientX || (e.touches && e.touches[0].clientX) || 0; + }; + + const handleMouseUp = () => { + isDown = false; + }; + + document.addEventListener('mousewheel', handleWheel); + document.addEventListener('mousedown', handleMouseDown); + document.addEventListener('mousemove', handleMouseMove); + document.addEventListener('mouseup', handleMouseUp); + document.addEventListener('touchstart', handleMouseDown); + document.addEventListener('touchmove', handleMouseMove); + document.addEventListener('touchend', handleMouseUp); +} + function submitForm(event) { console.log("submitForm working") event.preventDefault(); window.location.href="welcome.html"; -} - -// function toSignIn(){ -// window.location.href="sign-in.html" -// } \ No newline at end of file +} \ No newline at end of file