Logo and navbar form
This commit is contained in:
Gu://em_
parent
900f84c304
commit
e762b7758e
16 changed files with 142 additions and 146 deletions
35
frontend/src/app.jsx
Normal file
35
frontend/src/app.jsx
Normal file
|
|
@ -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 (
|
||||
<>
|
||||
<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>
|
||||
|
||||
<NavBar></NavBar>
|
||||
</>
|
||||
)
|
||||
}
|
||||
BIN
frontend/src/assets/logo.png
Normal file
BIN
frontend/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
|
|
@ -1 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
|
@ -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 (
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
16
frontend/src/components/NavBar/navbar.jsx
Normal file
16
frontend/src/components/NavBar/navbar.jsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { h } from 'preact' // Necessary ?
|
||||
import styles from './navbar.module.css'
|
||||
|
||||
function NavBar({ children, className, ...rest}) {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={styles.navbar}
|
||||
{...rest} // Allow passing other props like 'disabled', 'type', etc.
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default NavBar;
|
||||
18
frontend/src/components/NavBar/navbar.module.css
Normal file
18
frontend/src/components/NavBar/navbar.module.css
Normal file
|
|
@ -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;
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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(<App />, document.getElementById('app'))
|
||||
|
|
|
|||
32
frontend/src/styles/app.css
Normal file
32
frontend/src/styles/app.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
22
frontend/src/styles/global.css
Normal file
22
frontend/src/styles/global.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<div>
|
||||
<a href="https://vite.dev" target="_blank">
|
||||
<img src={viteLogo} class="logo" alt="Vite logo" />
|
||||
</a>
|
||||
<a href="https://preactjs.com" target="_blank">
|
||||
<img src={preactLogo} class="logo preact" alt="Preact logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + Preact</h1>
|
||||
<div class="card">
|
||||
<button onClick={() => setCount((count) => count + 1)}>
|
||||
count is {count}
|
||||
</button>
|
||||
<p>
|
||||
Edit <code>src/app.jsx</code> and save to test HMR
|
||||
</p>
|
||||
</div>
|
||||
<p>
|
||||
Check out{' '}
|
||||
<a
|
||||
href="https://preactjs.com/guide/v10/getting-started#create-a-vite-powered-preact-app"
|
||||
target="_blank"
|
||||
>
|
||||
create-preact
|
||||
</a>
|
||||
, the official Preact + Vite starter
|
||||
</p>
|
||||
<p class="read-the-docs">
|
||||
Click on the Vite and Preact logos to learn more
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue