diff --git a/frontend/css/cvm.css b/frontend/css/cvm.css new file mode 100644 index 0000000..61d6b5c --- /dev/null +++ b/frontend/css/cvm.css @@ -0,0 +1,262 @@ +html, body +{ + font-family: 'Open Sans', sans-serif; + background-color: #E4EAEA; +} + +h1, h2, h3, h4, h5 +{ + margin: 0px; + color: #343352; +} + +h1 +{ + margin-bottom: 7px; +} + +h2 +{ + margin-bottom: 9px; +} + +h3 +{ + font-size: 20px; +} + +p +{ + margin: 5px 0px; +} + +table +{ + +} + +th +{ + text-align: left; +} + +table.vpsinfo td +{ + padding: 2px 13px; +} + +.clear +{ + clear: both; +} + +.wrapper +{ + width: 900px; + margin: 0px auto; +} + +.header +{ + font-size: 40px; + font-weight: bold; +} + +.main +{ + position: relative; + background-color: #F1F1F1; + padding: 9px 13px; + border: 2px solid #817F9D; + padding-left: 225px; + min-height: 400px; +} + +.sidebar +{ + position: absolute; + top: 16px; + left: 8px; + width: 200px; + background-color: #DCDCDC; +} + +.sidebar a.button +{ + display: block; + padding: 5px 8px; + text-decoration: none; + color: #343352; + font-size: 18px; + font-weight: bold; + padding-left: 30px; + background-repeat: no-repeat; + background-position: 8px 10px; +} + +.sidebar a.button:hover +{ + background-color: #CDCCDE; +} + +#button_overview +{ + background-image: url(../images/icon_overview.png); +} + +#button_statistics +{ + background-image: url(../images/icon_statistics.png); +} + +#button_webshell +{ + background-image: url(../images/icon_webshell.png); +} + +#button_ip +{ + background-image: url(../images/icon_ip.png); +} + +#button_reinstall +{ + 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); +} + +#button_alerts +{ + background-image: url(../images/icon_alerts.png); +} + +.quota-item +{ + float: left; + width: 203px; + margin-right: 23px; + margin-bottom: 10px; +} + +.quota-bar +{ + position: relative; + border: 1px solid #343352; + width: 100%; + height: 18px; +} + +.quota-bar-inner +{ + background-color: #12005E; + height: 100%; +} + +.quota-bar-label +{ + position: absolute; + top: 0px; + left: 0px; + right: 0px; + bottom: 0px; + font-size: 13px; + font-weight: bold; + color: white; + padding-left: 5px; + text-shadow: 0px 0px 3px #000673, 0px 0px 1px #000000, 0px 0px 3px #000000, 0px 0px 2px #000673; + -webkit-text-shadow: 0px 0px 3px #000673, 0px 0px 1px #000000, 0px 0px 3px #000000, 0px 0px 2px #000673; + -moz-text-shadow: 0px 0px 3px #000673, 0px 0px 1px #000000, 0px 0px 3px #000000, 0px 0px 2px #000673; + -o-text-shadow: 0px 0px 3px #000673, 0px 0px 1px #000000, 0px 0px 3px #000000, 0px 0px 2px #000673; + -ms-text-shadow: 0px 0px 3px #000673, 0px 0px 1px #000000, 0px 0px 3px #000000, 0px 0px 2px #000673; +} + +.quota-item.wide +{ + width: 316px; +} + +.quota-item.last +{ + margin-right: 0px; +} + +.quota +{ + 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; +} + +.controlbutton.disabled, .constrolbutton.disabled:hover +{ + border: 2px solid #737379; + background-color: #9B9B9B; + cursor: default; +} + +.online +{ + color: #078812; + font-weight: bold; +} + +.offline +{ + color: #A7101C; + font-weight: bold; +} + +.suspended +{ + color: #5B5F6B; + font-weight: bold; +} diff --git a/frontend/images/button_restart.png b/frontend/images/button_restart.png new file mode 100644 index 0000000..03ffe2d Binary files /dev/null and b/frontend/images/button_restart.png differ diff --git a/frontend/images/button_start.png b/frontend/images/button_start.png new file mode 100644 index 0000000..b631414 Binary files /dev/null and b/frontend/images/button_start.png differ diff --git a/frontend/images/button_stop.png b/frontend/images/button_stop.png new file mode 100644 index 0000000..8ace279 Binary files /dev/null and b/frontend/images/button_stop.png differ diff --git a/frontend/images/icon_alerts.png b/frontend/images/icon_alerts.png new file mode 100644 index 0000000..1e8e454 Binary files /dev/null and b/frontend/images/icon_alerts.png differ diff --git a/frontend/images/icon_api.png b/frontend/images/icon_api.png new file mode 100644 index 0000000..61fcf18 Binary files /dev/null and b/frontend/images/icon_api.png differ diff --git a/frontend/images/icon_backup.png b/frontend/images/icon_backup.png new file mode 100644 index 0000000..67fd357 Binary files /dev/null and b/frontend/images/icon_backup.png differ diff --git a/frontend/images/icon_ip.png b/frontend/images/icon_ip.png new file mode 100644 index 0000000..2fbdc5f Binary files /dev/null and b/frontend/images/icon_ip.png differ diff --git a/frontend/images/icon_overview.png b/frontend/images/icon_overview.png new file mode 100644 index 0000000..293bf1d Binary files /dev/null and b/frontend/images/icon_overview.png differ diff --git a/frontend/images/icon_reinstall.png b/frontend/images/icon_reinstall.png new file mode 100644 index 0000000..97335a6 Binary files /dev/null and b/frontend/images/icon_reinstall.png differ diff --git a/frontend/images/icon_statistics.png b/frontend/images/icon_statistics.png new file mode 100644 index 0000000..fe13c4a Binary files /dev/null and b/frontend/images/icon_statistics.png differ diff --git a/frontend/images/icon_webshell.png b/frontend/images/icon_webshell.png new file mode 100644 index 0000000..db1fb79 Binary files /dev/null and b/frontend/images/icon_webshell.png differ diff --git a/frontend/images/loading.gif b/frontend/images/loading.gif new file mode 100644 index 0000000..ef371f1 Binary files /dev/null and b/frontend/images/loading.gif differ diff --git a/frontend/images/logo.png b/frontend/images/logo.png new file mode 100644 index 0000000..c309d8e Binary files /dev/null and b/frontend/images/logo.png differ diff --git a/frontend/interface.php b/frontend/interface.php new file mode 100644 index 0000000..83030f9 --- /dev/null +++ b/frontend/interface.php @@ -0,0 +1,25 @@ +Load("main"); +$template_main->Localize($locale->strings); +$template_main->Compile(array( + 'server-location' => $sContainer->sNode->sPhysicalLocation, + 'operating-system' => $sContainer->sTemplate->sName, + 'guaranteed-ram' => "{$sContainer->sGuaranteedRam}MB", + 'burstable-ram' => "{$sContainer->sBurstableRam}MB", + 'disk-space' => "{$sContainer->sDiskSpace}MB", + 'total-traffic-limit' => "{$sContainer->sTotalTrafficLimit} bytes", + 'bandwidth-limit' => "100mbit", +)); +$template_main->Output(); + +?> diff --git a/frontend/js/cvm.js b/frontend/js/cvm.js new file mode 100644 index 0000000..be19542 --- /dev/null +++ b/frontend/js/cvm.js @@ -0,0 +1,17 @@ +var command_running = false; + +$(function(){ + $('.button-loader').click(function(){ + if(command_running === false) + { + $('.button-loader').addClass('disabled').click(function(event){ + event.preventDefault(); + event.stopPropagation(); + return false; + }); + + $(this).children('.button-icon').addClass('running')[0].src = "images/loading.gif"; + command_running = true; + } + }); +}); diff --git a/frontend/templates/main.tpl b/frontend/templates/main.tpl new file mode 100644 index 0000000..5394855 --- /dev/null +++ b/frontend/templates/main.tpl @@ -0,0 +1,118 @@ + + + + CVM + + + + + + +
+
+ +
+
+ +

Overview

+ + +
+
+

Disk space

+
+
+
55/100GB
+
+
+
+

RAM

+
+
+
241/1024MB
+
+
+
+

Traffic

+
+
+
80/1000GB
+
+
+
+
+ + + +
+

VPS configuration

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StatusRunning Stopped Suspended
Server location<%?server-location>
Operating system<%?operating-system>
IPv4 Addresses98.142.213.226, 204.12.235.84
IPv6 Addresses2607:f7a0:1:1::24:6
Guaranteed RAM<%?guaranteed-ram>
Burstable RAM<%?burstable-ram>
Disk space<%?disk-space>
Traffic<%?total-traffic-limit>
Bandwidth<%?bandwidth-limit>
+
+
+
+ +