Maketank theme

templates/Maketank/assets/css/dark.css

@@ -0,0 +1,34 @@
+.content, nav {
+	background-color: #11171c;
+}
+nav div:first-child {
+	display:inherit;
+}
+nav a {
+	color: #424a51;
+}
+nav a:hover {
+	color: #fff;
+}
+nav .active {
+	color: #fff;
+}
+.menuelement {
+	border: none;
+	color: #424a51;
+	margin: 15px 0px 25px 10px;
+	padding: 0px;
+}
+.menuelement h4 {
+	background: none;
+	color: #088ecc;
+	font-weight: 900;
+	text-transform: uppercase;
+}
+.menuelement h4 a {
+	color: #088ecc;
+}
+
+.topheader {
+	background:#f0f2f4;
+}

templates/Maketank/assets/css/froxlor.css

@@ -0,0 +1,229 @@
+@charset "UTF-8";
+
+/* TYPE */
+html,body {
+	font-family:Numans, Verdana, Geneva, sans-serif;
+	background-color:#eeeeee;
+	font-size:12px;
+}
+
+.content {
+	background-color:#eeeeee;
+	min-width:100%;
+	margin-top:100px;
+	border-bottom:0;
+}
+
+/*
+ * main container
+ */
+.main {
+	margin-left:240px;
+	margin-right:10px;
+	border:1px solid #666!important;
+	background:-webkit-gradient(linear, left top, right top, color-stop(0.16, rgb(220,220,220)), color-stop(1, rgb(255,255,255)));
+	background:-moz-linear-gradient(left center, rgb(220,220,220) 16%, rgb(255,255,255) 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#dcdcdc, endColorStr=#ffffff, GradientType=1);
+	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#dcdcdc, endColorstr=#ffffff, GradientType=1)";
+	webkit-border-top-right-radius:20px;
+	-webkit-border-bottom-left-radius:20px;
+	-moz-border-radius-topright:20px;
+	-moz-border-radius-bottomleft:20px;
+	border-top-right-radius:20px;
+	border-bottom-left-radius:20px;
+}
+
+header img {
+	height:70px !important;
+}
+
+h2 img {
+	width:32px!important;
+	height:32px!important;
+}
+
+.topheader {
+	background:#cccccc url('../img/header_g_froxlor.png') 0 bottom repeat-x;
+	margin-bottom:12px;
+	border-bottom:0;
+}
+
+.topheader_navigation {
+	display:none;
+}
+
+.topheadernav img {
+	height:24px!important;
+	width:24px;
+}
+
+/* navigation */
+nav {
+	background-color:#eeeeee;
+	margin:0;
+}
+
+nav div:first-child {
+	display:block;
+	margin-top:0;
+}
+
+nav div:nth-child(2) {
+	border-top:1px solid #666!important;
+}
+
+nav div:last-child {
+	border-bottom:1px solid #666!important;
+}
+
+.menuelement {
+	-webkit-border-top-right-radius:20px;
+	-webkit-border-bottom-left-radius:20px;
+	-moz-border-radius-topright:20px;
+	-moz-border-radius-bottomleft:20px;
+	border-top-right-radius:20px;
+	border-bottom-left-radius:20px;
+	margin-top:4px;
+	margin-right:0;
+	margin-bottom:8px;
+	margin-left:12px;
+	padding:4px 0 0 8px;
+	border:1px solid #666;
+	background-color:#fff;
+}
+
+.menuelement ul li {
+	margin:0;
+	margin-left:20px;
+}
+
+.menuelement h4 {
+	color:#000;
+}
+
+.menuelement h4 a {
+	color:#000;
+}
+
+/* TABLES */
+table {
+	border: 1px solid #666;
+	-webkit-border-top-right-radius:20px;
+	-webkit-border-bottom-left-radius:20px;
+	-moz-border-radius-topright:20px;
+	-moz-border-radius-bottomleft:20px;
+	border-top-right-radius:20px;
+	border-bottom-left-radius:20px;
+	background-color: #fff;
+}
+
+table thead th, table th {
+	color: #fff;
+	background-color: #176fa1;
+	border: 1px solid #176fa1;
+	text-align: center;
+}
+
+table thead th:last-child {
+	-webkit-border-top-right-radius:20px;
+	-moz-border-radius-topright:20px;
+	border-top-right-radius:20px;
+}
+
+table tfoot tr td {
+	-webkit-border-top-right-radius: 20px;
+	-webkit-border-bottom-left-radius: 20px;
+	-moz-border-radius-topright: 20px;
+	-moz-border-radius-bottomleft: 20px;
+	border-top-right-radius: 20px;
+	border-bottom-left-radius: 20px;
+}
+
+table.hl tbody tr:hover:last-child td:first-child {
+	-webkit-border-top-right-radius: 20px;
+	-webkit-border-bottom-left-radius: 20px;
+	-moz-border-radius-topright: 20px;
+	-moz-border-radius-bottomleft: 20px;
+	border-top-right-radius: 20px;
+	border-bottom-left-radius: 20px;
+}
+
+input {
+	color:#000;
+	background-color:#dae7ee!important;
+	border:1px solid #666666;
+}
+
+/*
+ *  BUTTONS
+ */
+input[type="button"],input[type="submit"],input[type="reset"],input[type="file"] {
+	padding:4px 10px;
+	margin:0 30px 0 0;
+	height:30px;
+	border:1px solid #999999;
+	-moz-border-radius:5px;
+	-khtml-border-radius:5px;
+	-webkit-border-radius:5px;
+	border-radius:5px;
+	background-color: #ccc;
+}
+
+.loginsec input[type="button"],.loginsec input[type="submit"],.loginsec input[type="reset"] {
+	margin:0 1px;
+}
+
+input[type="submit"],input[class="yesbutton"],input[type="submit"]:hover,input[class="yesbutton"]:hover,input[type="submit"]:active,input[class="yesbutton"]:active {
+	color:green!important;
+	background:#ccc url('../img/icons/button_ok.png') no-repeat 4px 8px!important;
+	padding-left:25px;
+}
+
+input[class="nobutton"],input[type="reset"],input[class="nobutton"]:hover,input[type="reset"]:hover,input[class="nobutton"]:active,input[type="reset"]:active {
+	color:red!important;
+	background:#ccc url('../img/icons/cancel.png') no-repeat 4px 8px!important;
+	padding-left:25px;
+}
+
+input[type="file"] {
+	color:blue!important;
+	background:#ccc url('../img/icons/button_ok.png') no-repeat 4px 8px!important;
+	padding-left:25px;
+}
+
+select {
+	color:#000;
+	background-color:#dae7ee;
+	border:1px solid #666;
+}
+
+.dboarditem {
+	margin-top: 4px;
+	margin-right: 0;
+	margin-bottom: 18px;
+	margin-left: 12px;
+	border: 1px solid #666;
+	-webkit-border-top-right-radius:20px;
+	-webkit-border-bottom-left-radius:20px;
+	-moz-border-radius-topright:20px;
+	-moz-border-radius-bottomleft:20px;
+	border-top-right-radius:20px;
+	border-bottom-left-radius:20px;
+	padding:0;
+}
+
+.dboarditem td,.dboarditemfull td {
+	padding-left:20px;
+}
+
+.dboarditem table tbody tr:first-child th {
+	-webkit-border-top-right-radius:20px;
+	-moz-border-radius-topright:20px;
+	border-top-right-radius:20px;	
+}
+
+.dboarditem table tbody tr:last-child td:first-child {
+	-webkit-border-bottom-left-radius:20px;
+	-moz-border-radius-bottomleft:20px;
+	border-bottom-left-radius:20px;	
+}

templates/Maketank/assets/css/main_ie.css

@@ -0,0 +1,14 @@
+@charset "UTF-8";
+
+/* input elements */
+input {
+	padding: 4px 4px 0px 24px;
+}
+
+input[type="submit"],input[class="nobutton"],input[type="reset"] {
+	padding-left: 24px;
+}
+
+table thead th {
+	border-right: 1px solid #333;
+}

templates/Maketank/assets/js/autosize.min.js

@@ -0,0 +1,6 @@
+/*!
+	Autosize 3.0.15
+	license: MIT
+	http://www.jacklmoore.com/autosize
+*/
+!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var n={exports:{}};t(n.exports,n),e.autosize=n.exports}}(this,function(e,t){"use strict";function n(e){function t(){var t=window.getComputedStyle(e,null);p=t.overflowY,"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),c="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(c)&&(c=0),i()}function n(t){var n=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=n,p=t,f&&(e.style.overflowY=t),o()}function o(){var t=window.pageYOffset,n=document.body.scrollTop,o=e.style.height;e.style.height="auto";var i=e.scrollHeight+c;return 0===e.scrollHeight?void(e.style.height=o):(e.style.height=i+"px",v=e.clientWidth,document.documentElement.scrollTop=t,void(document.body.scrollTop=n))}function i(){var t=e.style.height;o();var i=window.getComputedStyle(e,null);if(i.height!==e.style.height?"visible"!==p&&n("visible"):"hidden"!==p&&n("hidden"),t!==e.style.height){var r=d("autosize:resized");e.dispatchEvent(r)}}var s=void 0===arguments[1]?{}:arguments[1],a=s.setOverflowX,l=void 0===a?!0:a,u=s.setOverflowY,f=void 0===u?!0:u;if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!r.has(e)){var c=null,p=null,v=e.clientWidth,h=function(){e.clientWidth!==v&&i()},y=function(t){window.removeEventListener("resize",h,!1),e.removeEventListener("input",i,!1),e.removeEventListener("keyup",i,!1),e.removeEventListener("autosize:destroy",y,!1),e.removeEventListener("autosize:update",i,!1),r["delete"](e),Object.keys(t).forEach(function(n){e.style[n]=t[n]})}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",y,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",i,!1),window.addEventListener("resize",h,!1),e.addEventListener("input",i,!1),e.addEventListener("autosize:update",i,!1),r.add(e),l&&(e.style.overflowX="hidden",e.style.wordWrap="break-word"),t()}}function o(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=d("autosize:destroy");e.dispatchEvent(t)}}function i(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName){var t=d("autosize:update");e.dispatchEvent(t)}}var r="function"==typeof Set?new Set:function(){var e=[];return{has:function(t){return Boolean(e.indexOf(t)>-1)},add:function(t){e.push(t)},"delete":function(t){e.splice(e.indexOf(t),1)}}}(),d=function(e){return new Event(e)};try{new Event("test")}catch(s){d=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}var a=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(a=function(e){return e},a.destroy=function(e){return e},a.update=function(e){return e}):(a=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return n(e,t)}),e},a.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e},a.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e}),t.exports=a});

templates/Maketank/assets/js/circular.js

@@ -0,0 +1,143 @@
+(function($,sr){
+  var debounce = function (func, threshold, execAsap) {
+      var timeout;
+
+      return function debounced () {
+          var obj = this, args = arguments;
+          function delayed () {
+              if (!execAsap)
+                  func.apply(obj, args);
+              timeout = null;
+          }
+
+          if (timeout)
+              clearTimeout(timeout);
+          else if (execAsap)
+              func.apply(obj, args);
+
+          timeout = setTimeout(delayed, threshold || 100);
+      };
+  };
+  // smartresize 
+  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
+
+})(jQuery,'smartresize');
+
+
+$(window).smartresize(function(){
+	resizecanvas();
+});
+
+function resizecanvas() {
+	var divwidth = $('#statsbox').width();
+	var space = divwidth % 150;
+	var elementspl = (divwidth - space) / 150;
+	var elementwidth = 130 + Math.round(space / elementspl) - 1;
+	$(".canvasbox").animate({width: elementwidth}, 500);
+}
+
+$(document).ready(function() {
+	resizecanvas();
+	
+	var usedColor = "#91c46b";
+	var assiColor = "#287e7e";
+	var unliColor = "#56606e";
+	var overColor = "#dd514c";
+	
+	$(".circular").each(function(index, element) {
+		var canvas = "#" + $(element).attr("id") + "-canvas";
+		var used = parseFloat($(element).data("used"));
+		var available = $(element).data("available");
+		var assigned = parseFloat($(element).data("assigned"));
+		var usedD, usedP, assignedP, assignedD;
+				
+		// Draw basic circle
+		circularCircle(canvas, 40, 0, 270, 8, "#d2d4d8");
+		
+		// Draw percentages
+		if (!isNaN(assigned) && available == "∞") {
+			// Unlimited ressource and assigned
+			if (assigned > used) {
+				// Draw assigned as full circle
+				circularCircle(canvas, 38, 0, 270, 4, assiColor);
+				// Draw used as percentage of full circle
+				usedP = Math.round(100 / assigned * used);
+				usedD = 270 * usedP / 100;
+				circularCircle(canvas, 42, 0, usedD, 4, usedColor);
+			} else if (used > assigned) {
+				// Draw used as full circle
+				circularCircle(canvas, 42, 0, 270, 4, usedColor);
+				// Draw assigned as percentage of full circle
+				assignedP = Math.round(100 / used * assigned);
+				assignedD = 270 * assignedP / 100;
+				circularCircle(canvas, 38, 0, assignedD, 4, assiColor);
+			} else {
+				circularCircle(canvas, 42, 0, 270, 4, usedColor);
+				circularCircle(canvas, 38, 0, 270, 4, assiColor);
+			}
+			circularText(canvas, 60, 42, 26, "∞")
+		} else if (!isNaN(assigned)) {
+			// Limited ressources but assigned
+			available = parseFloat(available);
+			
+			assignedP = Math.round(100 / available * assigned);
+			assignedD = 270 * assignedP / 100;
+			circularCircle(canvas, 38, 0, assignedD, 4, assiColor);
+			
+			usedP = Math.round(100 / available * used);
+			usedD = 270 * usedP / 100;
+			circularCircle(canvas, 42, 0, usedD, 4, usedColor);
+			circularText(canvas, 60, 42, 22, usedP + "%");
+		} else if (available == "∞") {
+			circularCircle(canvas, 40, 0, 270, 8, unliColor);
+			circularText(canvas, 60, 42, 26, "∞")
+		} else {
+			// Limited ressources
+			available = parseFloat(available);
+			usedP = 100 / available * used;
+			if (usedP < 1 && usedP > 0) {
+				usedP = 1;
+			} else {
+				usedP = Math.round(usedP);
+			}
+			// Check if customer is over Limit
+			usedD = 270 * usedP / 100;
+			if (usedD > 270) { usedD = 270; }
+			if (usedP > 90) {
+				circularCircle(canvas, 40, 0, usedD, 8, overColor);
+			} else {
+				circularCircle(canvas, 40, 0, usedD, 8, usedColor);
+			}
+			if (usedP > 100) {
+				circularText(canvas, 60, 42, 22, usedP + "%", overColor);
+			} else {
+				circularText(canvas, 60, 42, 22, usedP + "%")
+			}
+			
+			
+		}
+		
+	});
+
+});
+
+function circularCircle(canvas, radius, start, end, stroke, color) {
+	$(canvas).drawArc({
+		strokeStyle: color,
+		strokeWidth: stroke,
+		x: 60, y: 44,
+		radius: radius,
+		start: start, end: end,
+		rotate: -135
+	});
+}
+function circularText(canvas, x, y, size, text, color) {
+	color = color || "#343a41";
+	$(canvas).drawText({
+		fillStyle: color,
+		x: x, y: y,
+		fontSize: size,
+		fontFamily: "Lucida Grande, Verdana, sans-serif",
+		text: text
+	});
+}