From e5a8f88ade996ba3c1faa012443979d7dcf052de Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Mon, 12 Jan 2026 15:46:35 +0000
Subject: [PATCH] added time

---
 nginx/vue/src/components/quick/Time.vue | 27 +++++++++++++++++++++++++
 nginx/vue/src/views/Home.vue            |  6 +++++-
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 nginx/vue/src/components/quick/Time.vue

diff --git a/nginx/vue/src/components/quick/Time.vue b/nginx/vue/src/components/quick/Time.vue
new file mode 100644
index 0000000..be37ac7
--- /dev/null
+++ b/nginx/vue/src/components/quick/Time.vue
@@ -0,0 +1,27 @@
+<script setup>
+// Get the current date and time, make time reactive
+// Get the month name, weekday name and time should be hh:mm:ss
+import { ref } from "vue";
+
+const date = new Date();
+const day = date.getDate();
+const time = ref(
+    date.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" }),
+);
+const weekday = date.toLocaleDateString("en-GB", { weekday: "long" });
+const month = date.toLocaleDateString("en-GB", { month: "long" });
+
+setInterval(() => {
+    time.value = date.toLocaleTimeString("en-GB", {
+        hour: "2-digit",
+        minute: "2-digit",
+    });
+}, 1000);
+</script>
+
+<template>
+    <div class="flex-col">
+        <h4>{{ time }}</h4>
+        <h4>{{ weekday }} {{ day }}, {{ month }}</h4>
+    </div>
+</template>
diff --git a/nginx/vue/src/views/Home.vue b/nginx/vue/src/views/Home.vue
index 2bfbf72..bafc8f6 100644
--- a/nginx/vue/src/views/Home.vue
+++ b/nginx/vue/src/views/Home.vue
@@ -1,5 +1,6 @@
 <script setup>
 import Timer from "@/components/quick/Timer.vue";
+import Time from "@/components/quick/Time.vue";
 
 import Intro from "@/components/home/Intro.vue";
 import Stamps from "@/components/home/Stamps.vue";
@@ -15,7 +16,10 @@ import Watching from "@/components/home/Watching.vue";
 <template>
     <div class="overlay">
         <img src="/img/memes/fire-woman.gif" class="br w-10vw" />
-        <Timer class="tr bdr-2 bg-primary" />
+        <div class="flex-col tr">
+            <Time class="bdr-2 bg-primary" />
+            <Timer class="bdr-2 bg-primary" />
+        </div>
     </div>
     <div class="background halftone" />