1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <link rel="icon" type="image/png" href="images/nafl_logo.png"> 5 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Northern Amateur Football Hub | Home</title> 9 10 <!-- Tailwind & Feather --> 11
11<script src="https://cdn.tailwindcss.com"></script>
11 12
12<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12 13
13<script src="https://unpkg.com/feather-icons"></script>
13 14 15 <link rel="stylesheet" href="style.css"> 16 17 <style> 18 /* hero slider visibility + fade */ 19 .hero-slider { 20 position: relative; 21 overflow: hidden; 22 } 23 24 .hero-slide { 25 opacity: 0; 26 pointer-events: none; 27 transition: opacity 1s ease; 28 } 29 30 .hero-slide.active { 31 opacity: 1; 32 pointer-events: auto; 33 } 34 </style> 35</head> 36<body class="bg-gray-50"> 37 <custom-navbar></custom-navbar> 38 39 <!-- HERO SLIDER --> 40 <section class="hero-slider relative w-full h-[420px] sm:h-[520px] md:h-[600px] overflow-hidden"> 41 <!-- Slide 1 --> 42 <div class="hero-slide active absolute inset-0 bg-cover bg-center brightness-110" 43 style="background-image: url('/images/rosebowl.png')"> 44 <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center pb-8"> 45 <div class="container mx-auto px-4 md:pl-[8vw] text-white transform transition-all duration-700 opacity-0 translate-y-10"> 46 <h1 class="text-2xl md:text-5xl font-bold mb-4 text-white drop-shadow-lg"> 47 NORTHERN AMATEUR FOOTBALL LEAGUE 48 </h1> 49 <p class="text-l md:text-xl mb-8 text-white/90 drop-shadow-md"> 50 <i>The Northern Amateur Football League - Instituted 1923</i> 51 </p> 52 <div class="flex gap-4 mt-8"> 53 <a href="fixtures.html" class="btn bg-green-600 text-white hover:bg-green-700 px-6 py-3 rounded-lg font-semibold"> 54 View Fixtures 55 </a> 56 <a href="tables.html" class="btn bg-green-600 text-white hover:bg-green-700 px-6 py-3 rounded-lg font-semibold"> 57 League Tables 58 </a> 59 </div> 60 </div> 61 </div> 62 </div> 63 64 <!-- Slide 2 --> 65 <div class="hero-slide absolute inset-0 bg-cover bg-center brightness-110" 66 style="background-image: url('/images/ncl_media/ncl-stands-players-wide.JPG')"> 67 <div class="absolute inset-0 bg-black bg-opacity-35 flex items-center"> 68 <div class="container mx-auto px-4 md:pl-[8vw] text-white transform transition-all duration-700 opacity-0 translate-y-10"> 69 <h1 class="text-2xl md:text-5xl font-bold mb-4 text-white drop-shadow-lg"> 70 NATIONAL CONFERENCE LEAGUE 71 </h1> 72 <p class="text-l md:text-xl mb-8 text-white/90 drop-shadow-md"> 73 <i>Launching a new national competition for ambitious clubs</i> 74 </p> 75 <div class="flex gap-4 mt-8"> 76 <a href="/ncl/" class="btn bg-green-600 text-white hover:bg-green-700 px-6 py-3 rounded-lg font-semibold"> 77 Explore NCL 78 </a> 79 </div> 80 </div> 81 </div> 82 </div> 83 84 <!-- Slide 3 --> 85 <div class="hero-slide absolute inset-0 bg-cover bg-center brightness-110" 86 style="background-image: url('/images/slider_hero2.jpg')"> 87 <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center"> 88 <div class="container mx-auto px-4 md:pl-[8vw] text-white transform transition-all duration-700 opacity-0 translate-y-10"> 89 <h1 class="text-2xl md:text-5xl font-bold mb-4 text-white drop-shadow-lg"> 90 UPCOMING MATCHES 91 </h1> 92 <p class="text-l md:text-xl mb-8 text-white/90 drop-shadow-md"> 93 <i>Check out this weekend's fixtures</i> 94 </p> 95 <div class="flex gap-4 mt-8"> 96 <a href="fixtures.html" class="btn bg-green-600 text-white hover:bg-green-700 px-6 py-3 rounded-lg font-semibold"> 97 View Fixtures 98 </a> 99 <a href="results.html" class="btn bg-green-600 text-white hover:bg-green-700 px-6 py-3 rounded-lg font-semibold"> 100 Recent Results 101 </a> 102 </div> 103 </div> 104 </div> 105 </div> 106 107 <!-- Arrows --> 108 <button class="hero-prev absolute left-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-30 text-white p-2 rounded-full hover:bg-opacity-50 transition"> <i data-feather="chevron-left" class="w-8 h-8"></i> 109 </button> 110 <button class="hero-next absolute right-4 top-1/2 -translate-y-1/2 bg-white bg-opacity-30 text-white p-2 rounded-full hover:bg-opacity-50 transition"> 111 <i data-feather="chevron-right" class="w-8 h-8"></i> 112 </button> 113 </section> 114 115 <!-- MAIN CONTENT --> 116 <main class="container mx-auto px-4 py-12 space-y-20 md:space-y-24"> 117 <!-- INTRO/ABOUT THE LEAGUE --> 118 <section class="bg-white rounded-2xl shadow-md px-6 py-10 md:px-12 md:py-14"> 119 <div class="md:grid md:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] md:gap-12 lg:gap-16 items-center"> 120 <!-- Text --> 121 <div class="max-w-xl mx-auto md:mx-0 text-center md:text-left"> 122 <h2 class="text-3xl md:text-4xl font-bold tracking-tight text-gray-900 mb-4"> 123 Welcome to the Northern Amateur Football League 124 </h2> 125 <p class="text-gray-700 leading-relaxed mb-4"> 126 The Northern Amateur Football League (NAFL) is one of Northern Irelandâs 127 leading grassroots competitions, bringing together clubs, players and 128 volunteers from across the country. 129 </p> 130 <p class="text-gray-700 leading-relaxed mb-4">
131 Across multiple divisions, hundreds of games are played every season. 132 This hub provides fixtures, results, league tables and club information 133 in one place, helping supporters and clubs stay up to date. 134 </p> 135 <p class="text-gray-700 leading-relaxed"> 136 Over time, the site will grow to include historical records, cup 137 competitions, media and more â building a proper digital home for 138 amateur football in Northern Ireland. 139 </p> 140 </div> 141 142 <!-- Image/graphic --> 143 <div class="mt-8 md:mt-0 flex justify-center md:justify-center"> 144 <img 145 src="images/history_nafl.jpg" 146 alt="NAFL" 147 class="max-w-full h-auto rounded-2xl shadow-lg" 148 /> 149 </div> 150 151 </div> 152 </section> 153 154 <!-- SPONSOR THANK-YOU BANNER + LOGOS --> 155 <section class="space-y-8"> 156 <!-- Banner strip --> 157 <div class="text-center px-2 md:px-0"> 158 <p class="text-xs md:text-sm tracking-[0.25em] uppercase mb-3 text-gray-500 font-semibold"> 159 With thanks to our partners 160 </p> 161 <h2 class="text-xl md:text-2xl font-semibold mb-3 text-green-900"> 162 Supporting grassroots football across Northern Ireland 163 </h2> 164 <p class="text-sm md:text-base text-gray-600 max-w-2xl mx-auto"> 165 The NAFL is made possible by the backing of local businesses and 166 organisations who share our commitment to the amateur game. 167 </p> 168 </div> 169 170 171 <!-- Logos --> 172 <div class="grid grid-cols-2 gap-3 sm:gap-6 lg:grid-cols-6"> 173 174 <a href="https://taka.io" target="_blank" rel="noopener noreferrer" 175 class="bg-[#06162F] rounded-xl shadow-md px-3 py-4 sm:px-4 sm:py-6 flex items-center justify-center hover:opacity-90 transition lg:col-span-2" 176 aria-label="TAKA Sports (opens in a new tab)"> 177 <img src="images/sponsors/taka_logo_words.jpeg" alt="TAKA Sports" class="w-60 h-20 object-cover" /> 178 </a> 179 180 <a href="https://cleartrainings.co.uk/" target="_blank" rel="noopener noreferrer" 181 class="bg-white rounded-xl shadow-md px-3 py-4 sm:px-4 sm:py-6 flex items-center justify-center hover:opacity-90 transition lg:col-span-2" 182 aria-label="ClearTrainings (opens in a new tab)"> 183 <img src="images/sponsors/clear_trainings.png" alt="ClearTrainings" class="w-55 h-20 object-cover" /> 184 </a> 185 186 <a href="https://allsportinsuranceireland.co.uk/" target="_blank" rel="noopener noreferrer" 187 class="bg-white rounded-xl shadow-md px-3 py-4 sm:px-4 sm:py-6 flex items-center justify-center hover:opacity-90 transition lg:col-span-2" 188 aria-label="AllSport Insurance (opens in a new tab)"> 189 <img src="images/sponsors/all_sport.jpg" alt="AllSport Insurance" class="w-40 h-20 object-cover" /> 190 </a> 191 192 <!-- Row 2 on desktop: centred pair --> 193 <a href="https://www.kit-room.co.uk" target="_blank" rel="noopener noreferrer" 194 class="bg-[#03004F] rounded-xl shadow-md px-3 py-4 sm:px-4 sm:py-6 flex items-center justify-center hover:opacity-90 transition lg:col-span-2 lg:col-start-2" 195 aria-label="Kitroom (opens in a new tab)"> 196 <img src="images/sponsors/kitroom.png" alt="Kitroom" class="w-60 h-20 object-cover" /> 197 </a> 198 199 <!-- on mobile: spans both columns so it centres on its own row --> 200 <a href="https://https://www.uhlsport.com/en/" target="_blank" rel="noopener noreferrer" 201 class="bg-white rounded-xl shadow-md px-3 py-4 sm:px-4 sm:py-6 flex items-center justify-center hover:opacity-90 transition col-span-2 lg:col-span-2 lg:col-start-4" 202 aria-label="uhlsport (opens in a new tab)"> 203 <img src="images/sponsors/uhlsport.png" alt="uhlsport" class="w-40 h-30 object-cover" /> 204 </a> 205 206 </div> 207 208 </section> 209 210 <!-- latest news (json-driven via initHomeNews in script.js) --> 211 <section class="space-y-6"> 212 <div class="flex items-baseline justify-between gap-2 ml-3 md:ml-5"> 213 <h2 class="text-3xl font-bold flex items-center">
214 <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-green-100 text-green-700 mr-2"> 215 <i data-feather="radio" class="w-4 h-4"></i> 216 </span> 217 Latest stories 218 </h2> 219 <a href="news.html" class="text-sm font-semibold text-blue-600 hover:underline"> 220 View all news 221 </a> 222 </div> 223 224 <p class="text-l text-gray-600 ml-3 md:ml-5"> 225 Official updates and announcements from across the NAFL. 226 </p> 227 228 <div 229 id="home-latest-news" 230 class="flex gap-4 overflow-x-auto snap-x snap-mandatory pb-2 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-6 md:overflow-visible md:snap-none" 231 > 232 233 <!-- Filled by initHomeNews() in script.js --> 234 </div> 235 </section> 236 237 <!-- CLUB SPOTLIGHT (already wired) --> 238 <section class="pb-4"> 239 <h2 class="text-3xl font-bold mb-6 flex items-center ml-3 md:ml-5"> 240 <span class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-green-100 text-green-700 mr-2"> 241 <i data-feather="star" class="w-4 h-4"></i> 242 </span> 243 Club Spotlight 244 </h2> 245 246 <div id="club-spotlight-card" class="bg-white rounded-xl shadow-md overflow-hidden"> 247 <div class="md:flex"> 248 <div class="md:w-1/3 bg-green-900 bg-cover bg-center flex items-center justify-center p-6" 249 style="background-image: url('images/nafl_team.jpg');"> 250 <img 251 id="spotlight-badge" 252 src="images/badges/placeholder.png" 253 alt="Club badge" 254 class="w-24 h-24 rounded-full object-contain bg-white border border-gray-200 hidden" 255 /> 256 </div> 257 258 <div class="md:w-2/3 p-6 md:p-8"> 259 <h3 id="spotlight-name" class="font-bold text-2xl mb-2"> 260 Loading club⦠261 </h3> 262 263 <div class="flex items-center text-gray-600 mb-4"> 264 <i data-feather="map-pin" class="w-4 h-4 mr-2"></i> 265 <span id="spotlight-division">â</span> 266 </div> 267 268 <p id="spotlight-snippet" class="text-gray-700 mb-6"> 269 Please wait while we load today’s featured club. 270 </p> 271 272 <a 273 id="spotlight-link" 274 href="#" 275 class="bg-blue-600 text-white px-6 py-2 rounded-lg font-semibold inline-block hover:bg-blue-700 transition" 276 > 277 View Club Profile 278 </a> 279 </div> 280 </div> 281 </div> 282 </section> 283 </main> 284 285 286 287 <custom-footer></custom-footer> 288 289 <!-- Scripts --> 290
290<script src="components/navbar.js"></script>
290 291
291<script src="components/footer.js"></script>
291 292
292<script src="script.js?v=20260204-1"></script>
vendor: 1 bytes, line 292
292
293<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"bb6fb8ede9ec4b588de1a5746503dc14","r":1,"spa":2}' crossorigin="anonymous"></script>
293 294</body> 295</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.