diff --git a/app.js b/app.js index 580bbf3..f751528 100644 --- a/app.js +++ b/app.js @@ -359,4 +359,41 @@ document.addEventListener('DOMContentLoaded', () => { } }); }); + + // ========================================================================== + // 7. PODCAST SAMPLE AUDIO CONTROLS (Zero Image / Pure SVG) + // ========================================================================== + const playBtn = document.getElementById('podcast-play-sample'); + if (playBtn) { + let isPlaying = false; + let playInterval = null; + let currentSeconds = 0; + const playerTrackFill = document.querySelector('.player-fill'); + const playerTime = document.querySelector('.player-time'); + + playBtn.addEventListener('click', () => { + isPlaying = !isPlaying; + if (isPlaying) { + playBtn.innerHTML = ''; + playBtn.setAttribute('aria-label', 'Pause sample episode audio'); + + playInterval = setInterval(() => { + currentSeconds += 1; + if (currentSeconds > 1458) currentSeconds = 0; + const mins = Math.floor(currentSeconds / 60); + const secs = (currentSeconds % 60).toString().padStart(2, '0'); + if (playerTime) playerTime.textContent = `${mins}:${secs} / 24:18`; + if (playerTrackFill) { + const pct = Math.min(100, Math.max(0, (currentSeconds / 1458) * 100)); + playerTrackFill.style.width = `${pct}%`; + } + }, 1000); + } else { + clearInterval(playInterval); + playBtn.innerHTML = ''; + playBtn.setAttribute('aria-label', 'Play sample episode audio'); + } + }); + } }); + diff --git a/index.html b/index.html index aedb50e..23a3f94 100644 --- a/index.html +++ b/index.html @@ -107,6 +107,7 @@ Before & After Projects Service Areas + Podcast & Webinar Reviews Contact @@ -137,6 +138,7 @@ Before & After Projects Service Areas + Podcast & Webinar Customer Reviews Contact Us
@@ -960,6 +962,147 @@
+ +
+
+
+
+ + + High Desert Educational Hub + +
+

The High Desert Yard Podcast & Webinars

+

+ Get expert yard maintenance tactics, LA County fire code compliance secrets, and desert xeriscaping strategies directly from our crew. Tune in or register for our next free live masterclass. +

+
+ +
+ +
+
+
+ + + Weekly Podcast Series + + New Episodes Every Tuesday +
+ + + +
+ +
+

High Desert Yard Talk

+

+ Hosted by the Next Gen crew. We break down the real science of desert yard survival: dealing with 60 MPH Palmdale windstorms, preventing tumbleweed blow-ins, and avoiding $5,000 county weed abatement fines. +

+ + +
+
+ LATEST EPISODE #14 + 24 Min Listen +
+

"Beating the June 1st Fire Clearance Deadline in Palmdale & Lancaster"

+ +
+ +
+
+
+ 0:00 / 24:18 +
+
+ + +
+ Stream Free On: +
+ + + Spotify + + + + Apple + + + + YouTube + +
+
+
+
+ + +
+
+
+ + + Free Interactive Webinar + + Live Q&A Session +
+ + + +
+ +
+

Antelope Valley Fire-Safe Yard Masterclass

+

+ Learn step-by-step how to prepare your property for official county inspections and cut annual maintenance time by 80% without destroying your budget. +

+ + +
+
+ +
+ Next Live Broadcast: + Thursday, October 15, 2026 • 6:30 PM PST +
+
+ +
    +
  • LA County 100-Ft Brush Clearance rules decoded
    • +
  • Desert Xeriscaping vs. Artificial Turf cost breakdown
    • +
  • Live open Q&A directly with Jose & senior crew
    • +
+
+ + +
+ + + Reserve Free Webinar Seat + + 100% Free • Includes PDF Fire Clearance Checklist +
+
+
+
+
+
+
diff --git a/styles.css b/styles.css index d018914..4d61ce6 100644 --- a/styles.css +++ b/styles.css @@ -2676,3 +2676,363 @@ section#projects { gap: 6px; } + +/* ========================================================================== + PODCAST & WEBINAR MEDIA SECTION (100% Vector & Pure CSS - No Images) + ========================================================================== */ +.media-hub-section { + background: var(--bg-subtle); + position: relative; + padding: 90px 0; +} + +.media-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + margin-top: 20px; +} + +.media-card { + background: var(--bg-card); + border-radius: 16px; + border: 1.5px solid var(--border-card); + padding: 36px; + box-shadow: var(--shadow-card); + display: flex; + flex-direction: column; + justify-content: space-between; + transition: transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth); + position: relative; + overflow: hidden; +} + +.media-card:hover { + transform: translateY(-4px); + border-color: var(--neon-green); + box-shadow: 0 16px 36px rgba(0, 200, 83, 0.12); +} + +.media-card-top { + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 22px; +} + +.media-badge-group { + display: flex; + flex-direction: column; + gap: 6px; +} + +.media-badge { + display: inline-flex; + align-items: center; + font-size: 0.78rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.5px; + padding: 5px 12px; + border-radius: 50px; +} + +.podcast-badge { + background: rgba(0, 200, 83, 0.12); + color: var(--neon-text-shade); + border: 1px solid rgba(0, 200, 83, 0.3); +} + +.webinar-badge { + background: rgba(239, 68, 68, 0.1); + color: #dc2626; + border: 1px solid rgba(239, 68, 68, 0.25); +} + +.pulse-live-dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: #ef4444; + margin-right: 6px; + display: inline-block; + box-shadow: 0 0 0 rgba(239, 68, 68, 0.7); + animation: pulse-dot 1.8s infinite; +} + +@keyframes pulse-dot { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); + } + 70% { + transform: scale(1.1); + box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); + } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); + } +} + +.media-badge-sub { + font-size: 0.75rem; + color: var(--text-muted); + font-weight: 600; +} + +/* Pure CSS Soundwave Animation */ +.soundwave-container { + display: flex; + align-items: center; + gap: 3px; + height: 28px; + padding: 4px 8px; + background: #080c09; + border-radius: 8px; + border: 1px solid rgba(0, 200, 83, 0.25); +} + +.soundwave-bar { + width: 3px; + background: var(--neon-lime); + border-radius: 3px; + animation: bounce-soundwave 1.2s infinite ease-in-out alternate; +} + +.bar-1 { height: 8px; animation-delay: 0.1s; } +.bar-2 { height: 18px; animation-delay: 0.3s; } +.bar-3 { height: 12px; animation-delay: 0.2s; } +.bar-4 { height: 22px; animation-delay: 0.4s; } +.bar-5 { height: 14px; animation-delay: 0.25s; } +.bar-6 { height: 20px; animation-delay: 0.35s; } +.bar-7 { height: 10px; animation-delay: 0.15s; } +.bar-8 { height: 16px; animation-delay: 0.45s; } + +@keyframes bounce-soundwave { + 0% { transform: scaleY(0.4); } + 100% { transform: scaleY(1.2); } +} + +.webinar-icon-wrap { + width: 44px; + height: 44px; + border-radius: 10px; + background: rgba(0, 200, 83, 0.1); + color: var(--neon-text-shade); + border: 1px solid rgba(0, 200, 83, 0.2); + display: flex; + align-items: center; + justify-content: center; +} + +.media-title { + font-size: 1.45rem; + font-weight: 800; + color: var(--text-primary); + margin-bottom: 10px; + line-height: 1.3; +} + +.media-desc { + font-size: 0.95rem; + color: var(--text-secondary); + line-height: 1.6; + margin-bottom: 20px; +} + +/* Episode Player Box */ +.episode-box { + background: #080c09; + border-radius: 12px; + padding: 20px; + margin-bottom: 20px; + border: 1px solid rgba(0, 200, 83, 0.25); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); +} + +.episode-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; +} + +.episode-tag { + font-size: 0.72rem; + font-weight: 800; + color: var(--neon-lime); + letter-spacing: 0.5px; +} + +.episode-length { + font-size: 0.72rem; + color: #94a3b8; +} + +.episode-name { + font-size: 0.96rem; + color: #ffffff; + font-weight: 700; + margin-bottom: 14px; + line-height: 1.4; +} + +.mini-player-bar { + display: flex; + align-items: center; + gap: 12px; +} + +.player-toggle-btn { + width: 34px; + height: 34px; + border-radius: 50%; + background: var(--neon-green); + color: #080c09; + display: flex; + align-items: center; + justify-content: center; + border: none; + cursor: pointer; + flex-shrink: 0; + transition: transform 0.15s ease, background 0.15s ease; +} + +.player-toggle-btn:hover { + background: var(--neon-lime); + transform: scale(1.08); +} + +.player-track { + flex: 1; + height: 6px; + background: rgba(255, 255, 255, 0.15); + border-radius: 10px; + overflow: hidden; + position: relative; +} + +.player-fill { + width: 35%; + height: 100%; + background: var(--neon-lime); + border-radius: 10px; +} + +.player-time { + font-size: 0.75rem; + color: #94a3b8; + font-family: monospace; +} + +/* Platform Strip */ +.platform-strip { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: 10px; + padding-top: 14px; + border-top: 1px solid var(--border-subtle); +} + +.platform-label { + font-size: 0.8rem; + font-weight: 700; + color: var(--text-muted); +} + +.platform-icons { + display: flex; + gap: 8px; +} + +.platform-chip { + display: inline-flex; + align-items: center; + gap: 5px; + padding: 6px 12px; + border-radius: 20px; + background: var(--bg-surface); + border: 1px solid var(--border-subtle); + color: var(--text-primary); + font-size: 0.76rem; + font-weight: 700; + text-decoration: none; + transition: all 0.15s ease; +} + +.platform-chip:hover { + background: var(--bg-card-hover); + border-color: var(--neon-green); + color: var(--neon-text-shade); + transform: translateY(-1px); +} + +/* Webinar Schedule Box */ +.webinar-schedule-box { + background: var(--bg-surface); + border: 1px solid var(--border-subtle); + border-radius: 12px; + padding: 20px; + margin-bottom: 20px; +} + +.webinar-date-row { + display: flex; + align-items: flex-start; + gap: 10px; + margin-bottom: 14px; + padding-bottom: 12px; + border-bottom: 1px solid var(--border-subtle); +} + +.webinar-date-row strong { + display: block; + font-size: 0.88rem; + color: var(--text-primary); +} + +.webinar-date-row span { + display: block; + font-size: 0.84rem; + color: var(--neon-text-shade); + font-weight: 700; +} + +.webinar-bullets { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 8px; +} + +.webinar-bullets li { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.85rem; + color: var(--text-secondary); +} + +.webinar-action-row { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.webinar-guarantee { + font-size: 0.75rem; + color: var(--text-muted); + text-align: center; +} + +@media (max-width: 900px) { + .media-grid { + grid-template-columns: 1fr; + } +} diff --git a/translations.js b/translations.js index 43734b0..4f712dd 100644 --- a/translations.js +++ b/translations.js @@ -41,6 +41,10 @@ en: 'Ready To Reclaim Your High Desert Yard?', es: '¿Listo Para Recuperar Su Jardín del Alto Desierto?' }, + "media.title": { + en: 'The High Desert Yard Podcast & Webinars', + es: 'El Podcast y Seminarios Web de Jardinería del Alto Desierto' + }, "modal.title": { en: 'Request Your Free Estimate', es: 'Solicite Su Presupuesto Gratis' @@ -57,6 +61,30 @@ "Direct: (661) 743-9600": "Directo: (661) 743-9600", "24-Hr Text Dispatch Available": "Despacho por Mensaje 24 Horas", + // --- Media / Podcast & Webinar --- + "High Desert Educational Hub": "Centro Educativo del Alto Desierto", + "Weekly Podcast Series": "Serie Semanal de Podcast", + "New Episodes Every Tuesday": "Nuevos Episodios Cada Martes", + "High Desert Yard Talk": "Charla de Jardinería del Alto Desierto", + "Free Interactive Webinar": "Seminario Web Interactivo Gratuito", + "Live Q&A Session": "Sesión de Preguntas y Respuestas en Vivo", + "Antelope Valley Fire-Safe Yard Masterclass": "Clase Magistral de Jardines Seguros Contra Incendios en Antelope Valley", + "Reserve Free Webinar Seat": "Reservar Lugar Gratis en el Seminario Web", + "Podcast & Webinar": "Podcast y Seminario Web", + "Get expert yard maintenance tactics, LA County fire code compliance secrets, and desert xeriscaping strategies directly from our crew. Tune in or register for our next free live masterclass.": "Obtenga tácticas de mantenimiento de jardines, secretos de cumplimiento contra incendios del Condado de LA y estrategias de paisajismo desértico. Sintonice o regístrese gratis.", + "Hosted by the Next Gen crew. We break down the real science of desert yard survival: dealing with 60 MPH Palmdale windstorms, preventing tumbleweed blow-ins, and avoiding $5,000 county weed abatement fines.": "Presentado por el equipo de Next Gen. Explicamos la supervivencia del jardín desértico: tormentas de viento de 60 MPH en Palmdale, prevención de rodadoras y cómo evitar multas del condado de $5,000.", + "LATEST EPISODE #14": "ÚLTIMO EPISODIO #14", + "24 Min Listen": "Escucha de 24 Min", + "\"Beating the June 1st Fire Clearance Deadline in Palmdale & Lancaster\"": "\"Superando el Plazo del 1 de Junio para el Desbroce contra Incendios en Palmdale y Lancaster\"", + "Stream Free On:": "Transmita Gratis en:", + "Learn step-by-step how to prepare your property for official county inspections and cut annual maintenance time by 80% without destroying your budget.": "Aprenda paso a paso cómo preparar su propiedad para las inspecciones oficiales del condado y reducir el tiempo de mantenimiento anual en un 80% sin exceder su presupuesto.", + "Next Live Broadcast:": "Próxima Transmisión en Vivo:", + "Thursday, October 15, 2026 • 6:30 PM PST": "Jueves, 15 de Octubre, 2026 • 6:30 PM PST", + "LA County 100-Ft Brush Clearance rules decoded": "Reglas de desbroce de 100 pies del condado de LA explicadas", + "Desert Xeriscaping vs. Artificial Turf cost breakdown": "Comparativa de costos: Paisajismo desértico vs. Césped artificial", + "Live open Q&A directly with Jose & senior crew": "Preguntas y respuestas en vivo directamente con José y el equipo", + "100% Free • Includes PDF Fire Clearance Checklist": "100% Gratis • Incluye Lista de Verificación en PDF", + // --- Navigation Links --- "Services": "Servicios", "Cost Calculator": "Calculadora de Costos",