Skip to content

feat: create website for location mapping service #225

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rathodpd99 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: create website for location mapping service #225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 75 additions & 0 deletions location-website/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
# Location Website

A modern, responsive website showcasing a location with integrated Google Maps.

## Features

- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices
- **Google Maps Integration**: Embedded map showing the exact location
- **Modern UI/UX**: Clean, professional design with smooth animations
- **Contact Form**: Functional contact form with validation
- **Smooth Scrolling**: Enhanced navigation experience
- **Mobile Menu**: Hamburger menu for mobile devices
- **Parallax Effects**: Engaging scroll animations
- **SEO Friendly**: Semantic HTML structure

## Sections

1. **Hero Section**: Eye-catching landing area with call-to-action buttons
2. **About Section**: Information about the location with feature highlights
3. **Location Section**: Interactive Google Maps with contact details
4. **Contact Section**: Contact form for inquiries
5. **Footer**: Quick links and social media connections

## Technologies Used

- HTML5
- CSS3 (with CSS Grid and Flexbox)
- Vanilla JavaScript
- Google Maps Embed API
- Google Fonts (Inter & Playfair Display)

## Setup

1. Open `index.html` in a web browser
2. No build process or dependencies required
3. Works with any modern web browser

## Customization

### Update Location
Edit the Google Maps iframe source in `index.html`:
```html
<iframe src="https://maps.google.com/maps?q=YOUR_LOCATION&output=embed">
```

### Change Colors
Modify CSS variables in `styles.css`:
```css
:root {
--primary-color: #2563eb;
--secondary-color: #10b981;
/* ... other colors */
}
```

### Update Content
- Edit text content directly in `index.html`
- Modify business hours, contact information, and descriptions
- Update social media links in the footer

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

## License

Free to use and modify for personal or commercial projects.

## Contact

For questions or support, please use the contact form on the website.
206 changes: 206 additions & 0 deletions location-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Location - Visit Us Today</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<div class="nav-content">
<div class="logo">
<h1>Our Location</h1>
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#location">Location</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<button class="mobile-menu-btn" id="mobileMenuBtn">
<span></span>
<span></span>
<span></span>
</button>
Comment on lines +20 to +30
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add accessible labeling/state to the mobile menu button.
Screen readers won’t know what the button does or whether the menu is open.

🔧 Suggested HTML update 
-                <ul class="nav-links">
+                <ul class="nav-links" id="primaryNavigation">
@@
-                <button class="mobile-menu-btn" id="mobileMenuBtn">
+                <button class="mobile-menu-btn"
+                        id="mobileMenuBtn"
+                        aria-label="Open navigation menu"
+                        aria-expanded="false"
+                        aria-controls="primaryNavigation">
🤖 Prompt for AI Agents 
In `@location-website/index.html` around lines 20 - 30, The mobile menu button (id
"mobileMenuBtn", class "mobile-menu-btn") lacks accessible labeling/state; add
an aria-label (e.g., "Toggle navigation menu"), an aria-expanded="false"
attribute initially, and aria-controls pointing to the navigation list (give the
<ul class="nav-links"> a matching id like "navLinks"); then update the toggle
handler (the script that listens to mobileMenuBtn clicks) to flip aria-expanded
between "true" and "false" and manage focus/keyboard interaction accordingly
when opening/closing the menu.

</div>
</div>
</nav>

<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-overlay"></div>
<div class="container">
<div class="hero-content">
<h1 class="hero-title">Welcome to Our Location</h1>
<p class="hero-subtitle">Discover our space and visit us today</p>
<div class="hero-buttons">
<a href="#location" class="btn btn-primary">View Location</a>
<a href="#contact" class="btn btn-secondary">Get in Touch</a>
</div>
</div>
</div>
<div class="scroll-indicator">
<div class="mouse"></div>
</div>
</section>

<!-- About Section -->
<section id="about" class="about">
<div class="container">
<div class="section-header">
<h2 class="section-title">About Us</h2>
<div class="title-underline"></div>
</div>
<div class="about-content">
<div class="about-text">
<h3>Your Destination Awaits</h3>
<p>We are committed to providing exceptional service and creating memorable experiences for all our visitors. Our location offers a unique blend of convenience, comfort, and quality.</p>
<p>Whether you're visiting for the first time or you're a regular guest, we ensure that every visit is special. Our team is dedicated to making your experience seamless and enjoyable.</p>
<div class="features">
<div class="feature-item">
<div class="feature-icon">📍</div>
<h4>Prime Location</h4>
<p>Easily accessible and centrally located</p>
</div>
<div class="feature-item">
<div class="feature-icon">⭐</div>
<h4>Quality Service</h4>
<p>Dedicated to excellence in everything we do</p>
</div>
<div class="feature-item">
<div class="feature-icon">🕒</div>
<h4>Convenient Hours</h4>
<p>Open when you need us most</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Location Section -->
<section id="location" class="location">
<div class="container">
<div class="section-header">
<h2 class="section-title">Find Us Here</h2>
<div class="title-underline"></div>
<p class="section-description">Visit us at our convenient location</p>
</div>
<div class="location-content">
<div class="map-container">
<iframe
src="https://maps.google.com/maps?q=https://maps.app.goo.gl/WGPfXcfGZzczsQcM7&output=embed"
width="100%"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
Comment on lines +97 to +105
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

Google Maps embed API official URL format documentation

💡 Result:

Official Google Maps Embed API URL format documentation (Google for Developers): “Embed a map” page. [1]

Base URL format

https://www.google.com/maps/embed/v1/{MAP_MODE}?key=YOUR_API_KEY&{PARAMETERS}

Supported {MAP_MODE} values include: place, view, directions, streetview, search. [1]

Example

https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=Eiffel+Tower,Paris+France

[1]

Sources

🌐 Web query:

maps.app.goo.gl short link in iframe q parameter reliability

💡 Result:

maps.app.goo.gl/... links are Google Maps “short” Firebase Dynamic Links / deep links, primarily meant to open the Maps app or route through device/browser-specific redirects—not to be used as a stable iframe src. As a result, they’re not reliable for embedding: redirects can fail or behave differently across browsers (e.g., some browsers show “Dynamic Link Not Found”), and the target/redirect chain can change over time. [3]

Also, maps.app.goo.gl has historically supported redirect-style parameters (e.g., ?link=...) and has been discussed as an abuse vector (open-redirect style behavior), which is another reason to avoid treating it as a stable embed URL. [4]

What to use instead (reliable):

  • Use the official Maps Embed API iframe URL formats, where q is a documented parameter (supports place name/address/Plus Code/Place ID). [1][2]
    • Example pattern: https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=... [1][2]
  • Or use Google Maps UI: Share → Embed a map, and use the provided google.com/maps/embed?... URL (these are meant for iframes). (This aligns with common embed guidance; the short maps.app.goo.gl share link is for sharing/deep linking, not embedding. [2])

Use the official Google Maps Embed API format.
Using a short-link (maps.app.goo.gl) inside the q= parameter is unreliable—these Firebase Dynamic Links are designed for deep linking to the Maps app, not iframe embedding, and fail inconsistently across browsers.

🔧 Suggested change (use the official Maps Embed API) 
-        <iframe
-            src="https://maps.google.com/maps?q=https://maps.app.goo.gl/WGPfXcfGZzczsQcM7&output=embed"
+        <iframe
+            src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=YOUR_LOCATION"
             width="100%" 
             height="450" 
             style="border:0;" 
             allowfullscreen="" 
             loading="lazy" 
             referrerpolicy="no-referrer-when-downgrade">

Replace YOUR_API_KEY with a valid Google Maps Embed API key and YOUR_LOCATION with the place name, address, or Place ID.

Alternatively, use Google Maps' Share → Embed a map feature to generate the embed URL directly.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<iframe
src="https://maps.google.com/maps?q=https://maps.app.goo.gl/WGPfXcfGZzczsQcM7&output=embed"
width="100%"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
<iframe
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=YOUR_LOCATION"
width="100%"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
🤖 Prompt for AI Agents 
In `@location-website/index.html` around lines 97 - 105, The iframe src is using a
maps.app.goo.gl short-link which is unreliable for embedding; update the iframe
src to use the official Google Maps Embed API pattern (e.g., replace the current
src value with an embed URL like
https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=YOUR_LOCATION or
the direct embed URL produced by Google Maps' Share → Embed a map) and ensure
you supply a valid API key and an address/place name or Place ID instead of the
maps.app.goo.gl link so the <iframe> loads consistently across browsers.

</div>
<div class="location-info">
<div class="info-card">
<div class="info-icon">📍</div>
<div class="info-content">
<h4>Address</h4>
<p>Visit us at the location shown on the map</p>
<a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" target="_blank" class="link">Open in Google Maps →</a>
</div>
Comment on lines +113 to +114
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Add rel="noopener noreferrer" to external links opened in a new tab.
This prevents reverse tabnabbing.

🔧 Suggested fix 
-                            <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" target="_blank" class="link">Open in Google Maps →</a>
+                            <a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" target="_blank" rel="noopener noreferrer" class="link">Open in Google Maps →</a>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" target="_blank" class="link">Open in Google Maps →</a>
</div>
<a href="https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" target="_blank" rel="noopener noreferrer" class="link">Open in Google Maps →</a>
</div>
🤖 Prompt for AI Agents 
In `@location-website/index.html` around lines 113 - 114, The external anchor
element (the <a> tag with class "link" and href
"https://maps.app.goo.gl/WGPfXcfGZzczsQcM7" that uses target="_blank") should
include rel="noopener noreferrer" to prevent reverse tabnabbing; update that
anchor (and any other anchors using target="_blank") to add rel="noopener
noreferrer" alongside the existing attributes.

</div>
<div class="info-card">
<div class="info-icon">🕒</div>
<div class="info-content">
<h4>Hours</h4>
<p>Monday - Friday: 9:00 AM - 6:00 PM</p>
<p>Saturday: 10:00 AM - 4:00 PM</p>
<p>Sunday: Closed</p>
</div>
</div>
<div class="info-card">
<div class="info-icon">📞</div>
<div class="info-content">
<h4>Contact</h4>
<p>Phone: (555) 123-4567</p>
<p>Email: [email protected]</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- Contact Section -->
<section id="contact" class="contact">
<div class="container">
<div class="section-header">
<h2 class="section-title">Get In Touch</h2>
<div class="title-underline"></div>
<p class="section-description">We'd love to hear from you</p>
</div>
<div class="contact-content">
<form class="contact-form" id="contactForm">
<div class="form-row">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</div>
</section>

<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>Our Location</h3>
<p>Your trusted destination for quality service and exceptional experiences.</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#location">Location</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Connect</h3>
<div class="social-links">
<a href="#" class="social-link">Facebook</a>
<a href="#" class="social-link">Twitter</a>
<a href="#" class="social-link">Instagram</a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Our Location. All rights reserved.</p>
</div>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>
Loading