A comprehensive web application for Celebrate! Cinema that enables members to:
- Book tickets for upcoming movies at theater locations statewide and nationwide
- Rent or buy movies for pickup at locations or streaming online
- Browse theater locations with amenities
- Search and filter movies by genre
- Manage bookings with an intuitive interface
- Browse currently showing movies
- Search movies by title
- Filter by genre (Action, Comedy, Drama, Horror, Sci-Fi, Romance)
- Select theater location (statewide or nationwide)
- Choose date, time, and number of tickets
- Multiple ticket types: Adult, Child, Senior, Student
- Real-time price calculation
- Extensive library of movies available for rent or purchase
- Two delivery options:
- Stream Online: Instant access to watch anywhere
- Pick Up: Reserve at your nearest theater location
- Flexible pricing for rental (48-hour access) or permanent purchase
- Multiple locations across Michigan (Statewide)
- Nationwide expansion in major cities
- Detailed theater information including:
- Number of screens
- Premium amenities (IMAX, Dolby Atmos, 4DX, etc.)
- Complete addresses
- Filter theaters by location type
- Fully responsive layout for desktop, tablet, and mobile devices
- Mobile-friendly navigation
- Optimized touch interactions
- Adaptive grid layouts
- Clone or download this project
- Open the folder in your preferred code editor
- Open
index.htmlin a web browser
No build process or dependencies required - this is a pure HTML, CSS, and JavaScript application!
movie-app/
│
├── index.html # Main HTML structure
├── styles.css # All styling and responsive design
├── script.js # Application logic and interactivity
└── README.md # This file
- Navigate to the "Now Showing" section
- Browse available movies or use search/filter
- Click "Book Now" on your chosen movie
- Select theater, date, time, and ticket quantity
- Confirm your booking
- Go to the "Rent or Buy" section
- Choose between "Stream Online" or "Pick Up" tab
- Click "View Options" on any movie
- Select either Rent (48-hour access) or Buy (permanent)
- Choose delivery method (stream or pickup)
- Complete your transaction
- Click on "Theaters" in the navigation
- Use filter buttons to view:
- All Locations
- Statewide (Michigan locations)
- Nationwide (locations across the US)
- View detailed information about each theater
The app includes sample data for:
- 6 Theater Locations: 3 statewide (MI) and 3 nationwide
- 6 Now Showing Movies: Various genres with ratings
- 6 Rental/Purchase Movies: Available for both stream and pickup
Edit the theaters array in script.js:
{
id: 7,
name: "Your Theater Name",
location: "City, State",
address: "Full Address",
type: "statewide" or "nationwide",
screens: 12,
amenities: ["IMAX", "Reclining Seats"]
}Edit the movies or rentalMovies arrays in script.js:
{
id: 7,
title: "Movie Title",
genre: "action",
rating: 8.5,
runtime: "120 min",
poster: "image-url",
description: "Movie description"
}Edit CSS variables in styles.css:
:root {
--primary-color: #e50914; /* Main brand color */
--secondary-color: #ff6b6b; /* Accent color */
/* ... more variables */
}- HTML5: Semantic structure
- CSS3: Modern styling with Grid and Flexbox
- JavaScript (ES6+): Dynamic functionality
- Font Awesome: Icons
- Unsplash: Sample images (placeholder)
- Chrome (recommended)
- Firefox
- Safari
- Edge
- Mobile browsers
Potential features for future versions:
- User authentication and account management
- Payment processing integration
- Seat selection interface
- Movie trailers and reviews
- Email confirmation system
- Loyalty rewards program
- Advanced filtering (by rating, release date)
- Social sharing features
This project is for demonstration purposes. Feel free to use and modify for your own projects.
For questions or support, contact Celebrate! Cinema customer service.
Enjoy your movie experience with Celebrate! Cinema! 🍿🎬