Initial commit: MSD backend API, docs, mockups, README
This commit is contained in:
root
@@ -0,0 +1,15 @@
|
||||
# Moore Sunny Daze Changelog
|
||||
|
||||
## 2026-07
|
||||
|
||||
### Added
|
||||
- **Project brief** — property details for Maravilla 1403 (Miramar Beach, FL): 3BR/2BA, sleeps 8, owners Tim & Ashley Moore
|
||||
- **Migration plan** — phased GoDaddy-to-Cloudflare domain transfer, Wix-to-custom direct-booking migration, email migration strategy
|
||||
- **Anti-VRBO playbook** — strategy to move from platform-dependent bookings to direct reservations
|
||||
- **Beach Direct product strategy** — white-label vacation rental website + booking system concept with 3 pricing tiers and no per-booking fees
|
||||
- **Stripe reservation system** plan — calendar + payment integration for direct bookings
|
||||
- **Email migration** documentation for moving from Gmail to branded domain email
|
||||
|
||||
### Added
|
||||
- **Theme mockups** (3 variants): theme-a-existing-style, theme-b-sunny-bold, theme-c-coastal-elegant
|
||||
- **Admin dashboard mockup** — reservation management UI design
|
||||
@@ -0,0 +1,103 @@
|
||||
# Moore Sunny Daze
|
||||
|
||||
**Direct-booking vacation rental site for Maravilla 1403, Miramar Beach FL.**
|
||||
|
||||
| | |
|
||||
|---|---|
|
||||
| **Owners** | Tim & Ashley Moore |
|
||||
| **Property** | Maravilla 1403 — 3BR/2BA, sleeps 8 |
|
||||
| **Location** | Miramar Beach, FL 32550 |
|
||||
| **Status** | 🚧 In Development |
|
||||
| **Deployment** | Core (152.53.33.195) |
|
||||
|
||||
## Architecture
|
||||
|
||||
```
|
||||
mooresunnydaze.com
|
||||
├── / (landing page) → /var/www/mooresunnydaze/index.html
|
||||
├── /admin/ (dashboard) → /var/www/mooresunnydaze/admin.html
|
||||
├── /api/* (booking API) → 127.0.0.1:8911 (FastAPI)
|
||||
└── /stripe-webhook (payments) → 127.0.0.1:8911
|
||||
```
|
||||
|
||||
## Tech Stack
|
||||
|
||||
| Layer | Tech |
|
||||
|---|---|
|
||||
| Frontend | Single-file HTML/CSS/JS (Coastal Elegant theme) |
|
||||
| Backend | FastAPI + uvicorn (Python) |
|
||||
| Database | SQLite |
|
||||
| Payments | Stripe Checkout |
|
||||
| Proxy | Caddy (reverse proxy + SSL) |
|
||||
| Process | systemd |
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Public
|
||||
|
||||
| Method | Path | Description |
|
||||
|--------|------|-------------|
|
||||
| GET | `/api/health` | Health check |
|
||||
| GET | `/api/property` | Property details |
|
||||
| GET | `/api/availability?month=YYYY-MM` | Booked dates for month |
|
||||
| POST | `/api/quote` | Calculate price for dates |
|
||||
| POST | `/api/booking` | Create booking → Stripe checkout |
|
||||
| GET | `/api/booking/{id}` | View booking details |
|
||||
|
||||
### Admin (Authorization: Bearer {key})
|
||||
|
||||
| Method | Path | Description |
|
||||
|--------|------|-------------|
|
||||
| GET | `/api/admin/stats` | Dashboard stats |
|
||||
| GET | `/api/admin/bookings` | All bookings |
|
||||
| GET | `/api/admin/guests` | Guest directory |
|
||||
| PATCH | `/api/admin/booking/{id}` | Update booking status |
|
||||
| POST | `/api/admin/block-date` | Block a date |
|
||||
| DELETE | `/api/admin/block-date` | Unblock a date |
|
||||
|
||||
### Stripe
|
||||
|
||||
| Method | Path | Description |
|
||||
|--------|------|-------------|
|
||||
| POST | `/stripe-webhook` | Stripe webhook (test mode) |
|
||||
| POST | `/stripe-webhook-live` | Stripe webhook (live mode) |
|
||||
|
||||
## Pricing
|
||||
|
||||
| Season | Dates | Nightly Rate |
|
||||
|--------|-------|-------------|
|
||||
| Peak | May 15 – Aug 15, holiday weeks | $295 |
|
||||
| Off-peak | All other dates | $225 |
|
||||
| Cleaning fee | Flat | $150 |
|
||||
| Pet fee | Per stay | $50 |
|
||||
| Minimum stay | | 3 nights |
|
||||
|
||||
## Deployment
|
||||
|
||||
```bash
|
||||
# Quick start (test)
|
||||
/opt/mooresunnydaze/venv/bin/uvicorn server:app --host 127.0.0.1 --port 8911 --app-dir /opt/mooresunnydaze
|
||||
|
||||
# Production deploy
|
||||
bash /tmp/deploy-msd.sh
|
||||
```
|
||||
|
||||
## Environment
|
||||
|
||||
Copy `.env.example` to `.env` and fill in:
|
||||
|
||||
| Variable | Description |
|
||||
|----------|-------------|
|
||||
| `STRIPE_SECRET_KEY` | Stripe API secret key |
|
||||
| `STRIPE_WEBHOOK_SECRET` | Stripe webhook signing secret |
|
||||
| `MSD_ADMIN_API_KEY` | Admin dashboard auth key |
|
||||
|
||||
## Related Projects
|
||||
|
||||
- **Beach Direct** — Commercial product built from this reference implementation. See `docs/beach-direct-project.md`.
|
||||
|
||||
## Domain
|
||||
|
||||
- Current: `mooresunnydaze.com` (Wix, DNS: 185.230.63.x)
|
||||
- Target: Transfer from GoDaddy → Cloudflare, point to Core (152.53.33.195)
|
||||
- Migration plan: `docs/migration-plan.md`
|
||||
@@ -0,0 +1,88 @@
|
||||
# Anti-VRBO Playbook — Beating Vacation Rental Site Bot Protection
|
||||
|
||||
## Test Results (Aug 1, 2026)
|
||||
|
||||
| Site | Protection | Camofox Result | Notes |
|
||||
|------|-----------|---------------|-------|
|
||||
| **Airbnb** | Cloudflare + custom | **BEATEN** ✓ | Full page load, 5.7KB body, all content extracted. Camofox + DataImpulse proxy cleared Cloudflare with zero issues. |
|
||||
| **VRBO** | Imperva/Incapsula | **BLOCKED** ✗ | "Bot or Not?" challenge wall. Imperva blocks at the application layer even after Cloudflare passthrough. Challenge doesn't auto-resolve even after 45s wait. |
|
||||
| **Booking.com** | Akamai | **Untested** | — |
|
||||
| **Vacasa** | Unknown | **Untested** | — |
|
||||
| **Evolve** | Unknown | **Untested** | — |
|
||||
|
||||
## VRBO / Imperva — What We Tried
|
||||
|
||||
### Failed Approaches
|
||||
1. **Direct camofox navigation** — Landed on "Bot or Not?" challenge page with Imperva session ID
|
||||
2. **Extended wait (45s)** — Challenge regenerates but never auto-resolves
|
||||
3. **Snapshot inspection** — Imperva challenge page has almost zero interactive elements; just a logo link
|
||||
|
||||
### Why Imperva Is Harder Than Cloudflare
|
||||
- Cloudflare challenges happen at the edge (before the page loads) and Camoufox's C++-level fingerprint spoofing clears them
|
||||
- Imperva challenges happen at the application layer AFTER the page loads — they inject their own JS that runs fingerprinting on top of whatever the browser reports
|
||||
- Imperva's SDK (`window._Incapsula_Resource`) does behavioral analysis: mouse movements, scroll patterns, timing
|
||||
- The challenge ID changes on every request (different UUID each time), suggesting it's stateless at the edge but stateful in their backend
|
||||
|
||||
## Strategies to Beat VRBO
|
||||
|
||||
### Strategy 1: Headful Browser with Human Emulation (Most Promising)
|
||||
Instead of headless camofox, use a real Chrome/Chromium with CDP and emulate realistic human behavior:
|
||||
```
|
||||
1. Launch Chrome with puppeteer-real-browser or nodriver
|
||||
2. Navigate to VRBO
|
||||
3. Inject human-like mouse movements (bezier curves, not straight lines)
|
||||
4. Random scrolls and hover events
|
||||
5. Wait for Imperva challenge to auto-resolve (usually 5-15s in a real browser)
|
||||
6. Extract data once page loads normally
|
||||
```
|
||||
|
||||
### Strategy 2: VRBO API Reverse Engineering
|
||||
VRBO's frontend calls internal APIs. If we can find the endpoints:
|
||||
- Search: `vrbo.com/api/v1/search?...`
|
||||
- Property details: `vrbo.com/api/v1/properties/1313017`
|
||||
- Calendar: `vrbo.com/api/v1/properties/1313017/calendar`
|
||||
|
||||
Many of these may have weaker bot protection than the HTML pages. Imperva primarily protects the SSR HTML; API calls may use simpler auth.
|
||||
|
||||
### Strategy 3: Browserbase / Anchor (Cloudflare Web Bot Auth)
|
||||
If VRBO opts into Cloudflare's Bot Verifier program, Browserbase/Anchor can get a signed "verified bot" token. But this only works if VRBO explicitly allows it — unlikely for a booking site.
|
||||
|
||||
### Strategy 4: Alternative Data Sources
|
||||
Since Airbnb works perfectly with camofox, and most vacation rentals cross-list:
|
||||
- **Airbnb** (working): Property details, pricing, reviews, calendar, photos
|
||||
- **Google Travel / Hotel search**: Aggregates VRBO listings
|
||||
- **VRBO via Google cache**: `webcache.googleusercontent.com/search?q=cache:vrbo.com/1313017`
|
||||
|
||||
### Strategy 5: Proxy Rotation + Fingerprint Diversity
|
||||
Imperva may be flagging specific DataImpulse IP ranges. Try:
|
||||
- Different proxy providers (SOAX, Bright Data, IPRoyal)
|
||||
- Different geolocations
|
||||
- Different Camoufox fingerprint profiles
|
||||
- Session-level IP rotation
|
||||
|
||||
## Recommended Approach for Moore Sunny Daze
|
||||
|
||||
**Short-term (now):** Use Airbnb data since camofox clears it consistently. All the same content is there — Tim's listing is synced across platforms.
|
||||
|
||||
**Medium-term (this week):** Implement Strategy 1 (headful browser with human emulation) specifically for VRBO. This is the most reliable path.
|
||||
|
||||
**Long-term (product):** Build a unified scraper that tries Airbnb first, falls back to headful browser for VRBO, and caches results. This becomes the "Competitive Intelligence" feature of Beach Direct — show owners how their property compares to nearby listings on ALL platforms.
|
||||
|
||||
## Airbnb Data We Successfully Extracted
|
||||
|
||||
From the Airbnb listing (camofox, Aug 1 2026):
|
||||
- Full property description
|
||||
- 47 amenities list
|
||||
- 5.0 rating across all categories (cleanliness, accuracy, check-in, communication, location, value)
|
||||
- 4 reviews with text
|
||||
- Calendar availability for Aug-Sep 2026
|
||||
- Host: Ashley, 1 year hosting
|
||||
- Property photos from Airbnb CDN
|
||||
- Pricing: shown after date selection (requires interaction)
|
||||
|
||||
## Next Steps
|
||||
1. [x] Confirm camofox beats Airbnb
|
||||
2. [x] Document VRBO Imperva failure
|
||||
3. [ ] Test headful browser approach for VRBO
|
||||
4. [ ] Test Booking.com, Vacasa, Evolve
|
||||
5. [ ] Build unified scraper module for Beach Direct
|
||||
@@ -0,0 +1,85 @@
|
||||
# Moore Sunny Daze — Email Migration: Gmail → MXroute
|
||||
|
||||
## Current State
|
||||
- Tim & Ashley use a @gmail.com address for rental inquiries
|
||||
- Business correspondence mixed with personal email
|
||||
- No professional domain-based email
|
||||
|
||||
## Target State
|
||||
- **Email:** reservations@mooresunnydaze.com (or hello@, stay@ — TBD)
|
||||
- **Platform:** Germaine's MXroute account
|
||||
- **Access:** Webmail (Roundcube) + IMAP/SMTP for phone/desktop
|
||||
|
||||
## Steps
|
||||
|
||||
### 1. Create mailbox on MXroute
|
||||
```bash
|
||||
# Via MXroute DirectAdmin (Germaine's account)
|
||||
# Add new mailbox: reservations@mooresunnydaze.com
|
||||
# Generate strong password, save to Vaultwarden
|
||||
```
|
||||
|
||||
### 2. Configure DNS at Cloudflare
|
||||
After domain transfer is complete, add MX records:
|
||||
```
|
||||
Type Name Content Priority TTL
|
||||
MX @ mx1.mxroute.com 10 120
|
||||
MX @ mx2.mxroute.com 20 120
|
||||
TXT @ v=spf1 include:mxroute.com ~all 120
|
||||
```
|
||||
|
||||
### 3. Add DKIM (if MXroute provides it)
|
||||
- Get DKIM record from MXroute control panel
|
||||
- Add as TXT record in Cloudflare DNS
|
||||
|
||||
### 4. Add DMARC (optional but recommended)
|
||||
```
|
||||
Type Name Content
|
||||
TXT _dmarc v=DMARC1; p=none; rua=mailto:g@germainebrown.com
|
||||
```
|
||||
|
||||
### 5. Test email delivery
|
||||
```bash
|
||||
# Send test from external account
|
||||
echo "test" | mail -s "Test" reservations@mooresunnydaze.com
|
||||
|
||||
# Verify receipt in Roundcube
|
||||
# Send reply back
|
||||
|
||||
# Check SPF/DKIM/DMARC at mail-tester.com
|
||||
```
|
||||
|
||||
### 6. Migrate existing emails (if needed)
|
||||
- Google Takeout export of Gmail mailbox
|
||||
- Import to MXroute via IMAP migration tool
|
||||
- OR: set up Gmail forwarding for 90 days
|
||||
|
||||
### 7. Configure on Tim & Ashley's devices
|
||||
- iPhone: Settings → Mail → Add Account → Other → IMAP
|
||||
- Server: mail.mxroute.com
|
||||
- IMAP port: 993 (SSL)
|
||||
- SMTP port: 587 (STARTTLS) or 465 (SSL)
|
||||
- Desktop: same IMAP settings in Apple Mail / Outlook / Thunderbird
|
||||
|
||||
### 8. Update all listings
|
||||
- VRBO/Airbnb contact email → reservations@mooresunnydaze.com
|
||||
- Facebook page contact → reservations@mooresunnydaze.com
|
||||
- New website contact → reservations@mooresunnydaze.com
|
||||
- Business cards/signage if any
|
||||
|
||||
### 9. Transition period (90 days)
|
||||
- Set Gmail auto-reply: "We've moved! Please email reservations@mooresunnydaze.com"
|
||||
- Forward Gmail → MXroute for 90 days
|
||||
- After 90 days: remove forwarding, keep Gmail for personal use only
|
||||
|
||||
## Email addresses to set up
|
||||
| Address | Purpose | Who accesses |
|
||||
|---------|---------|-------------|
|
||||
| reservations@ | Booking inquiries, guest communication | Tim & Ashley |
|
||||
| stay@ | Alternative booking alias | Tim & Ashley |
|
||||
| tim@ | Owner direct | Tim |
|
||||
| ashley@ | Owner direct | Ashley |
|
||||
|
||||
## Cost
|
||||
- **$0 additional** — included in Germaine's existing MXroute plan
|
||||
- Domain email hosting = free with our hosting
|
||||
@@ -0,0 +1,99 @@
|
||||
# Moore Sunny Daze — Migration Plan
|
||||
|
||||
- **Mockups:** https://mockup.iamgmb.com/mooresunnydaze/ — three theme options + admin dashboard
|
||||
- **Deployment standard:** mockup.iamgmb.com for prototypes/design review, proposals.iamgmb.com for business documents
|
||||
|
||||
## Current State
|
||||
| Asset | Provider | Details |
|
||||
|-------|----------|---------|
|
||||
| Domain | GoDaddy | mooresunnydaze.com |
|
||||
| Website | Wix | mooresunnydaze.com, Wix-built |
|
||||
| Email | Gmail | @gmail.com (exact address TBD) |
|
||||
| Booking | VRBO + Airbnb | vrbo.com/1313017, Airbnb listing |
|
||||
| Social | Facebook | facebook.com/mooresunnydaze |
|
||||
|
||||
## Phase 1: Domain Transfer (GoDaddy → Cloudflare)
|
||||
**Timeline:** 5-7 days (ICANN-mandated transfer lock)
|
||||
|
||||
### Steps
|
||||
1. **Unlock domain at GoDaddy**
|
||||
- GoDaddy Dashboard → Domain Settings → Turn off "Domain Lock"
|
||||
|
||||
2. **Get authorization code from GoDaddy**
|
||||
- Domain Settings → Transfer domain away → Copy auth code
|
||||
- Auth code valid for 15 days
|
||||
|
||||
3. **Initiate transfer at Cloudflare**
|
||||
- Cloudflare Dashboard → Domain Registration → Transfer Domains
|
||||
- Enter mooresunnydaze.com + auth code
|
||||
- Cost: $10.46 (.com transfer, adds 1 year to registration)
|
||||
|
||||
4. **Approve transfer**
|
||||
- GoDaddy sends confirmation email → approve
|
||||
- Optional: expedite by accepting at GoDaddy immediately
|
||||
|
||||
5. **Wait for transfer** (5 days typical)
|
||||
- Cloudflare auto-copies existing DNS records
|
||||
- Nameservers switch to Cloudflare automatically
|
||||
|
||||
6. **Verify DNS**
|
||||
- Check all records propagated
|
||||
- Enable DNSSEC (free at Cloudflare)
|
||||
- Keep proxy off until site is deployed (grey cloud)
|
||||
|
||||
## Phase 2: Website Migration (Wix → Us)
|
||||
**Timeline:** After domain transfer + 24hr DNS propagation
|
||||
|
||||
### Steps
|
||||
1. **Build new site** on our infrastructure
|
||||
- Serve from Core via Caddy
|
||||
- Domain: mooresunnydaze.com (A record → 152.53.33.195)
|
||||
- Static HTML landing page (single file) + booking portal pages
|
||||
|
||||
2. **DNS cutover**
|
||||
- Update A record for mooresunnydaze.com → Core IP
|
||||
- Add www CNAME → mooresunnydaze.com
|
||||
- Keep proxy off initially for Caddy ACME cert issuance
|
||||
|
||||
3. **SSL certificate**
|
||||
- Caddy auto-obtains Let's Encrypt cert on first request
|
||||
- Verify: curl -sI https://mooresunnydaze.com → 200
|
||||
|
||||
4. **Enable Cloudflare proxy** (optional, after cert valid)
|
||||
- Toggle orange cloud on A record
|
||||
- Switch to Full (strict) SSL in Cloudflare dashboard
|
||||
|
||||
5. **Post-migration cleanup**
|
||||
- Cancel Wix subscription (wait until site live + verified)
|
||||
- Export any Wix blog/content if needed
|
||||
- Archive old Wix design as reference
|
||||
|
||||
## Phase 3: Email Migration (Gmail → MXroute)
|
||||
See separate email migration plan.
|
||||
|
||||
## Phase 4: Booking System (VRBO/Airbnb → Direct)
|
||||
### Short-term (keep both)
|
||||
- Link "Book Now" to our own booking page
|
||||
- Keep VRBO/Airbnb listings live during transition
|
||||
- Add "Book Direct & Save" messaging on our site
|
||||
|
||||
### Long-term (go direct)
|
||||
- Build Stripe-integrated reservation system
|
||||
- Remove/downgrade VRBO listing once direct bookings established
|
||||
- Leverage existing Facebook following for direct booking marketing
|
||||
- Offer returning guest discounts for direct bookings
|
||||
|
||||
## Phase 5: Ongoing
|
||||
- Nightly backups to S3 via hermes-backup
|
||||
- Uptime monitoring via Uptime Kuma
|
||||
- SSL auto-renewal via Caddy
|
||||
- Monthly domain renewal check (Cloudflare auto-renew)
|
||||
|
||||
## Risk Mitigation
|
||||
| Risk | Mitigation |
|
||||
|------|-----------|
|
||||
| DNS propagation delay | Start transfer on Monday, complete before weekend |
|
||||
| Wix SSL break during DNS cutover | Keep Wix site active until new cert issued |
|
||||
| Email downtime during MX switch | Configure MXroute first, then change MX records |
|
||||
| Booking loss during transition | Keep VRBO/Airbnb live for 60 days minimum |
|
||||
| Domain transfer rejection | Verify domain unlocked + WHOIS privacy off at GoDaddy |
|
||||
@@ -0,0 +1,85 @@
|
||||
# Moore Sunny Daze — Product Strategy: Beach Direct
|
||||
|
||||
## The Opportunity
|
||||
Every vacation rental owner using VRBO/Airbnb pays 10-15% in platform fees. Tim's property is booked solid in peak season and has a 5.0-star rating with a growing following. This is the perfect profile for going direct.
|
||||
|
||||
But the real opportunity is bigger: **this is a repeatable playbook** for ANY vacation rental owner who wants to escape platform fees without losing bookings.
|
||||
|
||||
## Phase 1: Tim's Site (the blueprint)
|
||||
Build Moore Sunny Daze as the reference implementation:
|
||||
- Beautiful landing page with real photos
|
||||
- Direct booking with Stripe (saves 10-15% vs VRBO)
|
||||
- Admin dashboard for Tim to manage reservations
|
||||
- Email marketing for returning guests
|
||||
- Social media integration (Facebook following → direct bookings)
|
||||
|
||||
## Phase 2: Beach Direct — The Product
|
||||
|
||||
### What it is
|
||||
A white-label vacation rental website + booking system for property owners who want to go direct.
|
||||
|
||||
### Target Customer
|
||||
- Owns 1-3 vacation rental properties
|
||||
- Listed on VRBO/Airbnb but frustrated with fees
|
||||
- Has some existing guest following (social, email list)
|
||||
- Wants a professional direct-booking website
|
||||
- Doesn't want to manage complex tech
|
||||
|
||||
### Core Features
|
||||
| Feature | Description |
|
||||
|---------|-------------|
|
||||
| Property Site | Single-page or multi-page custom site with their photos |
|
||||
| Direct Booking | Calendar + Stripe payment integration |
|
||||
| Admin Dashboard | Manage reservations, guest messages, availability |
|
||||
| Guest CRM | Past guest database, email collection |
|
||||
| Smart Pricing | Seasonal rates, minimum stays, holiday pricing |
|
||||
| Email Automation | Booking confirmations, pre-arrival info, post-stay review request |
|
||||
| Channel Sync | (v2) Sync availability calendar with VRBO/Airbnb to prevent double-booking |
|
||||
| Analytics | Booking trends, revenue, guest sources |
|
||||
|
||||
### Pricing Model
|
||||
| Tier | Setup Fee | Monthly | Features |
|
||||
|------|-----------|---------|----------|
|
||||
| Starter | $997 | $47/mo | Landing page, basic booking, admin dashboard |
|
||||
| Pro | $2,497 | $97/mo | + Email automation, guest CRM, smart pricing |
|
||||
| Full Service | $3,997 | $197/mo | + Channel sync, analytics, priority support |
|
||||
|
||||
*No per-booking fees — flat monthly only. This is the key differentiator vs VRBO.*
|
||||
|
||||
### Tech Stack
|
||||
- Frontend: Single-file HTML/CSS/JS (or SvelteKit for dashboard)
|
||||
- Backend: FastAPI on Core/app1 (Python)
|
||||
- Payments: Stripe Connect (direct to owner's bank)
|
||||
- Database: SQLite per property (simple, portable)
|
||||
- Email: Resend or Postmark for transactional
|
||||
- Hosting: Included in monthly fee
|
||||
|
||||
### Go-to-Market
|
||||
1. **Tim's site** = first case study
|
||||
2. **Cold outreach** to VRBO-listed owners in Destin/Miramar Beach area
|
||||
3. **"Save $X,XXX/year" calculator** on our landing page
|
||||
4. **Facebook groups** — vacation rental owner communities
|
||||
5. **Referral program** — Tim refers other owners, gets free months
|
||||
|
||||
### Revenue Math (per 10 clients at Pro tier)
|
||||
- Setup: 10 × $2,497 = $24,970 (one-time)
|
||||
- Monthly: 10 × $97 = $970/mo recurring
|
||||
- Annual: $36,610
|
||||
|
||||
### Differentiators vs VRBO/Airbnb
|
||||
| | VRBO/Airbnb | Beach Direct |
|
||||
|---|-------------|-------------|
|
||||
| Booking fee | 10-15% per booking | $0 per booking |
|
||||
| Guest data | Platform owns it | Owner owns it |
|
||||
| Branding | Platform-branded | Owner's brand |
|
||||
| Pricing control | Algorithm-influenced | Full control |
|
||||
| Guest relationship | Platform-mediated | Direct relationship |
|
||||
| Email marketing | Not allowed | Built in |
|
||||
|
||||
## Next Steps
|
||||
1. Complete Tim's reference implementation
|
||||
2. Document the build process as a playbook
|
||||
3. Register beachdirect.io or similar domain
|
||||
4. Build our own sales landing page
|
||||
5. Target first 5 beta clients (free/discounted for testimonials)
|
||||
6. Launch to Destin/Miramar Beach market
|
||||
@@ -0,0 +1,205 @@
|
||||
# Moore Sunny Daze — Reservation System with Stripe
|
||||
|
||||
## Architecture Overview
|
||||
|
||||
```
|
||||
Guest Browser → Landing Page → Check Availability → Book → Stripe Checkout → Confirmation
|
||||
↑
|
||||
Admin Dashboard (Tim)
|
||||
```
|
||||
|
||||
## Components
|
||||
|
||||
### 1. Public Booking Flow
|
||||
```
|
||||
Landing Page (mooresunnydaze.com)
|
||||
→ "Check Availability" button
|
||||
→ Availability calendar (fetches from API)
|
||||
→ Select dates → guest count → price quote
|
||||
→ Guest details form (name, email, phone, # guests, pet?)
|
||||
→ Stripe Checkout (embedded or redirect)
|
||||
→ Confirmation page + email
|
||||
```
|
||||
|
||||
### 2. Backend API (FastAPI on Core/app1)
|
||||
| Endpoint | Method | Purpose |
|
||||
|----------|--------|---------|
|
||||
| `/api/availability` | GET | Get booked dates for a month |
|
||||
| `/api/quote` | POST | Calculate price for selected dates |
|
||||
| `/api/booking` | POST | Create booking (pending payment) |
|
||||
| `/api/booking/{id}/confirm` | POST | Confirm after Stripe payment |
|
||||
| `/api/booking/{id}` | GET | View booking details |
|
||||
| `/api/guest/{email}` | GET | Lookup returning guest |
|
||||
|
||||
### 3. Database Schema (SQLite)
|
||||
```sql
|
||||
-- Guests
|
||||
CREATE TABLE guests (
|
||||
id TEXT PRIMARY KEY,
|
||||
name TEXT NOT NULL,
|
||||
email TEXT UNIQUE NOT NULL,
|
||||
phone TEXT,
|
||||
notes TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- Bookings
|
||||
CREATE TABLE bookings (
|
||||
id TEXT PRIMARY KEY,
|
||||
guest_id TEXT REFERENCES guests(id),
|
||||
check_in DATE NOT NULL,
|
||||
check_out DATE NOT NULL,
|
||||
guests_count INTEGER NOT NULL,
|
||||
nightly_rate REAL NOT NULL,
|
||||
cleaning_fee REAL DEFAULT 150,
|
||||
total REAL NOT NULL,
|
||||
status TEXT DEFAULT 'pending', -- pending, confirmed, cancelled, completed
|
||||
stripe_session_id TEXT,
|
||||
stripe_payment_intent TEXT,
|
||||
notes TEXT,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- Blocked Dates
|
||||
CREATE TABLE blocked_dates (
|
||||
date DATE PRIMARY KEY,
|
||||
reason TEXT -- 'booking_XYZ', 'maintenance', 'owner'
|
||||
);
|
||||
|
||||
-- Rate Rules
|
||||
CREATE TABLE rate_rules (
|
||||
id TEXT PRIMARY KEY,
|
||||
name TEXT,
|
||||
start_date DATE,
|
||||
end_date DATE,
|
||||
nightly_rate REAL,
|
||||
min_nights INTEGER DEFAULT 3
|
||||
);
|
||||
```
|
||||
|
||||
## Stripe Integration
|
||||
|
||||
### Setup
|
||||
1. Tim creates Stripe account (stripe.com)
|
||||
2. Connects business bank account
|
||||
3. We get API keys from Stripe Dashboard
|
||||
4. Store in `.env` on server
|
||||
|
||||
### Payment Flow
|
||||
```python
|
||||
# 1. Create Stripe Checkout Session
|
||||
session = stripe.checkout.Session.create(
|
||||
payment_method_types=['card'],
|
||||
line_items=[{
|
||||
'price_data': {
|
||||
'currency': 'usd',
|
||||
'product_data': {
|
||||
'name': f'Moore Sunny Daze — {nights} nights',
|
||||
'description': f'{check_in} to {check_out}, {guests} guests'
|
||||
},
|
||||
'unit_amount': int(total * 100), # cents
|
||||
},
|
||||
'quantity': 1
|
||||
}],
|
||||
mode='payment',
|
||||
success_url='https://mooresunnydaze.com/booking/confirmed?session_id={CHECKOUT_SESSION_ID}',
|
||||
cancel_url='https://mooresunnydaze.com/booking/cancelled',
|
||||
customer_email=guest_email,
|
||||
metadata={
|
||||
'booking_id': booking_id,
|
||||
'property': 'moore-sunny-daze'
|
||||
}
|
||||
)
|
||||
|
||||
# 2. Redirect to session.url
|
||||
# 3. Stripe webhook → mark booking confirmed
|
||||
```
|
||||
|
||||
### Webhook Handling
|
||||
```python
|
||||
@app.post("/stripe-webhook")
|
||||
async def stripe_webhook(request: Request):
|
||||
payload = await request.body()
|
||||
sig = request.headers.get('stripe-signature')
|
||||
event = stripe.Webhook.construct_event(payload, sig, WEBHOOK_SECRET)
|
||||
|
||||
if event['type'] == 'checkout.session.completed':
|
||||
session = event['data']['object']
|
||||
booking_id = session['metadata']['booking_id']
|
||||
mark_booking_confirmed(booking_id)
|
||||
send_confirmation_email(booking_id)
|
||||
add_blocked_dates(booking_id)
|
||||
|
||||
return {"status": "ok"}
|
||||
```
|
||||
|
||||
## Deployment
|
||||
|
||||
### Server
|
||||
- Deploy on Core (152.53.33.195) as systemd service
|
||||
- Port: 8910 (internal)
|
||||
- Caddy reverse proxy: `mooresunnydaze.com/api/* → localhost:8910`
|
||||
|
||||
### Filesystem
|
||||
```
|
||||
/opt/mooresunnydaze/
|
||||
├── server.py # FastAPI app
|
||||
├── db.sqlite # SQLite database
|
||||
├── .env # STRIPE_SECRET_KEY, etc
|
||||
├── requirements.txt # fastapi, uvicorn, stripe, aiosqlite
|
||||
└── templates/ # Email templates
|
||||
```
|
||||
|
||||
### systemd Service
|
||||
```ini
|
||||
# /etc/systemd/system/mooresunnydaze.service
|
||||
[Unit]
|
||||
Description=Moore Sunny Daze Booking API
|
||||
After=network.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
User=root
|
||||
WorkingDirectory=/opt/mooresunnydaze
|
||||
ExecStart=/opt/mooresunnydaze/venv/bin/uvicorn server:app --host 127.0.0.1 --port 8910
|
||||
Restart=always
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
```
|
||||
|
||||
## Admin Features
|
||||
1. **Calendar view** — booked/available/blocked dates
|
||||
2. **Booking management** — confirm, cancel, view details
|
||||
3. **Guest directory** — past guests, contact info, stay history
|
||||
4. **Rate management** — seasonal pricing, minimum stays
|
||||
5. **Block dates** — maintenance, owner use
|
||||
6. **Revenue reports** — monthly/annual totals
|
||||
7. **Email templates** — confirmation, pre-arrival, post-stay
|
||||
|
||||
## Pricing Integration
|
||||
Tim's property is currently listed at ~$295/night (peak season, from Airbnb). We'd implement:
|
||||
- **Base rate:** $295/night peak, $225/night off-peak
|
||||
- **Cleaning fee:** $150 flat
|
||||
- **Pet fee:** $50 (if applicable)
|
||||
- **Minimum stay:** 3 nights
|
||||
- **Holiday premium:** +20% for major holidays
|
||||
|
||||
## Comparison: Direct vs VRBO
|
||||
| | VRBO (current) | Direct (our system) |
|
||||
|---|---|---|
|
||||
| 3-night stay @ $295 | $885 + VRBO fee (~$130) | $885 (no fee) |
|
||||
| Guest pays | ~$1,015 | $885 |
|
||||
| Owner receives | ~$885 - VRBO 5% host fee | $885 - Stripe 2.9% |
|
||||
| Owner net | ~$840 | ~$859 |
|
||||
| **Savings to guest** | — | **$130 (13%)** |
|
||||
| **Savings to owner** | — | **~$19/stay + guest relationship** |
|
||||
|
||||
## Next Steps
|
||||
1. ✅ Design complete
|
||||
2. Set up Stripe account for Tim
|
||||
3. Build FastAPI backend
|
||||
4. Deploy on Core
|
||||
5. Wire up booking widget on landing page
|
||||
6. Test end-to-end booking flow
|
||||
7. Go live
|
||||
@@ -0,0 +1,398 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Moore Sunny Daze — Admin Dashboard</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #0f172a;
|
||||
--surface: #1e293b;
|
||||
--border: #334155;
|
||||
--text: #e2e8f0;
|
||||
--muted: #94a3b8;
|
||||
--accent: #06b6d4;
|
||||
--accent2: #f59e0b;
|
||||
--green: #10b981;
|
||||
--red: #ef4444;
|
||||
--amber: #f59e0b;
|
||||
--radius: 12px;
|
||||
--shadow: 0 4px 24px rgba(0,0,0,0.3);
|
||||
}
|
||||
* { margin:0; padding:0; box-sizing:border-box; }
|
||||
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height:100vh; display:flex; }
|
||||
a { color: var(--accent); text-decoration:none; }
|
||||
|
||||
/* Sidebar */
|
||||
.sidebar { width:240px; background: #0a0f1a; border-right:1px solid var(--border); padding:20px 16px; display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:10; }
|
||||
.sidebar .logo { font-size:18px; font-weight:700; color:var(--accent); margin-bottom:32px; display:flex; align-items:center; gap:8px; }
|
||||
.sidebar .logo span { color:var(--text); font-weight:400; font-size:12px; display:block; }
|
||||
.nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--muted); font-size:14px; cursor:pointer; margin-bottom:4px; transition:all 0.15s; border:none; background:none; width:100%; text-align:left; }
|
||||
.nav-item:hover { background:var(--surface); color:var(--text); }
|
||||
.nav-item.active { background:var(--accent); color:#fff; }
|
||||
.nav-item svg { width:18px; height:18px; flex-shrink:0; }
|
||||
|
||||
/* Main */
|
||||
.main { margin-left:240px; flex:1; padding:24px 32px; max-width:calc(100vw - 240px); }
|
||||
.header { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
|
||||
.header h1 { font-size:22px; font-weight:600; }
|
||||
.header .user { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
|
||||
.header .user img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
|
||||
|
||||
/* Stats */
|
||||
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
|
||||
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
|
||||
.stat-card .label { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
|
||||
.stat-card .value { font-size:28px; font-weight:700; }
|
||||
.stat-card .sub { font-size:12px; color:var(--muted); margin-top:4px; }
|
||||
.stat-card .accent { color:var(--accent); }
|
||||
.stat-card .green { color:var(--green); }
|
||||
.stat-card .amber { color:var(--amber); }
|
||||
|
||||
/* Panels */
|
||||
.panels { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
|
||||
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
|
||||
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
|
||||
.panel-header h2 { font-size:15px; font-weight:600; }
|
||||
.panel-header .badge { font-size:11px; background:var(--accent); color:#fff; padding:3px 8px; border-radius:20px; font-weight:500; }
|
||||
|
||||
/* Bookings table */
|
||||
table { width:100%; border-collapse:collapse; }
|
||||
th { text-align:left; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; padding:8px 10px; border-bottom:1px solid var(--border); }
|
||||
td { padding:10px 10px; font-size:13px; border-bottom:1px solid var(--border); }
|
||||
.status { padding:3px 8px; border-radius:20px; font-size:11px; font-weight:500; }
|
||||
.status.confirmed { background:rgba(16,185,129,0.15); color:var(--green); }
|
||||
.status.checkin { background:rgba(6,182,212,0.15); color:var(--accent); }
|
||||
.status.pending { background:rgba(245,158,11,0.15); color:var(--amber); }
|
||||
.status.completed { background:rgba(148,163,184,0.15); color:var(--muted); }
|
||||
|
||||
/* Guest list */
|
||||
.guest-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
|
||||
.guest-item:last-child { border:none; }
|
||||
.guest-avatar { width:36px; height:36px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; color:#fff; }
|
||||
.guest-info { flex:1; }
|
||||
.guest-info .name { font-size:13px; font-weight:500; }
|
||||
.guest-info .date { font-size:11px; color:var(--muted); }
|
||||
|
||||
/* Calendar quick */
|
||||
.cal-mini { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; font-size:11px; }
|
||||
.cal-mini .day-header { color:var(--muted); text-align:center; padding:4px; }
|
||||
.cal-mini .day { text-align:center; padding:6px 2px; border-radius:4px; cursor:pointer; }
|
||||
.cal-mini .day.booked { background:rgba(6,182,212,0.2); color:var(--accent); font-weight:600; }
|
||||
.cal-mini .day.today { border:1px solid var(--accent2); }
|
||||
.cal-mini .day:hover { background:var(--border); }
|
||||
|
||||
/* Full-width panels */
|
||||
.full-width { grid-column:1/-1; }
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width:768px) {
|
||||
.sidebar { display:none; }
|
||||
.main { margin-left:0; max-width:100vw; padding:16px; }
|
||||
.stats { grid-template-columns:repeat(2,1fr); }
|
||||
.panels { grid-template-columns:1fr; }
|
||||
}
|
||||
|
||||
.hidden { display:none !important; }
|
||||
|
||||
/* View switching */
|
||||
.view { display:none; }
|
||||
.view.active { display:block; }
|
||||
|
||||
/* Settings form */
|
||||
.form-group { margin-bottom:16px; }
|
||||
.form-group label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
|
||||
.form-group input, .form-group textarea, .form-group select { width:100%; padding:8px 12px; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; font-family:inherit; }
|
||||
.form-group textarea { min-height:80px; resize:vertical; }
|
||||
.btn { padding:10px 20px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer; border:none; transition:all 0.15s; }
|
||||
.btn-primary { background:var(--accent); color:#fff; }
|
||||
.btn-primary:hover { opacity:0.9; }
|
||||
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); }
|
||||
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
|
||||
|
||||
/* Graph placeholder */
|
||||
.graph-bar { display:flex; align-items:flex-end; gap:4px; height:100px; }
|
||||
.graph-bar .bar { flex:1; background:var(--accent); border-radius:4px 4px 0 0; min-height:4px; transition:height 0.5s; }
|
||||
.graph-bar .bar:nth-child(odd) { opacity:0.7; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="logo">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 22h20L12 2z" fill="#06b6d4"/></svg>
|
||||
<div>Moore Sunny Daze<br><span>Owner Dashboard</span></div>
|
||||
</div>
|
||||
<button class="nav-item active" onclick="switchView('overview')" id="nav-overview">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
|
||||
Overview
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('calendar')" id="nav-calendar">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>
|
||||
Calendar
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('guests')" id="nav-guests">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||
Guests
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('bookings')" id="nav-bookings">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg>
|
||||
Bookings
|
||||
</button>
|
||||
<button class="nav-item" onclick="switchView('settings')" id="nav-settings">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
||||
Settings
|
||||
</button>
|
||||
<div style="margin-top:auto; padding-top:16px; border-top:1px solid var(--border);">
|
||||
<div style="font-size:11px; color:var(--muted);">Logged in as</div>
|
||||
<div style="font-size:13px; font-weight:500;">Tim Moore</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main">
|
||||
|
||||
<!-- ============ OVERVIEW ============ -->
|
||||
<div class="view active" id="view-overview">
|
||||
<div class="header">
|
||||
<h1>Dashboard Overview</h1>
|
||||
<div class="user">Aug 2026</div>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-card">
|
||||
<div class="label">Upcoming Bookings</div>
|
||||
<div class="value">4</div>
|
||||
<div class="sub">Next: Aug 22-25</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">Revenue (Month)</div>
|
||||
<div class="value accent">$8,240</div>
|
||||
<div class="sub">+12% vs last month</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">Occupancy Rate</div>
|
||||
<div class="value green">82%</div>
|
||||
<div class="sub">August 2026</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="label">Avg Nightly Rate</div>
|
||||
<div class="value amber">$295</div>
|
||||
<div class="sub">Peak season pricing</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panels">
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Upcoming Reservations</h2>
|
||||
<span class="badge">4</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr><th>Guest</th><th>Check-In</th><th>Check-Out</th><th>Guests</th><th>Total</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Sarah Johnson</td><td>Aug 22</td><td>Aug 25</td><td>6</td><td>$885</td>
|
||||
<td><span class="status confirmed">Confirmed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mark Davidson</td><td>Aug 30</td><td>Sep 2</td><td>4</td><td>$1,180</td>
|
||||
<td><span class="status confirmed">Confirmed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rachel Kim</td><td>Sep 5</td><td>Sep 8</td><td>8</td><td>$885</td>
|
||||
<td><span class="status pending">Pending</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Thompson Family</td><td>Sep 12</td><td>Sep 17</td><td>5</td><td>$1,475</td>
|
||||
<td><span class="status confirmed">Confirmed</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<div class="panel-header">
|
||||
<h2>Recent Guests</h2>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar">JD</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">James & Dana Miller</div>
|
||||
<div class="date">Aug 8-11 · 4 guests · ★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar" style="background:#f59e0b;">CW</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">Chris Williams</div>
|
||||
<div class="date">Aug 1-4 · 2 guests · ★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar" style="background:#10b981;">BR</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">Brittany & Robert Chen</div>
|
||||
<div class="date">Jul 25-28 · 6 guests · ★★★★☆</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="guest-item">
|
||||
<div class="guest-avatar" style="background:#ef4444;">KP</div>
|
||||
<div class="guest-info">
|
||||
<div class="name">Kevin Porter</div>
|
||||
<div class="date">Jul 18-22 · 3 guests · ★★★★★</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel full-width">
|
||||
<div class="panel-header">
|
||||
<h2>Monthly Revenue</h2>
|
||||
</div>
|
||||
<div style="display:flex; align-items:flex-end; gap:6px; height:140px; padding-top:10px;">
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:90px; border-radius:4px 4px 0 0; opacity:0.7;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Jul</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:110px; border-radius:4px 4px 0 0;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Aug</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:72px; border-radius:4px 4px 0 0; opacity:0.5;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Sep</span>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; flex:1; gap:6px;">
|
||||
<div style="width:100%; background:var(--accent); height:45px; border-radius:4px 4px 0 0; opacity:0.3;"></div>
|
||||
<span style="font-size:10px; color:var(--muted);">Oct</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ CALENDAR ============ -->
|
||||
<div class="view" id="view-calendar">
|
||||
<div class="header">
|
||||
<h1>Reservation Calendar</h1>
|
||||
<div style="display:flex; gap:8px;">
|
||||
<button class="btn btn-outline" onclick="alert('Prev month')">←</button>
|
||||
<span style="padding:10px 0; font-weight:600;">August 2026</span>
|
||||
<button class="btn btn-outline" onclick="alert('Next month')">→</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel full-width">
|
||||
<div class="cal-mini" style="font-size:13px;">
|
||||
<div class="day-header">Sun</div><div class="day-header">Mon</div><div class="day-header">Tue</div><div class="day-header">Wed</div><div class="day-header">Thu</div><div class="day-header">Fri</div><div class="day-header">Sat</div>
|
||||
<div class="day booked">1</div><div class="day booked">2</div><div class="day booked">3</div><div class="day booked">4</div><div class="day">5</div><div class="day">6</div><div class="day">7</div>
|
||||
<div class="day booked">8</div><div class="day booked">9</div><div class="day booked">10</div><div class="day booked">11</div><div class="day">12</div><div class="day">13</div><div class="day">14</div>
|
||||
<div class="day">15</div><div class="day">16</div><div class="day booked">17</div><div class="day booked">18</div><div class="day booked">19</div><div class="day booked">20</div><div class="day booked">21</div>
|
||||
<div class="day booked">22</div><div class="day booked">23</div><div class="day booked">24</div><div class="day booked">25</div><div class="day">26</div><div class="day">27</div><div class="day">28</div>
|
||||
<div class="day">29</div><div class="day booked">30</div><div class="day booked">31</div>
|
||||
</div>
|
||||
<div style="margin-top:16px; display:flex; gap:16px; font-size:12px; color:var(--muted);">
|
||||
<span><span style="display:inline-block;width:12px;height:12px;background:rgba(6,182,212,0.2);border-radius:2px;margin-right:4px;"></span> Booked</span>
|
||||
<span><span style="display:inline-block;width:12px;height:12px;background:var(--surface);border:1px solid var(--border);border-radius:2px;margin-right:4px;"></span> Available</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ GUESTS ============ -->
|
||||
<div class="view" id="view-guests">
|
||||
<div class="header">
|
||||
<h1>Guest Directory</h1>
|
||||
<button class="btn btn-primary" onclick="alert('Add guest flow - TBD')">+ Add Guest</button>
|
||||
</div>
|
||||
<div class="panel full-width">
|
||||
<table>
|
||||
<thead><tr><th>Name</th><th>Email</th><th>Last Stay</th><th>Total Stays</th><th>Rating</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>James & Dana Miller</td><td>jdmiller@gmail.com</td><td>Aug 8-11, 2026</td><td>3</td><td>★★★★★</td></tr>
|
||||
<tr><td>Chris Williams</td><td>chris.williams@yahoo.com</td><td>Aug 1-4, 2026</td><td>1</td><td>★★★★★</td></tr>
|
||||
<tr><td>Brittany & Robert Chen</td><td>brittchen@gmail.com</td><td>Jul 25-28, 2026</td><td>2</td><td>★★★★☆</td></tr>
|
||||
<tr><td>Kevin Porter</td><td>kporter@outlook.com</td><td>Jul 18-22, 2026</td><td>1</td><td>★★★★★</td></tr>
|
||||
<tr><td>Sarah Johnson</td><td>sjohnson@gmail.com</td><td>Upcoming: Aug 22</td><td>4</td><td>★★★★★</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ BOOKINGS ============ -->
|
||||
<div class="view" id="view-bookings">
|
||||
<div class="header">
|
||||
<h1>All Bookings</h1>
|
||||
<button class="btn btn-primary" onclick="alert('New booking form - TBD')">+ New Booking</button>
|
||||
</div>
|
||||
<div class="panel full-width">
|
||||
<table>
|
||||
<thead><tr><th>ID</th><th>Guest</th><th>Check-In</th><th>Check-Out</th><th>Nights</th><th>Guests</th><th>Total</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>#1042</td><td>Sarah Johnson</td><td>Aug 22</td><td>Aug 25</td><td>3</td><td>6</td><td>$885</td><td><span class="status confirmed">Confirmed</span></td></tr>
|
||||
<tr><td>#1041</td><td>Mark Davidson</td><td>Aug 30</td><td>Sep 2</td><td>3</td><td>4</td><td>$1,180</td><td><span class="status confirmed">Confirmed</span></td></tr>
|
||||
<tr><td>#1040</td><td>Rachel Kim</td><td>Sep 5</td><td>Sep 8</td><td>3</td><td>8</td><td>$885</td><td><span class="status pending">Pending</span></td></tr>
|
||||
<tr><td>#1039</td><td>Thompson Family</td><td>Sep 12</td><td>Sep 17</td><td>5</td><td>5</td><td>$1,475</td><td><span class="status confirmed">Confirmed</span></td></tr>
|
||||
<tr><td>#1038</td><td>James Miller</td><td>Aug 8</td><td>Aug 11</td><td>3</td><td>4</td><td>$885</td><td><span class="status completed">Completed</span></td></tr>
|
||||
<tr><td>#1037</td><td>Chris Williams</td><td>Aug 1</td><td>Aug 4</td><td>3</td><td>2</td><td>$750</td><td><span class="status completed">Completed</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ SETTINGS ============ -->
|
||||
<div class="view" id="view-settings">
|
||||
<div class="header">
|
||||
<h1>Property Settings</h1>
|
||||
</div>
|
||||
<div class="panel full-width" style="max-width:600px;">
|
||||
<div class="form-group">
|
||||
<label>Property Name</label>
|
||||
<input type="text" value="Moore Sunny Daze">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Nightly Rate (Base)</label>
|
||||
<input type="text" value="$295">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Cleaning Fee</label>
|
||||
<input type="text" value="$150">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Minimum Night Stay</label>
|
||||
<input type="number" value="3">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Max Guests</label>
|
||||
<input type="number" value="8">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Check-In Time</label>
|
||||
<input type="text" value="4:00 PM">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Check-Out Time</label>
|
||||
<input type="text" value="10:00 AM">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Stripe Account</label>
|
||||
<input type="text" value="acct_••••••••••" disabled style="opacity:0.5;">
|
||||
</div>
|
||||
<div style="display:flex; gap:10px; margin-top:20px;">
|
||||
<button class="btn btn-primary" onclick="alert('Settings saved! (mock)')">Save Changes</button>
|
||||
<button class="btn btn-outline">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function switchView(name) {
|
||||
document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
|
||||
document.getElementById('view-' + name).classList.add('active');
|
||||
document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
|
||||
document.getElementById('nav-' + name).classList.add('active');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,604 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Moore Sunny Daze — Maravilla 1403 | Miramar Beach, FL</title>
|
||||
<style>
|
||||
/* ===== RESET & BASE ===== */
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
html{scroll-behavior:smooth;font-size:16px}
|
||||
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:#3D3027;background:#FFFAF5;line-height:1.7;overflow-x:hidden}
|
||||
img{max-width:100%;height:auto;display:block}
|
||||
h1,h2,h3{line-height:1.2}
|
||||
a{color:inherit;text-decoration:none}
|
||||
|
||||
/* ===== CSS VARIABLES ===== */
|
||||
:root{
|
||||
--sand:#F5E6D3;
|
||||
--sand-dark:#D4C4A8;
|
||||
--sand-light:#FDF8F2;
|
||||
--ocean:#6CB4D9;
|
||||
--ocean-dark:#4A9BC5;
|
||||
--ocean-light:#A8D8EA;
|
||||
--palm:#6B8E5A;
|
||||
--palm-dark:#4A6B3A;
|
||||
--palm-light:#8FBC6B;
|
||||
--coral:#E8836E;
|
||||
--coral-dark:#D46A55;
|
||||
--warm-white:#FFFAF5;
|
||||
--brown:#3D3027;
|
||||
--brown-light:#6B5D52;
|
||||
--text-muted:#7A6E63;
|
||||
--gold:#C9A84C;
|
||||
--radius:12px;
|
||||
--radius-sm:8px;
|
||||
--shadow-sm:0 2px 8px rgba(0,0,0,.06);
|
||||
--shadow:0 4px 20px rgba(0,0,0,.08);
|
||||
--shadow-lg:0 8px 40px rgba(0,0,0,.12);
|
||||
--max-width:1200px;
|
||||
}
|
||||
|
||||
/* ===== UTILITY ===== */
|
||||
.container{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem}
|
||||
.section{padding:5rem 0}
|
||||
.section-label{display:inline-block;font-size:.8rem;text-transform:uppercase;letter-spacing:.15em;color:var(--coral);font-weight:700;margin-bottom:.5rem}
|
||||
.section-title{font-size:clamp(2rem,4vw,2.8rem);color:var(--brown);margin-bottom:1rem;font-weight:700}
|
||||
.section-subtitle{font-size:1.15rem;color:var(--text-muted);max-width:640px;margin-bottom:2.5rem}
|
||||
|
||||
/* ===== NAVIGATION ===== */
|
||||
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 0;transition:all .35s ease}
|
||||
.navbar.scrolled{background:rgba(255,250,245,.97);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(0,0,0,.08);padding:.6rem 0}
|
||||
.navbar .container{display:flex;align-items:center;justify-content:space-between}
|
||||
.nav-logo{display:flex;align-items:center;gap:.5rem}
|
||||
.nav-logo .palm-icon{font-size:1.6rem}
|
||||
.nav-logo span{font-weight:700;font-size:1.25rem;color:var(--warm-white);transition:color .35s}
|
||||
.navbar.scrolled .nav-logo span{color:var(--brown)}
|
||||
.nav-btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--coral);color:#fff;padding:.55rem 1.4rem;border-radius:50px;font-weight:700;font-size:.9rem;transition:all .25s;border:none;cursor:pointer;font-family:inherit}
|
||||
.nav-btn:hover{background:var(--coral-dark);transform:translateY(-1px);box-shadow:0 4px 15px rgba(232,131,110,.4)}
|
||||
.nav-mobile-btn{display:none}
|
||||
|
||||
/* ===== HERO PARALLAX ===== */
|
||||
.hero{position:relative;height:100vh;min-height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
||||
.hero-bg{position:absolute;inset:0;background:url('https://static.wixstatic.com/media/0a1b51_e07cc4dbb6c74815812ad594235b011e~mv2.jpg') center/cover no-repeat;will-change:transform;z-index:0}
|
||||
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.55) 100%);z-index:1}
|
||||
.hero-content{position:relative;z-index:2;text-align:center;color:#fff;padding:0 1.5rem;max-width:800px}
|
||||
.hero-subtitle{font-size:1.1rem;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.75rem;opacity:.9;font-weight:500}
|
||||
.hero-title{font-size:clamp(2.4rem,6vw,4rem);font-weight:800;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,.3);line-height:1.15}
|
||||
.hero-title em{font-style:normal;color:var(--gold)}
|
||||
.hero-desc{font-size:1.2rem;margin-bottom:2rem;opacity:.95;max-width:600px;margin-left:auto;margin-right:auto}
|
||||
.hero-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--coral);color:#fff;padding:.85rem 2.2rem;border-radius:50px;font-weight:700;font-size:1.1rem;transition:all .3s;box-shadow:0 4px 20px rgba(232,131,110,.4);border:none;cursor:pointer;font-family:inherit}
|
||||
.hero-cta:hover{background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 6px 28px rgba(232,131,110,.5)}
|
||||
.hero-scroll-indicator{position:absolute;bottom:2rem;left:50%;z-index:2;transform:translateX(-50%);animation:bounce 2s infinite;opacity:.8}
|
||||
.hero-scroll-indicator .arrow{display:block;width:24px;height:24px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
|
||||
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}
|
||||
|
||||
/* ===== FADE-IN ON SCROLL ===== */
|
||||
.fade-up{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
|
||||
.fade-up.visible{opacity:1;transform:translateY(0)}
|
||||
.fade-up-delay-1{transition-delay:.1s}
|
||||
.fade-up-delay-2{transition-delay:.2s}
|
||||
.fade-up-delay-3{transition-delay:.3s}
|
||||
|
||||
/* ===== PROPERTY INTRO ===== */
|
||||
.property-intro{background:var(--warm-white)}
|
||||
.property-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
|
||||
.property-image img{border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%}
|
||||
.property-stats{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.5rem}
|
||||
.stat-badge{display:flex;align-items:center;gap:.4rem;background:var(--sand-light);padding:.5rem 1rem;border-radius:50px;font-weight:600;font-size:.9rem;color:var(--brown);border:1px solid var(--sand)}
|
||||
.stat-badge .icon{font-size:1.1rem}
|
||||
|
||||
/* ===== ROOMS SECTION ===== */
|
||||
.rooms{background:var(--sand)}
|
||||
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem}
|
||||
.room-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
|
||||
.room-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
|
||||
.room-card img{width:100%;height:220px;object-fit:cover}
|
||||
.room-card-body{padding:1.4rem}
|
||||
.room-card-body h3{font-size:1.15rem;color:var(--brown);margin-bottom:.3rem}
|
||||
.room-card-body .room-badge{display:inline-block;font-size:.75rem;background:var(--ocean-light);color:var(--ocean-dark);padding:.2rem .7rem;border-radius:50px;font-weight:600;margin-bottom:.5rem}
|
||||
.room-card-body p{font-size:.9rem;color:var(--text-muted);line-height:1.5}
|
||||
|
||||
/* ===== AMENITIES ===== */
|
||||
.amenities{background:var(--warm-white)}
|
||||
.amenities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.5rem}
|
||||
.amenity-card{background:#fff;border-radius:var(--radius);padding:1.8rem 1.2rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s;border:1px solid transparent}
|
||||
.amenity-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--ocean-light)}
|
||||
.amenity-icon{font-size:2.4rem;margin-bottom:.6rem;display:block}
|
||||
.amenity-card h4{font-size:.9rem;color:var(--brown);font-weight:600}
|
||||
.amenity-card p{font-size:.78rem;color:var(--text-muted);margin-top:.2rem}
|
||||
|
||||
/* ===== COMMUNITY BANNER ===== */
|
||||
.community{position:relative;padding:6rem 0;overflow:hidden;color:#fff}
|
||||
.community-bg{position:absolute;inset:0;background:url('https://static.wixstatic.com/media/0a1b51_6e0326ddac2349b9a62a2a416dcb49e5~mv2.jpg') center/cover no-repeat fixed;z-index:0}
|
||||
.community::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:1}
|
||||
.community .container{position:relative;z-index:2}
|
||||
.community .section-title{color:#fff}
|
||||
.community .section-subtitle{color:rgba(255,255,255,.85)}
|
||||
.community-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-top:2rem}
|
||||
.community-feature{background:rgba(255,255,255,.12);backdrop-filter:blur(8px);border-radius:var(--radius);padding:1.5rem;border:1px solid rgba(255,255,255,.2);transition:transform .3s}
|
||||
.community-feature:hover{transform:translateY(-4px);background:rgba(255,255,255,.18)}
|
||||
.community-feature .feature-icon{font-size:2rem;margin-bottom:.5rem}
|
||||
.community-feature h4{font-size:1rem;margin-bottom:.3rem}
|
||||
.community-feature p{font-size:.85rem;opacity:.85}
|
||||
|
||||
/* ===== BEACH SERVICE ===== */
|
||||
.beach-service{background:var(--ocean);color:#fff;text-align:center}
|
||||
.beach-service .section-title,.beach-service .section-subtitle{color:#fff}
|
||||
.beach-service-inner{display:flex;align-items:center;justify-content:center;gap:3rem;flex-wrap:wrap;margin-top:2rem}
|
||||
.beach-stat{text-align:center}
|
||||
.beach-stat .number{font-size:3.5rem;font-weight:800;line-height:1}
|
||||
.beach-stat .label{font-size:.95rem;opacity:.85;margin-top:.3rem}
|
||||
|
||||
/* ===== NEARBY ===== */
|
||||
.nearby{background:var(--sand-light)}
|
||||
.nearby-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:2rem}
|
||||
.nearby-tab{padding:.55rem 1.4rem;border-radius:50px;border:2px solid var(--sand-dark);background:transparent;font-weight:600;font-size:.9rem;color:var(--brown);cursor:pointer;transition:all .25s;font-family:inherit}
|
||||
.nearby-tab:hover,.nearby-tab.active{background:var(--ocean);border-color:var(--ocean);color:#fff}
|
||||
.nearby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem}
|
||||
.nearby-item{display:flex;align-items:flex-start;gap:.8rem;background:#fff;border-radius:var(--radius-sm);padding:1rem;box-shadow:var(--shadow-sm);transition:transform .25s,box-shadow .25s}
|
||||
.nearby-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
|
||||
.nearby-item .item-icon{font-size:1.4rem;flex-shrink:0;margin-top:2px}
|
||||
.nearby-item .item-info strong{display:block;font-size:.9rem;color:var(--brown)}
|
||||
.nearby-item .item-info span{font-size:.8rem;color:var(--text-muted)}
|
||||
|
||||
/* ===== OWNERS ===== */
|
||||
.owners{background:var(--warm-white)}
|
||||
.owners-grid{display:grid;grid-template-columns:auto 1fr;gap:3rem;align-items:center}
|
||||
.owners-photo{width:240px;height:240px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-lg);border:4px solid var(--sand)}
|
||||
.owners-text h2{margin-bottom:.5rem}
|
||||
.owners-text .tag{color:var(--coral);font-weight:600;font-size:.95rem;margin-bottom:1rem}
|
||||
.owners-text p{color:var(--text-muted);margin-bottom:1rem}
|
||||
|
||||
/* ===== BOOK NOW STRIP ===== */
|
||||
.book-strip{background:linear-gradient(135deg,var(--ocean-dark),var(--ocean));color:#fff;text-align:center;padding:4rem 0}
|
||||
.book-strip h2{color:#fff;font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:.5rem}
|
||||
.book-strip p{opacity:.9;margin-bottom:2rem;font-size:1.1rem}
|
||||
.book-strip .hero-cta{font-size:1.15rem;padding:1rem 2.8rem}
|
||||
|
||||
/* ===== FOOTER ===== */
|
||||
.footer{background:var(--brown);color:#D4C4A8;padding:4rem 0 2rem}
|
||||
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.5rem;margin-bottom:3rem}
|
||||
.footer h4{color:var(--warm-white);margin-bottom:1rem;font-size:1rem}
|
||||
.footer a{color:#D4C4A8;transition:color .2s}
|
||||
.footer a:hover{color:var(--coral)}
|
||||
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
|
||||
.footer-links li{font-size:.9rem}
|
||||
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:2rem;text-align:center;font-size:.85rem}
|
||||
|
||||
/* ===== MOBILE BOOK NOW FAB ===== */
|
||||
.fab-book{display:none;position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;background:var(--coral);color:#fff;padding:.8rem 1.5rem;border-radius:50px;font-weight:700;font-size:1rem;box-shadow:0 4px 25px rgba(232,131,110,.5);border:none;cursor:pointer;font-family:inherit;align-items:center;gap:.4rem;transition:transform .25s}
|
||||
.fab-book:active{transform:scale(.95)}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media(max-width:768px){
|
||||
.section{padding:3rem 0}
|
||||
.hero{min-height:500px}
|
||||
.hero-title br{display:none}
|
||||
.property-grid{grid-template-columns:1fr;gap:2rem}
|
||||
.property-grid .property-text{order:1}
|
||||
.property-grid .property-image{order:2}
|
||||
.rooms-grid{grid-template-columns:1fr}
|
||||
.amenities-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
|
||||
.community-features{grid-template-columns:1fr}
|
||||
.owners-grid{grid-template-columns:1fr;text-align:center}
|
||||
.owners-photo{margin:0 auto;width:180px;height:180px}
|
||||
.nav-desktop-btn{display:none}
|
||||
.fab-book{display:inline-flex}
|
||||
}
|
||||
|
||||
@media(max-width:480px){
|
||||
.amenities-grid{grid-template-columns:repeat(2,1fr)}
|
||||
.nearby-grid{grid-template-columns:1fr}
|
||||
.beach-stat .number{font-size:2.5rem}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ===== NAVBAR ===== -->
|
||||
<nav class="navbar" id="navbar">
|
||||
<div class="container">
|
||||
<div class="nav-logo">
|
||||
<span class="palm-icon">🌴</span>
|
||||
<span>Moore Sunny Daze</span>
|
||||
</div>
|
||||
<a href="#book" class="nav-btn nav-desktop-btn">🏖️ Book Now</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ===== HERO ===== -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero-bg" id="hero-bg"></div>
|
||||
<div class="hero-content fade-up visible">
|
||||
<p class="hero-subtitle">Maravilla 1403 · Miramar Beach, Florida</p>
|
||||
<h1 class="hero-title">Your <em>Sunny</em> Beach<br>Escape Awaits</h1>
|
||||
<p class="hero-desc">3BR / 2BA · Sleeps 8 · Gated Beachfront Community<br>2.5 acres of sugar-white sand on the Emerald Coast</p>
|
||||
<a href="#book" class="hero-cta">🏖️ Book Your Stay</a>
|
||||
</div>
|
||||
<div class="hero-scroll-indicator">
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== PROPERTY INTRO ===== -->
|
||||
<section class="section property-intro">
|
||||
<div class="container">
|
||||
<div class="property-grid">
|
||||
<div class="property-text fade-up">
|
||||
<span class="section-label">Welcome To</span>
|
||||
<h2 class="section-title">Moore Sunny Daze</h2>
|
||||
<p>Come make family memories at our beautiful beachfront condo in Maravilla — a gated resort community on Miramar Beach. With 3 bedrooms, 2 baths, and room for up to 8 guests, it's the perfect home base for your Emerald Coast getaway.</p>
|
||||
<p style="margin-top:1rem">Wake up to Gulf views from the private balcony, spend your days on our 2.5 acres of private sugar-white sand beach, and unwind in one of two sparkling pools. Whether you're here for the beaches, the dining, or just some quality family time — Moore Sunny Daze delivers.</p>
|
||||
<div class="property-stats">
|
||||
<span class="stat-badge"><span class="icon">🛏️</span> 3 Bedrooms</span>
|
||||
<span class="stat-badge"><span class="icon">🛁</span> 2 Baths</span>
|
||||
<span class="stat-badge"><span class="icon">👨👩👧👦</span> Sleeps 8</span>
|
||||
<span class="stat-badge"><span class="icon">🏖️</span> Beachfront</span>
|
||||
<span class="stat-badge"><span class="icon">🐕</span> Dog Friendly</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="property-image fade-up fade-up-delay-1">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Living room at Moore Sunny Daze" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== BEDROOMS ===== -->
|
||||
<section class="section rooms" id="rooms">
|
||||
<div class="container">
|
||||
<span class="section-label">Sleeping Arrangements</span>
|
||||
<h2 class="section-title">Room to Relax</h2>
|
||||
<p class="section-subtitle">Four comfortable sleeping spaces — perfect for families and groups of up to 8.</p>
|
||||
<div class="rooms-grid">
|
||||
<div class="room-card fade-up">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="King suite bedroom" loading="lazy">
|
||||
<div class="room-card-body">
|
||||
<span class="room-badge">🛏️ Primary Suite</span>
|
||||
<h3>King Suite with Private Bath</h3>
|
||||
<p>Spacious king bedroom with en-suite bathroom and private balcony access — wake up to Gulf breezes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-card fade-up fade-up-delay-1">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Second king bedroom" loading="lazy">
|
||||
<div class="room-card-body">
|
||||
<span class="room-badge">🛏️ Second Bedroom</span>
|
||||
<h3>King with Bath Access</h3>
|
||||
<p>Comfortable king bedroom with direct access to a full bathroom — restful and private.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-card fade-up fade-up-delay-2">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg" alt="Bunk room" loading="lazy">
|
||||
<div class="room-card-body">
|
||||
<span class="room-badge">👧 Kids' Favorite</span>
|
||||
<h3>Bunk Room</h3>
|
||||
<p>Fun bunk beds with hallway bath access — the kids will love it!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room-card fade-up fade-up-delay-3">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Living room with sleeper sofa" loading="lazy">
|
||||
<div class="room-card-body">
|
||||
<span class="room-badge">🛋️ Living Room</span>
|
||||
<h3>Queen Sleeper Sofa</h3>
|
||||
<p>New queen sleeper sofa in the living room — comfortable extra sleeping for two.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== KITCHEN & LIVING ===== -->
|
||||
<section class="section" style="background:var(--warm-white)">
|
||||
<div class="container">
|
||||
<div class="property-grid">
|
||||
<div class="property-image fade-up">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_fda7ac3fe55d429393a51b2c1148dbb5~mv2.jpg" alt="Kitchen and dining area" loading="lazy" style="aspect-ratio:16/10">
|
||||
</div>
|
||||
<div class="property-text fade-up fade-up-delay-1">
|
||||
<span class="section-label">Interior</span>
|
||||
<h2 class="section-title">Fully Equipped<br>Kitchen & Living</h2>
|
||||
<p>Cook like you're at home in our fully equipped kitchen with modern appliances, spacious countertops, and a dining area for family meals. The open-concept living room flows seamlessly to the balcony — perfect for gathering after a day at the beach.</p>
|
||||
<div class="property-stats">
|
||||
<span class="stat-badge"><span class="icon">🍳</span> Full Kitchen</span>
|
||||
<span class="stat-badge"><span class="icon">📺</span> WiFi + TV</span>
|
||||
<span class="stat-badge"><span class="icon">❄️</span> Central A/C</span>
|
||||
<span class="stat-badge"><span class="icon">🅿️</span> Free Parking</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== AMENITIES ===== -->
|
||||
<section class="section amenities" id="amenities">
|
||||
<div class="container">
|
||||
<span class="section-label">Resort Amenities</span>
|
||||
<h2 class="section-title">Everything You Need</h2>
|
||||
<p class="section-subtitle">Maravilla offers resort-style amenities for the whole family — all just steps from your door.</p>
|
||||
<div class="amenities-grid">
|
||||
<div class="amenity-card fade-up">
|
||||
<span class="amenity-icon">🏊</span>
|
||||
<h4>2 Pools</h4>
|
||||
<p>One heated in winter</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-1">
|
||||
<span class="amenity-icon">♨️</span>
|
||||
<h4>Hot Tub</h4>
|
||||
<p>Open year-round</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-2">
|
||||
<span class="amenity-icon">🏖️</span>
|
||||
<h4>Private Beach</h4>
|
||||
<p>2.5 acres of white sand</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up">
|
||||
<span class="amenity-icon">🎾</span>
|
||||
<h4>Tennis & Pickleball</h4>
|
||||
<p>2 courts, 1 lined for pickleball</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-1">
|
||||
<span class="amenity-icon">🏀</span>
|
||||
<h4>Basketball</h4>
|
||||
<p>Full court</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-2">
|
||||
<span class="amenity-icon">🍖</span>
|
||||
<h4>BBQ Grills</h4>
|
||||
<p>Poolside grilling</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up">
|
||||
<span class="amenity-icon">💪</span>
|
||||
<h4>Fitness Center</h4>
|
||||
<p>Stay active on vacation</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-1">
|
||||
<span class="amenity-icon">🐕</span>
|
||||
<h4>Dog Friendly</h4>
|
||||
<p>Bring your furry family</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up fade-up-delay-2">
|
||||
<span class="amenity-icon">🔑</span>
|
||||
<h4>Self Check-In</h4>
|
||||
<p>Keypad entry</p>
|
||||
</div>
|
||||
<div class="amenity-card fade-up">
|
||||
<span class="amenity-icon">🪑</span>
|
||||
<h4>Beach Service</h4>
|
||||
<p>4 chairs + 2 umbrellas</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== POOL & BEACH PHOTOS ===== -->
|
||||
<section class="section" style="background:var(--sand)">
|
||||
<div class="container">
|
||||
<span class="section-label">The Views</span>
|
||||
<h2 class="section-title">Pool, Beach & Beyond</h2>
|
||||
<p class="section-subtitle">From the pool deck to the sugar-white shoreline — every angle is postcard-worthy.</p>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_6fe99a65a950470bb4a760ce751d7631~mv2.jpg" alt="Maravilla pool" loading="lazy" class="fade-up" style="border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_6781033f117e4c78979c2e8dcdeba671~mv2.jpg" alt="Miramar Beach view" loading="lazy" class="fade-up fade-up-delay-1" style="border-radius:var(--radius);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== BEACH SERVICE ===== -->
|
||||
<section class="section beach-service" id="beach-service">
|
||||
<div class="container">
|
||||
<span class="section-label" style="color:rgba(255,255,255,.75)">Included With Your Stay</span>
|
||||
<h2 class="section-title">Beach Service Included</h2>
|
||||
<p class="section-subtitle">Available mid-March through late October — set up and waiting for you every morning.</p>
|
||||
<div class="beach-service-inner">
|
||||
<div class="beach-stat fade-up">
|
||||
<div class="number">4</div>
|
||||
<div class="label">Beach Chairs</div>
|
||||
</div>
|
||||
<div class="beach-stat fade-up fade-up-delay-1">
|
||||
<div class="number">2</div>
|
||||
<div class="label">Umbrellas</div>
|
||||
</div>
|
||||
<div class="beach-stat fade-up fade-up-delay-2">
|
||||
<div class="number">2.5</div>
|
||||
<div class="label">Acres Private Beach</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== COMMUNITY ===== -->
|
||||
<section class="community" id="community">
|
||||
<div class="community-bg"></div>
|
||||
<div class="container">
|
||||
<span class="section-label" style="color:rgba(255,255,255,.75)">The Community</span>
|
||||
<h2 class="section-title">Maravilla Resort</h2>
|
||||
<p class="section-subtitle">A gated beachfront community on Miramar Beach — where the Emerald Coast shines brightest.</p>
|
||||
<div class="community-features">
|
||||
<div class="community-feature fade-up">
|
||||
<div class="feature-icon">🏘️</div>
|
||||
<h4>Gated Community</h4>
|
||||
<p>Secure, private access for residents and guests only.</p>
|
||||
</div>
|
||||
<div class="community-feature fade-up fade-up-delay-1">
|
||||
<div class="feature-icon">🏖️</div>
|
||||
<h4>2.5 Acre Private Beach</h4>
|
||||
<p>Sugar-white sand stretching along the Gulf — never crowded.</p>
|
||||
</div>
|
||||
<div class="community-feature fade-up fade-up-delay-2">
|
||||
<div class="feature-icon">📍</div>
|
||||
<h4>Prime Location</h4>
|
||||
<p>On Scenic Gulf Drive between Destin Harbor and 30A — close to everything.</p>
|
||||
</div>
|
||||
<div class="community-feature fade-up fade-up-delay-3">
|
||||
<div class="feature-icon">🌅</div>
|
||||
<h4>Gulf Views</h4>
|
||||
<p>Stunning sunsets from your private balcony — every evening is a show.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== NEARBY ===== -->
|
||||
<section class="section nearby" id="nearby">
|
||||
<div class="container">
|
||||
<span class="section-label">Explore the Area</span>
|
||||
<h2 class="section-title">Nearby Restaurants & Attractions</h2>
|
||||
<p class="section-subtitle">Everything you need within a few miles — from casual beach eats to upscale dining and shopping.</p>
|
||||
<div class="nearby-tabs">
|
||||
<button class="nearby-tab active" onclick="switchTab('dining',this)">🍽️ Dining</button>
|
||||
<button class="nearby-tab" onclick="switchTab('shopping',this)">🛍️ Shopping</button>
|
||||
<button class="nearby-tab" onclick="switchTab('attractions',this)">🎯 Attractions</button>
|
||||
</div>
|
||||
<div class="nearby-grid" id="nearby-dining">
|
||||
<div class="nearby-item"><span class="item-icon">🦞</span><div class="item-info"><strong>Pompano Joe's</strong><span>Beachfront seafood, casual</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🐟</span><div class="item-info"><strong>Captain Dave's</strong><span>Fresh Gulf seafood</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🍔</span><div class="item-info"><strong>Surf Hut</strong><span>Beachside burgers & drinks</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🦀</span><div class="item-info"><strong>Kenny D's</strong><span>Local seafood favorite</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🍝</span><div class="item-info"><strong>Mama Clemenza's</strong><span>Italian breakfast & brunch</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🍷</span><div class="item-info"><strong>Bijoux</strong><span>Upscale New Orleans seafood</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🧀</span><div class="item-info"><strong>Vin'Tij Food & Wine</strong><span>Wine bar at Grand Blvd</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🌺</span><div class="item-info"><strong>Tommy Bahama</strong><span>Island-inspired dining</span></div></div>
|
||||
</div>
|
||||
<div class="nearby-grid" id="nearby-shopping" style="display:none">
|
||||
<div class="nearby-item"><span class="item-icon">🛒</span><div class="item-info"><strong>Winn-Dixie</strong><span>Grocery — 1.5 miles</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🏪</span><div class="item-info"><strong>Wal-Mart</strong><span>Supercenter nearby</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🛍️</span><div class="item-info"><strong>Sandestin Outlet Mall</strong><span>Premium outlet shopping</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">✨</span><div class="item-info"><strong>Grand Blvd</strong><span>Upscale shopping district</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">👗</span><div class="item-info"><strong>Silver Sands Outlets</strong><span>Designer outlet stores</span></div></div>
|
||||
</div>
|
||||
<div class="nearby-grid" id="nearby-attractions" style="display:none">
|
||||
<div class="nearby-item"><span class="item-icon">🏖️</span><div class="item-info"><strong>James Lee Beach</strong><span>Direct public beach access</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">⚓</span><div class="item-info"><strong>Destin Harbor</strong><span>World's Luckiest Fishing Village</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🛣️</span><div class="item-info"><strong>30A</strong><span>Scenic coastal highway & boutique towns</span></div></div>
|
||||
<div class="nearby-item"><span class="item-icon">🌊</span><div class="item-info"><strong>Emerald Coast</strong><span>Stunning green-hued water</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== OWNERS ===== -->
|
||||
<section class="section owners" id="owners">
|
||||
<div class="container">
|
||||
<div class="owners-grid">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_5dca81e7c6984df68055636c3ab61015~mv2.jpg" alt="Tim & Ashley Moore" class="owners-photo fade-up" loading="lazy">
|
||||
<div class="owners-text fade-up fade-up-delay-1">
|
||||
<span class="section-label">Your Hosts</span>
|
||||
<h2 class="section-title">Tim & Ashley Moore</h2>
|
||||
<p class="tag">Welcome to our family's beach retreat!</p>
|
||||
<p>We fell in love with Miramar Beach years ago and are thrilled to share our slice of paradise with you. Our goal is simple: give your family the kind of beach vacation that turns into a tradition. We've stocked the condo with everything you need, partnered with the best beach service on the coast, and are always just a message away.</p>
|
||||
<p style="font-style:italic">"Come soak up the sun and make some memories. That's what Moore Sunny Daze is all about."</p>
|
||||
<p style="font-weight:600;color:var(--coral)">— Tim & Ashley</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== BOOK NOW ===== -->
|
||||
<section class="book-strip" id="book">
|
||||
<div class="container">
|
||||
<span class="section-label" style="color:rgba(255,255,255,.75)">Ready to Escape?</span>
|
||||
<h2>Book Your Stay at Moore Sunny Daze</h2>
|
||||
<p>Maravilla 1403 · Miramar Beach, FL · 3BR / 2BA · Sleeps 8 · Dog Friendly</p>
|
||||
<a href="https://www.vrbo.com/1313017" class="hero-cta" target="_blank" rel="noopener">🏖️ Check Availability on VRBO</a>
|
||||
<p style="margin-top:1rem;font-size:.9rem;opacity:.75">Also available on <a href="https://airbnb.com/rooms/1387088497032914961" target="_blank" rel="noopener" style="text-decoration:underline;color:#fff">Airbnb</a> — 5.0 ⭐ · 3-night minimum</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== FOOTER ===== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<h4>🌴 Moore Sunny Daze</h4>
|
||||
<p style="font-size:.9rem">Maravilla 1403<br>Miramar Beach, FL 32550</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Quick Links</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#rooms">Bedrooms</a></li>
|
||||
<li><a href="#amenities">Amenities</a></li>
|
||||
<li><a href="#community">Maravilla</a></li>
|
||||
<li><a href="#nearby">Nearby</a></li>
|
||||
<li><a href="#book">Book Now</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Book Direct</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="https://www.vrbo.com/1313017" target="_blank" rel="noopener">🏖️ VRBO Listing</a></li>
|
||||
<li><a href="https://airbnb.com/rooms/1387088497032914961" target="_blank" rel="noopener">⭐ Airbnb (5.0)</a></li>
|
||||
<li><a href="https://facebook.com/mooresunnydaze" target="_blank" rel="noopener">📘 Facebook</a></li>
|
||||
<li><a href="https://mooresunnydaze.com" target="_blank" rel="noopener">🌐 mooresunnydaze.com</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Hosted by</h4>
|
||||
<p style="font-size:.9rem">Tim & Ashley Moore<br>Superhosts · 1 year hosting</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2026 Moore Sunny Daze. All rights reserved. | Maravilla 1403, Miramar Beach, FL</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- ===== MOBILE BOOK NOW FAB ===== -->
|
||||
<a href="#book" class="fab-book">🏖️ Book Now</a>
|
||||
|
||||
<script>
|
||||
/* ===== PARALLAX HERO ===== */
|
||||
const heroBg = document.getElementById('hero-bg');
|
||||
const navbar = document.getElementById('navbar');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollY = window.scrollY;
|
||||
|
||||
// Parallax
|
||||
if (scrollY < window.innerHeight) {
|
||||
heroBg.style.transform = `translateY(${scrollY * 0.4}px)`;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
navbar.classList.toggle('scrolled', scrollY > 60);
|
||||
});
|
||||
|
||||
/* ===== FADE-UP ON SCROLL ===== */
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
|
||||
|
||||
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
|
||||
|
||||
/* ===== NEARBY TABS ===== */
|
||||
function switchTab(tab, btn) {
|
||||
document.querySelectorAll('.nearby-tab').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
['dining','shopping','attractions'].forEach(id => {
|
||||
const el = document.getElementById(`nearby-${id}`);
|
||||
if (el) el.style.display = id === tab ? 'grid' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
/* ===== SMOOTH SCROLL OFFSET FOR FIXED NAV ===== */
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href === '#') return;
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
const offset = 80;
|
||||
const top = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
||||
window.scrollTo({ top, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,789 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Moore Sunny Daze — Maravilla 1403 | Miramar Beach Vacation Rental</title>
|
||||
<style>
|
||||
/* ===== RESET & BASE ===== */
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
html{scroll-behavior:smooth;font-size:16px}
|
||||
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:#1a1a2e;background:#fff;overflow-x:hidden;line-height:1.6}
|
||||
img{max-width:100%;display:block}
|
||||
a{text-decoration:none;color:inherit}
|
||||
|
||||
/* ===== TYPOGRAPHY ===== */
|
||||
h1,h2,h3,.hero-title,.stat-number{font-weight:800;letter-spacing:-0.02em;line-height:1.1}
|
||||
h2{font-size:clamp(2rem,4.5vw,3.5rem);margin-bottom:0.5rem}
|
||||
.section-tag{display:inline-block;text-transform:uppercase;font-size:0.8rem;font-weight:700;letter-spacing:0.15em;margin-bottom:0.75rem;border-radius:50px;padding:0.35em 1em}
|
||||
|
||||
/* ===== COLORS ===== */
|
||||
:root{
|
||||
--coral:#FF6B35;
|
||||
--coral-dark:#E55A2B;
|
||||
--teal:#00B4D8;
|
||||
--teal-dark:#0096B4;
|
||||
--yellow:#FFD166;
|
||||
--yellow-bright:#FFE066;
|
||||
--white:#FFFFFF;
|
||||
--off-white:#FFF9F5;
|
||||
--dark:#1a1a2e;
|
||||
--gray-light:#F0EDEB;
|
||||
--text-muted:#6B7280;
|
||||
}
|
||||
|
||||
/* ===== UTILITY ===== */
|
||||
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
|
||||
.section{padding:5rem 0}
|
||||
.text-center{text-align:center}
|
||||
.text-coral{color:var(--coral)}
|
||||
.text-teal{color:var(--teal)}
|
||||
|
||||
/* ===== ANIMATIONS ===== */
|
||||
@keyframes float{
|
||||
0%,100%{transform:translateY(0)}
|
||||
50%{transform:translateY(-12px)}
|
||||
}
|
||||
@keyframes pulse{
|
||||
0%,100%{transform:scale(1);box-shadow:0 8px 32px rgba(255,107,53,0.4)}
|
||||
50%{transform:scale(1.05);box-shadow:0 16px 48px rgba(255,107,53,0.6)}
|
||||
}
|
||||
@keyframes shimmer{
|
||||
0%{background-position:-200% 0}
|
||||
100%{background-position:200% 0}
|
||||
}
|
||||
@keyframes wave{
|
||||
0%{transform:translateX(0)}
|
||||
50%{transform:translateX(-50%)}
|
||||
100%{transform:translateX(0)}
|
||||
}
|
||||
@keyframes driftLeft{
|
||||
0%{transform:translateX(0)}
|
||||
100%{transform:translateX(-50%)}
|
||||
}
|
||||
@keyframes particleFloat{
|
||||
0%{transform:translateY(100vh) rotate(0deg);opacity:0}
|
||||
10%{opacity:1}
|
||||
90%{opacity:1}
|
||||
100%{transform:translateY(-10vh) rotate(720deg);opacity:0}
|
||||
}
|
||||
@keyframes bounceIn{
|
||||
0%{transform:scale(0.3);opacity:0}
|
||||
50%{transform:scale(1.05)}
|
||||
70%{transform:scale(0.9)}
|
||||
100%{transform:scale(1);opacity:1}
|
||||
}
|
||||
@keyframes slideUp{
|
||||
from{transform:translateY(60px);opacity:0}
|
||||
to{transform:translateY(0);opacity:1}
|
||||
}
|
||||
@keyframes slideLeft{
|
||||
from{transform:translateX(-60px);opacity:0}
|
||||
to{transform:translateX(0);opacity:1}
|
||||
}
|
||||
@keyframes slideRight{
|
||||
from{transform:translateX(60px);opacity:0}
|
||||
to{transform:translateX(0);opacity:1}
|
||||
}
|
||||
|
||||
.reveal{opacity:0}
|
||||
.reveal.visible{animation:slideUp 0.7s cubic-bezier(0.16,1,0.3,1) forwards}
|
||||
.reveal-left.visible{animation:slideLeft 0.7s cubic-bezier(0.16,1,0.3,1) forwards}
|
||||
.reveal-right.visible{animation:slideRight 0.7s cubic-bezier(0.16,1,0.3,1) forwards}
|
||||
.delay-1{animation-delay:0.1s}
|
||||
.delay-2{animation-delay:0.2s}
|
||||
.delay-3{animation-delay:0.3s}
|
||||
.delay-4{animation-delay:0.4s}
|
||||
|
||||
/* ===== NAVBAR ===== */
|
||||
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;transition:all 0.3s ease}
|
||||
.navbar.scrolled{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);box-shadow:0 2px 20px rgba(0,0,0,0.08);padding:0.6rem 2rem}
|
||||
.navbar.scrolled .nav-links a{color:var(--dark)}
|
||||
.nav-logo{font-size:1.4rem;font-weight:800;color:var(--white);display:flex;align-items:center;gap:0.5rem}
|
||||
.navbar.scrolled .nav-logo{color:var(--coral)}
|
||||
.nav-logo .sun{font-size:1.8rem;animation:float 3s ease-in-out infinite}
|
||||
.nav-links{display:flex;gap:2rem;align-items:center;list-style:none}
|
||||
.nav-links a{color:var(--white);font-weight:600;font-size:0.95rem;transition:color 0.3s;position:relative}
|
||||
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--coral);transition:width 0.3s}
|
||||
.nav-links a:hover::after{width:100%}
|
||||
.nav-cta{background:var(--coral);color:#fff!important;padding:0.6rem 1.5rem;border-radius:50px;font-weight:700;transition:all 0.3s}
|
||||
.navbar.scrolled .nav-cta{color:#fff!important}
|
||||
.nav-cta:hover{background:var(--coral-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,107,53,0.4)}
|
||||
.nav-cta::after{display:none!important}
|
||||
.mobile-toggle{display:none;background:none;border:none;color:var(--white);font-size:1.8rem;cursor:pointer}
|
||||
.navbar.scrolled .mobile-toggle{color:var(--dark)}
|
||||
|
||||
/* ===== HERO ===== */
|
||||
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,#0a1628 0%,#0d2137 30%,#003849 70%,#00475e 100%)}
|
||||
.hero-bg{position:absolute;inset:0;background:url('https://static.wixstatic.com/media/0a1b51_e07cc4dbb6c74815812ad594235b011e~mv2.jpg') center/cover no-repeat;opacity:0.35;transform:scale(1.05)}
|
||||
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,var(--teal-dark) 95%,var(--dark) 100%);opacity:0.6}
|
||||
|
||||
/* Particles */
|
||||
.hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
|
||||
.particle{position:absolute;border-radius:50%;background:var(--yellow);opacity:0;animation:particleFloat linear infinite}
|
||||
.particle:nth-child(1){width:4px;height:4px;left:10%;animation-duration:8s;animation-delay:0s}
|
||||
.particle:nth-child(2){width:3px;height:3px;left:22%;animation-duration:12s;animation-delay:1s}
|
||||
.particle:nth-child(3){width:5px;height:5px;left:35%;animation-duration:10s;animation-delay:2s}
|
||||
.particle:nth-child(4){width:3px;height:3px;left:48%;animation-duration:14s;animation-delay:0.5s}
|
||||
.particle:nth-child(5){width:4px;height:4px;left:55%;animation-duration:9s;animation-delay:3s}
|
||||
.particle:nth-child(6){width:6px;height:6px;left:65%;animation-duration:11s;animation-delay:1.5s}
|
||||
.particle:nth-child(7){width:3px;height:3px;left:75%;animation-duration:13s;animation-delay:2.5s}
|
||||
.particle:nth-child(8){width:4px;height:4px;left:85%;animation-duration:8s;animation-delay:0.8s}
|
||||
.particle:nth-child(9){width:5px;height:5px;left:92%;animation-duration:10s;animation-delay:3.5s}
|
||||
.particle:nth-child(10){width:3px;height:3px;left:5%;animation-duration:15s;animation-delay:4s}
|
||||
.particle:nth-child(11){width:4px;height:4px;left:40%;animation-duration:12s;animation-delay:5s}
|
||||
.particle:nth-child(12){width:5px;height:5px;left:60%;animation-duration:9s;animation-delay:6s}
|
||||
.particle:nth-child(13){width:3px;height:3px;left:18%;animation-duration:11s;animation-delay:2s}
|
||||
.particle:nth-child(14){width:4px;height:4px;left:80%;animation-duration:14s;animation-delay:4.5s}
|
||||
.particle:nth-child(15){width:3px;height:3px;left:50%;animation-duration:7s;animation-delay:3s}
|
||||
|
||||
.hero-content{position:relative;z-index:2;max-width:800px;padding:0 2rem;margin-top:2rem}
|
||||
.hero-badge{display:inline-block;background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);color:var(--yellow);padding:0.5rem 1.25rem;border-radius:50px;font-size:0.85rem;font-weight:700;letter-spacing:0.05em;margin-bottom:1.5rem;animation:slideUp 0.8s ease-out}
|
||||
.hero-title{font-size:clamp(3rem,7vw,5.5rem);color:var(--white);margin-bottom:0.5rem;line-height:1.05}
|
||||
.hero-title .highlight{color:var(--yellow);display:block;font-size:clamp(2rem,5vw,3.5rem)}
|
||||
.hero-title .teal-accent{color:var(--teal)}
|
||||
.hero-subtitle{font-size:clamp(1.1rem,2vw,1.4rem);color:rgba(255,255,255,0.85);margin-bottom:2rem;max-width:550px}
|
||||
.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap}
|
||||
.btn{display:inline-flex;align-items:center;gap:0.5rem;padding:1rem 2.25rem;border-radius:50px;font-weight:700;font-size:1.05rem;border:none;cursor:pointer;transition:all 0.3s;letter-spacing:0.01em}
|
||||
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 8px 32px rgba(255,107,53,0.35)}
|
||||
.btn-primary:hover{background:var(--coral-dark);transform:translateY(-3px);box-shadow:0 12px 40px rgba(255,107,53,0.5)}
|
||||
.btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.4)}
|
||||
.btn-outline:hover{background:rgba(255,255,255,0.1);border-color:#fff;transform:translateY(-3px)}
|
||||
|
||||
/* Hero Wave */
|
||||
.hero-wave{position:absolute;bottom:-2px;left:0;width:100%;z-index:3;overflow:hidden;line-height:0}
|
||||
.hero-wave svg{display:block;width:200%;height:120px;animation:wave 8s linear infinite}
|
||||
.hero-wave svg path{fill:var(--off-white)}
|
||||
|
||||
/* ===== STATS BANNER ===== */
|
||||
.stats-section{background:var(--off-white);position:relative;z-index:4;padding:3rem 0}
|
||||
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
|
||||
.stat-card{position:relative;padding:1.5rem}
|
||||
.stat-card::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:var(--gray-light)}
|
||||
.stat-card:last-child::after{display:none}
|
||||
.stat-icon{font-size:2.5rem;margin-bottom:0.5rem;display:block}
|
||||
.stat-number{font-size:clamp(2.5rem,4vw,3.5rem);color:var(--coral);margin-bottom:0.25rem}
|
||||
.stat-label{font-size:0.95rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
|
||||
|
||||
/* ===== SECTION HEADERS ===== */
|
||||
.section-header{margin-bottom:3.5rem}
|
||||
.section-header .section-tag{background:rgba(0,180,216,0.1);color:var(--teal)}
|
||||
.section-header h2{color:var(--dark)}
|
||||
.section-header p{color:var(--text-muted);font-size:1.15rem;max-width:600px;margin:0 auto}
|
||||
|
||||
/* ===== BEDROOMS ===== */
|
||||
.bedrooms-section{background:var(--white);position:relative}
|
||||
.bedrooms-section .section-tag{background:rgba(255,107,53,0.1);color:var(--coral)}
|
||||
.bedrooms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
|
||||
.bedroom-card{border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(0,0,0,0.06);transition:all 0.3s;cursor:pointer}
|
||||
.bedroom-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px rgba(0,0,0,0.12)}
|
||||
.bedroom-card-img{height:260px;overflow:hidden;position:relative}
|
||||
.bedroom-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
|
||||
.bedroom-card:hover .bedroom-card-img img{transform:scale(1.08)}
|
||||
.bedroom-card-badge{position:absolute;top:1rem;left:1rem;background:var(--coral);color:#fff;padding:0.3rem 0.9rem;border-radius:50px;font-size:0.8rem;font-weight:700;letter-spacing:0.03em}
|
||||
.bedroom-card-body{padding:1.5rem}
|
||||
.bedroom-card-body h3{font-size:1.25rem;margin-bottom:0.25rem;color:var(--dark)}
|
||||
.bedroom-card-body .bed-type{color:var(--teal);font-weight:700;font-size:0.9rem}
|
||||
.bedroom-card-body .bed-details{color:var(--text-muted);font-size:0.9rem;margin-top:0.25rem}
|
||||
.bedroom-extra{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1rem}
|
||||
.bedroom-extra-card{background:linear-gradient(135deg,var(--teal),var(--teal-dark));border-radius:20px;padding:2rem;color:#fff;display:flex;align-items:center;gap:1.5rem}
|
||||
.bedroom-extra-card .extra-icon{font-size:3rem}
|
||||
.bedroom-extra-card h4{font-size:1.3rem;margin-bottom:0.25rem}
|
||||
.bedroom-extra-card p{opacity:0.9;font-size:0.95rem}
|
||||
|
||||
/* ===== AMENITIES ===== */
|
||||
.amenities-section{background:var(--off-white)}
|
||||
.amenities-section .section-tag{background:rgba(255,209,102,0.3);color:#b8860b}
|
||||
.amenities-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
|
||||
.amenity-card{background:#fff;border-radius:16px;padding:2rem 1.5rem;text-align:center;transition:all 0.3s;position:relative;overflow:hidden}
|
||||
.amenity-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--coral),var(--teal),var(--yellow));transform:scaleX(0);transition:transform 0.4s}
|
||||
.amenity-card:hover::before{transform:scaleX(1)}
|
||||
.amenity-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.08)}
|
||||
.amenity-icon{font-size:2.8rem;margin-bottom:1rem;display:block}
|
||||
.amenity-card h4{font-size:1.1rem;margin-bottom:0.3rem;color:var(--dark)}
|
||||
.amenity-card p{font-size:0.85rem;color:var(--text-muted)}
|
||||
.amenity-featured{grid-column:span 2;background:linear-gradient(135deg,var(--coral),#FF8C5A);color:#fff;display:flex;align-items:center;justify-content:center;gap:2rem;padding:2.5rem 2rem;text-align:left}
|
||||
.amenity-featured::before{display:none}
|
||||
.amenity-featured .amenity-icon{font-size:3.5rem;margin:0;color:var(--yellow)}
|
||||
.amenity-featured h4{font-size:1.4rem;color:#fff;margin-bottom:0.4rem}
|
||||
.amenity-featured p{color:rgba(255,255,255,0.9);font-size:0.95rem}
|
||||
|
||||
/* ===== BEACH BANNER ===== */
|
||||
.beach-banner{position:relative;padding:6rem 0;overflow:hidden}
|
||||
.beach-banner-bg{position:absolute;inset:0;background:url('https://static.wixstatic.com/media/0a1b51_6e0326ddac2349b9a62a2a416dcb49e5~mv2.jpg') center/cover no-repeat fixed}
|
||||
.beach-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 60%,rgba(0,0,0,0.5) 100%)}
|
||||
.beach-banner-content{position:relative;z-index:2;max-width:600px}
|
||||
.beach-banner-content h2{color:#fff;font-size:clamp(2rem,5vw,3.5rem);margin-bottom:1rem}
|
||||
.beach-banner-content p{color:rgba(255,255,255,0.85);font-size:1.15rem;margin-bottom:1.5rem}
|
||||
.beach-banner-stats{display:flex;gap:2rem;margin-top:2rem;flex-wrap:wrap}
|
||||
.beach-stat{text-align:center;color:#fff}
|
||||
.beach-stat .bs-num{font-size:2.5rem;font-weight:800;color:var(--yellow)}
|
||||
.beach-stat .bs-label{font-size:0.9rem;opacity:0.8;text-transform:uppercase;letter-spacing:0.05em}
|
||||
|
||||
/* ===== AREA GUIDE ===== */
|
||||
.area-section{background:var(--white)}
|
||||
.area-section .section-tag{background:rgba(0,180,216,0.1);color:var(--teal)}
|
||||
.area-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
|
||||
.area-card{position:relative;border-radius:20px;overflow:hidden;height:320px;group:true}
|
||||
.area-card-img{position:absolute;inset:0}
|
||||
.area-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s}
|
||||
.area-card:hover .area-card-img img{transform:scale(1.08)}
|
||||
.area-card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0.2) 40%,rgba(0,0,0,0) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem}
|
||||
.area-card-tag{display:inline-block;background:var(--teal);color:#fff;padding:0.25rem 0.75rem;border-radius:50px;font-size:0.7rem;font-weight:700;letter-spacing:0.05em;margin-bottom:0.75rem;width:fit-content}
|
||||
.area-card h3{color:#fff;font-size:1.4rem;margin-bottom:0.35rem}
|
||||
.area-card p{color:rgba(255,255,255,0.8);font-size:0.9rem;line-height:1.5}
|
||||
.area-restaurants{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1rem}
|
||||
.resto-chip{background:var(--gray-light);border-radius:50px;padding:0.75rem 1.25rem;text-align:center;font-weight:700;font-size:0.9rem;color:var(--dark);transition:all 0.3s;cursor:pointer}
|
||||
.resto-chip:hover{background:var(--teal);color:#fff;transform:translateY(-2px)}
|
||||
.resto-chip .cuisine{display:block;font-size:0.7rem;font-weight:400;opacity:0.7;margin-top:0.15rem}
|
||||
|
||||
/* ===== CTA SECTION ===== */
|
||||
.cta-section{background:linear-gradient(135deg,var(--coral) 0%,#FF8C5A 50%,var(--coral) 100%);padding:5rem 0;text-align:center;position:relative;overflow:hidden}
|
||||
.cta-section::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L45 15 L37 22 L40 32 L30 26 L20 32 L23 22 L15 15 L25 15 Z' fill='rgba(255,255,255,0.05)'/%3E%3C/svg%3E") repeat;opacity:0.5}
|
||||
.cta-content{position:relative;z-index:1;max-width:700px;margin:0 auto;padding:0 1.5rem}
|
||||
.cta-content h2{color:#fff;font-size:clamp(2.2rem,5vw,4rem);margin-bottom:1rem}
|
||||
.cta-content p{color:rgba(255,255,255,0.9);font-size:1.2rem;margin-bottom:2.5rem}
|
||||
.btn-cta{display:inline-flex;align-items:center;gap:0.75rem;background:var(--yellow);color:var(--dark);padding:1.25rem 3rem;border-radius:50px;font-size:1.3rem;font-weight:800;letter-spacing:-0.01em;animation:pulse 2.5s infinite;cursor:pointer;border:none;box-shadow:0 12px 40px rgba(0,0,0,0.2);transition:all 0.3s}
|
||||
.btn-cta:hover{animation:none;transform:scale(1.08);box-shadow:0 20px 60px rgba(0,0,0,0.3)}
|
||||
.btn-cta .cta-arrow{font-size:1.5rem;transition:transform 0.3s}
|
||||
.btn-cta:hover .cta-arrow{transform:translateX(6px)}
|
||||
.cta-trust{display:flex;gap:2rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
|
||||
.cta-trust-item{color:rgba(255,255,255,0.8);font-size:0.9rem;display:flex;align-items:center;gap:0.4rem}
|
||||
.cta-trust-item .check{color:var(--yellow);font-weight:800}
|
||||
|
||||
/* ===== OWNERS ===== */
|
||||
.owners-section{background:var(--off-white)}
|
||||
.owners-section .section-tag{background:rgba(255,209,102,0.3);color:#b8860b}
|
||||
.owners-card{max-width:600px;margin:0 auto;background:#fff;border-radius:20px;padding:3rem 2rem;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,0.06)}
|
||||
.owners-img{width:120px;height:120px;border-radius:50%;object-fit:cover;margin:0 auto 1.5rem;border:4px solid var(--teal)}
|
||||
.owners-card h3{font-size:1.5rem;margin-bottom:0.25rem}
|
||||
.owners-card .owners-sub{color:var(--text-muted);margin-bottom:1rem}
|
||||
.owners-quote{font-style:italic;color:var(--text-muted);font-size:1.05rem;line-height:1.7}
|
||||
|
||||
/* ===== FOOTER ===== */
|
||||
.footer{background:var(--dark);color:rgba(255,255,255,0.7);padding:4rem 0 2rem}
|
||||
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem}
|
||||
.footer-brand h3{color:#fff;font-size:1.6rem;margin-bottom:0.75rem}
|
||||
.footer-brand .sun{color:var(--yellow)}
|
||||
.footer-brand p{font-size:0.95rem;line-height:1.7}
|
||||
.footer h4{color:#fff;margin-bottom:1rem;font-size:1.1rem}
|
||||
.footer-links{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
|
||||
.footer-links a{transition:color 0.3s;font-size:0.95rem}
|
||||
.footer-links a:hover{color:var(--coral)}
|
||||
.footer-bottom{grid-column:1/-1;text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,0.1);font-size:0.85rem;margin-top:1rem}
|
||||
|
||||
/* ===== BOTTOM CTA FLOAT (mobile) ===== */
|
||||
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:var(--coral);padding:0.75rem;text-align:center}
|
||||
.mobile-cta a{display:block;color:#fff;font-weight:800;font-size:1.1rem;letter-spacing:0.02em}
|
||||
.mobile-cta .price{font-size:0.8rem;opacity:0.85;font-weight:400}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media(max-width:1024px){
|
||||
.stats-grid{grid-template-columns:repeat(2,1fr)}
|
||||
.stat-card:nth-child(2)::after{display:none}
|
||||
.bedrooms-grid{grid-template-columns:repeat(2,1fr)}
|
||||
.amenities-grid{grid-template-columns:repeat(2,1fr)}
|
||||
.area-cards{grid-template-columns:repeat(2,1fr)}
|
||||
.area-restaurants{grid-template-columns:repeat(2,1fr)}
|
||||
.footer-grid{grid-template-columns:1fr 1fr}
|
||||
}
|
||||
@media(max-width:768px){
|
||||
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:1.5rem;gap:1rem;box-shadow:0 10px 30px rgba(0,0,0,0.1)}
|
||||
.nav-links.active{display:flex}
|
||||
.nav-links a{color:var(--dark)!important}
|
||||
.mobile-toggle{display:block}
|
||||
.hero-title{font-size:clamp(2.5rem,10vw,4rem)}
|
||||
.stats-grid{grid-template-columns:1fr 1fr}
|
||||
.stat-card::after{display:none}
|
||||
.bedrooms-grid{grid-template-columns:1fr}
|
||||
.bedroom-extra{grid-template-columns:1fr}
|
||||
.amenities-grid{grid-template-columns:1fr 1fr}
|
||||
.amenity-featured{grid-column:span 2}
|
||||
.area-cards{grid-template-columns:1fr}
|
||||
.area-restaurants{grid-template-columns:repeat(2,1fr)}
|
||||
.interior-strip{grid-template-columns:1fr}
|
||||
.footer-grid{grid-template-columns:1fr;gap:2rem}
|
||||
.mobile-cta{display:block}
|
||||
.beach-banner-stats{flex-direction:column;align-items:flex-start}
|
||||
div[style*="grid-template-columns:1fr 1fr"][style*="display:grid"]{grid-template-columns:1fr!important}
|
||||
}
|
||||
@media(max-width:480px){
|
||||
.section{padding:3rem 0}
|
||||
.amenities-grid{grid-template-columns:1fr}
|
||||
.amenity-featured{grid-column:span 1;flex-direction:column;text-align:center}
|
||||
.hero-buttons{flex-direction:column}
|
||||
.btn{justify-content:center}
|
||||
.area-restaurants{grid-template-columns:1fr}
|
||||
.stats-grid{grid-template-columns:1fr}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ===== NAVBAR ===== -->
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="#" class="nav-logo">
|
||||
<span class="sun">☀️</span> Moore Sunny Daze
|
||||
</a>
|
||||
<button class="mobile-toggle" id="mobileToggle" aria-label="Menu">☰</button>
|
||||
<ul class="nav-links" id="navLinks">
|
||||
<li><a href="#property">The Condo</a></li>
|
||||
<li><a href="#bedrooms">Bedrooms</a></li>
|
||||
<li><a href="#amenities">Amenities</a></li>
|
||||
<li><a href="#area">Area Guide</a></li>
|
||||
<li><a href="#book" class="nav-cta">Book Now</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- ===== HERO ===== -->
|
||||
<section class="hero" id="hero">
|
||||
<div class="hero-bg"></div>
|
||||
<div class="hero-particles">
|
||||
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
||||
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
||||
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
||||
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
||||
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
|
||||
</div>
|
||||
<div class="container hero-content">
|
||||
<div class="hero-badge">🏖️ Maravilla 1403 • Miramar Beach, FL</div>
|
||||
<h1 class="hero-title">
|
||||
Your <span class="highlight">Sunny</span>
|
||||
<span class="teal-accent">Beach Escape</span> Awaits
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
A vibrant 3-bedroom condo in the gated Maravilla resort — 2.5 acres of private sugar-white sand, two pools, and endless Gulf views.
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#book" class="btn btn-primary">🏝️ Book Your Stay</a>
|
||||
<a href="#property" class="btn btn-outline">Explore the Condo ↓</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-wave">
|
||||
<svg viewBox="0 0 2880 120" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0,60 C480,20 960,100 1440,60 C1920,20 2400,100 2880,60 L2880,120 L0,120 Z"/>
|
||||
<path d="M0,80 C480,40 960,110 1440,80 C1920,50 2400,110 2880,80 L2880,120 L0,120 Z" fill="rgba(255,255,255,0.6)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== STATS BANNER ===== -->
|
||||
<section class="stats-section" id="property">
|
||||
<div class="container">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card reveal">
|
||||
<span class="stat-icon">🛏️</span>
|
||||
<div class="stat-number" data-count="3">0</div>
|
||||
<div class="stat-label">Bedrooms</div>
|
||||
</div>
|
||||
<div class="stat-card reveal delay-1">
|
||||
<span class="stat-icon">🚿</span>
|
||||
<div class="stat-number" data-count="2">0</div>
|
||||
<div class="stat-label">Bathrooms</div>
|
||||
</div>
|
||||
<div class="stat-card reveal delay-2">
|
||||
<span class="stat-icon">👨👩👧👦</span>
|
||||
<div class="stat-number" data-count="8">0</div>
|
||||
<div class="stat-label">Sleeps</div>
|
||||
</div>
|
||||
<div class="stat-card reveal delay-3">
|
||||
<span class="stat-icon">⭐</span>
|
||||
<div class="stat-number" data-count="5">0</div>
|
||||
<div class="stat-label">Star Rating</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== BEDROOMS ===== -->
|
||||
<section class="section bedrooms-section" id="bedrooms">
|
||||
<div class="container">
|
||||
<div class="section-header text-center reveal">
|
||||
<span class="section-tag">Sleeping Arrangements</span>
|
||||
<h2>Room to Relax & Unwind</h2>
|
||||
<p>Three beautifully appointed bedrooms plus a queen sleeper sofa — comfortably sleeping 8 guests.</p>
|
||||
</div>
|
||||
<div class="bedrooms-grid">
|
||||
<!-- Bedroom 1 -->
|
||||
<div class="bedroom-card reveal">
|
||||
<div class="bedroom-card-img">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Primary King Suite" loading="lazy" onerror="this.src='https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg'">
|
||||
<span class="bedroom-card-badge">PRIMARY</span>
|
||||
</div>
|
||||
<div class="bedroom-card-body">
|
||||
<h3>King Suite</h3>
|
||||
<div class="bed-type">🛏️ King Bed</div>
|
||||
<div class="bed-details">Private en-suite bath • Balcony access</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bedroom 2 -->
|
||||
<div class="bedroom-card reveal delay-1">
|
||||
<div class="bedroom-card-img">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Second King Bedroom" loading="lazy">
|
||||
<span class="bedroom-card-badge">GUEST</span>
|
||||
</div>
|
||||
<div class="bedroom-card-body">
|
||||
<h3>King Guest Room</h3>
|
||||
<div class="bed-type">🛏️ King Bed</div>
|
||||
<div class="bed-details">Direct access to full bath</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bedroom 3 -->
|
||||
<div class="bedroom-card reveal delay-2">
|
||||
<div class="bedroom-card-img">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg" alt="Bunk Room" loading="lazy">
|
||||
<span class="bedroom-card-badge">KIDS</span>
|
||||
</div>
|
||||
<div class="bedroom-card-body">
|
||||
<h3>Bunk Room</h3>
|
||||
<div class="bed-type">🛏️ Bunk Beds</div>
|
||||
<div class="bed-details">Shared hallway bath • Perfect for kids</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Extra cards -->
|
||||
<div class="bedroom-extra reveal delay-3">
|
||||
<div class="bedroom-extra-card">
|
||||
<div class="extra-icon">🛋️</div>
|
||||
<div>
|
||||
<h4>Living Room Sleeper</h4>
|
||||
<p>Brand-new queen sleeper sofa — comfortable for 2 additional guests</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bedroom-extra-card" style="background:linear-gradient(135deg,rgba(0,180,216,0.85),rgba(0,150,180,0.9)),url('https://static.wixstatic.com/media/0a1b51_aef0f37089e440f592219382b3759f52~mv2.jpg') center/cover no-repeat">
|
||||
<div class="extra-icon">🌅</div>
|
||||
<div>
|
||||
<h4>Private Balcony</h4>
|
||||
<p>Sip your morning coffee with Gulf breezes and sunset views</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== INTERIOR PREVIEW STRIP ===== -->
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--dark);overflow:hidden">
|
||||
<div style="position:relative;overflow:hidden;height:350px" class="reveal-left">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_fda7ac3fe55d429393a51b2c1148dbb5~mv2.jpg" alt="Kitchen & Dining" loading="lazy" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
|
||||
<div style="position:absolute;bottom:0;left:0;right:0;padding:2rem;background:linear-gradient(transparent,rgba(0,0,0,0.7))">
|
||||
<span style="background:var(--teal);color:#fff;padding:0.2rem 0.8rem;border-radius:50px;font-size:0.75rem;font-weight:700;letter-spacing:0.05em">INTERIOR</span>
|
||||
<h3 style="color:#fff;margin-top:0.5rem">Fully Equipped Kitchen</h3>
|
||||
<p style="color:rgba(255,255,255,0.8);font-size:0.9rem">Modern appliances & everything you need to cook for the crew</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:relative;overflow:hidden;height:350px" class="reveal-right">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Living Room" loading="lazy" style="width:100%;height:100%;object-fit:cover;transition:transform 0.6s" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
|
||||
<div style="position:absolute;bottom:0;left:0;right:0;padding:2rem;background:linear-gradient(transparent,rgba(0,0,0,0.7))">
|
||||
<span style="background:var(--yellow);color:var(--dark);padding:0.2rem 0.8rem;border-radius:50px;font-size:0.75rem;font-weight:700;letter-spacing:0.05em">LIVING</span>
|
||||
<h3 style="color:#fff;margin-top:0.5rem">Open-Concept Living</h3>
|
||||
<p style="color:rgba(255,255,255,0.8);font-size:0.9rem">Spacious living area with Gulf views & brand-new sleeper sofa</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== BEACH BANNER ===== -->
|
||||
<div class="beach-banner reveal">
|
||||
<div class="beach-banner-bg"></div>
|
||||
<div class="container" style="position:relative;z-index:2">
|
||||
<div class="beach-banner-content">
|
||||
<h2>2.5 Acres of Private Sugar-White Sand</h2>
|
||||
<p>Step out of your condo and onto one of Florida's most beautiful beaches. Beach service included — 4 chairs and 2 umbrellas ready for you.</p>
|
||||
<div class="beach-banner-stats">
|
||||
<div class="beach-stat">
|
||||
<div class="bs-num">2.5</div>
|
||||
<div class="bs-label">Private Acres</div>
|
||||
</div>
|
||||
<div class="beach-stat">
|
||||
<div class="bs-num">4</div>
|
||||
<div class="bs-label">Beach Chairs</div>
|
||||
</div>
|
||||
<div class="beach-stat">
|
||||
<div class="bs-num">2</div>
|
||||
<div class="bs-label">Umbrellas</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== AMENITIES ===== -->
|
||||
<section class="section amenities-section" id="amenities">
|
||||
<div class="container">
|
||||
<div class="section-header text-center reveal">
|
||||
<span class="section-tag">Resort Amenities</span>
|
||||
<h2>Everything You Need for the Perfect Stay</h2>
|
||||
<p>Maravilla has it all — pools, sports, fitness, and more. Here's what's waiting for you.</p>
|
||||
</div>
|
||||
<div class="amenities-grid">
|
||||
<div class="amenity-card reveal">
|
||||
<span class="amenity-icon">🏊</span>
|
||||
<h4>2 Resort Pools</h4>
|
||||
<p>One heated in winter — swim year-round</p>
|
||||
</div>
|
||||
<div class="amenity-card reveal delay-1">
|
||||
<span class="amenity-icon">♨️</span>
|
||||
<h4>Hot Tub</h4>
|
||||
<p>Soak under the stars after a beach day</p>
|
||||
</div>
|
||||
<div class="amenity-card reveal delay-2">
|
||||
<span class="amenity-icon">🎾</span>
|
||||
<h4>Tennis & Pickleball</h4>
|
||||
<p>2 tennis courts, 1 lined for pickleball</p>
|
||||
</div>
|
||||
<div class="amenity-card reveal delay-3">
|
||||
<span class="amenity-icon">🏀</span>
|
||||
<h4>Basketball Court</h4>
|
||||
<p>Shoot hoops with the family</p>
|
||||
</div>
|
||||
<div class="amenity-card reveal">
|
||||
<span class="amenity-icon">🍖</span>
|
||||
<h4>BBQ Grills</h4>
|
||||
<p>Cook out by the pool — grills provided</p>
|
||||
</div>
|
||||
<div class="amenity-card reveal delay-1">
|
||||
<span class="amenity-icon">💪</span>
|
||||
<h4>Fitness Center</h4>
|
||||
<p>Stay active with resort gym access</p>
|
||||
</div>
|
||||
<div class="amenity-card reveal delay-2">
|
||||
<span class="amenity-icon">🐕</span>
|
||||
<h4>Dog Friendly</h4>
|
||||
<p>Bring your furry family member along!</p>
|
||||
</div>
|
||||
<div class="amenity-card reveal delay-3">
|
||||
<span class="amenity-icon">🔑</span>
|
||||
<h4>Self Check-In</h4>
|
||||
<p>Keypad entry — arrive on your schedule</p>
|
||||
</div>
|
||||
<div class="amenity-featured reveal" style="background:linear-gradient(135deg,rgba(0,180,216,0.9),rgba(0,130,160,0.95)),url('https://static.wixstatic.com/media/0a1b51_6fe99a65a950470bb4a760ce751d7631~mv2.jpg') center/cover no-repeat">
|
||||
<span class="amenity-icon">🏖️</span>
|
||||
<div>
|
||||
<h4>Beach Service Included</h4>
|
||||
<p>4 chairs + 2 umbrellas set up daily (mid-March through late October). Just show up and relax — we've got your spot on the sand.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amenity-card reveal delay-1">
|
||||
<span class="amenity-icon">📶</span>
|
||||
<h4>Free WiFi</h4>
|
||||
<p>High-speed internet throughout the condo</p>
|
||||
</div>
|
||||
<div class="amenity-card reveal delay-2">
|
||||
<span class="amenity-icon">🚗</span>
|
||||
<h4>Free Parking</h4>
|
||||
<p>Ample parking right at the building</p>
|
||||
</div>
|
||||
<div class="amenity-card reveal delay-3">
|
||||
<span class="amenity-icon">❄️</span>
|
||||
<h4>Central A/C</h4>
|
||||
<p>Stay cool after a day in the Florida sun</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== AREA GUIDE ===== -->
|
||||
<section class="section area-section" id="area">
|
||||
<div class="container">
|
||||
<div class="section-header text-center reveal">
|
||||
<span class="section-tag">Area Guide</span>
|
||||
<h2>Explore Miramar Beach</h2>
|
||||
<p>Between Destin Harbor and iconic 30A — the best of the Emerald Coast at your doorstep.</p>
|
||||
</div>
|
||||
<div class="area-cards">
|
||||
<div class="area-card reveal">
|
||||
<div class="area-card-img">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_6e0326ddac2349b9a62a2a416dcb49e5~mv2.jpg" alt="Beach" loading="lazy">
|
||||
</div>
|
||||
<div class="area-card-overlay">
|
||||
<span class="area-card-tag">🏖️ BEACH</span>
|
||||
<h3>James Lee Beach</h3>
|
||||
<p>Direct beach access from Maravilla — walk out your door onto soft white sand and emerald water.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area-card reveal delay-1">
|
||||
<div class="area-card-img">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_6781033f117e4c78979c2e8dcdeba671~mv2.jpg" alt="Destin Harbor" loading="lazy">
|
||||
</div>
|
||||
<div class="area-card-overlay">
|
||||
<span class="area-card-tag">🎣 FISHING</span>
|
||||
<h3>Destin Harbor</h3>
|
||||
<p>World's Luckiest Fishing Village — charter a boat, stroll the boardwalk, or dine with harbor views.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="area-card reveal delay-2">
|
||||
<div class="area-card-img">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_4d5646edd6c443b2acf7940cacd392a7~mv2.jpg" alt="30A" loading="lazy">
|
||||
</div>
|
||||
<div class="area-card-overlay">
|
||||
<span class="area-card-tag">🛣️ SCENIC DRIVE</span>
|
||||
<h3>Highway 30A</h3>
|
||||
<p>Scenic coastal highway with boutique towns, art galleries, and award-winning dining.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Restaurants -->
|
||||
<div style="margin-top:2.5rem;text-align:center">
|
||||
<h3 style="margin-bottom:1.5rem;font-size:1.5rem" class="reveal">🍽️ Nearby Restaurants</h3>
|
||||
<div class="area-restaurants">
|
||||
<div class="resto-chip reveal">Pompano Joe's<span class="cuisine">Seafood • Beachfront</span></div>
|
||||
<div class="resto-chip reveal delay-1">Captain Dave's<span class="cuisine">Seafood • Gulf Views</span></div>
|
||||
<div class="resto-chip reveal delay-2">Surf Hut<span class="cuisine">Casual • Beach Bar</span></div>
|
||||
<div class="resto-chip reveal delay-3">Kenny D's<span class="cuisine">American • Family</span></div>
|
||||
<div class="resto-chip reveal">Mama Clemenza's<span class="cuisine">Italian Breakfast</span></div>
|
||||
<div class="resto-chip reveal delay-1">Bijoux<span class="cuisine">Upscale Seafood</span></div>
|
||||
<div class="resto-chip reveal delay-2">Vin'Tij Wine Bar<span class="cuisine">Wine & Dining</span></div>
|
||||
<div class="resto-chip reveal delay-3">Tommy Bahama<span class="cuisine">Island-Inspired</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Shopping -->
|
||||
<div style="margin-top:3rem;text-align:center" class="reveal">
|
||||
<h3 style="margin-bottom:1rem;font-size:1.3rem">🛍️ Shopping Nearby</h3>
|
||||
<p style="color:var(--text-muted);max-width:600px;margin:0 auto">
|
||||
Winn-Dixie & Wal-Mart for groceries • Grand Blvd shopping district • Silver Sands Premium Outlets • Sandestin Outlet Mall — all within 3 miles
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== CTA ===== -->
|
||||
<section class="cta-section" id="book">
|
||||
<div class="cta-content">
|
||||
<h2 class="reveal">Ready for Your <span style="color:var(--yellow)">Sunny Escape</span>?</h2>
|
||||
<p class="reveal delay-1">3-night minimum stay. Peak summer dates book solid — reserve your slice of paradise today.</p>
|
||||
<a href="https://www.vrbo.com/1313017" class="btn-cta reveal delay-2" target="_blank" rel="noopener">
|
||||
☀️ Book Now on VRBO
|
||||
<span class="cta-arrow">→</span>
|
||||
</a>
|
||||
<div class="cta-trust reveal delay-3">
|
||||
<div class="cta-trust-item"><span class="check">✓</span> 5.0 ★ on Airbnb</div>
|
||||
<div class="cta-trust-item"><span class="check">✓</span> Instant Booking</div>
|
||||
<div class="cta-trust-item"><span class="check">✓</span> Beach Service Included</div>
|
||||
<div class="cta-trust-item"><span class="check">✓</span> Free Cancellation Window</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== OWNERS ===== -->
|
||||
<section class="section owners-section">
|
||||
<div class="container">
|
||||
<div class="owners-card reveal">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_5dca81e7c6984df68055636c3ab61015~mv2.jpg" alt="Tim & Ashley Moore" class="owners-img" loading="lazy" onerror="this.style.display='none'">
|
||||
<h3>Tim & Ashley Moore</h3>
|
||||
<p class="owners-sub">Your Hosts</p>
|
||||
<p class="owners-quote">"We fell in love with Miramar Beach and can't wait to share our slice of paradise with you. Whether it's your first visit or your tenth, we're committed to making your stay unforgettable."</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== FOOTER ===== -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-brand">
|
||||
<h3><span class="sun">☀️</span> Moore Sunny Daze</h3>
|
||||
<p>Maravilla 1403 • Miramar Beach, FL 32550<br>
|
||||
A gated community with 2.5 acres of private beach along Scenic Gulf Drive — between Destin Harbor and Highway 30A.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Quick Links</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#property">The Condo</a></li>
|
||||
<li><a href="#bedrooms">Bedrooms</a></li>
|
||||
<li><a href="#amenities">Amenities</a></li>
|
||||
<li><a href="#area">Area Guide</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Book With Us</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="https://www.vrbo.com/1313017" target="_blank" rel="noopener">VRBO Listing</a></li>
|
||||
<li><a href="https://airbnb.com/rooms/1387088497032914961" target="_blank" rel="noopener">Airbnb Listing</a></li>
|
||||
<li><a href="https://facebook.com/mooresunnydaze" target="_blank" rel="noopener">Facebook</a></li>
|
||||
<li><a href="https://mooresunnydaze.com" target="_blank" rel="noopener">Website</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
© 2026 Moore Sunny Daze. Tim & Ashley Moore. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== MOBILE CTA ===== -->
|
||||
<div class="mobile-cta">
|
||||
<a href="#book">☀️ Book Now — From $XXX/night <span class="price">3-night min</span></a>
|
||||
</div>
|
||||
|
||||
<!-- ===== SCRIPTS ===== -->
|
||||
<script>
|
||||
// Navbar scroll effect
|
||||
const navbar = document.getElementById('navbar');
|
||||
window.addEventListener('scroll', () => {
|
||||
navbar.classList.toggle('scrolled', window.scrollY > 50);
|
||||
});
|
||||
|
||||
// Mobile toggle
|
||||
const mobileToggle = document.getElementById('mobileToggle');
|
||||
const navLinks = document.getElementById('navLinks');
|
||||
mobileToggle.addEventListener('click', () => {
|
||||
navLinks.classList.toggle('active');
|
||||
});
|
||||
// Close mobile nav on link click
|
||||
navLinks.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => navLinks.classList.remove('active'));
|
||||
});
|
||||
|
||||
// Scroll reveal (Intersection Observer)
|
||||
const reveals = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');
|
||||
const observerOptions = { threshold: 0.15, rootMargin: '0px 0px -50px 0px' };
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
reveals.forEach(el => revealObserver.observe(el));
|
||||
|
||||
// Counter animation
|
||||
const counters = document.querySelectorAll('.stat-number[data-count]');
|
||||
const counterObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const el = entry.target;
|
||||
const target = parseInt(el.getAttribute('data-count'));
|
||||
const duration = 2000;
|
||||
const start = performance.now();
|
||||
function update(now) {
|
||||
const elapsed = now - start;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
// Ease out cubic
|
||||
const eased = 1 - Math.pow(1 - progress, 3);
|
||||
el.textContent = Math.round(eased * target);
|
||||
if (progress < 1) requestAnimationFrame(update);
|
||||
}
|
||||
requestAnimationFrame(update);
|
||||
counterObserver.unobserve(el);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
counters.forEach(el => counterObserver.observe(el));
|
||||
|
||||
// Smooth parallax for hero
|
||||
window.addEventListener('scroll', () => {
|
||||
const hero = document.querySelector('.hero-bg');
|
||||
if (hero) {
|
||||
hero.style.transform = `scale(1.05) translateY(${window.scrollY * 0.3}px)`;
|
||||
}
|
||||
});
|
||||
|
||||
// Close mobile nav when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!navbar.contains(e.target) && navLinks.classList.contains('active')) {
|
||||
navLinks.classList.remove('active');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,599 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Moore Sunny Daze — Maravilla 1403</title>
|
||||
<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=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;1,14..32,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ── Reset & Base ── */
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
html{scroll-behavior:smooth;font-size:16px}
|
||||
body{
|
||||
font-family:'Inter',-apple-system,sans-serif;
|
||||
color:#3D4A53;
|
||||
background:#FBF9F6;
|
||||
line-height:1.7;
|
||||
-webkit-font-smoothing:antialiased;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
|
||||
/* ── Typography ── */
|
||||
h1,h2,h3,h4,.serif{font-family:'Playfair Display','Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-0.01em}
|
||||
h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1.08;color:#fff}
|
||||
h2{font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.2;color:#2C3E4E;margin-bottom:1.5rem}
|
||||
h3{font-size:clamp(1.3rem,2.2vw,1.6rem);color:#2C3E4E}
|
||||
.accent-line{
|
||||
display:block;
|
||||
width:60px;height:2px;
|
||||
background:linear-gradient(90deg,#C5A572 0%,#C5A572 40%,transparent 100%);
|
||||
margin:0 auto 1.8rem;
|
||||
}
|
||||
.accent-line.left{margin:0 0 1.8rem 0}
|
||||
|
||||
/* ── Colors ── */
|
||||
:root{
|
||||
--dusty-blue:#8BA4BC;
|
||||
--dusty-blue-dark:#6B8AA0;
|
||||
--sand:#D4C5B9;
|
||||
--sand-light:#EAE0D6;
|
||||
--gold:#C5A572;
|
||||
--gold-light:#D4B98A;
|
||||
--cream:#FBF9F6;
|
||||
--white:#FFFFFF;
|
||||
--text:#3D4A53;
|
||||
--text-light:#6B7B86;
|
||||
}
|
||||
|
||||
/* ── Navigation ── */
|
||||
.nav{
|
||||
position:fixed;top:0;left:0;right:0;z-index:100;
|
||||
padding:1.5rem 3rem;
|
||||
display:flex;justify-content:space-between;align-items:center;
|
||||
transition:background 0.4s ease, padding 0.4s ease;
|
||||
}
|
||||
.nav.scrolled{
|
||||
background:rgba(255,255,255,0.95);
|
||||
backdrop-filter:blur(16px);
|
||||
-webkit-backdrop-filter:blur(16px);
|
||||
padding:0.8rem 3rem;
|
||||
box-shadow:0 1px 0 rgba(0,0,0,0.05);
|
||||
}
|
||||
.nav-logo{
|
||||
font-family:'Playfair Display',serif;
|
||||
font-size:1.4rem;font-weight:600;color:#fff;
|
||||
letter-spacing:0.04em;
|
||||
transition:color 0.4s ease;
|
||||
}
|
||||
.nav.scrolled .nav-logo{color:#2C3E4E}
|
||||
.nav-links{display:flex;gap:2.2rem;list-style:none}
|
||||
.nav-links a{
|
||||
text-decoration:none;color:rgba(255,255,255,0.85);
|
||||
font-size:0.85rem;font-weight:400;letter-spacing:0.08em;
|
||||
text-transform:uppercase;
|
||||
transition:color 0.3s ease;
|
||||
}
|
||||
.nav.scrolled .nav-links a{color:#6B7B86}
|
||||
.nav-links a:hover{color:#C5A572}
|
||||
|
||||
/* ── Sections ── */
|
||||
section{padding:7rem 2rem}
|
||||
.section-header{text-align:center;max-width:650px;margin:0 auto 4rem}
|
||||
.section-header p{color:var(--text-light);font-size:1.05rem;line-height:1.8}
|
||||
|
||||
/* ── Hero ── */
|
||||
.hero{
|
||||
position:relative;
|
||||
height:100vh;min-height:650px;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
.hero-bg{
|
||||
position:absolute;inset:0;
|
||||
background:url('https://static.wixstatic.com/media/0a1b51_e07cc4dbb6c74815812ad594235b011e~mv2.jpg') center/cover no-repeat;
|
||||
will-change:transform;
|
||||
}
|
||||
.hero::after{
|
||||
content:'';position:absolute;inset:0;
|
||||
background:linear-gradient(180deg,rgba(44,62,78,0.35) 0%,rgba(44,62,78,0.15) 60%,rgba(44,62,78,0.4) 100%);
|
||||
}
|
||||
.hero-content{
|
||||
position:relative;z-index:2;
|
||||
text-align:center;
|
||||
max-width:800px;
|
||||
padding:0 1.5rem;
|
||||
}
|
||||
.hero-overline{
|
||||
font-family:'Inter',sans-serif;
|
||||
font-size:0.8rem;font-weight:500;
|
||||
letter-spacing:0.25em;text-transform:uppercase;
|
||||
color:var(--gold-light);
|
||||
margin-bottom:1.5rem;
|
||||
}
|
||||
.hero h1{margin-bottom:1rem}
|
||||
.hero-subtitle{
|
||||
font-family:'Cormorant Garamond',serif;
|
||||
font-size:clamp(1.1rem,2vw,1.4rem);
|
||||
font-style:italic;font-weight:400;
|
||||
color:rgba(255,255,255,0.85);
|
||||
margin-bottom:2.5rem;
|
||||
}
|
||||
.hero-btn{
|
||||
display:inline-block;
|
||||
padding:0.9rem 2.8rem;
|
||||
border:1.5px solid rgba(255,255,255,0.8);
|
||||
color:#fff;
|
||||
text-decoration:none;
|
||||
font-size:0.85rem;font-weight:500;
|
||||
letter-spacing:0.12em;
|
||||
text-transform:uppercase;
|
||||
transition:all 0.35s ease;
|
||||
}
|
||||
.hero-btn:hover{background:#fff;color:#2C3E4E;border-color:#fff}
|
||||
|
||||
/* ── Story / Intro ── */
|
||||
.story{background:var(--cream)}
|
||||
.story-grid{
|
||||
display:grid;
|
||||
grid-template-columns:1fr 1fr;
|
||||
gap:5rem;
|
||||
align-items:center;
|
||||
max-width:1100px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.story-image{
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
border-radius:2px;
|
||||
}
|
||||
.story-image img{
|
||||
width:100%;height:100%;
|
||||
object-fit:cover;
|
||||
display:block;
|
||||
transition:transform 0.6s ease;
|
||||
}
|
||||
.story-image:hover img{transform:scale(1.04)}
|
||||
.story-text .tag{
|
||||
display:inline-block;
|
||||
font-size:0.75rem;font-weight:500;
|
||||
letter-spacing:0.2em;text-transform:uppercase;
|
||||
color:var(--gold);
|
||||
margin-bottom:1rem;
|
||||
}
|
||||
.story-text h2{margin-bottom:1rem}
|
||||
.story-text p{color:var(--text-light);margin-bottom:1.2rem;font-size:1.02rem;line-height:1.85}
|
||||
|
||||
/* ── Bedroom Gallery ── */
|
||||
.gallery{background:var(--white)}
|
||||
.gallery-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,1fr);
|
||||
gap:1.5rem;
|
||||
max-width:1150px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.gallery-card{
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
border-radius:2px;
|
||||
cursor:pointer;
|
||||
aspect-ratio:4/5;
|
||||
}
|
||||
.gallery-card img{
|
||||
width:100%;height:100%;
|
||||
object-fit:cover;
|
||||
display:block;
|
||||
transition:transform 0.6s ease;
|
||||
}
|
||||
.gallery-card:hover img{transform:scale(1.06)}
|
||||
.gallery-card .overlay{
|
||||
position:absolute;inset:0;
|
||||
background:linear-gradient(180deg,transparent 40%,rgba(44,62,78,0.7) 100%);
|
||||
display:flex;flex-direction:column;justify-content:flex-end;
|
||||
padding:1.8rem;
|
||||
transition:opacity 0.35s ease;
|
||||
}
|
||||
.gallery-card .room-name{
|
||||
font-family:'Playfair Display',serif;
|
||||
font-size:1.3rem;color:#fff;font-weight:500;
|
||||
}
|
||||
.gallery-card .room-detail{
|
||||
font-family:'Inter',sans-serif;
|
||||
font-size:0.8rem;color:rgba(255,255,255,0.75);
|
||||
margin-top:0.3rem;letter-spacing:0.05em;
|
||||
}
|
||||
|
||||
/* ── Amenities ── */
|
||||
.amenities{background:var(--cream)}
|
||||
.amenities-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(4,1fr);
|
||||
gap:2.5rem;
|
||||
max-width:1050px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.amenity-item{text-align:center}
|
||||
.amenity-icon{
|
||||
width:56px;height:56px;
|
||||
margin:0 auto 1.2rem;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
opacity:0.7;
|
||||
}
|
||||
.amenity-icon svg{width:36px;height:36px;stroke:var(--dusty-blue)}
|
||||
.amenity-item h4{
|
||||
font-family:'Playfair Display',serif;
|
||||
font-size:1.05rem;font-weight:500;
|
||||
color:#2C3E4E;
|
||||
margin-bottom:0.4rem;
|
||||
}
|
||||
.amenity-item p{
|
||||
font-size:0.85rem;color:var(--text-light);
|
||||
line-height:1.5;
|
||||
}
|
||||
|
||||
/* ── Area Highlights ── */
|
||||
.area{background:var(--white)}
|
||||
.area-grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(3,1fr);
|
||||
gap:2rem;
|
||||
max-width:1100px;
|
||||
margin:0 auto;
|
||||
}
|
||||
.area-card{
|
||||
background:var(--cream);
|
||||
padding:2.2rem 2rem;
|
||||
border-radius:2px;
|
||||
transition:transform 0.3s ease,box-shadow 0.3s ease;
|
||||
}
|
||||
.area-card:hover{
|
||||
transform:translateY(-4px);
|
||||
box-shadow:0 12px 40px rgba(0,0,0,0.06);
|
||||
}
|
||||
.area-card .cat{
|
||||
font-size:0.72rem;font-weight:500;
|
||||
letter-spacing:0.18em;text-transform:uppercase;
|
||||
color:var(--gold);
|
||||
margin-bottom:0.8rem;
|
||||
}
|
||||
.area-card h4{
|
||||
font-family:'Playfair Display',serif;
|
||||
font-size:1.25rem;margin-bottom:0.8rem;
|
||||
}
|
||||
.area-card p{
|
||||
font-size:0.9rem;color:var(--text-light);
|
||||
line-height:1.7;
|
||||
}
|
||||
|
||||
/* ── Booking CTA ── */
|
||||
.cta{
|
||||
position:relative;
|
||||
padding:8rem 2rem;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
.cta-bg{
|
||||
position:absolute;inset:0;
|
||||
background:url('https://static.wixstatic.com/media/0a1b51_6781033f117e4c78979c2e8dcdeba671~mv2.jpg') center/cover no-repeat;
|
||||
will-change:transform;
|
||||
}
|
||||
.cta::after{
|
||||
content:'';position:absolute;inset:0;
|
||||
background:rgba(44,62,78,0.55);
|
||||
}
|
||||
.cta-content{
|
||||
position:relative;z-index:2;
|
||||
text-align:center;
|
||||
max-width:650px;
|
||||
}
|
||||
.cta-content h2{color:#fff;margin-bottom:1rem}
|
||||
.cta-content p{color:rgba(255,255,255,0.8);font-size:1.1rem;line-height:1.8;margin-bottom:2.5rem}
|
||||
.cta-btn{
|
||||
display:inline-block;
|
||||
padding:1rem 3rem;
|
||||
background:var(--gold);
|
||||
color:#fff;
|
||||
text-decoration:none;
|
||||
font-size:0.85rem;font-weight:500;
|
||||
letter-spacing:0.12em;
|
||||
text-transform:uppercase;
|
||||
border-radius:2px;
|
||||
transition:all 0.35s ease;
|
||||
}
|
||||
.cta-btn:hover{background:#B8955F;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
|
||||
|
||||
/* ── Footer ── */
|
||||
.footer{
|
||||
background:#2C3E4E;
|
||||
color:rgba(255,255,255,0.7);
|
||||
padding:4rem 2rem 2.5rem;
|
||||
text-align:center;
|
||||
}
|
||||
.footer-owners{
|
||||
width:90px;height:90px;
|
||||
border-radius:50%;
|
||||
object-fit:cover;
|
||||
margin:0 auto 1.5rem;
|
||||
border:2px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
.footer h3{color:#fff;font-size:1.4rem;margin-bottom:0.3rem}
|
||||
.footer .byline{font-size:0.85rem;color:rgba(255,255,255,0.5);margin-bottom:2rem}
|
||||
.footer-info{font-size:0.85rem;line-height:1.8;margin-bottom:2rem}
|
||||
.footer-bottom{
|
||||
border-top:1px solid rgba(255,255,255,0.08);
|
||||
padding-top:1.5rem;
|
||||
font-size:0.78rem;color:rgba(255,255,255,0.35);
|
||||
}
|
||||
|
||||
/* ── Fade-in Animations ── */
|
||||
.fade-in{
|
||||
opacity:0;
|
||||
transform:translateY(40px);
|
||||
transition:opacity 0.8s ease,transform 0.8s ease;
|
||||
}
|
||||
.fade-in.visible{opacity:1;transform:translateY(0)}
|
||||
.fade-in-delay-1{transition-delay:0.15s}
|
||||
.fade-in-delay-2{transition-delay:0.3s}
|
||||
.fade-in-delay-3{transition-delay:0.45s}
|
||||
|
||||
/* ── Mobile Nav Toggle ── */
|
||||
.mobile-toggle{
|
||||
display:none;
|
||||
background:none;border:none;
|
||||
cursor:pointer;
|
||||
padding:0.5rem;
|
||||
}
|
||||
.mobile-toggle span{
|
||||
display:block;
|
||||
width:24px;height:2px;
|
||||
background:#fff;
|
||||
margin:5px 0;
|
||||
transition:all 0.3s ease;
|
||||
}
|
||||
.nav.scrolled .mobile-toggle span{background:#2C3E4E}
|
||||
|
||||
/* ── Responsive ── */
|
||||
@media(max-width:900px){
|
||||
.nav{padding:1.2rem 1.5rem}
|
||||
.nav.scrolled{padding:0.7rem 1.5rem}
|
||||
.nav-links{display:none}
|
||||
.mobile-toggle{display:block}
|
||||
section{padding:4rem 1.2rem}
|
||||
.story-grid{grid-template-columns:1fr;gap:2.5rem}
|
||||
.gallery-grid{grid-template-columns:1fr 1fr}
|
||||
.amenities-grid{grid-template-columns:1fr 1fr;gap:2rem}
|
||||
.area-grid{grid-template-columns:1fr;max-width:500px}
|
||||
.hero{min-height:500px}
|
||||
}
|
||||
|
||||
@media(max-width:520px){
|
||||
.gallery-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
|
||||
.amenities-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
|
||||
.hero h1{font-size:2rem}
|
||||
.hero-subtitle{font-size:1rem}
|
||||
h2{font-size:1.5rem}
|
||||
section{padding:3rem 1rem}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ── Navigation ── -->
|
||||
<nav class="nav" id="nav">
|
||||
<a href="#" class="nav-logo">Moore Sunny Daze</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#story">The Property</a></li>
|
||||
<li><a href="#gallery">Rooms</a></li>
|
||||
<li><a href="#amenities">Amenities</a></li>
|
||||
<li><a href="#area">Explore</a></li>
|
||||
<li><a href="#cta">Book</a></li>
|
||||
</ul>
|
||||
<button class="mobile-toggle" id="mobileToggle" aria-label="Menu">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- ── Hero ── -->
|
||||
<section class="hero" id="home">
|
||||
<div class="hero-bg" id="heroBg"></div>
|
||||
<div class="hero-content fade-in" id="heroContent">
|
||||
<p class="hero-overline">Maravilla 1403 · Miramar Beach, Florida</p>
|
||||
<h1>Moore<br>Sunny Daze</h1>
|
||||
<p class="hero-subtitle">A refined coastal retreat on the sugar-white shores of the Emerald Coast</p>
|
||||
<a href="#cta" class="hero-btn">Reserve Your Stay</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Story ── -->
|
||||
<section class="story" id="story">
|
||||
<div class="section-header fade-in">
|
||||
<span class="accent-line"></span>
|
||||
<h2>Where the Gulf Meets Grace</h2>
|
||||
<p>Nestled within the gated enclave of Maravilla, this thoughtfully appointed three-bedroom retreat offers the rare combination of privacy, comfort, and effortless access to Miramar Beach's celebrated shoreline.</p>
|
||||
</div>
|
||||
<div class="story-grid">
|
||||
<div class="story-image fade-in">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Moore Sunny Daze living room" loading="lazy">
|
||||
</div>
|
||||
<div class="story-text fade-in fade-in-delay-1">
|
||||
<span class="tag">The Property</span>
|
||||
<p>Perched on the 14th floor, Moore Sunny Daze captures panoramic Gulf views from every angle. Wake to the sound of waves, sip coffee on your private balcony, and let the rhythm of the coast set the pace. With three bedrooms, two full baths, and accommodations for eight, this is sanctuary redefined — where every detail has been curated for the discerning traveler.</p>
|
||||
<p>Step beyond your door to discover 2.5 acres of pristine private beach, two resort-style pools (one heated seasonally), and the warm hospitality that Miramar Beach is known for. This is more than a rental — it's your home on the Gulf.</p>
|
||||
<p style="font-style:italic;color:#8BA4BC;">— Tim & Ashley Moore, Owners</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Bedroom Gallery ── -->
|
||||
<section class="gallery" id="gallery">
|
||||
<div class="section-header fade-in">
|
||||
<span class="accent-line"></span>
|
||||
<h2>Restful Interiors</h2>
|
||||
<p>Each sleeping space is designed for comfort and tranquility — premium linens, thoughtful touches, and the kind of quiet that invites deep rest.</p>
|
||||
</div>
|
||||
<div class="gallery-grid">
|
||||
<div class="gallery-card fade-in">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Primary bedroom with king bed" loading="lazy">
|
||||
<div class="overlay">
|
||||
<span class="room-name">Primary Suite</span>
|
||||
<span class="room-detail">King Bed · En-Suite Bath · Balcony Access</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-card fade-in fade-in-delay-1">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_fda7ac3fe55d429393a51b2c1148dbb5~mv2.jpg" alt="Kitchen and dining area" loading="lazy">
|
||||
<div class="overlay">
|
||||
<span class="room-name">Gourmet Kitchen</span>
|
||||
<span class="room-detail">Fully Equipped · Open Plan · Gulf Views</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery-card fade-in fade-in-delay-2">
|
||||
<img src="https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg" alt="Bunk room" loading="lazy">
|
||||
<div class="overlay">
|
||||
<span class="room-name">Bunk Room</span>
|
||||
<span class="room-detail">Twin Bunks · Shared Bath · Coastal Charm</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="max-width:1150px;margin:2rem auto 0;text-align:center" class="fade-in">
|
||||
<p style="color:var(--text-light);font-size:0.95rem;">
|
||||
<strong style="color:#2C3E4E;">Sleeping Arrangements:</strong> Primary Suite — King with en-suite · Guest Room — King with direct bath access · Bunk Room — Twin bunks · Living Room — Queen sleeper sofa
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Amenities ── -->
|
||||
<section class="amenities" id="amenities">
|
||||
<div class="section-header fade-in">
|
||||
<span class="accent-line"></span>
|
||||
<h2>Thoughtful Amenities</h2>
|
||||
<p>Every detail has been considered for an effortless stay — from beach service to resort recreation.</p>
|
||||
</div>
|
||||
<div class="amenities-grid">
|
||||
<div class="amenity-item fade-in">
|
||||
<div class="amenity-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><path d="M2 20h20M5 12l-1 8M12 4l-1 16M19 8l-1 12"/></svg>
|
||||
</div>
|
||||
<h4>Private Beach</h4>
|
||||
<p>2.5 acres of sugar-white sand, exclusive to Maravilla guests</p>
|
||||
</div>
|
||||
<div class="amenity-item fade-in fade-in-delay-1">
|
||||
<div class="amenity-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><rect x="2" y="4" width="20" height="16" rx="1"/><circle cx="12" cy="12" r="3"/></svg>
|
||||
</div>
|
||||
<h4>Beach Service</h4>
|
||||
<p>4 chairs + 2 umbrellas included mid-March through late October</p>
|
||||
</div>
|
||||
<div class="amenity-item fade-in fade-in-delay-2">
|
||||
<div class="amenity-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><path d="M6 9h12M6 13h12M4 6h16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2z"/></svg>
|
||||
</div>
|
||||
<h4>Two Pools</h4>
|
||||
<p>Resort-style pools with one heated in winter, plus hot tub</p>
|
||||
</div>
|
||||
<div class="amenity-item fade-in fade-in-delay-3">
|
||||
<div class="amenity-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke-width="1.6"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
|
||||
</div>
|
||||
<h4>Sports & Rec</h4>
|
||||
<p>Tennis, pickleball, basketball court, BBQ grills, fitness center</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Area Highlights ── -->
|
||||
<section class="area" id="area">
|
||||
<div class="section-header fade-in">
|
||||
<span class="accent-line"></span>
|
||||
<h2>Explore the Emerald Coast</h2>
|
||||
<p>Miramar Beach sits at the heart of it all — between Destin Harbor and iconic 30A, with world-class dining and shopping within minutes.</p>
|
||||
</div>
|
||||
<div class="area-grid">
|
||||
<div class="area-card fade-in">
|
||||
<span class="cat">Dining</span>
|
||||
<h4>Coastal Flavors</h4>
|
||||
<p>Pompano Joe's for beachfront seafood, Captain Dave's for Gulf-to-table fare, Bijoux for New Orleans-inspired fine dining, and Mama Clemenza's for Italian breakfast.</p>
|
||||
</div>
|
||||
<div class="area-card fade-in fade-in-delay-1">
|
||||
<span class="cat">Shopping</span>
|
||||
<h4>Grand Boulevard</h4>
|
||||
<p>An upscale open-air district with Vin'Tij Food & Wine, Tommy Bahama Restaurant, and boutique shopping. Silver Sands Premium Outlets just minutes away.</p>
|
||||
</div>
|
||||
<div class="area-card fade-in fade-in-delay-2">
|
||||
<span class="cat">Beyond the Beach</span>
|
||||
<h4>Adventures Await</h4>
|
||||
<p>Drive the scenic 30A through Seaside and Rosemary Beach, explore Destin Harbor's fishing fleet, or simply stroll James Lee Beach at sunset.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Booking CTA ── -->
|
||||
<section class="cta" id="cta">
|
||||
<div class="cta-bg" id="ctaBg"></div>
|
||||
<div class="cta-content fade-in">
|
||||
<span class="accent-line" style="margin:0 auto 1.8rem"></span>
|
||||
<h2>Begin Your Stay</h2>
|
||||
<p>A limited number of dates remain for the coming season. Three-night minimum · Beach service included · Dog friendly upon request. Secure your reservation today.</p>
|
||||
<a href="https://www.vrbo.com/1313017" class="cta-btn" target="_blank" rel="noopener">View Availability</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ── Footer ── -->
|
||||
<footer class="footer">
|
||||
<img class="footer-owners" src="https://static.wixstatic.com/media/0a1b51_5dca81e7c6984df68055636c3ab61015~mv2.jpg" alt="Tim & Ashley Moore" loading="lazy">
|
||||
<h3>Tim & Ashley Moore</h3>
|
||||
<p class="byline">Your Hosts at Moore Sunny Daze</p>
|
||||
<p class="footer-info">
|
||||
Maravilla 1403 · Miramar Beach, FL 32550<br>
|
||||
3 Bedrooms · 2 Bathrooms · Sleeps 8<br>
|
||||
Gated Community · 2.5 Acres Private Beach
|
||||
</p>
|
||||
<p class="footer-bottom">
|
||||
© 2026 Moore Sunny Daze. All rights reserved. Designed with love on the Emerald Coast.
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<!-- ── Scripts ── -->
|
||||
<script>
|
||||
// Parallax
|
||||
(function(){
|
||||
const heroBg=document.getElementById('heroBg'),
|
||||
ctaBg=document.getElementById('ctaBg'),
|
||||
heroContent=document.getElementById('heroContent');
|
||||
function parallax(){
|
||||
const sy=window.scrollY;
|
||||
if(heroBg)heroBg.style.transform='translateY('+(sy*0.35)+'px)';
|
||||
if(ctaBg)ctaBg.style.transform='translateY('+((sy-ctaBg.parentElement.offsetTop)*0.25)+'px)';
|
||||
}
|
||||
window.addEventListener('scroll',parallax,{passive:true});
|
||||
parallax();
|
||||
|
||||
// Nav scroll effect
|
||||
const nav=document.getElementById('nav');
|
||||
window.addEventListener('scroll',function(){
|
||||
nav.classList.toggle('scrolled',window.scrollY>60);
|
||||
});
|
||||
|
||||
// Fade-in on scroll
|
||||
const faders=document.querySelectorAll('.fade-in');
|
||||
const observer=new IntersectionObserver(function(entries){
|
||||
entries.forEach(function(entry){
|
||||
if(entry.isIntersecting){entry.target.classList.add('visible');observer.unobserve(entry.target);}
|
||||
});
|
||||
},{threshold:0.15,rootMargin:'0px 0px -40px 0px'});
|
||||
faders.forEach(function(el){observer.observe(el);});
|
||||
|
||||
// Trigger hero content visible immediately
|
||||
if(heroContent)heroContent.classList.add('visible');
|
||||
|
||||
// Mobile toggle placeholder
|
||||
document.getElementById('mobileToggle').addEventListener('click',function(){
|
||||
// Placeholder for mobile menu expansion
|
||||
this.classList.toggle('open');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,89 @@
|
||||
# Moore Sunny Daze — Project Brief
|
||||
|
||||
- **Mockups:** https://mockup.iamgmb.com/mooresunnydaze/
|
||||
- **Standard:** All project websites deploy to `mockup.iamgmb.com/<project-name>/`; proposals to `proposals.iamgmb.com`
|
||||
|
||||
## Property Details
|
||||
- **Name:** Moore Sunny Daze (Maravilla 1403)
|
||||
- **Location:** Miramar Beach, FL 32550 (along Scenic Gulf Dr, between Destin Harbor & 30A)
|
||||
- **Community:** Maravilla — gated, 2.5 acres private sugar-white sand beach
|
||||
- **Owners:** Tim & Ashley Moore
|
||||
- **Type:** 3BR / 2BA condo, sleeps 8
|
||||
|
||||
## Sleeping Arrangements
|
||||
| Room | Bed | Bath | Notes |
|
||||
|------|-----|------|-------|
|
||||
| Bedroom 1 | King | Private en-suite | Balcony access |
|
||||
| Bedroom 2 | King | Direct access to full bath | — |
|
||||
| Bedroom 3 | Bunk beds | Shared hallway bath | — |
|
||||
| Living Room | Queen sleeper sofa | — | New |
|
||||
|
||||
## Amenities
|
||||
- Beach service: 4 chairs + 2 umbrellas (mid-March through late October)
|
||||
- 2 pools (1 heated in winter), hot tub
|
||||
- Basketball court, BBQ grills, fitness center
|
||||
- 2 tennis courts (1 lined for pickleball)
|
||||
- Self check-in with keypad
|
||||
- Dog friendly
|
||||
- Central A/C, fully equipped kitchen, WiFi, free parking
|
||||
|
||||
## Nearby (within ~3 miles)
|
||||
### Restaurants
|
||||
- Pompano Joe's, Captain Dave's, Surf Hut, Kenny D's
|
||||
- Mama Clemenza's (Italian breakfast/brunch)
|
||||
- Bijoux (New Orleans-inspired seafood, upscale)
|
||||
- Vin'Tij Food & Wine (wine bar, Grand Blvd)
|
||||
- Tommy Bahama Restaurant & Bar
|
||||
|
||||
### Shopping
|
||||
- Winn-Dixie, Wal-Mart, Sandestin Outlet Mall
|
||||
- Grand Blvd shopping district
|
||||
|
||||
### Area
|
||||
- James Lee Beach (direct access)
|
||||
- Silver Sands Premium Outlets
|
||||
- Destin Harbor ("World's Luckiest Fishing Village")
|
||||
- 30A — scenic coastal highway with boutique towns
|
||||
|
||||
## Current Online Presence
|
||||
- **Website:** mooresunnydaze.com (Wix)
|
||||
- **VRBO:** vrbo.com/1313017
|
||||
- **Airbnb:** airbnb.com/rooms/1387088497032914961 (5.0 stars, 4 reviews)
|
||||
- **Facebook:** facebook.com/mooresunnydaze
|
||||
- **Email:** @gmail.com (exact address TBD)
|
||||
|
||||
## Booking Details (from Airbnb)
|
||||
- 3-night minimum stay
|
||||
- Hosted by Ashley, 1 year hosting
|
||||
- Peak summer dates book solid
|
||||
- Beach service included in rate
|
||||
|
||||
## Key Photos (Wix CDN)
|
||||
### Hero/Beach
|
||||
- https://static.wixstatic.com/media/0a1b51_e07cc4dbb6c74815812ad594235b011e~mv2.jpg (palm tree hero)
|
||||
- https://static.wixstatic.com/media/0a1b51_6e0326ddac2349b9a62a2a416dcb49e5~mv2.jpg (beach header)
|
||||
- https://static.wixstatic.com/media/0a1b51_6781033f117e4c78979c2e8dcdeba671~mv2.jpg (beach view)
|
||||
|
||||
### Interior
|
||||
- https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg (living room)
|
||||
- https://static.wixstatic.com/media/0a1b51_fda7ac3fe55d429393a51b2c1148dbb5~mv2.jpg (kitchen/dining)
|
||||
- https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg (bedroom)
|
||||
- https://static.wixstatic.com/media/0a1b51_064f755f26d6455e89af35f24abbd9bf~mv2.jpg (bathroom)
|
||||
- https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg (bunk room)
|
||||
- https://static.wixstatic.com/media/0a1b51_aef0f37089e440f592219382b3759f52~mv2.jpg (balcony view)
|
||||
|
||||
### Owners
|
||||
- https://static.wixstatic.com/media/0a1b51_5dca81e7c6984df68055636c3ab61015~mv2.jpg (Tim & Ashley)
|
||||
|
||||
### Resort/Area
|
||||
- https://static.wixstatic.com/media/0a1b51_4d5646edd6c443b2acf7940cacd392a7~mv2.jpg (beach area)
|
||||
- https://static.wixstatic.com/media/0a1b51_6fe99a65a950470bb4a760ce751d7631~mv2.jpg (pool)
|
||||
- https://static.wixstatic.com/media/0a1b51_118bef8d63964005ba2c9cadf077a8a3~mv2.jpg (beach)
|
||||
|
||||
## Design Direction
|
||||
Germaine wants:
|
||||
1. **Theme A — Existing Style:** Similar to current Wix site (beachy, family-friendly, palm trees, warm tones)
|
||||
2. **Theme B — Sunny & Bold:** Fun, vibrant beach rental vibe (Tim liked TransitPin's landing page)
|
||||
3. **Theme C — Coastal Elegant:** Refined, upscale coastal that Ashley would prefer (think: clean, sophisticated, white/blue/gold)
|
||||
|
||||
All three need motion, real photos from the existing site, accurate content, and area info.
|
||||
Reference in New Issue
Block a user