Added support for PWAs

index.html

@@ -25,6 +25,8 @@
     <meta name="twitter:description" content="The EventHorizon App is an intuitive event countdown tool, perfect for tracking important dates and occasions in your life.">
     <meta name="twitter:image" content="./images/eventhorizon-logo.png">
     <meta name="referrer" content="no-referrer-when-downgrade">
+    <meta name="theme-color" content="#ffffff">
+    <link rel="manifest" href="manifest.json">
     <title>The EventHorizon App</title>
     <link rel="stylesheet" href="src/css/style.css" />
     <script src="src/js/script.js" defer></script>
@@ -39,8 +41,8 @@ <h2>The Event Horizon App</h2>
         </div>
         <div class="weather-widget" style="text-align: center">
             <h4 style="margin-bottom: -10px">View weather at your location</h4>
-            <input type="text" id="weatherLocation" style="margin-bottom: 10px" placeholder="Enter location">
-            <button onclick="fetchWeather()" style="margin-bottom: 10px; width: 147px; margin-right: -5px">View Weather</button>
+            <input type="text" id="weatherLocation" style="margin-bottom: 10px; font: inherit" placeholder="Enter location">
+            <button onclick="fetchWeather()" style="margin-bottom: 10px; width: 147px; margin-right: -5px; font: inherit">View Weather</button>
             <div id="weatherDisplay"></div>
         </div>
     </header>
@@ -81,11 +83,11 @@ <h1 id="event-title">New Years Eve</h1>
         <input type="text" id="custom-event-name">
         <label for="custom-event">Event date: </label>
         <input type="date" id="custom-event">
-        <button onclick="updateEvent()">Set Event</button>
+        <button style="font: inherit" onclick="updateEvent()">Set Event</button>
         <p id="date-warning" style="color:red;"></p>
     </div>
 
-    <button id="editEventButton">Edit Event</button>
+    <button style="font: inherit" id="editEventButton">Edit Event</button>
 
     <div id="editEventModal" class="modal">
         <div class="modal-content">
@@ -105,7 +107,7 @@ <h2 style="margin-top: 5px">Edit Event</h2>
         </div>
     </div>
 
-    <button id="shareEventButton" onclick="shareEvent()">Share Event</button>
+    <button id="shareEventButton" style="font: inherit" onclick="shareEvent()">Share Event</button>
 
     <div id="shareModal" class="modal">
         <div class="modal-content" style="border-radius: 8px">
@@ -125,7 +127,7 @@ <h2 style="margin-top: 5px">Edit Event</h2>
     <div class="reminder-setup">
         <h3>Set a reminder:</h3>
         <input type="number" id="reminder-time" min="0" placeholder="Hours before event">
-        <button onclick="setReminder()">Set Reminder</button>
+        <button style="font: inherit" onclick="setReminder()">Set Reminder</button>
     </div>
 
     <div id="custom-events-list">
@@ -135,12 +137,12 @@ <h3>Your Recently Added Events:</h3>
 
     <div id="notesWidget" class="notes-widget">
         <div id="notesHeader" class="notes-header">
-            <span id="notesTitle">Add an Event Note</span>
-            <button id="toggleNotesButton" onclick="toggleNotes()" title="Maximize/Minimize Notes" style="box-shadow: none">−</button>
+            <span id="notesTitle">Add an Quick Note</span>
+            <button id="toggleNotesButton" onclick="toggleNotes()" title="Maximize/Minimize Notes" style="box-shadow: none">+</button>
         </div>
         <div id="notesContent" class="notes-content">
             <textarea id="eventNotes" placeholder="Quick notes about your event..."></textarea>
-            <button onclick="saveNotes()">Save Notes</button>
+            <button style="font: inherit" onclick="saveNotes()">Save Notes</button>
         </div>
     </div>
 
@@ -150,10 +152,10 @@ <h3>Your Recently Added Events:</h3>
             <button id="minimizeChatbot" onclick="toggleChatbot()" title="Maximize/Minimize Chatbot">-</button>
         </div>
         <div id="chatbotBody"></div>
-        <input id="chatbotInput" type="text" style="color: white" placeholder="Ask me anything...">
+        <input id="chatbotInput" type="text" style="color: white; font: inherit" placeholder="Ask me anything...">
     </div>
 
-    <button onclick="window.location.href='src/html/about.html'" style="margin-bottom: 10px">About</button>
+    <button onclick="window.location.href='src/html/about.html'" style="margin-bottom: 10px; font: inherit">About</button>
 
 </body>
 

manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "The EventHorizon App",
+  "short_name": "EventHorizon",
+  "description": "The EventHorizon App is an intuitive event countdown tool, perfect for tracking important dates and occasions in your life.",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#ffffff",
+  "icons": [
+    {
+      "src": "images/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "images/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "orientation": "portrait",
+  "lang": "en-US",
+  "scope": "/",
+  "dir": "ltr",
+  "prefer_related_applications": false
+}

src/css/style.css

@@ -227,41 +227,39 @@ h1 {
     padding: 5px 10px;
     background: linear-gradient(90deg, #53341C 0%, #a85432 100%);
     color: white;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
+    border-radius: 8px;
 }
 
 .weather-widget {
     position: absolute;
-    top: 70px; /* Adjusted to vertically center */
+    top: 70px;
     right: 10px;
-    transform: translateY(-50%); /* Adjusted for vertical centering */
+    transform: translateY(-50%);
     text-align: right;
-    font-size: 0.8rem; /* Smaller font size */
+    font-size: 0.8rem;
 }
 
 #weatherLocation {
     margin-right: 5px;
-    padding: 3px; /* Smaller padding */
+    padding: 3px;
     border-radius: 4px;
     border: 1px solid #ddd;
-    font-size: 0.8rem; /* Smaller font size */
+    font-size: 0.8rem;
 }
 
 #weatherDisplay p {
-    margin: 2px 0; /* Less margin for a tighter fit */
+    margin: 2px 0;
 }
 
 .notes-title {
     background: none;
 }
 
 .notes-content {
-    display: none; /* Start with the content hidden */
+    display: none;
     background-color: rgba(255, 255, 255, 0.9);
     padding: 10px;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
+    border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }
 

src/js/script.js

@@ -193,6 +193,8 @@ function displayCustomEvents() {
 
         const deleteBtn = document.createElement('button');
         deleteBtn.textContent = 'Delete';
+        deleteBtn.style.font = 'inherit';
+        deleteBtn.style.fontSize = '11px';
         deleteBtn.addEventListener('click', function(e) {
             e.stopPropagation();
             customEvents.splice(index, 1);
@@ -309,6 +311,7 @@ changeBackgroundBtn.textContent = "Change Background";
 changeBackgroundBtn.style.position = "fixed";
 changeBackgroundBtn.style.bottom = "10px";
 changeBackgroundBtn.style.left = "10px";
+changeBackgroundBtn.style.font = "inherit";
 changeBackgroundBtn.id = "changeBackgroundBtn";
 changeBackgroundBtn.onclick = function() {
     setRandomBackgroundImage();