Refactor and polish calendar app: improved accessibility, cleaned up styles, and ensured responsiveness

index.html

@@ -15,12 +15,12 @@
             <h1>🗓️ Calendar Filter App</h1>
             <p class="subtitle">Load, filter, and combine calendars with style.</p>
         </header>
-        <div class="flex_input">
+        <form class="flex_input" onsubmit="return false;">
             <input type="text" id="ics_file" placeholder="Paste .ics URL or API endpoint here" />
-            <input type="button" value="new calendar" id="ics_run" />
-            <input type="button" value="add a calendar" id="ics_add" />
-        </div>
-        <div class="info-bar" style="text-align: center">
+            <button type="button" class="btn btn-primary" id="ics_run">New Calendar</button>
+            <button type="button" class="btn btn-primary" id="ics_add">Add a Calendar</button>
+        </form>
+        <div class="info-bar">
             <span>Tip: You can add multiple calendars. Hover events for details.
                 <a href="https://fullcalendar.io/" target="_blank" rel="noopener noreferrer">Powered by
                     FullCalendar</a></span>
@@ -30,18 +30,25 @@
                 No calendar loaded yet. Paste a URL to get started!
             </div>
             <div id="calendar">
-                <div id="calendar"></div>
+                <!-- <div id="calendar"></div> -->
             </div>
         </div>
         <div class="event-source-management" id="event-source-management">
-            <h2>Event Sources</h2>
+            <div class="d-flex justify-content-between align-items-center mb-3">
+                <h4>Event Sources</h4>
+                <button id="reload" class="btn btn-outline-primary">
+                    <i class="bi bi-arrow-clockwise"></i> Reload
+                </button>
+            </div>
+
             <div id="event-source-list">
                 <!-- Event source cards will be dynamically added here -->
             </div>
         </div>
         <footer class="app-footer">
             <p>Made with Rust, JS, and ❤️</p>
-            <p>by
+            <p>
+                by
                 <a href="//ldlda.com" target="_blank" rel="noopener noreferrer">lđa</a>
             </p>
         </footer>