Settings and home pages + various things

frontend/package.json

@@ -9,7 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "preact": "^10.26.5"
+    "preact": "^10.26.5",
+    "preact-router": "^4.1.2"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.1",

frontend/pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       preact:
         specifier: ^10.26.5
         version: 10.26.6
+      preact-router:
+        specifier: ^4.1.2
+        version: 4.1.2(preact@10.26.6)
     devDependencies:
       '@preact/preset-vite':
         specifier: ^2.10.1
@@ -558,6 +561,11 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  preact-router@4.1.2:
+    resolution: {integrity: sha512-uICUaUFYh+XQ+6vZtQn1q+X6rSqwq+zorWOCLWPF5FAsQh3EJ+RsDQ9Ee+fjk545YWQHfUxhrBAaemfxEnMOUg==}
+    peerDependencies:
+      preact: '>=10'
+
   preact@10.26.6:
     resolution: {integrity: sha512-5SRRBinwpwkaD+OqlBDeITlRgvd8I8QlxHJw9AxSdMNV6O+LodN9nUyYGpSF7sadHjs6RzeFShMexC6DbtWr9g==}
 
@@ -1113,6 +1121,10 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  preact-router@4.1.2(preact@10.26.6):
+    dependencies:
+      preact: 10.26.6
+
   preact@10.26.6: {}
 
   rollup@4.40.2:

frontend/src/app.jsx

@@ -2,10 +2,16 @@
 
 // Functions
 import { useState } from 'preact/hooks'
+import { Router } from 'preact-router';
+
+// Pages
+import HomePage from './pages/home';
+import ModsPage from './pages/mods';
+// import AboutPage from './pages/about';
+import SettingsPage from './pages/settings';
 
 // Components
 import NavBar from './components/NavBar/navbar'
-import FiltersPanel from './components/Filters/panel'
 import Button from './components/Buttons/button'
 
 // Styles
@@ -19,20 +25,21 @@ export function App() {
 
   return (
     <>
-      <div>
-        <a href="https://wf.oblic-parallels.fr" target="_blank">
-          <img src={logo} class="logo img" alt="WF" />
-          <a class="logo text"> radio </a>
-        </a>
-      </div>
 
-      <Button onClick={() => setCount((count) => count + 1)} style={{position: 'absolute', bottom: '10px'}}>
-        Autodesctruction in {count}
-      </Button>
 
+      <Router>
+        <HomePage path="/home" />
+        <ModsPage path="/mods" />
+        {/* <AboutPage path="/about" /> */}
+        <SettingsPage path="/settings" />
+      </Router>
       <NavBar></NavBar>
 
-      <FiltersPanel></FiltersPanel>
+      {/* Here for nothing */}
+      {/* <Button onClick={() => setCount((count) => count + 1)} style={{position: 'absolute', bottom: '10px'}}>
+        Autodesctruction in {count}
+      </Button> */}
+
     </>
   )
 }

frontend/src/assets/account.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240.92-268.31q51-37.84 111.12-59.77Q412.15-350 480-350t127.96 21.92q60.12 21.93 111.12 59.77 37.3-41 59.11-94.92Q800-417.15 800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 62.85 21.81 116.77 21.81 53.92 59.11 94.92ZM480.01-450q-54.78 0-92.39-37.6Q350-525.21 350-579.99t37.6-92.39Q425.21-710 479.99-710t92.39 37.6Q610-634.79 610-580.01t-37.6 92.39Q534.79-450 480.01-450ZM480-100q-79.15 0-148.5-29.77t-120.65-81.08q-51.31-51.3-81.08-120.65Q100-400.85 100-480t29.77-148.5q29.77-69.35 81.08-120.65 51.3-51.31 120.65-81.08Q400.85-860 480-860t148.5 29.77q69.35 29.77 120.65 81.08 51.31 51.3 81.08 120.65Q860-559.15 860-480t-29.77 148.5q-29.77 69.35-81.08 120.65-51.3 51.31-120.65 81.08Q559.15-100 480-100Zm0-60q54.15 0 104.42-17.42 50.27-17.43 89.27-48.73-39-30.16-88.11-47Q536.46-290 480-290t-105.77 16.65q-49.31 16.66-87.92 47.2 39 31.3 89.27 48.73Q425.85-160 480-160Zm0-350q29.85 0 49.92-20.08Q550-550.15 550-580t-20.08-49.92Q509.85-650 480-650t-49.92 20.08Q410-609.85 410-580t20.08 49.92Q450.15-510 480-510Zm0-70Zm0 355Z"/></svg>

frontend/src/assets/filters.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M450-130v-220h60v80h320v60H510v80h-60Zm-320-80v-60h220v60H130Zm160-160v-80H130v-60h160v-80h60v220h-60Zm160-80v-60h380v60H450Zm160-160v-220h60v80h160v60H670v80h-60Zm-480-80v-60h380v60H130Z"/></svg>

frontend/src/assets/settings.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m387.69-100-15.23-121.85q-16.07-5.38-32.96-15.07-16.88-9.7-30.19-20.77L196.46-210l-92.3-160 97.61-73.77q-1.38-8.92-1.96-17.92-.58-9-.58-17.93 0-8.53.58-17.34t1.96-19.27L104.16-590l92.3-159.23 112.46 47.31q14.47-11.46 30.89-20.96t32.27-15.27L387.69-860h184.62l15.23 122.23q18 6.54 32.57 15.27 14.58 8.73 29.43 20.58l114-47.31L855.84-590l-99.15 74.92q2.15 9.69 2.35 18.12.19 8.42.19 16.96 0 8.15-.39 16.58-.38 8.42-2.76 19.27L854.46-370l-92.31 160-112.61-48.08q-14.85 11.85-30.31 20.96-15.46 9.12-31.69 14.89L572.31-100H387.69ZM440-160h78.62L533-267.15q30.62-8 55.96-22.73 25.35-14.74 48.89-37.89L737.23-286l39.39-68-86.77-65.38q5-15.54 6.8-30.47 1.81-14.92 1.81-30.15 0-15.62-1.81-30.15-1.8-14.54-6.8-29.7L777.38-606 738-674l-100.54 42.38q-20.08-21.46-48.11-37.92-28.04-16.46-56.73-23.31L520-800h-79.38l-13.24 106.77q-30.61 7.23-56.53 22.15-25.93 14.93-49.47 38.46L222-674l-39.38 68L269-541.62q-5 14.24-7 29.62t-2 32.38q0 15.62 2 30.62 2 15 6.62 29.62l-86 65.38L222-286l99-42q22.77 23.38 48.69 38.31 25.93 14.92 57.31 22.92L440-160Zm40.46-200q49.92 0 84.96-35.04 35.04-35.04 35.04-84.96 0-49.92-35.04-84.96Q530.38-600 480.46-600q-50.54 0-85.27 35.04T360.46-480q0 49.92 34.73 84.96Q429.92-360 480.46-360ZM480-480Z"/></svg>

frontend/src/components/Cards/grid.jsx

@@ -0,0 +1,19 @@
+import { h } from 'preact' // Necessary ?
+import styles from './button.module.css'
+
+function Button({ children, onClick, className, variant = 'primary', ...rest}) {
+
+    const buttonClasses = `${styles.button} ${styles[variant] || ''} ${className || ''}`
+
+    return (
+        <button
+            className={buttonClasses}
+            onClick= {onClick}
+            {...rest} // Allow passing other props like 'disabled', 'type', etc.
+            >
+                {children}
+        </button>
+    )
+}
+
+export default Button;

frontend/src/components/Filters/panel.module.css

@@ -1,6 +1,6 @@
 .navbar {
     position: absolute;
-    top: 13rem;
+    top: 10rem;
     bottom: 3rem;
     right: 3rem;
     /* left: 12rem; */

frontend/src/components/NavBar/navbar.jsx

@@ -1,6 +1,14 @@
-import { h } from 'preact' // Necessary ?
+// Functions
+import { h } from 'preact'
+import { Link } from 'preact-router/match';
+
+// Styles
 import styles from './navbar.module.css'
 
+// Images
+import userImg from '../../assets/settings.svg'
+
+
 function NavBar({ children, className, ...rest}) {
 
     return (
@@ -8,10 +16,14 @@ function NavBar({ children, className, ...rest}) {
             className={styles.navbar}
             {...rest} // Allow passing other props like 'disabled', 'type', etc.
             >
+            <a className={styles.leftItem} href='/home'> Home </a>
+            <a className={styles.leftItem} href='/mods'> Mods </a>
+            <a className={styles.leftItem} href='/modpacks'> Modpacks </a>
+            <a className={styles.leftItem} href='/about'> About </a>
+            <a className={styles.rightItem} href='/settings'> 
+                <img src={userImg} width={'170%'}></img>
+            </a>
                 {children}
-            <a href='index'> Home </a>
-            <a href='settings'> Mods </a>
-            <a href='settings'> Modpacks </a>
         </nav>
     )
 }

frontend/src/components/NavBar/navbar.module.css

@@ -6,6 +6,7 @@
     
     margin: 1rem;
     height: 5rem;
+    min-width: 29rem; /* TODO update when changing navbar items (not automatic)*/
     
     background-color: #1a1a1a;
     color: #eaeaea;
@@ -16,13 +17,13 @@
 
     display: flex;
     flex-direction: row;
-    align-items: center; /* Vertically align items along the cross axis */
+    align-items: center;
-    padding-left: 1em;
+    padding-left: 2em;
 }
 
-.navbar > a {
+.leftItem {
     position: relative;
-    /* margin: 0 1.2em; */
+    margin: 0 .2em;
     padding: .2em .7em;
 
     color: #eaeaea;
@@ -33,6 +34,25 @@
     transition: 200ms;
 }
 
-.navbar > a:hover {
+.leftItem:hover {
     background-color: #eaeaea10;
 }
+
+/* WIP */
+.rightItem {
+    margin-left: auto;
+    margin-right: 2em;
+    margin-top: .3em;
+
+    transition: 200ms;
+}
+
+.rightItem > img {
+    border-radius: 100rem;
+    transition: 600ms;
+}
+
+.rightItem > img:hover {
+    background-color: #eaeaea10;
+    transform: rotate(180deg);
+}

frontend/src/pages/home.jsx

@@ -0,0 +1,30 @@
+// Functions
+import { h } from 'preact';
+
+// Images
+import logo from '../assets/logo.png'
+
+// Styles
+import '../styles/home.css'
+
+// Components
+import Button from '../components/Buttons/button';
+
+
+function HomePage() {
+
+  return (
+    <>
+        <a href="https://wf.oblic-parallels.fr" target="_blank">
+            <img src={logo} class="logo img" alt="WF" />
+            <a class="logo text"> radio </a>
+        </a>
+        <div class='title'>An open place for mods</div>
+        <Button className='start-button'>Get started !</Button>
+        <div class='background'></div>
+        <div class='halo'></div>
+    </>
+  );
+}
+
+export default HomePage;

frontend/src/pages/mods.jsx

@@ -0,0 +1,28 @@
+// Functions
+import { h } from 'preact';
+
+// Components
+import FiltersPanel from '../components/Filters/panel'
+
+// Images
+import logo from '../assets/logo.png'
+
+// Styles
+import '../styles/mods.css'
+
+
+function ModsPage() {
+
+  return (
+    <>
+        <a href="https://wf.oblic-parallels.fr" target="_blank">
+            <img src={logo} class="logo img" alt="WF" />
+            <a class="logo text"> radio </a>
+        </a>
+        <FiltersPanel></FiltersPanel>
+        <div class='content-container'></div>
+    </>
+  );
+}
+
+export default ModsPage;

frontend/src/pages/settings.jsx

@@ -0,0 +1,45 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks'; // If you need state for settings
+
+function SettingsPage() {
+
+    const [theme, setTheme] = useState('light');
+    const [notificationsEnabled, setNotificationsEnabled] = useState(true);
+
+    const handleThemeChange = (event) => {
+        setTheme(event.target.value);
+        // Save theme preference (e.g., to local storage)
+    };
+
+  const handleNotificationsChange = (event) => {
+        setNotificationsEnabled(event.target.checked);
+    // Save notification preference
+  };
+
+  return (
+    <>
+        <h1>Settings</h1>
+        <div className='container'>
+            <div>
+                <label htmlFor="theme">Theme:</label>
+                <select id="theme" value={theme} onChange={handleThemeChange}>
+                    <option value="light">Light</option>
+                    <option value="dark">Dark</option>
+                </select>
+            </div>
+            <div>
+                <label>
+                Enable Notifications:
+                <input
+                    type="checkbox"
+                    checked={notificationsEnabled}
+                    onChange={handleNotificationsChange}
+                />
+                </label>
+            </div>
+        </div> 
+    </>
+  );
+}
+
+export default SettingsPage;

frontend/src/styles/app.css

@@ -1,8 +1,3 @@
-
-#app {
-  padding: 2rem;
-}
-
 a {
   text-decoration: none;
 }
@@ -12,6 +7,7 @@ a {
 .logo.img {
   position: absolute;
   top: 1.6rem;
+  left: 2rem;
   height: 6em;
   padding: 1.5em;
 }
@@ -19,8 +15,8 @@ a {
 .logo.text {
 
   position: relative;
-  left: 4rem;
+  left: 5rem;
-  top: 1.3rem;
+  top: 3.3rem;
 
   color: #eaeaea;
   font-family: Inter;
@@ -30,3 +26,55 @@ a {
 
   font-size: 3em;
 }
+
+h1 {
+  position: absolute;
+  left: 0rem;
+  top: -3rem;
+
+  color: #eaeaea;
+  font-family: Inter;
+  font-weight: 600;
+
+  padding: 1.5em;
+
+  font-size: 3em;
+}
+
+
+.content-container {
+
+  position: absolute;
+  top: 11rem;
+  right: 4rem;
+  left: 43rem;
+  bottom: 4rem;
+
+  min-height: 20rem;
+  min-width: 50rem;
+
+  background-color: #1a1a1a;
+  color: #eaeaea;
+
+  border: #3a3a3a solid;
+  border-width: .1em;
+  border-radius: .5rem;
+}
+
+.container {
+  position: absolute;
+  top: 11rem;
+  right: 4rem;
+  left: 4rem;
+  bottom: 4rem;
+
+  padding: 3rem;
+
+  background-color: #101010;
+  color: #eaeaea;
+
+  border: #3a3a3a solid;
+  border-width: .1em;
+  border-radius: .5rem;
+
+}

frontend/src/styles/global.css

@@ -1,4 +1,4 @@
-/*-Impports----------------------------------------------------------*/
+/* Impports */
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
 

frontend/src/styles/home.css

@@ -0,0 +1,46 @@
+.halo {
+    position: fixed;
+    z-index: -1;
+
+    height: 100vh;
+    width: 100vw;
+    background: radial-gradient(circle at 50% 200%,#353be5 0%, #353be5 45%, #00000000 80%);
+}
+
+.background {
+    position: fixed;
+    z-index: -3;
+
+    height: 100vh;
+    width: 100vw;
+    background-color: #000000;
+}
+
+.title {
+    position: fixed;
+    top: 26rem;
+    left: 50%;
+    transform: translate(-50%, -50%); /*Center (compensate size)*/
+    z-index: -2;
+
+    color: #eaeaea;
+    text-align: center;
+    font-family: "Inter";
+    font-weight: 600;
+    font-size: 500%;
+    user-select: none;
+    letter-spacing: 0.1rem;   
+}
+
+.start-button {
+    position: fixed;
+    top: 38rem;
+    left: 50%;
+    transform: translate(-50%, -50%); /*Center (compensate size)*/
+
+    color: #eaeaea;
+    text-align: center;
+    font-weight: 600;
+    font-size: 2rem;
+    letter-spacing: 0.1rem;
+}