localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ticker: replace LiveWire with dual-row neon ticker (news + events)

Browse Source 
Row 1 (Live Wire, scrolls →): most recent imported + AI-rewritten
articles, neon-green label, monospaced [HH:MM] [SOURCE_CODE] prefix.
Row 2 (On Calendar, scrolls ←, slower): upcoming events from
bb.events (confirmed/tentative, start_date >= today), neon-cyan
label, [Mon DD] [SHORT_NAME] prefix.

Defensive: each query is in its own try/catch so a partial failure
renders an empty row rather than crashing the page — that was the
silent build crash that took down the prior DoubleTicker incarnation.
If BOTH queries return zero rows we render nothing instead of two
blank bars.

CSS tokens added to redesign-tokens.css:
- bb-marquee--reverse + bb-marquee--slow modifiers
- .bb-neon-bar / .bb-neon-label / .bb-neon-time / .bb-neon-code
  (scoped class names so this is the ONLY place on the site that
  uses the neon palette — rest of the site keeps dark-navy + blue)

User cancelled the wholesale neon redesign; only the dual-ticker
keeps the neon green/cyan styling.
This commit is contained in:
Ryan Salazar
2026-05-20 07:02:15 +00:00
parent 5c3432915a
commit a9823b1d8a
4 changed files with 247 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
public/previews/neon.html
View File

@@ -1,212 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Broadcast Beat — Neon Redesign Preview</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');
:root{
--neon-primary:#00ff9f;--neon-primary-light:#33ffb3;--neon-secondary:#00d4ff;--neon-accent:#c400ff;
--bg-dark:#050a08;--bg-darker:#030605;--bg-card:#0a1410;
--text-primary:#f0f0f0;--text-secondary:#b0b0b0;--text-muted:#707070;
--space-sm:1rem;--space-md:1.5rem;--space-lg:2rem;--space-xl:3rem;--space-2xl:4rem;
--radius-md:8px;--radius-lg:12px;--transition:all 0.3s cubic-bezier(0.4,0,0.2,1)
}
*{transition:var(--transition);-webkit-font-smoothing:antialiased;box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto','Helvetica Neue',sans-serif;background:var(--bg-dark);color:var(--text-primary);line-height:1.6;margin:0}
h1,h2,h3,h4,h5,h6{font-family:'Space Grotesk',sans-serif;font-weight:700;line-height:1.2;margin:0 0 1rem 0;letter-spacing:0.05em}
h1{font-size:clamp(2rem,8vw,3.5rem);background:linear-gradient(135deg,var(--neon-primary),var(--neon-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:1.5rem}
h2{font-size:clamp(1.5rem,5vw,2.5rem);color:var(--text-primary);padding-bottom:0.75rem;position:relative}
h2::after{content:'';position:absolute;bottom:0;left:0;width:60px;height:3px;background:linear-gradient(90deg,var(--neon-primary),var(--neon-secondary))}
h3{font-size:1.5rem;color:var(--neon-secondary)}
p{margin:0 0 1.5rem 0}
p.lead{font-size:1.25rem;color:var(--text-secondary);line-height:1.8}
strong,b{font-weight:700;color:var(--neon-primary)}
a{color:var(--neon-primary);text-decoration:none;position:relative}
a:hover{color:var(--neon-primary-light);text-shadow:0 0 10px rgba(0,255,159,0.5)}
nav.navbar{background:linear-gradient(180deg,rgba(0,0,0,0.9),rgba(5,10,8,0.85));border-bottom:2px solid rgba(0,255,159,0.2);padding:var(--space-md) var(--space-lg);position:sticky;top:0;z-index:1000;backdrop-filter:blur(10px)}
.navbar-container{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg)}
.nav-logo{font-size:1.5rem;font-weight:700;background:linear-gradient(135deg,var(--neon-primary),var(--neon-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-transform:uppercase;letter-spacing:0.1em}
.nav-menu{display:flex;gap:var(--space-lg);list-style:none;margin:0;padding:0}
.nav-item a{color:var(--text-primary);padding:var(--space-sm) var(--space-md);text-transform:uppercase;font-size:0.9rem;letter-spacing:0.08em;font-weight:500}
.nav-item a:hover{color:var(--neon-primary)}
.hero{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:var(--space-2xl) var(--space-lg);position:relative;overflow:hidden;background:linear-gradient(135deg,var(--bg-dark) 0%,var(--bg-darker) 50%,rgba(0,255,159,0.04) 100%)}
.hero::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,255,159,0.10) 0%,transparent 70%);animation:float 20s ease-in-out infinite;pointer-events:none}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,50px)}}
.hero-content{position:relative;z-index:2;text-align:center;max-width:900px}
.hero .tagline{font-size:clamp(1.1rem,3vw,1.5rem);color:var(--neon-secondary);margin-bottom:var(--space-lg);font-weight:500}
.cta-group{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap;margin-top:var(--space-xl)}
.cta-button{padding:var(--space-md) var(--space-lg);font-size:1.05rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;border-radius:var(--radius-lg);cursor:pointer;border:none;text-decoration:none;display:inline-block}
.cta-button.primary{background:linear-gradient(135deg,var(--neon-primary),var(--neon-secondary));color:var(--bg-dark)}
.cta-button.primary:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(0,255,159,0.4)}
.cta-button.secondary{background:transparent;border:2px solid var(--neon-primary);color:var(--neon-primary)}
.cta-button.secondary:hover{background:rgba(0,255,159,0.1);box-shadow:0 0 20px rgba(0,255,159,0.3)}
.container{max-width:1400px;margin:0 auto;padding:var(--space-lg)}
section{padding:var(--space-2xl) var(--space-lg);border-top:1px solid rgba(0,255,159,0.1)}
section:first-of-type{border-top:none}
.grid{display:grid;gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:linear-gradient(135deg,rgba(10,20,16,0.8),rgba(15,22,18,0.8));border:1px solid rgba(0,255,159,0.15);border-radius:var(--radius-lg);padding:0;position:relative;backdrop-filter:blur(10px);overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--neon-primary),transparent);opacity:0.5}
.card:hover{border-color:var(--neon-primary);box-shadow:0 10px 30px rgba(0,255,159,0.12);transform:translateY(-6px)}
.card-img{width:100%;height:160px;background:linear-gradient(135deg,#0a1a14,#0e2a20);position:relative;display:flex;align-items:center;justify-content:center;color:rgba(0,255,159,0.25);font-size:0.7rem;letter-spacing:0.15em;text-transform:uppercase}
.card-body{padding:var(--space-md)}
.card-cat{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.18em;color:var(--neon-primary);margin-bottom:0.5rem}
.card-title{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text-primary);margin:0 0 0.5rem 0;line-height:1.3}
.card-excerpt{font-size:0.85rem;color:var(--text-secondary);line-height:1.55;margin:0 0 0.75rem 0}
.card-meta{font-size:0.7rem;color:var(--text-muted);letter-spacing:0.06em}
.ticker{background:rgba(0,0,0,0.4);border-top:1px solid rgba(0,255,159,0.15);border-bottom:1px solid rgba(0,255,159,0.15);padding:0.6rem 0;font-size:0.8rem;color:var(--text-secondary);font-family:'IBM Plex Mono','SF Mono',monospace;letter-spacing:0.05em}
.ticker-content{max-width:1400px;margin:0 auto;padding:0 var(--space-lg);display:flex;align-items:center;gap:1.5rem;overflow:hidden;white-space:nowrap}
.ticker-label{background:var(--neon-primary);color:var(--bg-dark);padding:0.15rem 0.5rem;font-weight:700;font-size:0.65rem;letter-spacing:0.15em;border-radius:3px;flex-shrink:0}
footer{background:linear-gradient(180deg,rgba(0,0,0,0.5),rgba(5,10,8,0.8));border-top:2px solid var(--neon-primary);padding:var(--space-xl) var(--space-lg);margin-top:var(--space-2xl);color:var(--text-secondary)}
.footer-container{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-lg)}
.footer-h{color:var(--neon-secondary);font-family:'Space Grotesk',sans-serif;font-size:0.85rem;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:0.75rem}
footer a{color:var(--text-secondary);display:block;padding:0.2rem 0;font-size:0.85rem}
footer a:hover{color:var(--neon-primary)}
.preview-banner{background:linear-gradient(90deg,rgba(196,0,255,0.15),rgba(0,212,255,0.15));border-bottom:1px solid var(--neon-accent);text-align:center;padding:0.6rem;font-size:0.8rem;color:var(--neon-accent);font-weight:600;letter-spacing:0.1em;text-transform:uppercase}
@media (max-width:768px){.container,section{padding:var(--space-md)}.grid{grid-template-columns:1fr}.cta-group{flex-direction:column}.cta-button{width:100%}.nav-menu{display:none}}
</style>
</head>
<body>
<div class="preview-banner">Preview — Neon Redesign · NOT live · review only</div>
<nav class="navbar">
<div class="navbar-container">
<div class="nav-logo">Broadcast Beat</div>
<ul class="nav-menu">
<li class="nav-item"><a href="#">News</a></li>
<li class="nav-item"><a href="#">Show Coverage</a></li>
<li class="nav-item"><a href="#">Technology</a></li>
<li class="nav-item"><a href="#">Gear</a></li>
<li class="nav-item"><a href="#">Forum</a></li>
</ul>
</div>
</nav>
<div class="ticker">
<div class="ticker-content">
<span class="ticker-label">LIVE WIRE</span>
<span>NAB 2027 LAS VEGAS · APR 11</span>
<span style="color:var(--text-muted)">|</span>
<span>IBC 2026 AMSTERDAM · SEP 11</span>
<span style="color:var(--text-muted)">|</span>
<span>26,103 ARTICLES INDEXED</span>
<span style="color:var(--text-muted)">|</span>
<span>v2.0.0</span>
</div>
</div>
<section class="hero">
<div class="hero-content">
<h1>Broadcast Engineering, Reimagined</h1>
<p class="tagline">Real-time insights, cutting-edge tech, vibrant community.</p>
<p class="lead">The digital platform for broadcast engineering professionals. Breaking news, deep-dive features, and industry spotlights from NAB to IBC and beyond.</p>
<div class="cta-group">
<a href="#" class="cta-button primary">Explore News</a>
<a href="#" class="cta-button secondary">Join the Crew Lounge</a>
</div>
</div>
</section>
<section>
<div class="container">
<h2>Industry News</h2>
<p style="color:var(--text-secondary);margin-bottom:var(--space-xl)">Latest from the broadcast technology beat.</p>
<div class="grid">
<article class="card">
<div class="card-img">FEATURED IMAGE</div>
<div class="card-body">
<div class="card-cat">Streaming &amp; IP</div>
<h3 class="card-title">Telestream Expands Its Cloud Services with the Introduction of UP</h3>
<p class="card-excerpt">New cloud-native platform extends Telestream Cloud Services to support Global Ingest, automation, review, and real-time monitoring.</p>
<div class="card-meta">Ryan Salazar · 4 min read</div>
</div>
</article>
<article class="card">
<div class="card-img">FEATURED IMAGE</div>
<div class="card-body">
<div class="card-cat">Live Production</div>
<h3 class="card-title">Emergent Launches Fusion: The Interactive Anything Platform</h3>
<p class="card-excerpt">No-code application builder designed to transform complex live data into immersive interactive storytelling experiences.</p>
<div class="card-meta">Ryan Salazar · 3 min read</div>
</div>
</article>
<article class="card">
<div class="card-img">FEATURED IMAGE</div>
<div class="card-body">
<div class="card-cat">Audio</div>
<h3 class="card-title">Calrec Audio Unveils Brio Duet Console for Mid-Tier Broadcast Studios</h3>
<p class="card-excerpt">A compact mid-tier mixing solution targeting regional broadcasters and corporate AV deployments.</p>
<div class="card-meta">Ryan Salazar · 5 min read</div>
</div>
</article>
<article class="card">
<div class="card-img">FEATURED IMAGE</div>
<div class="card-body">
<div class="card-cat">Cloud &amp; Workflow</div>
<h3 class="card-title">GlobalM Introduces Distributed Video Gateway Architecture</h3>
<p class="card-excerpt">New distributed architecture addresses the growing demand for scalable, resilient live IP transport solutions.</p>
<div class="card-meta">Ryan Salazar · 3 min read</div>
</div>
</article>
<article class="card">
<div class="card-img">FEATURED IMAGE</div>
<div class="card-body">
<div class="card-cat">Show Coverage</div>
<h3 class="card-title">Viaccess-Orca Brings Efficiency to NAB 2026</h3>
<p class="card-excerpt">Purpose-driven solutions designed to help broadcasters reduce operational costs while improving content monetization.</p>
<div class="card-meta">Ryan Salazar · 4 min read</div>
</div>
</article>
<article class="card">
<div class="card-img">FEATURED IMAGE</div>
<div class="card-body">
<div class="card-cat">Cameras &amp; Capture</div>
<h3 class="card-title">Sony BRC-AM7 + HXC-FZ90 Launch Reshapes Studio PTZ Workflows</h3>
<p class="card-excerpt">Two new system cameras anchor Sony's spring broadcast announcement, targeting houses of worship and corporate live.</p>
<div class="card-meta">Ryan Salazar · 6 min read</div>
</div>
</article>
</div>
</div>
</section>
<footer>
<div class="footer-container">
<div>
<div class="footer-h">Broadcast Beat</div>
<p style="font-size:0.85rem;color:var(--text-muted)">The digital platform for broadcast engineering professionals.</p>
</div>
<div>
<div class="footer-h">Sections</div>
<a href="#">Industry News</a>
<a href="#">Show Coverage</a>
<a href="#">Production Technology</a>
<a href="#">Forum</a>
</div>
<div>
<div class="footer-h">Network</div>
<a href="#">Relevant Media Properties</a>
<a href="#">AV Beat</a>
<a href="#">The Crew Grid</a>
</div>
<div>
<div class="footer-h">Contact</div>
<a href="#">Advertise</a>
<a href="#">Editorial</a>
<a href="#">About</a>
</div>
</div>
</footer>
</body>
</html>