From e24d93db8eca2b49aca0cd01dd71e3acf1823ee7 Mon Sep 17 00:00:00 2001 From: srishti Date: Fri, 11 Oct 2024 01:19:46 +0530 Subject: [PATCH 1/2] hamburger and progressbar implemented --- index.html | 2621 ++++++++++++++++++++++++++++------------------------ style.css | 11 +- 2 files changed, 1423 insertions(+), 1209 deletions(-) diff --git a/index.html b/index.html index 61fbe29..623314a 100644 --- a/index.html +++ b/index.html @@ -3,63 +3,77 @@ - - - - ArcticDelights - - + + + + ArcticDelights + + + - - - + + + - - + - + .tooltip-text { + display: none; + position: absolute; + bottom: 60px; + /* Position the tooltip above the button */ + right: 0; + background: rgba(0, 0, 0, 0.7); + color: white; + padding: 5px; + border-radius: 5px; + white-space: nowrap; + z-index: 1001; + /* Ensure tooltip is above other elements */ + } - - + + + - + + + - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - -
- - - -

ArcticDelights

- - - - -
-
- -
-
-
- - Light Mode -
-
- - -
-
-
    - -
    -
    -
    -
      - -
    -

    -
    Total:$0.00 -
    -

    - -
    -
    -
    -

    My Order

    -
    - -
    -
    - - -
    - -
    - + Circles +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + +
    + + + +

    ArcticDelights

    + + -
    - + +
    + +
    - -
    -
    -

    Taste the sweetness with every bite

    -

    Amazing ice creams delivered straight to you! Enjoy our fresh and chilled delights, made with love.

    - -
    -
    - - - - + + - - + - + - - - + - - - - - - - circles.forEach(function (circle, index) { - // Update the position and scale of each circle - circle.style.left = x - 12 + "px"; - circle.style.top = y - 12 + "px"; - circle.style.scale = (circles.length - index) / circles.length; - circle.x = x; - circle.y = y; + + + + - + circles.forEach(function (circle, index) { + // Update the position and scale of each circle + circle.style.left = x - 12 + "px"; + circle.style.top = y - 12 + "px"; + circle.style.scale = (circles.length - index) / circles.length; + + circle.x = x; + circle.y = y; + + // Get the next circle in the sequence + const nextCircle = circles[index + 1] || circles[0]; + x += (nextCircle.x - x) * 0.3; + y += (nextCircle.y - y) * 0.3; + }); - + // Repeat the animation + requestAnimationFrame(animateCircles); + } + + // Start the animation + animateCircles(); + + // Progress Bar + window.addEventListener('scroll', function () { + // Calculate the scroll progress + const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; + const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; + const scrollPercent = (scrollTop / scrollHeight) * 100; + + // Update the width of the progress bar + const progressBar = document.getElementById('progress-bar'); + progressBar.style.width = scrollPercent + '%'; + + // Add class when scrolled to the bottom + if (scrollPercent >= 100) { + progressBar.classList.add('full'); + } else { + progressBar.classList.remove('full'); + } + }); + + //Hamburger Functionality + const hamburger = document.getElementById('hamburger'); + const navbar = document.getElementById('navbar'); + + hamburger.addEventListener('click', () => { + navbar.classList.toggle('active'); // Toggle the 'active' class on the navbar + }); + + + + + \ No newline at end of file diff --git a/style.css b/style.css index 13e0a1f..5aeb493 100644 --- a/style.css +++ b/style.css @@ -55,6 +55,8 @@ body { section { padding: 2rem 7%; + position: relative; + top: 70px; } .btn { @@ -129,7 +131,6 @@ button:hover { /*Added css to make the My order button to look same as the rest of the nav buttons*/ #my-order-btn { border: none; - margin: 0px 0px 1px; font-size: 1.6rem; background-color: transparent !important; animation: none !important; @@ -533,6 +534,7 @@ button:hover { .home { min-height: 100vh; + min-width: 100vw; display: flex; align-items: center; background: url("https://images.unsplash.com/photo-1503438805992-a1f1bcaf6ec9") @@ -1016,7 +1018,8 @@ button:hover { .submit-button { margin-top: 1.5rem; /* Increased margin for spacing */ - padding: 1rem 2.5rem; /* Increased button padding */ + padding: 2rem 4rem; + margin: 2rem; font-size: 1.6rem; /* Increased font size */ color: #fff; /* White text */ background: linear-gradient( @@ -1152,10 +1155,6 @@ footer .credit { html { font-size: 55%; } - - .header { - padding: 1.5rem 2rem; - } } @media (max-width: 768px) { From 51ee27223c2b6dbe1b48492f094442201ef222d0 Mon Sep 17 00:00:00 2001 From: srishti Date: Thu, 17 Oct 2024 21:55:45 +0530 Subject: [PATCH 2/2] changes done --- index.html | 128 +++++++++++++++++++++++++++++------------------------ 1 file changed, 71 insertions(+), 57 deletions(-) diff --git a/index.html b/index.html index 2bac38d..408eda9 100644 --- a/index.html +++ b/index.html @@ -88,6 +88,11 @@ transform: scale(1.1); /* Scale up on hover */ } + .corner{ + display: flex; + align-items: center; + justify-content: center; + } .tooltip-text { display: none; position: absolute; @@ -121,7 +126,9 @@ align-items: center; z-index: 1000; } - +.home { + position: static; +} .popup-content { display: flex; background-color: white; @@ -274,64 +281,68 @@ @media (max-width: 980px) { .navbar { + display: none; + flex-direction: column; + background-color: #fff; + position: absolute; + top: 100%; + left: 0; + width: 100%; + padding: 1rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-height: 300px; /* Set max-height for scroll */ + overflow-y: auto; /* Enable vertical scroll */ + border-radius: 0 0 50px 50px; +} + +.header .navbar { + display: flex; + flex-direction: column; + background-color: var(--background-color); + position: absolute; + top: 100%; + left: 0; + width: 100%; + padding: 2rem; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transform: translateY(-900px); /* Start position above the view */ + opacity: 0; /* Initially hidden */ + transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition */ + max-height: 70vh; /* Set max-height for scroll */ + overflow-y: auto; /* Enable vertical scroll */ +} +.corner{ + flex-direction: column; +} - display: none; - flex-direction: column; - background-color: #fff; - /* or your desired color */ - position: absolute; - top: 100%; - left: 0; - width: 100%; - padding: 1rem; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } - - .header .navbar { - display: flex; - flex-direction: column; - background-color: var(--background-color); - position: absolute; - top: 100%; - left: 0; - width: 100%; - padding: 2rem; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - transform: translateY(-900px); - /* Start position above the view */ - opacity: 0; - /* Initially hidden */ - transition: transform 0.3s ease, opacity 0.3s ease; - /* Smooth transition for transform and opacity */ - } - - .header .navbar a { - padding: 3rem; - } +.header .navbar a { + padding: 3rem; + color: #f9657f; +} - .header .navbar.active { - transform: translateY(0); - /* Move to original position */ - opacity: 1; - /* Fade in */ - } +.header .navbar.active { + transform: translateY(0); /* Move to original position */ + opacity: 1; /* Fade in */ +} - .hamburger { - display: block; - } +.hamburger { + display: block; + font-size: x-large; +} - .navbar.active { - display: flex; - display: flex; - align-items: center; - } +.navbar.active { + display: flex; + flex-direction: column; + align-items: center; +} - .auth-btn { - padding: 2rem 4rem; - margin: 2rem; - } +.auth-btn { + padding: 2rem 4rem; + margin: 2rem; +} } + /* Progress Bar Styles */ #progress-bar { position: fixed; @@ -424,6 +435,7 @@
    +