- v1.1.0 - Redesign

This commit is contained in:
Ty Clifford
2026-06-18 12:50:44 -04:00
parent f1844abad5
commit 66f93757b6
14 changed files with 2107 additions and 387 deletions
+162 -111
View File
@@ -2,59 +2,79 @@
require_once __DIR__.'/includes/boot.php';
$pageTitle='Discover Keyser WV — The Friendliest City in the U.S.A.';
$activeNav='home';
$alerts=qall("SELECT a.*,b.name bname,b.id bid,b.slug bslug FROM alerts a JOIN businesses b ON b.id=a.business_id WHERE a.is_active=1 ORDER BY a.created_at DESC LIMIT 5");
$featured=qall("SELECT b.*,c.name cat,c.icon cat_icon,COALESCE(AVG(r.rating),0) avg,COUNT(r.id) rcnt FROM businesses b JOIN categories c ON c.id=b.category_id LEFT JOIN reviews r ON r.business_id=b.id WHERE b.is_active=1 AND b.is_featured=1 GROUP BY b.id ORDER BY avg DESC,rcnt DESC LIMIT 6");
$alerts=qall("SELECT a.*,b.name bname,b.id bid,b.slug bslug FROM alerts a JOIN businesses b ON b.id=a.business_id WHERE a.is_active=1 ORDER BY a.created_at DESC LIMIT 4");
$featured=qall("SELECT b.*,c.name cat,c.icon cat_icon,COALESCE(AVG(r.rating),0) avg,COUNT(r.id) rcnt FROM businesses b JOIN categories c ON c.id=b.category_id LEFT JOIN reviews r ON r.business_id=b.id AND r.is_approved=1 WHERE b.is_active=1 AND b.is_featured=1 GROUP BY b.id ORDER BY avg DESC,rcnt DESC,b.name LIMIT 6");
$totalBiz=(int)qval("SELECT COUNT(*) FROM businesses WHERE is_active=1");
$upevts=qall("SELECT * FROM events WHERE status='approved' AND event_date>=date('now') ORDER BY is_featured DESC,event_date ASC LIMIT 3");
$upevts=qall("SELECT * FROM events WHERE status='approved' AND event_date>=date('now') ORDER BY is_featured DESC,event_date ASC LIMIT 4");
$randomInterval = setting('home_random_interval','2hours');
$slotKey = $randomInterval === 'day' ? date('Y-m-d') : (string)floor(time() / 7200);
$rotationLabel = $randomInterval === 'day' ? 'Refreshes daily' : 'Refreshes every two hours';
$randomPool = qall("
SELECT b.*,c.name cat,c.icon cat_icon,COALESCE(AVG(r.rating),0) avg,COUNT(r.id) rcnt
FROM businesses b
JOIN categories c ON c.id=b.category_id
LEFT JOIN reviews r ON r.business_id=b.id AND r.is_approved=1
WHERE b.is_active=1
GROUP BY b.id
");
usort($randomPool, fn($a,$b) => strcmp(hash('sha256',$slotKey.'-'.$a['id']), hash('sha256',$slotKey.'-'.$b['id'])));
$randomBiz = array_slice($randomPool, 0, 8);
include __DIR__.'/includes/header.php';
?>
<section class="hero">
<div class="hero-bg"></div>
<div class="hero-stars"></div>
<div class="hero-mtns">
<svg viewBox="0 0 1440 300" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,300 0,180 80,120 160,160 240,80 330,138 420,58 520,118 630,38 740,98 850,18 960,88 1060,28 1160,108 1260,48 1380,128 1440,78 1440,300" fill="#0a0f18" opacity=".9"/>
<polygon points="0,300 0,222 100,170 200,200 310,140 430,188 560,128 680,168 800,100 920,158 1030,108 1140,158 1250,118 1380,175 1440,145 1440,300" fill="#0d1520" opacity=".96"/>
<polygon points="0,300 0,260 140,232 280,252 420,212 560,242 700,202 840,235 980,197 1120,228 1260,205 1440,225 1440,300" fill="#111c2c"/>
<g opacity=".28" stroke="#c9a84c" stroke-width="1.5" fill="none">
<line x1="850" y1="20" x2="850" y2="72"/><line x1="850" y1="20" x2="833" y2="8"/><line x1="850" y1="20" x2="867" y2="8"/><line x1="850" y1="20" x2="850" y2="5"/>
<line x1="903" y1="30" x2="903" y2="82"/><line x1="903" y1="30" x2="886" y2="18"/><line x1="903" y1="30" x2="920" y2="18"/><line x1="903" y1="30" x2="903" y2="15"/>
<line x1="958" y1="42" x2="958" y2="94"/><line x1="958" y1="42" x2="941" y2="30"/><line x1="958" y1="42" x2="975" y2="30"/><line x1="958" y1="42" x2="958" y2="27"/>
</g>
</svg>
</div>
<div class="hero-content">
<div class="hero-eyebrow">⛰ MINERAL COUNTY · EASTERN PANHANDLE · WEST VIRGINIA</div>
<h1 class="hero-h1">DISCOVER<span class="gld">KEYSER</span></h1>
<div class="hero-sub">NORTH BRANCH POTOMAC RIVER · FOUNDED 1874</div>
<div class="hero-rule"></div>
<p class="hero-desc">Where Appalachian heritage meets mountain beauty. County seat of Mineral County — 3 hours from Washington D.C., a world away from ordinary.</p>
<div class="hero-actions">
<a href="/directory.php" class="btn btn-primary">Explore Businesses</a>
<a href="/attractions.php" class="btn btn-outline">Attractions &amp; Activities</a>
<section class="home-hero">
<div class="home-hero-glow"></div>
<div class="home-hero-grid">
<div class="home-hero-copy">
<div class="hero-eyebrow">MINERAL COUNTY · WEST VIRGINIA</div>
<h1 class="hero-h1">KEYSER<span class="gld">AFTER DARK</span></h1>
<p class="hero-desc">A neon-lit guide to local businesses, upcoming events, mountain history, and the community pages that keep Keyser moving.</p>
<form action="/directory.php" method="GET" class="hero-search">
<span class="s-icon">⌕</span>
<input class="search-input" type="text" name="q" placeholder="Search restaurants, shops, services...">
<button class="btn btn-primary">Search</button>
</form>
<div class="hero-actions">
<a href="/directory.php" class="btn btn-outline">View Directory</a>
<a href="/events.php" class="btn btn-secondary">Upcoming Events</a>
<?php if(!authed() && setting('registration_enabled','1')==='1'): ?>
<a href="/register.php" class="btn btn-primary">Join or Claim a Page</a>
<?php endif; ?>
</div>
</div>
<div class="hero-signal">
<div class="signal-card signal-card-main">
<div class="signal-label">Live Directory</div>
<div class="signal-number"><?=$totalBiz?></div>
<div class="signal-copy">active Keyser business listings</div>
</div>
<div class="signal-mini-grid">
<?php foreach([['1874','Founded'],['809 ft','Elevation'],['WVU','Potomac State'],['North Branch','Potomac River']] as [$n,$l]): ?>
<div class="signal-card">
<div class="signal-small"><?=$n?></div>
<div class="signal-copy"><?=$l?></div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</section>
<div class="stats-strip">
<div class="stats-inner">
<?php foreach([['1874','Founded'],['809 ft','Elevation'],['~4,800','Population'],['132','Wind Turbines'],['1901','PSC Founded'],[$totalBiz,'Businesses Listed']] as [$n,$l]): ?>
<div class="stat"><div class="stat-n"><?=e($n)?></div><div class="stat-l"><?=e($l)?></div></div>
<?php endforeach; ?>
</div>
</div>
<?php if($alerts): ?>
<div class="alert-strip">
<div class="alert-strip neon-alerts">
<div class="alert-strip-inner">
<div class="eyebrow" style="margin-bottom:.65rem">📢 LOCAL BUSINESS NEWS &amp; UPDATES</div>
<div class="eyebrow">LOCAL BUSINESS SIGNALS</div>
<?php foreach($alerts as $a): ?>
<div class="alert-item a-<?=e($a['type'])?>">
<div class="alert-ico"><?=alertIcon($a['type'] ?? '')?></div>
<div>
<div class="alert-title"><?=e($a['title'])?></div>
<div class="alert-body"><?=e($a['body'])?></div>
<div class="alert-meta">From <a href="/business.php?slug=<?=e($a['bslug'])?>"><?=e($a['bname'])?></a> &middot; <?=ago($a['created_at'] ?? '')?></div>
<div class="alert-meta">From <a href="/business.php?slug=<?=e($a['bslug'])?>"><?=e($a['bname'])?></a> · <?=ago($a['created_at'] ?? '')?></div>
</div>
</div>
<?php endforeach; ?>
@@ -63,26 +83,28 @@ include __DIR__.'/includes/header.php';
<?php endif; ?>
<div class="section">
<div style="margin-bottom:2rem">
<div class="eyebrow">⭐A LITTLE SPOTLIGHT</div>
<h2 class="sec-title">Featured</h2>
<div class="sec-rule"></div>
<div class="section-head">
<div>
<div class="eyebrow">FEATURED BUSINESS</div>
<h2 class="sec-title">Local Places in the Spotlight</h2>
</div>
<a href="/directory.php" class="btn btn-outline btn-sm">All Businesses</a>
</div>
<div class="g3">
<?php foreach($featured as $b): ?>
<a href="/business.php?slug=<?=e($b['slug'])?>" style="text-decoration:none">
<div class="biz-card">
<a href="/business.php?slug=<?=e($b['slug'])?>" class="card-link">
<div class="biz-card neon-card">
<div class="biz-card-top">
<div class="cat-badge"><?=e($b['cat_icon'].' '.$b['cat'])?></div>
<?php if($b['is_featured']): ?><span class="featured-badge" style="float:right">★ FEATURED</span><?php endif; ?>
<span class="featured-badge">FEATURED</span>
<div class="biz-name"><?=e($b['name'])?></div>
<?php if($b['subcategory']): ?><div class="biz-sub"><?=e($b['subcategory'])?></div><?php endif; ?>
</div>
<div class="biz-card-body">
<div class="biz-desc"><?=e($b['description'])?></div>
<div class="biz-meta">
<?php if($b['address']): ?><div class="biz-meta-row"><span class="biz-meta-icon">📍</span><?=e($b['address'])?></div><?php endif; ?>
<?php if($b['phone']): ?><div class="biz-meta-row"><span class="biz-meta-icon">📞</span><?=e($b['phone'])?></div><?php endif; ?>
<?php if($b['address']): ?><div class="biz-meta-row"><span class="biz-meta-icon"></span><?=e($b['address'])?></div><?php endif; ?>
<?php if($b['phone']): ?><div class="biz-meta-row"><span class="biz-meta-icon"></span><?=e($b['phone'])?></div><?php endif; ?>
</div>
</div>
<div class="biz-card-foot">
@@ -91,84 +113,113 @@ include __DIR__.'/includes/header.php';
<span class="rat-score"><?=number_format((float)$b['avg'],1)?></span>
<span class="rat-cnt">(<?=$b['rcnt']?>)</span>
</div>
<span style="color:var(--gold);font-size:.76rem;font-family:'Oswald',sans-serif">VIEW</span>
<span class="view-label">VIEW</span>
</div>
</div>
</a>
<?php endforeach; ?>
</div>
<div style="text-align:center;margin-top:2rem">
<a href="/directory.php" class="btn btn-outline">Browse Full Directory (<?=$totalBiz?> Businesses)</a>
</div>
</div>
<div style="background:var(--bg2);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:4rem 1.5rem">
<div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center">
<div>
<div class="eyebrow">OUR HISTORY</div>
<h2 class="sec-title" style="margin-bottom:1rem">A City with Deep Mountain Roots</h2>
<div class="prose">
<p>Originally called <strong>Paddy Town</strong> after Irish settler Patrick McCarty, then New Creek, Keyser took its name in 1874 — honoring William Keyser, Vice President of the Baltimore &amp; Ohio Railroad whose line transformed the region in 1842.</p>
<p>Today Keyser is home to <strong>Potomac State College of WVU</strong> (est. 1901 on historic Civil War Fort Fuller), WVU Medicine Potomac Valley Hospital, and a vibrant downtown community rich with Appalachian culture on the banks of the North Branch Potomac River.</p>
<p>Mineral County is part of the <strong>Appalachian Forest National Heritage Area</strong> — over 500 square miles of forested beauty where American history lives on in every ridge and hollow.</p>
<div class="home-band">
<div class="section">
<div class="section-head">
<div>
<div class="eyebrow">UPCOMING EVENTS</div>
<h2 class="sec-title">Whats Happening Around Keyser</h2>
</div>
<a href="/about.php" class="btn btn-outline" style="margin-top:1rem">Learn More About Keyser</a>
<a href="/events.php" class="btn btn-outline btn-sm">All Events</a>
</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
<?php foreach([['🏛️','HISTORIC','National Register of Historic Places sites'],['🎓','EDUCATION','Potomac State College of WVU since 1901'],['🌊','OUTDOORS','Kayaking &amp; fishing the North Branch'],['💨','WIND ENERGY','132 turbines on the Allegheny Front']] as [$ic,$lbl,$val]): ?>
<div style="background:var(--bg3);border:1px solid var(--bdr);border-radius:6px;padding:1.2rem;text-align:center">
<div style="font-size:2rem;margin-bottom:.45rem"><?=$ic?></div>
<div style="font-family:'Oswald',sans-serif;font-size:.66rem;letter-spacing:.2em;color:var(--gold)"><?=$lbl?></div>
<div style="color:var(--text);margin-top:.25rem;font-size:.88rem"><?=$val?></div>
<?php if($upevts): ?>
<div class="event-strip">
<?php foreach($upevts as $ev): ?>
<div class="evt-card">
<div class="evt-date-box">
<div class="evt-mon"><?=strtoupper(date('M',strtotime($ev['event_date'])))?></div>
<div class="evt-day"><?=date('j',strtotime($ev['event_date']))?></div>
<div class="evt-yr"><?=date('Y',strtotime($ev['event_date']))?></div>
</div>
<div class="evt-body">
<div class="evt-title"><?=e($ev['title'])?><?php if($ev['is_featured']): ?> <span class="featured-badge">FEATURED</span><?php endif; ?></div>
<div class="evt-meta">
<?php if($ev['venue']): ?><span><?=e($ev['venue'])?></span><?php endif; ?>
<?php if($ev['event_time']): ?><span><?=e($ev['event_time'])?></span><?php endif; ?>
<span><?=e($ev['cost'])?></span>
</div>
<div class="evt-desc"><?=e(substr($ev['description'],0,160)).(strlen($ev['description'])>160?'...':'')?></div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php if($upevts): ?>
<div class="section">
<div style="margin-bottom:2rem">
<div class="eyebrow">📅 WHAT'S HAPPENING</div>
<h2 class="sec-title">Upcoming Events</h2>
<div class="sec-rule"></div>
</div>
<?php foreach($upevts as $ev): ?>
<div class="evt-card">
<div class="evt-date-box">
<div class="evt-mon"><?=strtoupper(date('M',strtotime($ev['event_date'])))?></div>
<div class="evt-day"><?=date('j',strtotime($ev['event_date']))?></div>
<div class="evt-yr"><?=date('Y',strtotime($ev['event_date']))?></div>
</div>
<div class="evt-body">
<div class="evt-title"><?=e($ev['title'])?><?php if($ev['is_featured']): ?> <span class="featured-badge" style="margin-left:.5rem">★ FEATURED</span><?php endif; ?></div>
<div class="evt-meta">
<?php if($ev['venue']): ?><span>📍 <?=e($ev['venue'])?></span><?php endif; ?>
<?php if($ev['event_time']): ?><span>🕐 <?=e($ev['event_time'])?></span><?php endif; ?>
<span>💰 <?=e($ev['cost'])?></span>
</div>
<div class="evt-desc"><?=e(substr($ev['description'],0,180)).(strlen($ev['description'])>180?'…':'')?></div>
</div>
</div>
<?php endforeach; ?>
<div style="text-align:center;margin-top:1.5rem">
<a href="/events.php" class="btn btn-outline">All Events</a>
<a href="/events.php?submit=1" class="btn btn-secondary" style="margin-left:.75rem">Submit an Event</a>
</div>
</div>
<?php endif; ?>
<div style="padding:4rem 1.5rem;text-align:center;max-width:560px;margin:0 auto">
<div class="eyebrow">JOIN THE COMMUNITY</div>
<h2 style="font-size:2rem;margin:.5rem 0 1rem">Own a Business in Keyser?</h2>
<p style="color:var(--text-m);margin-bottom:2rem;line-height:1.85">Create an account to manage your listing, post alerts, add menus, and connect with the Keyser community.</p>
<div class="flex-row" style="justify-content:center">
<?php if(!authed()): ?>
<a href="/register.php" class="btn btn-primary">Create Account</a>
<a href="/login.php" class="btn btn-outline">Login</a>
<?php else: ?>
<a href="/dashboard.php" class="btn btn-primary">My Dashboard</a>
<div class="empty event-empty">
<div class="empty-ico">◇</div>
<h3>No upcoming approved events yet</h3>
<p style="margin-top:.5rem;color:var(--text-d)">Community events will appear here as they are approved.</p>
</div>
<?php endif; ?>
<div class="text-center mt3">
<a href="/events.php?submit=1" class="btn btn-primary">Submit an Event</a>
</div>
</div>
</div>
<div class="section about-split">
<div>
<div class="eyebrow">ABOUT KEYSER</div>
<h2 class="sec-title">Railroad Roots, River Views, Mountain Pace</h2>
<div class="prose">
<p>Keyser began as Paddy Town, then New Creek, before taking its current name in 1874 in honor of Baltimore &amp; Ohio Railroad leader William Keyser. The rail line shaped the citys downtown, its work ethic, and its role as Mineral Countys county seat.</p>
<p>Today the city sits where New Creek meets the North Branch Potomac River, with Potomac State College of WVU, local restaurants, small shops, healthcare, civic life, and outdoor access all close by.</p>
</div>
<a href="/about.php" class="btn btn-outline">Learn More About Keyser</a>
</div>
<div class="fact-grid home-facts">
<?php foreach([['Historic Core','Downtown, rail heritage, and civic landmarks'],['Outdoor Access','River routes, nearby trails, and mountain drives'],['College Town','Home to Potomac State College of WVU'],['Local Directory',$totalBiz.' active business pages and growing']] as [$lbl,$val]): ?>
<div class="fact-card">
<div class="fact-lbl"><?=e($lbl)?></div>
<div class="fact-val"><?=e($val)?></div>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="section random-section">
<div class="section-head">
<div>
<div class="eyebrow">RANDOM LOCAL PICKS · <?=e(strtoupper($rotationLabel))?></div>
<h2 class="sec-title">Explore Something Different</h2>
</div>
<a href="/directory.php" class="btn btn-primary btn-sm">View All Businesses</a>
</div>
<div class="random-list">
<?php foreach($randomBiz as $b): ?>
<a href="/business.php?slug=<?=e($b['slug'])?>" class="random-row">
<span class="random-cat"><?=e($b['cat_icon'])?></span>
<span class="random-main">
<strong><?=e($b['name'])?></strong>
<em><?=e($b['cat'])?><?= $b['subcategory'] ? ' · '.e($b['subcategory']) : '' ?></em>
</span>
<span class="random-arrow">→</span>
</a>
<?php endforeach; ?>
</div>
<div class="text-center mt3">
<a href="/directory.php" class="btn btn-outline">Browse the Full Business Directory</a>
</div>
</div>
<div class="join-band">
<div>
<div class="eyebrow">BUSINESS OWNERS</div>
<h2>Claim your Keyser business page</h2>
<p>Create a business-owner account, choose the listing you manage, add a verification phone number, and submit first edits or a YouTube/Vimeo video for admin review.</p>
</div>
<?php if(!authed() && setting('registration_enabled','1')==='1'): ?>
<a href="/register.php" class="btn btn-primary">Start a Claim</a>
<?php else: ?>
<a href="/dashboard.php" class="btn btn-primary">Open Dashboard</a>
<?php endif; ?>
</div>
<?php include __DIR__.'/includes/footer.php'; ?>