Merge pull request 'style' (#9) from style into master

Reviewed-on: #9

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

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;

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 {

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;
+}