phc
/
storage
6
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Commit intermedio

Browse Source
main
Antonio De Lucreziis 2 years ago
parent fc8bb1c482
commit 658a40c8bb
3 changed files with 113 additions and 46 deletions
Show Stats Download Patch File Download Diff File

43
_frontend/index.html
Unescape Escape View File

@ -14,7 +14,46 @@
<link rel="stylesheet" href="/styles/main.scss"> <link rel="stylesheet" href="/styles/main.scss">
</head> </head>
<body> <body>
<main></main> <main>
<script type="module" src="/src/home.jsx"></script> <div class="sidebar">
<div class="logo">Storage</div>
<div class="items">
<div class="item">
<div class="label">
Dashboard
</div>
</div>
<div class="item">
<div class="label">
Buckets
</div>
<div class="children">
<div class="item">
<div class="label">Bucket 1</div>
</div>
<div class="item">
<div class="label">Bucket 2</div>
</div>
<div class="item">
<div class="label">Bucket 3</div>
</div>
<div class="item">
<div class="label">Bucket 4</div>
</div>
</div>
</div>
</div>
</div>
<div class="main-content">
<header>
<div class="group">
<div class="label">Dashboard</div>
</div>
<div class="group">
<div class="label">Login</div>
</div>
</header>
</div>
</main>
</body> </body>
</html> </html>

9
_frontend/server.js
Unescape Escape View File

@ -2,6 +2,7 @@ import { dirname, resolve } from 'path'
import express from 'express' import express from 'express'
import { createServer as createViteServer } from 'vite' import { createServer as createViteServer } from 'vite'
import { fileURLToPath } from 'url' import { fileURLToPath } from 'url'
import { readFileSync } from 'fs'
const __dirname = dirname(fileURLToPath(import.meta.url)) const __dirname = dirname(fileURLToPath(import.meta.url))
@ -15,11 +16,15 @@ async function createServer(customHtmlRoutes) {
}) })
for (const [route, file] of Object.entries(customHtmlRoutes)) { for (const [route, file] of Object.entries(customHtmlRoutes)) {
app.get(route, (req, res) => { app.get(route, async (req, res) => {
const filePath = resolve(__dirname, file) const filePath = resolve(__dirname, file)
console.log(`Custom Route: %s`, req.url) console.log(`Custom Route: %s`, req.url)
return res.sendFile(filePath) let htmlFile = readFileSync(filePath, 'utf8')
htmlFile = await vite.transformIndexHtml(req.originalUrl, htmlFile)
res.setHeader('Content-Type', 'text/html')
return res.send(htmlFile)
}) })
} }

107
_frontend/styles/main.scss
Unescape Escape View File

@ -9,9 +9,14 @@
--bg-500: #f0f0f0; --bg-500: #f0f0f0;
--bg-600: #e0e0e0; --bg-600: #e0e0e0;
--bg-2-400: #666;
--bg-2-500: #38383d;
--fg-400: #3d3d3d; --fg-400: #3d3d3d;
--fg-500: #333; --fg-500: #333;
--fg-2-500: #ddd;
--ft-sans: 'Open Sans', sans-serif; --ft-sans: 'Open Sans', sans-serif;
--ft-sans-wt-light: 300; --ft-sans-wt-light: 300;
@ -38,68 +43,86 @@ body {
main { main {
display: flex; display: flex;
flex-direction: column;
align-items: center; .sidebar {
display: flex;
flex-direction: column;
padding: 1rem;
min-height: 100vh;
min-width: 15rem;
color: var(--fg-2-500);
background: var(--bg-2-500);
font-size: 18px;
gap: 1rem; z-index: -1;
}
header { .main-content {
width: 100%; width: 100%;
background: var(--bg-500);
box-shadow: 0 0 2rem 0 #00000022;
display: flex; header {
align-items: center; width: 100%;
justify-content: center;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem; padding: 1rem;
gap: 0.75rem; gap: 0.75rem;
background: var(--bg-100); background: var(--bg-100);
border-bottom: 1px solid var(--bg-600); border-bottom: 1px solid var(--bg-600);
color: var(--fg-400); color: var(--fg-400);
vertical-align: middle;
.logo { vertical-align: middle;
font-size: 32px;
font-weight: var(--ft-sans-wt-bold);
}
.machine { .logo {
font-size: 24px; font-size: 32px;
font-weight: var(--ft-sans-wt-normal); font-weight: var(--ft-sans-wt-bold);
}
.machine {
font-size: 24px;
font-weight: var(--ft-sans-wt-normal);
}
} }
}
.widgets { .widgets {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: start; align-items: start;
flex-wrap: wrap; flex-wrap: wrap;
gap: 2rem; gap: 2rem;
max-width: 120ch; max-width: 120ch;
.widget { .widget {
background: var(--bg-100); background: var(--bg-100);
border: 1px solid var(--bg-600); border: 1px solid var(--bg-600);
padding: 1rem; padding: 1rem;
min-height: 10rem; min-height: 10rem;
max-width: 50ch; max-width: 50ch;
.title { .title {
font-weight: var(--ft-sans-wt-bold); font-weight: var(--ft-sans-wt-bold);
code { code {
font-weight: normal; font-weight: normal;
}
} }
}
&.todo { &.todo {
width: 300px; width: 300px;
height: 200px; height: 200px;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save