feat: improve homepage graphic interface (#21)

UTT-GL03 · Dec 3, 2024 · 79d0941 · 79d0941
1 parent d5c8d77
commit 79d0941
Show file tree

Hide file tree

Showing 6 changed files with 861 additions and 28 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -41,16 +41,126 @@
   color: #888;
 }
 
-.WeatherTable{
-  border-color:#686767 ;
+.WeatherTable {
+  border-color: #686767;
   border: 1px solid;
   padding: 30px;
-  margin-top: 25px ;
+  margin-top: 25px;
   border-radius: 10px;
 }
 
-.CityWrapper{
+.CityWrapper {
   margin: 5%;
   margin-inline: auto;
   align-self: center;
-}
+}
+
+/* Basic Styling for Navbar */
+.NavBar {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1rem;
+  border-bottom: 1px solid #ddd;
+  position: relative;
+}
+
+.NavBar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}
+
+.ProButton, .NavBarButton {
+  background-color: #290975;
+  color: white;
+  border: none;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+  border-radius: 0.5rem;
+}
+
+.ProButton:hover, .NavBarButton:hover {
+  background-color: #33059d;
+}
+
+/* Burger Menu */
+.BurgerMenu {
+  display: none;
+  flex-direction: column;
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0 0;
+  background-color: #ffffff;
+  border: 1px solid #ddd;
+  border-radius: 0.5rem;
+  width: 100%;
+}
+
+.BurgerMenu.is-active {
+  display: flex;
+}
+
+.BurgerMenu li {
+  padding: 0.5rem 1rem;
+}
+
+.BurgerMenu li a {
+  text-decoration: none;
+  color: #290975;
+  font-size: 1rem;
+}
+
+.BurgerMenu li a:hover {
+  color: #33059d;
+}
+
+hr{
+  margin-top: 8;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  border-color: #e5e7eb;
+}
+
+footer {
+  padding: 2rem 1rem;
+}
+
+footer .grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1.5rem;
+}
+
+footer section h5, footer section h6 {
+  margin-bottom: 0.5rem;
+}
+
+footer ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+footer ul li {
+  margin: 0.5rem 0;
+}
+
+footer ul li a {
+  text-decoration: none;
+  color: gray;
+}
+
+footer ul li a:hover {
+  text-decoration: underline;
+}
+
+footer .text-center {
+  margin-top: 1.5rem;
+  text-align: center;
+  font-size: 0.9rem;
+  color: #6c757d;
+}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,4 +1,4 @@
-import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import reactLogo from './assets/favicon.svg'
 import Homepage from './Homepage'
 import ProPage from './ProPage'
@@ -7,13 +7,6 @@ import './App.css'
 function App() {
   return (
     <BrowserRouter>
-      <header>
-        <Link to="/">
-          <h1>
-            HELIOS
-          </h1>
-        </Link>
-      </header>
       <Routes>
         <Route path="/" element={<Homepage/>} />
         <Route path="/pro" element={<ProPage />} />

diff --git a/frontend/src/Homepage.jsx b/frontend/src/Homepage.jsx
@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import './App.css';
 import Icon from '@mdi/react';
-import { mdiMenu, mdiWeatherSunny, mdiWeatherCloudy, mdiWeatherSnowyHeavy, mdiWeatherRainy, mdiWeatherLightningRainy } from '@mdi/js';
+import { mdiWeatherSunny, mdiWeatherCloudy, mdiWeatherSnowyHeavy, mdiWeatherRainy, mdiWeatherLightningRainy } from '@mdi/js';
 import dayjs from 'dayjs';
+import Footer from './components/Footer';
+import Navbar from './components/Navbar';
 
 function Homepage() {
     const [searchQuery, setSearchQuery] = useState('');
@@ -58,18 +60,7 @@ function Homepage() {
 
     return (
         <div>
-            <nav className='NavBar'>
-                <ul>
-                    <button className='ProButton' onClick={() => window.location.href = '/pro'}>
-                        Pro +
-                    </button>
-                </ul>
-                <ul>
-                    <button className='NavBarButton'>
-                        <Icon path={mdiMenu} size={1} />
-                    </button>
-                </ul>
-            </nav>
+            <Navbar />
 
             <div className="WeatherTable">
                 <input
@@ -93,16 +84,16 @@ function Homepage() {
                                     <th>Température MATIN (°C)</th>
                                     <th>Température APREM (°C)</th>
                                     <th>Température SOIRÉE (°C)</th>
-                                    <th>Condition</th>
                                     <th>Humidité</th>
+                                    <th>Condition</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 {filteredData.map((forecast, index) => (
                                     <tr key={index}>
                                         <td>{forecast.city}</td>
                                         <td>{dayjs(forecast.date).format('DD/MM/YYYY')}</td>
-                                        <td>{forecast.morningTemperature}</td>
+                                        <td>{forecast.morningTemperature + "°"}</td>
                                         <td>{forecast.afternoonTemperature}</td>
                                         <td>{forecast.eveningTemperature}</td>
                                         <td>{forecast.humidity}</td>
@@ -130,6 +121,7 @@ function Homepage() {
                     )}
                 </div>
             </div>
+            <Footer />
         </div>
     );
 }

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import '../App.css';
+
+function Footer() {
+    return (
+        <footer className="container-fluid">
+            <hr />
+            <div className="grid">
+                <section>
+                    <h5>HELIOS</h5>
+                    <p>Your trusted source for accurate and minimalist weather forecasts.</p>
+                </section>
+                <section>
+                    <h6>Quick Links</h6>
+                    <div>
+                        <a href="/article">Article of the Day</a>
+                    </div>
+                    <div>
+                        <a href="mailto:[email protected]">Contact Us</a>
+                    </div>
+                </section>
+            </div>
+            <p className="text-center">© {new Date().getFullYear()} Helios App. Licensed under the GNU AGPLv3.<br />See LICENSE for details.
+            </p>
+        </footer>
+    )
+}
+
+export default Footer;
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import Icon from '@mdi/react';
+import { mdiMenu, mdiClose } from '@mdi/js';
+import '../App.css';
+
+function Navbar() {
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    const toggleMenu = () => {
+        setMenuOpen(!menuOpen);
+    };
+
+    return (
+        <header>
+            <nav className="NavBar">
+                <div className="NavBar-header">
+                    <button
+                        className="ProButton"
+                        onClick={() => window.location.href = '/pro'}
+                    >
+                        Pro +
+                    </button>
+                    <Link to="/">
+                        <h1>
+                            HELIOS
+                        </h1>
+                    </Link>
+                    <button
+                        className="NavBarButton"
+                        onClick={toggleMenu}
+                        aria-expanded={menuOpen}
+                        aria-label="Toggle menu"
+                    >
+                        <Icon path={menuOpen ? mdiClose : mdiMenu} size={1} />
+                    </button>
+                </div>
+
+                <ul className={`BurgerMenu ${menuOpen ? 'is-active' : ''}`}>
+                    <li><a href="/article">Article of the day</a></li>
+                    <li><a href="mailto:[email protected]">Contact</a></li>
+                </ul>
+            </nav>
+        </header>
+    );
+}
+
+export default Navbar;