Re-implement announcement bar

layeredy · Oct 30, 2024 · db0ab87 · db0ab87
1 parent 38f1a3b
commit db0ab87
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/data.json b/data.json
@@ -2,18 +2,21 @@
   "Whitelabel": false,
   "RandomOperationalMessage": true,
   "OverallStatus": "NoOverride",
+  "announcement": {
+    "text": "This is a demo announcement. You can customize this message in data.json!"
+  },
   "maintenanceAlerts": [
     {
       "start": "2024-09-17T12:00:00Z",
       "end": "2024-09-18T12:00:00Z",
-      "message": "Demo maintenance (hide by disabling maintenanceAlerts in data.json!.",
-      "title": "Demo"
+      "message": "Demo maintenance (hide by disabling maintenanceAlerts in data.json).",
+      "title": "Demo Maintenance"
     }
   ],
   "sections": {
     "maintenanceAlerts": true,
     "statusUpdates": true,
-    "announcementBar": false
+    "announcementBar": true
   },
   "services": {
     "Example 1": {
@@ -35,7 +38,7 @@
     {
       "color": "#7a54f8",
       "date": "2024-08-10T09:00:00Z",
-      "message": "We like playing uno... and developing software",
+      "message": "We like playing Uno... and developing software!",
       "title": "This is a demo site!"
     }
   ]

diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@
 </head>
 <body>
     <div class="container">
+        <div id="announcement-bar"></div>
         <h1><a href="https://layeredy.com"><img src="https://cdn.layeredy.com/uptimematrix/wordmark.png" alt="UptimeMatrix" class="logo"></a></h1>
         <div id="overall-status"></div>
         <div id="maintenance-alerts"></div>
@@ -28,7 +29,7 @@ <h1><a href="https://layeredy.com"><img src="https://cdn.layeredy.com/uptimematr
             </button>
         </div>
         <div class="copyright">
-            Status page by <a href="https://uptimematrix.com" target="_blank"><strong>UptimeMatrix</strong>  <!-- You can disable this in data.json (but please don't! Support open source projects!) -->
+            Status page by <a href="https://uptimematrix.com" target="_blank"><strong>UptimeMatrix</strong>
         </div>
     </div>
     <script src="script.js"></script>

diff --git a/styles.css b/styles.css
@@ -64,6 +64,7 @@ h1 {
   font-weight: 600;
   box-shadow: var(--box-shadow);
   font-size: 0.9em;
+  border-radius: var(--border-radius);
 }
 
 .alert,