<!-- header.php -->
<?php
// header.php - includes Bootstrap, custom CSS, SEO meta tags, favicon, and site header with logo
$pageTitle = $pageTitle ?? 'Outdoor Vehicle Storage in Auburn, GA | Secure RV, Boat & Work Truck Parking';
$metaDescription = $metaDescription ?? 'Looking for secure outdoor vehicle storage in Auburn, GA? We offer affordable RV, boat, trailer, camper, and work truck parking with 24/7 surveillance. Reserve your space online today!';
$metaKeywords = $metaKeywords ?? 'outdoor storage, vehicle storage Auburn GA, RV storage Auburn, Winder, Lawrenceville, secure storage Auburn, Work Truck Parking Auburn';
$canonicalUrl = $canonicalUrl ?? 'https://dacroe.com' . $_SERVER['REQUEST_URI'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($pageTitle) ?></title>
<meta name="description" content="<?= htmlspecialchars($metaDescription) ?>">
<meta name="keywords" content="<?= htmlspecialchars($metaKeywords) ?>">
<link rel="canonical" href="<?= htmlspecialchars($canonicalUrl) ?>">
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- Open Graph -->
<meta property="og:title" content="<?= htmlspecialchars($pageTitle) ?>">
<meta property="og:description" content="<?= htmlspecialchars($metaDescription) ?>">
<meta property="og:type" content="website">
<meta property="og:url" content="<?= htmlspecialchars($canonicalUrl) ?>">
<meta property="og:image" content="https://yourdomain.com/path/to/og-image.jpg">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<?= htmlspecialchars($pageTitle) ?>">
<meta name="twitter:description" content="<?= htmlspecialchars($metaDescription) ?>">
<meta name="twitter:image" content="https://yourdomain.com/path/to/twitter-image.jpg">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" integrity="sha512-ku7m1OQ7/JyZghbz1mF3Cjl96cqpcI5ig5Npa9goBuCzYKlIJr7fEHu5SWlF+6NflkF05Keo0A0+qC7OSpXrRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/styles.css">
<script>
function debounce(func, wait = 300) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
</script>
<script>
function initAutocomplete() {
// Center point for a 100-mile radius
const center = { lat: 34.01676, lng: -83.82917 }; //62 Mt Moriah Rd
const radiusMeters = 100 * 1609.34;
// Compute SW and NE corners of the circle
const sw = google.maps.geometry.spherical.computeOffset(center, radiusMeters, 225);
const ne = google.maps.geometry.spherical.computeOffset(center, radiusMeters, 45);
const circleBounds = new google.maps.LatLngBounds(sw, ne);
// Common options: restrict initially
const opts = { bounds: circleBounds, strictBounds: true };
['billing-address'].forEach(id => {
const input = document.getElementById(id);
if (!input) return;
const ac = new google.maps.places.Autocomplete(input, opts);
ac.addListener('place_changed', () => {
const place = ac.getPlace();
// If no geometry, relax the bounds
if (!place.geometry) {
ac.setOptions({ strictBounds: false });
}
});
});
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgV0mYd9kJe0ZRv75zV3nRhuG1nXqb9hQ&libraries=places,geometry&callback=initAutocomplete"
async
defer
></script>
</head>
<body
<?= !empty($bodyClass) ? ' class="'.htmlspecialchars($bodyClass).'"' : '' ?>
>
<div class="d-flex flex-column min-vh-100">
<header class="bg-custom-gray py-1">
<!-- full-width wrapper with zero side padding -->
<div class="container-fluid px-0 d-flex align-items-center justify-content-between">
<!-- logo flush to the left -->
<a href="/index.php" class="d-flex align-items-center text-white text-decoration-none ps-3">
<img src="/assets/images/logo.png" alt="Dac Roe Storage Solutions" class="site-logo" height="50">
<span class="h4 mb-0 ms-2">Dac Roe | Storage Solutions</span>
</a>
<!-- keep your nav inside a constrained container if you like -->
<!-- Primary navigation -->
<nav class="navbar-nav d-flex flex-row ms-auto pe-3">
<a href="/index.php" class="nav-link text-white me-3">Home</a>
<a href="/storage-reservation.php" class="nav-link text-white me-3">Select Your Unit</a>
<a href="/contact.php" class="nav-link text-white me-3">Contact Us</a>
<a href="/customer-login.php" class="nav-link text-white">Customer Login</a>
</nav>
</div>
</header>