Add clock

.gitignore

@@ -13,6 +13,7 @@
 
 !.gitignore
 
+!*.css
 !*.js
 !*.md
 !*.py

server/src/alert.js

@@ -22,7 +22,6 @@ const alertIfTime = () => {
 };
 
 alertIfTime();
-
 setInterval(() => {
     location.reload();
     alertIfTime();
@@ -30,10 +29,19 @@ setInterval(() => {
 
 const updateClock = () => {
     const now = new Date();
-    const hours = now.getHours().toString().padStart(2, '0');
+    const options = {
-    const minutes = now.getMinutes().toString().padStart(2, '0');
+        hour: "2-digit",
-    const seconds = now.getSeconds().toString().padStart(2, '0');
+        minute: "2-digit",
-    document.querySelector(".clock").innerText = `${hours}:${minutes}:${seconds}`;
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric"
     };
 
-setInterval(updateClock, 1000);
+    const dateString = now.toLocaleDateString("tr-TR", options);
+
+    document.querySelector(".clock").innerHTML = dateString;
+};
+
+updateClock();
+setInterval(updateClock, 1 * 60 * 1000);

server/src/main.rs

@@ -45,7 +45,7 @@ async fn main() -> io::Result<()> {
             .service(submit::submit_form)
             .service(view::view)
     })
-    .bind(("0.0.0.0", 8080))?
+    .bind(("0.0.0.0", 8088))?
     .run()
     .await
 }

server/src/view.css

@@ -0,0 +1,40 @@
+body {
+  font-family: sans;
+  background-color: #f4f4f4;
+  margin: 0;
+  padding: 20px;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+ul li {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+ul li h3 {
+  margin-bottom: 10px;
+  font-size: 18px;
+  color: #333;
+}
+
+ul li p {
+  color: #666;
+}
+
+.clock {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  font-size: 32px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+}

server/src/view.rs

@@ -48,49 +48,10 @@ async fn view(data: Data<SqlitePool>) -> web::Result<Markup> {
     Ok(html! {
         (DOCTYPE)
 
-        style {r#"
+        style {
-            body {
+            (PreEscaped(embed::string!("view.css")))
-                font-family: sans;
-                background-color: #f4f4f4;
-                margin: 0;
-                padding: 20px;
         }
 
-            ul {
-                list-style: none;
-                padding: 0;
-            }
-
-            ul li {
-                background-color: #fff;
-                border-radius: 8px;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-                padding: 20px;
-                margin-bottom: 20px;
-            }
-
-            ul li h3 {
-                margin-bottom: 10px;
-                font-size: 18px;
-                color: #333;
-            }
-
-            ul li p {
-                color: #666;
-            }
-
-            .clock {
-                position: absolute;
-                top: 20px;
-                right: 20px;
-                font-size: 24px;
-                background-color: #fff;
-                border-radius: 8px;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-                padding: 20px;
-            }
-        "#}
-
         ul id="reminders" {
             @for reminder in formatted_reminders {
                 li data-timestamp=(reminder.0) data-led=(reminder.3) {