Skip to content

summarize.md

Latest commit

 

History

History
47 lines (35 loc) · 2.26 KB

summarize.md

File metadata and controls

47 lines (35 loc) · 2.26 KB
Raw

Bite Me — Project Summary

Welcome to the Bite Me burger website documentation. This document provides a detailed overview of the website's features, technical architecture, and structure.

🍔 Project Overview

Bite Me is a high-end, responsive single-page web application designed for a premium burger joint. It offers users a seamless browsing experience where they can explore the menu, customize orders, add delivery details, and send their complete orders directly to WhatsApp.

✨ Features

  1. Interactive Menu:

    • Categorized filter tabs (All, Classic, Cheesy, Spicy, Combos).
    • Animated cards with hover effects (tilt, scale, and rotations).

  2. Built-in Cart System:

    • Real-time cart calculations (subtotal and total prices).
    • Delivery details modal containing Fields for Name, Address, Phone, and Alt Phone (stored for convenience).
    • WhatsApp Checkout: Sends a beautifully formatted text order to WhatsApp (+92 339 9989928) with items list, totals, and delivery info.

  3. Progressive Web App (PWA):

    • Serviced by sw.js for offline functionality.
    • PWA installation prompt custom banner/modal for installing on Android, iOS, or Desktop.

  4. Rich Visual Design:

    • Cream-colored aesthetic with striking red accents.
    • Subtle background noise (grain texture) and floating food icon animations.
    • Smooth marquees and scroll reveal transitions.

🛠️ Technical Stack

  • Frontend Framework: Vanilla HTML5 & JavaScript
  • Styling: Tailwind CSS (via CDN) & Custom Vanilla CSS Custom Properties (Variables)
  • Fonts: Google Fonts (Fraunces for headings, Plus Jakarta Sans for UI elements)
  • PWA Features: Web App Manifest (manifest.json) & Service Worker (sw.js)

📂 File Directory Structure

  • index.html — The main landing page, structural components, custom styling block, and script logic.
  • manifest.json — PWA configuration containing application name, icons, and theme colors.
  • sw.js — Service worker for offline resource caching.
  • images/ — Directory containing assets like the app icons and burger illustrations.
  • readme.txt — Basic introduction and highlights of the project.
  • summarize.md — Detailed summary and architecture of the application.