joepie91
/
cvm
1
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity

Update to the design proposal

Browse Source
feature/node-rewrite
Sven Slootweg 13 years ago
parent 32b2786ffb
commit 617beef37c
12 changed files with 431 additions and 11 deletions
Show Stats Download Patch File Download Diff File

98
design/css/cvm.css
Unescape Escape View File

@ -17,7 +17,7 @@ h1
h2 h2
{ {
margin-top: 9px; margin-bottom: 9px;
} }
h3 h3
@ -30,6 +30,21 @@ p
margin: 5px 0px; margin: 5px 0px;
} }
table
{
}
th
{
text-align: left;
}
table.vpsinfo td
{
padding: 2px 13px;
}
.clear .clear
{ {
clear: both; clear: both;
@ -109,11 +124,21 @@ p
background-image: url(../images/icon_reinstall.png); background-image: url(../images/icon_reinstall.png);
} }
#button_backup
{
background-image: url(../images/icon_backup.png);
}
#button_api
{
background-image: url(../images/icon_api.png);
}
.quota-item .quota-item
{ {
float: left; float: left;
width: 182px; width: 203px;
margin-right: 24px; margin-right: 23px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -151,10 +176,75 @@ p
.quota-item.wide .quota-item.wide
{ {
width: 285px; width: 316px;
}
.quota-item.last
{
margin-right: 0px;
} }
.quota .quota
{ {
margin-bottom: 19px; margin-bottom: 19px;
} }
.infobox
{
border: 1px solid #B0B0B0;
background-color: #EDEDED;
padding: 6px 9px;
}
.controlbox
{
margin-bottom: 23px;
}
.controlbutton
{
border: 2px solid #343352;
font-size: 24px;
color: #343352;
text-align: center;
font-weight: bold;
float: left;
text-decoration: none;
padding: 9px;
margin-right: 12px;
width: 189px;
}
.controlbutton.last
{
margin-right: 0px;
}
.controlbutton img
{
display: block;
margin: 0px auto;
}
.controlbutton:hover
{
background-color: #CDD0E1;
}
.online
{
color: #078812;
font-weight: bold;
}
.offline
{
color: #A7101C;
font-weight: bold;
}
.suspended
{
color: #5B5F6B;
font-weight: bold;
}

BIN
design/images/button_restart.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
design/images/button_start.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
design/images/button_stop.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 298 B

BIN
design/images/icon_api.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 420 B

BIN
design/images/icon_backup.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 315 B

81
design/index.html
Unescape Escape View File

@ -16,12 +16,14 @@
<a class="button" id="button_overview" href="#">Overview</a> <a class="button" id="button_overview" href="#">Overview</a>
<a class="button" id="button_statistics" href="#">Statistics</a> <a class="button" id="button_statistics" href="#">Statistics</a>
<a class="button" id="button_reinstall" href="#">Reinstall</a> <a class="button" id="button_reinstall" href="#">Reinstall</a>
<a class="button" id="button_backup" href="#">Backups</a>
<a class="button" id="button_webshell" href="#">WebShell</a> <a class="button" id="button_webshell" href="#">WebShell</a>
<a class="button" id="button_ip" href="#">IP Allocation</a> <a class="button" id="button_ip" href="#">IP Allocation</a>
<a class="button" id="button_api" href="#">API</a>
</div> </div>
<h1>Overview</h1> <h1>Overview</h1>
<h2>Consolidated traffic example</h2> <!-- <h2>Consolidated traffic example</h2> -->
<div class="quota"> <div class="quota">
<div class="quota-item"> <div class="quota-item">
<h3>Disk space</h3> <h3>Disk space</h3>
@ -37,7 +39,7 @@
<div class="quota-bar-label">241/1024MB</div> <div class="quota-bar-label">241/1024MB</div>
</div> </div>
</div> </div>
<div class="quota-item"> <div class="quota-item last">
<h3>Traffic</h3> <h3>Traffic</h3>
<div class="quota-bar"> <div class="quota-bar">
<div class="quota-bar-inner" style="width: 8%;"></div> <div class="quota-bar-inner" style="width: 8%;"></div>
@ -47,6 +49,69 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="controlbox">
<a class="controlbutton" href="#">
<img src="images/button_start.png">
Start VPS
</a>
<a class="controlbutton" href="#">
<img src="images/button_restart.png">
Restart VPS
</a>
<a class="controlbutton last" href="#">
<img src="images/button_stop.png">
Stop VPS
</a>
<div class="clear"></div>
</div>
<div class="infobox">
<h2>VPS configuration</h2>
<table class="vpsinfo">
<tr>
<th>Status</th>
<td><span class="online">Running</span> <span class="offline">Stopped</span> <span class="suspended">Suspended</span> </td>
</tr>
<tr>
<th>Server location</th>
<td>Atlanta, US</td>
</tr>
<tr>
<th>Operating system</th>
<td>Debian 6 x64</td>
</tr>
<tr>
<th>IPv4 Addresses</th>
<td>98.142.213.226, 204.12.235.84</td>
</tr>
<tr>
<th>IPv6 Addresses</th>
<td>2607:f7a0:1:1::24:6</td>
</tr>
<tr>
<th>Guaranteed RAM</th>
<td>768MB</td>
</tr>
<tr>
<th>Burstable RAM</th>
<td>1024MB</td>
</tr>
<tr>
<th>Disk space</th>
<td>100GB</td>
</tr>
<tr>
<th>Traffic</th>
<td>1000GB</td>
</tr>
<tr>
<th>Bandwidth</th>
<td>100mbps</td>
</tr>
</table>
</div>
<!--
<h2>Separate inbound/outbound example</h2> <h2>Separate inbound/outbound example</h2>
<div class="quota"> <div class="quota">
<div class="quota-item wide"> <div class="quota-item wide">
@ -56,7 +121,7 @@
<div class="quota-bar-label">55/100GB</div> <div class="quota-bar-label">55/100GB</div>
</div> </div>
</div> </div>
<div class="quota-item wide"> <div class="quota-item wide last">
<h3>RAM</h3> <h3>RAM</h3>
<div class="quota-bar"> <div class="quota-bar">
<div class="quota-bar-inner" style="width: 24%;"></div> <div class="quota-bar-inner" style="width: 24%;"></div>
@ -70,7 +135,7 @@
<div class="quota-bar-label">80/1000GB</div> <div class="quota-bar-label">80/1000GB</div>
</div> </div>
</div> </div>
<div class="quota-item wide"> <div class="quota-item wide last">
<h3>Outbound traffic</h3> <h3>Outbound traffic</h3>
<div class="quota-bar"> <div class="quota-bar">
<div class="quota-bar-inner" style="width: 14%;"></div> <div class="quota-bar-inner" style="width: 14%;"></div>
@ -96,7 +161,7 @@
<div class="quota-bar-label">241/1024MB</div> <div class="quota-bar-label">241/1024MB</div>
</div> </div>
</div> </div>
<div class="quota-item"> <div class="quota-item last">
<h3>Swap</h3> <h3>Swap</h3>
<div class="quota-bar"> <div class="quota-bar">
<div class="quota-bar-inner" style="width: 3%;"></div> <div class="quota-bar-inner" style="width: 3%;"></div>
@ -110,7 +175,7 @@
<div class="quota-bar-label">80/1000GB</div> <div class="quota-bar-label">80/1000GB</div>
</div> </div>
</div> </div>
<div class="quota-item wide"> <div class="quota-item wide last">
<h3>Outbound traffic</h3> <h3>Outbound traffic</h3>
<div class="quota-bar"> <div class="quota-bar">
<div class="quota-bar-inner" style="width: 14%;"></div> <div class="quota-bar-inner" style="width: 14%;"></div>
@ -118,7 +183,9 @@
</div> </div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
</div> </div>-->
</div> </div>
</div> </div>
</body> </body>

66
graphics/icon_api.svg
Unescape Escape View File

@ -0,0 +1,66 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="256"
height="256"
id="svg2"
version="1.1"
inkscape:version="0.48.1 r9760"
sodipodi:docname="api.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.6849029"
inkscape:cx="155.13428"
inkscape:cy="141.85871"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="0"
inkscape:window-y="504"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-796.36217)">
<path
style="fill:#343352;fill-opacity:1;stroke:none"
d="m 153.41092,815.37071 0,29.2827 -129.661628,0 0,58.79476 129.661628,0 0,31.42347 79.84395,-59.75046 -79.84395,-59.75047 z"
id="rect3867"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
style="fill:#343352;fill-opacity:1;stroke:none"
d="m 103.58545,914.11914 0,29.2827 129.66163,0 0,58.79476 -129.66163,0 0,31.4234 -79.843959,-59.7504 79.843959,-59.75046 z"
id="rect3867-7" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
graphics/icon_backup.xcf
View File

Binary file not shown.

61
graphics/restart.svg
Unescape Escape View File

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="256"
height="256"
id="svg2"
version="1.1"
inkscape:version="0.48.1 r9760"
sodipodi:docname="stop.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.6849029"
inkscape:cx="155.13428"
inkscape:cy="141.85871"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="0"
inkscape:window-y="504"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-796.36217)">
<path
style="fill:#343352;fill-opacity:1;stroke:none"
d="M 120.25 23.25 C 64.048658 23.25 18.5 70.94396 18.5 129.78125 C 18.5 188.61854 64.048658 236.3125 120.25 236.3125 C 158.69874 236.3125 192.16289 214.00269 209.46875 181.0625 L 179.875 181.0625 C 165.71833 199.07301 144.26515 210.59375 120.25 210.59375 C 77.624567 210.59375 43.0625 174.40589 43.0625 129.78125 C 43.0625 85.1566 77.624567 48.96875 120.25 48.96875 C 150.42517 48.96875 176.55833 67.106908 189.25 93.53125 L 163.78125 93.53125 L 202.375 163.53125 L 240.96875 93.53125 L 215.9375 93.53125 C 201.77095 52.541441 164.29304 23.25 120.25 23.25 z "
transform="translate(0,796.36217)"
id="path3830" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

73
graphics/start.svg
Unescape Escape View File

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="256"
height="256"
id="svg2"
version="1.1"
inkscape:version="0.48.1 r9760"
sodipodi:docname="New document 1">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.6849029"
inkscape:cx="-15.588205"
inkscape:cy="141.85871"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="0"
inkscape:window-y="504"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-796.36217)">
<path
sodipodi:type="star"
style="fill:#343352;stroke:none;fill-opacity:1"
id="path2987"
sodipodi:sides="3"
sodipodi:cx="130.57132"
sodipodi:cy="123.64816"
sodipodi:r1="127.01029"
sodipodi:r2="63.505142"
sodipodi:arg1="0"
sodipodi:arg2="1.0471976"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 257.58161,123.64816 67.066174,233.6423 l 0,-219.988277 z"
transform="translate(-30.862313,802.29723)"
inkscape:transform-center-x="-31.752572" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

63
graphics/stop.svg
Unescape Escape View File

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="256"
height="256"
id="svg2"
version="1.1"
inkscape:version="0.48.1 r9760"
sodipodi:docname="startstop.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.6849029"
inkscape:cx="261.37186"
inkscape:cy="141.85871"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1366"
inkscape:window-height="715"
inkscape:window-x="0"
inkscape:window-y="504"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-796.36217)">
<rect
style="fill:#343352;fill-opacity:1;stroke:none"
id="rect3776"
width="198.23102"
height="198.23102"
x="31.455818"
y="826.23639" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

Write Preview
Loading…
Cancel
Save