diff --git a/frontend/index.html b/frontend/index.html index ae54c6f..0211e3c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,9 @@ - + - Vite + Preact + WF radio
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg new file mode 100644 index 0000000..dac19cb --- /dev/null +++ b/frontend/public/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/vite.svg b/frontend/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/frontend/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/app.jsx b/frontend/src/app.jsx new file mode 100644 index 0000000..0133166 --- /dev/null +++ b/frontend/src/app.jsx @@ -0,0 +1,35 @@ +// --- Imports --- + +// Functions +import { useState } from 'preact/hooks' + +// Components +import NavBar from './components/NavBar/navbar' +import Button from './components/Buttons/button' + +// Styles +import './styles/app.css' + +// Images +import logo from './assets/logo.png' + +export function App() { + const [count, setCount] = useState(0) + + return ( + <> +
+ + + + +
+ + + + + + ) +} diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png new file mode 100644 index 0000000..dc86a70 Binary files /dev/null and b/frontend/src/assets/logo.png differ diff --git a/frontend/src/assets/preact.svg b/frontend/src/assets/preact.svg deleted file mode 100644 index 908f17d..0000000 --- a/frontend/src/assets/preact.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/src/components/Buttons/button.jsx b/frontend/src/components/Buttons/button.jsx index f5fc7e1..99bfec9 100644 --- a/frontend/src/components/Buttons/button.jsx +++ b/frontend/src/components/Buttons/button.jsx @@ -1,7 +1,8 @@ +import { h } from 'preact' // Necessary ? import styles from './button.module.css' function Button({ children, onClick, className, variant = 'primary', ...rest}) { - // Construct dynamic class names using CSS Modules + const buttonClasses = `${styles.button} ${styles[variant] || ''} ${className || ''}` return ( diff --git a/frontend/src/components/Buttons/button.module.css b/frontend/src/components/Buttons/button.module.css index 78a6d40..86a5006 100644 --- a/frontend/src/components/Buttons/button.module.css +++ b/frontend/src/components/Buttons/button.module.css @@ -1,9 +1,16 @@ .button { - padding: .05em .1em; + color: #eaeaea; + font-family: inherit; + font-weight: 500; - border: 3em; - border-radius: 3px; + padding: 10px 15px; + + border: .1em; + border-style: solid; + border-radius: .3em; + + transition: 300ms; } .primary { @@ -14,6 +21,8 @@ .primary:hover { background-color: #353be5; border-color: #6b70f7; + + filter: drop-shadow(#353be580 0 0 .7em); } .secondary { diff --git a/frontend/src/components/NavBar/navbar.jsx b/frontend/src/components/NavBar/navbar.jsx new file mode 100644 index 0000000..16c586d --- /dev/null +++ b/frontend/src/components/NavBar/navbar.jsx @@ -0,0 +1,16 @@ +import { h } from 'preact' // Necessary ? +import styles from './navbar.module.css' + +function NavBar({ children, className, ...rest}) { + + return ( +
+ {children} +
+ ) +} + +export default NavBar; \ No newline at end of file diff --git a/frontend/src/components/NavBar/navbar.module.css b/frontend/src/components/NavBar/navbar.module.css new file mode 100644 index 0000000..9bbdfbb --- /dev/null +++ b/frontend/src/components/NavBar/navbar.module.css @@ -0,0 +1,18 @@ +.navbar { + position: absolute; + top: 2.5rem; + right: 3rem; + left: 21rem; + + margin: 1rem; + height: 5rem; + + background-color: #1a1a1a; + color: #eaeaea; + + border: #3a3a3a solid; + border-width: .1em; + border-radius: .5rem; + + +} \ No newline at end of file diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx index 16d686b..d5cd39c 100644 --- a/frontend/src/main.jsx +++ b/frontend/src/main.jsx @@ -1,5 +1,5 @@ import { render } from 'preact' -import './styles/index.css' -import { App } from './template-app.jsx' +import './styles/global.css' +import { App } from './app.jsx' render(, document.getElementById('app')) diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css new file mode 100644 index 0000000..9c0abcd --- /dev/null +++ b/frontend/src/styles/app.css @@ -0,0 +1,32 @@ + +#app { + padding: 2rem; +} + +a { + text-decoration: none; +} + +/* Logo */ + +.logo.img { + position: absolute; + top: 1.6rem; + height: 6em; + padding: 1.5em; +} + +.logo.text { + + position: relative; + left: 4rem; + top: 1.3rem; + + color: #eaeaea; + font-family: Inter; + font-weight: 600; + + padding: 1.5em; + + font-size: 3em; +} \ No newline at end of file diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css new file mode 100644 index 0000000..a29148e --- /dev/null +++ b/frontend/src/styles/global.css @@ -0,0 +1,22 @@ +/*-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'); + + +:root { + font-family: 'IBM Plex Mono'; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #0c0c0c; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + min-width: 320px; +} diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css deleted file mode 100644 index 08a3ac9..0000000 --- a/frontend/src/styles/index.css +++ /dev/null @@ -1,68 +0,0 @@ -:root { - font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/frontend/src/styles/template-app.css b/frontend/src/styles/template-app.css deleted file mode 100644 index 088ed3a..0000000 --- a/frontend/src/styles/template-app.css +++ /dev/null @@ -1,25 +0,0 @@ -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.preact:hover { - filter: drop-shadow(0 0 2em #673ab8aa); -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/frontend/src/template-app.jsx b/frontend/src/template-app.jsx deleted file mode 100644 index 8e8038e..0000000 --- a/frontend/src/template-app.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import { useState } from 'preact/hooks' -import preactLogo from './assets/preact.svg' -import viteLogo from '/vite.svg' -import './styles/template-app.css' - -export function App() { - const [count, setCount] = useState(0) - - return ( - <> -
- - - - - - -
-

Vite + Preact

-
- -

- Edit src/app.jsx and save to test HMR -

-
-

- Check out{' '} - - create-preact - - , the official Preact + Vite starter -

-

- Click on the Vite and Preact logos to learn more -

- - ) -}