🎬 CineBook - Premium Movie Booking App

A modern, Single Page Application (SPA) for booking movie tickets, featuring a cinematic dark UI, 3D seat selection, and real-time state management using Vanilla JavaScript.

---

🌟 Overview

CineBook is a fully functional movie ticket booking platform designed to replicate the premium feel of a cinema theater. Built entirely with Vanilla JavaScript, it demonstrates advanced DOM manipulation, state persistence via LocalStorage, and complex CSS animations without relying on external frameworks.

🎨 Key Features

• ⚡ Single Page Application (SPA): Seamless navigation without page reloads.
• 🌑 Cinematic Dark Mode: Immersive UI with Glassmorphism and Neon accents.
• 💺 3D Seat Selection: Interactive theater layout with CSS 3D perspective.
• 💾 Data Persistence: Bookings and new movies are saved to LocalStorage (won't vanish on refresh).
• 🔍 Real-Time Search: Instant filtering of movies as you type.
• 🛡️ Secure Admin Panel: Protected dashboard to add new movies dynamically.
• 🔔 Toast Notifications: Custom non-intrusive alerts (replacing native browser alerts).

---

🛠️ Tech Stack

• Frontend: HTML5, CSS3 (Grid, Flexbox, Keyframes, Perspective)
• Logic: Vanilla JavaScript (ES6+, DOM API)
• Icons: FontAwesome 6
• Fonts: Google Fonts ('Outfit' & 'Inter')
• Storage: Browser LocalStorage API

---

🚀 Getting Started

Prerequisites

You only need a modern web browser (Chrome, Firefox, Edge). No Node.js or Database installation required.

---

🔐 Admin Credentials

To access the Admin Panel (click the "Admin" button in the header):

• Username: admin
• Password: 1234

---

🧠 Technical Highlights

This project was built to demonstrate mastery of core web technologies:

1. DOM Manipulation: Elements (Movies, Seats, Toasts) are created and destroyed dynamically using JavaScript.
2. Event Delegation: Efficient handling of seat clicks by attaching listeners to parent containers.
3. CSS 3D Transforms: The "Curved Screen" effect uses rotateX and perspective for depth.
4. State Management: A centralized state object tracks the current movie, time, date, and selected seats.

---

📂 Project Structure

CineBook/
├── index.html       # Main entry point (SPA Structure)
├── style.css        # All styling (Dark mode, animations, responsiveness)
├── app.js           # Core logic (Routing, LocalStorage, Event Handling)
└── README.md        # Project documentation