From eefb99bc4cdf7d8ba21c8436a1c0c2aca6660a44 Mon Sep 17 00:00:00 2001
From: dvirlabs <dvirlabs@gmail.com>
Date: Wed, 4 Jun 2025 02:48:39 +0300
Subject: [PATCH] Style modal and add clock

---
 frontend/src/App.jsx               |  3 +++
 frontend/src/components/Clock.jsx  | 28 ++++++++++++++++++++++++++++
 frontend/src/style/AddAppModal.css | 12 ++++++++++++
 frontend/src/style/Clock.css       | 23 +++++++++++++++++++++++
 4 files changed, 66 insertions(+)
 create mode 100644 frontend/src/components/Clock.jsx
 create mode 100644 frontend/src/style/Clock.css

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c63be15..1cf07db 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -3,6 +3,8 @@ import { useEffect, useState } from 'react';
 import './App.css';
 import SectionGrid from './components/SectionGrid';
 import AddAppModal from './components/AddAppModal';
+import Clock from './components/Clock';
+
 
 function App() {
   const [sections, setSections] = useState([]);
@@ -19,6 +21,7 @@ function App() {
 
   return (
     <div className="App">
+      <Clock />
       <h1 className="main-title">
         <img src="/navix-logo.svg" alt="Navix logo" className="navix-logo" />
         Navix
diff --git a/frontend/src/components/Clock.jsx b/frontend/src/components/Clock.jsx
new file mode 100644
index 0000000..f0b9c44
--- /dev/null
+++ b/frontend/src/components/Clock.jsx
@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import '../style/Clock.css';
+
+function Clock() {
+  const [now, setNow] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => setNow(new Date()), 1000);
+    return () => clearInterval(timer);
+  }, []);
+
+  const time = now.toLocaleTimeString('en-GB'); // HH:MM:SS
+  const date = now.toLocaleDateString('en-GB', {
+    weekday: 'short',
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric'
+  });
+
+  return (
+    <div className="clock-container">
+      <span className="clock-time">{time}</span>
+      <span className="clock-date">{date}</span>
+    </div>
+  );
+}
+
+export default Clock;
diff --git a/frontend/src/style/AddAppModal.css b/frontend/src/style/AddAppModal.css
index 20ed770..b1bb0e3 100644
--- a/frontend/src/style/AddAppModal.css
+++ b/frontend/src/style/AddAppModal.css
@@ -36,6 +36,17 @@
   z-index: 1000;
 }
 
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .modal {
   background: #111;
   padding: 2rem;
@@ -46,6 +57,7 @@
   flex-direction: column;
   align-items: center;
   font-family: 'Rajdhani', sans-serif;
+  animation: fadeInUp 0.3s ease-out;
 }
 
 .modal h2 {
diff --git a/frontend/src/style/Clock.css b/frontend/src/style/Clock.css
new file mode 100644
index 0000000..cee9b37
--- /dev/null
+++ b/frontend/src/style/Clock.css
@@ -0,0 +1,23 @@
+.clock-container {
+  position: absolute;
+  top: 1.5rem;
+  right: 2rem;
+  text-align: right;
+  font-family: 'Rajdhani', sans-serif;
+  color: #00f0ff;
+  text-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
+  font-size: 1rem;
+  line-height: 1.2;
+  user-select: none;
+}
+
+.clock-time {
+  font-size: 2.1rem;
+  display: block;
+  margin-bottom: 0.2rem;
+}
+
+.clock-date {
+  font-size: 1rem;
+  color: #999;
+}