Started on overview, 3 icons uploaded
This commit is contained in:
parent
3d129a1bb1
commit
c6df451e7d
GPG key ID:
6FD1A0FDB0D914C2
BIN
src/assets/globe.png
Normal file
BIN
src/assets/globe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
95
src/assets/wifi.svg
Normal file
95
src/assets/wifi.svg
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="120"
|
||||||
|
height="120"
|
||||||
|
viewBox="0 0 120 120"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:export-filename="wifi.svg"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#505050"
|
||||||
|
bordercolor="#ffffff"
|
||||||
|
borderopacity="1"
|
||||||
|
inkscape:showpageshadow="0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pagecheckerboard="1"
|
||||||
|
inkscape:deskcolor="#505050"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
showguides="true">
|
||||||
|
<sodipodi:guide
|
||||||
|
position="60,60"
|
||||||
|
orientation="0,1"
|
||||||
|
id="guide22"
|
||||||
|
inkscape:locked="false"
|
||||||
|
inkscape:label=""
|
||||||
|
inkscape:color="rgb(0,134,229)" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g25"
|
||||||
|
transform="translate(4.4218967e-7,-8.967447)">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:8.79773;stroke-dasharray:none;stroke-dashoffset:0;paint-order:normal"
|
||||||
|
id="path22"
|
||||||
|
sodipodi:type="arc"
|
||||||
|
sodipodi:cx="60"
|
||||||
|
sodipodi:cy="-96.012047"
|
||||||
|
sodipodi:rx="28.037905"
|
||||||
|
sodipodi:ry="28.037905"
|
||||||
|
sodipodi:start="0.52359878"
|
||||||
|
sodipodi:end="2.6179939"
|
||||||
|
sodipodi:arc-type="arc"
|
||||||
|
d="M 84.281538,-81.993094 A 28.037905,28.037905 0 0 1 60,-67.974142 28.037905,28.037905 0 0 1 35.718462,-81.993095"
|
||||||
|
sodipodi:open="true"
|
||||||
|
transform="scale(1,-1)" />
|
||||||
|
<circle
|
||||||
|
style="fill:#f9f9f9;stroke-width:1.099;stroke-dasharray:none"
|
||||||
|
id="path4"
|
||||||
|
cy="93.541939"
|
||||||
|
cx="60"
|
||||||
|
r="11.505052" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:8.79773;stroke-dasharray:none;stroke-dashoffset:0;paint-order:normal"
|
||||||
|
id="path22-2"
|
||||||
|
sodipodi:type="arc"
|
||||||
|
sodipodi:cx="60"
|
||||||
|
sodipodi:cy="-95.726982"
|
||||||
|
sodipodi:rx="46.214443"
|
||||||
|
sodipodi:ry="46.214443"
|
||||||
|
sodipodi:start="0.52359878"
|
||||||
|
sodipodi:end="2.6179939"
|
||||||
|
sodipodi:arc-type="arc"
|
||||||
|
d="M 100.02288,-72.61976 A 46.214443,46.214443 0 0 1 60,-49.512539 46.214443,46.214443 0 0 1 19.977118,-72.619761"
|
||||||
|
sodipodi:open="true"
|
||||||
|
transform="scale(1,-1)" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#ffffff;stroke-width:8.79773;stroke-dasharray:none;stroke-dashoffset:0;paint-order:normal"
|
||||||
|
id="path22-2-7"
|
||||||
|
sodipodi:type="arc"
|
||||||
|
sodipodi:cx="60"
|
||||||
|
sodipodi:cy="-93.624603"
|
||||||
|
sodipodi:rx="62.573677"
|
||||||
|
sodipodi:ry="62.573677"
|
||||||
|
sodipodi:start="0.52359878"
|
||||||
|
sodipodi:end="2.6179939"
|
||||||
|
sodipodi:arc-type="arc"
|
||||||
|
d="M 114.19039,-62.337765 A 62.573677,62.573677 0 0 1 60,-31.050926 62.573677,62.573677 0 0 1 5.8096054,-62.337766"
|
||||||
|
sodipodi:open="true"
|
||||||
|
transform="scale(1,-1)" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
|
|
@ -39,7 +39,9 @@
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<RouterView id="basicComponents"/>
|
<div id="basicComponents">
|
||||||
|
<RouterView/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,75 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div id="overviewComponent">
|
||||||
<h2 class="title">Overview</h2>
|
<h2 class="title">Overview</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<svg version="1.1" viewBox="0 -4 115.92 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="translate(-2.1685 -3.7025)">
|
||||||
|
<g fill="none" stroke="#fff">
|
||||||
|
<ellipse transform="matrix(1.1232 0 0 1.1232 -7.2654 -7.4582)" cx="60" cy="59.554" rx="47.684" ry="45.701" stroke-width="7.833"/>
|
||||||
|
<ellipse transform="rotate(90)" cx="58.967" cy="-60.126" rx="51.358" ry="28.519" stroke-width="7.198"/>
|
||||||
|
<ellipse cx="60.126" cy="28.382" rx="36.141" ry="18.7" stroke-width="7.2368"/>
|
||||||
|
<ellipse cx="60.126" cy="90.237" rx="36.119" ry="18.927" stroke-width="7.2342"/>
|
||||||
|
</g>
|
||||||
|
<rect x="56.527" y="8.3201" width="7.198" height="102.86" ry="0" fill="#fff" stroke-width="0"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<h3>Internet</h3>
|
||||||
|
<span style="background-color: var(--good-indicator);">Online: LAN4</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg version="1.1" viewBox="0 -20 116 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="translate(-2.0001 -17.685)">
|
||||||
|
<circle cx="60" cy="84.574" r="11.505" fill="#f9f9f9" stroke-width="1.099"/>
|
||||||
|
<g fill="none" stroke="#fff" stroke-width="8.7977">
|
||||||
|
<path transform="scale(1,-1)" d="m84.282-73.026a28.038 28.038 0 0 1-24.282 14.019 28.038 28.038 0 0 1-24.282-14.019" style="paint-order:normal"/>
|
||||||
|
<path transform="scale(1,-1)" d="m100.02-63.652a46.214 46.214 0 0 1-40.023 23.107 46.214 46.214 0 0 1-40.023-23.107" style="paint-order:normal"/>
|
||||||
|
<path transform="scale(1,-1)" d="m114.19-53.37a62.574 62.574 0 0 1-54.19 31.287 62.574 62.574 0 0 1-54.19-31.287" style="paint-order:normal"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<h3>Wifi</h3>
|
||||||
|
<span style="background-color: var(--warning-indicator);">
|
||||||
|
5Ghz: On | 2.4Ghz: Off
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<svg version="1.1" viewBox="0 -14 105.42 120" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="translate(-7.2896 -15.784)">
|
||||||
|
<g transform="matrix(1.4408 0 0 1.4116 -26.451 -12.591)">
|
||||||
|
<rect x="26.334" y="23.019" width="67.332" height="42.58" ry="4.3365" fill="none" stroke="#fff" stroke-width="5.834"/>
|
||||||
|
<g fill="#fff" stroke-width="0">
|
||||||
|
<rect x="57.113" y="65.717" width="5.7745" height="14.83" ry="0"/>
|
||||||
|
<rect x="58.961" y="67.719" width="1.5653" height="3.0535"/>
|
||||||
|
<rect x="41.291" y="78.287" width="37.419" height="5.8942" ry="2.5257"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
<h3>
|
||||||
|
Devices
|
||||||
|
</h3>
|
||||||
|
<span>Online: 0</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h3>
|
||||||
|
File Sharing
|
||||||
|
</h3>
|
||||||
|
<span style="background-color: var(--bad-indicator);">Offline</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h3>
|
||||||
|
QoS
|
||||||
|
</h3>
|
||||||
|
<span style="background-color: var(--good-indicator);">Online</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<h3>
|
||||||
|
Guest Network
|
||||||
|
</h3>
|
||||||
|
<span style="background-color: var(--bad-indicator);">Offline</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
padding: var(--alt-padding);
|
padding: var(--alt-padding);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -53,4 +54,49 @@
|
||||||
padding: var(--alt-padding);
|
padding: var(--alt-padding);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
background-color: var(--dark-bg-alt-color);
|
background-color: var(--dark-bg-alt-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#overviewComponent {
|
||||||
|
ul {
|
||||||
|
margin: 20px auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
list-style: none;
|
||||||
|
justify-content: center;
|
||||||
|
max-width: 730px;
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inherit;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: var(--dark-bg-alt-2-color);
|
||||||
|
height: 200px;
|
||||||
|
padding: var(--alt-padding);
|
||||||
|
width: 230px;
|
||||||
|
border-radius: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.3s background-color;
|
||||||
|
}
|
||||||
|
li:hover {
|
||||||
|
background-color: var(--dark-alt-highlight-color);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
height: 100px;
|
||||||
|
padding: 5px;
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
background-color: var(--neutral-indicator);
|
||||||
|
border-radius: var(--alt-border-radius);
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -7,11 +7,16 @@
|
||||||
--padding: 20px;
|
--padding: 20px;
|
||||||
--alt-padding: 10px;
|
--alt-padding: 10px;
|
||||||
--border-radius: 20px;
|
--border-radius: 20px;
|
||||||
|
--alt-border-radius: 5px;
|
||||||
--dark-bg-color: #161616;
|
--dark-bg-color: #161616;
|
||||||
--dark-bg-alt-color: #0f0f0f;
|
--dark-bg-alt-color: #0f0f0f;
|
||||||
--dark-bg-alt-2-color: #000;
|
--dark-bg-alt-2-color: #000;
|
||||||
--dark-highlight-color: #0084ff;
|
--dark-highlight-color: #0084ff;
|
||||||
--dark-alt-highlight-color: #006bcf;
|
--dark-alt-highlight-color: #006bcf;
|
||||||
|
--neutral-indicator: #808080;
|
||||||
|
--good-indicator: #44c71c;
|
||||||
|
--warning-indicator: #b6b614;
|
||||||
|
--bad-indicator: #ad1c1c;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue