1 2 3<!DOCTYPE html> 4<html lang="en"> 5 6<head> 7 <meta charset="utf-8" /> 8 <title> 9 10 Forecast Products 11 12 13 14 - Fiji Meteorological and Hydrological Services 15 16 </title> 17 18 <meta name="viewport" content="width=device-width, initial-scale=1" /> 19 20 <!-- Ensure proper mobile rendering --> 21 <meta name="mobile-web-app-capable" content="yes"> 22 <meta name="apple-mobile-web-app-capable" content="yes"> 23 24 25 26 27 <link rel="stylesheet" type="text/css" href="/static/core/css/app.5492c1f9cfe1.css"> 28 <link rel="preconnect" href="https://fonts.googleapis.com"> 29 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 30 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet" 31 media="print" onload="this.media='all'"> 32 <link rel="stylesheet" type="text/css" href="/static/core/css/weather-icons/css/weather-icons.min.94033ff7643b.css" 33 media="print" onload="this.media='all'"> 34 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> 35 <noscript> 36 <link rel="stylesheet" type="text/css" href="/static/core/css/app.5492c1f9cfe1.css"> 37 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"> 38 <link rel="stylesheet" type="text/css" href="/static/core/css/weather-icons/css/weather-icons.min.94033ff7643b.css"> 39 </noscript> 40 41 <link rel="icon" href="/static/core/images/fijimetlogo.07f22328b53b.ico" type="image/x-icon" /> 42 <link rel="stylesheet" type="text/css" href="/static/core/css/weather-icons/css/weather-icons.min.94033ff7643b.css" 43 media="print" onload="this.media='all'"> 44 <!-- <link rel="stylesheet" type="text/css" href="/static/core/css/weather-icons/css/weather-icons.min.94033ff7643b.css"> --> 45 46 47 48 <style> 49 body { 50 display: flex; 51 flex-direction: column; 52 min-height: 100vh; 53 font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; 54 } 55 56 main { 57 flex: 1 0 auto; 58 } 59 60 /* Custom Scrollbar Styles */ 61 ::-webkit-scrollbar {
62 width: 8px; 63 } 64 65 ::-webkit-scrollbar-track { 66 background: #f1f1f1; 67 } 68 69 ::-webkit-scrollbar-thumb { 70 background: #353863; 71 border-radius: 4px; 72 } 73 74 ::-webkit-scrollbar-thumb:hover { 75 background: #2a2d4f; 76 } 77 78 /* Firefox */ 79 * { 80 scrollbar-width: thin; 81 scrollbar-color: #353863 #f1f1f1; 82 } 83 </style> 84
84<script defer data-domain="met.gov.fj" 85 src="https://plausible.fijimet.org/js/script.file-downloads.outbound-links.pageview-props.tagged-events.js"></script>
85 86
86<script>window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
86 87
87<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
87 88 <link rel="alternate" type="application/rss+xml" title="Fiji Meteorological Services Weather Alerts" 89 href="/feed/warnings/"> 90 91 92</head> 93 94<body> 95 <header class="sticky top-0 z-50 overflow-visible"> 96 97 98 99 100<style> 101 @keyframes colorChange { 102 0% { color: white; } 103 50% { color: #FFA500; } 104 100% { color: white; } 105 } 106 107 .letter { 108 display: inline-block; 109 opacity: 0; 110 animation: colorChange 0.5s ease-in-out forwards; 111 } 112 113 .truncate { 114 display: -webkit-box; 115 -webkit-line-clamp: 1; 116 -webkit-box-orient: vertical; 117 overflow: hidden; 118 } 119 120 @keyframes warningPulse { 121 0% { 122 opacity: 1; 123 color: #DC2626; 124 } 125 50% { 126 opacity: 0.7; 127 color: #EF4444; 128 } 129 100% { 130 opacity: 1; 131 color: #DC2626; 132 } 133 } 134 135 .warning-animation { 136 display: inline-flex; 137 align-items: center; 138 } 139 140 .warning-animation svg, 141 .warning-animation .text-red-600 { 142 animation: warningPulse 2s ease-in-out infinite; 143 } 144 145 .nav-link { 146 display: inline-flex; 147 align-items: center; 148 gap: 0.35rem; 149 padding: 0.4rem 0.7rem; 150 border-radius: 0.375rem; 151 color: #fff; 152 font-weight: 500; 153 white-space: nowrap; 154 text-decoration: none; 155 transition: background-color 0.15s ease, color 0.15s ease; 156 } 157 158 .nav-link:hover, 159 .nav-link:focus-visible { 160 background-color: rgba(255, 255, 255, 0.12); 161 color: #fff; 162 text-decoration: none; 163 outline: none; 164 } 165 166 .nav-link:focus-visible { 167 box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45); 168 } 169 170 .nav-link__chevron { 171 width: 0.85rem; 172 height: 0.85rem; 173 opacity: 0.75; 174 transition: transform 0.2s ease, opacity 0.15s ease; 175 flex-shrink: 0; 176 } 177 178 .nav-item--dropdown { 179 position: relative; 180 display: inline-flex; 181 align-items: center; 182 } 183 184 .nav-item--dropdown:hover .nav-link__chevron, 185 .nav-item--dropdown:focus-within .nav-link__chevron { 186 transform: rotate(180deg); 187 opacity: 1; 188 } 189 190 .nav-item--dropdown:hover .nav-link, 191 .nav-item--dropdown:focus-within .nav-link { 192 background-color: rgba(255, 255, 255, 0.12); 193 } 194 195 .nav-badge { 196 display: inline-flex; 197 align-items: center; 198 margin-left: 0.35rem; 199 padding: 0.1rem 0.45rem; 200 border-radius: 9999px; 201 font-size: 0.65rem; 202 font-weight: 600; 203 line-height: 1.2; 204 background-color: #fee2e2; 205 color: #991b1b; 206 animation: warningPulse 2s ease-in-out infinite; 207 } 208 209 @keyframes navDropdownIn { 210 from { 211 opacity: 0; 212 transform: translateY(-0.35rem); 213 } 214 to { 215 opacity: 1; 216 transform: translateY(0); 217 } 218 } 219 220 .nav-dropdown-panel { 221 position: absolute; 222 top: 100%; 223 left: 0; 224 z-index: 60; 225 min-width: 14rem; 226 max-width: 18rem; 227 margin-top: 0; 228 padding-top: 0.45rem; /* hover bridge so the menu doesn't flicker */ 229 background: transparent; 230 border: none; 231 box-shadow: none; 232 visibility: hidden; 233 opacity: 0; 234 pointer-events: none; 235 transition: opacity 0.15s ease, visibility 0.15s ease; 236 } 237 238 .nav-dropdown-panel__inner { 239 max-height: 400px; 240 overflow-y: auto; 241 background: #fff; 242 border: 1px solid #e5e7eb; 243 border-top: 2px solid #343862; 244 border-radius: 0.5rem; 245 box-shadow: 0 10px 28px rgba(39, 41, 73, 0.16); 246 } 247 248 .nav-item--dropdown:hover .nav-dropdown-panel, 249 .nav-item--dropdown:focus-within .nav-dropdown-panel { 250 visibility: visible; 251 opacity: 1; 252 pointer-events: auto; 253 } 254 255 .nav-item--dropdown:hover .nav-dropdown-panel__inner, 256 .nav-item--dropdown:focus-within .nav-dropdown-panel__inner { 257 animation: navDropdownIn 0.16s ease-out; 258 } 259 260 .nav-dropdown-panel__label { 261 padding: 0.65rem 1rem 0.35rem; 262 font-size: 0.65rem; 263 font-weight: 700; 264 letter-spacing: 0.06em; 265 text-transform: uppercase; 266 color: #6b7280; 267 } 268 269 .nav-dropdown-panel ul { 270 list-style: none; 271 margin: 0; 272 padding: 0.25rem 0 0.5rem; 273 } 274 275 .nav-dropdown-panel a { 276 display: block; 277 position: relative; 278 padding: 0.65rem 1rem 0.65rem 1.1rem; 279 color: #374151; 280 font-size: 0.875rem; 281 line-height: 1.35; 282 text-decoration: none; 283 border-left: 3px solid transparent; 284 transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; 285 } 286 287 .nav-dropdown-panel a:hover, 288 .nav-dropdown-panel a:focus-visible { 289 background-color: rgba(52, 56, 98, 0.08); 290 color: #191b2f; 291 border-left-color: #343862; 292 outline: none; 293 text-decoration: none; 294 } 295 296 #main-nav, 297 #main-nav > div { 298 overflow: visible; 299 } 300 301 @media (prefers-reduced-motion: reduce) { 302 .nav-item--dropdown:hover .nav-dropdown-panel__inner, 303 .nav-item--dropdown:focus-within .nav-dropdown-panel__inner { 304 animation: none; 305 } 306 307 .nav-link__chevron, 308 .nav-dropdown-panel { 309 transition: none; 310 } 311 } 312</style> 313 314<nav class="bg-gradient-to-r from-primary-700 via-primary-600 to-primary-500 antialiased shadow-md font-poppins border-b border-primary-300/80 backdrop-blur-sm bg-opacity-95" id="main-nav"> 315 <div class="w-full px-4 2xl:px-10 py-2.5"> 316 <div class="flex flex-col gap-2.5"> 317 <div class="flex items-center justify-between"> 318 <div class="flex items-center gap-4 md:gap-6"> 319 <button data-drawer-target="sidebar-info" data-drawer-toggle="sidebar-info" aria-controls="sidebar-info" type="button" class="inline-flex items-center p-2 text-sm text-white rounded-lg hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/40">
320 <span class="sr-only">Open sidebar</span> 321 <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 322 <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path> 323 </svg> 324 </button> 325 <div class="shrink-0"> 326 <a href="/" class="flex items-center text-white rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50" title="Fiji Meteorological Service â Home"> 327 <img class="w-auto h-10 lg:h-14" src="/static/core/images/coat_of_arms_fiji.6506a7f80e55.png" alt="Coat of arms of Fiji"> 328 <div class="ml-2 md:ml-3 flex flex-col"> 329 <h1 class="font-bold text-sm md:text-base lg:text-xl leading-tight" id="main-title"> 330 Fiji Meteorological Service 331 </h1> 332 <h2 class="text-[8px] uppercase tracking-wide md:text-xs lg:text-sm font-medium text-white/80" id="sub-title"> 333 RSMC Nadi - Tropical Cyclone Centre 334 </h2> 335 </div> 336 </a> 337 </div> 338 </div> 339 <!-- Google Translate Widget --> 340 <div id="google_translate_element"></div> 341 </div> 342 343 <div class="hidden lg:flex items-center justify-between gap-6 border-t border-white/15 pt-2.5 overflow-visible"> 344 <div class="flex flex-wrap items-center gap-0.5 text-sm xl:text-base overflow-visible" role="navigation" aria-label="Primary"> 345 <a href="/" class="nav-link">Home</a> 346 347 348 349 350 351 352 353 <div class="nav-item--dropdown"> 354 <a href="/fiji-weather/" 355 class="nav-link nav-link--dropdown" 356 aria-haspopup="true" 357 aria-expanded="false"> 358 Forecast 359 <svg class="nav-link__chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 360 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> 361 </svg> 362 </a> 363 <div class="nav-dropdown-panel" role="menu"> 364 <div class="nav-dropdown-panel__inner"> 365 366 <p class="nav-dropdown-panel__label">Forecast</p> 367 <ul> 368 369 <li><a href="/fiji-weather/fiji-weather/" role="menuitem">Fiji Weather</a></li> 370 371 <li><a href="/fiji-weather/regional-weather/" role="menuitem">Regional Weather</a></li> 372 373 <li><a href="/fiji-weather/7-day-outlook/" role="menuitem">7 Day Outlook</a></li> 374 375 <li><a href="/fiji-weather/5-day-tc-outlook/" role="menuitem">5 Day TC Outlook</a></li> 376 377 <li><a href="/fiji-weather/forecast-products/" role="menuitem">Forecast Products</a></li> 378 379 <li><a href="/fiji-weather/south-west-pacific-marine-bulletin/" role="menuitem">South West Pacific Marine Bulletin</a></li> 380 381 <li><a href="/fiji-weather/zlm-broadcast-frequency/" role="menuitem">ZLM Broadcast Frequency</a></li> 382 383 </ul> 384 </div> 385 </div> 386 </div> 387 388 <div class="nav-item--dropdown"> 389 <a href="/maps-observation/" 390 class="nav-link nav-link--dropdown" 391 aria-haspopup="true" 392 aria-expanded="false"> 393 Maps & Observation 394 <svg class="nav-link__chevron" viewB
394ox="0 0 20 20" fill="currentColor" aria-hidden="true"> 395 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> 396 </svg> 397 </a> 398 <div class="nav-dropdown-panel" role="menu"> 399 <div class="nav-dropdown-panel__inner"> 400 401 <p class="nav-dropdown-panel__label">Maps & Observation</p> 402 <ul> 403 404 <li><a href="/maps-observation/radar-image/" role="menuitem">Radar Image</a></li> 405 406 <li><a href="/maps-observation/rainfall-map/" role="menuitem">Rainfall Map</a></li> 407 408 <li><a href="/maps-observation/satellite-image/" role="menuitem">Satellite Image</a></li> 409 410 <li><a href="/maps-observation/synoptic-observation/" role="menuitem">Synoptic Observation</a></li> 411 412 <li><a href="/maps-observation/weather-map/" role="menuitem">Weather Map</a></li> 413 414 </ul> 415 </div> 416 </div> 417 </div> 418 419 <div class="nav-item--dropdown"> 420 <a href="/climate-services/" 421 class="nav-link nav-link--dropdown" 422 aria-haspopup="true" 423 aria-expanded="false"> 424 Climate Services 425 <svg class="nav-link__chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 426 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> 427 </svg> 428 </a> 429 <div class="nav-dropdown-panel" role="menu"> 430 <div class="nav-dropdown-panel__inner"> 431 432 <p class="nav-dropdown-panel__label">Climate Services</p> 433 <ul> 434 435 <li><a href="/climate-services/2025-26-tc-outlook/" role="menuitem">2025-26 TC Outlook</a></li> 436 437 <li><a href="/climate-services/climate-outlooks/" role="menuitem">Climate Outlook</a></li> 438 439 <li><a href="/climate-services/climate-outlook-video/" role="menuitem">Climate Outlook Video</a></li> 440 441 <li><a href="/climate-services/early-action-rainfall-watch/" role="menuitem">Early Action Rainfall Watch</a></li> 442 443 <li><a href="/climate-services/fiji-ocean-outlooks/" role="menuitem">Fiji Ocean Outlook</a></li> 444 445 <li><a href="/climate-services/ocean-outlook-video/" role="menuitem">Ocean Outlook Video</a></li> 446 447 <li><a href="/climate-services/sugar-outlooks/" role="menuitem">Sugar Outlook</a></li> 448 449 <li><a href="/climate-services/hydro-electricity-generation-outlook/" role="menuitem">Climate Outlook for Hydro-Electricity Generation</a></li> 450 451 <li><a href="/climate-services/fiji-climate-summaries/" role="menuitem">Fiji Climate Summary</a></li> 452 453 <li><a href="/climate-services/annual-climate-summary/" role="menuitem">Annual Climate Summary</a></li> 454 455 <li><a href="/climate-services/climate-data/" role="menuitem">Climate Data</a></li> 456 457 <li><a href="/climate-services/climate-data-products/" role="menuitem">Climate Data Products</a></li> 458 459 <li><a href="/climate-services/climate-change/" role="menuitem">Climate Change</a></li> 460 461 <li><a href="/climate-services/ocean-portal/" role="menuitem">Ocean Portal</a></li> 462 463 <li><a href="/climate-services/suva-tide-prediction/" role="menuitem">Suva Tide Prediction</a></li> 464 465 <li><a href="/climate-services/lautoka-tide-prediction/" role="menuitem">Lautoka Tide Prediction</a></li> 466 467 <li><a href="/climate-services/port-denarau-tide-prediction/" role="menuitem">Port Denarau Tide Prediction</a></li> 468 469 <li><a href="/climate-services/vatia-tide-prediction/" role="menuitem">Vatia Tide Prediction</a></li> 470 471 <li><a href="/climate-services/aeronautical-summaries/" role="menuitem">Aeronautical Summaries</a></li> 472 473 <li><a href="/climate-services/climate-normals/" role="menuitem">Climate Normals</a></li> 474 475 </ul> 476 </div> 477 </div> 478 </div> 479 480 <div class="nav-item--dropdown"> 481 <a href="/aviation-weather-products/" 482 class="nav-link nav-link--dropdown" 483 aria-haspopup="true" 484 aria-expanded="false"> 485 Aviation 486 <svg class="nav-link__chevron" viewB
486ox="0 0 20 20" fill="currentColor" aria-hidden="true"> 487 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> 488 </svg> 489 </a> 490 <div class="nav-dropdown-panel" role="menu"> 491 <div class="nav-dropdown-panel__inner"> 492 493 <p class="nav-dropdown-panel__label">Aviation</p> 494 <ul> 495 496 <li><a href="/aviation-weather-products/arfor/" role="menuitem">ARFORs</a></li> 497 498 <li><a href="/aviation-weather-products/metars/" role="menuitem">METARs</a></li> 499 500 <li><a href="/aviation-weather-products/tafs-24-hr/" role="menuitem">International Terminal Aerodrome Forecast (24hr TAF)</a></li> 501 502 <li><a href="/aviation-weather-products/tafs-individual/" role="menuitem">Domestic Terminal Aerodrome Forecast</a></li> 503 504 <li><a href="/aviation-weather-products/rofors/" role="menuitem">ROFORs</a></li> 505 506 <li><a href="/aviation-weather-products/sigmets/" role="menuitem">SIGMETs</a></li> 507 508 </ul> 509 </div> 510 </div> 511 </div> 512 513 <div class="nav-item--dropdown"> 514 <a href="/hydrological-services/" 515 class="nav-link nav-link--dropdown" 516 aria-haspopup="true" 517 aria-expanded="false"> 518 Hydrology 519 <svg class="nav-link__chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 520 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> 521 </svg> 522 </a> 523 <div class="nav-dropdown-panel" role="menu"> 524 <div class="nav-dropdown-panel__inner"> 525 526 <p class="nav-dropdown-panel__label">Hydrology</p> 527 <ul> 528 529 </ul> 530 </div> 531 </div> 532 </div> 533 </div> 534 535 <div class="w-72 shrink-0 xl:w-80"> 536 537 538<style> 539 [modal-backdrop] { 540 backdrop-filter: blur(6px); 541 -webkit-backdrop-filter: blur(6px); 542 } 543</style> 544 545<!-- Search Button that opens modal --> 546 547<button data-modal-target="search-modal" data-modal-toggle="search-modal" class="w-full text-left px-4 py-2.5 flex items-center gap-3 text-sm text-white border border-white/35 rounded-lg bg-white/10 hover:bg-white/20 focus:ring-2 focus:ring-white/50 focus:border-white/60 transition-all duration-200"> 548 <svg class="w-5 h-5 text-current flex-shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"> 549 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/> 550 </svg> 551 Search Fiji Met... 552</button> 553 554<!-- Search Modal --> 555 556 </div> 557 </div> 558 </div> 559 </div> 560</nav> 561 562 563 564<style> 565 [modal-backdrop] { 566 backdrop-filter: blur(6px); 567 -webkit-backdrop-filter: blur(6px); 568 } 569</style> 570 571<!-- Search Button that opens modal --> 572 573<!-- Search Modal --> 574 575<div id="search-modal" tabindex="-1" aria-hidden="true" class="fixed left-0 right-0 top-0 z-50 hidden h-[calc(100%-1rem)] max-h-full w-full overflow-x-hidden overflow-y-auto p-4 md:inset-0"> 576 <div class="relative mx-auto mt-24 w-full max-w-3xl max-h-full"> 577 <!-- Modal content --> 578 <div class="relative overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-gray-200"> 579 <!-- Modal header --> 580 <div class="flex items-start justify-between gap-4 border-b border-gray-100 bg-gradient-to-r from-primary-700 to-primary-500 p-5 text-white"> 581 <div> 582 <p class="text-xs font-semibold uppercase tracking-wide text-primary-100">Fiji Meteorological Service</p> 583 <h3 class="mt-1 text-2xl font-semibold"> 584 Search Fiji Met 585 </h3> 586 <p class="mt-1 text-sm text-primary-100"> 587 Find forecasts, warnings, observations, and climate information. 588 </p> 589 </div> 590 <button type="button" class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/10 text-white hover:bg-white/20 focu
590s:outline-none focus:ring-2 focus:ring-white/60" data-modal-hide="search-modal"> 591 <svg class="h-3.5 w-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"> 592 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/> 593 </svg> 594 <span class="sr-only">Close modal</span> 595 </button> 596 </div> 597 <!-- Modal body --> 598 <div class="space-y-5 p-5 md:p-6"> 599 <form class="relative" hx-get="/search/" hx-target="#search-results" hx-trigger="submit, input[name='query'] keyup delay:500ms" hx-indicator="#search-indicator"> 600 <div class="relative flex items-center"> 601 <svg class="pointer-events-none absolute left-4 h-5 w-5 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"> 602 <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/> 603 </svg> 604 <input type="text" 605 name="query" 606 607 class="block w-full rounded-xl border border-gray-200 bg-gray-50 p-4 pl-12 pr-12 text-base text-gray-900 shadow-inner focus:border-primary-500 focus:bg-white focus:ring-primary-500" 608 placeholder="Search for weather information, forecasts, radar, warnings..." 609 autofocus> 610 <div id="search-indicator" class="htmx-indicator absolute right-4 flex items-center"> 611 <svg xmlns="http://www.w3.org/2000/svg" class="animate-spin mr-2 w-4 h-4 md:w-5 md:h-5" viewBox="0 0 24 24"><path fill="#3B3F6F" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity="0.25"/><path fill="#3B3F6F" d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"></path></svg> 612 </div> 613 </div> 614 </form> 615 616 <div id="search-results" class="max-h-[60vh] overflow-y-auto rounded-xl border border-gray-100 bg-white"> 617 618 </div> 619 </div> 620 </div> 621 </div> 622</div> 623 624 625<aside id="sidebar-info" class="fixed top-0 left-0 z-40 w-72 transition-transform -translate-x-full" aria-label="Sidebar"> 626 <div 627 class="overflow-y-auto py-4 px-3 h-full bg-white border-r border-gray-200 dark:bg-gray-800 dark:border-gray-700"> 628 629 <!-- Alerts & Media --> 630 <ul class="space-y-2"> 631 <li> 632 <h3 class="px-2 py-1 text-xs font-semibold text-gray-500 uppercase">Alerts & Media</h3> 633 </li> 634 <li> 635 <a href="/warnings/" 636 class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"> 637 638 639 640 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 641 <path 642 d="M21.05 18.7069L13.0611 3.87094C12.4948 2.81906 10.9864 2.81906 10.4197 3.87094L2.43122 18.7069C2.30827 18.9352 2.24663 19.1916 2.25231 19.4508C2.258 19.7101 2.33081 19.9635 2.46365 20.1863C2.59648 20.409 2.7848 20.5935 3.01022 20.7217C3.23564 20.85 3.49046 20.9176 3.74981 20.918H19.729C19.9886 20.918 20.2437 20.8507 20.4694 20.7226C20.6952 20.5945 20.8838 20.4101 21.0169 20.1873C21.1501 19.9644 21.2231 19.7109 21.2289 19.4514C21.2346 19.1919 21.173 18.9354 21.05 18.7069ZM11.7406 18.6211C11.5552 18.6211 11.3739 18.5661 11.2197 18.4631C11.0656 18.3601 10.9454 18.2137 10.8745 18.0424C10.8035 17.8711 10.7849 17.6826 10.8211 17.5007C10.8573 17.3188 10.9466 17.1518 11.0777 17.0207C11.2088 16.8896 11.3758 16.8003 11.5577 16.7641C11.7396 16.7279 11.9281 16.7465 12.0994 16.8175C12.2707 16.8884 12.4171 17.0086 12.5201 17.1627C12.6231 17.3169 12.6781 17.4982 12.6781 17.6836C12.6781 17.8067 12.6538 17.9286 12.6067 18.0424C12.5596 18.1561 12.4906 18.2595 12.4035 18.3465C12.3165 18.4336 12.2131 18.5026 12.0994 18.5497C11.9856 18.5968 11.8637 18.6211 11.7406 18.6211ZM12.7587 9.19219
642L12.4897 14.9109C12.4897 15.1098 12.4106 15.3006 12.27 15.4413C12.1293 15.5819 11.9386 15.6609 11.7397 15.6609C11.5407 15.6609 11.35 15.5819 11.2093 15.4413C11.0687 15.3006 10.9897 15.1098 10.9897 14.9109L10.7206 9.19453C10.7145 9.05793 10.7361 8.92151 10.7839 8.79341C10.8317 8.6653 10.9048 8.54813 10.9988 8.44888C11.0929 8.34963 11.2059 8.27033 11.3313 8.2157C11.4566 8.16108 11.5917 8.13225 11.7284 8.13094H11.7382C11.8759 8.13087 12.0122 8.15869 12.1388 8.21272C12.2654 8.26675 12.3797 8.34587 12.4749 8.44531C12.5701 8.54475 12.6442 8.66245 12.6926 8.7913C12.7411 8.92015 12.7629 9.05748 12.7568 9.195L12.7587 9.19219Z" 643 fill="#3B3F6F" /> 644 </svg> 645 <span class="ml-3">Warning Status</span> 646 647 </a> 648 </li> 649 <li> 650 <a href="/media-release/" 651 class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"> 652 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 653 <path 654 d="M20.1 6.6H19.2C18.9613 6.6 18.7324 6.69482 18.5636 6.8636C18.3948 7.03239 18.3 7.26131 18.3 7.5C18.3 7.73869 18.3948 7.96761 18.5636 8.1364C18.7324 8.30518 18.9613 8.4 19.2 8.4V18.3C19.2 18.5387 19.1052 18.7676 18.9364 18.9364C18.7676 19.1052 18.5387 19.2 18.3 19.2C18.0613 19.2 17.8324 19.1052 17.6636 18.9364C17.4948 18.7676 17.4 18.5387 17.4 18.3V4.8C17.4 4.32261 17.2104 3.86477 16.8728 3.52721C16.5352 3.18964 16.0774 3 15.6 3H4.8C4.32261 3 3.86477 3.18964 3.52721 3.52721C3.18964 3.86477 3 4.32261 3 4.8V18.3C3 19.0161 3.28446 19.7028 3.79081 20.2092C4.29716 20.7155 4.98392 21 5.7 21H18.3C19.0161 21 19.7028 20.7155 20.2092 20.2092C20.7155 19.7028 21 19.0161 21 18.3V7.5C21 7.26131 20.9052 7.03239 20.7364 6.8636C20.5676 6.69482 20.3387 6.6 20.1 6.6ZM5.7 19.2C5.4613 19.2 5.23239 19.1052 5.0636 18.9364C4.89482 18.7676 4.8 18.5387 4.8 18.3V4.8H15.6V18.3C15.6 18.6065 15.652 18.9109 15.7539 19.2H5.7Z" 655 fill="#3B3F6F" /> 656 <path 657 d="M6.6 10.2H9.3C9.53869 10.2 9.76761 10.1052 9.9364 9.9364C10.1052 9.76761 10.2 9.53869 10.2 9.3V6.6C10.2 6.3613 10.1052 6.13239 9.9364 5.9636C9.76761 5.79482 9.53869 5.7 9.3 5.7H6.6C6.3613 5.7 6.13239 5.79482 5.9636 5.9636C5.79482 6.13239 5.7 6.3613 5.7 6.6V9.3C5.7 9.53869 5.79482 9.76761 5.9636 9.9364C6.13239 10.1052 6.3613 10.2 6.6 10.2ZM7.5 7.5H8.4V8.4H7.5V7.5Z" 658 fill="#3B3F6F" /> 659 <path 660 d="M13.8 5.7H12C11.7613 5.7 11.5324 5.79482 11.3636 5.9636C11.1948 6.13239 11.1 6.3613 11.1 6.6C11.1 6.83869 11.1948 7.06761 11.3636 7.2364C11.5324 7.40518 11.7613 7.5 12 7.5H13.8C14.0387 7.5 14.2676 7.40518 14.4364 7.2364C14.6052 7.06761 14.7 6.83869 14.7 6.6C14.7 6.3613 14.6052 6.13239 14.4364 5.9636C14.2676 5.79482 14.0387 5.7 13.8 5.7Z" 661 fill="#3B3F6F" /> 662 <path 663 d="M13.8 8.4H12C11.7613 8.4 11.5324 8.49482 11.3636 8.6636C11.1948 8.83239 11.1 9.06131 11.1 9.3C11.1 9.53869 11.1948 9.76761 11.3636 9.9364C11.5324 10.1052 11.7613 10.2 12 10.2H13.8C14.0387 10.2 14.2676 10.1052 14.4364 9.9364C14.6052 9.76761 14.7 9.53869 14.7 9.3C14.7 9.06131 14.6052 8.83239 14.4364 8.6636C14.2676 8.49482 14.0387 8.4 13.8 8.4Z" 664 fill="#3B3F6F" /> 665 <path 666 d="M13.8 11.1H6.6C6.3613 11.1 6.13239 11.1948 5.9636 11.3636C5.79482 11.5324 5.7 11.7613 5.7 12C5.7 12.2387 5.79482 12.4676 5.9636 12.6364C6.13239 12.8052 6.3613 12.9 6.6 12.9H13.8C14.0387 12.9 14.2676 12.8052 14.4364 12.6364C14.6052 12.4676 14.7 12.2387 14.7 12C14.7 11.7613 14.6052 11.5324 14.4364 11.3636C14.2676 11.1948 14.0387 11.1 13.8 11.1Z" 667 fill="#3B3F6F" /> 668 <path 669 d="M13.8 13.8H6.6C6.3613 13.8 6.13239 13.8948 5.9636 14.0636C5.79482 14.2324 5.7 14.4613 5.7 14.7C5.7 14.9387 5.79482 15.1676 5.9636 15.3364C6.13239 15.5052 6.3613 15.6 6.6 15.6H13.8C14.0387 15.6 14.2676 15.50
66952 14.4364 15.3364C14.6052 15.1676 14.7 14.9387 14.7 14.7C14.7 14.4613 14.6052 14.2324 14.4364 14.0636C14.2676 13.8948 14.0387 13.8 13.8 13.8Z" 670 fill="#3B3F6F" /> 671 <path 672 d="M13.8 16.5H6.6C6.3613 16.5 6.13239 16.5948 5.9636 16.7636C5.79482 16.9324 5.7 17.1613 5.7 17.4C5.7 17.6387 5.79482 17.8676 5.9636 18.0364C6.13239 18.2052 6.3613 18.3 6.6 18.3H13.8C14.0387 18.3 14.2676 18.2052 14.4364 18.0364C14.6052 17.8676 14.7 17.6387 14.7 17.4C14.7 17.1613 14.6052 16.9324 14.4364 16.7636C14.2676 16.5948 14.0387 16.5 13.8 16.5Z" 673 fill="#3B3F6F" /> 674 </svg> 675 676 <span class="ml-3">Media Releases</span> 677 </a> 678 </li> 679 <li> 680 681 <a href="/tropical-cyclone/" 682 class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"> 683 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 684 <g clip-path="url(#clip0_221_20694)"> 685 <path 686 d="M10.4985 3.9C11.7564 3.25777 13.1581 2.94922 14.5694 3.00389C15.9806 3.05856 17.3543 3.47462 18.5587 4.21224C19.7631 4.94986 20.758 5.98433 21.4481 7.21659C22.1382 8.44886 22.5004 9.83766 22.5 11.25C22.5 11.4489 22.579 11.6397 22.7197 11.7803C22.8603 11.921 23.0511 12 23.25 12C23.4489 12 23.6397 11.921 23.7803 11.7803C23.921 11.6397 24 11.4489 24 11.25C24 8.66414 22.9728 6.18419 21.1443 4.35571C19.3158 2.52723 16.8359 1.5 14.25 1.5C11.6641 1.5 9.18419 2.52723 7.35571 4.35571C5.52723 6.18419 4.5 8.66414 4.5 11.25C4.49973 12.3624 4.74692 13.461 5.22367 14.4661C5.70043 15.4712 6.39479 16.3576 7.25646 17.0612C8.11814 17.7648 9.12553 18.2679 10.2057 18.534C11.2858 18.8002 12.4116 18.8227 13.5015 18.6C12.2436 19.2422 10.8419 19.5508 9.43065 19.4961C8.01936 19.4414 6.64574 19.0254 5.44132 18.2878C4.23689 17.5501 3.242 16.5157 2.5519 15.2834C1.8618 14.0511 1.49961 12.6623 1.5 11.25C1.5 11.0511 1.42098 10.8603 1.28033 10.7197C1.13968 10.579 0.948912 10.5 0.75 10.5C0.551088 10.5 0.360322 10.579 0.21967 10.7197C0.0790176 10.8603 0 11.0511 0 11.25C0 13.8359 1.02723 16.3158 2.85571 18.1443C4.68419 19.9728 7.16414 21 9.75 21C12.3359 21 14.8158 19.9728 16.6443 18.1443C18.4728 16.3158 19.5 13.8359 19.5 11.25C19.5003 10.1376 19.2531 9.03901 18.7763 8.03391C18.2996 7.02882 17.6052 6.14237 16.7435 5.43878C15.8819 4.7352 14.8745 4.23211 13.7943 3.96597C12.7142 3.69983 11.5884 3.67729 10.4985 3.9ZM15 11.25C15 12.0456 14.6839 12.8087 14.1213 13.3713C13.5587 13.9339 12.7956 14.25 12 14.25C11.2044 14.25 10.4413 13.9339 9.87868 13.3713C9.31607 12.8087 9 12.0456 9 11.25C9 10.4544 9.31607 9.69129 9.87868 9.12868C10.4413 8.56607 11.2044 8.25 12 8.25C12.7956 8.25 13.5587 8.56607 14.1213 9.12868C14.6839 9.69129 15 10.4544 15 11.25Z" 687 fill="#3B3F6F" /> 688 </g> 689 <defs> 690 <clipPath id="clip0_221_20694"> 691 <rect width="24" height="24" fill="white" /> 692 </clipPath> 693 </defs> 694 </svg> 695 696 <span class="ml-3">Tropical Cyclone</span> 697 </a> 698 </li> 699 </ul> 700 <!-- Focus Areas --> 701 <ul class="pt-5 my-5 space-y-2 border-t border-gray-200"> 702 <li> 703 <h3 class="px-2 py-1 text-xs font-semibold text-gray-500 uppercase">Focus Areas</h3> 704 </li> 705 <li> 706 <button type="button" 707 class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100" 708 aria-controls="dropdown-weather" data-collapse-toggle="dropdown-weather"> 709 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 710 <path 711 d="M7.87559 14.8948C6.77159 14.2036 6.11279 13.015 6.11279 11.7148C6.11279 9.64664 7.79519 7.96484 9.86339 7.96484C11.931 7.96484 13.6134 9.64724 13.6134 11.7148H12.4134C12.4134 10.3084 11.2698 9.16484 9.86339 9.16484C8.45699 9.16484 7.31279
71110.309 7.31279 11.7148C7.31279 12.5992 7.76099 13.4074 8.51159 13.8778L7.87559 14.8948Z" 712 fill="#3B3F6F" /> 713 <path 714 d="M3.34865 16.0992C3.14165 16.0992 2.94065 15.9924 2.82905 15.8004C2.66285 15.5136 2.76065 15.147 3.04685 14.9802L4.80365 13.9602C5.08985 13.794 5.45645 13.8906 5.62385 14.178C5.79005 14.4648 5.69225 14.8314 5.40605 14.9982L3.64925 16.0182C3.55445 16.0728 3.45125 16.0992 3.34865 16.0992Z" 715 fill="#3B3F6F" /> 716 <path 717 d="M4.37645 11.7545C4.35605 11.7545 4.33565 11.7539 4.31405 11.7515L2.30105 11.5451C1.97165 11.5115 1.73225 11.2169 1.76525 10.8869C1.79945 10.5575 2.08925 10.3157 2.42405 10.3511L4.43705 10.5575C4.76645 10.5911 5.00585 10.8857 4.97285 11.2157C4.94105 11.5247 4.68065 11.7545 4.37645 11.7545Z" 718 fill="#3B3F6F" /> 719 <path 720 d="M8.70775 6.94722C8.43115 6.94722 8.18215 6.75462 8.12155 6.47322L7.69075 4.47222C7.62115 4.14822 7.82755 3.82902 8.15155 3.75942C8.47315 3.69042 8.79475 3.89622 8.86435 4.21962L9.29515 6.22062C9.36475 6.54462 9.15835 6.86382 8.83435 6.93342C8.79175 6.94302 8.74915 6.94722 8.70775 6.94722Z" 721 fill="#3B3F6F" /> 722 <path 723 d="M5.76495 8.64555C5.62215 8.64555 5.47875 8.59515 5.36475 8.49255L3.85215 7.13655C3.60495 6.91575 3.58455 6.53655 3.80535 6.28935C4.02795 6.04275 4.40715 6.02175 4.65255 6.24315L6.16515 7.59855C6.41235 7.81995 6.43275 8.19855 6.21195 8.44575C6.09315 8.57775 5.92995 8.64555 5.76495 8.64555Z" 724 fill="#3B3F6F" /> 725 <path 726 d="M12.0845 7.29489C12.0035 7.29489 11.9219 7.27809 11.8427 7.24329C11.5397 7.10949 11.4029 6.75489 11.5367 6.45189L12.3641 4.57989C12.4991 4.27749 12.8537 4.14009 13.1555 4.27389C13.4585 4.40769 13.5953 4.76229 13.4621 5.06529L12.6335 6.93729C12.5345 7.16109 12.3143 7.29489 12.0845 7.29489Z" 727 fill="#3B3F6F" /> 728 <path 729 d="M14.6231 9.55257C14.4161 9.55257 14.2151 9.44577 14.1035 9.25377C13.9373 8.96697 14.0351 8.60037 14.3213 8.43357L16.0781 7.41357C16.3643 7.24677 16.7309 7.34397 16.8983 7.63137C17.0645 7.91817 16.9667 8.28477 16.6805 8.45157L14.9237 9.47157C14.8289 9.52677 14.7257 9.55257 14.6231 9.55257Z" 730 fill="#3B3F6F" /> 731 <path 732 d="M19.5215 19.7324H6.51228C5.59368 19.7324 4.84668 18.9854 4.84668 18.0668C4.84668 17.2346 5.45988 16.5428 6.25908 16.4204C6.75168 14.4596 8.52708 13.037 10.5797 13.037C10.8287 13.037 11.0789 13.0622 11.3435 13.1132C12.1217 11.6834 13.6085 10.7852 15.2633 10.7852C17.6375 10.7852 19.5851 12.644 19.7285 14.9822C20.9435 15.0872 21.9005 16.1102 21.9005 17.3522C21.9011 18.665 20.8337 19.7324 19.5215 19.7324ZM6.51228 17.6012C6.25548 17.6012 6.04668 17.81 6.04668 18.0668C6.04668 18.3236 6.25608 18.5324 6.51228 18.5324H19.5215C20.1719 18.5324 20.7011 18.0032 20.7011 17.3534C20.7011 16.7036 20.1719 16.1744 19.5215 16.1744C19.4387 16.1744 19.3499 16.187 19.2425 16.2128L18.4229 16.4138L18.5027 15.5732C18.5075 15.5216 18.5147 15.47 18.5213 15.4184C18.5285 15.3656 18.5369 15.3134 18.5369 15.2588C18.5369 13.454 17.0687 11.9858 15.2633 11.9858C13.9247 11.9858 12.7343 12.7916 12.2321 14.0378L12.0281 14.5442L11.5049 14.3894C11.1551 14.2856 10.8611 14.2376 10.5791 14.2376C8.95488 14.2376 7.56708 15.4598 7.35168 17.0804L7.28268 17.6012H6.51228Z" 733 fill="#3B3F6F" /> 734 </svg> 735 <span class="flex-1 ml-3 text-left whitespace-nowrap truncate">Weather Forecast</span> 736 <svg aria-hidden="true" class="w-6 h-6 dropdown-arrow transition-transform duration-300" 737 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 738 <path fill-rule="evenodd" 739 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 740 clip-rule="evenodd"></path> 741 </svg> 742 </button> 743 <ul id="dropdown-weather" class="hidden py-2 space-y-2"> 744 745 746 </li> 747 <a href="/fiji-weather/fiji-weather/" 748 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 749 Fiji Weather 750 </a> 751 </li> 752 753 </li> 754 <a href="/fiji-weather/regional-weather/" 755 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 756 Regional Weather 757 </a> 758 </li> 759 760 </li> 761 <a href="/fiji-weather/7-day-outlook/" 762 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 763 7 Day Outlook 764 </a> 765 </li> 766 767 </li> 768 <a href="/fiji-weather/5-day-tc-outlook/" 769 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 770 5 Day TC Outlook 771 </a> 772 </li> 773 774 </li> 775 <a href="/fiji-weather/forecast-products/" 776 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 777 Forecast Products 778 </a> 779 </li> 780 781 </li> 782 <a href="/fiji-weather/south-west-pacific-marine-bulletin/" 783 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 784 South West Pacific Marine Bulletin 785 </a> 786 </li> 787 788 </li> 789 <a href="/fiji-weather/zlm-broadcast-frequency/" 790 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 791 ZLM Broadcast Frequency 792 </a> 793 </li> 794 795 </ul> 796 </li> 797 <!-- Observation --> 798 <li> 799 <button type="button" 800 class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100" 801 aria-controls="dropdown-observation" data-collapse-toggle="dropdown-observation"> 802 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 803 <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z" fill="#3B3F6F"/> 804 <path d="M12 7C9.24 7 7 9.24 7 12C7 14.76 9.24 17 12 17C14.76 17 17 14.76 17 12C17 9.24 14.76 7 12 7ZM12 15C10.34 15 9 13.66 9 12C9 10.34 10.34 9 12 9C13.66 9 15 10.34 15 12C15 13.66 13.66 15 12 15Z" fill="#3B3F6F"/> 805 <path d="M12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z" fill="#3B3F6F"/> 806 </svg>
807 <span class="flex-1 ml-3 text-left whitespace-nowrap truncate">Maps & Observation</span> 808 <svg aria-hidden="true" class="w-6 h-6 dropdown-arrow transition-transform duration-300" 809 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 810 <path fill-rule="evenodd" 811 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 812 clip-rule="evenodd"></path> 813 </svg> 814 </button> 815 <ul id="dropdown-observation" class="hidden py-2 space-y-2"> 816 817 818 <li> 819 <a href="/maps-observation/radar-image/" 820 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 821 Radar Image 822 </a> 823 </li> 824 825 <li> 826 <a href="/maps-observation/rainfall-map/" 827 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 828 Rainfall Map 829 </a> 830 </li> 831 832 <li> 833 <a href="/maps-observation/satellite-image/" 834 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 835 Satellite Image 836 </a> 837 </li> 838 839 <li> 840 <a href="/maps-observation/synoptic-observation/" 841 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 842 Synoptic Observation 843 </a> 844 </li> 845 846 <li> 847 <a href="/maps-observation/weather-map/" 848 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 849 Weather Map 850 </a> 851 </li> 852 853 </ul> 854 </li> 855 <!-- Climate Services --> 856 <li> 857 <button type="button" 858 class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100" 859 aria-controls="dropdown-climate" data-collapse-toggle="dropdown-climate"> 860 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 861 <path 862 d="M14.4205 14.3241V4.39709C14.4205 3.52109 13.7041 2.80469 12.8281 2.80469C11.9521 2.80469 11.2357 3.52109 11.2357 4.39709V4.51409H9.02414C8.67854 4.51409 8.39834 4.79429 8.39834 5.13989C8.39834 5.48549 8.67854 5.76569 9.02414 5.76569H11.2357V7.19969H6.08594H6.08474H6.08354H5.98994C5.94854 7.19969 5.91794 7.21409 5.89454 7.23749C5.64194 7.31909 5.45654 7.54769 5.45654 7.82729C5.45654 8.13989 5.68934 8.38829 5.98874 8.43629C5.98874 8.44049 5.98994 8.44709 5.98994 8.45129H6.06314C6.07094 8.45129 6.07694 8.45549 6.08474 8.45549C6.09254 8.45549 6.09854 8.45129 6.10634 8.45129H11.2357V9.88529H9.02414C8.67854 9.88529 8.39834 10.1655 8.39834 10.5111C8.39834 10.8567 8.67854 11.1369 9.02414 11.1369H11.2357V12.5709H9.02414C8.67854 12.5709 8.39834 12.8511 8.39834 13.1967C8.39834 13.5423 8.67854 13.8225 9.02414 13.8225H11.2357V14.3235C10.1533 14.8989 9.40634 16.0251 9.40634 17.3337C9.40634 19.2207 10.9417 20.7561 12.8281 20.7561C14.7151 20.7561 16.2505 19.2207 16.2505 17.3337C16.2505 16.0257 15.5029 14.8995 14.4205 14.3241ZM12.8275 19.5051C11.6311 19.5051 10.6573 18.5313 10.6573 17.3349C10.6573 16.3203 11.3605 15.4725 12.3025 15.2361V14.5749V13.9659V9.70049C12.3025 9.41369 12.5371 9.17909 12.8239 9.17909C13.1107 9.17909 13.3453 9.41369 13.3453 9.70049V13.9647V14.5749V15.2337C14.2915 15.4677 14.9983 16.3173 14.9983 17.3349C14.9983 18.5313 14.0251 19.5051 12.8275 19.5051Z" 863 fill="#3B3F6F" /> 864 </svg>
865 <span class="flex-1 ml-3 text-left whitespace-nowrap truncate">Climate Services</span> 866 <svg aria-hidden="true" class="w-6 h-6 dropdown-arrow transition-transform duration-300" 867 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 868 <path fill-rule="evenodd" 869 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 870 clip-rule="evenodd"></path> 871 </svg> 872 </button> 873 <ul id="dropdown-climate" class="hidden py-2 space-y-2"> 874 875 876 <li> 877 <a href="/climate-services/2025-26-tc-outlook/" 878 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 879 2025-26 TC Outlook 880 </a> 881 </li> 882 883 <li> 884 <a href="/climate-services/climate-outlooks/" 885 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 886 Climate Outlook 887 </a> 888 </li> 889 890 <li> 891 <a href="/climate-services/climate-outlook-video/" 892 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 893 Climate Outlook Video 894 </a> 895 </li> 896 897 <li> 898 <a href="/climate-services/early-action-rainfall-watch/" 899 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 900 Early Action Rainfall Watch 901 </a> 902 </li> 903 904 <li> 905 <a href="/climate-services/fiji-ocean-outlooks/" 906 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 907 Fiji Ocean Outlook 908 </a> 909 </li> 910 911 <li> 912 <a href="/climate-services/ocean-outlook-video/" 913 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 914 Ocean Outlook Video 915 </a> 916 </li> 917 918 <li> 919 <a href="/climate-services/sugar-outlooks/" 920 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 921 Sugar Outlook 922 </a> 923 </li> 924 925 <li> 926 <a href="/climate-services/hydro-electricity-generation-outlook/" 927 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 928 Climate Outlook for Hydro-Electricity Generation 929 </a> 930 </li> 931 932 <li> 933 <a href="/climate-services/fiji-climate-summaries/" 934 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 935 Fiji Climate Summary 936 </a> 937 </li> 938 939 <li> 940 <a href="/climate-services/annual-climate-summary/" 941 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 942 Annual Climate Summary 943 </a> 944 </li> 945 946 <li> 947 <a href="/climate-services/climate-data/" 948 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 949 Climate Data 950 </a> 951 </li> 952 953 <li> 954 <a href="/climate-services/climate-data-products/" 955 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 956 Climate Data Products 957 </a> 958 </li> 959 960 <li> 961 <a href="/climate-services/climate-change/" 962 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 963 Climate Change 964 </a> 965 </li> 966 967 <li> 968 <a href="/climate-services/ocean-portal/" 969 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 970 Ocean Portal 971 </a> 972 </li> 973 974 <li> 975 <a href="/climate-services/suva-tide-prediction/" 976 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 977 Suva Tide Prediction 978 </a> 979 </li> 980 981 <li> 982 <a href="/climate-services/lautoka-tide-prediction/" 983 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 984 Lautoka Tide Prediction 985 </a> 986 </li> 987 988 <li> 989 <a href="/climate-services/port-denarau-tide-prediction/" 990 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 991 Port Denarau Tide Prediction 992 </a> 993 </li> 994 995 <li> 996 <a href="/climate-services/vatia-tide-prediction/" 997 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 998 Vatia Tide Prediction 999 </a> 1000 </li> 1001 1002 <li> 1003 <a href="/climate-services/aeronautical-summaries/" 1004 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 1005 Aeronautical Summaries 1006 </a> 1007 </li> 1008 1009 <li> 1010 <a href="/climate-services/climate-normals/" 1011 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 1012 Climate Normals 1013 </a> 1014 </li> 1015 1016 </ul> 1017 </li> 1018 <!-- Hydrology Services --> 1019 <li> 1020 <button type="button" 1021 class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100" 1022 aria-controls="dropdown-hydrology" data-collapse-toggle="dropdown-hydrology"> 1023 <svg width="24" height="24" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg"> 1024 <path d="M5.13623 18.6406C17.4753 25.1897 27.548 16.6135 19.9935 11" stroke="#3B3F6F" 1025 stroke-width="2" /> 1026 <path 1027 d="M3.49996 8.5C3.49996 8.7829 3.65605 9.05421 3.93388 9.25425C4.21171 9.45429 4.58853 9.56667 4.98145 9.56667" 1028 fill="#3B3F6F" /> 1029 <path d="M18.5044 1.67676L21.4088 3.60324" stroke="#3B3F6F" stroke-width="2" 1030 stroke-linecap="round" /> 1031 <rect x="0.496065" y="-0.0722922" width="2.57321" height="1.68317" 1032 transform="matrix(0.608014 -0.793926 0.809314 0.587377 10.4956 12.9617)" stroke="#3E426F" 1033 stroke-width="0.7" /> 1034 <rect x="3.43154" y="16.35" width="17.7901" height="1.3" stroke="#3E426F" stroke-width="0.7" /> 1035 <path 1036 d="M21.0717 9.5C21.0717 10.592 20.1585 11.5 19.0036 11.5C17.8487 11.5 16.9355 10.592 16.9355 9.5C16.9355 8.40801 17.8487 7.5 19.0036 7.5C20.1585 7.5 21.0717 8.40801 21.0717 9.5Z" 1037 stroke="#3E426F" /> 1038 <line x1="10" y1="22" x2="18.2178" y2="22" stroke="#3B3F6F" stroke-width="2" /> 1039 <path 1040 d="M1 8.32743C1 10.4448 2.73844 11.7778 5.5 11.7778C8.26156 11.7778 10 10.4448 10 8.32743C10 6.05524 6.77406 2.98778 5.78469 2.10052C5.74948 2.06899 5.7058 2.04369 5.65663 2.02634C5.60746 2.00898 5.55397 2 5.49984 2C5.44572 2 5.39223 2.00898 5.34306 2.02634C5.29389 2.04369 5.2502 2.06899 5.215 2.10052C4.22594 2.98778 1 6.05524 1 8.32743Z" 1041 stroke="#3E426F" stroke-width="1.5" stroke-miterlimit="10" /> 1042 </svg> 1043
1044 <span class="flex-1 ml-3 text-left whitespace-nowrap truncate">Hydrological Services</span> 1045 <svg aria-hidden="true" class="w-6 h-6 dropdown-arrow transition-transform duration-300" 1046 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 1047 <path fill-rule="evenodd" 1048 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 1049 clip-rule="evenodd"></path> 1050 </svg> 1051 </button> 1052 <ul id="dropdown-hydrology" class="hidden py-2 space-y-2"> 1053 1054 1055 </ul> 1056 </li> 1057 <!-- Aviation Weather Products --> 1058 <li> 1059 <button type="button" 1060 class="flex items-center p-2 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100" 1061 aria-controls="dropdown-aviation" data-collapse-toggle="dropdown-aviation"> 1062 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 1063 <path 1064 d="M16.0404 21.797C15.6187 21.797 15.2008 21.5102 14.8834 20.9634L11.5497 15.4323L12.8228 13.1807L16.076 18.5786L16.8242 17.9064C16.6129 16.3379 16.2846 13.4533 16.0074 11.6059C15.7907 10.1597 16.1712 8.64608 16.9101 8.00679L22.1709 3.46595C22.1051 3.36411 21.8206 3.13377 21.1594 3.13377C21.0633 3.13691 20.7322 3.24502 20.467 3.36097L20.0006 3.60854L14.6813 7.92061C14.2743 8.27316 13.7978 8.31077 13.3761 8.02403L10.1558 5.85545L6.88068 4.47189L6.78922 4.55964L10.3278 9.15532L9.22388 11.6529L3.46191 4.17105L6.0612 1.66717C6.42155 1.31775 6.84226 1.2206 7.24194 1.39766L10.8262 2.93948L13.9496 5.04224L14.834 4.27917L19.4033 0.645557L19.9722 0.346282C20.1871 0.249135 20.7844 0 21.1612 0C22.3145 0 23.1386 0.513939 23.6114 1.52615C24.0531 2.47411 24.0157 3.47692 23.9809 3.85767C23.905 4.90122 23.552 5.78651 23.0306 6.23464L17.736 10.8068C18.0708 12.7623 18.4073 15.7221 18.5829 17.3141C18.7339 18.6836 18.3607 20.0702 17.6748 20.6845L16.7812 21.4851C16.5452 21.6951 16.2928 21.797 16.0404 21.797Z" 1065 fill="#3B3F6F" /> 1066 <path 1067 d="M3.38495 17.8624L2.41091 11.9349C2.16671 10.4495 2.5609 8.83402 3.32733 8.17593C4.43766 7.22797 5.73547 7.82182 6.48361 9.62373L7.05523 10.9995L13.858 5.12207L14.6811 7.92053L7.711 13.9436C6.9967 14.5594 6.12875 14.174 5.65041 13.0254L4.9919 11.4398C4.77148 10.9086 4.43948 10.73 4.14407 10.9791C4.17151 10.9603 4.16328 11.0418 4.17059 11.0856L5.14464 17.0132L3.38495 17.8624Z" 1068 fill="#3B3F6F" /> 1069 <path 1070 d="M5.95586 21.5807C5.33393 21.5807 4.59402 21.1827 4.38366 21.0182C4.01874 20.733 3.78735 20.3131 3.69772 19.7678L3.38401 17.8625C2.48953 16.8033 1.14416 15.0139 1.08654 14.9371L0 13.4909L1.82919 11.7266L2.12827 12.6401L2.20875 12.463C2.22247 12.4818 3.57333 14.2775 4.44951 15.3194C4.78517 15.719 5.03211 16.3222 5.14552 17.0179L5.35497 18.2855C5.57721 18.3811 5.89458 18.4563 5.9961 18.4532C5.99061 18.4532 5.89366 18.4626 5.76288 18.5692L6.55034 21.3974C6.38846 21.529 6.17993 21.5807 5.95586 21.5807Z" 1071 fill="#3B3F6F" /> 1072 <path 1073 d="M7.18972 23.9994L4.93066 20.0822L6.23122 17.8807L6.84674 18.9478C6.74614 17.6018 7.12844 16.3013 7.80981 15.7278L13.8846 10.8799L14.6565 13.7191L8.59911 18.5529C8.73813 19.1922 9.00611 20.2937 9.09391 20.6306L9.44603 21.9766L7.18972 23.9994Z" 1074 fill="#3B3F6F" /> 1075 </svg> 1076 <span class="flex-1 ml-3 text-left whitespace-nowrap truncate">Aviation Weather Products</span> 1077 <svg aria-hidden="true" class="w-6 h-6 dropdown-arrow transition-transform duration-300" 1078 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 1079 <path fill-rule="evenodd" 1080 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" 1081 clip-rule="evenodd"></path> 1082 </svg> 1083 </button> 1084 <ul id="dropdown-aviation" class="hidden py-2 space-y-2"> 1085 1086 1087 <li> 1088 <a href="/aviation-weather-products/arfor/" 1089 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 1090 ARFORs 1091 </a> 1092 </li> 1093 1094 <li> 1095 <a href="/aviation-weather-products/metars/" 1096 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 1097 METARs 1098 </a> 1099 </li> 1100 1101 <li> 1102 <a href="/aviation-weather-products/tafs-24-hr/" 1103 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 1104 International Terminal Aerodrome Forecast (24hr TAF) 1105 </a> 1106 </li> 1107 1108 <li> 1109 <a href="/aviation-weather-products/tafs-individual/" 1110 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 1111 Domestic Terminal Aerodrome Forecast 1112 </a> 1113 </li> 1114 1115 <li> 1116 <a href="/aviation-weather-products/rofors/" 1117 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 1118 ROFORs 1119 </a> 1120 </li> 1121 1122 <li> 1123 <a href="/aviation-weather-products/sigmets/" 1124 class="flex items-center p-2 pl-11 w-full text-base font-normal text-gray-900 rounded-lg transition duration-75 group hover:bg-gray-100"> 1125 SIGMETs 1126 </a> 1127 </li> 1128 1129 </ul> 1130 </li> 1131 </ul> 1132 <ul class="pt-5 my-5 space-y-2 border-t border-gray-200"> 1133 <li> 1134 <h3 class="px-2 py-1 text-xs font-semibold text-gray-500 uppercase">Requests & Information</h3> 1135 </li> 1136 <a href="/data-requests/" 1137 class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
1138 <span class="ml-3">Data Request Forms</span> 1139 </a> 1140 <a href="/about-fiji-met/education/" 1141 class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"> 1142 <span class="ml-3">Education</span> 1143 </a> 1144 <a href="/about-fiji-met/" 1145 class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"> 1146 <span class="ml-3">About</span> 1147 </a> 1148 <a href="/vacancy/" 1149 class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"> 1150 <span class="ml-3">Vacancies</span> 1151 </a> 1152 <a href="https://www.met.gov.fj/wigos/" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"> 1153 <span class="ml-3">Wigos</span> 1154 </a> 1155 </ul> 1156 <ul class="pt-5 my-5 space-y-2 border-t border-gray-200"> 1157 <li> 1158 <a href="/about-fiji-met/product-guides/" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group"> 1159 <span class="ml-3">Product Guides</span> 1160 </a> 1161 </li> 1162 </ul> 1163 <div id="alert-update" class="p-2 mb-3 rounded-lg" role="alert"> 1164 <div class="flex justify-center items-center mb-4"> 1165 <img src="/static/core/images/coat_of_arms_fiji.6506a7f80e55.png" alt="Fiji Meteorological Service Logo" 1166 class="h-24 w-auto" loading="lazy"> 1167 </div> 1168 <div class="mb-3 text-sm font-light text-gray-700 text-center bg-gray-100 p-2 rounded-lg"> 1169 <span class="font-bold text-primary-500">RSMC-NADI-Tropical Cyclone Centre</span><br> 1170 The official source of reliable "first-level" information on tropical cyclones occuring 1171 in the South-West Pacific Ocean. 1172 </div> 1173 </div> 1174</div> 1175</aside> 1176 1177
1178<script> 1179 document.addEventListener('DOMContentLoaded', function () { 1180 const letters = document.querySelectorAll('#main-title .letter'); 1181 letters.forEach((letter, index) => { 1182 setTimeout(() => { 1183 letter.style.opacity = 1; 1184 letter.style.animationDelay = `${index * 100}ms`; 1185 }, index * 100); 1186 }); 1187 1188 function adjustSidebarHeight() { 1189 const navbar = document.getElementById('main-nav'); 1190 const sidebar = document.getElementById('sidebar-info'); 1191 const navbarHeight = navbar.offsetHeight; 1192 1193 sidebar.style.height = `calc(100vh - ${navbarHeight}px)`; 1194 sidebar.style.top = `${navbarHeight}px`; 1195 } 1196 1197 adjustSidebarHeight(); 1198 window.addEventListener('resize', adjustSidebarHeight); 1199 1200 const toggleButton = document.querySelector('[data-drawer-toggle="sidebar-info"]'); 1201 const sidebar = document.getElementById('sidebar-info'); 1202 1203 if (toggleButton && sidebar) { 1204 toggleButton.addEventListener('click', function () { 1205 sidebar.classList.toggle('-translate-x-full'); 1206 }); 1207 } 1208 }); 1209</script>
1209 1210<!--
1210<script type="text/javascript"> 1211 function googleTranslateElementInit() { 1212 new google.translate.TranslateElement({ 1213 pageLanguage: 'en', 1214 includedLanguages: 'en,fr,es,de,hi,zh-CN,ja,ko,fj,sm,mi,to,ty,bn,ur,ta', // Includes Fijian (fj), Hindi (hi), Chinese (zh-CN), Japanese (ja), Korean (ko), and other South Pacific languages 1215 layout: google.translate.TranslateElement.InlineLayout.COMBINED 1216 }, 'google_translate_element'); 1217 } 1218</script>
1218 --> 1219 1220 1221 </header> 1222 <main class="py-2 mx-auto px-2 w-full !max-w-[1700px]"> 1223 1224<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> 1225 1226 <nav class="mb-6 rounded-sm border border-gray-200 bg-white px-4 py-3 shadow-sm sm:px-5 border-l-4 border-l-primary-500" aria-label="Breadcrumb"> 1227 <ol class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm"> 1228 <li class="inline-flex items-center"> 1229 <a href="/" 1230 class="inline-flex items-center gap-1.5 font-medium text-primary-700 transition-colors duration-200 hover:text-primary-500"> 1231 <svg class="h-4 w-4 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> 1232 <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path> 1233 </svg> 1234 <span class="truncate">Home</span> 1235 </a> 1236 </li> 1237 1238 1239 1240 1241 1242 1243 1244 1245 <li class="inline-flex items-center gap-2" aria-hidden="true"> 1246 <svg class="h-3.5 w-3.5 shrink-0 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1247 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 1248 </svg> 1249 </li> 1250 <li class="inline-flex items-center"> 1251 <a href="/fiji-weather/" 1252 class="truncate font-medium text-gray-600 transition-colors duration-200 hover:text-primary-600"> 1253 Weather 1254 </a> 1255 </li> 1256 1257 1258 1259 1260 <li class="inline-flex items-center gap-2" aria-hidden="true"> 1261 <svg class="h-3.5 w-3.5 shrink-0 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1262 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 1263 </svg> 1264 </li> 1265 <li class="inline-flex min-w-0 items-center"> 1266 <span class="truncate font-semibold text-primary-800" aria-current="page">Forecast Products</span> 1267 </li> 1268 </ol> 1269</nav> 1270 1271 1272 1273 1274<div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"> 1275 1276 <div class="border-t-4 border-primary-600 px-5 py-4"> 1277 <h3 class="text-xl font-bold text-primary-800 sm:text-2xl">Numerical Weather Prediction - Fiji HWRF</h3> 1278 1279 <div class="mt-3 text-base leading-relaxed text-gray-700"> 1280 <p data-block-key="zz8j4">Numerical forecast products including wind forecasts, relative humidity, sea-level pressure, sea surface temperature, and rainfall accumulation data.</p><p data-block-key="e8cso"></p> 1281 </div> 1282 1283 </div> 1284</div> 1285 1286 1287 <div class="w-full mt-8"> 1288 1289 <div class="bg-gray-100 rounded-lg shadow-sm mx-auto max-w-4xl"> 1290 <form id="product-form" class="p-6"> 1291 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 justify-center"> 1292 1293 <div> 1294 <label class="block text-sm font-medium text-gray-700 mb-2" for="region"> 1295 Region 1296 </label> 1297 <select id="region" name="region" 1298 class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"> 1299 <option value="">Select a region</option> 1300 1301 <option value="Fiji">Fiji</option> 1302 1303 <option value="Area of Responsibility">Area Of Responsibility</option> 1304 1305 </select> 1306 </div> 1307 1308 1309 <div> 1310 <label class="block text-sm font-medium text-gray-700 mb-2" for="product"> 1311 Forecast Product 1312 </label> 1313 <select id="product" name="product" disabled 1314 class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"> 1315 <option value="">
1315Select a region first</option> 1316 </select> 1317 </div> 1318 1319 1320 <div class="flex items-end"> 1321 <button type="submit" 1322 class="w-full bg-primary-600 text-white px-4 py-2 rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"> 1323 Show Forecast 1324 </button> 1325 </div> 1326 </div> 1327 </form> 1328 </div> 1329 1330 1331 <div id="product-display" class="mt-8 hidden"> 1332 1333 </div> 1334 </div> 1335</div> 1336 1337 </main> 1338 <style> 1339 .floating-rss { 1340 position: fixed; 1341 right: 20px; 1342 bottom: 20px; 1343 z-index: 1000; 1344 } 1345 1346 .floating-rss-button { 1347 display: flex; 1348 align-items: center; 1349 justify-content: center; 1350 width: 48px; 1351 height: 48px; 1352 border-radius: 50%; 1353 background-color: #FF6B00; 1354 box-shadow: 0 2px 5px rgba(0,0,0,0.2); 1355 transition: all 0.3s ease; 1356 position: relative; 1357 } 1358 1359 .floating-rss-button:hover { 1360 background-color: #FF8533; 1361 transform: scale(1.1); 1362 } 1363 1364 .rss-icon { 1365 width: 24px; 1366 height: 24px; 1367 fill: white; 1368 } 1369 1370 /* Tooltip */ 1371 .floating-rss-button .tooltip { 1372 position: absolute; 1373 right: 100%; 1374 top: 50%; 1375 transform: translateY(-50%); 1376 background: #333; 1377 color: white; 1378 padding: 8px 12px; 1379 border-radius: 4px; 1380 font-size: 14px; 1381 white-space: nowrap; 1382 margin-right: 10px; 1383 opacity: 0; 1384 visibility: hidden; 1385 transition: all 0.3s ease; 1386 } 1387 1388 .floating-rss-button .tooltip::after { 1389 content: ''; 1390 position: absolute; 1391 right: -6px; 1392 top: 50%; 1393 transform: translateY(-50%); 1394 border-width: 6px 0 6px 6px; 1395 border-style: solid; 1396 border-color: transparent transparent transparent #333; 1397 } 1398 1399 .floating-rss-button:hover .tooltip { 1400 opacity: 1; 1401 visibility: visible; 1402 } 1403 1404 /* Responsive adjustments */ 1405 @media (max-width: 768px) { 1406 .floating-rss { 1407 right: 10px; 1408 bottom: 10px; 1409 } 1410 1411 .floating-rss-button { 1412 width: 40px; 1413 height: 40px; 1414 } 1415 1416 .rss-icon { 1417 width: 20px; 1418 height: 20px; 1419 } 1420 } 1421</style> 1422<div class="floating-rss"> 1423 <a href="/feed/warnings/" class="floating-rss-button" title="Subscribe to Weather Alerts"> 1424 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="rss-icon"> 1425 <path d="M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z"/> 1426 </svg> 1427 <span class="tooltip">Subscribe to Alerts</span> 1428 </a> 1429</div> 1430 1431 1432 1433<footer class="mt-12 w-full flex-shrink-0 border-t-4 border-primary-300 bg-gradient-to-r from-primary-700 via-primary-600 to-primary-500 text-white"> 1434 <div class="mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 lg:px-8"> 1435 <div class="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4"> 1436 <div class="lg:col-span-1"> 1437 <a href="/" class="inline-flex items-center gap-3"> 1438 <img src="/static/core/images/fijimetlogo.ecf8cc80f96a.svg" class="h-10 w-10 brightness-0 invert" alt="Fiji Met logo"> 1439 <div> 1440 <p class="text-sm font-bold uppercase tracking-wide">Fiji Meteorological Service</p> 1441 <p class="text-xs text-white/75">RSMC Nadi â Tropical Cyclone Centre</p> 1442 </div> 1443 </a> 1444 <p class="mt-4 text-sm leading-relaxed text-white/80"> 1445 Official first-level tropical cyclone information for the South-West Pacific Ocean, designated by WMO in 1995. 1446 </p> 1447 <a href="#" class="mt-4 inline-block"> 1448 <img class="h-16 w-16 rounded-lg border border-white/20 shadow-sm" src="/static/core/images/iso9001.d09526759e70.jpeg" alt="ISO 9001 Certification"> 1449 </a> 1450 </div> 1451 1452 <div> 1453 <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-white/90">Quick Links</h2> 1454 <ul class="space-y-2 text-sm"> 1455 <li><a href="/data-requests/" class="text-white/85 transition-colors hover:text-white">Data Requests</a></li> 1456 <li><a href="/about-fiji-met/education/" class="text-white/85 transition-colors hover:text-white">Education</a></li> 1457 <li><a href="/about-fiji-met/" class="text-white/85 transition-colors hover:text-white">About</a></li> 1458 <li><a href="/about-fiji-met/contact-us/" class="text-white/85 transition-colors hover:text-white">Contact</a></li> 1459 <li><a href="/vacancy/" class="text-white/85 transition-colors hover:text-white">Vacancies</a></li> 1460 <li><a href="/about-fiji-met/product-guides/" class="text-white/85 transition-colors hover:text-white">Other Links</a></li> 1461 </ul> 1462 </div> 1463 1464 <div> 1465 <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-white/90">WMO Observing System</h2> 1466 <ul class="space-y-2 text-sm"> 1467 <li><a href="/maps-observation/radar-image/" class="text-white/85 transition-colors hover:text-white">Radar</a></li> 1468 <li><a href="/maps-observation/satellite-image/" class="text-white/85 transition-colors hover:text-white">Satellite</a></li> 1469 <li><a href="/maps-observation/weather-map/" class="text-white/85 transition-colors hover:text-white">Maps</a></li> 1470 <li><a href="/fiji-weather/forecast-products/" class="text-white/85 transition-colors hover:text-white">Forecast Models</a></li> 1471 </ul> 1472 <div class="mt-4 flex flex-wrap gap-2">
1473 <span class="rounded-full bg-white/10 px-3 py-1 text-xs text-white/90">JAXA Rainfall Watch</span> 1474 <span class="rounded-full bg-white/10 px-3 py-1 text-xs text-white/90">Wave Forecast SW Fiji</span> 1475 </div> 1476 </div> 1477 1478 <div> 1479 <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-white/90">Stay Connected</h2> 1480 <p class="mb-4 text-sm text-white/80">Follow Fiji Meteorological Service for updates and warnings.</p> 1481 <div class="flex flex-wrap gap-3"> 1482 <a href="https://www.facebook.com/FijiMetService/" class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-white/20" aria-label="Facebook"> 1483 <svg class="h-5 w-5" viewBox="0 0 23 27" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.3083 5.62994H15.3335V2.17969H12.852C11.7524 2.18121 10.6982 2.68358 9.92059 3.57661C9.14302 4.46964 8.7056 5.68041 8.70427 6.94334V9.0802H6.7085V12.5304H8.71128V23.96H11.7155V12.5304H14.7407L15.3335 9.0802H11.7155V6.30964C11.7178 6.13001 11.781 5.95851 11.8917 5.83158C12.0024 5.70465 12.1519 5.63232 12.3083 5.62994Z"/></svg> 1484 </a> 1485 <a href="https://twitter.com/FJMETservice" class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-white/20" aria-label="Twitter"> 1486 <svg class="h-5 w-5" viewBox="0 0 21 23" fill="currentColor" aria-hidden="true"><path d="M12.4979 9.37712L20.3156 0.0664062H18.463L11.6749 8.15077L6.25324 0.0664062H0L8.19861 12.2914L0 22.0551H1.85265L9.02109 13.5177L14.7468 22.0551H21L12.4974 9.37712H12.4979ZM9.96039 12.3991L9.1297 11.1818L2.52019 1.49532H5.36576L10.6997 9.31259L11.5304 10.5299L18.4639 20.6912H15.6183L9.96039 12.3996V12.3991Z"/></svg> 1487 </a> 1488 <a href="https://www.youtube.com/channel/UCf-5-1iGrEeb2nqMTIJrkOA" class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-white/20" aria-label="YouTube"> 1489 <svg class="h-5 w-5" viewBox="0 0 22 26" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.9798 8.91593C19.8932 8.1723 19.6419 7.46541 19.2493 6.8607C18.7628 6.30676 18.103 5.99139 17.4125 5.98273C14.8507 5.77344 11.0002 5.77344 11.0002 5.77344C11.0002 5.77344 7.15148 5.77344 4.586 5.98273C3.8957 5.99121 3.23614 6.30663 2.75007 6.8607C2.35577 7.46482 2.10406 8.17248 2.01866 8.91698C1.90424 10.0308 1.84243 11.1507 1.8335 12.2719V13.8416C1.84237 14.9628 1.90418 16.0827 2.01866 17.1965C2.10569 17.9417 2.35511 18.6508 2.74452 19.2601C3.30344 19.8208 4.02206 20.1358 4.76931 20.1475C6.2349 20.3055 11.0011 20.3568 11.0011 20.3568C11.0011 20.3568 14.8535 20.3568 17.4153 20.1475C18.1062 20.1384 18.7662 19.8227 19.253 19.2685C19.6447 18.663 19.8953 17.9559 19.9817 17.2122C20.0961 16.0984 20.1579 14.9785 20.1668 13.8573V12.2708C20.1564 11.1496 20.094 10.0298 19.9798 8.91593ZM9.15498 15.7744V9.89331L14.1545 12.8433L9.15498 15.7744Z"/></svg> 1490 </a> 1491 <a href="https://www.instagram.com/fiji_meteorological_service/" class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-white/20" aria-label="Instagram"> 1492 <svg class="h-5 w-5" viewBox="0 0 22 23" fill="currentColor" aria-hidden="true"><path d="M11 2.04727C13.9391 2.04727 14.2871 2.06016 15.443 2.11172C16.5172 2.15898 17.0973 2.33945 17.484 2.48984C17.9953 2.6875 18.3648 2.92813 18.7473 3.31055C19.134 3.69727 19.3703 4.0625 19.568 4.57383C19.7184 4.96055 19.8988 5.54492 19.9461 6.61484C19.9977 7.775 20.0105 8.12305 20.0105 11.0578C20.0105 13.9969 19.9977 14.3449 19.9461 15.5008C19.8988 16.575 19.7184 17.1551 19.568 17.5418C19.3703 18.0531 19.1297 18.4227 18.7473 18.8051C18.3605 19.1918 17.9953 19.4281 17.484 19.6258C17.0973 19.7762 16.5129 19.9566 15.443 20.0039C14.2828 20.0555 13.9348 20.0684 11 20.0684C8.06094 20.0684 7.71289 20.0555 6.55703 20.0039C5.48281 19.9566 4.90273 19.7762 4.51602 19.6258C4.00469 19.4281 3.63516 19.1875 3.25273 18.8051C2.86602 18.4184 2.62969 18.0531 2.43203 17.5418C2.28164 17.1551 2.10117 16.5707 2.05391 15.5008C2.00234 14.3406 1.98945 13.9926 1.98945 11.0578C1.98945 8.11875 2.00234 7.7707 2.05391 6.61484C2.10117 5.54062 2.28164 4.96055 2.43203 4.57383C2.62969 4.0625 2.87031 3.69297 3.25273 3.31055C3.63945 2.92383 4.00469 2.6875 4.51602 2.48984C4.90273 2.33945 5.48711 2.15898 6.55703 2.11172C7.71289 2.06016 8.06094 2.04727 11 2.04727ZM11 0.0664062C8.01367 0.0664062 7.63984 0.0792969 6.4668 0.130859C5.29805 0.182422 4.49453 0.371484 3.79844 0.642187C3.07227 0.925781 2.45781 1.29961 1.84766 1.91406C1.2332 2.52422 0.859375 3.13867 0.575781 3.86055C0.305078 4.56094 0.116016 5.36016 0.0644531 6.52891C0.0128906 7.70625 0 8.08008 0 11.0664C0 14.0527 0.0128906 14.4266 0.0644531 15.5996C0.116016 16.7684 0.305078 17.5719 0.575781 18.268C0.859375 18.9941 1.2332 19.6086 1.84766 20.2188C2.45781 20.8289 3.07227 21.207 3.79414 21.4863C4.49453 21.757 5.29375 21.9461 6.4625 21.9977C7.63555 22.0492 8.00937 22.0621 10.9957 22.0621C13.982 22.0621 14.3559 22.0492 15.5289 21.9977C16.6977 21.9461 17.5012 21.757 18.1973 21.4863C18.9191 21.207 19.5336 20.8289 20.1437 20.2188C20.7539 19.6086 21.132 18.9941 21.4113 18.2723C21.682 17.5719 21.8711 16.7727 21.9227 15.6039C21.9742 14.4309 21.9871 14.057 21.9871 11.0707C21.9871 8.08438 21.9742 7.71055 21.9227 6.5375C21.8711 5.36875 21.682 4.56523 21.4113 3.86914C21.1406 3.13867 20.7668 2.52422 20.1523 1.91406C19.5422 1.30391 18.9277 0.925781 18.2059 0.646484C17.5055 0.375781 16.7062 0.186719 15.5375 0.135156C14.3602 0.0792969 13.9863 0.0664062 11 0.0664062Z"/><path d="M11 5.41406C7.88047 5.41406 5.34961 7.94492 5.34961 11.0645C5.34961 14.184 7.88047 16.7148 11 16.7148C14.1195 16.7148 16.6504 14.184 16.6504 11.
14920645C16.6504 7.94492 14.1195 5.41406 11 5.41406ZM11 14.7297C8.97617 14.7297 7.33477 13.0883 7.33477 11.0645C7.33477 9.04063 8.97617 7.39922 11 7.39922C13.0238 7.39922 14.6652 9.04063 14.6652 11.0645C14.6652 13.0883 13.0238 14.7297 11 14.7297Z"/><path d="M18.193 5.19414C18.193 5.92461 17.6 6.51328 16.8738 6.51328C16.1434 6.51328 15.5547 5.92032 15.5547 5.19414C15.5547 4.46367 16.1477 3.875 16.8738 3.875C17.6 3.875 18.193 4.46797 18.193 5.19414Z"/></svg> 1493 </a> 1494 <a href="/feed/warnings/" class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-white/10 transition-colors hover:bg-white/20" aria-label="Weather alerts RSS feed"> 1495 <svg class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6.18,15.64A2.18,2.18 0 0,1 8.36,17.82C8.36,19 7.38,20 6.18,20C5,20 4,19 4,17.82A2.18,2.18 0 0,1 6.18,15.64M4,4.44A15.56,15.56 0 0,1 19.56,20H16.73A12.73,12.73 0 0,0 4,7.27V4.44M4,10.1A9.9,9.9 0 0,1 13.9,20H11.07A7.07,7.07 0 0,0 4,12.93V10.1Z"/></svg> 1496 </a> 1497 </div> 1498 </div> 1499 </div> 1500 1501 <div class="mt-10 border-t border-white/20 pt-6 text-center text-sm text-white/70"> 1502 <p> 1503 © 2026 1504 <a href="https://www.met.gov.fj/" class="font-medium text-white hover:underline">Fiji Meteorological Services</a>. 1505 All Rights Reserved. 1506 </p> 1507 </div> 1508 </div> 1509
1509<script id="aioa-adawidget" src="https://www.skynettechnologies.com/accessibility/js/all-in-one-accessibility-js-widget-minify.js?colorcode="></script>
1509 1510</footer> 1511 1512 1513 1514<style> 1515 .page-loader { 1516 position: fixed; 1517 inset: 0; 1518 z-index: 99999; 1519 display: flex; 1520 align-items: center; 1521 justify-content: center; 1522 background: linear-gradient(135deg, #353863 0%, #20223c 100%); 1523 transition: opacity 0.4s ease, visibility 0.4s ease; 1524 } 1525 1526 .page-loader.hidden { 1527 opacity: 0; 1528 visibility: hidden; 1529 pointer-events: none; 1530 } 1531 1532 .loader-content { 1533 display: flex; 1534 flex-direction: column; 1535 align-items: center; 1536 gap: 1rem; 1537 text-align: center; 1538 } 1539 1540 .loader-logo { 1541 width: 72px; 1542 height: 72px; 1543 object-fit: contain; 1544 filter: brightness(0) invert(1); 1545 } 1546 1547 .loader-text { 1548 color: white; 1549 font-size: 0.95rem; 1550 font-weight: 600; 1551 letter-spacing: 0.08em; 1552 text-transform: uppercase; 1553 } 1554 1555 .spinner-circle { 1556 width: 44px; 1557 height: 44px; 1558 border: 3px solid rgba(255, 255, 255, 0.25); 1559 border-top-color: #ffffff; 1560 border-radius: 50%; 1561 animation: spin 0.8s linear infinite; 1562 } 1563 1564 .spinner-overlay { 1565 position: fixed; 1566 inset: 0; 1567 z-index: 9999; 1568 display: flex; 1569 align-items: center; 1570 justify-content: center; 1571 background: rgba(32, 34, 60, 0.55); 1572 opacity: 0; 1573 visibility: hidden; 1574 pointer-events: none; 1575 transition: opacity 0.2s ease, visibility 0.2s ease; 1576 } 1577 1578 .spinner-overlay.visible { 1579 opacity: 1; 1580 visibility: visible; 1581 pointer-events: auto; 1582 } 1583 1584 @keyframes spin { 1585 to { 1586 transform: rotate(360deg); 1587 } 1588 } 1589 1590 @media (prefers-reduced-motion: reduce) { 1591 .spinner-circle { 1592 animation: none; 1593 } 1594 1595 .page-loader, 1596 .spinner-overlay { 1597 transition: none; 1598 } 1599 } 1600</style> 1601 1602<div class="page-loader" id="pageLoader" aria-live="polite" aria-label="Loading page"> 1603 <div class="loader-content"> 1604 <img class="loader-logo" src="/static/core/images/fijimetlogo.ecf8cc80f96a.svg" alt="Fiji Met logo"> 1605 <div class="spinner-circle" aria-hidden="true"></div> 1606 <div class="loader-text">Loading</div> 1607 </div> 1608</div> 1609 1610<div class="spinner-overlay" aria-live="polite" aria-label="Loading content"> 1611 <div class="spinner-circle" aria-hidden="true"></div> 1612</div> 1613
1614<script> 1615 const pageLoader = document.getElementById('pageLoader'); 1616 const spinner = document.querySelector('.spinner-overlay'); 1617 1618 function hidePageLoader() { 1619 if (!pageLoader) { 1620 return; 1621 } 1622 pageLoader.classList.add('hidden'); 1623 setTimeout(() => { 1624 pageLoader.style.display = 'none'; 1625 }, 400); 1626 } 1627 1628 function showSpinner() { 1629 spinner?.classList.add('visible'); 1630 } 1631 1632 function hideSpinner() { 1633 spinner?.classList.remove('visible'); 1634 } 1635 1636 function showSpinnerWithTimeout(timeout = 30000) { 1637 showSpinner(); 1638 setTimeout(hideSpinner, timeout); 1639 } 1640 1641 globalThis.addEventListener('load', hidePageLoader); 1642 setTimeout(hidePageLoader, 3000); 1643 1644 globalThis.addEventListener('error', () => { 1645 hidePageLoader(); 1646 hideSpinner(); 1647 }); 1648 1649 globalThis.addEventListener('popstate', hideSpinner); 1650 1651 globalThis.addEventListener('pageshow', (event) => { 1652 if (event.persisted) { 1653 hidePageLoader(); 1654 hideSpinner(); 1655 } 1656 }); 1657 1658 if ('navigation' in globalThis) { 1659 globalThis.navigation.addEventListener('navigate', (event) => { 1660 const newUrl = new URL(event.destination.url); 1661 const currentUrl = new URL(globalThis.location.href); 1662 1663 if ( 1664 (newUrl.pathname === currentUrl.pathname && newUrl.search === currentUrl.search) || 1665 event.navigationType === 'traverse' 1666 ) { 1667 hideSpinner(); 1668 return; 1669 } 1670 1671 showSpinnerWithTimeout(); 1672 }); 1673 } else { 1674 globalThis.addEventListener('beforeunload', (event) => { 1675 if (!event.currentTarget.location.hash) { 1676 showSpinner(); 1677 } 1678 }); 1679 } 1680</script>
1680 1681 1682 1683 1684
1684<script type="text/javascript" src="/static/core/js/app.d41d8cd98f00.js"></script>
1684 1685
1685<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
1685 1686
1686<script src='https://unpkg.com/[email protected]/dist/panzoom.min.js'></script>
1686 1687
1687<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js"></script>
1687 1688
1688<script type="text/javascript" src="/static/core/js/libgif.1e1a32e8e9f2.js"></script>
1688 1689
1689<script type="text/javascript" src="/static/core/js/rubbable.b5b84d719b05.js"></script>
1689 1690
1690<script src="https://code.jquery.com/jquery-3.7.1.min.js" 1691 integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous" defer></script>
1691 1692
1692<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
1692 1693
1693<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
1693 1694
1694<script type="text/javascript"> 1695 // Initialize medium-zoom 1696 mediumZoom('.zoom-image', { 1697 background: 'rgba(0, 0, 0, 0.5)', 1698 margin: 24, 1699 scrollOffset: 2, 1700 container: document.body, 1701 template: null, 1702 zIndex: 999, 1703 }); 1704 </script>
1704 1705 1706
1707<script type="text/javascript" defer> 1708 // Parse products data from server 1709 const products = JSON.parse(`{ 1710 "products": [ 1711 { 1712 "region": "Fiji", 1713 "product_title": "Hourly Rainfall Accumulation", 1714 "product_name": "fiji_hourly_rainfall", 1715 "product_summary": "Hourly rainfall accumulation forecast for Fiji region", 1716 "product_image": "/gifs/forecast_model/fiji_hourly_rainfall_desktop.gif", 1717 "product_video": "/gifs/forecast_model/videos/fiji_hourly_rainfall.mp4" 1718 }, 1719 { 1720 "region": "Fiji", 1721 "product_title": "Three Hourly Rainfall Accumulation", 1722 "product_name": "fiji_three_hourly_rainfall", 1723 "product_summary": "Three hourly rainfall accumulation forecast for Fiji region", 1724 "product_image": "/gifs/forecast_model/fiji_three_hourly_rainfall_desktop.gif", 1725 "product_video": "/gifs/forecast_model/videos/fiji_three_hourly_rainfall.mp4" 1726 }, 1727 { 1728 "region": "Fiji", 1729 "product_title": "Twelve Hourly Rainfall Accumulation", 1730 "product_name": "fiji_twelve_hourly_rainfall", 1731 "product_summary": "Twelve hourly rainfall accumulation forecast for Fiji region", 1732 "product_image": "/gifs/forecast_model/fiji_twelve_hourly_rainfall_desktop.gif", 1733 "product_video": "/gifs/forecast_model/videos/fiji_twelve_hourly_rainfall.mp4" 1734 }, 1735 { 1736 "region": "Fiji", 1737 "product_title": "Twenty Four Hourly Rainfall Accumulation", 1738 "product_name": "fiji_twenty_four_hourly_rainfall", 1739 "product_summary": "Twenty four hourly rainfall accumulation forecast for Fiji region", 1740 "product_image": "/gifs/forecast_model/fiji_twenty_four_hourly_rainfall_desktop.gif", 1741 "product_video": "/gifs/forecast_model/videos/fiji_twenty_four_hourly_rainfall.mp4" 1742 }, 1743 { 1744 "region": "Fiji", 1745 "product_title": "Sea Surface Temperature", 1746 "product_name": "fiji_sea_surface_temperature", 1747 "product_summary": "Sea surface temperature forecast for Fiji region", 1748 "product_image": "/gifs/forecast_model/fiji_sea_surface_temperature_desktop.gif", 1749 "product_video": "/gifs/forecast_model/videos/fiji_sea_surface_temperature.mp4" 1750 }, 1751 { 1752 "region": "Fiji", 1753 "product_title": "Mean Sea Level Pressure", 1754 "product_name": "fiji_mean_sea_level_pressure", 1755 "product_summary": "Mean sea level pressure forecast for Fiji region", 1756 "product_image": "/gifs/forecast_model/fiji_mean_sea_level_pressure_desktop.gif", 1757 "product_video": "/gifs/forecast_model/videos/fiji_mean_sea_level_pressure.mp4" 1758 }, 1759 { 1760 "region": "Fiji", 1761 "product_title": "Temperature Two Meters", 1762 "product_name": "fiji_temperature_two_meter", 1763 "product_summary": "Temperature at two meters forecast for Fiji region", 1764 "product_image": "/gifs/forecast_model/fiji_temperature_two_meter_desktop.gif", 1765 "product_video": "/gifs/forecast_model/videos/fiji_temperature_two_meter.mp4" 1766 }, 1767 { 1768 "region": "Fiji", 1769 "product_title": "Relative Humidity Two Meters", 1770 "product_name": "fiji_relative_humidity_two_meter", 1771 "product_summary": "Relative humidity at two meters forecast for Fiji region", 1772 "product_image": "/gifs/forecast_model/fiji_relative_humidity_two_meter_desktop.gif", 1773 "product_video": "/gifs/forecast_model/videos/fiji_relative_humidity_two_meter.mp4" 1774 }, 1775 { 1776 "region": "Fiji", 1777 "product_title": "Relative Humidity 850 hPa", 1778 "product_name": "fiji_relative_humidity_eight_five_hundred_hpa", 1779 "product_summary": "Relative humidity at 850 hPa forecast for Fiji region", 1780 "product_image": "/gifs/forecast_model/fiji_relative_humidity_eight_five_hundred_hpa_desktop.gif", 1781 "product_video": "/gifs/forecast_model/videos/fiji_relative_humidity_eight_five_hundred_hpa.mp4" 1782 }, 1783 { 1784 "region": "Fiji", 1785 "product_title": "Relative Humidity 700 hPa", 1786 "product_name": "fiji_relative_humidity_seven_hundred_hpa", 1787 "product_summary": "Relative humidity at 700 hPa forecast for Fiji region", 1788 "product_image": "/gifs/forecast_model/fiji_relative_humidity_seven_hundred_hpa_desktop.gif", 1789 "product_video": "/gifs/forecast_model/videos/fiji_relative_humidity_seven_hundred_hpa.mp4" 1790 }, 1791 { 1792 "region": "Fiji", 1793 "product_title": "Relative Humidity 500 hPa", 1794 "product_name": "fiji_relative_humidity_five_hundred_hpa", 1795 "product_summary": "Relative humidity at 500 hPa forecast for Fiji region", 1796 "product_image": "/gifs/forecast_model/fiji_relative_humidity_five_hundred_hpa_desktop.gif", 1797 "product_video": "/gifs/forecast_model/videos/fiji_relative_humidity_five_hundred_hpa.mp4" 1798 }, 1799 { 1800 "region": "Fiji", 1801 "product_title": "Wind Forecast 10 Meters", 1802 "product_name": "fiji_wind_forecast_ten_meters", 1803 "product_summary": "Wind forecast at 10 meters for Fiji region", 1804 "product_image": "/gifs/forecast_model/fiji_wind_forecast_ten_meters_desktop.gif", 1805 "product_video": "/gifs/forecast_model/videos/fiji_wind_forecast_ten_meters.mp4" 1806 }, 1807 { 1808 "region": "Fiji", 1809 "product_title": "Wind Forecast 850 hPa", 1810 "product_name": "fiji_wind_forecast_eight_five_hundred_hpa", 1811 "product_summary": "Wind forecast at 850 hPa for Fiji region", 1812 "product_image": "/gifs/forecast_model/fiji_wind_forecast_eight_five_hundred_hpa_desktop.gif", 1813 "product_video": "/gifs/forecast_model/videos/fiji_wind_forecast_eight_five_hundred_hpa.mp4" 1814 }, 1815 { 1816 "region": "Fiji", 1817 "product_title": "Wind Forecast 700 hPa", 1818 "product_name": "fiji_wind_forecast_seven_hundred_hpa", 1819 "product_summary": "Wind forecast at 700 hPa for Fiji region", 1820 "product_image": "/gifs/forecast_model/fiji_wind_forecast_seven_hundred_hpa_desktop.gif", 1821 "product_video": "/gifs/forecast_model/videos/fiji_wind_forecast_seven_hundred_hpa.mp4" 1822 }, 1823 { 1824 "region": "Fiji", 1825 "product_title": "Wind Forecast 500 hPa", 1826 "product_name": "fiji_wind_forecast_five_hundred_hpa", 1827 "product_summary": "Wind forecast at 500 hPa for Fiji region", 1828 "product_image": "/gifs/forecast_model/fiji_wind_forecast_five_hundred_hpa_desktop.gif", 1829 "product_video": "/gifs/forecast_model/videos/fiji_wind_forecast_five_hundred_hpa.mp4" 1830 }, 1831 { 1832 "region": "Fiji", 1833 "product_title": "Wind Forecast 250 hPa", 1834 "product_name": "fiji_wind_forecast_two_hundred_fifty_hpa", 1835 "product_summary": "Wind forecast at 250 hPa for Fiji region", 1836 "product_image": "/gifs/forecast_model/fiji_wind_forecast_two_hundred_fifty_hpa_desktop.gif", 1837 "product_video": "/gifs/forecast_model/videos/fiji_wind_forecast_two_hundred_fifty_hpa.mp4" 1838 }, 1839 { 1840 "region": "Area of Responsibility", 1841 "product_title": "Hourly Rainfall", 1842 "product_name": "area_of_responsibility_hourly_rainfall", 1843 "product_summary": "Hourly rainfall accumulation forecast for Area of Responsibility region", 1844 "product_image": "/gifs/forecast_model/area_of_responsibility_hourly_rainfall_desktop.gif", 1845 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_hourly_rainfall.mp4" 1846 }, 1847 { 1848 "region": "Area of Responsibility", 1849 "product_title": "Three Hourly Rainfall", 1850 "product_name": "area_of_responsibility_three_hourly_rainfall", 1851 "product_summary": "Three hourly rainfall accumulation forecast for Area of Responsibility region", 1852 "product_image": "/gifs/forecast_model/area_of_responsibility_three_hourly_rainfall_desktop.gif", 1853 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_three_hourly_rainfall.mp4" 1854 }, 1855 { 1856 "region": "Area of Responsibility", 1857 "product_title": "Twelve Hourly Rainfall", 1858 "product_name": "area_of_responsibility_twelve_hourly_rainfall", 1859 "product_summary": "Twelve hourly rainfall accumulation forecast for Area of Responsibility region", 1860 "product_image": "/gifs/forecast_model/area_of_responsibility_twelve_hourly_rainfall_desktop.gif", 1861 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_twelve_hourly_rainfall.mp4" 1862 }, 1863 { 1864 "region": "Area of Responsibility", 1865 "product_title": "Twenty Four Hourly Rainfall", 1866 "product_name": "area_of_responsibility_twenty_four_hourly_rainfall", 1867 "product_summary": "Twenty four hourly rainfall accumulation forecast for Area of Responsibility region", 1868 "product_image": "/gifs/forecast_model/area_of_responsibility_twenty_four_hourly_rainfall_desktop.gif", 1869 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_twenty_four_hourly_rainfall.mp4" 1870 }, 1871 { 1872 "region": "Area of Responsibility", 1873 "product_title": "Sea Surface Temperature", 1874 "product_name": "area_of_responsibility_sea_surface_temperature", 1875 "product_summary": "Sea surface temperature forecast for Area of Responsibility region", 1876 "product_image": "/gifs/forecast_model/area_of_responsibility_sea_surface_temperature_desktop.gif", 1877 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_sea_surface_temperature.mp4" 1878 }, 1879 { 1880 "region": "Area of Responsibility", 1881 "product_title": "Mean Sea Level Pressure", 1882 "product_name": "area_of_responsibility_mean_sea_level_pressure", 1883 "product_summary": "Mean sea level pressure forecast for Area of Responsibility region", 1884 "product_image": "/gifs/forecast_model/area_of_responsibility_mean_sea_level_pressure_desktop.gif", 1885 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_mean_sea_level_pressure.mp4" 1886 }, 1887 { 1888 "region": "Area of Responsibility", 1889 "product_title": "Temperature Two Meters", 1890 "product_name": "area_of_responsibility_temperature_two_meters", 1891 "product_summary": "Temperature at two meters forecast for Area of Responsibility region", 1892 "product_image": "/gifs/forecast_model/area_of_responsibility_temperature_two_meters_desktop.gif", 1893 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_temperature_two_meters.mp4" 1894 }, 1895 { 1896 "region": "Area of Responsibility", 1897 "product_title": "Relative Humidity Two Meters", 1898 "product_name": "area_of_responsibility_relative_humidity_two_meters", 1899 "product_summary": "Relative humidity at two meters forecast for Area of Responsibility region", 1900 "product_image": "/gifs/forecast_model/area_of_responsibility_relative_humidity_two_meters_desktop.gif", 1901 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_relative_humidity_two_meters.mp4" 1902 }, 1903 { 1904 "region": "Area of Responsibility", 1905 "product_title": "Relative Humidity 850 hPa", 1906 "product_name": "area_of_responsibility_relative_humidity_eight_five_hundred_hpa", 1907 "product_summary": "Relative humidity at 850 hPa forecast for Area of Responsibility region", 1908 "product_image": "/gifs/forecast_model/area_of_responsibility_relative_humidity_eight_five_hundred_hpa_desktop.gif", 1909 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_relative_humidity_eight_five_hundred_hpa.mp4" 1910 }, 1911 { 1912 "region": "Area of Responsibility", 1913 "product_title": "Relative Humidity 700 hPa", 1914 "product_name": "area_of_responsibility_relative_humidity_seven_hundred_hpa", 1915 "product_summary": "Relative humidity at 700 hPa forecast for Area of Responsibility region", 1916 "product_image": "/gifs/forecast_model/area_of_responsibility_relative_humidity_seven_hundred_hpa_desktop.gif", 1917 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_relative_humidity_seven_hundred_hpa.mp4" 1918 }, 1919 { 1920 "region": "Area of Responsibility", 1921 "product_title": "Relative Humidity 500 hPa", 1922 "product_name": "area_of_responsibility_relative_humidity_five_hundred_hpa", 1923 "product_summary": "Relative humidity at 500 hPa forecast for Area of Responsibility region", 1924 "product_image": "/gifs/forecast_model/area_of_responsibility_relative_humidity_five_hundred_hpa_desktop.gif", 1925 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_relative_humidity_five_hundred_hpa.mp4" 1926 }, 1927 { 1928 "region": "Area of Responsibility", 1929 "product_title": "Wind Forecast 10 Meters", 1930 "product_name": "area_of_responsibility_wind_forecast_ten_meters", 1931 "product_summary": "Wind forecast at 10 meters for Area of Responsibility region", 1932 "product_image": "/gifs/forecast_model/area_of_responsibility_wind_forecast_ten_meters_desktop.gif", 1933 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_wind_forecast_ten_meters.mp4" 1934 }, 1935 { 1936 "region": "Area of Responsibility", 1937 "product_title": "Wind Forecast 850 hPa", 1938 "product_name": "area_of_responsibility_wind_forecast_eight_five_hundred_hpa", 1939 "product_summary": "Wind forecast at 850 hPa for Area of Responsibility region", 1940 "product_image": "/gifs/forecast_model/area_of_responsibility_wind_forecast_eight_five_hundred_hpa_desktop.gif", 1941 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_wind_forecast_eight_five_hundred_hpa.mp4" 1942 }, 1943 { 1944 "region": "Area of Responsibility", 1945 "product_title": "Wind Forecast 700 hPa", 1946 "product_name": "area_of_responsibility_wind_forecast_seven_hundred_hpa", 1947 "product_summary": "Wind forecast at 700 hPa for Area of Responsibility region", 1948 "product_image": "/gifs/forecast_model/area_of_responsibility_wind_forecast_seven_hundred_hpa_desktop.gif", 1949 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_wind_forecast_seven_hundred_hpa.mp4" 1950 }, 1951 { 1952 "region": "Area of Responsibility", 1953 "product_title": "Wind Forecast 500 hPa", 1954 "product_name": "area_of_responsibility_wind_forecast_five_hundred_hpa", 1955 "product_summary": "Wind forecast at 500 hPa for Area of Responsibility region", 1956 "product_image": "/gifs/forecast_model/area_of_responsibility_wind_forecast_five_hundred_hpa_desktop.gif", 1957 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_wind_forecast_five_hundred_hpa.mp4" 1958 }, 1959 { 1960 "region": "Area of Responsibility", 1961 "product_title": "Wind Forecast 250 hPa", 1962 "product_name": "area_of_responsibility_wind_forecast_two_hundred_fifty_hpa", 1963 "product_summary": "Wind forecast at 250 hPa for Area of Responsibility region", 1964 "product_image": "/gifs/forecast_model/area_of_responsibility_wind_forecast_two_hundred_fifty_hpa_desktop.gif", 1965 "product_video": "/gifs/forecast_model/videos/area_of_responsibility_wind_forecast_two_hundred_fifty_hpa.mp4" 1966 } 1967 ] 1968}`).products; 1969 1970 document.addEventListener('DOMContentLoaded', function() { 1971 // Cache DOM elements 1972 const elements = { 1973 form: document.querySelector('form'), 1974 regionSelect: document.getElementById('region'), 1975 productSelect: document.getElem
1975entById('product'), 1976 productDisplay: document.getElementById('product-display') 1977 }; 1978 1979 // Form submission handler 1980 elements.form.addEventListener('submit', handleFormSubmit); 1981 1982 // Region selection change handler 1983 elements.regionSelect.addEventListener('change', handleRegionChange); 1984 1985 /** 1986 * Handles form submission and displays the selected product 1987 * @param {Event} e - Form submission event 1988 */ 1989 function handleFormSubmit(e) { 1990 e.preventDefault(); 1991 1992 const selectedRegion = elements.regionSelect.value; 1993 const selectedProduct = elements.productSelect.value; 1994 1995 // Find selected product data 1996 const product = products.find(p => 1997 p.region === selectedRegion && 1998 p.product_name === selectedProduct 1999 ); 2000 2001 if (!product) { 2002 console.error('Product not found'); 2003 return; 2004 } 2005 2006 // Prepare data for GIF display 2007 const gifData = { 2008 id: 'product', 2009 title: `${selectedRegion} - ${selectedProduct}`, 2010 summary: `Forecast product for ${selectedRegion} region`, 2011 image_url: product.product_image 2012 }; 2013 2014 renderProductDisplay(gifData); 2015 } 2016 2017 /** 2018 * Renders the product display component 2019 * @param {Object} gifData - Data for the GIF display 2020 */ 2021 function renderProductDisplay(gifData) { 2022 elements.productDisplay.innerHTML = ''; 2023 2024 // Create component HTML 2025 const template = createProductDisplayTemplate(gifData); 2026 elements.productDisplay.appendChild(template); 2027 2028 // Initialize GIF player 2029 initializeSuperGif(); 2030 elements.productDisplay.classList.remove('hidden'); 2031 } 2032 2033 /** 2034 * Creates the HTML template for product display 2035 * @param {Object} gifData - Data for the GIF display 2036 * @returns {HTMLElement} The created template element 2037 */ 2038 function createProductDisplayTemplate(gifData) { 2039 const container = document.createElement('div'); 2040 container.innerHTML = ` 2041 <div class="w-full max-w-4xl mx-auto"> 2042 <div id="product-display" class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-100"> 2043 2044 <div class="relative bg-black flex justify-center items-center min-h-[200px] sm:min-h-[300px]" id="product-container"> 2045 2046 <div id="loading-spinner-product" class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-90 z-20 backdrop-blur-sm"> 2047 <div class="text-center"> 2048 <div class="animate-spin rounded-full h-16 w-16 border-4 border-primary-200 border-t-primary-500 mx-auto mb-4"></div> 2049 <p class="text-gray-600 font-medium">Loading GIF...</p> 2050 </div> 2051 </div> 2052 2053 2054 <div id="error-state-product" class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-90 z-20 backdrop-blur-sm hidden"> 2055 <div class="text-center"> 2056 <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> 2057 <svg class="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2058 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> 2059 </svg> 2060 </div> 2061 <p class="text-gray-700 font-medium mb-2">Failed to load GIF</p> 2062 <p class="text-gray-500 text-sm">Please check the URL and try again</p> 2063 </div> 2064 </div> 2065 2066 2067 <img id="product-gif" src="" rel:animated_src="${gifData.image_url}" rel:auto_play="0" class="w-full h-auto object-contain bg-black mx-auto transition-opacity duration-300" /> 2068 </div> 2069 2070 2071 <div class="bg-gradient-to-r from-gray-50 to-gray-100 p-6 border-t border-gray-200"> 2072 2073 <div class="mb-4"> 2074 <div class="flex justify-between items-center mb-2">
2075 <span id="frame-counter-product" class="text-sm font-medium text-gray-600">Frame 0 / 0</span> 2076 <span id="time-display-product" class="text-sm font-medium text-gray-600">00:00 / 00:00</span> 2077 </div> 2078 <div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden"> 2079 <div id="progress-bar-product" class="bg-primary-500 h-2 rounded-full transition-all duration-300 ease-out" style="width: 0%"></div> 2080 </div> 2081 </div> 2082 2083 2084 <div class="flex justify-center items-center space-x-3"> 2085 2086 <button id="rewind-product" class="group relative bg-white hover:bg-gray-50 text-gray-700 hover:text-primary-600 font-medium py-3 px-4 rounded-lg border border-gray-200 hover:border-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md"> 2087 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 2088 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z" /> 2089 </svg> 2090 <span class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Rewind</span> 2091 </button> 2092 2093 2094 <button id="play-pause-product" class="group relative bg-primary-500 hover:bg-primary-600 text-white font-bold py-4 px-6 rounded-full border-2 border-primary-400 hover:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200 transform hover:scale-110 active:scale-95 shadow-lg hover:shadow-xl"> 2095 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> 2096 <path d="M8 5v14l11-7z" /> 2097 </svg> 2098 <span class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Play</span> 2099 </button> 2100 2101 2102 <button id="fast-forward-product" class="group relative bg-white hover:bg-gray-50 text-gray-700 hover:text-primary-600 font-medium py-3 px-4 rounded-lg border border-gray-200 hover:border-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-sm hover:shadow-md"> 2103 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 2104 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6L6.6 7.2A1 1 0 005 8v8a1 1 0 001.
21046.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z" /> 2105 </svg> 2106 <span class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap">Fast Forward</span> 2107 </button> 2108 </div> 2109 2110 2111 <div class="flex justify-center items-center mt-4 space-x-4"> 2112 2113 <button id="loop-toggle-product" class="flex items-center space-x-2 text-sm text-gray-600 hover:text-primary-600 transition-colors duration-200"> 2114 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2115 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> 2116 </svg> 2117 <span>Loop</span> 2118 </button> 2119 2120 2121 <button id="reset-product" class="flex items-center space-x-2 text-sm text-gray-600 hover:text-primary-600 transition-colors duration-200"> 2122 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 2123 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /> 2124 </svg> 2125 <span>Reset</span> 2126 </button> 2127 </div> 2128 </div> 2129 </div> 2130 </div> 2131 `; 2132 2133 return container.firstElementChild; 2134 } 2135 2136 /** 2137 * Initializes SuperGif functionality for GIF playback 2138 */ 2139 function initializeSuperGif() { 2140 // Cache control elements 2141 const controls = { 2142 gif: document.getElementById('product-gif'), 2143 playPause: document.getElementById('play-pause-product'), 2144 rewind: document.getElementById('rewind-product'), 2145 fastForward: document.getElementById('fast-forward-product'), 2146 loadingSpinner: document.getElementById('loading-spinner-product'), 2147 errorState: document.getElementById('error-state-product'), 2148 progressBar: document.getElementById('progress-bar-product'), 2149 frameCounter: document.getElementById('frame-counter-product'), 2150 timeDisplay: document.getElementById('time-display-product'), 2151 loopToggle: document.getElementById('loop-toggle-product'), 2152 reset: document.getElementById('reset-product') 2153 }; 2154 2155 // Validate required elements 2156 if (!validateControls(controls)) { 2157 console.error('Required control elements not found'); 2158 return; 2159 } 2160 2161 let supergif; 2162 let isLooping = true; 2163 let totalFrames = 0; 2164 2165 // Initialize SuperGif instance 2166 supergif = new SuperGif({ 2167 gif: controls.gif, 2168 progressbar_height: 0, 2169 auto_play: false, 2170 loop_mode: true 2171 }); 2172 2173 // Load GIF and setup controls 2174 supergif.load(() => { 2175 console.log('GIF loaded successfully'); 2176 controls.loadingSpinner.style.display = 'none'; 2177 2178 totalFrames = supergif.get_length(); 2179 updateFrameCounter(0); 2180 updateTimeDisplay(0); 2181 supergif.move_to(0); 2182 2183 setupControlHandlers(); 2184 }); 2185 2186 /** 2187 * Sets up event handlers for GIF controls 2188 */ 2189 function setupControlHandlers() { 2190 // Play/Pause 2191 controls.playPause.addEventListener('click', () => { 2192 const isPlaying = supergif.get_playing(); 2193 if (isPlaying) { 2194 supergif.pause(); 2195 updatePlayPauseButton(false); 2196 } else { 2197 supergif.play(); 2198 updatePlayPauseButton(true); 2199 } 2200 }); 2201 2202 // Frame navigation 2203 controls.rewind.addEventListener('click', () => navigateFrames('prev')); 2204 controls.fastForward.addEventListener('click', () => navigateFrames('next')); 2205 2206 // Loop toggle 2207 controls.loopToggle.addEventListener('click', toggleLoop); 2208 2209 // Reset 2210 controls.reset.addEventListener('click', resetGif); 2211 2212 // Progress tracking 2213 setInterval(updateProgress, 100); 2214 } 2215 2216 /**
2217 * Updates the frame counter and progress bar 2218 * @param {number} currentFrame - Current frame number 2219 */ 2220 function updateFrameCounter(currentFrame) { 2221 controls.frameCounter.textContent = `Frame ${currentFrame + 1} / ${totalFrames}`; 2222 controls.progressBar.style.width = `${((currentFrame + 1) / totalFrames) * 100}%`; 2223 } 2224 2225 /** 2226 * Updates the time display 2227 * @param {number} currentFrame - Current frame number 2228 */ 2229 function updateTimeDisplay(currentFrame) { 2230 const estimatedDuration = totalFrames * 0.1; 2231 const currentTime = currentFrame * 0.1; 2232 controls.timeDisplay.textContent = `${formatTime(currentTime)} / ${formatTime(estimatedDuration)}`; 2233 } 2234 2235 /** 2236 * Formats time in MM:SS format 2237 * @param {number} seconds - Time in seconds 2238 * @returns {string} Formatted time string 2239 */ 2240 function formatTime(seconds) { 2241 const mins = Math.floor(seconds / 60); 2242 const secs = Math.floor(seconds % 60); 2243 return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; 2244 } 2245 2246 /** 2247 * Updates the play/pause button appearance 2248 * @param {boolean} isPlaying - Whether the GIF is playing 2249 */ 2250 function updatePlayPauseButton(isPlaying) { 2251 controls.playPause.innerHTML = isPlaying 2252 ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> 2253 <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/> 2254 </svg>` 2255 : `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"> 2256 <path d="M8 5v14l11-7z"/> 2257 </svg>`; 2258 } 2259 2260 /** 2261 * Navigates frames forward or backward 2262 * @param {string} direction - Direction to navigate ('prev' or 'next') 2263 */ 2264 function navigateFrames(direction) { 2265 if (supergif && !supergif.get_loading()) { 2266 const currentFrame = supergif.get_current_frame(); 2267 const newFrame = direction === 'prev' 2268 ? Math.max(0, currentFrame - 1) 2269 : Math.min(totalFrames - 1, currentFrame + 1); 2270 2271 supergif.move_to(newFrame); 2272 updateFrameCounter(newFrame); 2273 updateTimeDisplay(newFrame); 2274 } 2275 } 2276 2277 /** 2278 * Toggles loop mode 2279 */ 2280 function toggleLoop() { 2281 isLooping = !isLooping; 2282 supergif.set_loop_mode(isLooping); 2283 controls.loopToggle.classList.toggle('text-primary-600'); 2284 controls.loopToggle.classList.toggle('text-gray-600'); 2285 } 2286 2287 /** 2288 * Resets GIF to first frame 2289 */ 2290 function resetGif() { 2291 if (supergif && !supergif.get_loading()) { 2292 supergif.move_to(0); 2293 updateFrameCounter(0); 2294 updateTimeDisplay(0); 2295 } 2296 } 2297 2298 /** 2299 * Updates progress indicators 2300 */ 2301 function updateProgress() { 2302 if (supergif && !supergif.get_loading()) { 2303 const currentFrame = supergif.get_current_frame(); 2304 updateFrameCounter(currentFrame); 2305 updateTimeDisplay(currentFrame); 2306 } 2307 } 2308 } 2309 2310 /** 2311 * Validates that all required control elements exist 2312 * @param {Object} controls - Object containing control elements 2313 * @returns {boolean} Whether all controls are present 2314 */ 2315 function validateControls(controls) { 2316 return Object.values(controls).every(element => element !== null); 2317 } 2318 2319 /** 2320 * Handles region selection change 2321 */ 2322 function handleRegionChange() { 2323 const selectedRegion = this.value; 2324 elements.productSelect.innerHTML = ''; 2325 2326 if (!selectedRegion) { 2327 elements.productSelect.disabled = true; 2328 elements.productSelect.innerHTML = '<option value="">
2328Select a region first</option>'; 2329 return; 2330 } 2331 2332 // Filter and populate product options 2333 const regionProducts = products.filter(product => product.region === selectedRegion); 2334 const uniqueProductNames = [...new Set(regionProducts.map(p => p.product_name))]; 2335 2336 elements.productSelect.disabled = false; 2337 elements.productSelect.innerHTML = '<option value="">Select a product</option>'; 2338 2339 uniqueProductNames.forEach(productName => { 2340 const option = document.createElement('option'); 2341 option.value = productName; 2342 option.textContent = productName.split('_') 2343 .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) 2344 .join(' '); 2345 elements.productSelect.appendChild(option); 2346 }); 2347 } 2348 }); 2349</script>
2349 2350 2351 2352</body> 2353 2354</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.