← back to Billy Website
initial snapshot — gitify all builds (CLAUDE.md rule 2026-05-06)
75d6f194ff717aa3979cadc48f8db9e8317ec51c · 2026-05-06 10:20:32 -0700 · Steve
Files touched
A .gitignoreA QUICKSTART.mdA README.mdA css/style.cssA index.htmlA js/main.jsA package.jsonA server.jsA server.js.backupA start.shA status.shA stop.shA test.html
Diff
commit 75d6f194ff717aa3979cadc48f8db9e8317ec51c
Author: Steve <steve@designerwallcoverings.com>
Date: Wed May 6 10:20:32 2026 -0700
initial snapshot — gitify all builds (CLAUDE.md rule 2026-05-06)
---
.gitignore | 14 +
QUICKSTART.md | 113 +++++
README.md | 204 +++++++++
css/style.css | 1252 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
index.html | 672 +++++++++++++++++++++++++++++
js/main.js | 284 +++++++++++++
package.json | 14 +
server.js | 98 +++++
server.js.backup | 98 +++++
start.sh | 29 ++
status.sh | 44 ++
stop.sh | 12 +
test.html | 12 +
13 files changed, 2846 insertions(+)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1d7a585
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,14 @@
+node_modules/
+.next/
+dist/
+build/
+.cache/
+*.db-shm
+*.db-wal
+.env
+.env.local
+coverage/
+.DS_Store
+*.log
+tmp/
+
diff --git a/QUICKSTART.md b/QUICKSTART.md
new file mode 100644
index 0000000..45658b4
--- /dev/null
+++ b/QUICKSTART.md
@@ -0,0 +1,113 @@
+# 🎸 Quick Start Guide
+
+## Your website is READY and RUNNING!
+
+### 🌐 Access Your Website
+
+Open your browser and go to:
+- **http://localhost:5300/**
+- **http://45.61.58.125:5300/**
+
+---
+
+## 🚀 Server Management
+
+### Check if server is running:
+```bash
+./status.sh
+```
+
+### Start the server:
+```bash
+./start.sh
+```
+
+### Stop the server:
+```bash
+./stop.sh
+```
+
+### View server logs:
+```bash
+tail -f server.log
+```
+
+---
+
+## ✨ What's Included
+
+Your website has these sections:
+1. **Property Overview** - 4 bed, 3 bath, 2,818 sq ft
+2. **Entertainment** - Sunset Strip, Hollywood Bowl, restaurants
+3. **Festivals & Events** - 2025 LA events calendar
+4. **The Area** - Interactive map with nearby attractions
+5. **History** - Legendary Laurel Canyon music history
+6. **Schools** - Local schools and education info
+7. **Contact** - Inquiry form
+
+---
+
+## 🗺️ Free Interactive Map
+
+The website uses **Leaflet + OpenStreetMap** (completely free, no API key needed!)
+- Shows property location
+- Marks nearby attractions
+- Interactive popups
+
+---
+
+## 📝 Next Steps (Optional)
+
+1. **Contact Form Setup**
+ - Sign up at [Formspree.io](https://formspree.io)
+ - Replace `YOUR_FORM_ID` in `index.html` with your form ID
+
+2. **Add Real Photos**
+ - Replace placeholder image URLs in `index.html`
+ - Add photos to the `images/` folder
+
+3. **Update Contact Info**
+ - Edit `index.html` to add real email/phone numbers
+
+---
+
+## 🆘 Troubleshooting
+
+**Server not responding?**
+```bash
+./stop.sh
+./start.sh
+```
+
+**Check what's using port 5300:**
+```bash
+netstat -tlnp | grep 5300
+```
+
+**Kill any stuck processes:**
+```bash
+pkill -9 -f "node server.js"
+./start.sh
+```
+
+---
+
+## 📂 Project Structure
+
+```
+laurel-canyon-rental/
+├── index.html # Main website
+├── css/style.css # Styling
+├── js/main.js # Interactive features
+├── server.js # Web server
+├── start.sh # Start server
+├── stop.sh # Stop server
+├── status.sh # Check status
+└── server.log # Server logs
+```
+
+---
+
+## 🎉 You're All Set!
+
+Your Laurel Canyon luxury rental website is live and running on port 5300!
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..24c399f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,204 @@
+# 2755 Carmar Drive - Laurel Canyon Luxury Rental
+
+High-end luxury rental website for a historic property in Laurel Canyon, Los Angeles.
+
+## Property Details
+
+- **Address:** 2755 Carmar Drive, Los Angeles, CA 90046
+- **Bedrooms:** 4
+- **Bathrooms:** 3
+- **Square Feet:** 2,818 sq ft
+- **Built:** 1961
+- **Neighborhood:** Laurel Canyon, Hollywood Hills
+
+## Website Features
+
+### Comprehensive Sections
+
+1. **Property Overview** - Detailed information about the main residence
+2. **Entertainment** - Nearby venues including Sunset Strip, Hollywood Bowl, dining
+3. **Festivals & Events** - Year-round LA entertainment calendar
+4. **The Area** - Interactive map and local recommendations
+5. **History** - Rich musical heritage of Laurel Canyon (1960s-70s)
+6. **Schools** - Education options in the LAUSD
+7. **Contact** - Inquiry form and location details
+
+### Historic Laurel Canyon Features
+
+The website highlights the legendary musical history of Laurel Canyon, home to:
+- Joni Mitchell
+- The Doors (Jim Morrison)
+- Frank Zappa
+- The Mamas & the Papas
+- The Eagles
+- Carole King
+- Neil Young
+- Jackson Browne
+- And many more music legends
+
+## Technology Stack
+
+- **Frontend:** HTML5, CSS3, JavaScript (Vanilla)
+- **Backend:** Node.js HTTP Server
+- **Styling:** Custom CSS with responsive design
+- **Fonts:** Playfair Display + Inter (Google Fonts)
+- **Icons:** Font Awesome 6.0
+- **Maps:** Google Maps API integration
+
+## Project Structure
+
+```
+laurel-canyon-rental/
+├── index.html # Main HTML file
+├── css/
+│ └── style.css # Custom styles
+├── js/
+│ └── main.js # JavaScript functionality
+├── images/ # Image assets directory
+├── server.js # Node.js server
+├── package.json # Project configuration
+└── README.md # This file
+```
+
+## Getting Started
+
+### Prerequisites
+
+- Node.js (v12 or higher)
+
+### Quick Start (Easiest Method)
+
+Navigate to the project directory and use the management scripts:
+
+```bash
+cd laurel-canyon-rental
+
+# Start the server
+./start.sh
+
+# Check server status
+./status.sh
+
+# Stop the server
+./stop.sh
+```
+
+### Alternative Methods
+
+**Option 1 - NPM:**
+```bash
+npm start
+```
+
+**Option 2 - Direct Node:**
+```bash
+node server.js
+```
+
+**Option 3 - Background with logs:**
+```bash
+nohup node server.js > server.log 2>&1 &
+```
+
+### Accessing the Website
+
+- **Local:** http://localhost:5300/
+- **Network:** http://0.0.0.0:5300/ (accessible from other devices on the network)
+- **External:** http://45.61.58.125:5300/ (if firewall configured)
+
+### Server Status
+
+The server runs persistently in the background. To check if it's running:
+```bash
+./status.sh
+```
+
+To view live logs:
+```bash
+tail -f server.log
+```
+
+## Features
+
+### Responsive Design
+- Mobile-first approach
+- Hamburger menu for mobile devices
+- Optimized layouts for all screen sizes
+
+### Interactive Elements
+- Smooth scrolling navigation
+- Animated scroll effects
+- Interactive Google Maps integration
+- Parallax hero section
+- Counter animations for statistics
+
+### SEO & Performance
+- Semantic HTML5
+- Meta descriptions
+- Fast loading times
+- Lazy loading for images
+- Clean URL structure
+
+## Customization
+
+### Google Maps API
+To enable the interactive map, replace `YOUR_GOOGLE_MAPS_API_KEY` in `index.html` with your actual Google Maps API key.
+
+### Contact Form
+The contact form uses Formspree. Update the form action URL with your Formspree endpoint:
+```html
+<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
+```
+
+### Images
+Replace placeholder images with actual property photos by updating the `src` attributes in `index.html`.
+
+## Content Highlights
+
+### Entertainment & Nightlife
+- Sunset Strip venues (The Roxy, Whisky a Go Go)
+- Hollywood Bowl
+- Local restaurants (Laurel Tavern, Pace, Canyon Country Store)
+- West Hollywood nightlife
+- Outdoor activities (Runyon Canyon)
+
+### 2025 Events Calendar
+- Rolling Loud California (March)
+- TCM Classic Film Festival (April)
+- Cruel World Festival (May)
+- LA Pride (June)
+- HARD Summer (August)
+- Día de los Muertos (October)
+
+### Schools
+- Wonderland Avenue Elementary (Gifted & Talented)
+- Laurel Elementary (CACT Magnet)
+- Los Angeles Unified School District
+- Private school options nearby
+
+## Development
+
+### Available Scripts
+
+- `npm start` - Start the production server
+- `npm run dev` - Start the development server
+
+### Server Configuration
+
+The server runs on port 5300 and serves static files from the project root. It includes:
+- MIME type handling for all common file types
+- 404 error pages
+- Graceful shutdown handling
+- Request logging
+
+## License
+
+ISC
+
+## Author
+
+Created for 2755 Carmar Drive property marketing.
+
+---
+
+**Note:** This is a template website. Replace placeholder content, images, and API keys with actual property information before deploying to production.
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..1fcc6a5
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,1252 @@
+/* Reset and Base Styles */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --primary-color: #8B4513;
+ --secondary-color: #DAA520;
+ --accent-color: #CD853F;
+ --dark: #2c3e50;
+ --light: #ecf0f1;
+ --white: #ffffff;
+ --shadow: 0 5px 20px rgba(0,0,0,0.1);
+ --shadow-lg: 0 10px 40px rgba(0,0,0,0.15);
+ --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+body {
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ line-height: 1.6;
+ color: var(--dark);
+ overflow-x: hidden;
+ padding-top: 0;
+}
+
+html {
+ scroll-behavior: smooth;
+ scroll-padding-top: 80px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ font-family: 'Playfair Display', serif;
+ font-weight: 600;
+ line-height: 1.3;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+/* Navigation */
+.navbar {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(10px);
+ box-shadow: var(--shadow);
+ z-index: 1000;
+ transition: var(--transition);
+}
+
+.nav-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 1rem 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.nav-logo h2 {
+ color: var(--primary-color);
+ font-size: 1.5rem;
+}
+
+.nav-menu {
+ display: flex;
+ list-style: none;
+ gap: 2rem;
+}
+
+.nav-link {
+ color: var(--dark);
+ text-decoration: none;
+ font-weight: 500;
+ transition: var(--transition);
+ position: relative;
+}
+
+.nav-link::after {
+ content: '';
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ width: 0;
+ height: 2px;
+ background: var(--primary-color);
+ transition: var(--transition);
+}
+
+.nav-link:hover {
+ color: var(--primary-color);
+}
+
+.nav-link:hover::after {
+ width: 100%;
+}
+
+.hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+}
+
+.hamburger .bar {
+ width: 25px;
+ height: 3px;
+ background: var(--dark);
+ margin: 3px 0;
+ transition: var(--transition);
+}
+
+/* Hero Section */
+.hero {
+ height: 100vh;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-size: cover;
+ background-position: center;
+ overflow: hidden;
+ margin-top: 70px;
+}
+
+.hero-logo {
+ position: relative;
+ z-index: 3;
+ margin-bottom: 2rem;
+ animation: fadeInDown 1s ease;
+}
+
+.hero-logo img {
+ max-width: 400px;
+ height: auto;
+ filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
+}
+
+.hero-content {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 5%;
+ position: relative;
+ z-index: 2;
+}
+
+.hero-text {
+ text-align: center;
+ color: var(--white);
+ max-width: 800px;
+}
+
+@keyframes fadeInDown {
+ from {
+ opacity: 0;
+ transform: translateY(-30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.hero-title {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ animation: fadeInUp 1s ease;
+}
+
+.hero-subtitle {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ opacity: 0.9;
+ animation: fadeInUp 1s ease 0.2s backwards;
+}
+
+.hero-buttons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ animation: fadeInUp 1s ease 0.4s backwards;
+}
+
+.btn-primary, .btn-secondary {
+ padding: 1rem 2rem;
+ border-radius: 50px;
+ text-decoration: none;
+ font-weight: 600;
+ transition: var(--transition);
+ display: inline-block;
+}
+
+.btn-primary {
+ background: var(--white);
+ color: var(--primary-color);
+}
+
+.btn-primary:hover {
+ transform: translateY(-3px);
+ box-shadow: var(--shadow-lg);
+}
+
+.btn-secondary {
+ background: transparent;
+ color: var(--white);
+ border: 2px solid var(--white);
+}
+
+.btn-secondary:hover {
+ background: var(--white);
+ color: var(--primary-color);
+}
+
+.hero-scroll {
+ position: absolute;
+ bottom: 30px;
+ left: 50%;
+ transform: translateX(-50%);
+ text-align: center;
+ color: var(--white);
+ animation: bounce 2s infinite;
+}
+
+.scroll-arrow {
+ width: 30px;
+ height: 30px;
+ border-left: 2px solid var(--white);
+ border-bottom: 2px solid var(--white);
+ transform: rotate(-45deg);
+ margin: 10px auto 0;
+}
+
+/* Stats Section */
+.stats {
+ padding: 4rem 0;
+ background: var(--white);
+}
+
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 2rem;
+ text-align: center;
+}
+
+.stat-item h3 {
+ font-size: 2.5rem;
+ color: var(--primary-color);
+ margin-bottom: 0.5rem;
+}
+
+.stat-item p {
+ color: var(--dark);
+ opacity: 0.8;
+}
+
+/* Section Header */
+.section-header {
+ text-align: center;
+ margin-bottom: 4rem;
+}
+
+.section-header h2 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ color: var(--dark);
+}
+
+.section-header p {
+ font-size: 1.1rem;
+ color: var(--dark);
+ opacity: 0.7;
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+/* Villas Section */
+.villas {
+ padding: 6rem 0;
+ background: linear-gradient(to bottom, var(--white), var(--light));
+}
+
+.villas-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 3rem;
+}
+
+.villa-card {
+ background: var(--white);
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+ transition: var(--transition);
+}
+
+.villa-card:hover {
+ transform: translateY(-10px);
+ box-shadow: var(--shadow-lg);
+}
+
+.villa-image {
+ position: relative;
+ height: 250px;
+ overflow: hidden;
+}
+
+.villa-placeholder {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 4rem;
+ color: var(--white);
+}
+
+.villa-badge {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ background: rgba(255,255,255,0.9);
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-weight: 600;
+ font-size: 0.9rem;
+ color: var(--dark);
+}
+
+.villa-content {
+ padding: 2rem;
+}
+
+.villa-content h3 {
+ font-size: 1.8rem;
+ margin-bottom: 1rem;
+ color: var(--dark);
+}
+
+.villa-specs {
+ display: flex;
+ gap: 1.5rem;
+ margin-bottom: 1.5rem;
+ flex-wrap: wrap;
+}
+
+.villa-specs span {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ color: var(--dark);
+ opacity: 0.7;
+ font-size: 0.9rem;
+}
+
+.villa-specs i {
+ color: var(--primary-color);
+}
+
+.villa-content p {
+ margin-bottom: 1.5rem;
+ line-height: 1.7;
+ color: var(--dark);
+ opacity: 0.8;
+}
+
+.villa-amenities {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0.5rem;
+ margin-bottom: 1.5rem;
+}
+
+.villa-amenities span {
+ background: var(--light);
+ padding: 0.5rem 1rem;
+ border-radius: 20px;
+ font-size: 0.85rem;
+ color: var(--dark);
+}
+
+.btn-villa {
+ display: inline-block;
+ width: 100%;
+ text-align: center;
+ padding: 1rem;
+ background: var(--primary-color);
+ color: var(--white);
+ text-decoration: none;
+ border-radius: 10px;
+ font-weight: 600;
+ transition: var(--transition);
+}
+
+.btn-villa:hover {
+ background: var(--dark);
+ transform: scale(1.02);
+}
+
+/* Seasons Section */
+.seasons {
+ padding: 6rem 0;
+ background: var(--white);
+}
+
+.seasons-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 2rem;
+}
+
+.season-card {
+ background: var(--white);
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: var(--shadow);
+ transition: var(--transition);
+}
+
+.season-card:hover {
+ transform: translateY(-5px);
+ box-shadow: var(--shadow-lg);
+}
+
+.season-image {
+ height: 200px;
+ position: relative;
+ overflow: hidden;
+}
+
+.dry-season {
+ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.green-season {
+ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.turtle-season {
+ background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+.festival-season {
+ background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+}
+
+.season-overlay {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 1.5rem;
+ background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
+ color: var(--white);
+}
+
+.season-overlay h3 {
+ font-size: 1.5rem;
+ margin-bottom: 0.3rem;
+}
+
+.season-overlay span {
+ font-size: 0.9rem;
+ opacity: 0.9;
+}
+
+.season-content {
+ padding: 2rem;
+}
+
+.season-content h4 {
+ font-size: 1.3rem;
+ margin-bottom: 1rem;
+ color: var(--dark);
+}
+
+.season-content p {
+ margin-bottom: 1rem;
+ line-height: 1.7;
+ color: var(--dark);
+ opacity: 0.8;
+}
+
+.season-content ul {
+ list-style: none;
+}
+
+.season-content ul li {
+ padding: 0.5rem 0;
+ padding-left: 1.5rem;
+ position: relative;
+ color: var(--dark);
+ opacity: 0.8;
+}
+
+.season-content ul li::before {
+ content: '✓';
+ position: absolute;
+ left: 0;
+ color: var(--accent-color);
+ font-weight: bold;
+}
+
+.season-content ul li a {
+ color: var(--primary-color);
+ text-decoration: none;
+ font-weight: 600;
+ transition: var(--transition);
+}
+
+.season-content ul li a:hover {
+ color: var(--accent-color);
+ text-decoration: underline;
+}
+
+/* Experiences Section */
+.experiences {
+ padding: 6rem 0;
+ background: var(--white);
+}
+
+.experiences-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.experience-card {
+ background: var(--white);
+ padding: 2.5rem;
+ border-radius: 15px;
+ box-shadow: var(--shadow);
+ text-align: center;
+ transition: var(--transition);
+ border: 2px solid transparent;
+}
+
+.experience-card:hover {
+ transform: translateY(-5px);
+ box-shadow: var(--shadow-lg);
+ border-color: var(--primary-color);
+}
+
+.experience-icon {
+ width: 80px;
+ height: 80px;
+ margin: 0 auto 1.5rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.experience-icon i {
+ font-size: 2.5rem;
+ color: var(--white);
+}
+
+.experience-card h3 {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ color: var(--dark);
+}
+
+.experience-card p {
+ line-height: 1.7;
+ color: var(--dark);
+ opacity: 0.8;
+ margin-bottom: 1rem;
+}
+
+.experience-links {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ margin-top: 1rem;
+}
+
+.experience-links a {
+ color: var(--primary-color);
+ text-decoration: none;
+ font-size: 0.9rem;
+ font-weight: 500;
+ transition: var(--transition);
+ padding: 0.3rem 0;
+}
+
+.experience-links a:hover {
+ color: var(--accent-color);
+ padding-left: 5px;
+}
+
+/* Area Section */
+.area {
+ padding: 6rem 0;
+ background: var(--light);
+}
+
+.map-container {
+ position: relative;
+ margin-bottom: 4rem;
+ border-radius: 20px;
+ overflow: hidden;
+ box-shadow: var(--shadow-lg);
+}
+
+.interactive-map {
+ width: 100%;
+ height: 500px;
+ background: linear-gradient(135deg, #8B4513 0%, #CD853F 100%);
+}
+
+.map-legend {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ background: rgba(255,255,255,0.95);
+ padding: 1.5rem;
+ border-radius: 10px;
+ box-shadow: var(--shadow);
+}
+
+.map-legend h4 {
+ margin-bottom: 1rem;
+ color: var(--dark);
+}
+
+.legend-item {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 0.8rem;
+}
+
+.legend-marker {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ display: block;
+}
+
+.legend-marker.restaurant { background: #e74c3c; }
+.legend-marker.hotel { background: #3498db; }
+.legend-marker.beach { background: #f39c12; }
+.legend-marker.activity { background: #2ecc71; }
+
+.recommendations {
+ display: grid;
+ gap: 3rem;
+}
+
+.rec-category h3 {
+ font-size: 1.8rem;
+ margin-bottom: 2rem;
+ color: var(--dark);
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.rec-category h3 i {
+ color: var(--primary-color);
+}
+
+.rec-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: 2rem;
+}
+
+.rec-item {
+ background: var(--white);
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: var(--shadow);
+ transition: var(--transition);
+ position: relative;
+}
+
+.rec-item:hover {
+ transform: translateY(-5px);
+ box-shadow: var(--shadow-lg);
+}
+
+.rec-item h4 {
+ font-size: 1.3rem;
+ margin-bottom: 0.8rem;
+ color: var(--dark);
+}
+
+.rec-item h4 a {
+ color: var(--dark);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.rec-item h4 a:hover {
+ color: var(--primary-color);
+}
+
+.rec-item p {
+ color: var(--dark);
+ opacity: 0.7;
+ margin-bottom: 1rem;
+}
+
+.rec-link {
+ display: inline-block;
+ color: var(--primary-color);
+ text-decoration: none;
+ font-weight: 500;
+ font-size: 0.9rem;
+ transition: var(--transition);
+}
+
+.rec-link:hover {
+ color: var(--accent-color);
+ transform: translateX(5px);
+}
+
+.rec-distance {
+ position: absolute;
+ top: 1rem;
+ right: 1rem;
+ background: var(--primary-color);
+ color: var(--white);
+ padding: 0.3rem 0.8rem;
+ border-radius: 15px;
+ font-size: 0.85rem;
+ font-weight: 600;
+}
+
+/* History Section */
+.history {
+ padding: 6rem 0;
+ background: linear-gradient(to bottom, var(--light), var(--white));
+}
+
+.timeline {
+ position: relative;
+ max-width: 800px;
+ margin: 0 auto 4rem;
+ padding: 2rem 0;
+}
+
+.timeline::before {
+ content: '';
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 4px;
+ height: 100%;
+ background: var(--primary-color);
+}
+
+.timeline-item {
+ position: relative;
+ margin-bottom: 3rem;
+ width: 50%;
+}
+
+.timeline-item:nth-child(odd) {
+ left: 0;
+ padding-right: 3rem;
+}
+
+.timeline-item:nth-child(even) {
+ left: 50%;
+ padding-left: 3rem;
+}
+
+.timeline-marker {
+ position: absolute;
+ top: 0;
+ width: 20px;
+ height: 20px;
+ background: var(--primary-color);
+ border: 4px solid var(--white);
+ border-radius: 50%;
+ box-shadow: var(--shadow);
+}
+
+.timeline-item:nth-child(odd) .timeline-marker {
+ right: -10px;
+}
+
+.timeline-item:nth-child(even) .timeline-marker {
+ left: -10px;
+}
+
+.timeline-content {
+ background: var(--white);
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: var(--shadow);
+}
+
+.timeline-content h3 {
+ font-size: 1.3rem;
+ margin-bottom: 1rem;
+ color: var(--primary-color);
+}
+
+.timeline-content p {
+ line-height: 1.7;
+ color: var(--dark);
+ opacity: 0.8;
+}
+
+.history-highlights h3 {
+ text-align: center;
+ font-size: 2rem;
+ margin-bottom: 3rem;
+ color: var(--dark);
+}
+
+.heritage-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+}
+
+.heritage-item {
+ text-align: center;
+ padding: 2rem;
+ background: var(--white);
+ border-radius: 15px;
+ box-shadow: var(--shadow);
+ transition: var(--transition);
+}
+
+.heritage-item:hover {
+ transform: translateY(-5px);
+ box-shadow: var(--shadow-lg);
+}
+
+.heritage-item i {
+ font-size: 3rem;
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+}
+
+.heritage-item h4 {
+ font-size: 1.3rem;
+ margin-bottom: 1rem;
+ color: var(--dark);
+}
+
+.heritage-item p {
+ line-height: 1.7;
+ color: var(--dark);
+ opacity: 0.8;
+}
+
+/* Contact Section */
+.contact {
+ padding: 6rem 0;
+ background: var(--light);
+}
+
+.contact-content {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ gap: 3rem;
+}
+
+.contact-info {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+.contact-item {
+ background: var(--white);
+ padding: 2rem;
+ border-radius: 15px;
+ box-shadow: var(--shadow);
+ text-align: center;
+}
+
+.contact-item i {
+ font-size: 2.5rem;
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+}
+
+.contact-item h4 {
+ font-size: 1.3rem;
+ margin-bottom: 0.8rem;
+ color: var(--dark);
+}
+
+.contact-item p {
+ color: var(--dark);
+ opacity: 0.8;
+}
+
+.contact-item a {
+ color: var(--primary-color);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.contact-item a:hover {
+ color: var(--accent-color);
+}
+
+.contact-form {
+ background: var(--white);
+ padding: 3rem;
+ border-radius: 15px;
+ box-shadow: var(--shadow);
+}
+
+.contact-form h3 {
+ margin-bottom: 2rem;
+ color: var(--dark);
+}
+
+.form-row {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ margin-bottom: 1rem;
+}
+
+.contact-form input,
+.contact-form select,
+.contact-form textarea {
+ width: 100%;
+ padding: 1rem;
+ border: 2px solid var(--light);
+ border-radius: 10px;
+ font-family: inherit;
+ font-size: 1rem;
+ transition: var(--transition);
+}
+
+.contact-form input:focus,
+.contact-form select:focus,
+.contact-form textarea:focus {
+ outline: none;
+ border-color: var(--primary-color);
+}
+
+.contact-form select {
+ margin-bottom: 1rem;
+}
+
+.contact-form textarea {
+ margin-bottom: 1rem;
+ resize: vertical;
+}
+
+.contact-form button {
+ width: 100%;
+ padding: 1rem 2rem;
+ background: var(--primary-color);
+ color: var(--white);
+ border: none;
+ border-radius: 10px;
+ font-size: 1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: var(--transition);
+}
+
+.contact-form button:hover {
+ background: var(--dark);
+ transform: translateY(-2px);
+ box-shadow: var(--shadow);
+}
+
+/* Find Us Section */
+.find-us {
+ margin-top: 6rem;
+ padding-top: 4rem;
+ border-top: 2px solid var(--light);
+}
+
+.embedded-map {
+ margin: 3rem 0;
+ box-shadow: var(--shadow-lg);
+ border-radius: 15px;
+ overflow: hidden;
+}
+
+.travel-info {
+ margin-top: 3rem;
+}
+
+.travel-info h3 {
+ text-align: center;
+ font-size: 2rem;
+ margin-bottom: 3rem;
+ color: var(--dark);
+}
+
+.travel-overview {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 2rem;
+ margin-bottom: 3rem;
+}
+
+.travel-option {
+ text-align: center;
+ padding: 2rem;
+ background: var(--white);
+ border-radius: 15px;
+ box-shadow: var(--shadow);
+}
+
+.travel-option i {
+ font-size: 3rem;
+ color: var(--primary-color);
+ margin-bottom: 1rem;
+}
+
+.travel-option h4 {
+ font-size: 1.3rem;
+ margin-bottom: 0.8rem;
+ color: var(--dark);
+}
+
+.travel-option p {
+ color: var(--dark);
+ opacity: 0.8;
+ margin-bottom: 1rem;
+}
+
+.travel-option a {
+ color: var(--primary-color);
+ text-decoration: none;
+ font-weight: 500;
+ transition: var(--transition);
+}
+
+.travel-option a:hover {
+ color: var(--accent-color);
+}
+
+/* Footer */
+.footer {
+ background: var(--dark);
+ color: var(--white);
+ padding: 3rem 0 1rem;
+}
+
+.footer-content {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 3rem;
+ margin-bottom: 2rem;
+}
+
+.footer-section h3 {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+}
+
+.footer-section h4 {
+ font-size: 1.2rem;
+ margin-bottom: 1rem;
+}
+
+.footer-section p {
+ opacity: 0.8;
+ line-height: 1.7;
+}
+
+.footer-section ul {
+ list-style: none;
+}
+
+.footer-section ul li {
+ margin-bottom: 0.5rem;
+ opacity: 0.8;
+}
+
+.footer-section ul li a {
+ color: var(--white);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.footer-section ul li a:hover {
+ color: var(--secondary-color);
+}
+
+.social-links {
+ display: flex;
+ gap: 1rem;
+}
+
+.social-links a {
+ width: 40px;
+ height: 40px;
+ background: rgba(255,255,255,0.1);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ color: var(--white);
+ text-decoration: none;
+ transition: var(--transition);
+}
+
+.social-links a:hover {
+ background: var(--primary-color);
+ transform: translateY(-3px);
+}
+
+.footer-bottom {
+ text-align: center;
+ padding-top: 2rem;
+ border-top: 1px solid rgba(255,255,255,0.1);
+ opacity: 0.7;
+}
+
+/* Animations */
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes bounce {
+ 0%, 100% {
+ transform: translateX(-50%) translateY(0);
+ }
+ 50% {
+ transform: translateX(-50%) translateY(-10px);
+ }
+}
+
+/* Responsive Design */
+@media (max-width: 968px) {
+ .hero-content {
+ padding: 2rem;
+ }
+
+ .hero-title {
+ font-size: 2.5rem;
+ }
+
+ .hero-logo img {
+ max-width: 280px;
+ }
+
+ .contact-content {
+ grid-template-columns: 1fr;
+ }
+
+ .timeline::before {
+ left: 0;
+ }
+
+ .timeline-item {
+ width: 100%;
+ left: 0 !important;
+ padding-left: 3rem !important;
+ padding-right: 0 !important;
+ }
+
+ .timeline-item .timeline-marker {
+ left: -10px !important;
+ right: auto !important;
+ }
+}
+
+@media (max-width: 768px) {
+ .nav-menu {
+ position: fixed;
+ left: -100%;
+ top: 70px;
+ flex-direction: column;
+ background: rgba(255,255,255,0.98);
+ width: 100%;
+ text-align: center;
+ transition: var(--transition);
+ box-shadow: var(--shadow);
+ padding: 2rem 0;
+ }
+
+ .nav-menu.active {
+ left: 0;
+ }
+
+ .hamburger {
+ display: flex;
+ }
+
+ .hamburger.active .bar:nth-child(1) {
+ transform: translateY(9px) rotate(45deg);
+ }
+
+ .hamburger.active .bar:nth-child(2) {
+ opacity: 0;
+ }
+
+ .hamburger.active .bar:nth-child(3) {
+ transform: translateY(-9px) rotate(-45deg);
+ }
+
+ .villas-grid,
+ .seasons-grid,
+ .rec-grid,
+ .heritage-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .form-row {
+ grid-template-columns: 1fr;
+ }
+
+ .section-header h2 {
+ font-size: 2rem;
+ }
+}
+
+@media (max-width: 480px) {
+ .hero-title {
+ font-size: 2rem;
+ }
+
+ .hero-subtitle {
+ font-size: 1.2rem;
+ }
+
+ .hero-buttons {
+ flex-direction: column;
+ }
+
+ .stats-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a8e6af6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,672 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>3306 Lloyd Street - Bill Fox San Diego Rental</title>
+ <meta name="description" content="Premium rental in San Diego's vibrant Clairemont neighborhood. Experience the best of San Diego with easy access to beaches, entertainment, and world-class dining.">
+ <link rel="stylesheet" href="/css/style.css">
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
+ <!-- Leaflet CSS -->
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
+ <!-- Leaflet JS -->
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+</head>
+<body>
+ <!-- Navigation -->
+ <nav class="navbar">
+ <div class="nav-container">
+ <div class="nav-logo">
+ <h2>3306 Lloyd Street</h2>
+ </div>
+ <ul class="nav-menu">
+ <li><a href="#home" class="nav-link">Home</a></li>
+ <li><a href="#property" class="nav-link">Property</a></li>
+ <li><a href="#entertainment" class="nav-link">Entertainment</a></li>
+ <li><a href="#restaurants" class="nav-link">Restaurants</a></li>
+ <li><a href="#area" class="nav-link">The Area</a></li>
+ <li><a href="#history" class="nav-link">History</a></li>
+ <li><a href="#contact" class="nav-link">Contact</a></li>
+ </ul>
+ <div class="hamburger">
+ <span class="bar"></span>
+ <span class="bar"></span>
+ <span class="bar"></span>
+ </div>
+ </div>
+ </nav>
+
+ <!-- Hero Section -->
+ <section id="home" class="hero" style="background: linear-gradient(135deg, rgba(0, 82, 204, 0.5) 0%, rgba(3, 169, 244, 0.5) 100%), url('https://images.unsplash.com/photo-1615880484746-a134be9a6ecf?w=1920&q=80') center/cover no-repeat;">
+ <div class="hero-content">
+ <div class="hero-text">
+ <h1 class="hero-title">San Diego Living at Its Finest</h1>
+ <p class="hero-subtitle">Premium rental in the heart of Clairemont - Bill Fox San Diego Rental</p>
+ <div class="hero-buttons">
+ <a href="#property" class="btn-primary">Explore Property</a>
+ <a href="#contact" class="btn-secondary">Inquire Now</a>
+ </div>
+ </div>
+ </div>
+ <div class="hero-scroll">
+ <span>Scroll to explore</span>
+ <div class="scroll-arrow"></div>
+ </div>
+ </section>
+
+ <!-- Quick Stats -->
+ <section class="stats">
+ <div class="container">
+ <div class="stats-grid">
+ <div class="stat-item">
+ <h3>92117</h3>
+ <p>Clairemont</p>
+ </div>
+ <div class="stat-item">
+ <h3>Beach</h3>
+ <p>Nearby</p>
+ </div>
+ <div class="stat-item">
+ <h3>Central</h3>
+ <p>Location</p>
+ </div>
+ <div class="stat-item">
+ <h3>Vibrant</h3>
+ <p>Neighborhood</p>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Property Section -->
+ <section id="property" class="villas">
+ <div class="container">
+ <div class="section-header">
+ <h2>Your San Diego Home Away From Home</h2>
+ <p>Experience the perfect blend of comfort and San Diego lifestyle</p>
+ </div>
+
+ <div class="villas-grid">
+ <!-- Main Property -->
+ <div class="villa-card">
+ <div class="villa-image">
+ <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=800&q=80" alt="3306 Lloyd Street Property" style="width: 100%; height: 100%; object-fit: cover;">
+ <div class="villa-badge">Quality Living</div>
+ </div>
+ <div class="villa-content">
+ <h3>3306 Lloyd Street</h3>
+ <div class="villa-specs">
+ <span><i class="fas fa-map-marker-alt"></i> Clairemont</span>
+ <span><i class="fas fa-home"></i> Well-Maintained</span>
+ <span><i class="fas fa-sun"></i> San Diego</span>
+ </div>
+ <p>Located in the heart of Clairemont, this well-appointed rental offers comfortable living with easy access to everything San Diego has to offer. Close to beaches, parks, shopping, and dining.</p>
+ <div class="villa-amenities">
+ <span>Near Beaches</span>
+ <span>Shopping Nearby</span>
+ <span>Great Location</span>
+ <span>Easy Freeway Access</span>
+ <span>Family Friendly</span>
+ <span>Quiet Street</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Location -->
+ <div class="villa-card">
+ <div class="villa-image">
+ <img src="https://images.unsplash.com/photo-1519802772250-a52a9af0eacb?w=800&q=80" alt="San Diego Skyline" style="width: 100%; height: 100%; object-fit: cover;">
+ <div class="villa-badge">Prime Location</div>
+ </div>
+ <div class="villa-content">
+ <h3>Clairemont Neighborhood</h3>
+ <div class="villa-specs">
+ <span><i class="fas fa-map-marker-alt"></i> 92117</span>
+ <span><i class="fas fa-city"></i> Central San Diego</span>
+ <span><i class="fas fa-water"></i> Near Coast</span>
+ </div>
+ <p>Situated in the centrally-located Clairemont neighborhood, this property provides easy access to beaches, Mission Bay, Balboa Park, and all of San Diego's top attractions.</p>
+ <div class="villa-amenities">
+ <span>Near Mission Bay</span>
+ <span>Close to Beaches</span>
+ <span>Shopping Centers</span>
+ <span>Parks Nearby</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Neighborhood -->
+ <div class="villa-card">
+ <div class="villa-image">
+ <img src="https://images.unsplash.com/photo-1527004013197-933c4bb611b3?w=800&q=80" alt="San Diego Beach" style="width: 100%; height: 100%; object-fit: cover;">
+ <div class="villa-badge">San Diego Lifestyle</div>
+ </div>
+ <div class="villa-content">
+ <h3>The San Diego Experience</h3>
+ <div class="villa-specs">
+ <span><i class="fas fa-umbrella-beach"></i> Beach Culture</span>
+ <span><i class="fas fa-sun"></i> Perfect Weather</span>
+ <span><i class="fas fa-heart"></i> Friendly Community</span>
+ </div>
+ <p>Experience America's Finest City with year-round perfect weather, stunning beaches, world-class attractions, and a vibrant cultural scene. San Diego offers the ultimate California lifestyle.</p>
+ <div class="villa-amenities">
+ <span>Beach Access</span>
+ <span>Outdoor Recreation</span>
+ <span>Great Restaurants</span>
+ <span>Family Friendly</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Entertainment Section -->
+ <section id="entertainment" class="experiences">
+ <div class="container">
+ <div class="section-header">
+ <h2>Entertainment & Attractions</h2>
+ <p>San Diego's world-famous attractions and activities minutes from your door</p>
+ </div>
+
+ <div class="experiences-grid">
+ <div class="experience-card">
+ <div class="experience-icon">
+ <i class="fas fa-umbrella-beach"></i>
+ </div>
+ <h3>Beaches</h3>
+ <p>Access to San Diego's stunning coastline including Pacific Beach, Mission Beach, La Jolla Shores, and Ocean Beach - perfect for surfing, swimming, and sunbathing.</p>
+ <div class="experience-links">
+ <a href="https://www.sandiego.gov/lifeguards/beaches" target="_blank" rel="noopener">San Diego Beaches</a>
+ <a href="https://www.sandiego.org/explore/things-to-do/beaches-bays.aspx" target="_blank" rel="noopener">Beach Guide</a>
+ <a href="https://www.pacificbeach.org/" target="_blank" rel="noopener">Pacific Beach</a>
+ <a href="https://www.sandiego.gov/lifeguards/beaches/ob" target="_blank" rel="noopener">Ocean Beach</a>
+ </div>
+ </div>
+
+ <div class="experience-card">
+ <div class="experience-icon">
+ <i class="fas fa-paw"></i>
+ </div>
+ <h3>San Diego Zoo & Safari Park</h3>
+ <p>Visit the world-renowned San Diego Zoo in Balboa Park and the expansive San Diego Zoo Safari Park, featuring thousands of animals in naturalistic habitats.</p>
+ <div class="experience-links">
+ <a href="https://zoo.sandiegozoo.org/" target="_blank" rel="noopener">San Diego Zoo</a>
+ <a href="https://www.sdzsafaripark.org/" target="_blank" rel="noopener">Safari Park</a>
+ </div>
+ </div>
+
+ <div class="experience-card">
+ <div class="experience-icon">
+ <i class="fas fa-water"></i>
+ </div>
+ <h3>Mission Bay & SeaWorld</h3>
+ <p>Enjoy water sports, beach activities, and marine life encounters at Mission Bay and SeaWorld San Diego.</p>
+ <div class="experience-links">
+ <a href="https://seaworld.com/san-diego/" target="_blank" rel="noopener">SeaWorld</a>
+ <a href="https://www.sandiego.gov/park-and-recreation/parks/regional/missionbay" target="_blank" rel="noopener">Mission Bay Park</a>
+ </div>
+ </div>
+
+ <div class="experience-card">
+ <div class="experience-icon">
+ <i class="fas fa-landmark"></i>
+ </div>
+ <h3>Balboa Park</h3>
+ <p>Explore 1,200 acres of cultural attractions including museums, gardens, theaters, and the famous San Diego Zoo.</p>
+ <div class="experience-links">
+ <a href="https://www.balboapark.org/" target="_blank" rel="noopener">Balboa Park</a>
+ </div>
+ </div>
+
+ <div class="experience-card">
+ <div class="experience-icon">
+ <i class="fas fa-ship"></i>
+ </div>
+ <h3>USS Midway Museum</h3>
+ <p>Tour the historic aircraft carrier and experience naval aviation history in downtown San Diego's waterfront.</p>
+ <div class="experience-links">
+ <a href="https://www.midway.org/" target="_blank" rel="noopener">USS Midway Museum</a>
+ </div>
+ </div>
+
+ <div class="experience-card">
+ <div class="experience-icon">
+ <i class="fas fa-shopping-bag"></i>
+ </div>
+ <h3>Shopping & Gaslamp Quarter</h3>
+ <p>Explore the historic Gaslamp Quarter, Fashion Valley, and Seaport Village for dining, shopping, and nightlife.</p>
+ <div class="experience-links">
+ <a href="https://gaslamp.org/" target="_blank" rel="noopener">Gaslamp Quarter</a>
+ <a href="https://www.simon.com/mall/fashion-valley" target="_blank" rel="noopener">Fashion Valley</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Restaurants Section -->
+ <section id="restaurants" class="seasons">
+ <div class="container">
+ <div class="section-header">
+ <h2>Local Restaurants & Dining</h2>
+ <p>Diverse culinary experiences from casual to fine dining near Clairemont</p>
+ </div>
+
+ <div class="seasons-grid">
+ <div class="season-card">
+ <div class="season-image" style="background: linear-gradient(135deg, rgba(244, 67, 54, 0.8) 0%, rgba(233, 30, 99, 0.8) 100%), url('https://images.unsplash.com/photo-1565299585323-38d6b0865b47?w=800&q=80') center/cover;">
+ <div class="season-overlay">
+ <h3>Mexican Cuisine</h3>
+ <span>Local Favorites</span>
+ </div>
+ </div>
+ <div class="season-content">
+ <h4>Authentic Mexican Food</h4>
+ <p>San Diego is famous for its exceptional Mexican food, from street tacos to upscale dining.</p>
+ <ul>
+ <li><a href="https://www.lolitasmexicanfood.com/" target="_blank" rel="noopener">Lolita's Mexican Food</a> - Authentic tacos and burritos</li>
+ <li><a href="https://www.yelp.com/biz/los-primos-mexican-food-san-diego" target="_blank" rel="noopener">Los Primos Mexican Food</a> - Family favorite</li>
+ <li><a href="https://www.cafecoyoteoldtown.com/" target="_blank" rel="noopener">Café Coyote</a> - Old Town dining experience</li>
+ <li><a href="https://www.eatpuesto.com/" target="_blank" rel="noopener">Puesto</a> - Modern Mexican with craft cocktails</li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="season-card">
+ <div class="season-image" style="background: linear-gradient(135deg, rgba(255, 152, 0, 0.8) 0%, rgba(255, 193, 7, 0.8) 100%), url('https://images.unsplash.com/photo-1582878826629-29b7ad1cdc43?w=800&q=80') center/cover;">
+ <div class="season-overlay">
+ <h3>Asian Cuisine</h3>
+ <span>Diverse Options</span>
+ </div>
+ </div>
+ <div class="season-content">
+ <h4>Asian Dining</h4>
+ <p>From sushi to pho, San Diego's Asian food scene offers incredible variety and quality.</p>
+ <ul>
+ <li><a href="https://www.sandiego.org/explore/things-to-do/dining-nightlife/convoy-district.aspx" target="_blank" rel="noopener">Convoy Street</a> - San Diego's "Asian Restaurant Row"</li>
+ <li><a href="https://www.yelp.com/biz/phuong-trang-san-diego" target="_blank" rel="noopener">Phuong Trang</a> - Authentic Vietnamese</li>
+ <li><a href="https://yakyudori.com/" target="_blank" rel="noopener">Yakyudori</a> - Japanese yakitori</li>
+ <li><a href="https://www.dumplinginn.com/" target="_blank" rel="noopener">Dumpling Inn</a> - Chinese favorites</li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="season-card">
+ <div class="season-image" style="background: linear-gradient(135deg, rgba(3, 169, 244, 0.8) 0%, rgba(0, 188, 212, 0.8) 100%), url('https://images.unsplash.com/photo-1559737558-2f5a553999e7?w=800&q=80') center/cover;">
+ <div class="season-overlay">
+ <h3>Seafood & Coastal</h3>
+ <span>Fresh Catch</span>
+ </div>
+ </div>
+ <div class="season-content">
+ <h4>Ocean Fresh</h4>
+ <p>Being a coastal city, San Diego offers excellent seafood restaurants with ocean views.</p>
+ <ul>
+ <li><a href="https://www.thefishmarket.com/" target="_blank" rel="noopener">The Fish Market</a> - Waterfront dining</li>
+ <li><a href="https://bluewaterseafoodandgrill.com/" target="_blank" rel="noopener">Blue Water Seafood Market & Grill</a></li>
+ <li><a href="https://pointlomaseafoods.com/" target="_blank" rel="noopener">Point Loma Seafoods</a> - Fresh and casual</li>
+ <li><a href="https://www.georgesatthecove.com/" target="_blank" rel="noopener">George's at the Cove</a> - Fine dining in La Jolla</li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="season-card">
+ <div class="season-image" style="background: linear-gradient(135deg, rgba(156, 39, 176, 0.8) 0%, rgba(103, 58, 183, 0.8) 100%), url('https://images.unsplash.com/photo-1550547660-d9450f859349?w=800&q=80') center/cover;">
+ <div class="season-overlay">
+ <h3>American & Casual</h3>
+ <span>Local Spots</span>
+ </div>
+ </div>
+ <div class="season-content">
+ <h4>Neighborhood Favorites</h4>
+ <p>Great local restaurants, cafes, and breweries in the Clairemont and surrounding areas.</p>
+ <ul>
+ <li><a href="https://www.clairemonttownsquare.com/" target="_blank" rel="noopener">Clairemont Town Square</a> - Variety of dining options</li>
+ <li><a href="https://www.stonebrewing.com/visit/restaurants/liberty-station" target="_blank" rel="noopener">Stone Brewing</a> - Craft beer and food</li>
+ <li><a href="https://www.thebrokenyolkcafe.com/" target="_blank" rel="noopener">The Broken Yolk Cafe</a> - Breakfast favorites</li>
+ <li><a href="https://www.in-n-out.com/" target="_blank" rel="noopener">In-N-Out Burger</a> - California classic</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Local Area Section -->
+ <section id="area" class="area">
+ <div class="container">
+ <div class="section-header">
+ <h2>Discover the Neighborhood</h2>
+ <p>Your guide to life in Clairemont, San Diego</p>
+ </div>
+
+ <!-- Interactive Map -->
+ <div class="map-container">
+ <div id="nosara-map" class="interactive-map"></div>
+ <div class="map-legend">
+ <h4>Local Highlights</h4>
+ <div class="legend-item">
+ <span class="legend-marker restaurant"></span>
+ <span>Restaurants</span>
+ </div>
+ <div class="legend-item">
+ <span class="legend-marker hotel"></span>
+ <span>Entertainment</span>
+ </div>
+ <div class="legend-item">
+ <span class="legend-marker beach"></span>
+ <span>Parks & Trails</span>
+ </div>
+ <div class="legend-item">
+ <span class="legend-marker activity"></span>
+ <span>Shopping</span>
+ </div>
+ </div>
+ </div>
+
+ <!-- Local Recommendations -->
+ <div class="recommendations">
+ <div class="rec-category">
+ <h3><i class="fas fa-utensils"></i> Top Restaurants & Bars</h3>
+ <div class="rec-grid">
+ <div class="rec-item">
+ <h4><a href="https://www.lolitasmexicanfood.com/" target="_blank" rel="noopener" class="rec-link">Lolita's Mexican Food</a></h4>
+ <p>Authentic California-style Mexican food with famous carne asada fries</p>
+ <span class="rec-distance">2.5 mi</span>
+ </div>
+ <div class="rec-item">
+ <h4><a href="https://www.sandiego.org/explore/things-to-do/dining-nightlife/convoy-district.aspx" target="_blank" rel="noopener" class="rec-link">Convoy Street Asian Dining</a></h4>
+ <p>San Diego's "Asian Restaurant Row" with incredible variety</p>
+ <span class="rec-distance">3.2 mi</span>
+ </div>
+ <div class="rec-item">
+ <h4><a href="https://www.stonebrewing.com/visit/restaurants/liberty-station" target="_blank" rel="noopener" class="rec-link">Stone Brewing World Bistro</a></h4>
+ <p>Craft brewery and restaurant with award-winning beers and food</p>
+ <span class="rec-distance">6.5 mi</span>
+ </div>
+ <div class="rec-item">
+ <h4><a href="https://www.clairemonttownsquare.com/" target="_blank" rel="noopener" class="rec-link">Clairemont Town Square</a></h4>
+ <p>Local shopping center with various dining and shopping options</p>
+ <span class="rec-distance">1.5 mi</span>
+ </div>
+ </div>
+ </div>
+
+ <div class="rec-category">
+ <h3><i class="fas fa-map-marked"></i> Nearby Attractions</h3>
+ <div class="rec-grid">
+ <div class="rec-item">
+ <h4><a href="https://www.sandiego.gov/park-and-recreation/parks/regional/missionbay" target="_blank" rel="noopener" class="rec-link">Mission Bay Park</a></h4>
+ <p>Large aquatic park perfect for water sports, beaches, and picnics</p>
+ <span class="rec-distance">4.5 mi</span>
+ </div>
+ <div class="rec-item">
+ <h4><a href="https://www.balboapark.org/" target="_blank" rel="noopener" class="rec-link">Balboa Park</a></h4>
+ <p>1,200-acre urban park with museums, gardens, and the San Diego Zoo</p>
+ <span class="rec-distance">8 mi</span>
+ </div>
+ <div class="rec-item">
+ <h4><a href="https://www.pacificbeach.org/" target="_blank" rel="noopener" class="rec-link">Pacific Beach</a></h4>
+ <p>Popular beach town with boardwalk, surfing, and vibrant nightlife</p>
+ <span class="rec-distance">5.5 mi</span>
+ </div>
+ <div class="rec-item">
+ <h4><a href="https://www.sandiego.gov/park-and-recreation/parks/osprp/tecolotecanyon" target="_blank" rel="noopener" class="rec-link">Tecolote Canyon Natural Park</a></h4>
+ <p>Local nature preserve with hiking trails and natural beauty</p>
+ <span class="rec-distance">1 mi</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- History Section -->
+ <section id="history" class="history">
+ <div class="container">
+ <div class="section-header">
+ <h2>The Rich History of San Diego & Clairemont</h2>
+ <p>From Native American heritage to America's Finest City - discover San Diego's fascinating story</p>
+ </div>
+
+ <div class="timeline">
+ <div class="timeline-item">
+ <div class="timeline-marker"></div>
+ <div class="timeline-content">
+ <h3>Pre-1542 - Native American Heritage</h3>
+ <p>The Kumeyaay people inhabited the San Diego region for thousands of years before European contact. Their villages dotted the coastline and inland valleys, with a rich culture centered on fishing, hunting, and gathering.</p>
+ </div>
+ </div>
+
+ <div class="timeline-item">
+ <div class="timeline-marker"></div>
+ <div class="timeline-content">
+ <h3>1542 - European Discovery</h3>
+ <p>Juan Rodríguez Cabrillo became the first European to visit San Diego Bay, claiming the area for Spain. The natural harbor would become one of California's most important ports.</p>
+ </div>
+ </div>
+
+ <div class="timeline-item">
+ <div class="timeline-marker"></div>
+ <div class="timeline-content">
+ <h3>1769 - Mission San Diego de Alcalá</h3>
+ <p>Father Junípero Serra established the first of California's 21 missions in San Diego, marking the beginning of Spanish colonization. The mission became the birthplace of California.</p>
+ </div>
+ </div>
+
+ <div class="timeline-item">
+ <div class="timeline-marker"></div>
+ <div class="timeline-content">
+ <h3>1850 - California Statehood</h3>
+ <p>California became the 31st state, and San Diego was incorporated as a city. The city grew slowly but steadily as a frontier town and important West Coast port.</p>
+ </div>
+ </div>
+
+ <div class="timeline-item">
+ <div class="timeline-marker"></div>
+ <div class="timeline-content">
+ <h3>1940s-1950s - Post-War Boom & Clairemont Development</h3>
+ <p>Following World War II, San Diego experienced massive growth due to the military presence. Clairemont was developed in the 1950s as one of the nation's first master-planned communities, providing affordable housing for the growing population.</p>
+ </div>
+ </div>
+
+ <div class="timeline-item">
+ <div class="timeline-marker"></div>
+ <div class="timeline-content">
+ <h3>1960s-1970s - Cultural Renaissance</h3>
+ <p>San Diego emerged as a major cultural center with the expansion of Balboa Park's museums, the growth of the San Diego Zoo, and the development of the University of California San Diego. The city's laid-back beach culture attracted people from around the world.</p>
+ </div>
+ </div>
+
+ <div class="timeline-item">
+ <div class="timeline-marker"></div>
+ <div class="timeline-content">
+ <h3>Today - America's Finest City</h3>
+ <p>San Diego is now the eighth-largest city in the United States, known for its ideal climate, beautiful beaches, thriving biotech industry, and quality of life. Clairemont remains a vibrant, centrally-located neighborhood with easy access to all the city has to offer.</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="history-highlights">
+ <h3>What Makes San Diego Special</h3>
+ <div class="heritage-grid">
+ <div class="heritage-item">
+ <i class="fas fa-sun"></i>
+ <h4>Perfect Climate</h4>
+ <p>Year-round mild temperatures averaging 70°F, with over 260 sunny days per year - truly America's Finest Weather.</p>
+ </div>
+ <div class="heritage-item">
+ <i class="fas fa-water"></i>
+ <h4>70 Miles of Beaches</h4>
+ <p>From the cliffs of La Jolla to the shores of Coronado, San Diego offers stunning coastal beauty and endless water activities.</p>
+ </div>
+ <div class="heritage-item">
+ <i class="fas fa-anchor"></i>
+ <h4>Military Heritage</h4>
+ <p>Home to the largest U.S. Navy fleet concentration, San Diego has a proud military tradition dating back over a century.</p>
+ </div>
+ <div class="heritage-item">
+ <i class="fas fa-palette"></i>
+ <h4>Cultural Hub</h4>
+ <p>Balboa Park houses 17 museums, numerous gardens, and the world-famous San Diego Zoo in a stunning 1,200-acre urban park.</p>
+ </div>
+ <div class="heritage-item">
+ <i class="fas fa-taco"></i>
+ <h4>Culinary Scene</h4>
+ <p>From authentic Mexican cuisine to craft breweries, San Diego's food scene reflects its diverse culture and proximity to Mexico.</p>
+ </div>
+ <div class="heritage-item">
+ <i class="fas fa-flask"></i>
+ <h4>Innovation Center</h4>
+ <p>San Diego is a world leader in biotechnology, telecommunications, and research, home to major universities and research institutes.</p>
+ </div>
+ <div class="heritage-item">
+ <i class="fas fa-home"></i>
+ <h4>Clairemont Community</h4>
+ <p>Centrally located with excellent schools, parks, and easy access to beaches, downtown, and all major freeways.</p>
+ </div>
+ <div class="heritage-item">
+ <i class="fas fa-heart"></i>
+ <h4>Quality of Life</h4>
+ <p>Consistently ranked among the best places to live in America for its lifestyle, outdoor recreation, and community spirit.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Contact Section -->
+ <section id="contact" class="contact">
+ <div class="container">
+ <div class="section-header">
+ <h2>Get in Touch</h2>
+ <p>Interested in this San Diego property? Contact Bill Fox for more information</p>
+ </div>
+
+ <div class="contact-content">
+ <div class="contact-info">
+ <div class="contact-item">
+ <i class="fas fa-envelope"></i>
+ <h4>Email</h4>
+ <p><a href="mailto:info@billfoxrentals.com">info@billfoxrentals.com</a></p>
+ </div>
+ <div class="contact-item">
+ <i class="fas fa-phone"></i>
+ <h4>Phone</h4>
+ <p><a href="tel:+18585551234">+1 (858) 555-1234</a></p>
+ </div>
+ <div class="contact-item">
+ <i class="fas fa-map-marker-alt"></i>
+ <h4>Address</h4>
+ <p>3306 Lloyd Street<br>San Diego, CA 92117</p>
+ </div>
+ </div>
+
+ <div class="contact-form">
+ <h3>Send Us a Message</h3>
+ <form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
+ <div class="form-row">
+ <input type="text" name="name" placeholder="Your Name" required>
+ <input type="email" name="email" placeholder="Your Email" required>
+ </div>
+ <div class="form-row">
+ <input type="tel" name="phone" placeholder="Phone Number">
+ <input type="date" name="preferred-date" placeholder="Preferred Viewing Date">
+ </div>
+ <textarea name="message" rows="6" placeholder="Tell us about your interest in this property..." required></textarea>
+ <button type="submit">Send Message</button>
+ </form>
+ </div>
+ </div>
+
+ <!-- Find Us Section -->
+ <div class="find-us">
+ <div class="section-header">
+ <h2>Find Us</h2>
+ <p>3306 Lloyd Street, San Diego, CA 92117</p>
+ </div>
+
+ <div class="embedded-map">
+ <iframe
+ src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3353.8!2d-117.21!3d32.82!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dc00d9e8e7c8e9%3A0x123456789!2s3306%20Lloyd%20St%2C%20San%20Diego%2C%20CA%2092117!5e0!3m2!1sen!2sus!4v1234567890"
+ width="100%"
+ height="450"
+ style="border:0;"
+ allowfullscreen=""
+ loading="lazy">
+ </iframe>
+ </div>
+
+ <div class="travel-info">
+ <h3>Getting Here</h3>
+ <div class="travel-overview">
+ <div class="travel-option">
+ <i class="fas fa-plane"></i>
+ <h4>From San Diego Airport</h4>
+ <p>15-20 minutes via I-5 N and I-8 E</p>
+ <a href="https://www.google.com/maps/dir/San+Diego+International+Airport,+North+Harbor+Drive,+San+Diego,+CA/3306+Lloyd+St,+San+Diego,+CA+92117" target="_blank" rel="noopener">Get Directions →</a>
+ </div>
+ <div class="travel-option">
+ <i class="fas fa-building"></i>
+ <h4>From Downtown San Diego</h4>
+ <p>15 minutes via I-5 N</p>
+ <a href="https://www.google.com/maps/dir/Downtown+San+Diego,+San+Diego,+CA/3306+Lloyd+St,+San+Diego,+CA+92117" target="_blank" rel="noopener">Get Directions →</a>
+ </div>
+ <div class="travel-option">
+ <i class="fas fa-umbrella-beach"></i>
+ <h4>From Pacific Beach</h4>
+ <p>10 minutes via Balboa Ave</p>
+ <a href="https://www.google.com/maps/dir/Pacific+Beach,+San+Diego,+CA/3306+Lloyd+St,+San+Diego,+CA+92117" target="_blank" rel="noopener">Get Directions →</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Footer -->
+ <footer class="footer">
+ <div class="container">
+ <div class="footer-content">
+ <div class="footer-section">
+ <h3>Bill Fox San Diego Rental</h3>
+ <p>Premium rental in the heart of San Diego's Clairemont neighborhood. Experience the best of America's Finest City with perfect weather year-round.</p>
+ <div class="social-links">
+ <a href="#" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
+ <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
+ <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
+ </div>
+ </div>
+
+ <div class="footer-section">
+ <h4>Quick Links</h4>
+ <ul>
+ <li><a href="#property">Property</a></li>
+ <li><a href="#entertainment">Entertainment</a></li>
+ <li><a href="#restaurants">Restaurants</a></li>
+ <li><a href="#history">History</a></li>
+ <li><a href="#area">The Area</a></li>
+ </ul>
+ </div>
+
+ <div class="footer-section">
+ <h4>Contact</h4>
+ <ul>
+ <li><a href="mailto:info@billfoxrentals.com">info@billfoxrentals.com</a></li>
+ <li><a href="tel:+18585551234">+1 (858) 555-1234</a></li>
+ <li>3306 Lloyd Street, San Diego, CA 92117</li>
+ </ul>
+ </div>
+ </div>
+
+ <div class="footer-bottom">
+ <p>© 2025 Bill Fox San Diego Rental. All rights reserved.</p>
+ </div>
+ </div>
+ </footer>
+
+ <script src="/js/main.js"></script>
+</body>
+</html>
diff --git a/js/main.js b/js/main.js
new file mode 100644
index 0000000..cf1e406
--- /dev/null
+++ b/js/main.js
@@ -0,0 +1,284 @@
+// Mobile Navigation Toggle
+const hamburger = document.querySelector('.hamburger');
+const navMenu = document.querySelector('.nav-menu');
+
+hamburger.addEventListener('click', () => {
+ hamburger.classList.toggle('active');
+ navMenu.classList.toggle('active');
+});
+
+// Close mobile menu when clicking a link
+document.querySelectorAll('.nav-link').forEach(link => {
+ link.addEventListener('click', () => {
+ hamburger.classList.remove('active');
+ navMenu.classList.remove('active');
+ });
+});
+
+// Smooth Scrolling
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function(e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ if (target) {
+ const offset = 70; // navbar height
+ const targetPosition = target.offsetTop - offset;
+ window.scrollTo({
+ top: targetPosition,
+ behavior: 'smooth'
+ });
+ }
+ });
+});
+
+// Navbar scroll effect
+let lastScroll = 0;
+const navbar = document.querySelector('.navbar');
+
+window.addEventListener('scroll', () => {
+ const currentScroll = window.pageYOffset;
+
+ if (currentScroll <= 0) {
+ navbar.style.boxShadow = '0 5px 20px rgba(0,0,0,0.1)';
+ return;
+ }
+
+ if (currentScroll > lastScroll && currentScroll > 100) {
+ // Scrolling down
+ navbar.style.transform = 'translateY(-100%)';
+ } else {
+ // Scrolling up
+ navbar.style.transform = 'translateY(0)';
+ navbar.style.boxShadow = '0 5px 30px rgba(0,0,0,0.15)';
+ }
+
+ lastScroll = currentScroll;
+});
+
+// Leaflet Map Integration - Laurel Canyon Location
+function initMap() {
+ // Coordinates for 2755 Carmar Drive, Los Angeles, CA 90046
+ const propertyLocation = [34.1144, -118.3683];
+
+ // Initialize map
+ const map = L.map('nosara-map').setView(propertyLocation, 13);
+
+ // Add OpenStreetMap tile layer (free, no API key needed)
+ L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+ maxZoom: 19
+ }).addTo(map);
+
+ // Custom icon for main property
+ const propertyIcon = L.divIcon({
+ className: 'custom-property-marker',
+ html: '<div style="background: #8B4513; color: white; width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; border: 3px solid white; box-shadow: 0 3px 10px rgba(0,0,0,0.3);"><i class="fas fa-home" style="transform: rotate(45deg); font-size: 14px;"></i></div>',
+ iconSize: [30, 30],
+ iconAnchor: [15, 30],
+ popupAnchor: [0, -30]
+ });
+
+ // Add marker for property location
+ const propertyMarker = L.marker(propertyLocation, { icon: propertyIcon }).addTo(map);
+ propertyMarker.bindPopup(`
+ <div style="padding: 10px; font-family: 'Inter', sans-serif; min-width: 200px;">
+ <h3 style="margin: 0 0 5px 0; color: #8B4513; font-size: 16px;">2755 Carmar Drive</h3>
+ <p style="margin: 0; color: #666; font-size: 14px;">Luxury rental in historic Laurel Canyon</p>
+ </div>
+ `).openPopup();
+
+ // Add nearby points of interest
+ const pois = [
+ { lat: 34.1016, lng: -118.3465, title: 'Hollywood Bowl', type: 'hotel', icon: 'theater-masks' },
+ { lat: 34.0983, lng: -118.3701, title: 'Sunset Strip', type: 'restaurant', icon: 'music' },
+ { lat: 34.1097, lng: -118.3544, title: 'Runyon Canyon Park', type: 'beach', icon: 'hiking' },
+ { lat: 34.1169, lng: -118.3583, title: 'Canyon Country Store', type: 'restaurant', icon: 'shopping-bag' },
+ { lat: 34.1314, lng: -118.3688, title: 'Mulholland Drive Viewpoint', type: 'activity', icon: 'mountain' }
+ ];
+
+ const markerColors = {
+ restaurant: '#e74c3c',
+ hotel: '#3498db',
+ beach: '#2ecc71',
+ activity: '#f39c12'
+ };
+
+ pois.forEach(poi => {
+ const poiIcon = L.divIcon({
+ className: 'custom-poi-marker',
+ html: `<div style="background: ${markerColors[poi.type]}; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid white; box-shadow: 0 2px 5px rgba(0,0,0,0.3);"><i class="fas fa-${poi.icon}" style="font-size: 10px;"></i></div>`,
+ iconSize: [24, 24],
+ iconAnchor: [12, 12],
+ popupAnchor: [0, -12]
+ });
+
+ const marker = L.marker([poi.lat, poi.lng], { icon: poiIcon }).addTo(map);
+ marker.bindPopup(`
+ <div style="padding: 5px; font-family: 'Inter', sans-serif;">
+ <strong style="color: ${markerColors[poi.type]}; font-size: 14px;">${poi.title}</strong>
+ </div>
+ `);
+ });
+}
+
+// Initialize map when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+ if (document.getElementById('nosara-map')) {
+ initMap();
+ }
+});
+
+// Scroll Animations
+const observerOptions = {
+ threshold: 0.1,
+ rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ entry.target.style.opacity = '1';
+ entry.target.style.transform = 'translateY(0)';
+ }
+ });
+}, observerOptions);
+
+// Observe elements for animation
+document.addEventListener('DOMContentLoaded', () => {
+ const animateElements = document.querySelectorAll('.villa-card, .season-card, .rec-item, .heritage-item, .timeline-item');
+
+ animateElements.forEach(el => {
+ el.style.opacity = '0';
+ el.style.transform = 'translateY(30px)';
+ el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
+ observer.observe(el);
+ });
+});
+
+// Stats Counter Animation
+function animateCounter(element, target, duration = 2000) {
+ const start = 0;
+ const increment = target / (duration / 16);
+ let current = start;
+
+ const timer = setInterval(() => {
+ current += increment;
+ if (current >= target) {
+ element.textContent = target;
+ clearInterval(timer);
+ } else {
+ element.textContent = Math.floor(current);
+ }
+ }, 16);
+}
+
+// Trigger counter animation when stats section is visible
+const statsSection = document.querySelector('.stats');
+let statsAnimated = false;
+
+const statsObserver = new IntersectionObserver((entries) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting && !statsAnimated) {
+ const statNumbers = document.querySelectorAll('.stat-item h3');
+ statNumbers.forEach(stat => {
+ const target = parseInt(stat.textContent);
+ if (!isNaN(target)) {
+ animateCounter(stat, target);
+ }
+ });
+ statsAnimated = true;
+ }
+ });
+}, { threshold: 0.5 });
+
+if (statsSection) {
+ statsObserver.observe(statsSection);
+}
+
+// Form Validation
+const contactForm = document.querySelector('.contact-form');
+
+if (contactForm) {
+ contactForm.addEventListener('submit', (e) => {
+ // Get form values
+ const formData = new FormData(contactForm);
+ const data = Object.fromEntries(formData);
+
+ // Date validation
+ if (data['preferred-date']) {
+ const preferredDate = new Date(data['preferred-date']);
+ const today = new Date();
+ today.setHours(0, 0, 0, 0);
+
+ if (preferredDate < today) {
+ alert('Preferred viewing date must be today or later');
+ e.preventDefault();
+ return;
+ }
+ }
+
+ // Form will submit to Formspree
+ });
+}
+
+// Parallax Effect for Hero Section
+window.addEventListener('scroll', () => {
+ const scrolled = window.pageYOffset;
+ const heroText = document.querySelector('.hero-text');
+
+ if (heroText && scrolled < window.innerHeight) {
+ heroText.style.transform = `translateY(${scrolled * 0.5}px)`;
+ heroText.style.opacity = 1 - (scrolled / 500);
+ }
+});
+
+// Lazy Loading for Images
+if ('IntersectionObserver' in window) {
+ const imageObserver = new IntersectionObserver((entries, observer) => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ const img = entry.target;
+ img.src = img.dataset.src;
+ img.classList.add('loaded');
+ observer.unobserve(img);
+ }
+ });
+ });
+
+ document.querySelectorAll('img[data-src]').forEach(img => {
+ imageObserver.observe(img);
+ });
+}
+
+// Current year for footer
+const currentYearElement = document.querySelector('.footer-bottom p');
+if (currentYearElement) {
+ const currentYear = new Date().getFullYear();
+ const footerText = currentYearElement.textContent;
+ if (footerText && footerText.includes('2025')) {
+ currentYearElement.textContent = footerText.replace('2025', currentYear);
+ }
+}
+
+// Add active class to navigation based on scroll position
+window.addEventListener('scroll', () => {
+ let current = '';
+ const sections = document.querySelectorAll('section[id]');
+
+ sections.forEach(section => {
+ const sectionTop = section.offsetTop;
+ const sectionHeight = section.clientHeight;
+ if (pageYOffset >= (sectionTop - 100)) {
+ current = section.getAttribute('id');
+ }
+ });
+
+ document.querySelectorAll('.nav-link').forEach(link => {
+ link.classList.remove('active');
+ if (link.getAttribute('href') === `#${current}`) {
+ link.classList.add('active');
+ }
+ });
+});
+
+console.log('🎸 2755 Carmar Drive - Laurel Canyon Luxury Rental - Website Loaded Successfully');
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..7502357
--- /dev/null
+++ b/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "laurel-canyon-rental",
+ "version": "1.0.0",
+ "description": "High-end luxury rental website for 2755 Carmar Drive in historic Laurel Canyon, Los Angeles",
+ "main": "server.js",
+ "scripts": {
+ "start": "node server.js",
+ "dev": "node server.js",
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "keywords": ["laurel-canyon", "luxury-rental", "los-angeles", "real-estate"],
+ "author": "",
+ "license": "ISC"
+}
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..70be76c
--- /dev/null
+++ b/server.js
@@ -0,0 +1,98 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const PORT = process.env.PORT || 9100;
+
+// MIME types for different file extensions
+const mimeTypes = {
+ '.html': 'text/html',
+ '.css': 'text/css',
+ '.js': 'text/javascript',
+ '.json': 'application/json',
+ '.png': 'image/png',
+ '.jpg': 'image/jpeg',
+ '.jpeg': 'image/jpeg',
+ '.gif': 'image/gif',
+ '.svg': 'image/svg+xml',
+ '.ico': 'image/x-icon',
+ '.woff': 'font/woff',
+ '.woff2': 'font/woff2',
+ '.ttf': 'font/ttf',
+ '.eot': 'application/vnd.ms-fontobject'
+};
+
+const server = http.createServer((req, res) => {
+ console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
+
+ // Default to index.html for root path
+ let filePath = req.url === '/' ? '/index.html' : req.url;
+
+ // Remove query string if present
+ filePath = filePath.split('?')[0];
+
+ // Construct full file path
+ filePath = path.join(__dirname, filePath);
+
+ // Get file extension
+ const extname = String(path.extname(filePath)).toLowerCase();
+ const contentType = mimeTypes[extname] || 'application/octet-stream';
+
+ // Read and serve the file
+ fs.readFile(filePath, (error, content) => {
+ if (error) {
+ if (error.code === 'ENOENT') {
+ // File not found
+ res.writeHead(404, { 'Content-Type': 'text/html' });
+ res.end('<h1>404 - File Not Found</h1>', 'utf-8');
+ } else {
+ // Server error
+ res.writeHead(500);
+ res.end(`Server Error: ${error.code}`, 'utf-8');
+ }
+ } else {
+ // Success
+ res.writeHead(200, { 'Content-Type': contentType });
+ res.end(content, 'utf-8');
+ }
+ });
+});
+
+server.listen(PORT, '0.0.0.0', () => {
+ console.log('='.repeat(60));
+ console.log('🏖️ Bill Fox San Diego Rental - 3306 Lloyd Street');
+ console.log('='.repeat(60));
+ console.log(`🚀 Server running at http://0.0.0.0:${PORT}/`);
+ console.log(`📅 Started: ${new Date().toLocaleString()}`);
+ console.log('='.repeat(60));
+ console.log('\nPress Ctrl+C to stop the server\n');
+});
+
+// Handle server errors
+server.on('error', (error) => {
+ if (error.code === 'EADDRINUSE') {
+ console.error(`\n❌ Error: Port ${PORT} is already in use.`);
+ console.error(`Please close the other application or choose a different port.\n`);
+ process.exit(1);
+ } else {
+ console.error(`\n❌ Server Error: ${error.message}\n`);
+ process.exit(1);
+ }
+});
+
+// Graceful shutdown
+process.on('SIGTERM', () => {
+ console.log('\n\n👋 Shutting down gracefully...');
+ server.close(() => {
+ console.log('✅ Server closed successfully\n');
+ process.exit(0);
+ });
+});
+
+process.on('SIGINT', () => {
+ console.log('\n\n👋 Shutting down gracefully...');
+ server.close(() => {
+ console.log('✅ Server closed successfully\n');
+ process.exit(0);
+ });
+});
diff --git a/server.js.backup b/server.js.backup
new file mode 100644
index 0000000..fa28fa6
--- /dev/null
+++ b/server.js.backup
@@ -0,0 +1,98 @@
+const http = require('http');
+const fs = require('fs');
+const path = require('path');
+
+const PORT = 5300;
+
+// MIME types for different file extensions
+const mimeTypes = {
+ '.html': 'text/html',
+ '.css': 'text/css',
+ '.js': 'text/javascript',
+ '.json': 'application/json',
+ '.png': 'image/png',
+ '.jpg': 'image/jpeg',
+ '.jpeg': 'image/jpeg',
+ '.gif': 'image/gif',
+ '.svg': 'image/svg+xml',
+ '.ico': 'image/x-icon',
+ '.woff': 'font/woff',
+ '.woff2': 'font/woff2',
+ '.ttf': 'font/ttf',
+ '.eot': 'application/vnd.ms-fontobject'
+};
+
+const server = http.createServer((req, res) => {
+ console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
+
+ // Default to index.html for root path
+ let filePath = req.url === '/' ? '/index.html' : req.url;
+
+ // Remove query string if present
+ filePath = filePath.split('?')[0];
+
+ // Construct full file path
+ filePath = path.join(__dirname, filePath);
+
+ // Get file extension
+ const extname = String(path.extname(filePath)).toLowerCase();
+ const contentType = mimeTypes[extname] || 'application/octet-stream';
+
+ // Read and serve the file
+ fs.readFile(filePath, (error, content) => {
+ if (error) {
+ if (error.code === 'ENOENT') {
+ // File not found
+ res.writeHead(404, { 'Content-Type': 'text/html' });
+ res.end('<h1>404 - File Not Found</h1>', 'utf-8');
+ } else {
+ // Server error
+ res.writeHead(500);
+ res.end(`Server Error: ${error.code}`, 'utf-8');
+ }
+ } else {
+ // Success
+ res.writeHead(200, { 'Content-Type': contentType });
+ res.end(content, 'utf-8');
+ }
+ });
+});
+
+server.listen(PORT, '0.0.0.0', () => {
+ console.log('='.repeat(60));
+ console.log('🎸 2755 Carmar Drive - Laurel Canyon Luxury Rental');
+ console.log('='.repeat(60));
+ console.log(`🚀 Server running at http://0.0.0.0:${PORT}/`);
+ console.log(`📅 Started: ${new Date().toLocaleString()}`);
+ console.log('='.repeat(60));
+ console.log('\nPress Ctrl+C to stop the server\n');
+});
+
+// Handle server errors
+server.on('error', (error) => {
+ if (error.code === 'EADDRINUSE') {
+ console.error(`\n❌ Error: Port ${PORT} is already in use.`);
+ console.error(`Please close the other application or choose a different port.\n`);
+ process.exit(1);
+ } else {
+ console.error(`\n❌ Server Error: ${error.message}\n`);
+ process.exit(1);
+ }
+});
+
+// Graceful shutdown
+process.on('SIGTERM', () => {
+ console.log('\n\n👋 Shutting down gracefully...');
+ server.close(() => {
+ console.log('✅ Server closed successfully\n');
+ process.exit(0);
+ });
+});
+
+process.on('SIGINT', () => {
+ console.log('\n\n👋 Shutting down gracefully...');
+ server.close(() => {
+ console.log('✅ Server closed successfully\n');
+ process.exit(0);
+ });
+});
diff --git a/start.sh b/start.sh
new file mode 100755
index 0000000..a19298e
--- /dev/null
+++ b/start.sh
@@ -0,0 +1,29 @@
+#!/bin/bash
+
+# Startup script for Laurel Canyon Rental Website
+
+echo "🎸 Starting 2755 Carmar Drive Website Server..."
+
+# Kill any existing instances
+pkill -9 -f "node server.js" 2>/dev/null
+
+# Change to script directory
+cd "$(dirname "$0")"
+
+# Start server in background
+nohup node server.js > server.log 2>&1 &
+
+# Wait a moment for server to start
+sleep 2
+
+# Check if server is running
+if pgrep -f "node server.js" > /dev/null; then
+ echo "✅ Server started successfully!"
+ echo "🌐 Access at: http://localhost:5300/"
+ echo "📝 Logs: server.log"
+ echo ""
+ echo "To stop the server, run: pkill -f 'node server.js'"
+else
+ echo "❌ Failed to start server. Check server.log for errors."
+ exit 1
+fi
diff --git a/status.sh b/status.sh
new file mode 100755
index 0000000..6584df0
--- /dev/null
+++ b/status.sh
@@ -0,0 +1,44 @@
+#!/bin/bash
+
+# Status check for Laurel Canyon Rental Website
+
+echo "═══════════════════════════════════════════════════════════"
+echo "🎸 2755 Carmar Drive - Server Status"
+echo "═══════════════════════════════════════════════════════════"
+
+# Check if process is running
+if pgrep -f "node server.js" > /dev/null; then
+ echo "✅ Server is RUNNING"
+ PID=$(pgrep -f "node server.js")
+ echo " PID: $PID"
+
+ # Check if port is listening
+ if netstat -tlnp 2>/dev/null | grep -q 5300 || ss -tlnp 2>/dev/null | grep -q 5300; then
+ echo "✅ Port 5300 is OPEN"
+
+ # Test HTTP response
+ HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:5300/)
+ if [ "$HTTP_CODE" = "200" ]; then
+ echo "✅ Website is ACCESSIBLE (HTTP $HTTP_CODE)"
+ else
+ echo "⚠️ Website returned HTTP $HTTP_CODE"
+ fi
+ else
+ echo "❌ Port 5300 is NOT listening"
+ fi
+else
+ echo "❌ Server is NOT RUNNING"
+ echo ""
+ echo "To start the server, run: ./start.sh"
+ exit 1
+fi
+
+echo ""
+echo "🌐 Access URLs:"
+echo " Local: http://localhost:5300/"
+echo " Network: http://0.0.0.0:5300/"
+echo " External: http://45.61.58.125:5300/"
+echo ""
+echo "📝 View logs: tail -f server.log"
+echo "🛑 Stop: ./stop.sh"
+echo "═══════════════════════════════════════════════════════════"
diff --git a/stop.sh b/stop.sh
new file mode 100755
index 0000000..119cff3
--- /dev/null
+++ b/stop.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+
+# Stop script for Laurel Canyon Rental Website
+
+echo "🛑 Stopping server..."
+pkill -9 -f "node server.js"
+
+if ! pgrep -f "node server.js" > /dev/null; then
+ echo "✅ Server stopped successfully!"
+else
+ echo "⚠️ Server may still be running. Try: pkill -9 -f 'node server.js'"
+fi
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..47ea71d
--- /dev/null
+++ b/test.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Server Test</title>
+</head>
+<body>
+ <h1>SERVER IS WORKING!</h1>
+ <p>If you can see this, the server is running correctly.</p>
+ <p>Time: <script>document.write(new Date().toLocaleString());</script></p>
+ <a href="/">Go to Main Site</a>
+</body>
+</html>
(oldest)
·
back to Billy Website
·
Add noreferrer to all external target=_blank links 89629ef →