Improved date

app/static/style.css

@@ -446,6 +446,13 @@
       margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-x-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;

app/templates/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Focal</title>
     <link rel="stylesheet" type="text/css" href="../static/style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
     <style>
         .collapsible-content {
             max-height: 0;
@@ -74,7 +75,7 @@
 
             <div class="flex justify-center">
                 <div
-                    class="flex items-center space-x-2 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
+                    class="flex items-center space-x-1 px-3 py-1.5 bg-gray-100 dark:bg-gray-700 rounded-lg border border-gray-200 dark:border-gray-600">
                     {% if update_time == -1 %}
                     <svg class="text-blue-600 h-3 w-3 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none"
                         viewBox="0 0 24 24">
@@ -121,8 +122,12 @@
             {% for article in articles %}
             <article>
                 <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
-                <span class="text-sm text-gray-500">{{ article.date }}</span>
-                <h2 class="mb-4 mt-4 text-xl font-semibold tracking-tight text-gray-900">{{ article.title }}</h2>
+                <span class="utc-timestamp text-sm text-gray-500" data-timestamp-utc="{{ article.date }}">
+                    {{ article.date }}
+                </span>
+                <h2 class="mb-4 mt-4 text-xl font-semibold tracking-tight text-gray-900">
+                    {{ article.title }}
+                </h2>
                 {% if article.image_url %}
                 <img class="w-full h-48 object-cover rounded-lg mb-4 mt-4" src="{{ article.image_url }}" />
                 {% endif %}
@@ -130,20 +135,18 @@
                     {{ article.content }}
                 </p>
                 <button type="button"
-                    class="toggle-button cursor-pointer flex items-center space-x-2 text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-100 hover:bg-gray-100 font-semibold rounded-lg text-sm px-4 py-2 me-2 mb-2"
+                    class="toggle-button cursor-pointer flex items-center space-x-1 text-gray-900 bg-white border border-gray-300 focus:outline-none focus:ring-4 focus:ring-gray-100 hover:bg-gray-100 font-semibold rounded-lg text-sm px-4 py-2 me-2 mb-2"
                     aria-expanded="false" aria-controls="content-to-toggle">
                     <div class="icon-container relative w-4 h-4">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-                            stroke-linecap="round" stroke-linejoin="round"
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                             class="chevron-down lucide lucide-chevron-down w-full h-full transition-opacity duration-300"
                             aria-hidden="true">
                             <path d="m6 9 6 6 6-6"></path>
                         </svg>
 
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
-                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
-                            stroke-linecap="round" stroke-linejoin="round"
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
                             class="chevron-up lucide lucide-chevron-down w-full h-full transition-opacity duration-300 hidden"
                             aria-hidden="true">
                             <path d="m18 15-6-6-6 6"></path>
@@ -187,7 +190,7 @@
     </div>
 
     <script>
-        // JavaScript for the collapsible sections
+        // Collapsible sections
         document.addEventListener('DOMContentLoaded', function () {
             const allToggleButtons = document.querySelectorAll('.toggle-button');
 
@@ -204,6 +207,35 @@
                 });
             });
         });
+
+
+        // Time conversion function
+        document.addEventListener('DOMContentLoaded', () => {
+            const timeSpans = document.querySelectorAll('.utc-timestamp');
+
+            timeSpans.forEach(timeSpan => {
+                const datetimeStrUTC = timeSpan.getAttribute('data-timestamp-utc');
+
+                if (datetimeStrUTC) {
+                    const date = new Date(datetimeStrUTC + 'Z');
+
+                    const options = {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        timeZoneName: 'short',
+                    };
+
+                    const readableLocal = date.toLocaleString(undefined, options);
+
+                    timeSpan.textContent = readableLocal;
+                } else {
+                    timeSpan.textContent = 'Invalid Time';
+                }
+            });
+        });
     </script>
 </body>