1 2 3<!DOCTYPE html> 4<html lang="en"> 5 6<head> 7 <meta charset="utf-8" /> 8 <title> 9 10 Contact Us 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/south-west-pacific-marine-bulletin/" role="menuitem">South West Pacific Marine Bulletin</a></li> 378 379 <li><a href="/fiji-weather/zlm-broadcast-frequency/" role="menuitem">ZLM Broadcast Frequency</a></li> 380 381 </ul> 382 </div> 383 </div> 384 </div> 385 386 <div class="nav-item--dropdown"> 387 <a href="/maps-observation/" 388 class="nav-link nav-link--dropdown" 389 aria-haspopup="true" 390 aria-expanded="false"> 391 Maps & Observation 392 <svg class="nav-link__chevron" viewB
392ox="0 0 20 20" fill="currentColor" aria-hidden="true"> 393 <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> 394 </svg> 395 </a> 396 <div class="nav-dropdown-panel" role="menu"> 397 <div class="nav-dropdown-panel__inner"> 398 399 <p class="nav-dropdown-panel__label">Maps & Observation</p> 400 <ul> 401 402 <li><a href="/maps-observation/radar-image/" role="menuitem">Radar Image</a></li> 403 404 <li><a href="/maps-observation/rainfall-map/" role="menuitem">Rainfall Map</a></li> 405 406 <li><a href="/maps-observation/satellite-image/" role="menuitem">Satellite Image</a></li> 407 408 <li><a href="/maps-observation/synoptic-observation/" role="menuitem">Synoptic Observation</a></li> 409 410 <li><a href="/maps-observation/weather-map/" role="menuitem">Weather Map</a></li> 411 412 </ul> 413 </div> 414 </div> 415 </div> 416 417 <div class="nav-item--dropdown"> 418 <a href="/climate-services/" 419 class="nav-link nav-link--dropdown" 420 aria-haspopup="true" 421 aria-expanded="false"> 422 Climate Services 423 <svg class="nav-link__chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 424 <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> 425 </svg> 426 </a> 427 <div class="nav-dropdown-panel" role="menu"> 428 <div class="nav-dropdown-panel__inner"> 429 430 <p class="nav-dropdown-panel__label">Climate Services</p> 431 <ul> 432 433 <li><a href="/climate-services/2025-26-tc-outlook/" role="menuitem">2025-26 TC Outlook</a></li> 434 435 <li><a href="/climate-services/climate-outlooks/" role="menuitem">Climate Outlook</a></li> 436 437 <li><a href="/climate-services/climate-outlook-video/" role="menuitem">Climate Outlook Video</a></li> 438 439 <li><a href="/climate-services/early-action-rainfall-watch/" role="menuitem">Early Action Rainfall Watch</a></li> 440 441 <li><a href="/climate-services/fiji-ocean-outlooks/" role="menuitem">Fiji Ocean Outlook</a></li> 442 443 <li><a href="/climate-services/ocean-outlook-video/" role="menuitem">Ocean Outlook Video</a></li> 444 445 <li><a href="/climate-services/sugar-outlooks/" role="menuitem">Sugar Outlook</a></li> 446 447 <li><a href="/climate-services/hydro-electricity-generation-outlook/" role="menuitem">Climate Outlook for Hydro-Electricity Generation</a></li> 448 449 <li><a href="/climate-services/fiji-climate-summaries/" role="menuitem">Fiji Climate Summary</a></li> 450 451 <li><a href="/climate-services/annual-climate-summary/" role="menuitem">Annual Climate Summary</a></li> 452 453 <li><a href="/climate-services/climate-data/" role="menuitem">Climate Data</a></li> 454 455 <li><a href="/climate-services/climate-data-products/" role="menuitem">Climate Data Products</a></li> 456 457 <li><a href="/climate-services/climate-change/" role="menuitem">Climate Change</a></li> 458 459 <li><a href="/climate-services/ocean-portal/" role="menuitem">Ocean Portal</a></li> 460 461 <li><a href="/climate-services/suva-tide-prediction/" role="menuitem">Suva Tide Prediction</a></li> 462 463 <li><a href="/climate-services/lautoka-tide-prediction/" role="menuitem">Lautoka Tide Prediction</a></li> 464 465 <li><a href="/climate-services/port-denarau-tide-prediction/" role="menuitem">Port Denarau Tide Prediction</a></li> 466 467 <li><a href="/climate-services/vatia-tide-prediction/" role="menuitem">Vatia Tide Prediction</a></li> 468 469 <li><a href="/climate-services/aeronautical-summaries/" role="menuitem">Aeronautical Summaries</a></li> 470 471 <li><a href="/climate-services/climate-normals/" role="menuitem">Climate Normals</a></li> 472 473 </ul> 474 </div> 475 </div> 476 </div> 477 478 <div class="nav-item--dropdown"> 479 <a href="/aviation-weather-products/" 480 class="nav-link nav-link--dropdown" 481 aria-haspopup="true" 482 aria-expanded="false"> 483 Aviation 484 <svg class="nav-link__chevron" viewB
484ox="0 0 20 20" fill="currentColor" aria-hidden="true"> 485 <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> 486 </svg> 487 </a> 488 <div class="nav-dropdown-panel" role="menu"> 489 <div class="nav-dropdown-panel__inner"> 490 491 <p class="nav-dropdown-panel__label">Aviation</p> 492 <ul> 493 494 <li><a href="/aviation-weather-products/arfor/" role="menuitem">ARFORs</a></li> 495 496 <li><a href="/aviation-weather-products/metars/" role="menuitem">METARs</a></li> 497 498 <li><a href="/aviation-weather-products/tafs-24-hr/" role="menuitem">International Terminal Aerodrome Forecast (24hr TAF)</a></li> 499 500 <li><a href="/aviation-weather-products/tafs-individual/" role="menuitem">Domestic Terminal Aerodrome Forecast</a></li> 501 502 <li><a href="/aviation-weather-products/rofors/" role="menuitem">ROFORs</a></li> 503 504 <li><a href="/aviation-weather-products/sigmets/" role="menuitem">SIGMETs</a></li> 505 506 </ul> 507 </div> 508 </div> 509 </div> 510 511 <div class="nav-item--dropdown"> 512 <a href="/hydrological-services/" 513 class="nav-link nav-link--dropdown" 514 aria-haspopup="true" 515 aria-expanded="false"> 516 Hydrology 517 <svg class="nav-link__chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> 518 <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> 519 </svg> 520 </a> 521 <div class="nav-dropdown-panel" role="menu"> 522 <div class="nav-dropdown-panel__inner"> 523 524 <p class="nav-dropdown-panel__label">Hydrology</p> 525 <ul> 526 527 </ul> 528 </div> 529 </div> 530 </div> 531 </div> 532 533 <div class="w-72 shrink-0 xl:w-80"> 534 535 536<style> 537 [modal-backdrop] { 538 backdrop-filter: blur(6px); 539 -webkit-backdrop-filter: blur(6px); 540 } 541</style> 542 543<!-- Search Button that opens modal --> 544 545<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"> 546 <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"> 547 <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"/> 548 </svg> 549 Search Fiji Met... 550</button> 551 552<!-- Search Modal --> 553 554 </div> 555 </div> 556 </div> 557 </div> 558</nav> 559 560 561 562<style> 563 [modal-backdrop] { 564 backdrop-filter: blur(6px); 565 -webkit-backdrop-filter: blur(6px); 566 } 567</style> 568 569<!-- Search Button that opens modal --> 570 571<!-- Search Modal --> 572 573<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"> 574 <div class="relative mx-auto mt-24 w-full max-w-3xl max-h-full"> 575 <!-- Modal content --> 576 <div class="relative overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-gray-200"> 577 <!-- Modal header --> 578 <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"> 579 <div> 580 <p class="text-xs font-semibold uppercase tracking-wide text-primary-100">Fiji Meteorological Service</p> 581 <h3 class="mt-1 text-2xl font-semibold"> 582 Search Fiji Met 583 </h3> 584 <p class="mt-1 text-sm text-primary-100"> 585 Find forecasts, warnings, observations, and climate information. 586 </p> 587 </div> 588 <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
588s:outline-none focus:ring-2 focus:ring-white/60" data-modal-hide="search-modal"> 589 <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"> 590 <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"/> 591 </svg> 592 <span class="sr-only">Close modal</span> 593 </button> 594 </div> 595 <!-- Modal body --> 596 <div class="space-y-5 p-5 md:p-6"> 597 <form class="relative" hx-get="/search/" hx-target="#search-results" hx-trigger="submit, input[name='query'] keyup delay:500ms" hx-indicator="#search-indicator"> 598 <div class="relative flex items-center"> 599 <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"> 600 <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"/> 601 </svg> 602 <input type="text" 603 name="query" 604 605 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" 606 placeholder="Search for weather information, forecasts, radar, warnings..." 607 autofocus> 608 <div id="search-indicator" class="htmx-indicator absolute right-4 flex items-center"> 609 <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> 610 </div> 611 </div> 612 </form> 613 614 <div id="search-results" class="max-h-[60vh] overflow-y-auto rounded-xl border border-gray-100 bg-white"> 615 616 </div> 617 </div> 618 </div> 619 </div> 620</div> 621 622 623<aside id="sidebar-info" class="fixed top-0 left-0 z-40 w-72 transition-transform -translate-x-full" aria-label="Sidebar"> 624 <div 625 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"> 626 627 <!-- Alerts & Media --> 628 <ul class="space-y-2"> 629 <li> 630 <h3 class="px-2 py-1 text-xs font-semibold text-gray-500 uppercase">Alerts & Media</h3> 631 </li> 632 <li> 633 <a href="/warnings/" 634 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"> 635 636 637 638 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 639 <path 640 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
640L12.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" 641 fill="#3B3F6F" /> 642 </svg> 643 <span class="ml-3">Warning Status</span> 644 645 </a> 646 </li> 647 <li> 648 <a href="/media-release/" 649 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"> 650 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 651 <path 652 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" 653 fill="#3B3F6F" /> 654 <path 655 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" 656 fill="#3B3F6F" /> 657 <path 658 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" 659 fill="#3B3F6F" /> 660 <path 661 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" 662 fill="#3B3F6F" /> 663 <path 664 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" 665 fill="#3B3F6F" /> 666 <path 667 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
66752 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" 668 fill="#3B3F6F" /> 669 <path 670 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" 671 fill="#3B3F6F" /> 672 </svg> 673 674 <span class="ml-3">Media Releases</span> 675 </a> 676 </li> 677 <li> 678 679 <a href="/tropical-cyclone/" 680 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"> 681 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 682 <g clip-path="url(#clip0_221_20694)"> 683 <path 684 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" 685 fill="#3B3F6F" /> 686 </g> 687 <defs> 688 <clipPath id="clip0_221_20694"> 689 <rect width="24" height="24" fill="white" /> 690 </clipPath> 691 </defs> 692 </svg> 693 694 <span class="ml-3">Tropical Cyclone</span> 695 </a> 696 </li> 697 </ul> 698 <!-- Focus Areas --> 699 <ul class="pt-5 my-5 space-y-2 border-t border-gray-200"> 700 <li> 701 <h3 class="px-2 py-1 text-xs font-semibold text-gray-500 uppercase">Focus Areas</h3> 702 </li> 703 <li> 704 <button type="button" 705 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" 706 aria-controls="dropdown-weather" data-collapse-toggle="dropdown-weather"> 707 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 708 <path 709 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
70910.309 7.31279 11.7148C7.31279 12.5992 7.76099 13.4074 8.51159 13.8778L7.87559 14.8948Z" 710 fill="#3B3F6F" /> 711 <path 712 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" 713 fill="#3B3F6F" /> 714 <path 715 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" 716 fill="#3B3F6F" /> 717 <path 718 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" 719 fill="#3B3F6F" /> 720 <path 721 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" 722 fill="#3B3F6F" /> 723 <path 724 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" 725 fill="#3B3F6F" /> 726 <path 727 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" 728 fill="#3B3F6F" /> 729 <path 730 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" 731 fill="#3B3F6F" /> 732 </svg> 733 <span class="flex-1 ml-3 text-left whitespace-nowrap truncate">Weather Forecast</span> 734 <svg aria-hidden="true" class="w-6 h-6 dropdown-arrow transition-transform duration-300" 735 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 736 <path fill-rule="evenodd" 737 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" 738 clip-rule="evenodd"></path> 739 </svg> 740 </button> 741 <ul id="dropdown-weather" class="hidden py-2 space-y-2"> 742 743 744 </li> 745 <a href="/fiji-weather/fiji-weather/" 746 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"> 747 Fiji Weather 748 </a> 749 </li> 750 751 </li> 752 <a href="/fiji-weather/regional-weather/" 753 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"> 754 Regional Weather 755 </a> 756 </li> 757 758 </li> 759 <a href="/fiji-weather/7-day-outlook/" 760 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"> 761 7 Day Outlook 762 </a> 763 </li> 764 765 </li> 766 <a href="/fiji-weather/5-day-tc-outlook/" 767 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"> 768 5 Day TC Outlook 769 </a> 770 </li> 771 772 </li> 773 <a href="/fiji-weather/south-west-pacific-marine-bulletin/" 774 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"> 775 South West Pacific Marine Bulletin 776 </a> 777 </li> 778 779 </li> 780 <a href="/fiji-weather/zlm-broadcast-frequency/" 781 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"> 782 ZLM Broadcast Frequency 783 </a> 784 </li> 785 786 </ul> 787 </li> 788 <!-- Observation --> 789 <li> 790 <button type="button" 791 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" 792 aria-controls="dropdown-observation" data-collapse-toggle="dropdown-observation"> 793 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 794 <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"/> 795 <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"/> 796 <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"/> 797 </svg>
798 <span class="flex-1 ml-3 text-left whitespace-nowrap truncate">Maps & Observation</span> 799 <svg aria-hidden="true" class="w-6 h-6 dropdown-arrow transition-transform duration-300" 800 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 801 <path fill-rule="evenodd" 802 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" 803 clip-rule="evenodd"></path> 804 </svg> 805 </button> 806 <ul id="dropdown-observation" class="hidden py-2 space-y-2"> 807 808 809 <li> 810 <a href="/maps-observation/radar-image/" 811 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"> 812 Radar Image 813 </a> 814 </li> 815 816 <li> 817 <a href="/maps-observation/rainfall-map/" 818 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"> 819 Rainfall Map 820 </a> 821 </li> 822 823 <li> 824 <a href="/maps-observation/satellite-image/" 825 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"> 826 Satellite Image 827 </a> 828 </li> 829 830 <li> 831 <a href="/maps-observation/synoptic-observation/" 832 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"> 833 Synoptic Observation 834 </a> 835 </li> 836 837 <li> 838 <a href="/maps-observation/weather-map/" 839 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"> 840 Weather Map 841 </a> 842 </li> 843 844 </ul> 845 </li> 846 <!-- Climate Services --> 847 <li> 848 <button type="button" 849 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" 850 aria-controls="dropdown-climate" data-collapse-toggle="dropdown-climate"> 851 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 852 <path 853 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" 854 fill="#3B3F6F" /> 855 </svg>
856 <span class="flex-1 ml-3 text-left whitespace-nowrap truncate">Climate Services</span> 857 <svg aria-hidden="true" class="w-6 h-6 dropdown-arrow transition-transform duration-300" 858 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 859 <path fill-rule="evenodd" 860 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" 861 clip-rule="evenodd"></path> 862 </svg> 863 </button> 864 <ul id="dropdown-climate" class="hidden py-2 space-y-2"> 865 866 867 <li> 868 <a href="/climate-services/2025-26-tc-outlook/" 869 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"> 870 2025-26 TC Outlook 871 </a> 872 </li> 873 874 <li> 875 <a href="/climate-services/climate-outlooks/" 876 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"> 877 Climate Outlook 878 </a> 879 </li> 880 881 <li> 882 <a href="/climate-services/climate-outlook-video/" 883 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"> 884 Climate Outlook Video 885 </a> 886 </li> 887 888 <li> 889 <a href="/climate-services/early-action-rainfall-watch/" 890 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"> 891 Early Action Rainfall Watch 892 </a> 893 </li> 894 895 <li> 896 <a href="/climate-services/fiji-ocean-outlooks/" 897 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"> 898 Fiji Ocean Outlook 899 </a> 900 </li> 901 902 <li> 903 <a href="/climate-services/ocean-outlook-video/" 904 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"> 905 Ocean Outlook Video 906 </a> 907 </li> 908 909 <li> 910 <a href="/climate-services/sugar-outlooks/" 911 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"> 912 Sugar Outlook 913 </a> 914 </li> 915 916 <li> 917 <a href="/climate-services/hydro-electricity-generation-outlook/" 918 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"> 919 Climate Outlook for Hydro-Electricity Generation 920 </a> 921 </li> 922 923 <li> 924 <a href="/climate-services/fiji-climate-summaries/" 925 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"> 926 Fiji Climate Summary 927 </a> 928 </li> 929 930 <li> 931 <a href="/climate-services/annual-climate-summary/" 932 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"> 933 Annual Climate Summary 934 </a> 935 </li> 936 937 <li> 938 <a href="/climate-services/climate-data/" 939 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"> 940 Climate Data 941 </a> 942 </li> 943 944 <li> 945 <a href="/climate-services/climate-data-products/" 946 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"> 947 Climate Data Products 948 </a> 949 </li> 950 951 <li> 952 <a href="/climate-services/climate-change/" 953 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"> 954 Climate Change 955 </a> 956 </li> 957 958 <li> 959 <a href="/climate-services/ocean-portal/" 960 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"> 961 Ocean Portal 962 </a> 963 </li> 964 965 <li> 966 <a href="/climate-services/suva-tide-prediction/" 967 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"> 968 Suva Tide Prediction 969 </a> 970 </li> 971 972 <li> 973 <a href="/climate-services/lautoka-tide-prediction/" 974 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"> 975 Lautoka Tide Prediction 976 </a> 977 </li> 978 979 <li> 980 <a href="/climate-services/port-denarau-tide-prediction/" 981 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"> 982 Port Denarau Tide Prediction 983 </a> 984 </li> 985 986 <li> 987 <a href="/climate-services/vatia-tide-prediction/" 988 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"> 989 Vatia Tide Prediction 990 </a> 991 </li> 992 993 <li> 994 <a href="/climate-services/aeronautical-summaries/" 995 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"> 996 Aeronautical Summaries 997 </a> 998 </li> 999 1000 <li> 1001 <a href="/climate-services/climate-normals/" 1002 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"> 1003 Climate Normals 1004 </a> 1005 </li> 1006 1007 </ul> 1008 </li> 1009 <!-- Hydrology Services --> 1010 <li> 1011 <button type="button" 1012 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" 1013 aria-controls="dropdown-hydrology" data-collapse-toggle="dropdown-hydrology"> 1014 <svg width="24" height="24" viewBox="0 0 24 23" fill="none" xmlns="http://www.w3.org/2000/svg"> 1015 <path d="M5.13623 18.6406C17.4753 25.1897 27.548 16.6135 19.9935 11" stroke="#3B3F6F" 1016 stroke-width="2" /> 1017 <path 1018 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" 1019 fill="#3B3F6F" /> 1020 <path d="M18.5044 1.67676L21.4088 3.60324" stroke="#3B3F6F" stroke-width="2" 1021 stroke-linecap="round" /> 1022 <rect x="0.496065" y="-0.0722922" width="2.57321" height="1.68317" 1023 transform="matrix(0.608014 -0.793926 0.809314 0.587377 10.4956 12.9617)" stroke="#3E426F" 1024 stroke-width="0.7" /> 1025 <rect x="3.43154" y="16.35" width="17.7901" height="1.3" stroke="#3E426F" stroke-width="0.7" /> 1026 <path 1027 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" 1028 stroke="#3E426F" /> 1029 <line x1="10" y1="22" x2="18.2178" y2="22" stroke="#3B3F6F" stroke-width="2" /> 1030 <path 1031 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" 1032 stroke="#3E426F" stroke-width="1.5" stroke-miterlimit="10" /> 1033 </svg> 1034
1035 <span class="flex-1 ml-3 text-left whitespace-nowrap truncate">Hydrological Services</span> 1036 <svg aria-hidden="true" class="w-6 h-6 dropdown-arrow transition-transform duration-300" 1037 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 1038 <path fill-rule="evenodd" 1039 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" 1040 clip-rule="evenodd"></path> 1041 </svg> 1042 </button> 1043 <ul id="dropdown-hydrology" class="hidden py-2 space-y-2"> 1044 1045 1046 </ul> 1047 </li> 1048 <!-- Aviation Weather Products --> 1049 <li> 1050 <button type="button" 1051 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" 1052 aria-controls="dropdown-aviation" data-collapse-toggle="dropdown-aviation"> 1053 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 1054 <path 1055 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" 1056 fill="#3B3F6F" /> 1057 <path 1058 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" 1059 fill="#3B3F6F" /> 1060 <path 1061 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" 1062 fill="#3B3F6F" /> 1063 <path 1064 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" 1065 fill="#3B3F6F" /> 1066 </svg> 1067 <span class="flex-1 ml-3 text-left whitespace-nowrap truncate">Aviation Weather Products</span> 1068 <svg aria-hidden="true" class="w-6 h-6 dropdown-arrow transition-transform duration-300" 1069 fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> 1070 <path fill-rule="evenodd" 1071 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" 1072 clip-rule="evenodd"></path> 1073 </svg> 1074 </button> 1075 <ul id="dropdown-aviation" class="hidden py-2 space-y-2"> 1076 1077 1078 <li> 1079 <a href="/aviation-weather-products/arfor/" 1080 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"> 1081 ARFORs 1082 </a> 1083 </li> 1084 1085 <li> 1086 <a href="/aviation-weather-products/metars/" 1087 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"> 1088 METARs 1089 </a> 1090 </li> 1091 1092 <li> 1093 <a href="/aviation-weather-products/tafs-24-hr/" 1094 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"> 1095 International Terminal Aerodrome Forecast (24hr TAF) 1096 </a> 1097 </li> 1098 1099 <li> 1100 <a href="/aviation-weather-products/tafs-individual/" 1101 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"> 1102 Domestic Terminal Aerodrome Forecast 1103 </a> 1104 </li> 1105 1106 <li> 1107 <a href="/aviation-weather-products/rofors/" 1108 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"> 1109 ROFORs 1110 </a> 1111 </li> 1112 1113 <li> 1114 <a href="/aviation-weather-products/sigmets/" 1115 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"> 1116 SIGMETs 1117 </a> 1118 </li> 1119 1120 </ul> 1121 </li> 1122 </ul> 1123 <ul class="pt-5 my-5 space-y-2 border-t border-gray-200"> 1124 <li> 1125 <h3 class="px-2 py-1 text-xs font-semibold text-gray-500 uppercase">Requests & Information</h3> 1126 </li> 1127 <a href="/data-requests/" 1128 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">
1129 <span class="ml-3">Data Request Forms</span> 1130 </a> 1131 <a href="/about-fiji-met/education/" 1132 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"> 1133 <span class="ml-3">Education</span> 1134 </a> 1135 <a href="/about-fiji-met/" 1136 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"> 1137 <span class="ml-3">About</span> 1138 </a> 1139 <a href="/vacancy/" 1140 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"> 1141 <span class="ml-3">Vacancies</span> 1142 </a> 1143 <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"> 1144 <span class="ml-3">Wigos</span> 1145 </a> 1146 </ul> 1147 <ul class="pt-5 my-5 space-y-2 border-t border-gray-200"> 1148 <li> 1149 <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"> 1150 <span class="ml-3">Product Guides</span> 1151 </a> 1152 </li> 1153 </ul> 1154 <div id="alert-update" class="p-2 mb-3 rounded-lg" role="alert"> 1155 <div class="flex justify-center items-center mb-4"> 1156 <img src="/static/core/images/coat_of_arms_fiji.6506a7f80e55.png" alt="Fiji Meteorological Service Logo" 1157 class="h-24 w-auto" loading="lazy"> 1158 </div> 1159 <div class="mb-3 text-sm font-light text-gray-700 text-center bg-gray-100 p-2 rounded-lg"> 1160 <span class="font-bold text-primary-500">RSMC-NADI-Tropical Cyclone Centre</span><br> 1161 The official source of reliable "first-level" information on tropical cyclones occuring 1162 in the South-West Pacific Ocean. 1163 </div> 1164 </div> 1165</div> 1166</aside> 1167 1168
1169<script> 1170 document.addEventListener('DOMContentLoaded', function () { 1171 const letters = document.querySelectorAll('#main-title .letter'); 1172 letters.forEach((letter, index) => { 1173 setTimeout(() => { 1174 letter.style.opacity = 1; 1175 letter.style.animationDelay = `${index * 100}ms`; 1176 }, index * 100); 1177 }); 1178 1179 function adjustSidebarHeight() { 1180 const navbar = document.getElementById('main-nav'); 1181 const sidebar = document.getElementById('sidebar-info'); 1182 const navbarHeight = navbar.offsetHeight; 1183 1184 sidebar.style.height = `calc(100vh - ${navbarHeight}px)`; 1185 sidebar.style.top = `${navbarHeight}px`; 1186 } 1187 1188 adjustSidebarHeight(); 1189 window.addEventListener('resize', adjustSidebarHeight); 1190 1191 const toggleButton = document.querySelector('[data-drawer-toggle="sidebar-info"]'); 1192 const sidebar = document.getElementById('sidebar-info'); 1193 1194 if (toggleButton && sidebar) { 1195 toggleButton.addEventListener('click', function () { 1196 sidebar.classList.toggle('-translate-x-full'); 1197 }); 1198 } 1199 }); 1200</script>
1200 1201<!--
1201<script type="text/javascript"> 1202 function googleTranslateElementInit() { 1203 new google.translate.TranslateElement({ 1204 pageLanguage: 'en', 1205 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 1206 layout: google.translate.TranslateElement.InlineLayout.COMBINED 1207 }, 'google_translate_element'); 1208 } 1209</script>
1209 --> 1210 1211 1212 </header> 1213 <main class="py-2 mx-auto px-2 w-full !max-w-[1700px]"> 1214 1215 <div class="mt-4 px-4 sm:px-6 lg:px-8 w-full max-w-6xl mx-auto"> 1216 <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"> 1217 <ol class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm"> 1218 <li class="inline-flex items-center"> 1219 <a href="/" 1220 class="inline-flex items-center gap-1.5 font-medium text-primary-700 transition-colors duration-200 hover:text-primary-500"> 1221 <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"> 1222 <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> 1223 </svg> 1224 <span class="truncate">Home</span> 1225 </a> 1226 </li> 1227 1228 1229 1230 1231 1232 1233 1234 1235 <li class="inline-flex items-center gap-2" aria-hidden="true"> 1236 <svg class="h-3.5 w-3.5 shrink-0 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1237 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 1238 </svg> 1239 </li> 1240 <li class="inline-flex items-center"> 1241 <a href="/about-fiji-met/" 1242 class="truncate font-medium text-gray-600 transition-colors duration-200 hover:text-primary-600"> 1243 About Fiji MET 1244 </a> 1245 </li> 1246 1247 1248 1249 1250 <li class="inline-flex items-center gap-2" aria-hidden="true"> 1251 <svg class="h-3.5 w-3.5 shrink-0 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> 1252 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> 1253 </svg> 1254 </li> 1255 <li class="inline-flex min-w-0 items-center"> 1256 <span class="truncate font-semibold text-primary-800" aria-current="page">Contact Us</span> 1257 </li> 1258 </ol> 1259</nav> 1260 1261 1262 1263 1264<div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm"> 1265 1266 <div class="border-t-4 border-primary-600 px-5 py-4"> 1267 <h3 class="text-xl font-bold text-primary-800 sm:text-2xl">Contact Us</h3> 1268 1269 <div class="mt-3 text-base leading-relaxed text-gray-700"> 1270 <p data-block-key="4dj6l">Reach out to us for inquiries, feedback, or support regarding our meteorological services and updates.<br/><br/><b>Contact Details</b></p><ul><li data-block-key="5pm48">Fiji Meteorological Service</li><li data-block-key="9gs3h">Korowai Road, NAP 0351</li><li data-block-key="8r54">Nadi Airport</li><li data-block-key="7i5eo">Telephone: 6724888</li><li data-block-key="dmqrt">Fax : 6720430<br/></li><li data-block-key="265ht">URL: www.met.gov.fj</li><li data-block-key="2pc8j">Email: [email protected]</li></ul> 1271 </div> 1272 1273 </div> 1274</div> 1275 1276 1277 1278 <div class="bg-white rounded-lg shadow-md overflow-hidden mt-4"> 1279 <div class="aspect-w-16 aspect-h-9 w-full"> 1280 <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7599.33554501314!2d177.4422243!3d-17.7602865!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6e175bedea155555%3A0xea8f18c124117132!2sFiji%20Meteorological%20Service%20HQ!5e0!3m2!1sen!2sfj!4v1726365108541!5m2!1sen!2sfj" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe> 1281 </div> 1282 <div class="px-6 py-4"> 1283 <h3 class="text-xl font-semibold text-primary-600">Fiji Meteorological Service HQ</h3> 1284 </div> 1285 1286 <div class="px-6 py-4"> 1287 <a href="https://maps.app.goo.gl/7aPSL3Xvc7auPDQw7" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700"> 1288 Get Directions 1289 <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 1290 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path> 1291 </svg> 1292 </a> 1293 </div> 1294 1295 </div> 1296 1297 1298 </div> 1299 1300 </main> 1301 <style> 1302 .floating-rss { 1303 position: fixed; 1304 right: 20px; 1305 bottom: 20px; 1306 z-index: 1000; 1307 } 1308 1309 .floating-rss-button { 1310 display: flex; 1311 align-items: center; 1312 justify-content: center; 1313 width: 48px; 1314 height: 48px; 1315 border-radius: 50%; 1316 background-color: #FF6B00; 1317 box-shadow: 0 2px 5px rgba(0,0,0,0.2); 1318 transition: all 0.3s ease; 1319 position: relative; 1320 } 1321 1322 .floating-rss-button:hover { 1323 background-color: #FF8533; 1324 transform: scale(1.1); 1325 } 1326 1327 .rss-icon { 1328 width: 24px; 1329 height: 24px; 1330 fill: white; 1331 } 1332 1333 /* Tooltip */ 1334 .floating-rss-button .tooltip { 1335 position: absolute; 1336 right: 100%; 1337 top: 50%; 1338 transform: translateY(-50%); 1339 background: #333; 1340 color: white; 1341 padding: 8px 12px; 1342 border-radius: 4px; 1343 font-size: 14px; 1344 white-space: nowrap; 1345 margin-right: 10px; 1346 opacity: 0; 1347 visibility: hidden; 1348 transition: all 0.3s ease; 1349 } 1350 1351 .floating-rss-button .tooltip::after { 1352 content: ''; 1353 position: absolute; 1354 right: -6px; 1355 top: 50%; 1356 transform: translateY(-50%); 1357 border-width: 6px 0 6px 6px; 1358 border-style: solid; 1359 border-color: transparent transparent transparent #333; 1360 } 1361 1362 .floating-rss-button:hover .tooltip { 1363 opacity: 1; 1364 visibility: visible; 1365 } 1366
1367 /* Responsive adjustments */ 1368 @media (max-width: 768px) { 1369 .floating-rss { 1370 right: 10px; 1371 bottom: 10px; 1372 } 1373 1374 .floating-rss-button { 1375 width: 40px; 1376 height: 40px; 1377 } 1378 1379 .rss-icon { 1380 width: 20px; 1381 height: 20px; 1382 } 1383 } 1384</style> 1385<div class="floating-rss"> 1386 <a href="/feed/warnings/" class="floating-rss-button" title="Subscribe to Weather Alerts"> 1387 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="rss-icon"> 1388 <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"/> 1389 </svg> 1390 <span class="tooltip">Subscribe to Alerts</span> 1391 </a> 1392</div> 1393 1394 1395 1396<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"> 1397 <div class="mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 lg:px-8"> 1398 <div class="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4"> 1399 <div class="lg:col-span-1"> 1400 <a href="/" class="inline-flex items-center gap-3"> 1401 <img src="/static/core/images/fijimetlogo.ecf8cc80f96a.svg" class="h-10 w-10 brightness-0 invert" alt="Fiji Met logo"> 1402 <div> 1403 <p class="text-sm font-bold uppercase tracking-wide">Fiji Meteorological Service</p> 1404 <p class="text-xs text-white/75">RSMC Nadi â Tropical Cyclone Centre</p> 1405 </div> 1406 </a> 1407 <p class="mt-4 text-sm leading-relaxed text-white/80"> 1408 Official first-level tropical cyclone information for the South-West Pacific Ocean, designated by WMO in 1995. 1409 </p> 1410 <a href="#" class="mt-4 inline-block"> 1411 <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"> 1412 </a> 1413 </div> 1414 1415 <div> 1416 <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-white/90">Quick Links</h2> 1417 <ul class="space-y-2 text-sm"> 1418 <li><a href="/data-requests/" class="text-white/85 transition-colors hover:text-white">Data Requests</a></li> 1419 <li><a href="/about-fiji-met/education/" class="text-white/85 transition-colors hover:text-white">Education</a></li> 1420 <li><a href="/about-fiji-met/" class="text-white/85 transition-colors hover:text-white">About</a></li> 1421 <li><a href="/about-fiji-met/contact-us/" class="text-white/85 transition-colors hover:text-white">Contact</a></li> 1422 <li><a href="/vacancy/" class="text-white/85 transition-colors hover:text-white">Vacancies</a></li> 1423 <li><a href="/about-fiji-met/product-guides/" class="text-white/85 transition-colors hover:text-white">Other Links</a></li> 1424 </ul> 1425 </div> 1426 1427 <div> 1428 <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-white/90">WMO Observing System</h2> 1429 <ul class="space-y-2 text-sm"> 1430 <li><a href="/maps-observation/radar-image/" class="text-white/85 transition-colors hover:text-white">Radar</a></li> 1431 <li><a href="/maps-observation/satellite-image/" class="text-white/85 transition-colors hover:text-white">Satellite</a></li> 1432 <li><a href="/maps-observation/weather-map/" class="text-white/85 transition-colors hover:text-white">Maps</a></li> 1433 <li><a href="#" class="text-white/85 transition-colors hover:text-white">Forecast Models</a></li> 1434 </ul> 1435 <div class="mt-4 flex flex-wrap gap-2"> 1436 <span class="rounded-full bg-white/10 px-3 py-1 text-xs text-white/90">JAXA Rainfall Watch</span>
1437 <span class="rounded-full bg-white/10 px-3 py-1 text-xs text-white/90">Wave Forecast SW Fiji</span> 1438 </div> 1439 </div> 1440 1441 <div> 1442 <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-white/90">Stay Connected</h2> 1443 <p class="mb-4 text-sm text-white/80">Follow Fiji Meteorological Service for updates and warnings.</p> 1444 <div class="flex flex-wrap gap-3"> 1445 <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"> 1446 <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> 1447 </a> 1448 <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"> 1449 <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> 1450 </a> 1451 <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"> 1452 <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> 1453 </a> 1454 <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"> 1455 <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.
14550645C16.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> 1456 </a> 1457 <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"> 1458 <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> 1459 </a> 1460 </div> 1461 </div> 1462 </div> 1463 1464 <div class="mt-10 border-t border-white/20 pt-6 text-center text-sm text-white/70"> 1465 <p> 1466 © 2026 1467 <a href="https://www.met.gov.fj/" class="font-medium text-white hover:underline">Fiji Meteorological Services</a>. 1468 All Rights Reserved. 1469 </p> 1470 </div> 1471 </div> 1472
1472<script id="aioa-adawidget" src="https://www.skynettechnologies.com/accessibility/js/all-in-one-accessibility-js-widget-minify.js?colorcode="></script>
1472 1473</footer> 1474 1475 1476 1477<style> 1478 .page-loader { 1479 position: fixed; 1480 inset: 0; 1481 z-index: 99999; 1482 display: flex; 1483 align-items: center; 1484 justify-content: center; 1485 background: linear-gradient(135deg, #353863 0%, #20223c 100%); 1486 transition: opacity 0.4s ease, visibility 0.4s ease; 1487 } 1488 1489 .page-loader.hidden { 1490 opacity: 0; 1491 visibility: hidden; 1492 pointer-events: none; 1493 } 1494 1495 .loader-content { 1496 display: flex; 1497 flex-direction: column; 1498 align-items: center; 1499 gap: 1rem; 1500 text-align: center; 1501 } 1502 1503 .loader-logo { 1504 width: 72px; 1505 height: 72px; 1506 object-fit: contain; 1507 filter: brightness(0) invert(1); 1508 } 1509 1510 .loader-text { 1511 color: white; 1512 font-size: 0.95rem; 1513 font-weight: 600; 1514 letter-spacing: 0.08em; 1515 text-transform: uppercase; 1516 } 1517 1518 .spinner-circle { 1519 width: 44px; 1520 height: 44px; 1521 border: 3px solid rgba(255, 255, 255, 0.25); 1522 border-top-color: #ffffff; 1523 border-radius: 50%; 1524 animation: spin 0.8s linear infinite; 1525 } 1526 1527 .spinner-overlay { 1528 position: fixed; 1529 inset: 0; 1530 z-index: 9999; 1531 display: flex; 1532 align-items: center; 1533 justify-content: center; 1534 background: rgba(32, 34, 60, 0.55); 1535 opacity: 0; 1536 visibility: hidden; 1537 pointer-events: none; 1538 transition: opacity 0.2s ease, visibility 0.2s ease; 1539 } 1540 1541 .spinner-overlay.visible { 1542 opacity: 1; 1543 visibility: visible; 1544 pointer-events: auto; 1545 } 1546 1547 @keyframes spin { 1548 to { 1549 transform: rotate(360deg); 1550 } 1551 } 1552 1553 @media (prefers-reduced-motion: reduce) { 1554 .spinner-circle { 1555 animation: none; 1556 } 1557 1558 .page-loader, 1559 .spinner-overlay { 1560 transition: none; 1561 } 1562 } 1563</style> 1564 1565<div class="page-loader" id="pageLoader" aria-live="polite" aria-label="Loading page"> 1566 <div class="loader-content"> 1567 <img class="loader-logo" src="/static/core/images/fijimetlogo.ecf8cc80f96a.svg" alt="Fiji Met logo"> 1568 <div class="spinner-circle" aria-hidden="true"></div> 1569 <div class="loader-text">Loading</div> 1570 </div> 1571</div> 1572 1573<div class="spinner-overlay" aria-live="polite" aria-label="Loading content"> 1574 <div class="spinner-circle" aria-hidden="true"></div> 1575</div> 1576
1577<script> 1578 const pageLoader = document.getElementById('pageLoader'); 1579 const spinner = document.querySelector('.spinner-overlay'); 1580 1581 function hidePageLoader() { 1582 if (!pageLoader) { 1583 return; 1584 } 1585 pageLoader.classList.add('hidden'); 1586 setTimeout(() => { 1587 pageLoader.style.display = 'none'; 1588 }, 400); 1589 } 1590 1591 function showSpinner() { 1592 spinner?.classList.add('visible'); 1593 } 1594 1595 function hideSpinner() { 1596 spinner?.classList.remove('visible'); 1597 } 1598 1599 function showSpinnerWithTimeout(timeout = 30000) { 1600 showSpinner(); 1601 setTimeout(hideSpinner, timeout); 1602 } 1603 1604 globalThis.addEventListener('load', hidePageLoader); 1605 setTimeout(hidePageLoader, 3000); 1606 1607 globalThis.addEventListener('error', () => { 1608 hidePageLoader(); 1609 hideSpinner(); 1610 }); 1611 1612 globalThis.addEventListener('popstate', hideSpinner); 1613 1614 globalThis.addEventListener('pageshow', (event) => { 1615 if (event.persisted) { 1616 hidePageLoader(); 1617 hideSpinner(); 1618 } 1619 }); 1620 1621 if ('navigation' in globalThis) { 1622 globalThis.navigation.addEventListener('navigate', (event) => { 1623 const newUrl = new URL(event.destination.url); 1624 const currentUrl = new URL(globalThis.location.href); 1625 1626 if ( 1627 (newUrl.pathname === currentUrl.pathname && newUrl.search === currentUrl.search) || 1628 event.navigationType === 'traverse' 1629 ) { 1630 hideSpinner(); 1631 return; 1632 } 1633 1634 showSpinnerWithTimeout(); 1635 }); 1636 } else { 1637 globalThis.addEventListener('beforeunload', (event) => { 1638 if (!event.currentTarget.location.hash) { 1639 showSpinner(); 1640 } 1641 }); 1642 } 1643</script>
1643 1644 1645 1646 1647
1647<script type="text/javascript" src="/static/core/js/app.d41d8cd98f00.js"></script>
1647 1648
1648<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
1648 1649
1649<script src='https://unpkg.com/[email protected]/dist/panzoom.min.js'></script>
1649 1650
1650<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-zoom/1.0.6/medium-zoom.min.js"></script>
1650 1651
1651<script type="text/javascript" src="/static/core/js/libgif.1e1a32e8e9f2.js"></script>
1651 1652
1652<script type="text/javascript" src="/static/core/js/rubbable.b5b84d719b05.js"></script>
1652 1653
1653<script src="https://code.jquery.com/jquery-3.7.1.min.js" 1654 integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous" defer></script>
1654 1655
1655<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
1655 1656
1656<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
1656 1657
1657<script type="text/javascript"> 1658 // Initialize medium-zoom 1659 mediumZoom('.zoom-image', { 1660 background: 'rgba(0, 0, 0, 0.5)', 1661 margin: 24, 1662 scrollOffset: 2, 1663 container: document.body, 1664 template: null, 1665 zIndex: 999, 1666 }); 1667 </script>
1667 1668 1669
1670<script> 1671 function toggleContent(sectionId) { 1672 var shortContent = document.getElementById('short-' + sectionId); 1673 var fullContent = document.getElementById('full-' + sectionId); 1674 var toggleBtn = document.getElementById('toggle-' + sectionId); 1675 1676 if (shortContent.classList.contains('hidden')) { 1677 shortContent.classList.remove('hidden'); 1678 fullContent.classList.add('hidden'); 1679 toggleBtn.innerHTML = 'More <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>'; 1680 } else { 1681 shortContent.classList.add('hidden'); 1682 fullContent.classList.remove('hidden'); 1683 toggleBtn.innerHTML = 'Less <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>'; 1684 } 1685 } 1686 1687 document.addEventListener('DOMContentLoaded', function() { 1688 var toggleButtons = document.querySelectorAll('[id^="toggle-"]'); 1689 toggleButtons.forEach(function(button) { 1690 var sectionId = button.id.split('-')[1]; 1691 button.addEventListener('click', function() { 1692 toggleContent(sectionId); 1693 }); 1694 }); 1695 }); 1696</script>
1696 1697 1698 1699</body> 1700 1701</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.