From fc1e32ac9753590eddf4eb3ef14257777ba3b1ae Mon Sep 17 00:00:00 2001 From: Akshi Date: Thu, 11 Jun 2026 12:50:07 +0530 Subject: [PATCH] feat: add empty state UI and logic for favorites page --- css/style.css | 908 +++++++++++++++++++++++---------------------- favorites.html | 11 +- img/EmptyPlate.png | Bin 0 -> 4922686 bytes js/main.js | 23 +- 4 files changed, 492 insertions(+), 450 deletions(-) create mode 100644 img/EmptyPlate.png diff --git a/css/style.css b/css/style.css index 832a43c..118c408 100644 --- a/css/style.css +++ b/css/style.css @@ -3081,443 +3081,473 @@ button:disabled { background: #e64a19; transform: scale(1.05); } -.combo-item-right { - display: flex; - align-items: center; - gap: 10px; -} -} - -/* ===== Cinematic Video Hero ===== */ -.hero { - position: relative; - width: 100%; - min-height: calc(100vh - var(--header-height, 90px)); - height: calc(100vh - var(--header-height, 90px)); - padding: 0 8%; - display: flex; - align-items: center; - justify-content: flex-start; - gap: 0; - flex-wrap: nowrap; - overflow: hidden; - margin-bottom: 0; - background: #130a06; - text-align: left; -} - -.hero-video-stage, -.hero-bg-video, -.hero-overlay { - position: absolute; - inset: 0; -} - -.hero-video-stage { - z-index: 1; - background: #130a06; - overflow: hidden; -} - -.hero-video, -.hero-bg-video { - width: 100%; - height: 100%; - object-fit: cover; - opacity: 0; - transform: scale(1.04); - transition: opacity 1.25s ease, transform 7s ease; - will-change: opacity, transform; -} - -.hero-bg-video.active { - opacity: 1; - transform: scale(1); -} - -.hero-overlay { - z-index: 2; - background: linear-gradient( - 90deg, - rgba(0, 0, 0, 0.70) 0%, - rgba(0, 0, 0, 0.45) 45%, - rgba(0, 0, 0, 0.20) 100% - ); -} - -.hero-content { - position: relative; - z-index: 3; - flex: 0 0 min(650px, 52vw); - max-width: 650px; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: flex-start; - margin: 0; - text-align: left; - color: #ffffff; -} - -.hero-badge, -.hero-secondary-btn, -.hero-stat-card { - background: rgba(255, 255, 255, 0.12); - border: 1px solid rgba(255, 255, 255, 0.22); - backdrop-filter: blur(18px); - -webkit-backdrop-filter: blur(18px); - box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); -} - -.hero-badge { - display: inline-flex; - align-items: center; - gap: 0.55rem; - width: fit-content; - margin-bottom: 1.4rem; - padding: 0.62rem 1rem; - border-radius: 999px; - color: rgba(255, 255, 255, 0.94); - font-size: 0.95rem; - font-weight: 700; - animation: heroFadeUp 0.75s ease both; -} - -.hero-title, -.hero-content h1 { - margin: 0 0 1.35rem; - color: #ffffff; - font-size: clamp(2.75rem, 4.4vw, 4.75rem); - font-weight: 800; - line-height: 1.05; - text-shadow: 0 8px 34px rgba(0, 0, 0, 0.52); - letter-spacing: 0; - animation: heroFadeUp 0.85s ease 0.08s both; -} - -.hero-content p { - max-width: 550px; - margin: 0; - color: rgba(255, 255, 255, 0.85); - font-size: 1.1rem; - font-weight: 500; - line-height: 1.8; - text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); - animation: heroFadeUp 0.85s ease 0.2s both; -} - -.hero-actions { - display: flex; - align-items: center; - justify-content: flex-start; - gap: 20px; - flex-wrap: wrap; - margin-top: 30px; - animation: heroFadeUp 0.85s ease 0.4s both; -} - -.hero-primary-btn, -.hero-secondary-btn { - min-width: 154px; - min-height: 54px; - display: inline-flex; - align-items: center; - justify-content: center; - border-radius: 999px; - padding: 0.95rem 1.65rem; - font-size: 1rem; - font-weight: 800; - line-height: 1; - transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; -} - -.hero-primary-btn { - background: linear-gradient(135deg, #ff5a1f 0%, #ff7a1f 100%); - color: #ffffff; - box-shadow: 0 18px 42px rgba(255, 90, 31, 0.38); -} - -.hero-primary-btn:hover, -.hero-primary-btn:focus-visible { - background: linear-gradient(135deg, #ff7a1f 0%, #ff5a1f 100%); - transform: translate3d(0, -3px, 0); - box-shadow: 0 24px 52px rgba(255, 90, 31, 0.5); -} - -.hero-secondary-btn { - color: #ffffff; - border-color: rgba(255, 255, 255, 0.46); -} - -.hero-secondary-btn:hover, -.hero-secondary-btn:focus-visible { - transform: translate3d(0, -3px, 0); - border-color: rgba(255, 255, 255, 0.75); - box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28); -} - -.hero-stats { - position: absolute; - z-index: 3; - top: 50%; - right: 8%; - width: 300px; - min-width: 0; - height: 370px; - transform: translateY(-50%); - pointer-events: none; -} - -.hero-stat-card { - position: absolute; - width: 230px; - min-width: 0; - display: flex; - align-items: center; - gap: 0.8rem; - padding: 0.95rem 1.05rem; - border-radius: 18px; - color: #ffffff; - animation: heroFloat 5.5s ease-in-out infinite; - will-change: transform; -} - -.hero-stat-card strong { - display: block; - color: #ffffff; - font-size: 1.1rem; - line-height: 1.1; -} - -.hero-stat-card span:last-child { - color: rgba(255, 255, 255, 0.78); - font-size: 0.9rem; - font-weight: 700; -} - -.hero-stat-icon { - width: 42px; - height: 42px; - display: inline-flex; - align-items: center; - justify-content: center; - flex: 0 0 42px; - border-radius: 50%; - background: rgba(255, 122, 31, 0.2); -} - -.hero-stat-rating { - top: 0; - right: 0; -} - -.hero-stat-delivery { - top: 130px; - right: 58px; - animation-delay: 0.8s; -} - -.hero-stat-orders { - top: 260px; - right: 0; - animation-delay: 1.6s; -} - -.hero-scroll-indicator { - position: absolute; - z-index: 3; - left: 50%; - bottom: 2rem; - width: 28px; - height: 46px; - display: inline-flex; - justify-content: center; - border: 1.5px solid rgba(255, 255, 255, 0.72); - border-radius: 999px; - transform: translateX(-50%); -} - -.hero-scroll-indicator span { - width: 5px; - height: 5px; - margin-top: 9px; - border-radius: 50%; - background: #ffffff; - animation: heroScrollDot 1.6s ease-in-out infinite; -} - -body.dark .hero { - background: #130a06; - color: #ffffff; -} - -body.dark .hero-content h1, -body.dark .hero-content p { - color: #ffffff; -} - -body.dark .hero-content p { - color: rgba(255, 255, 255, 0.85); -} - -.specials, -.menu, -.specials-section, -.menu-section { - position: relative; - z-index: 5; -} - -@keyframes heroFadeUp { - from { - opacity: 0; - transform: translate3d(0, 26px, 0); - } - - to { - opacity: 1; - transform: translate3d(0, 0, 0); - } -} - -@keyframes heroFloat { - 0%, - 100% { - transform: translate3d(0, 0, 0); - } - - 50% { - transform: translate3d(0, -14px, 0); - } -} - -@keyframes heroScrollDot { - 0% { - opacity: 0; - transform: translateY(0); - } - - 35% { - opacity: 1; - } - - 100% { - opacity: 0; - transform: translateY(20px); - } -} - -@media (max-width: 1024px) { - .hero { - padding: 0 6%; - } - - .hero-stats { - right: 4%; - opacity: 0.92; - } -} - -@media (max-width: 768px) { - .hero { - min-height: calc(100vh - var(--header-height, 90px)); - height: auto; - padding: 3.5rem 1.25rem 4.5rem; - align-items: center; - justify-content: center; - text-align: center; - flex-direction: column; - } - - .hero-overlay { - background: linear-gradient( - 180deg, - rgba(0, 0, 0, 0.62) 0%, - rgba(0, 0, 0, 0.46) 48%, - rgba(0, 0, 0, 0.66) 100% - ); - } - - .hero-content { - max-width: 100%; - height: auto; - margin: 0 auto; - } - - .hero-badge, - .hero-actions { - margin-left: auto; - margin-right: auto; - } - - .hero-title, - .hero-content h1 { - font-size: clamp(2.45rem, 11vw, 3.65rem); - line-height: 1.05; - } - - .hero-content p { - margin-left: auto; - margin-right: auto; - font-size: 1.02rem; - line-height: 1.7; - } - - .hero-actions { - flex-direction: column; - width: min(100%, 360px); - } - - .hero-primary-btn, - .hero-secondary-btn { - width: 100%; - } - - .hero-stats { - position: relative; - top: auto; - right: auto; - width: min(100%, 360px); - min-width: 0; - margin: 2.2rem auto 0; - transform: none; - display: grid; - gap: 0.7rem; - } - - .hero-stat-card { - position: static; - min-width: 0; - width: 100%; - justify-content: flex-start; - border-radius: 16px; - animation-duration: 4.8s; - } -} - -@media (max-width: 480px) { - .hero { - padding-left: 1rem; - padding-right: 1rem; - } - - .hero-badge { - font-size: 0.82rem; - padding: 0.55rem 0.82rem; - } -} - -@media (prefers-reduced-motion: reduce) { - .hero-bg-video, - .hero-badge, - .hero-content h1, - .hero-content p, - .hero-actions, - .hero-stat-card, - .hero-scroll-indicator span { - animation: none !important; - transition: none !important; - } -} +.combo-item-right { + display: flex; + align-items: center; + gap: 10px; +} +} + +/* ===== Cinematic Video Hero ===== */ +.hero { + position: relative; + width: 100%; + min-height: calc(100vh - var(--header-height, 90px)); + height: calc(100vh - var(--header-height, 90px)); + padding: 0 8%; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 0; + flex-wrap: nowrap; + overflow: hidden; + margin-bottom: 0; + background: #130a06; + text-align: left; +} + +.hero-video-stage, +.hero-bg-video, +.hero-overlay { + position: absolute; + inset: 0; +} + +.hero-video-stage { + z-index: 1; + background: #130a06; + overflow: hidden; +} + +.hero-video, +.hero-bg-video { + width: 100%; + height: 100%; + object-fit: cover; + opacity: 0; + transform: scale(1.04); + transition: opacity 1.25s ease, transform 7s ease; + will-change: opacity, transform; +} + +.hero-bg-video.active { + opacity: 1; + transform: scale(1); +} + +.hero-overlay { + z-index: 2; + background: linear-gradient( + 90deg, + rgba(0, 0, 0, 0.70) 0%, + rgba(0, 0, 0, 0.45) 45%, + rgba(0, 0, 0, 0.20) 100% + ); +} + +.hero-content { + position: relative; + z-index: 3; + flex: 0 0 min(650px, 52vw); + max-width: 650px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin: 0; + text-align: left; + color: #ffffff; +} + +.hero-badge, +.hero-secondary-btn, +.hero-stat-card { + background: rgba(255, 255, 255, 0.12); + border: 1px solid rgba(255, 255, 255, 0.22); + backdrop-filter: blur(18px); + -webkit-backdrop-filter: blur(18px); + box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); +} + +.hero-badge { + display: inline-flex; + align-items: center; + gap: 0.55rem; + width: fit-content; + margin-bottom: 1.4rem; + padding: 0.62rem 1rem; + border-radius: 999px; + color: rgba(255, 255, 255, 0.94); + font-size: 0.95rem; + font-weight: 700; + animation: heroFadeUp 0.75s ease both; +} +.hero-title, +.hero-content h1 { + margin: 0 0 1.35rem; + color: #ffffff; + font-size: clamp(2.75rem, 4.4vw, 4.75rem); + font-weight: 800; + line-height: 1.05; + text-shadow: 0 8px 34px rgba(0, 0, 0, 0.52); + letter-spacing: 0; + animation: heroFadeUp 0.85s ease 0.08s both; +} + +.hero-content p { + max-width: 550px; + margin: 0; + color: rgba(255, 255, 255, 0.85); + font-size: 1.1rem; + font-weight: 500; + line-height: 1.8; + text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); + animation: heroFadeUp 0.85s ease 0.2s both; +} + +.hero-actions { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 20px; + flex-wrap: wrap; + margin-top: 30px; + animation: heroFadeUp 0.85s ease 0.4s both; +} + +.hero-primary-btn, +.hero-secondary-btn { + min-width: 154px; + min-height: 54px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 999px; + padding: 0.95rem 1.65rem; + font-size: 1rem; + font-weight: 800; + line-height: 1; + transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; +} + +.hero-primary-btn { + background: linear-gradient(135deg, #ff5a1f 0%, #ff7a1f 100%); + color: #ffffff; + box-shadow: 0 18px 42px rgba(255, 90, 31, 0.38); +} + +.hero-primary-btn:hover, +.hero-primary-btn:focus-visible { + background: linear-gradient(135deg, #ff7a1f 0%, #ff5a1f 100%); + transform: translate3d(0, -3px, 0); + box-shadow: 0 24px 52px rgba(255, 90, 31, 0.5); +} + +.hero-secondary-btn { + color: #ffffff; + border-color: rgba(255, 255, 255, 0.46); +} + +.hero-secondary-btn:hover, +.hero-secondary-btn:focus-visible { + transform: translate3d(0, -3px, 0); + border-color: rgba(255, 255, 255, 0.75); + box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28); +} + +.hero-stats { + position: absolute; + z-index: 3; + top: 50%; + right: 8%; + width: 300px; + min-width: 0; + height: 370px; + transform: translateY(-50%); + pointer-events: none; +} + +.hero-stat-card { + position: absolute; + width: 230px; + min-width: 0; + display: flex; + align-items: center; + gap: 0.8rem; + padding: 0.95rem 1.05rem; + border-radius: 18px; + color: #ffffff; + animation: heroFloat 5.5s ease-in-out infinite; + will-change: transform; +} + +.hero-stat-card strong { + display: block; + color: #ffffff; + font-size: 1.1rem; + line-height: 1.1; +} + +.hero-stat-card span:last-child { + color: rgba(255, 255, 255, 0.78); + font-size: 0.9rem; + font-weight: 700; +} + +.hero-stat-icon { + width: 42px; + height: 42px; + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 42px; + border-radius: 50%; + background: rgba(255, 122, 31, 0.2); +} + +.hero-stat-rating { + top: 0; + right: 0; +} + +.hero-stat-delivery { + top: 130px; + right: 58px; + animation-delay: 0.8s; +} + +.hero-stat-orders { + top: 260px; + right: 0; + animation-delay: 1.6s; +} + +.hero-scroll-indicator { + position: absolute; + z-index: 3; + left: 50%; + bottom: 2rem; + width: 28px; + height: 46px; + display: inline-flex; + justify-content: center; + border: 1.5px solid rgba(255, 255, 255, 0.72); + border-radius: 999px; + transform: translateX(-50%); +} + +.hero-scroll-indicator span { + width: 5px; + height: 5px; + margin-top: 9px; + border-radius: 50%; + background: #ffffff; + animation: heroScrollDot 1.6s ease-in-out infinite; +} + +body.dark .hero { + background: #130a06; + color: #ffffff; +} + +body.dark .hero-content h1, +body.dark .hero-content p { + color: #ffffff; +} + +body.dark .hero-content p { + color: rgba(255, 255, 255, 0.85); +} + +.specials, +.menu, +.specials-section, +.menu-section { + position: relative; + z-index: 5; +} + +@keyframes heroFadeUp { + from { + opacity: 0; + transform: translate3d(0, 26px, 0); + } + + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +@keyframes heroFloat { + 0%, + 100% { + transform: translate3d(0, 0, 0); + } + + 50% { + transform: translate3d(0, -14px, 0); + } +} + +@keyframes heroScrollDot { + 0% { + opacity: 0; + transform: translateY(0); + } + + 35% { + opacity: 1; + } + + 100% { + opacity: 0; + transform: translateY(20px); + } +} + +@media (max-width: 1024px) { + .hero { + padding: 0 6%; + } + + .hero-stats { + right: 4%; + opacity: 0.92; + } +} + +@media (max-width: 768px) { + .hero { + min-height: calc(100vh - var(--header-height, 90px)); + height: auto; + padding: 3.5rem 1.25rem 4.5rem; + align-items: center; + justify-content: center; + text-align: center; + flex-direction: column; + } + + .hero-overlay { + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0.62) 0%, + rgba(0, 0, 0, 0.46) 48%, + rgba(0, 0, 0, 0.66) 100% + ); + } + + .hero-content { + max-width: 100%; + height: auto; + margin: 0 auto; + } + + .hero-badge, + .hero-actions { + margin-left: auto; + margin-right: auto; + } + + .hero-title, + .hero-content h1 { + font-size: clamp(2.45rem, 11vw, 3.65rem); + line-height: 1.05; + } + + .hero-content p { + margin-left: auto; + margin-right: auto; + font-size: 1.02rem; + line-height: 1.7; + } + + .hero-actions { + flex-direction: column; + width: min(100%, 360px); + } + + .hero-primary-btn, + .hero-secondary-btn { + width: 100%; + } + + .hero-stats { + position: relative; + top: auto; + right: auto; + width: min(100%, 360px); + min-width: 0; + margin: 2.2rem auto 0; + transform: none; + display: grid; + gap: 0.7rem; + } + + .hero-stat-card { + position: static; + min-width: 0; + width: 100%; + justify-content: flex-start; + border-radius: 16px; + animation-duration: 4.8s; + } +} + +@media (max-width: 480px) { + .hero { + padding-left: 1rem; + padding-right: 1rem; + } + + .hero-badge { + font-size: 0.82rem; + padding: 0.55rem 0.82rem; + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-bg-video, + .hero-badge, + .hero-content h1, + .hero-content p, + .hero-actions, + .hero-stat-card, + .hero-scroll-indicator span { + animation: none !important; + transition: none !important; + } +} +.empty-favorites { + display: flex; + align-items:center; + justify-content:center; + flex-direction:column; + padding: 3rem 4rem; + text-align: center; + h2{ + color:#dc6337; + margin-bottom: 0.2rem; + font-size:largest; + font-weight: 700; + } + p{ + margin-bottom: 2rem; + font-size: 1rem; + color:#5d4037; + line-height: 1.6; + max-width: 420px + } + img{ + opacity:1.2; + background-color:#2a2a2a; + margin-bottom: 1.2rem; + height: 300px; + width: 350px; + border-radius: 12px; + border: 1px solid #fbe9e7; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); + } +} diff --git a/favorites.html b/favorites.html index 1da4b9a..7f0d1f2 100644 --- a/favorites.html +++ b/favorites.html @@ -11,6 +11,7 @@ + @@ -66,9 +67,15 @@

My Favorites

- + +
+ Empty plate Icon +

No Favorites Yet!

+

Start adding your favorite dishes to see them here!

+ Explore Smart Combos +
- +