Migrate to Stack A: PHP-fpm + nginx + supervisord, drop flat HTML + Python API
- Remove old flat HTML pages (index, about, blog, contact, reviews, services/*, locations/*) - Remove Python/Flask API container (api/) - Remove old root nginx.conf and components/ - Add infra/: full nginx.conf (http block at /etc/nginx/nginx.conf), php-fpm-pool.conf (TCP listen), supervisord.conf, entrypoint.sh (auto-generates ALTCHA_HMAC_KEY) - Add src/: PHP router, page/service/location/blog templates, contact handler, altcha handler, promo endpoint, SQLite data files - Rewrite Dockerfile: single container, tini PID 1, healthcheck, all env vars declared - Update docker-compose.yml: port 8096, env_file, healthcheck - Update .dockerignore: exclude .env.*, include robots.txt/sitemap.xml/404.html/500.html - Update assets: tokens.css, promo-popup.css/js, altcha.min.js, refactored form.js/main.js Verified: all 17 routes 200, protection audit PASS, Resend confirmed working Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Concept Agent
+313
-18
@@ -1,5 +1,5 @@
|
||||
/* ============================================================
|
||||
FLOOR IT HARDWOOD FLOORS — Component Styles
|
||||
FLOOR IT HARDWOOD FLOORS : Component Styles
|
||||
components.css: header, footer, hero, cards, faq, gallery
|
||||
============================================================ */
|
||||
|
||||
@@ -580,6 +580,8 @@
|
||||
border: 1px solid var(--border-light);
|
||||
transition: transform var(--transition), box-shadow var(--transition);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
@@ -616,6 +618,7 @@
|
||||
|
||||
.service-card-body {
|
||||
padding: var(--space-6);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.service-card-body h3 {
|
||||
@@ -680,7 +683,8 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.process-step-num {
|
||||
.process-step-num,
|
||||
.process-num {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: var(--amber);
|
||||
@@ -1228,6 +1232,213 @@
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.contact-detail {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3) 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
.contact-detail:last-of-type { border-bottom: none; }
|
||||
.contact-detail strong {
|
||||
min-width: 130px;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.contact-detail a { color: var(--bark); font-weight: 600; }
|
||||
.contact-detail span { color: var(--smoke); }
|
||||
|
||||
/* About preview two-column layout */
|
||||
.about-preview-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-16);
|
||||
align-items: center;
|
||||
}
|
||||
.about-preview-text .divider {
|
||||
width: 48px;
|
||||
height: 3px;
|
||||
background: var(--amber);
|
||||
border-radius: 2px;
|
||||
margin: var(--space-4) 0 var(--space-5);
|
||||
}
|
||||
.about-preview-img {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.about-preview-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* About story two-column layout */
|
||||
.about-story {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-16);
|
||||
align-items: center;
|
||||
}
|
||||
.about-story-img {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.about-story-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Service intro two-column layout */
|
||||
.service-intro {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-12);
|
||||
align-items: center;
|
||||
}
|
||||
.service-intro-img {
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.service-intro-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Location service cards */
|
||||
.card--service-local {
|
||||
padding: var(--space-8) var(--space-6);
|
||||
}
|
||||
.card--service-local h3 {
|
||||
font-size: var(--text-xl);
|
||||
color: var(--ink);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.card--service-local p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--smoke);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Benefit item (service pages) */
|
||||
.benefit-item {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-light);
|
||||
padding: var(--space-8) var(--space-6);
|
||||
transition: box-shadow var(--transition), transform var(--transition);
|
||||
}
|
||||
.benefit-item:hover {
|
||||
box-shadow: var(--shadow);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.benefit-item h3 {
|
||||
font-size: var(--text-xl);
|
||||
color: var(--ink);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.benefit-item p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--smoke);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Native details/summary FAQ */
|
||||
details.faq-item {
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius);
|
||||
background: var(--white);
|
||||
overflow: hidden;
|
||||
}
|
||||
details.faq-item + details.faq-item { margin-top: var(--space-2); }
|
||||
details.faq-item summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-5) var(--space-6);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 600;
|
||||
color: var(--charcoal);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
details.faq-item summary::-webkit-details-marker { display: none; }
|
||||
details.faq-item summary::after {
|
||||
content: '+';
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
color: var(--amber);
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
details.faq-item[open] summary::after { transform: rotate(45deg); }
|
||||
details.faq-item p {
|
||||
padding: 0 var(--space-6) var(--space-5);
|
||||
font-size: var(--text-sm);
|
||||
color: var(--smoke);
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* --- Location pills --------------------------------------- */
|
||||
.locations-pill-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
justify-content: center;
|
||||
margin-top: var(--space-10);
|
||||
}
|
||||
.location-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--space-3) var(--space-6);
|
||||
background: var(--white);
|
||||
border: 1.5px solid var(--border-light);
|
||||
border-radius: 999px;
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
color: var(--bark);
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.07);
|
||||
transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
|
||||
}
|
||||
.location-pill:hover {
|
||||
background: var(--bark);
|
||||
border-color: var(--bark);
|
||||
color: var(--white);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* --- Credential stats ------------------------------------- */
|
||||
.credential-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-8) var(--space-4);
|
||||
}
|
||||
.credential-item strong {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 800;
|
||||
color: var(--amber);
|
||||
line-height: 1;
|
||||
}
|
||||
.credential-item span {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--ash);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* --- Responsive ------------------------------------------ */
|
||||
@media (max-width: 1024px) {
|
||||
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
|
||||
@@ -1236,7 +1447,7 @@
|
||||
.contact-layout { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* Header: switch to mobile menu earlier — desktop nav with logo + 6 links
|
||||
/* Header: switch to mobile menu earlier : desktop nav with logo + 6 links
|
||||
+ phone + CTA needs ~1024px to fit without overflowing. */
|
||||
@media (max-width: 1023px) {
|
||||
.header-nav { display: none; }
|
||||
@@ -1268,7 +1479,7 @@
|
||||
.header-logo-sub { display: none; }
|
||||
}
|
||||
|
||||
/* Ultra-narrow phones (iPhone SE portrait, 320px) — tighten header */
|
||||
/* Ultra-narrow phones (iPhone SE portrait, 320px) : tighten header */
|
||||
@media (max-width: 360px) {
|
||||
.header-cta .btn--sm {
|
||||
padding-inline: 0.75rem;
|
||||
@@ -1326,7 +1537,7 @@
|
||||
background: var(--border-dark);
|
||||
}
|
||||
|
||||
/* Luxury about split — larger image aspect */
|
||||
/* Luxury about split : larger image aspect */
|
||||
.about-img-wrap {
|
||||
border-radius: var(--radius-xl);
|
||||
overflow: hidden;
|
||||
@@ -1363,7 +1574,7 @@
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/* Process step numbers — larger */
|
||||
/* Process step numbers : larger */
|
||||
.process-step-num {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
@@ -1371,7 +1582,7 @@
|
||||
box-shadow: 0 0 0 6px rgba(200,139,42,0.15);
|
||||
}
|
||||
|
||||
/* FAQ — premium border treatment */
|
||||
/* FAQ : premium border treatment */
|
||||
.faq-item {
|
||||
border-left: 3px solid transparent;
|
||||
transition: border-color var(--transition), box-shadow var(--transition);
|
||||
@@ -1392,13 +1603,13 @@
|
||||
border-color: rgba(200,139,42,0.25);
|
||||
}
|
||||
|
||||
/* Contact form wrap — elevated shadow */
|
||||
/* Contact form wrap : elevated shadow */
|
||||
.contact-form-wrap {
|
||||
box-shadow: 0 32px 80px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LUXURY ELEVATION — v2
|
||||
LUXURY ELEVATION : v2
|
||||
============================================================ */
|
||||
|
||||
/* Services 2×2 grid */
|
||||
@@ -1419,7 +1630,7 @@
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* Service card — luxury border accent on hover */
|
||||
/* Service card : luxury border accent on hover */
|
||||
.services-grid-2x2 .service-card {
|
||||
border-top: 3px solid transparent;
|
||||
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
|
||||
@@ -1430,7 +1641,7 @@
|
||||
box-shadow: 0 24px 60px rgba(0,0,0,0.12);
|
||||
}
|
||||
|
||||
/* Testimonial cards — richer treatment */
|
||||
/* Testimonial cards : richer treatment */
|
||||
.testimonial-card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -1512,7 +1723,7 @@
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Gallery grid — full-bleed dramatic layout */
|
||||
/* Gallery grid : full-bleed dramatic layout */
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
@@ -1559,7 +1770,7 @@
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* Location card — luxury elevated */
|
||||
/* Location card : luxury elevated */
|
||||
.location-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -1598,7 +1809,7 @@
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* Section headers — more dramatic */
|
||||
/* Section headers : more dramatic */
|
||||
.section-header h2,
|
||||
.section-header--center h2 {
|
||||
font-size: clamp(2rem, 4.5vw, 3.25rem);
|
||||
@@ -1615,7 +1826,7 @@
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* Benefit icon — amber filled circle */
|
||||
/* Benefit icon : amber filled circle */
|
||||
.benefit-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
@@ -1667,7 +1878,7 @@
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Mobile responsive overrides — inline grids must collapse
|
||||
Mobile responsive overrides : inline grids must collapse
|
||||
to single column on narrow viewports. Inline styles win over
|
||||
CSS unless we use !important inside media queries.
|
||||
============================================================ */
|
||||
@@ -1705,7 +1916,7 @@ html, body {
|
||||
gap: 1.5rem !important;
|
||||
}
|
||||
|
||||
/* Order overrides — when 2-col uses order:1/2 to flip image/content,
|
||||
/* Order overrides : when 2-col uses order:1/2 to flip image/content,
|
||||
reset on mobile so content always reads top-to-bottom */
|
||||
[style*="order:1"],
|
||||
[style*="order: 1"] {
|
||||
@@ -1747,7 +1958,7 @@ html, body {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Form/contact layout — prevent intrinsic input width from blowing out
|
||||
/* Form/contact layout : prevent intrinsic input width from blowing out
|
||||
the grid track. Without min-width:0, <select> and <input> defaults push
|
||||
the parent column wider than the viewport, causing horizontal scroll. */
|
||||
.contact-layout { min-width: 0; }
|
||||
@@ -1794,3 +2005,87 @@ html, body {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* CTA banner sections with photo background */
|
||||
.cta-section {
|
||||
position: relative;
|
||||
background-image: url('/assets/images/refinishing-machine.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: var(--text-on-dark);
|
||||
}
|
||||
.cta-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(12, 8, 5, 0.78);
|
||||
}
|
||||
.cta-section-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-8);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cta-section-text h2 { color: var(--white); }
|
||||
.cta-section-text p { color: rgba(240,232,218,0.8); max-width: 52ch; }
|
||||
.cta-section .btn--primary {
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 4px 20px rgba(200,139,42,0.4);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.cta-section-inner { flex-direction: column; text-align: center; }
|
||||
.cta-section-text p { margin-inline: auto; }
|
||||
}
|
||||
|
||||
/* Service grid cards (home page) */
|
||||
.card--service {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-decoration: none;
|
||||
color: var(--text-on-light);
|
||||
}
|
||||
.card--service .card-img-wrap {
|
||||
height: 220px;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.card--service .card-img-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
.card--service:hover .card-img-wrap img { transform: scale(1.05); }
|
||||
.card--service .card-body {
|
||||
padding: var(--space-6);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card--service .card-body h3 {
|
||||
font-size: var(--text-xl);
|
||||
color: var(--charcoal);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.card--service .card-body p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--smoke);
|
||||
line-height: 1.65;
|
||||
max-width: none;
|
||||
flex: 1;
|
||||
}
|
||||
.card--service .card-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 700;
|
||||
color: var(--amber);
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: var(--space-4);
|
||||
transition: gap var(--transition);
|
||||
}
|
||||
.card--service:hover .card-link { gap: var(--space-3); }
|
||||
|
||||
+20
-118
@@ -1,106 +1,9 @@
|
||||
/* ============================================================
|
||||
FLOOR IT HARDWOOD FLOORS — Design System
|
||||
main.css: variables, reset, typography, layout, utilities
|
||||
============================================================ */
|
||||
@import url('tokens.css');
|
||||
|
||||
/* --- Custom Properties ------------------------------------ */
|
||||
:root {
|
||||
/* Color palette — warm wood tones, no gradients */
|
||||
--ink: #0c0805;
|
||||
--charcoal: #1c1208;
|
||||
--bark: #2e1d0a;
|
||||
--bark-mid: #3d2710;
|
||||
--amber: #c88b2a;
|
||||
--amber-dark: #a87220;
|
||||
--amber-light: #e8aa48;
|
||||
--parchment: #f5f0e8;
|
||||
--cream: #faf8f5;
|
||||
--grain: #ede5d8;
|
||||
--smoke: #7a6a56;
|
||||
--ash: #b8a898;
|
||||
--white: #ffffff;
|
||||
/* FLOOR IT HARDWOOD FLOORS: Design System
|
||||
main.css: reset, typography, layout, utilities */
|
||||
|
||||
/* Semantic aliases */
|
||||
--bg-dark: var(--ink);
|
||||
--bg-dark-alt: var(--charcoal);
|
||||
--bg-mid-dark: var(--bark);
|
||||
--bg-light: var(--cream);
|
||||
--bg-light-alt: var(--parchment);
|
||||
--bg-warm: var(--grain);
|
||||
|
||||
--text-on-dark: #f0e8da;
|
||||
--text-muted-dark:var(--ash);
|
||||
--text-on-light: var(--charcoal);
|
||||
--text-muted-light:var(--smoke);
|
||||
|
||||
--cta: var(--amber);
|
||||
--cta-hover: var(--amber-dark);
|
||||
--cta-text: var(--ink);
|
||||
|
||||
--border-dark: rgba(255,255,255,0.08);
|
||||
--border-light: rgba(0,0,0,0.08);
|
||||
|
||||
/* Typography */
|
||||
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-display: 'Inter', Georgia, serif;
|
||||
|
||||
/* Scale */
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-md: 1.125rem;
|
||||
--text-lg: 1.25rem;
|
||||
--text-xl: 1.5rem;
|
||||
--text-2xl: 2rem;
|
||||
--text-3xl: 2.5rem;
|
||||
--text-4xl: 3.25rem;
|
||||
--text-5xl: 4.25rem;
|
||||
--text-6xl: 5.5rem;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
--space-24: 6rem;
|
||||
--space-32: 8rem;
|
||||
|
||||
/* Section rhythm */
|
||||
--section-py: clamp(4rem, 8vw, 8rem);
|
||||
--section-py-sm: clamp(2.5rem, 5vw, 5rem);
|
||||
|
||||
/* Layout */
|
||||
--container-max: 1200px;
|
||||
--container-wide: 1380px;
|
||||
--container-px: clamp(1.25rem, 5vw, 2.5rem);
|
||||
|
||||
/* Effects */
|
||||
--radius-sm: 4px;
|
||||
--radius: 8px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 24px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
|
||||
--shadow: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
|
||||
--shadow-lg: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.10);
|
||||
--shadow-xl: 0 24px 64px rgba(0,0,0,0.22);
|
||||
|
||||
--transition: 0.25s ease;
|
||||
--transition-slow: 0.5s ease;
|
||||
|
||||
/* Header height */
|
||||
--header-h: 72px;
|
||||
}
|
||||
|
||||
/* --- Reset ------------------------------------------------ */
|
||||
/* Reset */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
@@ -148,7 +51,7 @@ input, textarea, select {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
/* --- Typography ------------------------------------------- */
|
||||
/* Typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
@@ -215,9 +118,9 @@ p { max-width: 68ch; }
|
||||
gap: var(--space-8);
|
||||
}
|
||||
|
||||
.grid--2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid--3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid--4 { grid-template-columns: repeat(4, 1fr); }
|
||||
.grid--2, .grid--2col { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid--3, .grid--3col { grid-template-columns: repeat(3, 1fr); }
|
||||
.grid--4, .grid--4col { grid-template-columns: repeat(4, 1fr); }
|
||||
|
||||
.grid--auto-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
|
||||
.grid--auto-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
|
||||
@@ -253,7 +156,7 @@ p { max-width: 68ch; }
|
||||
.section--mid .lead,
|
||||
.section--bark .lead { color: var(--text-muted-dark); }
|
||||
|
||||
/* --- Buttons --------------------------------------------- */
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -328,7 +231,7 @@ p { max-width: 68ch; }
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* --- Forms ----------------------------------------------- */
|
||||
/* Forms */
|
||||
.form-grid {
|
||||
display: grid;
|
||||
gap: var(--space-5);
|
||||
@@ -439,7 +342,7 @@ p { max-width: 68ch; }
|
||||
.form-status--success { background: #d4edda; color: #155724; display: block; }
|
||||
.form-status--error { background: #f8d7da; color: #721c24; display: block; }
|
||||
|
||||
/* --- Cards ----------------------------------------------- */
|
||||
/* Cards */
|
||||
.card {
|
||||
background: var(--white);
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -459,7 +362,7 @@ p { max-width: 68ch; }
|
||||
color: var(--text-on-dark);
|
||||
}
|
||||
|
||||
/* --- Scroll Animations ----------------------------------- */
|
||||
/* Scroll Animations */
|
||||
[data-animate] {
|
||||
opacity: 0;
|
||||
transition: opacity 0.7s ease, transform 0.7s ease;
|
||||
@@ -482,7 +385,7 @@ p { max-width: 68ch; }
|
||||
[data-delay="5"] { transition-delay: 0.5s; }
|
||||
[data-delay="6"] { transition-delay: 0.6s; }
|
||||
|
||||
/* --- Utility Classes ------------------------------------- */
|
||||
/* Utility Classes */
|
||||
.text-center { text-align: center; }
|
||||
.text-amber { color: var(--amber); }
|
||||
.text-muted { color: var(--smoke); }
|
||||
@@ -512,7 +415,7 @@ p { max-width: 68ch; }
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* --- Dividers -------------------------------------------- */
|
||||
/* Dividers */
|
||||
.divider {
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
@@ -524,22 +427,21 @@ p { max-width: 68ch; }
|
||||
.section--mid .divider,
|
||||
.section--bark .divider { background: var(--amber); }
|
||||
|
||||
/* --- Responsive ------------------------------------------ */
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.grid--4 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid--3 { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid--4, .grid--4col { grid-template-columns: repeat(2, 1fr); }
|
||||
.grid--3, .grid--3col { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.grid--2,
|
||||
.grid--3,
|
||||
.grid--4 { grid-template-columns: 1fr; }
|
||||
.grid--2, .grid--2col,
|
||||
.grid--3, .grid--3col,
|
||||
.grid--4, .grid--4col { grid-template-columns: 1fr; }
|
||||
|
||||
.cta-group { justify-content: center; }
|
||||
.cta-group .btn { min-width: 220px; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
:root { --section-py: clamp(3rem, 8vw, 4rem); }
|
||||
p { max-width: 100%; }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
/* FLOOR IT HARDWOOD FLOORS. Summer Promo Topbar + Popup */
|
||||
|
||||
/* Topbar */
|
||||
#promo-topbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
height: 44px;
|
||||
background: #c8a96e;
|
||||
color: #1a1207;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0 1rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
#promo-topbar.visible { display: flex; }
|
||||
#promo-topbar-text { flex: 1; text-align: center; }
|
||||
#promo-topbar-btn {
|
||||
background: #1a1207;
|
||||
color: #c8a96e;
|
||||
border: none;
|
||||
padding: 0.3rem 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#promo-topbar-btn:hover { background: #0c0805; }
|
||||
#promo-topbar-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #1a1207;
|
||||
font-size: 1.3rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
#promo-topbar-close:hover { opacity: 1; }
|
||||
|
||||
body.has-topbar #site-header { top: 44px; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
#promo-topbar-text { font-size: 0.72rem; }
|
||||
#promo-topbar { gap: 0.5rem; }
|
||||
}
|
||||
|
||||
/* Popup */
|
||||
#promo-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(30, 20, 10, 0.72);
|
||||
z-index: 9000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
#promo-overlay.visible {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
#promo-box {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
padding: 2.5rem 2rem 2rem;
|
||||
position: relative;
|
||||
box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||||
}
|
||||
#promo-box .promo-badge {
|
||||
display: inline-block;
|
||||
background: #c8a96e;
|
||||
color: #fff;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 2px;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
#promo-box h2 {
|
||||
font-size: 1.45rem;
|
||||
line-height: 1.25;
|
||||
color: #1a1207;
|
||||
margin: 0 0 0.4rem;
|
||||
}
|
||||
#promo-box .promo-sub {
|
||||
font-size: 0.9rem;
|
||||
color: #6b5c3e;
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
#promo-box .promo-field {
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
#promo-box .promo-field label {
|
||||
display: block;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: #1a1207;
|
||||
margin-bottom: 0.3rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
#promo-box .promo-field input {
|
||||
width: 100%;
|
||||
padding: 0.65rem 0.85rem;
|
||||
border: 1.5px solid #d5c9b6;
|
||||
border-radius: 3px;
|
||||
font-size: 0.95rem;
|
||||
color: #1a1207;
|
||||
background: #faf8f5;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
#promo-box .promo-field input:focus {
|
||||
outline: none;
|
||||
border-color: #c8a96e;
|
||||
}
|
||||
#promo-box .promo-submit {
|
||||
width: 100%;
|
||||
padding: 0.85rem;
|
||||
background: #c8a96e;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
cursor: pointer;
|
||||
margin-top: 0.5rem;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
#promo-box .promo-submit:hover { background: #b5923d; }
|
||||
#promo-box .promo-submit:disabled { background: #ccc; cursor: default; }
|
||||
#promo-box .promo-error {
|
||||
font-size: 0.85rem;
|
||||
color: #b91c1c;
|
||||
margin-top: 0.5rem;
|
||||
display: none;
|
||||
}
|
||||
#promo-box .promo-success {
|
||||
text-align: center;
|
||||
padding: 1rem 0 0.5rem;
|
||||
display: none;
|
||||
}
|
||||
#promo-box .promo-success p {
|
||||
font-size: 1.05rem;
|
||||
color: #1a1207;
|
||||
margin: 0.5rem 0 0;
|
||||
}
|
||||
#promo-close {
|
||||
position: absolute;
|
||||
top: 0.85rem;
|
||||
right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
color: #9a8a72;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
#promo-close:hover { color: #1a1207; }
|
||||
#promo-box .promo-fine {
|
||||
font-size: 0.72rem;
|
||||
color: #9a8a72;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
#promo-box { padding: 2rem 1.25rem 1.5rem; }
|
||||
#promo-box h2 { font-size: 1.2rem; }
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
/* ============================================================
|
||||
FLOOR IT HARDWOOD FLOORS: Design Tokens
|
||||
tokens.css: CSS custom properties only. No rules, no selectors.
|
||||
============================================================ */
|
||||
|
||||
/* Custom Properties */
|
||||
:root {
|
||||
/* Color palette: warm wood tones, no gradients */
|
||||
--ink: #0c0805;
|
||||
--charcoal: #1c1208;
|
||||
--bark: #2e1d0a;
|
||||
--bark-mid: #3d2710;
|
||||
--amber: #c88b2a;
|
||||
--amber-dark: #a87220;
|
||||
--amber-light: #e8aa48;
|
||||
--parchment: #f5f0e8;
|
||||
--cream: #faf8f5;
|
||||
--grain: #ede5d8;
|
||||
--smoke: #7a6a56;
|
||||
--ash: #b8a898;
|
||||
--white: #ffffff;
|
||||
|
||||
/* Semantic aliases */
|
||||
--bg-dark: var(--ink);
|
||||
--bg-dark-alt: var(--charcoal);
|
||||
--bg-mid-dark: var(--bark);
|
||||
--bg-light: var(--cream);
|
||||
--bg-light-alt: var(--parchment);
|
||||
--bg-warm: var(--grain);
|
||||
|
||||
--text-on-dark: #f0e8da;
|
||||
--text-muted-dark:var(--ash);
|
||||
--text-on-light: var(--charcoal);
|
||||
--text-muted-light:var(--smoke);
|
||||
|
||||
--cta: var(--amber);
|
||||
--cta-hover: var(--amber-dark);
|
||||
--cta-text: var(--ink);
|
||||
|
||||
--border-dark: rgba(255,255,255,0.08);
|
||||
--border-light: rgba(0,0,0,0.08);
|
||||
|
||||
/* Typography */
|
||||
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-display: 'Inter', Georgia, serif;
|
||||
|
||||
/* Scale */
|
||||
--text-xs: 0.75rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-base: 1rem;
|
||||
--text-md: 1.125rem;
|
||||
--text-lg: 1.25rem;
|
||||
--text-xl: 1.5rem;
|
||||
--text-2xl: 2rem;
|
||||
--text-3xl: 2.5rem;
|
||||
--text-4xl: 3.25rem;
|
||||
--text-5xl: 4.25rem;
|
||||
--text-6xl: 5.5rem;
|
||||
|
||||
/* Spacing */
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
--space-10: 2.5rem;
|
||||
--space-12: 3rem;
|
||||
--space-16: 4rem;
|
||||
--space-20: 5rem;
|
||||
--space-24: 6rem;
|
||||
--space-32: 8rem;
|
||||
|
||||
/* Section rhythm */
|
||||
--section-py: clamp(4rem, 8vw, 8rem);
|
||||
--section-py-sm: clamp(2.5rem, 5vw, 5rem);
|
||||
|
||||
/* Layout */
|
||||
--container-max: 1200px;
|
||||
--container-wide: 1380px;
|
||||
--container-px: clamp(1.25rem, 5vw, 2.5rem);
|
||||
|
||||
/* Effects */
|
||||
--radius-sm: 4px;
|
||||
--radius: 8px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 24px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
|
||||
--shadow: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
|
||||
--shadow-lg: 0 12px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.10);
|
||||
--shadow-xl: 0 24px 64px rgba(0,0,0,0.22);
|
||||
|
||||
--transition: 0.25s ease;
|
||||
--transition-slow: 0.5s ease;
|
||||
|
||||
/* Header height */
|
||||
--header-h: 72px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
:root { --section-py: clamp(3rem, 8vw, 4rem); }
|
||||
}
|
||||
Vendored
+8
File diff suppressed because one or more lines are too long
+107
-199
@@ -1,207 +1,115 @@
|
||||
/* ============================================================
|
||||
form.js — Estimate form validation + submission
|
||||
Real-time validation, phone formatting, reCAPTCHA v3 hook
|
||||
============================================================ */
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.getElementById('contactForm');
|
||||
const formLoadedAtInput = document.getElementById('form_loaded_at');
|
||||
const formStatusDiv = document.getElementById('formStatus');
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const PHONE = /^\(?\d{3}\)?[\s.\-]?\d{3}[\s.\-]?\d{4}$/;
|
||||
const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
const RECAPTCHA_SITE_KEY = '6LdqrB8rAAAAAOrBCYmtk43IzemkiK_Fb2EYU5q2';
|
||||
|
||||
/* --- Helpers -------------------------------------------- */
|
||||
function field(el) {
|
||||
return el.closest('.form-field');
|
||||
}
|
||||
|
||||
function setValid(el) {
|
||||
const f = field(el);
|
||||
if (!f) return;
|
||||
f.classList.remove('has-error');
|
||||
el.classList.add('valid');
|
||||
el.classList.remove('invalid');
|
||||
}
|
||||
|
||||
function setInvalid(el, msg) {
|
||||
const f = field(el);
|
||||
if (!f) return;
|
||||
f.classList.add('has-error');
|
||||
el.classList.add('invalid');
|
||||
el.classList.remove('valid');
|
||||
const errEl = f.querySelector('.err-msg');
|
||||
if (errEl && msg) errEl.textContent = msg;
|
||||
}
|
||||
|
||||
function clearState(el) {
|
||||
const f = field(el);
|
||||
if (!f) return;
|
||||
f.classList.remove('has-error');
|
||||
el.classList.remove('valid', 'invalid');
|
||||
}
|
||||
|
||||
/* --- Phone formatter ------------------------------------ */
|
||||
function formatPhone(raw) {
|
||||
const digits = raw.replace(/\D/g, '').slice(0, 10);
|
||||
if (digits.length < 4) return digits;
|
||||
if (digits.length < 7) return '(' + digits.slice(0,3) + ') ' + digits.slice(3);
|
||||
return '(' + digits.slice(0,3) + ') ' + digits.slice(3,6) + '-' + digits.slice(6);
|
||||
}
|
||||
|
||||
/* --- Validators ----------------------------------------- */
|
||||
function validateRequired(el) {
|
||||
if (!el.value.trim()) {
|
||||
setInvalid(el, 'This field is required.');
|
||||
return false;
|
||||
}
|
||||
setValid(el);
|
||||
return true;
|
||||
}
|
||||
|
||||
function validateEmail(el) {
|
||||
if (!el.value.trim()) {
|
||||
setInvalid(el, 'Email address is required.');
|
||||
return false;
|
||||
}
|
||||
if (!EMAIL.test(el.value.trim())) {
|
||||
setInvalid(el, 'Please enter a valid email address.');
|
||||
return false;
|
||||
}
|
||||
setValid(el);
|
||||
return true;
|
||||
}
|
||||
|
||||
function validatePhone(el) {
|
||||
const val = el.value.replace(/\D/g, '');
|
||||
if (!val) {
|
||||
setInvalid(el, 'Phone number is required.');
|
||||
return false;
|
||||
}
|
||||
if (val.length !== 10) {
|
||||
setInvalid(el, 'Please enter a 10-digit phone number.');
|
||||
return false;
|
||||
}
|
||||
setValid(el);
|
||||
return true;
|
||||
}
|
||||
|
||||
/* --- reCAPTCHA v3 token --------------------------------- */
|
||||
function getRecaptchaToken(action) {
|
||||
return new Promise((resolve) => {
|
||||
if (typeof grecaptcha === 'undefined') {
|
||||
resolve('');
|
||||
return;
|
||||
}
|
||||
grecaptcha.ready(() => {
|
||||
grecaptcha.execute(RECAPTCHA_SITE_KEY, { action }).then(resolve);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* --- Form handler --------------------------------------- */
|
||||
function initForm(form) {
|
||||
const nameEl = form.querySelector('#name');
|
||||
const emailEl = form.querySelector('#email');
|
||||
const phoneEl = form.querySelector('#phone');
|
||||
const addrEl = form.querySelector('#address');
|
||||
const serviceEl = form.querySelector('#service');
|
||||
const msgEl = form.querySelector('#message');
|
||||
const submit = form.querySelector('[type="submit"]');
|
||||
const status = form.querySelector('.form-status');
|
||||
|
||||
if (!submit) return;
|
||||
|
||||
/* Phone real-time format */
|
||||
if (phoneEl) {
|
||||
phoneEl.addEventListener('input', () => {
|
||||
const pos = phoneEl.selectionStart;
|
||||
const prev = phoneEl.value;
|
||||
phoneEl.value = formatPhone(prev);
|
||||
/* restore cursor roughly */
|
||||
const diff = phoneEl.value.length - prev.length;
|
||||
try { phoneEl.setSelectionRange(pos + diff, pos + diff); } catch (_) {}
|
||||
});
|
||||
|
||||
phoneEl.addEventListener('blur', () => validatePhone(phoneEl));
|
||||
// Set form_loaded_at to current timestamp in milliseconds
|
||||
if (formLoadedAtInput) {
|
||||
formLoadedAtInput.value = Date.now().toString();
|
||||
}
|
||||
|
||||
/* Blur-time validation for other fields */
|
||||
if (nameEl) nameEl.addEventListener('blur', () => validateRequired(nameEl));
|
||||
if (emailEl) emailEl.addEventListener('blur', () => validateEmail(emailEl));
|
||||
if (addrEl) addrEl.addEventListener('blur', () => validateRequired(addrEl));
|
||||
if (serviceEl) serviceEl.addEventListener('change', () => validateRequired(serviceEl));
|
||||
|
||||
/* Submit */
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const checks = [
|
||||
nameEl ? validateRequired(nameEl) : true,
|
||||
emailEl ? validateEmail(emailEl) : true,
|
||||
phoneEl ? validatePhone(phoneEl) : true,
|
||||
addrEl ? validateRequired(addrEl) : true,
|
||||
serviceEl ? validateRequired(serviceEl) : true,
|
||||
];
|
||||
|
||||
if (checks.includes(false)) {
|
||||
const firstErr = form.querySelector('.invalid');
|
||||
if (firstErr) firstErr.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const origText = submit.textContent;
|
||||
submit.disabled = true;
|
||||
submit.textContent = 'Sending...';
|
||||
if (status) { status.className = 'form-status'; status.textContent = ''; }
|
||||
|
||||
const token = await getRecaptchaToken('estimate_form');
|
||||
|
||||
const payload = {
|
||||
name: nameEl ? nameEl.value.trim() : '',
|
||||
email: emailEl ? emailEl.value.trim() : '',
|
||||
phone: phoneEl ? phoneEl.value.trim() : '',
|
||||
address: addrEl ? addrEl.value.trim() : '',
|
||||
service: serviceEl ? serviceEl.value : '',
|
||||
message: msgEl ? msgEl.value.trim() : '',
|
||||
token,
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/estimate', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
// Initialize Altcha
|
||||
const altchaElement = document.getElementById('altcha-widget');
|
||||
if (altchaElement) {
|
||||
window.altcha = new Altcha({
|
||||
challengeUrl: '/altcha-challenge/',
|
||||
element: altchaElement
|
||||
});
|
||||
}
|
||||
|
||||
if (!status) { submit.disabled = false; submit.textContent = origText; return; }
|
||||
// Form submit handler
|
||||
if (form) {
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (res.ok) {
|
||||
status.className = 'form-status form-status--success';
|
||||
status.textContent = 'Thank you! We will get back to you within 1 business hour.';
|
||||
form.reset();
|
||||
form.querySelectorAll('input, textarea, select').forEach(clearState);
|
||||
} else {
|
||||
throw new Error(res.status);
|
||||
}
|
||||
} catch (_) {
|
||||
if (status) {
|
||||
status.className = 'form-status form-status--error';
|
||||
status.textContent = 'Something went wrong. Please call us directly at (716) 602-1429.';
|
||||
}
|
||||
} finally {
|
||||
submit.disabled = false;
|
||||
submit.textContent = origText;
|
||||
}
|
||||
});
|
||||
}
|
||||
// Clear previous status messages
|
||||
formStatusDiv.innerHTML = '';
|
||||
formStatusDiv.className = '';
|
||||
|
||||
function boot() {
|
||||
document.querySelectorAll('.estimate-form').forEach(initForm);
|
||||
}
|
||||
// Validate required fields
|
||||
const name = form.elements['name']?.value.trim();
|
||||
const email = form.elements['email']?.value.trim();
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', boot);
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
if (!name || !email) {
|
||||
formStatusDiv.className = 'form-status form-status--error';
|
||||
formStatusDiv.innerHTML = '<p>Please fill in all required fields.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
if (!email.includes('@')) {
|
||||
formStatusDiv.className = 'form-status form-status--error';
|
||||
formStatusDiv.innerHTML = '<p>Please enter a valid email address.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Check honeypot
|
||||
const honeypot = form.elements['website']?.value;
|
||||
if (honeypot) {
|
||||
formStatusDiv.className = 'form-status form-status--error';
|
||||
formStatusDiv.innerHTML = '<p>Form validation failed.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Solve Altcha if available
|
||||
let altchaPayload = '';
|
||||
if (window.altcha && !window.altcha.didSubmit) {
|
||||
try {
|
||||
await window.altcha.solve();
|
||||
altchaPayload = window.altcha.getFormData().altcha;
|
||||
} catch (err) {
|
||||
formStatusDiv.className = 'form-status form-status--error';
|
||||
formStatusDiv.innerHTML = '<p>Spam check failed. Please try again.</p>';
|
||||
return;
|
||||
}
|
||||
} else if (window.altcha) {
|
||||
const formData = window.altcha.getFormData();
|
||||
altchaPayload = formData.altcha || '';
|
||||
}
|
||||
|
||||
// Build JSON payload
|
||||
const payload = {
|
||||
name: form.elements['name'].value.trim(),
|
||||
email: form.elements['email'].value.trim(),
|
||||
phone: form.elements['phone']?.value.trim() || '',
|
||||
message: form.elements['message']?.value.trim() || '',
|
||||
website: form.elements['website']?.value || '',
|
||||
form_loaded_at: form.elements['form_loaded_at']?.value || '',
|
||||
altcha: altchaPayload
|
||||
};
|
||||
|
||||
// POST to /contact/
|
||||
try {
|
||||
const response = await fetch('/contact/', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.ok) {
|
||||
formStatusDiv.className = 'form-status form-status--success';
|
||||
formStatusDiv.innerHTML = '<p>Thank you! Your message has been sent. We\'ll be in touch soon.</p>';
|
||||
form.reset();
|
||||
if (formLoadedAtInput) {
|
||||
formLoadedAtInput.value = Date.now().toString();
|
||||
}
|
||||
if (window.altcha) {
|
||||
window.altcha = new Altcha({
|
||||
challengeUrl: '/altcha-challenge/',
|
||||
element: document.getElementById('altcha-widget')
|
||||
});
|
||||
}
|
||||
} else {
|
||||
formStatusDiv.className = 'form-status form-status--error';
|
||||
formStatusDiv.innerHTML = '<p>' + (data.error || 'An error occurred. Please try again.') + '</p>';
|
||||
}
|
||||
} catch (err) {
|
||||
formStatusDiv.className = 'form-status form-status--error';
|
||||
formStatusDiv.innerHTML = '<p>Network error. Please try again.</p>';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
+37
-3
@@ -1,5 +1,5 @@
|
||||
/* ============================================================
|
||||
main.js — Scroll animations, counters, FAQ, BA slider
|
||||
main.js: Scroll animations, counters, FAQ, BA slider
|
||||
============================================================ */
|
||||
|
||||
(function () {
|
||||
@@ -128,7 +128,7 @@
|
||||
const video = document.querySelector('.hero-video-wrap video');
|
||||
if (!video) return;
|
||||
video.play().catch(() => {
|
||||
// autoplay blocked — poster image is visible; nothing to do
|
||||
// autoplay blocked: poster image is visible; nothing to do
|
||||
});
|
||||
}
|
||||
|
||||
@@ -145,8 +145,42 @@
|
||||
track.setAttribute('tabindex', '0');
|
||||
}
|
||||
|
||||
/* --- Boot ---------------------------------------------- */
|
||||
/* --- Header scroll + mobile nav ------------------------- */
|
||||
function initNav() {
|
||||
var header = document.getElementById('site-header');
|
||||
var mobileNav = document.getElementById('mobileNav');
|
||||
var menuBtn = document.querySelector('.header-menu-btn');
|
||||
var closeBtn = document.getElementById('mobileNavClose');
|
||||
var overlay = document.getElementById('mobileNavOverlay');
|
||||
|
||||
if (!header) return;
|
||||
|
||||
window.addEventListener('scroll', function () {
|
||||
header.classList.toggle('scrolled', window.scrollY > 40);
|
||||
}, { passive: true });
|
||||
|
||||
function openNav() {
|
||||
mobileNav.classList.add('open');
|
||||
mobileNav.setAttribute('aria-hidden', 'false');
|
||||
if (menuBtn) menuBtn.setAttribute('aria-expanded', 'true');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
mobileNav.classList.remove('open');
|
||||
mobileNav.setAttribute('aria-hidden', 'true');
|
||||
if (menuBtn) menuBtn.setAttribute('aria-expanded', 'false');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
|
||||
if (menuBtn) menuBtn.addEventListener('click', openNav);
|
||||
if (closeBtn) closeBtn.addEventListener('click', closeNav);
|
||||
if (overlay) overlay.addEventListener('click', closeNav);
|
||||
}
|
||||
|
||||
/* --- Boot: initialize all modules ------------------------ */
|
||||
function boot() {
|
||||
initNav();
|
||||
initScrollAnimations();
|
||||
initCounters();
|
||||
initFAQ();
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
(function () {
|
||||
var POPUP_KEY = 'flooritPromo2026';
|
||||
var TOPBAR_KEY = 'flooritTopbar2026';
|
||||
var DELAY_MS = 5000;
|
||||
var EXPIRY_MS = 7 * 24 * 60 * 60 * 1000;
|
||||
|
||||
function isStored(key) {
|
||||
try {
|
||||
var val = localStorage.getItem(key);
|
||||
return val && Date.now() < parseInt(val, 10);
|
||||
} catch (e) { return false; }
|
||||
}
|
||||
|
||||
function store(key) {
|
||||
try { localStorage.setItem(key, String(Date.now() + EXPIRY_MS)); } catch (e) {}
|
||||
}
|
||||
|
||||
/* --- Topbar -------------------------------------------- */
|
||||
function showTopbar() {
|
||||
var bar = document.getElementById('promo-topbar');
|
||||
if (!bar) return;
|
||||
bar.classList.add('visible');
|
||||
document.body.classList.add('has-topbar');
|
||||
}
|
||||
|
||||
function hideTopbar() {
|
||||
var bar = document.getElementById('promo-topbar');
|
||||
if (!bar) return;
|
||||
bar.classList.remove('visible');
|
||||
document.body.classList.remove('has-topbar');
|
||||
store(TOPBAR_KEY);
|
||||
}
|
||||
|
||||
function initTopbar() {
|
||||
if (isStored(TOPBAR_KEY) || isStored(POPUP_KEY)) return;
|
||||
showTopbar();
|
||||
var closeBtn = document.getElementById('promo-topbar-close');
|
||||
var offerBtn = document.getElementById('promo-topbar-btn');
|
||||
if (closeBtn) closeBtn.addEventListener('click', hideTopbar);
|
||||
if (offerBtn) offerBtn.addEventListener('click', function () {
|
||||
hideTopbar();
|
||||
openPopup();
|
||||
});
|
||||
}
|
||||
|
||||
/* --- Popup --------------------------------------------- */
|
||||
function openPopup() {
|
||||
var overlay = document.getElementById('promo-overlay');
|
||||
if (!overlay) return;
|
||||
overlay.style.display = 'flex';
|
||||
requestAnimationFrame(function () {
|
||||
requestAnimationFrame(function () { overlay.classList.add('visible'); });
|
||||
});
|
||||
}
|
||||
|
||||
function closePopup() {
|
||||
var overlay = document.getElementById('promo-overlay');
|
||||
if (overlay) {
|
||||
overlay.classList.remove('visible');
|
||||
setTimeout(function () { overlay.style.display = 'none'; }, 350);
|
||||
}
|
||||
store(POPUP_KEY);
|
||||
hideTopbar();
|
||||
}
|
||||
|
||||
function initPopup() {
|
||||
if (isStored(POPUP_KEY)) return;
|
||||
var closeBtn = document.getElementById('promo-close');
|
||||
var overlay = document.getElementById('promo-overlay');
|
||||
var form = document.getElementById('promo-form');
|
||||
var submit = document.getElementById('promo-submit');
|
||||
var errEl = document.getElementById('promo-error');
|
||||
var success = document.getElementById('promo-success');
|
||||
if (!overlay || !form) return;
|
||||
|
||||
if (closeBtn) closeBtn.addEventListener('click', closePopup);
|
||||
overlay.addEventListener('click', function (e) {
|
||||
if (e.target === overlay) closePopup();
|
||||
});
|
||||
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
errEl.style.display = 'none';
|
||||
submit.disabled = true;
|
||||
submit.textContent = 'Sending...';
|
||||
var data = new FormData(form);
|
||||
fetch('/promo/', { method: 'POST', body: data })
|
||||
.then(function (r) { return r.json(); })
|
||||
.then(function (res) {
|
||||
if (res.ok) {
|
||||
form.style.display = 'none';
|
||||
success.style.display = 'block';
|
||||
store(POPUP_KEY);
|
||||
hideTopbar();
|
||||
} else {
|
||||
errEl.textContent = res.error || 'Something went wrong.';
|
||||
errEl.style.display = 'block';
|
||||
submit.disabled = false;
|
||||
submit.textContent = 'Claim My Discount';
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
errEl.textContent = 'Network error. Please try again.';
|
||||
errEl.style.display = 'block';
|
||||
submit.disabled = false;
|
||||
submit.textContent = 'Claim My Discount';
|
||||
});
|
||||
});
|
||||
|
||||
setTimeout(openPopup, DELAY_MS);
|
||||
}
|
||||
|
||||
function init() {
|
||||
initTopbar();
|
||||
initPopup();
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user