510 lines
21 KiB
HTML
510 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Free Food Resources - Free Alberta</title>
|
|
<meta name="description" content="Find free food resources in Alberta including food banks, community meals, and food hampers.">
|
|
|
|
<!-- Leaflet CSS for maps -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
|
|
<!-- Google Fonts - Roboto to match MkDocs Material theme -->
|
|
<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=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<a href="/" class="logo">
|
|
<span class="logo-icon">🍽</span>
|
|
<span class="logo-text">Free Alberta Food</span>
|
|
</a>
|
|
<nav class="nav">
|
|
<a href="https://freealberta.org" class="nav-link">Free Alberta</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<h1>Find Free Food Resources in Alberta</h1>
|
|
<p>Locate food banks, community meals, and food assistance programs near you</p>
|
|
|
|
<!-- Search Bar -->
|
|
<div class="search-container">
|
|
<input
|
|
type="text"
|
|
id="searchInput"
|
|
class="search-input"
|
|
placeholder="Search by name, address, or service..."
|
|
autocomplete="off"
|
|
>
|
|
<button id="searchBtn" class="search-btn">Search</button>
|
|
<button id="locationBtn" class="location-btn" title="Use my location">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="3"></circle>
|
|
<path d="M12 2v4m0 12v4m10-10h-4M6 12H2"></path>
|
|
</svg>
|
|
Find Me
|
|
</button>
|
|
<button id="closestBtn" class="location-btn" title="Find closest resource">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
|
<circle cx="12" cy="10" r="3"></circle>
|
|
</svg>
|
|
Closest Resource
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Filters -->
|
|
<div class="filters-bar">
|
|
<div class="filters-left">
|
|
<div class="multi-select" id="cityFilterContainer">
|
|
<button class="multi-select-btn" type="button">
|
|
<span class="multi-select-label">All Cities</span>
|
|
<svg class="multi-select-arrow" width="12" height="12" viewBox="0 0 12 12"><path fill="currentColor" d="M6 8L1 3h10z"/></svg>
|
|
</button>
|
|
<div class="multi-select-dropdown hidden">
|
|
<div class="multi-select-search">
|
|
<input type="text" placeholder="Search cities..." class="multi-select-search-input">
|
|
</div>
|
|
<div class="multi-select-options" id="cityFilterOptions">
|
|
<!-- Options loaded dynamically -->
|
|
</div>
|
|
<div class="multi-select-actions">
|
|
<button type="button" class="multi-select-clear">Clear</button>
|
|
<button type="button" class="multi-select-apply">Apply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="multi-select" id="typeFilterContainer">
|
|
<button class="multi-select-btn" type="button">
|
|
<span class="multi-select-label">All Types</span>
|
|
<svg class="multi-select-arrow" width="12" height="12" viewBox="0 0 12 12"><path fill="currentColor" d="M6 8L1 3h10z"/></svg>
|
|
</button>
|
|
<div class="multi-select-dropdown hidden">
|
|
<div class="multi-select-options" id="typeFilterOptions">
|
|
<!-- Options loaded dynamically -->
|
|
</div>
|
|
<div class="multi-select-actions">
|
|
<button type="button" class="multi-select-clear">Clear</button>
|
|
<button type="button" class="multi-select-apply">Apply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="multi-select" id="contactFilterContainer">
|
|
<button class="multi-select-btn" type="button">
|
|
<span class="multi-select-label">Any Contact</span>
|
|
<svg class="multi-select-arrow" width="12" height="12" viewBox="0 0 12 12"><path fill="currentColor" d="M6 8L1 3h10z"/></svg>
|
|
</button>
|
|
<div class="multi-select-dropdown hidden">
|
|
<div class="multi-select-options" id="contactFilterOptions">
|
|
<label class="multi-select-option">
|
|
<input type="checkbox" value="phone">
|
|
<span>Has Phone</span>
|
|
</label>
|
|
<label class="multi-select-option">
|
|
<input type="checkbox" value="email">
|
|
<span>Has Email</span>
|
|
</label>
|
|
<label class="multi-select-option">
|
|
<input type="checkbox" value="website">
|
|
<span>Has Website</span>
|
|
</label>
|
|
</div>
|
|
<div class="multi-select-actions">
|
|
<button type="button" class="multi-select-clear">Clear</button>
|
|
<button type="button" class="multi-select-apply">Apply</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="filters-right">
|
|
<span id="resultCount" class="result-count">0 resources</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content Area - Split Layout -->
|
|
<div class="content-area split-layout">
|
|
<!-- Map View (Always Visible) -->
|
|
<div id="mapContainer" class="map-container">
|
|
<div id="map"></div>
|
|
</div>
|
|
|
|
<!-- List View (Always Visible) -->
|
|
<div id="listContainer" class="list-container">
|
|
<div id="resourceList" class="resource-list">
|
|
<!-- Resources will be loaded here -->
|
|
</div>
|
|
<div id="loadingIndicator" class="loading-indicator hidden">
|
|
<div class="spinner"></div>
|
|
<span>Loading resources...</span>
|
|
</div>
|
|
<div id="noResults" class="no-results hidden">
|
|
<p>No resources found matching your criteria.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- Resource Detail Modal -->
|
|
<div id="resourceModal" class="modal hidden">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<button class="modal-close">×</button>
|
|
<div id="modalBody">
|
|
<!-- Resource details will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Directions Modal -->
|
|
<div id="directionsModal" class="modal hidden">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content modal-large">
|
|
<button class="modal-close">×</button>
|
|
<div class="directions-container">
|
|
<div class="directions-header">
|
|
<h2>Directions</h2>
|
|
<div class="directions-controls">
|
|
<select id="travelMode" class="filter-select">
|
|
<option value="driving">Driving</option>
|
|
<option value="walking">Walking</option>
|
|
<option value="cycling">Cycling</option>
|
|
</select>
|
|
<button id="printDirectionsBtn" class="resource-action-btn" title="Print directions">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<polyline points="6 9 6 2 18 2 18 9"></polyline>
|
|
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
|
|
<rect x="6" y="14" width="12" height="8"></rect>
|
|
</svg>
|
|
Print
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="directions-summary" id="directionsSummary">
|
|
<!-- Summary will be inserted here -->
|
|
</div>
|
|
<div class="directions-layout">
|
|
<div class="directions-map-container">
|
|
<div id="directionsMap"></div>
|
|
</div>
|
|
<div class="directions-steps-container">
|
|
<div id="directionsSteps" class="directions-steps">
|
|
<!-- Turn-by-turn steps will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Update Request Modal -->
|
|
<div id="updateModal" class="modal hidden">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content modal-large">
|
|
<button class="modal-close">×</button>
|
|
<div class="update-modal-container">
|
|
<h2>Update This Listing</h2>
|
|
<p class="update-modal-subtitle">Suggest corrections or updates to this resource listing. Your submission will be reviewed by our team.</p>
|
|
|
|
<form id="updateForm" class="update-form">
|
|
<input type="hidden" id="updateResourceId" value="">
|
|
|
|
<div class="form-section">
|
|
<h3>Your Information</h3>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="submitterEmail">Email <span class="required">*</span></label>
|
|
<input type="email" id="submitterEmail" required placeholder="your@email.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="submitterName">Name (optional)</label>
|
|
<input type="text" id="submitterName" placeholder="Your name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Proposed Changes</h3>
|
|
<p class="form-hint">Leave fields blank if no change is needed</p>
|
|
|
|
<div class="form-group">
|
|
<label for="proposedName">Name</label>
|
|
<input type="text" id="proposedName" placeholder="Resource name">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="proposedResourceType">Type</label>
|
|
<select id="proposedResourceType">
|
|
<option value="">-- No change --</option>
|
|
<option value="food_bank">Food Bank</option>
|
|
<option value="community_meal">Community Meal</option>
|
|
<option value="hamper">Food Hamper</option>
|
|
<option value="pantry">Food Pantry</option>
|
|
<option value="soup_kitchen">Soup Kitchen</option>
|
|
<option value="mobile_food">Mobile Food</option>
|
|
<option value="grocery_program">Grocery Program</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="proposedCity">City</label>
|
|
<input type="text" id="proposedCity" placeholder="City">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="proposedAddress">Address</label>
|
|
<input type="text" id="proposedAddress" placeholder="Street address">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="proposedPhone">Phone</label>
|
|
<input type="tel" id="proposedPhone" placeholder="Phone number">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="proposedEmail">Contact Email</label>
|
|
<input type="email" id="proposedEmail" placeholder="Contact email">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="proposedWebsite">Website</label>
|
|
<input type="url" id="proposedWebsite" placeholder="https://...">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="proposedHours">Hours of Operation</label>
|
|
<textarea id="proposedHours" rows="2" placeholder="e.g., Monday-Friday 9am-5pm"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="proposedDescription">Description</label>
|
|
<textarea id="proposedDescription" rows="3" placeholder="Description of services"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="proposedEligibility">Eligibility Requirements</label>
|
|
<textarea id="proposedEligibility" rows="2" placeholder="Who can access this service"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="proposedServices">Services Offered</label>
|
|
<textarea id="proposedServices" rows="2" placeholder="What services are available"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Additional Notes</h3>
|
|
<div class="form-group">
|
|
<label for="additionalNotes">Any other information</label>
|
|
<textarea id="additionalNotes" rows="3" placeholder="Additional context or notes about your suggested changes"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="resource-action-btn" onclick="app.closeModal('updateModal')">Cancel</button>
|
|
<button type="submit" class="resource-action-btn primary">Submit Update Request</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Listing Modal -->
|
|
<div id="addListingModal" class="modal hidden">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content modal-large">
|
|
<button class="modal-close">×</button>
|
|
<div class="update-modal-container">
|
|
<h2>Add a New Listing</h2>
|
|
<p class="update-modal-subtitle">Submit a new food resource to be added to our directory. Your submission will be reviewed by our team before being published.</p>
|
|
|
|
<form id="addListingForm" class="update-form">
|
|
<div class="form-section">
|
|
<h3>Your Information</h3>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="newListingSubmitterEmail">Email <span class="required">*</span></label>
|
|
<input type="email" id="newListingSubmitterEmail" required placeholder="your@email.com">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newListingSubmitterName">Name (optional)</label>
|
|
<input type="text" id="newListingSubmitterName" placeholder="Your name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Listing Details</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="newListingName">Name <span class="required">*</span></label>
|
|
<input type="text" id="newListingName" required placeholder="Name of the food resource">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="newListingResourceType">Type</label>
|
|
<select id="newListingResourceType">
|
|
<option value="food_bank">Food Bank</option>
|
|
<option value="community_meal">Community Meal</option>
|
|
<option value="hamper">Food Hamper</option>
|
|
<option value="pantry">Food Pantry</option>
|
|
<option value="soup_kitchen">Soup Kitchen</option>
|
|
<option value="mobile_food">Mobile Food</option>
|
|
<option value="grocery_program">Grocery Program</option>
|
|
<option value="other" selected>Other</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newListingCity">City</label>
|
|
<input type="text" id="newListingCity" placeholder="City">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newListingAddress">Address</label>
|
|
<input type="text" id="newListingAddress" placeholder="Street address">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="newListingPhone">Phone</label>
|
|
<input type="tel" id="newListingPhone" placeholder="Phone number">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newListingEmail">Contact Email</label>
|
|
<input type="email" id="newListingEmail" placeholder="Contact email for the resource">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newListingWebsite">Website</label>
|
|
<input type="url" id="newListingWebsite" placeholder="https://...">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newListingHours">Hours of Operation</label>
|
|
<textarea id="newListingHours" rows="2" placeholder="e.g., Monday-Friday 9am-5pm"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newListingDescription">Description</label>
|
|
<textarea id="newListingDescription" rows="3" placeholder="Description of services provided"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newListingEligibility">Eligibility Requirements</label>
|
|
<textarea id="newListingEligibility" rows="2" placeholder="Who can access this service"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="newListingServices">Services Offered</label>
|
|
<textarea id="newListingServices" rows="2" placeholder="What services are available"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Additional Notes</h3>
|
|
<div class="form-group">
|
|
<label for="newListingNotes">Any other information</label>
|
|
<textarea id="newListingNotes" rows="3" placeholder="Additional context or notes about this listing"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="resource-action-btn" onclick="app.closeModal('addListingModal')">Cancel</button>
|
|
<button type="submit" class="resource-action-btn primary">Submit Listing</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Listing Call-to-Action -->
|
|
<section class="add-listing-cta">
|
|
<div class="add-listing-cta-content">
|
|
<h2>Know of a food resource not listed here?</h2>
|
|
<p>Help your community by adding it to our directory.</p>
|
|
<button id="addListingBtn" class="resource-action-btn primary large">Add a Listing</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Print-only content -->
|
|
<div id="printContent" class="print-only">
|
|
<div class="print-header">
|
|
<div class="print-logo">
|
|
<span class="print-logo-icon">🍽</span>
|
|
<span class="print-logo-text">Free Alberta Food</span>
|
|
</div>
|
|
<div class="print-tagline">Helping Albertans access free food resources</div>
|
|
</div>
|
|
<div class="print-title">
|
|
<h1>Directions</h1>
|
|
<p class="print-date" id="printDate"></p>
|
|
</div>
|
|
<div id="printMapContainer" class="print-map-container"></div>
|
|
<div id="printDirections"></div>
|
|
<div class="print-footer">
|
|
<div class="print-footer-brand">
|
|
<span>🍽</span> Free Alberta Food
|
|
</div>
|
|
<div class="print-footer-url">food.freealberta.org</div>
|
|
<div class="print-footer-note">Data sourced from InformAlberta, 211 Alberta, and Edmonton's Food Bank</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Theme Toggle Button -->
|
|
<button id="themeToggle" class="theme-toggle" title="Toggle dark mode">
|
|
<svg class="sun-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
<svg class="moon-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<p>© 2025 <a href="https://freealberta.org">Free Alberta</a>. Helping Albertans access free food resources.</p>
|
|
<p class="footer-note">Data sourced from InformAlberta, 211 Alberta, and Edmonton's Food Bank.</p>
|
|
<p class="footer-admin"><a href="/admin.html">Admin Login</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<!-- html2canvas for map capture in print -->
|
|
<script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="/js/app.js"></script>
|
|
</body>
|
|
</html>
|