feat: stile della pagina principale della dashboard
This commit is contained in:
+132
-11
@@ -1,14 +1,135 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<link
|
||||||
<title>Homepage</title>
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
|
||||||
|
/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:wght@400;700&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<title>Homepage</title>
|
||||||
|
|
||||||
<link rel="stylesheet" href="/styles/main.scss">
|
<link rel="stylesheet" href="/styles/main.scss" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<div class="sidebar">
|
||||||
</body>
|
<div class="top">
|
||||||
</html>
|
<div class="logo">
|
||||||
|
<pre><code>_______________________ _______ _______ _______ _
|
||||||
|
( ____ \__ __( ____ ( ____ ( ____ ( ____ ( )
|
||||||
|
| ( \/ ) ( | ( \/ ( \/ ( \/ ( \//
|
||||||
|
| (_____ | | | (__ | (__ | (__ | (__
|
||||||
|
(_____ ) | | | __) | __) | __) | __)
|
||||||
|
) | | | | ( | ( | ( | (
|
||||||
|
/\____) | | | | (____/\ ) | ) | (____/\
|
||||||
|
\_______) )_( (_______// |/ (_______/</code></pre>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">
|
||||||
|
<span class="material-symbols-outlined">
|
||||||
|
dashboard
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="label">Overview</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">
|
||||||
|
<span class="material-symbols-outlined">
|
||||||
|
device_thermostat
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="label">Temperature</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">
|
||||||
|
<span class="material-symbols-outlined"> speed </span>
|
||||||
|
</div>
|
||||||
|
<div class="label">CPU</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">
|
||||||
|
<span class="material-symbols-outlined">
|
||||||
|
swap_vert
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="label">Network</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">
|
||||||
|
<span class="material-symbols-outlined"> memory </span>
|
||||||
|
</div>
|
||||||
|
<div class="label">Memory</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">
|
||||||
|
<span class="material-symbols-outlined">
|
||||||
|
database
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="label">Storage</div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">
|
||||||
|
<span class="material-symbols-outlined">
|
||||||
|
view_list
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="label">Jobs</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="/public/logo-gitea.svg" alt="logo gitea" />
|
||||||
|
</div>
|
||||||
|
<div class="label"><a href="#">Dashboard</a></div>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="/public/logo-gitea.svg" alt="logo gitea" />
|
||||||
|
</div>
|
||||||
|
<div class="label"><a href="#">cpar2023</a></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">Uptime</div>
|
||||||
|
<div class="graph"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">CPU</div>
|
||||||
|
<div class="graph"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">Storage</div>
|
||||||
|
<div class="graph"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">Memory</div>
|
||||||
|
<div class="graph"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">Network</div>
|
||||||
|
<div class="graph"></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="label">Temperature</div>
|
||||||
|
<div class="graph"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<path id="teabag" style="fill:#FFFFFF" d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8 c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4 c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z"/>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<path style="fill:#609926" d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2 c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5 c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5 c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3 c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1 C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4 c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7 S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55 c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8 l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z"/>
|
||||||
|
<path style="fill:#609926" d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4 c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1 c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9 c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3 c5-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3 c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29 c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8 C343.2,346.5,335,363.3,326.8,380.1z"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
+119
-17
@@ -10,34 +10,136 @@ body {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
font-family: 'Inter', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
|
font-family: "Open Sans", "Segoe UI", "Helvetica", "Arial", sans-serif;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
||||||
|
color: #284a36;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Headings
|
::selection {
|
||||||
|
background-color: #496152;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
$base-font-size: 18px;
|
img {
|
||||||
$heading-scale: 1.33;
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
@function pow($number, $exponent) {
|
//
|
||||||
$value: 1;
|
// Components
|
||||||
|
//
|
||||||
|
|
||||||
@if $exponent > 0 {
|
//
|
||||||
@for $i from 1 through $exponent {
|
// Structure
|
||||||
$value: $value * $number;
|
//
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
.top,
|
||||||
|
.bottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-size: 6px;
|
||||||
|
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
font-family: "Ubuntu Mono", monospace;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
|
||||||
|
user-select: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
|
||||||
|
color: #284a36;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
color: #496152;
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #e8ede9;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@return $value;
|
.main {
|
||||||
}
|
background-color: rgb(245, 246, 250);
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
|
||||||
@for $i from 1 through 5 {
|
padding: 32px;
|
||||||
h#{$i} {
|
gap: 32px;
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
$factor: pow($heading-scale, 5 - $i);
|
height: 100vh;
|
||||||
font-size: $base-font-size * $factor;
|
|
||||||
|
|
||||||
line-height: 1.5;
|
overflow-y: auto;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border-radius: 32px;
|
||||||
|
padding: 24px 32px;
|
||||||
|
background-color: #fff;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graph {
|
||||||
|
background-color: #f4f5f9;
|
||||||
|
|
||||||
|
min-height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1100px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//
|
||||||
|
// Media Queries
|
||||||
|
//
|
||||||
|
|||||||
Generated
+4636
File diff suppressed because it is too large
Load Diff
@@ -17,6 +17,7 @@ export default defineConfig(async () => {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
root: './frontend',
|
root: './frontend',
|
||||||
|
publicDir: './frontend/public',
|
||||||
build: {
|
build: {
|
||||||
outDir: '../out/frontend',
|
outDir: '../out/frontend',
|
||||||
emptyOutDir: true,
|
emptyOutDir: true,
|
||||||
|
|||||||
Reference in New Issue
Block a user