diff --git a/frontend/package.json b/frontend/package.json index 18b808f..c97f046 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 891187e..dd14fcf 100644 --- a/frontend/pnpm-lock.yaml +++ b/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: diff --git a/frontend/src/app.jsx b/frontend/src/app.jsx index bd3f5c3..7605b9e 100644 --- a/frontend/src/app.jsx +++ b/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 ( <> -
- - - - -
- + + + + {/* */} + + - - + + {/* Here for nothing */} + {/* */} + ) } diff --git a/frontend/src/assets/account.svg b/frontend/src/assets/account.svg new file mode 100644 index 0000000..33cfc7b --- /dev/null +++ b/frontend/src/assets/account.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/filters.svg b/frontend/src/assets/filters.svg new file mode 100644 index 0000000..33299c4 --- /dev/null +++ b/frontend/src/assets/filters.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/settings.svg b/frontend/src/assets/settings.svg new file mode 100644 index 0000000..f6de4fd --- /dev/null +++ b/frontend/src/assets/settings.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/components/Cards/grid.jsx b/frontend/src/components/Cards/grid.jsx new file mode 100644 index 0000000..99bfec9 --- /dev/null +++ b/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 ( + + ) +} + +export default Button; \ No newline at end of file diff --git a/frontend/src/components/Cards/grid.module.css b/frontend/src/components/Cards/grid.module.css new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/components/Filters/panel.module.css b/frontend/src/components/Filters/panel.module.css index 1fb2db2..7c100a6 100644 --- a/frontend/src/components/Filters/panel.module.css +++ b/frontend/src/components/Filters/panel.module.css @@ -1,6 +1,6 @@ .navbar { position: absolute; - top: 13rem; + top: 10rem; bottom: 3rem; right: 3rem; /* left: 12rem; */ diff --git a/frontend/src/components/NavBar/navbar.jsx b/frontend/src/components/NavBar/navbar.jsx index 2c7770d..3511439 100644 --- a/frontend/src/components/NavBar/navbar.jsx +++ b/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. > + Home + Mods + Modpacks + About + + + {children} - Home - Mods - Modpacks ) } diff --git a/frontend/src/components/NavBar/navbar.module.css b/frontend/src/components/NavBar/navbar.module.css index 95e5e3b..5f74bdf 100644 --- a/frontend/src/components/NavBar/navbar.module.css +++ b/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 */ - padding-left: 1em; + align-items: center; + 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); } \ No newline at end of file diff --git a/frontend/src/pages/about.jsx b/frontend/src/pages/about.jsx new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/pages/home.jsx b/frontend/src/pages/home.jsx new file mode 100644 index 0000000..bb841c2 --- /dev/null +++ b/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 ( + <> + + + + +
An open place for mods
+ +
+
+ + ); +} + +export default HomePage; \ No newline at end of file diff --git a/frontend/src/pages/mods.jsx b/frontend/src/pages/mods.jsx new file mode 100644 index 0000000..a755afd --- /dev/null +++ b/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 ( + <> + + + + + +
+ + ); +} + +export default ModsPage; \ No newline at end of file diff --git a/frontend/src/pages/settings.jsx b/frontend/src/pages/settings.jsx new file mode 100644 index 0000000..6d254fa --- /dev/null +++ b/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 ( + <> +

Settings

+
+
+ + +
+
+ +
+
+ + ); +} + +export default SettingsPage; \ No newline at end of file diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css index 9c0abcd..4914fc8 100644 --- a/frontend/src/styles/app.css +++ b/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; - top: 1.3rem; + left: 5rem; + top: 3.3rem; color: #eaeaea; font-family: Inter; @@ -29,4 +25,56 @@ a { padding: 1.5em; 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; + } \ No newline at end of file diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index a29148e..67db913 100644 --- a/frontend/src/styles/global.css +++ b/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'); diff --git a/frontend/src/styles/home.css b/frontend/src/styles/home.css new file mode 100644 index 0000000..7bf0622 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/frontend/src/styles/mods.css b/frontend/src/styles/mods.css new file mode 100644 index 0000000..e69de29