guillm/wf-radio
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: guillm:e762b7758e02f3179e99e53bda1f01775af9c10e
Branches Tags
guillm:main
..
compare: guillm:fbb486e69712fa6764cd4635a228b9fa8332636f
Branches Tags
guillm:main

No commits in common. "e762b7758e02f3179e99e53bda1f01775af9c10e" and "fbb486e69712fa6764cd4635a228b9fa8332636f" have entirely different histories.
e762b7758e ... fbb486e697

14 changed files with 118 additions and 169 deletions
Show stats Expand all files Collapse all files

4
frontend/index.html
View file

@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WF radio</title>
<title>Vite + Preact</title>
</head>
<body>
<div id="app"></div>

1
frontend/public/favicon.svg
View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-380q-8 0-14-6t-6-14q0-8 6-14t14-6q8 0 14 6t6 14q0 8-6 14t-14 6Zm0-160q-8 0-14-6t-6-14q0-8 6-14t14-6q8 0 14 6t6 14q0 8-6 14t-14 6Zm120 336.92q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61Zm0-160q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61Zm0-160q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61Zm0-160q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61Zm160.09 336.93q-22.4 0-38.17-15.68-15.77-15.68-15.77-38.08t15.68-38.17q15.68-15.77 38.08-15.77t38.17 15.68q15.77 15.68 15.77 38.08t-15.68 38.17q-15.68 15.77-38.08 15.77Zm0-160q-22.4 0-38.17-15.68-15.77-15.68-15.77-38.08t15.68-38.17q15.68-15.77 38.08-15.77t38.17 15.68q15.77 15.68 15.77 38.08t-15.68 38.17q-15.68 15.77-38.08 15.77ZM400-203.08q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61Zm0-480q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61ZM400-100q-8 0-14-6t-6-14q0-8 6-14t14-6q8 0 14 6t6 14q0 8-6 14t-14 6Zm0-720q-8 0-14-6t-6-14q0-8 6-14t14-6q8 0 14 6t6 14q0 8-6 14t-14 6Zm160.09 473.85q-22.4 0-38.17-15.68-15.77-15.68-15.77-38.08t15.68-38.17q15.68-15.77 38.08-15.77t38.17 15.68q15.77 15.68 15.77 38.08t-15.68 38.17q-15.68 15.77-38.08 15.77Zm0-160q-22.4 0-38.17-15.68-15.77-15.68-15.77-38.08t15.68-38.17q15.68-15.77 38.08-15.77t38.17 15.68q15.77 15.68 15.77 38.08t-15.68 38.17q-15.68 15.77-38.08 15.77ZM560-203.08q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61Zm0-480q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61ZM560-100q-8 0-14-6t-6-14q0-8 6-14t14-6q8 0 14 6t6 14q0 8-6 14t-14 6Zm0-720q-8 0-14-6t-6-14q0-8 6-14t14-6q8 0 14 6t6 14q0 8-6 14t-14 6Zm160 616.92q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61Zm0-160q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61Zm0-160q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61Zm0-160q-15.69 0-26.31-10.61-10.61-10.62-10.61-26.31t10.61-26.31q10.62-10.61 26.31-10.61t26.31 10.61q10.61 10.62 10.61 26.31t-10.61 26.31q-10.62 10.61-26.31 10.61ZM840-380q-8 0-14-6t-6-14q0-8 6-14t14-6q8 0 14 6t6 14q0 8-6 14t-14 6Zm0-160q-8 0-14-6t-6-14q0-8 6-14t14-6q8 0 14 6t6 14q0 8-6 14t-14 6Z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 3.2 KiB

1
frontend/public/vite.svg Normal file
View file

@ -0,0 +1 @@
<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="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

50
frontend/src/app.jsx
View file

@ -1,35 +1,43 @@
// --- Imports ---
// Functions
import { useState } from 'preact/hooks'
// Components
import NavBar from './components/NavBar/navbar'
import Button from './components/Buttons/button'
// Styles
import preactLogo from './assets/preact.svg'
import viteLogo from '/vite.svg'
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 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>
<Button onClick={() => setCount((count) => count + 1)} style={{position: 'absolute', bottom: '10px'}}>
Autodesctruction in {count}
</Button>
<NavBar></NavBar>
<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>
</>
)
}

BIN
frontend/src/assets/logo.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 83 KiB

1
frontend/src/assets/preact.svg Normal file
View file

@ -0,0 +1 @@
<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>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

19
frontend/src/components/Buttons/button.jsx
View file

@ -1,19 +0,0 @@
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;

46
frontend/src/components/Buttons/button.module.css
View file

@ -1,46 +0,0 @@
.button {
color: #eaeaea;
font-family: inherit;
font-weight: 500;
padding: 10px 15px;
border: .1em;
border-style: solid;
border-radius: .3em;
transition: 300ms;
}
.primary {
background-color: #353be5;
border-color: #4e53dc;
}
.primary:hover {
background-color: #353be5;
border-color: #6b70f7;
filter: drop-shadow(#353be580 0 0 .7em);
}
.secondary {
background-color: #1a1a1a;
border-color: #2a2a2a;
}
.secondary:hover {
background-color: #2a2a2a;
border-color: #3a3a3a;
}
.tertiary {
background-color: #eaeaea00;
border-color: #eaeaea;
}
.tertiary:hover {
background-color: #eaeaea16;
border-color: #eaeaea;
}

16
frontend/src/components/NavBar/navbar.jsx
View file

@ -1,16 +0,0 @@
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
View file

@ -1,18 +0,0 @@
.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;
}

2
frontend/src/main.jsx
View file

@ -1,5 +1,5 @@
import { render } from 'preact'
import './styles/global.css'
import './styles/index.css'
import { App } from './app.jsx'
render(<App />, document.getElementById('app'))

39
frontend/src/styles/app.css
View file

@ -1,32 +1,25 @@
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
a {
text-decoration: none;
}
/* Logo */
.logo.img {
position: absolute;
top: 1.6rem;
.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);
}
.logo.text {
.card {
padding: 2em;
}
position: relative;
left: 4rem;
top: 1.3rem;
color: #eaeaea;
font-family: Inter;
font-weight: 600;
padding: 1.5em;
font-size: 3em;
}
.read-the-docs {
color: #888;
}

22
frontend/src/styles/global.css
View file

@ -1,22 +0,0 @@
/*-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;
}

68
frontend/src/styles/index.css Normal file
View file

@ -0,0 +1,68 @@
: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;
}
}