City Map Guide 🌍

A beautiful, interactive web guide that extends your hand-drawn city map with multimedia content for each location marker.

✨ Features

• 12 Interactive Markers: Clickable buttons corresponding to map locations
• Multimedia Support: Images, audio, video, and external links
• Responsive Design: Works perfectly on all devices
• Modern UI: Beautiful gradients, smooth animations, and clean typography
• Easy Customization: Simple to update content and styling
• Static Hosting: Can be hosted anywhere, including GitHub Pages

🚀 Quick Start

1. Download the Files

The project consists of three main files:

• index.html - Main webpage structure
• styles.css - Styling and responsive design
• script.js - Interactive functionality and content management

2. Customize Your Content

Edit the script.js file to add your own content for each marker:

const markerContent = {
    1: {
        title: "Your Location Name",
        description: "Description of this location",
        images: ["path/to/image1.jpg", "path/to/image2.jpg"],
        audio: "path/to/audio.mp3",        // Optional
        video: "path/to/video.mp4",        // Optional
        externalLink: "https://example.com" // Optional
    },
    // ... repeat for markers 2-12
};

3. Add Your Media Files

Create these folders and add your content:

your-project/
├── images/          # Photos for each marker
├── audios/           # Audio files (MP3 format)
├── videos/          # Video files (MP4 format)
├── index.html
├── styles.css
└── script.js

4. Test Locally

Open index.html in your web browser to test everything works.

🎨 Customization Guide

Changing Colors

Edit the CSS variables in styles.css:

body {
    background: linear-gradient(135deg, #YOUR_COLOR1 0%, #YOUR_COLOR2 100%);
}

Adding More Markers

1. Add buttons to the HTML
2. Add content data to script.js
3. Update the CSS grid if needed

Modifying Layout

The design is fully responsive and uses CSS Grid for the marker layout. Adjust the .markers-grid class to change the arrangement.

🌐 Hosting Options

GitHub Pages (Recommended - Free)

1. Create a new GitHub repository
2. Upload your project files
3. Go to Settings → Pages
4. Select "Deploy from a branch" → Choose "main" branch
5. Your site will be available at https://yourusername.github.io/repository-name

Netlify (Free)

1. Drag and drop your project folder to netlify.com
2. Get instant hosting with a custom URL
3. Connect your GitHub for automatic updates

Vercel (Free)

1. Connect your GitHub repository to vercel.com
2. Automatic deployments on every push
3. Custom domain support

Any Web Server

Since this is a static site, you can host it anywhere that serves HTML files.

📱 QR Code Setup

1. Generate QR Code: Use any QR code generator (like qr-code-generator.com)
2. URL: Point it to your hosted webpage URL
3. Print: Add it to your hand-drawn map
4. Test: Scan with your phone to ensure it works

🔧 Technical Details

• Pure HTML/CSS/JavaScript: No frameworks or build tools needed
• Responsive Design: Mobile-first approach with CSS Grid and Flexbox
• Modern CSS: Uses CSS Grid, custom properties, and smooth animations
• Accessibility: Semantic HTML and keyboard navigation support
• Performance: Lightweight and fast loading

📁 File Structure

city-map-guide/
├── index.html          # Main webpage
├── styles.css          # Styling and animations
├── script.js           # Content and interactions
├── images/             # Location photos
│   ├── marker1-1.jpg
│   ├── marker1-2.jpg
│   └── ...
├── audio/              # Audio files
│   ├── marker1-narration.mp3
│   └── ...
├── videos/             # Video files
│   ├── marker1-tour.mp4
│   └── ...
└── README.md           # This file

🎯 Content Ideas for Each Marker

• Photos: Show the location, architecture, or atmosphere
• Audio: Historical narration, ambient sounds, or guided tours
• Video: Short clips of the location or activities
• External Links: Official websites, booking pages, or social media
• Descriptions: Interesting facts, opening hours, or visitor tips

🚨 Troubleshooting

Images Not Showing

• Check file paths are correct
• Ensure image files exist in the images/ folder
• Use relative paths (e.g., images/photo.jpg not C:/photos/photo.jpg)

Audio/Video Not Playing

• Check file formats (MP3 for audio, MP4 for video)
• Ensure files are in the correct folders
• Test with different browsers

Page Not Loading

• Check all three files are in the same folder
• Ensure file names match exactly (case-sensitive)
• Try opening in a different browser

📞 Support

If you need help:

1. Check the troubleshooting section above
2. Verify all files are present and named correctly
3. Test with a simple setup first (just text, no media)
4. Check browser console for error messages

🎉 You're Ready!

Your interactive city map guide is now ready to use. People can scan the QR code on your hand-drawn map and explore each location with rich multimedia content. The design is beautiful, responsive, and easy to maintain.

Happy mapping! 🗺️✨