DSD - GaugeMeter
DSD - GaugeMeter
by Dumine Stefan Daniel
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class='center' id='white_overlay'>
<div class="form" style="
border-top: 5px solid #007cba;
position: relative;
background: white;
width: 500px;
margin: 20px auto 0px;
padding: 0px;
text-align: center;
border-radius: 5px;">
<div align='center' style="margin-top: 50px;">
<div style="width: 400px; ">
<label style="float:left;">Total Tests: </label>
<input required type="number" class="form-control" id="total">
</div> <br>
<div style="width: 400px; ">
<label style="float:left;">Failed:</label>
<input required type="number" class="form-control" id="failed">
</div><br>
<div style="width: 400px; ">
<div style="width: 100px;float:left; padding-right:10px; ">
<label style="float:left;">App:</label>
<input type="text" class="form-control" id="app_name" placeholder="">
</div>
<div style="width: 100px;float:left; padding-right:10px; ">
<label style="float:left;">Ver:</label>
<input type="text" class="form-control" id="app_ver" placeholder="">
</div>
<div style="width: 100px;float:left; padding-right:10px; ">
<label style="float:left;">Build:</label>
<input type="text" class="form-control" id="app_build" placeholder="">
</div>
<div style="width: 100px;float:left;">
<label...
CSS
#white_overlay{
background:...
JavaScript
!function (e) {
e.fn.gaugeMeter = function (t) {
var a = e.extend({
id: "",
percent: 0,
used: 0,
total: 100,
size: 100,
prepend: "",
append: "",
theme: "Red-Gold-Green",
color: "",
back: "",
width: 3,
style: "Full",
stripe: "0",
animationstep: 1,
animate_gauge_colors: "0",
animate_text_colors: "0",
label: "",
label_color: "Black"
}, t);
return this.each(function () {
function t(e) {
var t = "#2C94E0";
return e || (e = 1e-14),
"Red-Gold-Green" == l.theme && (e > 0 && (t = "#d90000"),
e > 10 && (t = "#e32100"),
e > 20 && (t = "#f35100"),
e > 30 && (t = "#ff8700"),
e > 40 && (t = "#ffb800"),
e > 50 && (t = "#ffd900"),
e > 60 && (t = "#dcd800"),
e > 70 && (t = "#a6d900"),
e > 80 && (t = "#69d900"),
e > 90 && (t = "#32d900")),
"Green-Gold-Red" == l.theme && (e > 0 && (t = "#32d900"),
e > 10 && (t = "#69d900"),
e > 20 && (t = "#a6d900"),
e > 30 && (t = "#dcd800"),
e > 40 && (t = "#ffd900"),
e > 50 && (t = "#ffb800"),
e > 60 && (t = "#ff8700"),
e > 70 && (t = "#f35100"),
e > 80 && (t = "#e32100"),
e > 90 && (t =...