Santa's Workshop Web

Web Overview

Santa's Workshop is an interactive, festive web platform designed to immerse users in the magic of Christmas. From writing letters to Santa to tracking his journey across the globe, the platform offers a comprehensive holiday experience for users of all ages.

The project emphasizes a clean, minimalistic design with a focus on usability, accessibility, and multi-platform compatibility, ensuring a seamless experience across devices.

Key Features

1. Interactive Christmas Activities

   • Write Letters to Santa: Users can compose letters and receive personalized responses.
   • Track Santa: A real-time map feature shows Santa's current location, complete with distance calculations from the user's country.
   • Advent Calendar: Unlock daily surprises and motivational messages, with a realistic date-restriction mechanism.

2. Personalized Features

   • Elf Name Generator: Create your unique elf name based on a fun algorithm.
   • Transform Into an Elf: Upload photos to see yourself transformed into Santa's little helper.

3. Family-Friendly Fun

   • Games: A selection of Christmas-themed games to entertain users of all ages.
   • Good and Naughty List Search: Check your name on Santa’s list.

4. Experience Reservation System

   • A multi-step wizard guides users through booking a Christmas experience:
     • Step 1: Input personal and booking details.
     • Step 2: Choose a payment method (credit card or PayPal).
     • Step 3: Confirm details and finalize the booking.
   • Features dynamic pricing based on group size and an intuitive interface for a smooth booking process.

5. Media and Galleries

   • Explore a photo gallery of Lapland, Santa's home, and other festive visuals.

6. Interactive Design

   • Hover-enabled navigation elements like stars guiding users to different sections.
   • Real-time feedback on user actions through notifications and animations.

Technologies Used

• Frontend: HTML, CSS, JavaScript
• Libraries and APIs:
  • Leaflet.js, OpenStreetMap and FetchApi for interactive maps.
  • HTML2Canvas for drawings and photos.
  • Crypto-JS for encrypted passwords.
  • MediaDevices for camera usage.
• Dynamic Elements: Real-time DOM manipulation using JavaScript
• Styling: Fully responsive design optimized for desktop and mobile platforms.

Accessibility

• Alternative text for all images.
• Text-to-speech subtitles for video calls.
• High-contrast colors and alternate text for all images.
• Keyboard navigable elements for enhanced usability.

Future Improvements

• Fully functional experience reservation and payment integration.
• Expansion of the games section with more interactive elements.
• Multi-language support for a global audience.

---

How to Run

1. Clone the repository:

   git clone https://github.com/your-repo/santas-workshop.git

2. Navigate to the project folder:

   cd santas-workshop

3. Open index.html in your preferred browser.

---

• Carlos Bravo Garrán - GitHub
• Luis Gandarillas Fernández - GitHub
• Olivia Grima Perez - GitHub
• Íñigo García-Velasco Gonzalez - GitHub