String Master Puppetry

A comprehensive static web experience for puppet enthusiasts, performers, and creators.

Overview

String Master Puppetry is a responsive, client-side web application celebrating the art of puppetry. It features live show bookings, interactive shopping, detailed tutorials across puppet styles, and innovative projects blending tradition with technology.

Built with pure HTML, CSS, and JavaScript—no server required. All data persists locally via localStorage for seamless demos across devices.

Key Features

• Fully responsive design: Optimized for desktop, tablet, and mobile.
• Local state management: Cart, wishlist, bookings, and sessions saved in-browser.
• Demo authentication: Role-based login (user/puppetmaster) routes to appropriate dashboards.
• Dynamic content: Seeded shows/products with dashboard editing capabilities.

Sections

Section	Description	Key Pages
Home	Hero showcase with stats, feature cards, and quick actions.	index.html
Shows	Upcoming performances with booking, countdowns, and details.	shows.html
Shop	Product search, cart, wishlist with persistent storage.	shopping/shop.html, cart.html, wishlist.html
Tutorials	Guides for hand, finger, stick, sock, shadow, marionettes, and online classes.	tutorials/tutorials.html + subpages
Innovation	Experimental projects in tech-enhanced puppetry.	innovation.html
Admin	Puppet Master dashboard (login required).	puppetm.html
Auth	Client-side login with demo credentials.	login.html

Quick Demo

1. Open index.html in your browser.
2. Navigate via the top menu.
3. Test login: Use yogin/1234 (user) or puppetmaster/1234 (admin).
4. Add items to cart/wishlist, book shows—data persists on refresh.

Local Setup

No installation needed. Simply open index.html in any modern browser.

# Serve locally for best experience (optional)
npx serve .  # or python -m http.server 8000

Credentials

Role	Username	Password	Redirects To
User	yogin	1234	Home
Puppet Master	puppetmaster	1234	Dashboard

Tech Stack

• HTML5 for semantic structure.
• CSS (shared.css + styles.css): Custom properties, grid/flexbox, responsive utilities.
• Vanilla JavaScript (shared.js): localStorage helpers, utils (formatCurrency, daysUntil), dynamic rendering.
• Assets: High-quality puppetry images organized by section.

File Structure

Puppetries/
├── index.html              # Home
├── shows.html              # Show listings
├── login.html              # Auth
├── innovation.html         # Projects
├── puppetm.html            # Admin dashboard
├── shared.css              # Global styles
├── styles.css              # Page-specific
├── shared.js               # Core utilities
├── image/                  # General assets
├── shopping/               # E-commerce
│   ├── shop.html
│   ├── cart.html
│   └── wishlist.html
├── shoppingImages/         # Products
├── showsImages/            # Performances
├── tutorials/              # Learning
│   ├── tutorials.html
│   ├── hand-puppets.html
│   └── ... (6 more)
└── Innovation/             # Project images

Screenshots

Home	Shop	Tutorials

Shows	Innovation

Development

• Customization: Edit seeded data in JS (e.g., seededShows in shows.html).
• Styling: Tweak --brand-strong in CSS vars.
• Persistence Keys:
  • stringMasterSession
  • smShows, smProducts
  • smCart, smWishlist, smBookings

Contributions welcome—fork and PR improvements!

License

MIT License. Educational purposes only. Images are illustrative; source your own for production.