File: /home/bigfreeodds/public_html/wp-content/themes/neon-kick-live/front-page.php
<?php
/**
* Neon Kick Live — Home / Front Page
* Template Name: Front Page
* data-page="home" — JS engine handles all rendering.
*
* @package NeonKickLive
*/
get_header();
?>
<header class="topbar">
<h1>BigFreeOdds</h1>
<div style="display:flex;gap:6px;align-items:center;">
<span id="refresh-status" style="font-size:10px;color:#8a8f99;letter-spacing:0.5px;margin-right:2px;">LIVE</span>
<button class="icon-btn" id="refresh-btn" aria-label="<?php esc_attr_e( 'Refresh scores', 'neon-kick-live' ); ?>" title="Refresh now">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v5h-5"/></svg>
</button>
<button class="icon-btn" aria-label="<?php esc_attr_e( 'Notifications', 'neon-kick-live' ); ?>">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h13l-2 5 2 5H3z"/><path d="M21 9v6"/></svg>
<span class="dot-red"></span>
</button>
<button class="icon-btn" aria-label="<?php esc_attr_e( 'Alerts', 'neon-kick-live' ); ?>">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 8a6 6 0 1 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9z"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>
</button>
</div>
</header>
<!-- Date strip — dynamically generated in PHP centred on today -->
<div class="date-strip">
<?php
// Day code map (PHP date('w'): 0=Sun … 6=Sat)
$day_codes = array( 0 => 'SU', 1 => 'MO', 2 => 'TU', 3 => 'WE', 4 => 'TH', 5 => 'FR', 6 => 'SA' );
$today_ts = strtotime( 'today' );
$today_code = $day_codes[ (int) date( 'w', $today_ts ) ];
// Special "LIVE" chip first.
echo '<div class="date-chip" data-day="LIVE"><small>NOW</small><strong>LIVE</strong></div>';
// Show 3 days before today through 4 days after (8 chips total).
for ( $offset = -3; $offset <= 4; $offset++ ) :
$ts = strtotime( "{$offset} days", $today_ts );
$code = $day_codes[ (int) date( 'w', $ts ) ];
$day_num = date( 'j', $ts );
$is_today = ( $offset === 0 );
$label = $is_today ? 'TODAY' : (string) $day_num;
$class = 'date-chip' . ( $is_today ? ' live' : '' );
?>
<div class="<?php echo esc_attr( $class ); ?>" data-day="<?php echo esc_attr( $code ); ?>">
<small><?php echo esc_html( $code ); ?></small>
<strong><?php echo esc_html( $label ); ?></strong>
</div>
<?php endfor; ?>
</div>
<!-- Hot matches carousel -->
<div class="section-title">
<h2>HOT MATCHES</h2>
<button id="hot-next" class="hot-arrow" aria-label="<?php esc_attr_e( 'Next', 'neon-kick-live' ); ?>">›</button>
</div>
<div class="hot-section">
<div class="hot-row" id="hot-row" data-skeleton="1">
<div class="hot-card skeleton-card" aria-hidden="true">
<div class="team"><span class="skeleton skeleton-logo skeleton-logo--lg"></span><div><div class="skeleton skeleton-text skeleton-text--med"></div></div></div>
<div class="score"><span class="skeleton skeleton-score"></span><small class="skeleton skeleton-text skeleton-text--tiny"></small></div>
<div class="team right"><div><div class="skeleton skeleton-text skeleton-text--med"></div></div><span class="skeleton skeleton-logo skeleton-logo--lg"></span></div>
</div>
<div class="hot-card skeleton-card" aria-hidden="true">
<div class="team"><span class="skeleton skeleton-logo skeleton-logo--lg"></span><div><div class="skeleton skeleton-text skeleton-text--med"></div></div></div>
<div class="score"><span class="skeleton skeleton-score"></span><small class="skeleton skeleton-text skeleton-text--tiny"></small></div>
<div class="team right"><div><div class="skeleton skeleton-text skeleton-text--med"></div></div><span class="skeleton skeleton-logo skeleton-logo--lg"></span></div>
</div>
<div class="hot-card skeleton-card" aria-hidden="true">
<div class="team"><span class="skeleton skeleton-logo skeleton-logo--lg"></span><div><div class="skeleton skeleton-text skeleton-text--med"></div></div></div>
<div class="score"><span class="skeleton skeleton-score"></span><small class="skeleton skeleton-text skeleton-text--tiny"></small></div>
<div class="team right"><div><div class="skeleton skeleton-text skeleton-text--med"></div></div><span class="skeleton skeleton-logo skeleton-logo--lg"></span></div>
</div>
</div>
<div class="hot-dots" id="hot-dots"></div>
</div>
<!-- League match lists — populated by JS -->
<div id="leagues-list" data-skeleton="1">
<div class="league-section">
<div class="section-title">
<div class="league-name"><span class="league-badge"></span><span class="skeleton skeleton-text skeleton-text--med"></span></div>
<span class="skeleton skeleton-text skeleton-text--tiny"></span>
</div>
<div class="match-list">
<div class="match-row skeleton-row" aria-hidden="true">
<span class="skeleton skeleton-dot"></span>
<div class="home"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-text skeleton-text--short"></span></div>
<div class="center"><span class="skeleton skeleton-pill"></span><span class="skeleton skeleton-text skeleton-text--tiny"></span></div>
<div class="away"><span class="skeleton skeleton-text skeleton-text--short"></span><span class="skeleton skeleton-logo"></span></div>
<span class="skeleton skeleton-star"></span>
</div>
<div class="match-row skeleton-row" aria-hidden="true">
<span class="skeleton skeleton-dot"></span>
<div class="home"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-text skeleton-text--short"></span></div>
<div class="center"><span class="skeleton skeleton-pill"></span><span class="skeleton skeleton-text skeleton-text--tiny"></span></div>
<div class="away"><span class="skeleton skeleton-text skeleton-text--short"></span><span class="skeleton skeleton-logo"></span></div>
<span class="skeleton skeleton-star"></span>
</div>
<div class="match-row skeleton-row" aria-hidden="true">
<span class="skeleton skeleton-dot"></span>
<div class="home"><span class="skeleton skeleton-logo"></span><span class="skeleton skeleton-text skeleton-text--short"></span></div>
<div class="center"><span class="skeleton skeleton-pill"></span><span class="skeleton skeleton-text skeleton-text--tiny"></span></div>
<div class="away"><span class="skeleton skeleton-text skeleton-text--short"></span><span class="skeleton skeleton-logo"></span></div>
<span class="skeleton skeleton-star"></span>
</div>
</div>
</div>
</div>
<!-- ALL LIVE floating toggle -->
<div class="all-live-wrap">
<button class="all-live off" id="all-live">ALL LIVE <span class="switch"></span></button>
</div>
<?php get_footer(); ?>