Files
ai-podcast/website/index.html
tcpsyn d14000887c Add landing page with hero section, subscribe links, and dark theme
Static site for lukeattheroost.com with cover art, phone number,
subscribe buttons (Spotify, YouTube, Apple, RSS), and OG meta tags.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-06 12:49:12 -07:00

107 lines
6.4 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Luke at the Roost — The ONLY radio show where Luke gives AI life advice</title>
<meta name="description" content="The ONLY radio show where Luke gives AI life advice. Call in: 208-439-LUKE">
<!-- OG / Social -->
<meta property="og:title" content="Luke at the Roost">
<meta property="og:description" content="The ONLY radio show where Luke gives AI life advice. Call in: 208-439-LUKE">
<meta property="og:image" content="https://podcast.macneilmediagroup.com/media/podcasts/LukeAtTheRoost/cover_feed.png">
<meta property="og:url" content="https://lukeattheroost.com">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Luke at the Roost">
<meta name="twitter:description" content="The ONLY radio show where Luke gives AI life advice. Call in: 208-439-LUKE">
<meta name="twitter:image" content="https://podcast.macneilmediagroup.com/media/podcasts/LukeAtTheRoost/cover_feed.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="https://podcast.macneilmediagroup.com/media/podcasts/LukeAtTheRoost/cover_feed.png">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Hero -->
<section class="hero">
<div class="hero-inner">
<img
class="cover-art"
src="https://podcast.macneilmediagroup.com/media/podcasts/LukeAtTheRoost/cover_feed.png"
alt="Luke at the Roost cover art"
>
<div class="hero-info">
<h1>Luke at the Roost</h1>
<p class="tagline">The ONLY radio show where Luke gives AI life advice.</p>
<div class="phone">
<span class="phone-label">Call in live</span>
<span class="phone-number">208-439-LUKE</span>
<span class="phone-digits">(208-439-5853)</span>
</div>
<div class="subscribe-row">
<a href="https://open.spotify.com/show/0ZrpMigG1fo0CCN7F4YmuF?si=f990713adce84ba4" target="_blank" rel="noopener" class="subscribe-btn btn-spotify">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/></svg>
Spotify
</a>
<a href="https://www.youtube.com/watch?v=xryGLifMBTY&list=PLGq4uZyNV1yYH_rcitTTPVysPbC6-7pe-" target="_blank" rel="noopener" class="subscribe-btn btn-youtube">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
YouTube
</a>
<a href="#" class="subscribe-btn btn-apple" title="Coming soon to Apple Podcasts">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5.34 0A5.328 5.328 0 0 0 0 5.34v13.32A5.328 5.328 0 0 0 5.34 24h13.32A5.328 5.328 0 0 0 24 18.66V5.34A5.328 5.328 0 0 0 18.66 0zm6.525 2.568c2.336 0 4.448.902 4.448 3.545 0 1.497-.89 2.67-1.916 3.545-.663.566-.795 .84-.795 1.347 0 .6.397 1.173.894 1.722 1.417 1.564 1.96 2.853 1.96 4.448 0 3.063-2.673 4.257-5.165 4.257-.315 0-.658-.02-.994-.063-1.523-.195-2.86-.9-3.632-.9-.82 0-1.98.623-3.377.87A5.715 5.715 0 0 1 3.15 21.4c-1.27 0-2.1-.96-2.1-2.663 0-1.2.6-2.7 1.845-4.29.63-.81 1.62-1.83 2.91-2.31-.06-.6-.09-1.14-.09-1.62 0-4.28 2.76-7.95 6.15-7.95z"/></svg>
Apple
</a>
<a href="https://podcast.macneilmediagroup.com/@LukeAtTheRoost/feed.xml" target="_blank" rel="noopener" class="subscribe-btn btn-rss">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6.503 20.752c0 1.794-1.456 3.248-3.251 3.248S0 22.546 0 20.752s1.456-3.248 3.252-3.248 3.251 1.454 3.251 3.248zM.002 9.473v4.594c5.508.163 9.929 4.584 10.092 10.091h4.594C14.524 16.21 7.849 9.636.002 9.473zM.006 0v4.604C10.81 4.77 19.23 13.19 19.396 24h4.604C23.834 10.952 13.054.166.006 0z"/></svg>
RSS
</a>
</div>
</div>
</div>
</section>
<!-- Episodes -->
<section class="episodes-section">
<h2>Episodes</h2>
<div class="episodes-list" id="episodes-list">
<div class="episodes-loading">Loading episodes...</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-links">
<a href="https://open.spotify.com/show/0ZrpMigG1fo0CCN7F4YmuF?si=f990713adce84ba4" target="_blank" rel="noopener">Spotify</a>
<a href="https://www.youtube.com/watch?v=xryGLifMBTY&list=PLGq4uZyNV1yYH_rcitTTPVysPbC6-7pe-" target="_blank" rel="noopener">YouTube</a>
<a href="https://podcast.macneilmediagroup.com/@LukeAtTheRoost/feed.xml" target="_blank" rel="noopener">RSS</a>
</div>
<p>&copy; 2026 Luke at the Roost</p>
</footer>
<!-- Sticky Audio Player -->
<div class="sticky-player" id="sticky-player">
<div class="player-inner">
<button class="player-play-btn" id="player-play-btn" aria-label="Play/Pause">
<svg class="icon-play" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
<svg class="icon-pause" viewBox="0 0 24 24" style="display:none"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button>
<div class="player-info">
<div class="player-title" id="player-title"></div>
<div class="player-progress-row">
<div class="player-progress" id="player-progress">
<div class="player-progress-fill" id="player-progress-fill"></div>
</div>
<span class="player-time" id="player-time">0:00 / 0:00</span>
</div>
</div>
</div>
</div>
<audio id="audio-element" preload="none"></audio>
<script src="js/app.js"></script>
</body>
</html>