David Dyer
48e26d671d
Static-turned-PHP site for a pub in Marion, Indiana, with: - Hero section with tiled brick-texture background - Live-capable stat card (Facebook followers/reviews via Graph API, with graceful fallback to config.php constants when no token is set) - Open Graph / Twitter Card meta tags for social sharing - robots.txt config.php is gitignored (holds a Facebook Page Access Token once generated); config.sample.php is the tracked template — copy it to config.php and fill in values to run this locally or in deployment.
266 lines
13 KiB
PHP
266 lines
13 KiB
PHP
<?php
|
||
require __DIR__ . '/config.php';
|
||
require __DIR__ . '/inc/facebook-stats.php';
|
||
$fbStats = fritz_facebook_stats();
|
||
$siteUrl = rtrim(SITE_URL, '/');
|
||
?>
|
||
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>The Old Fitz Public House | Traditional Irish Pub in Marion, Indiana</title>
|
||
<meta name="description" content="The Old Fitz Public House — a traditional Irish pub in Marion, Indiana. Open Thursday through Saturday, 4–10pm. Family friendly, no reservations.">
|
||
<link rel="canonical" href="https://theoldfitz.daviddyer.me">
|
||
|
||
<!-- Social sharing (Open Graph / Twitter Card) -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:site_name" content="The Old Fitz Public House">
|
||
<meta property="og:title" content="The Old Fitz Public House | Traditional Irish Pub in Marion, Indiana">
|
||
<meta property="og:description" content="A traditional Irish pub in Marion, Indiana. Open Thursday through Saturday, 4–10pm. Family friendly, no reservations.">
|
||
<meta property="og:url" content="<?= $siteUrl ?>/">
|
||
<meta property="og:image" content="<?= $siteUrl ?>/assets/og-image.png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
<meta property="og:image:alt" content="The Old Fitz Public House">
|
||
<meta property="og:locale" content="en_US">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="The Old Fitz Public House | Traditional Irish Pub in Marion, Indiana">
|
||
<meta name="twitter:description" content="A traditional Irish pub in Marion, Indiana. Open Thursday through Saturday, 4–10pm. Family friendly, no reservations.">
|
||
<meta name="twitter:image" content="<?= $siteUrl ?>/assets/og-image.png">
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Karla:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<a class="skip-link" href="#main">Skip to content</a>
|
||
|
||
<header class="site">
|
||
<div class="container nav-inner">
|
||
<a class="brand" href="#main">
|
||
<img class="knot" src="./assets/knot.png" alt="">
|
||
<span>THE OLD FITZ</span>
|
||
</a>
|
||
<nav class="links" aria-label="Primary">
|
||
<a href="#about">About</a>
|
||
<a href="#visit">Hours & Visit</a>
|
||
<a href="#music">Live Music</a>
|
||
<a href="#menu">Menu</a>
|
||
<a href="#contact">Contact</a>
|
||
</nav>
|
||
<a class="nav-cta" href="https://www.google.com/maps/search/?api=1&query=100+N+Washington+St+Marion+IN" target="_blank" rel="noopener">Get Directions</a>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="main">
|
||
|
||
<section class="hero">
|
||
<div class="hero-media" aria-hidden="true">
|
||
<div class="hero-scrim"></div>
|
||
</div>
|
||
<div class="container hero-inner">
|
||
<h1 class="hero-brand">
|
||
<img class="hero-logo" src="./assets/hero-logo.png" alt="The Old Fitz Public House">
|
||
</h1>
|
||
<p class="eyebrow">Marion, Indiana</p>
|
||
<!-- <h1>The Old Fitz</h1> -->
|
||
<!-- <p class="sub">Public House</p> -->
|
||
<div class="tagline-row">
|
||
<span>Traditional Irish Pub</span><span>Family Friendly</span><span>No Reservations</span>
|
||
</div>
|
||
<div class="hero-ctas">
|
||
<a class="btn btn-primary" href="https://www.google.com/maps/search/?api=1&query=100+N+Washington+St+Marion+IN" target="_blank" rel="noopener">Get Directions</a>
|
||
<a class="btn btn-outline" href="mailto:info@theoldfitzpub.com">Say Hello</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about">
|
||
<div class="container">
|
||
<div class="about-grid">
|
||
<div class="reveal">
|
||
<p class="eyebrow">About the Pub</p>
|
||
<h2 style="margin-top:0.6rem;">A proper Irish pub, right on Washington Street.</h2>
|
||
<p class="lede" style="margin-top:1.5rem;">The Old Fitz Public House pours a traditional Irish pub experience in the middle of Marion — no pretense, no reservations, just a good pint and a warm room. Walk in Thursday through Saturday evening, grab a seat at the bar or a table for the family, and settle in.</p>
|
||
<p class="lede">The kitchen runs until 9, the bar stays open later for snacks, and regulars and first-timers get treated the same.</p>
|
||
</div>
|
||
<div class="stat-card reveal">
|
||
<span class="eyebrow">As the Regulars See It</span>
|
||
<div class="stat-big"><?= (int) $fbStats['recommend_pct'] ?>%</div>
|
||
<p class="stat-label">recommend The Old Fitz</p>
|
||
<p class="stat-source">Source: Facebook reviews (<?= (int) $fbStats['review_count'] ?>)</p>
|
||
<div class="stat-row">
|
||
<div class="stat-big"><?= number_format((int) $fbStats['followers']) ?>+</div>
|
||
<p class="stat-label">people following along on Facebook</p>
|
||
<p class="stat-source">Source: Facebook followers</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="visit" class="visit">
|
||
<div class="container">
|
||
<div class="section-head reveal">
|
||
<p class="eyebrow">Hours & Visit</p>
|
||
<h2>Three nights a week, doors open.</h2>
|
||
</div>
|
||
<div class="visit-grid">
|
||
<div class="card reveal">
|
||
<h3>On Tap Thu–Sat</h3>
|
||
<dl class="hours-list">
|
||
<div class="hours-row">
|
||
<dt>Thursday</dt>
|
||
<dd>4:00 – 10:00 PM</dd>
|
||
</div>
|
||
<div class="hours-row">
|
||
<dt>Friday</dt>
|
||
<dd>4:00 – 10:00 PM</dd>
|
||
</div>
|
||
<div class="hours-row">
|
||
<dt>Saturday</dt>
|
||
<dd>4:00 – 10:00 PM</dd>
|
||
</div>
|
||
<div class="hours-row">
|
||
<dt>Sun – Wed</dt>
|
||
<dd>Closed</dd>
|
||
</div>
|
||
</dl>
|
||
<p class="note"><strong>Kitchen closes at 9</strong> — bar snacks stay out later. Holiday hours may vary; check our Facebook page for the latest.</p>
|
||
</div>
|
||
<div class="card find-us reveal" id="contact">
|
||
<svg class="pin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||
<path d="M12 2C7.86 2 4.5 5.36 4.5 9.5c0 5.5 6.2 11.16 7.06 11.92a.7.7 0 0 0 .88 0C13.3 20.66 19.5 15 19.5 9.5 19.5 5.36 16.14 2 12 2Z" stroke="var(--gold)" stroke-width="1.4" />
|
||
<circle cx="12" cy="9.5" r="2.6" stroke="var(--gold)" stroke-width="1.4" />
|
||
</svg>
|
||
<h3>Find Us</h3>
|
||
<address>
|
||
100 N Washington Street<br>
|
||
Marion, Indiana
|
||
</address>
|
||
<div class="contact-list">
|
||
<a href="https://www.google.com/maps/search/?api=1&query=100+N+Washington+St+Marion+IN" target="_blank" rel="noopener">Get Directions →</a>
|
||
<a href="mailto:info@theoldfitzpub.com">info@theoldfitzpub.com</a>
|
||
</div>
|
||
<div class="social-row">
|
||
<a href="https://www.instagram.com/theoldfitzpub/?hl=en" target="_blank" rel="noopener" aria-label="The Old Fitz on Instagram">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||
<rect x="3" y="3" width="18" height="18" rx="5" />
|
||
<circle cx="12" cy="12" r="4.2" />
|
||
<circle cx="17.2" cy="6.8" r="1" />
|
||
</svg>
|
||
</a>
|
||
<a href="https://www.facebook.com/profile.php?id=100086635646712" target="_blank" rel="noopener" aria-label="The Old Fitz on Facebook">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||
<path d="M15 4h-2.2C10.7 4 9.5 5.3 9.5 7.3V10H7v3.2h2.5V21h3.3v-7.8h2.6l.4-3.2h-3V7.6c0-.8.4-1.3 1.4-1.3H15V4Z" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="music" class="music">
|
||
<div class="container">
|
||
<div class="rule-row reveal"><span class="line"></span><img class="knot" src="./assets/knot.png" alt=""><span class="line"></span></div>
|
||
<div class="section-head reveal">
|
||
<p class="eyebrow">Live Music</p>
|
||
<h2>Some nights, there's music.</h2>
|
||
</div>
|
||
<p class="body reveal">The Old Fitz brings in local musicians for live sets on select evenings — recent nights have featured artists like Casey Morris. There's no fixed weekly lineup here, so the surest way to catch a show is to follow along on Facebook or Instagram, where new dates get posted first.</p>
|
||
<div class="hero-ctas reveal">
|
||
<a class="btn btn-outline" href="https://www.facebook.com/profile.php?id=100086635646712" target="_blank" rel="noopener">Follow on Facebook</a>
|
||
<a class="btn btn-outline" href="https://www.instagram.com/theoldfitzpub/?hl=en" target="_blank" rel="noopener">Follow on Instagram</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="menu" class="menu-band">
|
||
<div class="container">
|
||
<div class="rule-row reveal"><span class="line"></span><img class="knot" src="./assets/knot.png" alt=""><span class="line"></span></div>
|
||
<div class="section-head reveal">
|
||
<p class="eyebrow">The Menu</p>
|
||
<h2>Pub food and a full bar, Thursday through Saturday.</h2>
|
||
</div>
|
||
<p class="body reveal">The current menu lives behind the bar and gets posted on our Facebook page. Stop in, or send us a message and we'll get you sorted before you arrive.</p>
|
||
<div class="hero-ctas reveal">
|
||
<a class="btn btn-primary" href="https://www.facebook.com/profile.php?id=100086635646712" target="_blank" rel="noopener">See Menu Updates on Facebook</a>
|
||
<a class="btn btn-outline" href="mailto:info@theoldfitzpub.com">Email a Question</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div>
|
||
<a class="footer-brand" href="#main">
|
||
<img class="knot" src="./assets/knot.png" alt="">
|
||
<span>THE OLD FITZ PUBLIC HOUSE</span>
|
||
</a>
|
||
<address style="margin-top:1rem;">
|
||
100 N Washington Street<br>
|
||
Marion, Indiana
|
||
</address>
|
||
</div>
|
||
<div>
|
||
<p class="col-title">Hours</p>
|
||
<div class="hours-mini">
|
||
<span>Thu — Sat · 4:00–10:00 PM</span>
|
||
<span>Kitchen closes at 9 PM</span>
|
||
<span>Sun — Wed · Closed</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<p class="col-title">Get in Touch</p>
|
||
<a class="email" href="mailto:info@theoldfitzpub.com">info@theoldfitzpub.com</a>
|
||
<div class="social-row" style="margin-top:1rem;">
|
||
<a href="https://www.instagram.com/theoldfitzpub/?hl=en" target="_blank" rel="noopener" aria-label="Instagram">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||
<rect x="3" y="3" width="18" height="18" rx="5" />
|
||
<circle cx="12" cy="12" r="4.2" />
|
||
<circle cx="17.2" cy="6.8" r="1" />
|
||
</svg>
|
||
</a>
|
||
<a href="https://www.facebook.com/profile.php?id=100086635646712" target="_blank" rel="noopener" aria-label="Facebook">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
|
||
<path d="M15 4h-2.2C10.7 4 9.5 5.3 9.5 7.3V10H7v3.2h2.5V21h3.3v-7.8h2.6l.4-3.2h-3V7.6c0-.8.4-1.3 1.4-1.3H15V4Z" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<span>© 2026 The Old Fitz Public House</span>
|
||
<span>A neighborhood pub in Marion, Indiana</span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
(function() {
|
||
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||
var els = document.querySelectorAll('.reveal');
|
||
if (!('IntersectionObserver' in window)) { els.forEach(function(e) { e.classList.add('is-visible'); }); return; }
|
||
var io = new IntersectionObserver(function(entries) {
|
||
entries.forEach(function(entry) {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('is-visible');
|
||
io.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.15 });
|
||
els.forEach(function(e) { io.observe(e); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|