ippadmin/mooresunnydaze
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add project scaffolding and mockups

Browse Source
This commit is contained in:
root
2026-08-08 13:07:11 -04:00
parent 2f744811fc
commit 3b1b1cebc5
4 changed files with 2259 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mockups/index.html
+905
View File
@@ -0,0 +1,905 @@
<!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 — Book Direct &amp; Save 13% | Maravilla 1403, Miramar Beach FL</title>
<meta name="description" content="Book Moore Sunny Daze direct and save 13% vs platform fees. 3BR/2BA Gulf-view condo at Maravilla 1403, Miramar Beach FL. Sleeps 8. Owned by Tim &amp; Ashley Moore.">
<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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&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,BlinkMacSystemFont,sans-serif;color:#2c3a4b;background:#faf8f5;line-height:1.7;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.25;color:#1a2744}
h2{font-size:clamp(1.75rem,4vw,2.5rem);margin-bottom:0.5rem}
h3{font-size:clamp(1.25rem,3vw,1.6rem)}
a{color:#1a2744;text-decoration:none;transition:color .3s}
a:hover{color:#c9a84c}
img{max-width:100%;height:auto;display:block}
section{padding:5rem 1.5rem}
.container{max-width:1200px;margin:0 auto}
/* ===== GOLD ACCENT HELPER ===== */
.gold{color:#c9a84c}
.gold-bg{background:#c9a84c}
.gold-border{border-color:#c9a84c}
/* ===== NAVIGATION ===== */
header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 1.5rem;transition:background .4s,padding .4s,box-shadow .4s}
header.scrolled{background:rgba(250,248,245,.97);box-shadow:0 2px 20px rgba(0,0,0,.08);padding:.6rem 1.5rem}
header nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
header .logo{font-family:'Playfair Display',Georgia,serif;font-size:1.3rem;font-weight:700;color:#fff;transition:color .4s;letter-spacing:.5px}
header.scrolled .logo{color:#1a2744}
header .logo span{color:#c9a84c}
header .nav-links{display:flex;gap:2rem;list-style:none}
header .nav-links a{color:#fff;font-size:.85rem;font-weight:500;letter-spacing:.8px;text-transform:uppercase;transition:color .3s}
header.scrolled .nav-links a{color:#1a2744}
header .nav-links a:hover{color:#c9a84c}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001;background:none;border:none;padding:4px}
.hamburger span{display:block;width:26px;height:2px;background:#fff;transition:all .3s}
header.scrolled .hamburger span{background:#1a2744}
/* ===== HERO ===== */
.hero{position:relative;height:100vh;min-height:600px;display:flex;align-items:center;justify-content:center;text-align: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;transform:translateZ(0)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(26,39,68,.55),rgba(26,39,68,.35),rgba(26,39,68,.05))}
.hero-content{position:relative;z-index:2;max-width:800px;padding:0 1.5rem}
.hero-content .badge{display:inline-block;background:rgba(201,168,76,.9);color:#fff;font-size:.75rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:.5rem 1.2rem;border-radius:50px;margin-bottom:1.5rem}
.hero-content h1{font-size:clamp(2.5rem,7vw,5rem);font-weight:700;color:#fff;margin-bottom:.5rem;line-height:1.1}
.hero-content h1 span{color:#c9a84c}
.hero-content .subtitle{font-size:clamp(1rem,2.5vw,1.25rem);color:rgba(255,255,255,.9);margin-bottom:.5rem;font-weight:300;letter-spacing:1px}
.hero-content .location{font-size:.9rem;color:rgba(255,255,255,.75);margin-bottom:2rem;letter-spacing:.5px}
.hero-content .cta{display:inline-block;background:#c9a84c;color:#fff;padding:1rem 2.5rem;font-size:1rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;border-radius:4px;transition:all .3s;border:none;cursor:pointer}
.hero-content .cta:hover{background:#b8943f;transform:translateY(-2px);box-shadow:0 8px 25px rgba(201,168,76,.3);color:#fff}
.hero-content .cta-outline{display:inline-block;border:2px solid #fff;color:#fff;padding:.85rem 2.2rem;font-size:.9rem;font-weight:500;letter-spacing:1px;text-transform:uppercase;border-radius:4px;margin-left:1rem;transition:all .3s;cursor:pointer;background:transparent}
.hero-content .cta-outline:hover{background:#fff;color:#1a2744}
.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);z-index:2;animation:bounce 2s infinite}
.hero-scroll svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-8px)}60%{transform:translateX(-50%) translateY(-4px)}}
/* ===== SECTION HEADERS ===== */
.section-header{text-align:center;margin-bottom:3.5rem}
.section-header .tag{display:inline-block;color:#c9a84c;font-size:.75rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:.5rem}
.section-header h2{position:relative;padding-bottom:1rem}
.section-header h2::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:2px;background:#c9a84c}
/* ===== PROPERTY DESCRIPTION ===== */
.property-desc{background:#fff}
.property-desc .container{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.property-desc .desc-content p{font-size:1.05rem;color:#5a6b7a;margin-bottom:1.2rem;line-height:1.8}
.property-desc .desc-content .highlights{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.5rem}
.property-desc .desc-content .highlight-item{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:#1a2744;padding:.5rem 0}
.property-desc .desc-content .highlight-item svg{width:18px;height:18px;color:#c9a84c;flex-shrink:0}
.property-desc .desc-image{position:relative;border-radius:4px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.1)}
.property-desc .desc-image img{width:100%;height:400px;object-fit:cover}
/* ===== BEDROOMS ===== */
.bedrooms{background:#faf8f5}
.bedrooms-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}
.bedroom-card{background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06);transition:transform .3s,box-shadow .3s}
.bedroom-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(0,0,0,.1)}
.bedroom-card img{width:100%;height:220px;object-fit:cover}
.bedroom-card .card-body{padding:1.5rem}
.bedroom-card h3{margin-bottom:.25rem}
.bedroom-card .room-type{color:#c9a84c;font-size:.85rem;font-weight:500;margin-bottom:.5rem}
/* ===== PHOTO GALLERY ===== */
.gallery{background:#fff;padding:5rem 0}
.gallery .gallery-scroll{display:flex;gap:1rem;overflow-x:auto;padding:0 1.5rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery .gallery-scroll::-webkit-scrollbar{display:none}
.gallery .gallery-item{flex:0 0 auto;width:320px;height:240px;border-radius:4px;overflow:hidden;scroll-snap-align:start;transition:transform .3s}
.gallery .gallery-item:hover{transform:scale(1.03)}
.gallery .gallery-item img{width:100%;height:100%;object-fit:cover}
/* ===== AMENITIES ===== */
.amenities{background:#f6f3ee}
.amenities-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.2rem}
.amenity-item{background:#fff;padding:1.5rem 1rem;text-align:center;border-radius:4px;transition:transform .3s,box-shadow .3s;border:1px solid transparent}
.amenity-item:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.08);border-color:#c9a84c}
.amenity-item svg{width:32px;height:32px;color:#c9a84c;margin-bottom:.75rem}
.amenity-item .amenity-label{font-size:.8rem;font-weight:500;color:#1a2744;line-height:1.3}
/* ===== AREA GUIDE ===== */
.area-guide{background:#fff}
.area-tabs{display:flex;justify-content:center;gap:.5rem;margin-bottom:2.5rem;flex-wrap:wrap}
.area-tab{padding:.6rem 1.5rem;border:1px solid #d4d9de;background:transparent;font-size:.85rem;font-weight:500;cursor:pointer;border-radius:4px;transition:all .3s;color:#5a6b7a;font-family:'Inter',sans-serif}
.area-tab.active,.area-tab:hover{background:#c9a84c;border-color:#c9a84c;color:#fff}
.area-content{display:none;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.area-content.active{display:grid}
.area-card{background:#faf8f5;padding:1.5rem;border-radius:4px;border-left:3px solid #c9a84c;transition:transform .3s}
.area-card:hover{transform:translateX(4px)}
.area-card h4{font-family:'Playfair Display',serif;margin-bottom:.3rem;color:#1a2744}
.area-card .area-type{font-size:.75rem;color:#c9a84c;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:.3rem}
.area-card p{font-size:.85rem;color:#5a6b7a}
/* ===== OWNERS ===== */
.owners{background:#1a2744;color:#fff}
.owners .container{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.owners .owner-image{border-radius:4px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.3)}
.owners .owner-image img{width:100%;height:450px;object-fit:cover}
.owners .owner-content h2{color:#fff;margin-bottom:1rem}
.owners .owner-content h2::after{background:#c9a84c;left:0;transform:none}
.owners .owner-content p{color:rgba(255,255,255,.8);margin-bottom:1rem;line-height:1.8}
.owners .signature{font-family:'Playfair Display',serif;font-style:italic;color:#c9a84c;font-size:1.3rem;margin-top:1.5rem}
/* ===== BOOKING WIDGET ===== */
.booking{background:linear-gradient(to bottom,#faf8f5,#f0ece5)}
.booking-widget{max-width:650px;margin:0 auto;background:#fff;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.1);overflow:hidden}
.booking-widget-header{background:#1a2744;padding:1.5rem 2rem;text-align:center}
.booking-widget-header h3{color:#fff;font-size:1.4rem;margin-bottom:.25rem}
.booking-widget-header .save-badge{display:inline-block;background:#c9a84c;color:#fff;font-size:.75rem;font-weight:600;letter-spacing:1px;padding:.3rem 1rem;border-radius:50px;margin-top:.5rem}
.booking-widget-body{padding:2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.form-group{display:flex;flex-direction:column;gap:.35rem}
.form-group.full{grid-column:1/-1}
.form-group label{font-size:.8rem;font-weight:600;color:#1a2744;letter-spacing:.5px;text-transform:uppercase}
.form-group input,.form-group select{border:1px solid #d4d9de;border-radius:4px;padding:.75rem 1rem;font-size:.95rem;color:#2c3a4b;background:#faf8f5;font-family:'Inter',sans-serif;transition:border-color .3s,box-shadow .3s;width:100%}
.form-group input:focus,.form-group select:focus{outline:none;border-color:#c9a84c;box-shadow:0 0 0 3px rgba(201,168,76,.15)}
.form-group input::placeholder{color:#a0aab4}
.checkbox-group{display:flex;align-items:center;gap:.6rem;margin:1rem 0}
.checkbox-group input[type="checkbox"]{width:18px;height:18px;accent-color:#c9a84c;cursor:pointer}
.checkbox-group label{font-size:.9rem;color:#5a6b7a;cursor:pointer}
.checkbox-group .pet-note{font-size:.75rem;color:#a0aab4;margin-left:.25rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 2rem;font-size:.95rem;font-weight:600;border:none;border-radius:4px;cursor:pointer;transition:all .3s;font-family:'Inter',sans-serif;letter-spacing:.5px;width:100%}
.btn-primary{background:#c9a84c;color:#fff;text-transform:uppercase;letter-spacing:1px}
.btn-primary:hover{background:#b8943f;transform:translateY(-2px);box-shadow:0 6px 20px rgba(201,168,76,.3)}
.btn-primary:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}
.btn-book{background:#1a2744;color:#fff;text-transform:uppercase;letter-spacing:1px;margin-top:.75rem}
.btn-book:hover{background:#2a3d5a;transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,39,68,.3)}
.quote-result{background:#f6f3ee;border-radius:4px;padding:1.5rem;margin-top:1.5rem;display:none;animation:fadeInUp .4s ease}
.quote-result.show{display:block}
.quote-result h4{color:#1a2744;margin-bottom:1rem;font-size:1.1rem}
.quote-row{display:flex;justify-content:space-between;padding:.5rem 0;font-size:.9rem;color:#5a6b7a;border-bottom:1px solid rgba(0,0,0,.06)}
.quote-row.total{font-weight:700;color:#1a2744;font-size:1.1rem;border-bottom:none;padding-top:.75rem;margin-top:.25rem;border-top:2px solid #c9a84c}
.quote-nights{font-size:.8rem;color:#c9a84c;font-weight:500}
.booking-step2{display:none;animation:fadeInUp .4s ease}
.booking-step2.show{display:block}
.booking-divider{display:flex;align-items:center;gap:1rem;margin:1.5rem 0;color:#a0aab4;font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
.booking-divider::before,.booking-divider::after{content:'';flex:1;height:1px;background:#d4d9de}
#booking-error,#quote-error{color:#e74c3c;font-size:.85rem;margin-top:.5rem;display:none}
#booking-error.show,#quote-error.show{display:block}
.spinner{display:none;width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}
.btn.loading .spinner{display:inline-block}
.btn.loading .btn-text{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
/* ===== FADE-IN ON SCROLL ===== */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}
/* ===== FOOTER ===== */
footer{background:#1a2744;color:rgba(255,255,255,.7);padding:3rem 1.5rem;text-align:center}
footer .container{max-width:600px}
footer .footer-logo{font-family:'Playfair Display',serif;font-size:1.5rem;color:#fff;margin-bottom:.5rem}
footer .footer-logo span{color:#c9a84c}
footer p{font-size:.85rem;line-height:1.8;margin-bottom:.5rem}
footer .footer-links{display:flex;justify-content:center;gap:1.5rem;list-style:none;margin-top:1.5rem;flex-wrap:wrap}
footer .footer-links a{color:rgba(255,255,255,.6);font-size:.8rem;text-transform:uppercase;letter-spacing:1px}
footer .footer-links a:hover{color:#c9a84c}
footer .copyright{margin-top:2rem;font-size:.75rem;color:rgba(255,255,255,.4)}
/* ===== MOBILE NAV ===== */
@media(max-width:768px){
.hamburger{display:flex}
header .nav-links{position:fixed;inset:0;background:rgba(26,39,68,.98);flex-direction:column;align-items:center;justify-content:center;gap:2rem;opacity:0;pointer-events:none;transition:opacity .4s}
header .nav-links.open{opacity:1;pointer-events:auto}
header .nav-links a{color:#fff;font-size:1.1rem}
header.scrolled .nav-links a{color:#fff}
section{padding:3.5rem 1.2rem}
.property-desc .container{grid-template-columns:1fr;gap:2rem}
.owners .container{grid-template-columns:1fr}
.owners .owner-image{order:-1}
.owners .owner-image img{height:300px}
.form-row{grid-template-columns:1fr}
.hero-content .cta-outline{margin-left:0;margin-top:.75rem;display:block}
.gallery .gallery-item{width:260px;height:200px}
}
@media(max-width:480px){
.amenities-grid{grid-template-columns:repeat(2,1fr)}
.bedrooms-grid{grid-template-columns:1fr}
.area-content{grid-template-columns:1fr}
}
</style>
</head>
<body>
<!-- ===== NAVIGATION ===== -->
<header id="header">
<nav>
<a href="#" class="logo">Moore <span>Sunny Daze</span></a>
<button class="hamburger" id="hamburger" aria-label="Menu">
<span></span><span></span><span></span>
</button>
<ul class="nav-links" id="navLinks">
<li><a href="#property">The Property</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="#owners">Owners</a></li>
<li><a href="#book" class="gold">Book Now</a></li>
</ul>
</nav>
</header>
<!-- ===== HERO ===== -->
<section class="hero" id="hero">
<div class="hero-bg" id="heroBg"></div>
<div class="hero-overlay"></div>
<div class="hero-content fade-in visible">
<div class="badge">Book Direct &amp; Save 13%</div>
<h1>Moore <span>Sunny Daze</span></h1>
<p class="subtitle">Maravilla 1403 &mdash; Gulf-View Luxury in Miramar Beach</p>
<p class="location">3 Bedrooms &bull; 2 Bathrooms &bull; Sleeps 8 &bull; Destin, Florida</p>
<a href="#book" class="cta">Check Availability</a>
<a href="#property" class="cta-outline">Explore the Property</a>
</div>
<div class="hero-scroll">
<svg viewBox="0 0 24 24"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
</div>
</section>
<!-- ===== PROPERTY DESCRIPTION ===== -->
<section class="property-desc" id="property">
<div class="container">
<div class="desc-content fade-in">
<div class="section-header" style="text-align:left">
<span class="tag">Welcome To</span>
<h2>Your Beach Retreat Awaits</h2>
</div>
<p>Welcome to <strong>Moore Sunny Daze</strong> &mdash; a beautifully appointed 3-bedroom, 2-bathroom Gulf-view condo perched on the 14th floor of Maravilla Resort. From the moment you step inside, floor-to-ceiling windows flood the open-concept living space with natural light and frame sweeping views of the Emerald Coast.</p>
<p>Every detail has been curated for comfort: a fully equipped kitchen with granite countertops, a private balcony for sunrise coffee and sunset cocktails, and beach-inspired décor that instantly puts you in vacation mode. Whether you&rsquo;re gathering for a family meal at the dining table for six or unwinding in the king en-suite with its own balcony access, Moore Sunny Daze is designed to be your home away from home.</p>
<p>When you book direct with owners Tim &amp; Ashley Moore, you skip the 13% platform service fees charged by the big listing sites &mdash; which means more money in your pocket and a personal connection to the people who care most about your stay.</p>
<div class="highlights">
<div class="highlight-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
<span>3-Night Minimum Stay</span>
</div>
<div class="highlight-item">
<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.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
<span>Sleeps 8 Comfortably</span>
</div>
<div class="highlight-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
<span>Miramar Beach, FL 32550</span>
</div>
<div class="highlight-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
<span>Owner-Operated</span>
</div>
</div>
</div>
<div class="desc-image fade-in">
<img src="https://static.wixstatic.com/media/0a1b51_6e0326ddac2349b9a62a2a416dcb49e5~mv2.jpg" alt="Moore Sunny Daze beach view from Maravilla" loading="lazy">
</div>
</div>
</section>
<!-- ===== BEDROOMS ===== -->
<section class="bedrooms" id="bedrooms">
<div class="container">
<div class="section-header fade-in">
<span class="tag">Sleeping Arrangements</span>
<h2>Room to Unwind</h2>
<p style="color:#5a6b7a;max-width:500px;margin:1rem auto 0">Three thoughtfully designed bedrooms plus a queen sleeper sofa ensure everyone has their own space.</p>
</div>
<div class="bedrooms-grid">
<div class="bedroom-card fade-in">
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Primary King Bedroom" loading="lazy">
<div class="card-body">
<span class="room-type">Primary Suite</span>
<h3>King En-Suite</h3>
<p style="font-size:.9rem;color:#5a6b7a">Private balcony access, en-suite bathroom with walk-in shower, flat-screen TV, and Gulf views from bed.</p>
</div>
</div>
<div class="bedroom-card fade-in">
<img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Second King Bedroom" loading="lazy">
<div class="card-body">
<span class="room-type">Guest Room</span>
<h3>King Bedroom</h3>
<p style="font-size:.9rem;color:#5a6b7a">Plush king bed with premium linens, spacious closet, and easy access to the second full bathroom.</p>
</div>
</div>
<div class="bedroom-card fade-in">
<img src="https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg" alt="Bunk Room" loading="lazy">
<div class="card-body">
<span class="room-type">Kids&rsquo; Favorite</span>
<h3>Bunk Room</h3>
<p style="font-size:.9rem;color:#5a6b7a">Twin-over-twin bunks &mdash; perfect for kids or extra guests. Fun, cozy, and steps from the hallway bath.</p>
</div>
</div>
<div class="bedroom-card fade-in">
<div style="background:#f6f3ee;height:220px;display:flex;align-items:center;justify-content:center">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#c9a84c" stroke-width="1.5"><path d="M3 7v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7"/><path d="M21 7l-9-5L3 7"/><rect x="7" y="9" width="10" height="8" rx="1"/></svg>
</div>
<div class="card-body">
<span class="room-type">Living Room</span>
<h3>Queen Sleeper</h3>
<p style="font-size:.9rem;color:#5a6b7a">A comfortable queen-size sleeper sofa in the living room brings total capacity to 8 guests.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ===== PHOTO GALLERY ===== -->
<section class="gallery fade-in" id="gallery">
<div class="section-header">
<span class="tag">Photo Tour</span>
<h2>See Inside Moore Sunny Daze</h2>
</div>
<div class="gallery-scroll">
<div class="gallery-item"><img src="https://static.wixstatic.com/media/0a1b51_cc8d5a3847bf46ed90d4f801d63ccc47~mv2.jpg" alt="Living Room" loading="lazy"></div>
<div class="gallery-item"><img src="https://static.wixstatic.com/media/0a1b51_fda7ac3fe55d429393a51b2c1148dbb5~mv2.jpg" alt="Kitchen" loading="lazy"></div>
<div class="gallery-item"><img src="https://static.wixstatic.com/media/0a1b51_f0ab02b0263d4d9f8deb071af33bf414~mv2.jpg" alt="Bedroom" loading="lazy"></div>
<div class="gallery-item"><img src="https://static.wixstatic.com/media/0a1b51_badbf4f136c741a1b2eae378e1d92787~mv2.jpg" alt="Bunk Room" loading="lazy"></div>
<div class="gallery-item"><img src="https://static.wixstatic.com/media/0a1b51_aef0f37089e440f592219382b3759f52~mv2.jpg" alt="Balcony View" loading="lazy"></div>
<div class="gallery-item"><img src="https://static.wixstatic.com/media/0a1b51_6fe99a65a950470bb4a760ce751d7631~mv2.jpg" alt="Pool" loading="lazy"></div>
<div class="gallery-item"><img src="https://static.wixstatic.com/media/0a1b51_118bef8d63964005ba2c9cadf077a8a3~mv2.jpg" alt="Beach" loading="lazy"></div>
</div>
</section>
<!-- ===== AMENITIES ===== -->
<section class="amenities" id="amenities">
<div class="container">
<div class="section-header fade-in">
<span class="tag">Amenities</span>
<h2>Everything You Need</h2>
<p style="color:#5a6b7a;max-width:500px;margin:1rem auto 0">From beach service to pickleball, Maravilla Resort has it all &mdash; and Moore Sunny Daze puts you right in the middle of it.</p>
</div>
<div class="amenities-grid fade-in">
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 20h20"/><path d="M4 20V10a8 8 0 1 1 16 0v10"/></svg>
<span class="amenity-label">Beach Service<br><small style="color:#a0aab4">4 Chairs + 2 Umbrellas</small></span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/></svg>
<span class="amenity-label">2 Resort Pools<br><small style="color:#a0aab4">1 Heated Seasonally</small></span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/><path d="M8.56 2.75c5.44 8 3.44 14 3.44 14s-2-6 3.44-14"/></svg>
<span class="amenity-label">Hot Tub</span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="6" x2="12" y2="12"/><line x1="12" y1="12" x2="16" y2="14"/></svg>
<span class="amenity-label">Fitness Center</span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
<span class="amenity-label">Tennis Courts</span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
<span class="amenity-label">Pickleball Courts</span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/></svg>
<span class="amenity-label">Basketball Court</span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 2v7.53a4 4 0 0 0 4 0V2"/><path d="M4 15l4 4-4 4"/><path d="M20 15l-4 4 4 4"/></svg>
<span class="amenity-label">BBQ Grills</span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg>
<span class="amenity-label">Dog Friendly<br><small style="color:#a0aab4">$50 Pet Fee</small></span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M13.8 12H3"/></svg>
<span class="amenity-label">Self Check-In</span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z"/></svg>
<span class="amenity-label">Free WiFi</span>
</div>
<div class="amenity-item">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16"/><circle cx="5.5" cy="18.5" r="1.5"/><circle cx="18.5" cy="18.5" r="1.5"/></svg>
<span class="amenity-label">Free Parking</span>
</div>
</div>
</div>
</section>
<!-- ===== AREA GUIDE ===== -->
<section class="area-guide" id="area">
<div class="container">
<div class="section-header fade-in">
<span class="tag">Explore</span>
<h2>Miramar Beach &amp; Beyond</h2>
<p style="color:#5a6b7a;max-width:500px;margin:1rem auto 0">World-class dining, boutique shopping, and sugar-white sand &mdash; all minutes from your door.</p>
</div>
<div class="area-tabs fade-in">
<button class="area-tab active" data-tab="dining">Dining</button>
<button class="area-tab" data-tab="shopping">Shopping</button>
<button class="area-tab" data-tab="beaches">Beaches &amp; Activities</button>
</div>
<div class="area-content active" id="tab-dining">
<div class="area-card">
<span class="area-type">Casual Beachfront</span>
<h4>Pompano Joe&rsquo;s</h4>
<p>Legendary beachfront seafood with Caribbean flair. Just a short walk down Scenic Gulf Drive. Famous for their coconut shrimp and frozen drinks.</p>
</div>
<div class="area-card">
<span class="area-type">Local Favorite</span>
<h4>Captain Dave&rsquo;s</h4>
<p>No-frills seafood shack serving the freshest Gulf shrimp, oysters, and fish sandwiches. A Miramar Beach institution since 1978.</p>
</div>
<div class="area-card">
<span class="area-type">Family Dining</span>
<h4>Surf Hut</h4>
<p>Right-on-the-sand dining with a playground for the kids. Great burgers, seafood baskets, and sunset views over the Gulf.</p>
</div>
<div class="area-card">
<span class="area-type">Southern Comfort</span>
<h4>Kenny D&rsquo;s</h4>
<p>Hearty Southern and New Orleans-inspired fare. Famous for their gumbo, po&rsquo;boys, and live music on weekends.</p>
</div>
<div class="area-card">
<span class="area-type">Breakfast &amp; Brunch</span>
<h4>Mama Clemenza&rsquo;s</h4>
<p>European-style breakfast and brunch spot. Known for incredible pancakes, fresh pastries, and a charming courtyard setting.</p>
</div>
<div class="area-card">
<span class="area-type">Fine Dining</span>
<h4>Bijoux</h4>
<p>Upscale coastal cuisine in an intimate setting. Perfect for a romantic dinner or special occasion. Reservations recommended.</p>
</div>
<div class="area-card">
<span class="area-type">Wine &amp; Small Plates</span>
<h4>Vin&rsquo;Tij</h4>
<p>Wine bar and bistro with an impressive selection of wines by the glass and creative small plates. Great for a relaxed evening.</p>
</div>
<div class="area-card">
<span class="area-type">Island-Inspired</span>
<h4>Tommy Bahama</h4>
<p>Tropical dining and cocktails at Grand Boulevard. The coconut cloud martini and blackened fish tacos are must-tries.</p>
</div>
</div>
<div class="area-content" id="tab-shopping">
<div class="area-card">
<span class="area-type">Grocery</span>
<h4>Winn-Dixie</h4>
<p>Full-service grocery store just minutes away. Stock up on everything you need for the condo &mdash; fresh seafood, produce, wine, and more.</p>
</div>
<div class="area-card">
<span class="area-type">Supercenter</span>
<h4>Wal-Mart</h4>
<p>Conveniently located for beach gear, sunscreen, snacks, and anything you forgot to pack. Open late.</p>
</div>
<div class="area-card">
<span class="area-type">Outlet Shopping</span>
<h4>Silver Sands Premium Outlets</h4>
<p>The nation&rsquo;s largest designer outlet center with 110+ stores including Coach, Michael Kors, Nike, and Tommy Hilfiger.</p>
</div>
<div class="area-card">
<span class="area-type">Luxury &amp; Dining</span>
<h4>Grand Boulevard Town Center</h4>
<p>Upscale open-air shopping with Anthropologie, lululemon, Pottery Barn, plus a movie theater and fantastic restaurants.</p>
</div>
</div>
<div class="area-content" id="tab-beaches">
<div class="area-card">
<span class="area-type">Your Beach</span>
<h4>Miramar Beach</h4>
<p>Sugar-white sand and crystal-clear emerald water steps from Maravilla. Your beach service includes 4 chairs and 2 umbrellas.</p>
</div>
<div class="area-card">
<span class="area-type">Resort</span>
<h4>Maravilla Pools</h4>
<p>Two resort-style pools &mdash; one heated seasonally &mdash; plus a hot tub, all surrounded by lush tropical landscaping.</p>
</div>
<div class="area-card">
<span class="area-type">State Park</span>
<h4>Henderson Beach State Park</h4>
<p>Pristine natural beach with nature trails, picnic pavilions, and some of the best shelling on the Emerald Coast.</p>
</div>
<div class="area-card">
<span class="area-type">Family Fun</span>
<h4>Destin Harbor Boardwalk</h4>
<p>Deep-sea fishing charters, dolphin cruises, waterfront dining, and live entertainment &mdash; just a 10-minute drive away.</p>
</div>
</div>
</div>
</section>
<!-- ===== OWNERS ===== -->
<section class="owners" id="owners">
<div class="container">
<div class="owner-content fade-in">
<div class="section-header" style="text-align:left">
<span class="tag">Your Hosts</span>
<h2>Meet Tim &amp; Ashley Moore</h2>
</div>
<p>We fell in love with the Emerald Coast on our very first visit &mdash; the sugar-white sand, the warm Gulf waters, and the genuine hospitality of the Florida Panhandle. When we found Maravilla 1403, we knew it was the one: that view, that balcony, that feeling of being exactly where you&rsquo;re supposed to be.</p>
<p>Moore Sunny Daze isn&rsquo;t just a rental property to us &mdash; it&rsquo;s our family&rsquo;s happy place, and we&rsquo;ve poured our hearts into making it yours too. From the plush bedding to the fully stocked kitchen to the beach gear tucked away in the closet, every detail reflects how we like to travel ourselves.</p>
<p>When you book direct with us, you&rsquo;re not just saving the 13% platform fee &mdash; you&rsquo;re getting a direct line to the people who know this condo inside and out. Have a question about the best restaurant for a sunset dinner? Need a recommendation for a fishing charter? We&rsquo;re here for you.</p>
<p>We can&rsquo;t wait to welcome you to Moore Sunny Daze.</p>
<p class="signature">&mdash; Tim &amp; Ashley</p>
</div>
<div class="owner-image fade-in">
<img src="https://static.wixstatic.com/media/0a1b51_5dca81e7c6984df68055636c3ab61015~mv2.jpg" alt="Tim &amp; Ashley Moore, owners of Moore Sunny Daze" loading="lazy">
</div>
</div>
</section>
<!-- ===== BOOKING WIDGET ===== -->
<section class="booking" id="book">
<div class="container">
<div class="section-header fade-in">
<span class="tag">Reservations</span>
<h2>Book Your Stay</h2>
</div>
<div class="booking-widget fade-in">
<div class="booking-widget-header">
<h3>Check Availability</h3>
<div class="save-badge">Book Direct &amp; Save 13% vs Platform Fees</div>
</div>
<div class="booking-widget-body">
<!-- Step 1: Check Availability -->
<div id="booking-step1">
<div class="form-row">
<div class="form-group">
<label for="checkIn">Check-In</label>
<input type="date" id="checkIn" min="" required>
</div>
<div class="form-group">
<label for="checkOut">Check-Out</label>
<input type="date" id="checkOut" min="" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="guests">Guests</label>
<select id="guests">
<option value="1">1 Guest</option>
<option value="2">2 Guests</option>
<option value="3">3 Guests</option>
<option value="4" selected>4 Guests</option>
<option value="5">5 Guests</option>
<option value="6">6 Guests</option>
<option value="7">7 Guests</option>
<option value="8">8 Guests</option>
</select>
</div>
<div class="form-group" style="justify-content:flex-end">
<div class="checkbox-group" style="margin:0;padding-top:1.4rem">
<input type="checkbox" id="hasPet">
<label for="hasPet">Bringing a pet? <span class="pet-note">(+$50 fee)</span></label>
</div>
</div>
</div>
<p id="quote-error"></p>
<button class="btn btn-primary" id="checkAvailabilityBtn" onclick="checkAvailability()">
<span class="btn-text">Check Availability</span>
<span class="spinner"></span>
</button>
<!-- Quote Result -->
<div class="quote-result" id="quoteResult">
<h4>Your Quote</h4>
<div class="quote-row">
<span id="quoteNightsLabel"></span>
<span class="quote-nights" id="quoteNights"></span>
</div>
<div class="quote-row">
<span>Nightly Rate</span>
<span id="quoteRate"></span>
</div>
<div class="quote-row">
<span>Season</span>
<span id="quoteSeason"></span>
</div>
<div class="quote-row">
<span>Subtotal</span>
<span id="quoteSubtotal"></span>
</div>
<div class="quote-row" id="quoteCleaningRow">
<span>Cleaning Fee</span>
<span id="quoteCleaning"></span>
</div>
<div class="quote-row" id="quotePetRow" style="display:none">
<span>Pet Fee</span>
<span id="quotePetFee"></span>
</div>
<div class="quote-row total">
<span>Total (USD)</span>
<span id="quoteTotal"></span>
</div>
<!-- Step 2 trigger -->
<div class="booking-divider">Guest Details</div>
<!-- Step 2: Guest info (shown after quote) -->
<div class="booking-step2" id="bookingStep2">
<div class="form-group full" style="margin-bottom:.75rem">
<label for="guestName">Full Name</label>
<input type="text" id="guestName" placeholder="Your full name" required>
</div>
<div class="form-row">
<div class="form-group">
<label for="guestEmail">Email</label>
<input type="email" id="guestEmail" placeholder="you@email.com" required>
</div>
<div class="form-group">
<label for="guestPhone">Phone</label>
<input type="tel" id="guestPhone" placeholder="(555) 123-4567" required>
</div>
</div>
<p id="booking-error"></p>
<button class="btn btn-book" id="bookNowBtn" onclick="bookNow()">
<span class="btn-text">Book Now &mdash; Secure Payment</span>
<span class="spinner"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== FOOTER ===== -->
<footer>
<div class="container">
<div class="footer-logo">Moore <span>Sunny Daze</span></div>
<p>Maravilla 1403 &bull; Miramar Beach, FL 32550</p>
<p>3 Bedrooms &bull; 2 Bathrooms &bull; Sleeps 8</p>
<ul class="footer-links">
<li><a href="#property">Property</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="#owners">Owners</a></li>
<li><a href="#book">Book Now</a></li>
</ul>
<p class="copyright">&copy; <span id="currentYear"></span> Moore Sunny Daze. All rights reserved. Owned &amp; operated by Tim &amp; Ashley Moore.</p>
</div>
</footer>
<!-- ===== SCRIPTS ===== -->
<script>
/* ===== YEAR ===== */
document.getElementById('currentYear').textContent = new Date().getFullYear();
/* ===== HEADER SCROLL ===== */
const header = document.getElementById('header');
window.addEventListener('scroll', () => {
header.classList.toggle('scrolled', window.scrollY > 50);
});
/* ===== MOBILE NAV ===== */
const hamburger = document.getElementById('hamburger');
const navLinks = document.getElementById('navLinks');
hamburger.addEventListener('click', () => navLinks.classList.toggle('open'));
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => navLinks.classList.remove('open'));
});
/* ===== PARALLAX HERO ===== */
const heroBg = document.getElementById('heroBg');
window.addEventListener('scroll', () => {
const scrollY = window.scrollY;
if (scrollY < window.innerHeight) {
heroBg.style.transform = `translateY(${scrollY * 0.4}px)`;
}
});
/* ===== SCROLL FADE-IN (Intersection Observer) ===== */
const fadeEls = document.querySelectorAll('.fade-in');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });
fadeEls.forEach(el => observer.observe(el));
/* ===== AREA TABS ===== */
document.querySelectorAll('.area-tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.area-tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.area-content').forEach(c => c.classList.remove('active'));
tab.classList.add('active');
document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
});
});
/* ===== DATE INPUTS - SET MIN TO TODAY ===== */
const today = new Date().toISOString().split('T')[0];
document.getElementById('checkIn').setAttribute('min', today);
document.getElementById('checkOut').setAttribute('min', today);
/* ===== CHECK-OUT AUTO-MIN ===== */
document.getElementById('checkIn').addEventListener('change', function() {
const nextDay = new Date(this.value);
nextDay.setDate(nextDay.getDate() + 1);
document.getElementById('checkOut').setAttribute('min', nextDay.toISOString().split('T')[0]);
});
/* ===== FORMAT CURRENCY ===== */
function fmt(amount) {
return '$' + Number(amount).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
/* ===== LOADING STATE ===== */
function setButtonLoading(btn, loading) {
if (loading) {
btn.classList.add('loading');
btn.disabled = true;
} else {
btn.classList.remove('loading');
btn.disabled = false;
}
}
/* ===== CHECK AVAILABILITY ===== */
async function checkAvailability() {
const checkIn = document.getElementById('checkIn').value;
const checkOut = document.getElementById('checkOut').value;
const guests = parseInt(document.getElementById('guests').value);
const hasPet = document.getElementById('hasPet').checked;
const quoteError = document.getElementById('quote-error');
const quoteResult = document.getElementById('quoteResult');
const bookingStep2 = document.getElementById('bookingStep2');
const btn = document.getElementById('checkAvailabilityBtn');
// Reset
quoteError.classList.remove('show');
quoteError.textContent = '';
quoteResult.classList.remove('show');
bookingStep2.classList.remove('show');
// Validate
if (!checkIn || !checkOut) {
quoteError.textContent = 'Please select both check-in and check-out dates.';
quoteError.classList.add('show');
return;
}
if (checkOut <= checkIn) {
quoteError.textContent = 'Check-out must be after check-in.';
quoteError.classList.add('show');
return;
}
setButtonLoading(btn, true);
try {
const response = await fetch('/api/quote', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ check_in: checkIn, check_out: checkOut, guests: guests, has_pet: hasPet })
});
if (!response.ok) {
const errData = await response.json().catch(() => ({}));
throw new Error(errData.error || errData.detail || 'Unable to calculate rate. Please try again.');
}
const data = await response.json();
// Populate quote
document.getElementById('quoteNightsLabel').textContent = `${data.nights} Night${data.nights !== 1 ? 's' : ''}`;
document.getElementById('quoteNights').textContent = `${data.nights} night${data.nights !== 1 ? 's' : ''}`;
document.getElementById('quoteRate').textContent = fmt(data.nightly_rate) + '/night';
document.getElementById('quoteSeason').textContent = data.season || 'Standard';
document.getElementById('quoteSubtotal').textContent = fmt(data.subtotal);
document.getElementById('quoteCleaning').textContent = fmt(data.cleaning_fee);
if (data.pet_fee > 0) {
document.getElementById('quotePetRow').style.display = 'flex';
document.getElementById('quotePetFee').textContent = fmt(data.pet_fee);
} else {
document.getElementById('quotePetRow').style.display = 'none';
}
document.getElementById('quoteTotal').textContent = fmt(data.total);
quoteResult.classList.add('show');
bookingStep2.classList.add('show');
// Scroll to quote
quoteResult.scrollIntoView({ behavior: 'smooth', block: 'center' });
} catch (err) {
quoteError.textContent = err.message;
quoteError.classList.add('show');
} finally {
setButtonLoading(btn, false);
}
}
/* ===== BOOK NOW ===== */
async function bookNow() {
const checkIn = document.getElementById('checkIn').value;
const checkOut = document.getElementById('checkOut').value;
const guests = parseInt(document.getElementById('guests').value);
const hasPet = document.getElementById('hasPet').checked;
const name = document.getElementById('guestName').value.trim();
const email = document.getElementById('guestEmail').value.trim();
const phone = document.getElementById('guestPhone').value.trim();
const bookingError = document.getElementById('booking-error');
const btn = document.getElementById('bookNowBtn');
// Reset
bookingError.classList.remove('show');
bookingError.textContent = '';
// Validate
if (!name) {
bookingError.textContent = 'Please enter your full name.';
bookingError.classList.add('show');
return;
}
if (!email || !email.includes('@')) {
bookingError.textContent = 'Please enter a valid email address.';
bookingError.classList.add('show');
return;
}
if (!phone) {
bookingError.textContent = 'Please enter your phone number.';
bookingError.classList.add('show');
return;
}
setButtonLoading(btn, true);
try {
const response = await fetch('/api/booking', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
check_in: checkIn,
check_out: checkOut,
guests: guests,
has_pet: hasPet,
name: name,
email: email,
phone: phone
})
});
if (!response.ok) {
const errData = await response.json().catch(() => ({}));
throw new Error(errData.error || errData.detail || 'Booking failed. Please try again.');
}
const data = await response.json();
// Redirect to Stripe checkout
if (data.stripe_checkout_url) {
window.location.href = data.stripe_checkout_url;
} else {
throw new Error('No checkout URL returned. Please try again or contact us directly.');
}
} catch (err) {
bookingError.textContent = err.message;
bookingError.classList.add('show');
setButtonLoading(btn, false);
}
}
/* ===== SMOOTH SCROLL FOR ANCHOR LINKS ===== */
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
});
</script>
</body>
</html>