1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <!-- Cookie Consent + Analytics (GA only loads after user accepts) --> 5
5<script src="cookie-consent.js"></script>
5 6 7 <meta charset="UTF-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <title>Explore Bands - GrassGigs</title> 10 <link rel="preconnect" href="https://fonts.googleapis.com"> 11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 12 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:wght@500;600;700&display=swap" rel="stylesheet"> 13 <link rel="stylesheet" href="style.css"> 14 <link rel="stylesheet" href="explore.css"> 15 <link rel="icon" type="image/png" href="pwa-base-bg-transparent-192.png"> 16 <meta name="description" content="Browse and search the full catalog of bluegrass bands on GrassGigs. Filter by genre, state, and upcoming shows to discover your next favorite band."> 17 <link rel="canonical" href="https://grassgigs.com/explore-bands.html"> 18 19 <!-- Open Graph --> 20 <meta property="og:title" content="Explore Bands - GrassGigs"> 21 <meta property="og:description" content="Browse and search the full catalog of bluegrass bands on GrassGigs. Filter by genre, state, and upcoming shows."> 22 <meta property="og:image" content="https://grassgigs.com/social-card.png"> 23 <meta property="og:url" content="https://grassgigs.com/explore-bands.html"> 24 <meta property="og:type" content="website"> 25</head> 26<body> 27 <!-- Background art (loaded from shared file) --> 28 <div id="bg-art-placeholder"></div> 29
29<script src="/bg-art-loader.js"></script>
29 30 31 <!-- Shared Header --> 32 <div id="header-placeholder"></div> 33
33<script src="/header-loader.js"></script>
33 34 35 <main class="explore-page"> 36 <section class="explore-hero"> 37 <h1>Explore Bands</h1> 38 <p class="explore-subtitle">Discover bluegrass bands from across the country. Search by name, filter by genre or state, and find bands with upcoming shows.</p> 39 </section> 40 41 <section class="explore-filters"> 42 <!-- Search Input --> 43 <div class="filter-group filter-search"> 44 <label for="band-search" class="filter-label">Search</label> 45 <input type="text" id="band-search" class="filter-input" placeholder="Search bands by name..." aria-label="Search bands by name"> 46 </div> 47 48 <!-- Genre Filter --> 49 <div class="filter-group filter-genres"> 50 <span class="filter-label">Genres</span> 51 <div class="genre-toggles" role="group" aria-label="Filter by genre"> 52 <button type="button" class="genre-toggle" data-genre="traditional_bluegrass">Traditional Bluegrass</button> 53 <button type="button" class="genre-toggle" data-genre="progressive_bluegrass">Progressive Bluegrass</button> 54 <button type="button" class="genre-toggle" data-genre="jamgrass">Jamgrass</button> 55 <button type="button" class="genre-toggle" data-genre="old_time">Old Time</button> 56 <button type="button" class="genre-toggle" data-genre="americana">Americana</button> 57 <button type="button" class="genre-toggle" data-genre="folk">Folk</button> 58 <button type="button" class="genre-toggle" data-genre="gospel_bluegrass">Gospel Bluegrass</button> 59 <button type="button" class="genre-toggle" data-genre="celtic_bluegrass">Celtic Bluegrass</button> 60 <button type="button" class="genre-toggle" data-genre="singer_songwriter">Singer/Songwriter</button> 61 <button type="button" class="genre-toggle" data-genre="country">Country</button> 62 <button type="button" class="genre-toggle" data-genre="western_swing">Western Swing</button> 63 <button type="button" class="genre-toggle" data-genre="cajun_creole">Cajun/Creole</button> 64 </div> 65 </div> 66 67 <!-- Upcoming Shows Toggle --> 68 <div class="filter-group filter-upcoming"> 69 <label class="toggle-label"> 70 <input type="checkbox" id="upcoming-filter" class="toggle-checkbox"> 71 <span class="toggle-switch"></span> 72 <span class="toggle-text">Has Upcoming Shows</span> 73 </label> 74 </div> 75 </section> 76 77 <!-- Active Filters Display --> 78 <div id="active-filters" class="active-filters" style="display: none;"></div> 79 80 <!-- Results Count --> 81 <div class="explore-results-header"> 82 <span id="results-count" class="results-count">Loading bands...</span> 83 <button id="clear-filters" class="clear-filters-btn" style="display: none;">Clear Filters</button> 84 </div> 85 86 <!-- Loading Indicator --> 87 <div id="loading-indicator" class="loading-indicator"> 88 <div class="loading-strings"> 89 <span class="string-bounce"></span> 90 <span class="string-bounce"></span> 91 <span class="string-bounce"></span> 92 <span class="string-bounce"></span> 93 <span class="string-bounce"></span> 94 </div> 95 <p>Tuning up the bands...</p> 96 </div> 97 98 <!-- Error Message --> 99 <div id="error-message" class="error-message" style="display: none;"> 100 <p>Hit a wrong note loading bands. Give it another try.</p> 101 <button id="retry-button" class="retry-button">Try Again</button> 102 </div> 103 104 <!-- No Results Message --> 105 <div id="no-results" class="no-results-message" style="display: none;"> 106 <p>No bands match those filters. Try loosening things up a bit.</p> 107 </div> 108 109 <!-- Band Cards Grid --> 110 <div id="band-grid" class="card-grid"></div> 111 </main> 112 113 <!-- Shared Footer --> 114 <div id="footer-placeholder"></div> 115 116 <!-- Load Shared Footer --> 117
117<script src="/footer-loader.js"></script>
117 118
118<script src="/mobile-nav-loader.js"></script>
118 119
119<script src="explore-bands.js"></script>
119 120</body> 121</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.