Add announcement for MediumFast

src/public/index.html

@@ -156,6 +156,30 @@
     <div class="flex flex-col h-full w-full overflow-hidden">
         <div class="flex flex-col h-full">
 
+            <!-- announcement -->
+            <div v-if="isShowingAnnouncement" class="flex bg-yellow-300 p-2 border-gray-300 border-b">
+
+                <!-- info -->
+                <div class="my-auto leading-tight">
+                    <div class="font-bold">Viktigt!</div>
+                    <div class="text-sm">
+                        <span>Den 28 september går STHLM-MESH över till MediumFast modulation. Du behöver uppdatera dina inställningar. För mer info <a href="https://sthlm-mesh.se/blog/2025/övergång-till-mediumfast-den-27-september/" type="button" class="link">klicka här</a>.</span>
+                    </div>
+                </div>
+
+                <!-- action buttons -->
+                <div class="flex my-auto ml-auto mr-0 sm:mr-2">
+                    <a @click="dismissAnnouncement" href="javascript:void(0)" class="rounded-full">
+                        <div class="bg-white hover:bg-gray-100 p-2 rounded-full">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                            </svg>
+                        </div>
+                    </a>
+                </div>
+
+            </div>
+
             <!-- header -->
             <div class="flex p-3 h-16" style="background-color: 30a552;">