RouterUI/router-ui-frontend
2
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Started on overview, 3 icons uploaded

Browse source
This commit is contained in:
Patrick Hatsune 2024-08-31 00:22:08 -07:00
parent 3d129a1bb1
commit c6df451e7d
Signed by: keyemail
GPG key ID: 6FD1A0FDB0D914C2
6 changed files with 219 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/assets/globe.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 42 KiB

95
src/assets/wifi.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 3.2 KiB

4
src/pages/BasicDashboard.vue
View file

@ -39,7 +39,9 @@
</RouterLink>
</ul>
</div>
<RouterView id="basicComponents"/>
<div id="basicComponents">
<RouterView/>
</div>
</div>
</template>

71
src/pages/basicDashboard/Overview.vue
View file

@ -1,6 +1,75 @@
<template>
<div>
<div id="overviewComponent">
<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>
</template>

46
src/styles/basicDashboard.css
View file

@ -14,6 +14,7 @@
min-height: 100%;
padding: var(--alt-padding);
border-radius: var(--border-radius);
flex-shrink: 0;
h2 {
text-align: center;
@ -54,3 +55,48 @@
border-radius: var(--border-radius);
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;
}
}
}

5
src/styles/main.css
View file

@ -7,11 +7,16 @@
--padding: 20px;
--alt-padding: 10px;
--border-radius: 20px;
--alt-border-radius: 5px;
--dark-bg-color: #161616;
--dark-bg-alt-color: #0f0f0f;
--dark-bg-alt-2-color: #000;
--dark-highlight-color: #0084ff;
--dark-alt-highlight-color: #006bcf;
--neutral-indicator: #808080;
--good-indicator: #44c71c;
--warning-indicator: #b6b614;
--bad-indicator: #ad1c1c;
}
* {