Bella-Vista


[![Live Demo](https://img.shields.io/badge/🌐%20Live%20Demo-Visit%20Site-ca8a04?style=for-the-badge&labelColor=0f172a)](https://harshchoudhary2003.github.io/Bella-Vista) [![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/HTML) [![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)](https://developer.mozilla.org/en-US/docs/Web/CSS) [![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript) [![License](https://img.shields.io/badge/License-MIT-22c55e?style=for-the-badge)](./LICENSE)
> *Bella Vista v3.0* is a **hyper-advanced**, **production-ready**, and **visually cinematic** restaurant application. > Engineered with a high-end **glassmorphic design system** and **23 modular JavaScript engines**. > Pure. Performance-driven. Masterpiece.

✦ Evolutionary Preview (v3.0)

| 🖱️ Advanced Cursor | 📊 Visionary Stats | 🍽️ Smart Menu | |:---:|:---:|:---:| | Lag-ring following dot cursor with gold glow | Live ease-out counters with stagger reveal | Tabs + Dietary Filters (Veg/Vegan/GF) | | 🍷 Wine Sommelier | 🖼️ Infinite Gallery | 📅 Event VIP | |:---:|:---:|:---:| | Interactive pairing with animated metrics | Masonry grid + category-aware lightbox | Date-badged cards with reservation CTA | | 💬 Testimonials | 📬 Confetti Booking | 🌓 Localized State | |:---:|:---:|:---:| | Swipeable glass cards with auto-scroll | Canvas confetti burst on confirmation | Live Open/Closed status + Favorites Drawer |

🚀 The Feature Universe

┌──────────────────────────────────────────────────────────────────────────────┐
│  BELLA VISTA · VISIONARY UPGRADE (v3.0)                                      │
├────────────────────────────┬─────────────────────────────────────────────────┤
│  ELITE VISUALS             │  INTERACTIVE CAPABILITIES                       │
│  ✦ Glassmorphism v2 (HSLA) │  ✦ Particle Canvas Connect Network              │
│  ✦ Dynamic Blobs (3 Layer) │  ✦ Advanced Favourites System (Local Storage)   │
│  ✦ Gold Cursor lag-ring    │  ✦ Dietary Filter System (Veg/Vegan/GF)         │
│  ✦ Hero Parallax Engine    │  ✦ Interactive Wine Pairing (Bar Chart metrics) │
│  ✦ Shimmer Typography v2   │  ✦ Canvas Confetti Confirmation                 │
│                            │                                                 │
│  SMART MODULES             │  UX & PERFORMANCE                               │
│  ✦ Schedule-Aware Status   │  ✦ Scroll Progress Bar (Gold Tint)              │
│  ✦ Infinite Specials Marquee│  ✦ Section Dot Navigator (Scroll Sync)         │
│  ✦ Animated Stats Counters │  ✦ Magnetic Button Physics                      │
│  ✦ 3D Card Tilt + Shine    │  ✦ Newsletter Modal (Timed + Dismissible)       │
│  ✦ Masonry Gallery Filter  │  ✦ 100% Zero-Dependency (Vanilla JS/CSS)        │
└────────────────────────────┴─────────────────────────────────────────────────┘

🎨 Design DNA

Color Tokens

| Token | HSL-derived Hex | Application | |:------|:----------------|:------------| | `--bg` | `#020617` | Deep Space Background | | `--surface` | `rgba(255,255,255,0.04)` | Glass Card Surface | | `--accent` | `#ca8a04` | Venetian Gold | | `--accent-light` | `#fde047` | Florentine Shimmer | | `--text-1` | `#f8fafc` | Pure Alpine White | | `--status-open`| `#22c55e` | Live Emerald Glow |

Glassmorphism v3.0 Formula

.glass-vision-card {
  background:       rgba(255,255,255,0.04);
  backdrop-filter:  blur(24px) saturate(180%);
  border:           1px solid rgba(255,255,255,0.08);
  box-shadow:       0 20px 50px rgba(0,0,0,0.5);
  border-radius:    24px;
  transition:       all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

⚙️ The 23 JS Modules

# Engine Capability
1 Cursor Dot Coordinates tracking for the primary gold dot
2 Cursor Ring Physics-based lag follower for the outer ring
3 Scroll Progress Window-depth calculator for the top progress bar
4 Preloader SVG dash-array spinning plate manager
5 Particle Physics Bounding-box particle network with line distance checks
6 Hero Parallax Scroll-depth multiplier for the background hero layer
7 Navbar Engine Scrolled-state class toggler & padding injector
8 Mobile Burger 3-line hamburger transform loop for mobile nav
9 Status Manager Week-day schedule calculator for “Open/Closed” badge
10 Scroll Reveal IntersectionObserver logic with staggered fade-up
11 Stats Counter Recursive frame loop for ease-out count animation
12 Menu Tabs ID-based display switcher for categorized dishes
13 Dietary Filter Attribute-based filtering (Veg/Vegan/GF) with fade animations
14 3D Card Tilt Mouse-percent rotation matrix with perspective mapping
15 Card Shine Radial-gradient mask tracking for 3D light effects
16 Favourites CRUD logic for local storage favorites drawer
17 Wine Pairer JSON-based data injector for interactive sommelier
18 Wine Metrics Width-mapping for Bar, Tannin, and Acidity bars
19 Masonry Logic Multi-column grid auto-rows & span variant manager
20 Gallery Filter Category-based image culling (Ambiance/Dishes/Kitchen)
21 Confetti Engine Canvas-based particle burst with gravity physics
22 Magnetic Buttons Distance-based attractor for CTA elements
23 Newsletter Modal Session-aware timed modal with dismissal logic

🏗️ Technical Map

bella-vista/
│
├── index.html          ← 15+ sections (Hero, Specials Ticker, Favourites...)
├── styles.css          ← 1000+ lines (Glass System, 3D Physics, Marquee...)
└── script.js           ← 23 Self-contained Engine Modules

Advanced Sections

📱 Visionary Breakpoints

Breakpoint Intelligent Layout Re-map
> 1100px 4-Col Stats, 3-Col Chefs/Events, 4-Col Masonry
≤ 900px 2-Col Stats/Chefs, 2-Col Gallery, Tall cards disabled
≤ 768px Mobile Nav Overlay, Favorites mini-mode, 160px grid rows
≤ 500px Single-col Masonry, Hero text compression, Ticker compact

🎬 Cinematic Animations

Effect Tech Experience
Confetti Burst Canvas 2D Celebration feedback on form submission
Magnetic Attraction Lerped Transform Buttons “pull” towards the user’s cursor
Marquee Specials Keyframe CSS Infinite smooth drift of daily highlights
Stat Surge JS Frame Loop Target numbers “surge” into place on scroll
Shine Mask Radial Gradient Reflective “glass” light follows the mouse

👨‍💻 Visionary Author

**Harsh Choudhary** [![GitHub](https://img.shields.io/badge/GitHub-HarshChoudhary2003-181717?style=for-the-badge&logo=github)](https://github.com/HarshChoudhary2003) *Crafted with ☕, Venetian inspiration, and the speed of Light.*
**⭐ Experience the future of dining. Star this masterpiece.**