Add On/Off switch for settings.

pull/25/head
Brant K. Kyser 2015-08-25 21:10:39 -05:00
rodzic 3f6828a600
commit d39da3d67a
6 zmienionych plików z 187 dodań i 61 usunięć

Plik binarny nie jest wyświetlany.

Plik binarny nie jest wyświetlany.

5
web/css/bootstrap.min.css vendored 100644

File diff suppressed because one or more lines are too long

45
web/css/onoff.css 100644
Wyświetl plik

@ -0,0 +1,45 @@
.onoffswitch {
position: relative; width: 68px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #ddd; border-radius: 20px;
}
.onoffswitch-inner {
display: block; width: 200%; margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #337AB7; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #F5F5F5; color: #DDDDDD;
text-align: right;
}
.onoffswitch-switch {
display: block; width: 18px; margin: 6px;
background: #FFFFFF;
position: absolute; top: 0; bottom: 0;
right: 34px;
border: 2px solid #ddd; border-radius: 20px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}

Wyświetl plik

@ -0,0 +1,25 @@
@import url(bootstrap.min.css);
@import url(onoff.css);
#stratux-main
{
margin-right: 0;
margin-left: 0;
background-color: #fff;
border-color: #ddd;
border-width: 1px;
border-radius: 4px 4px 0 0;
box-shadow: none;
margin: auto;
max-width: 400px;
}
.setting
{
display: block;
}
.setting-element
{
display: inline-block;
}

Wyświetl plik

@ -6,6 +6,7 @@
</title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/jquery.form.min.js" type="text/javascript"></script>
<link href="css/stratux.css" rel="stylesheet" media="screen">
</head>
<body>
<script type="text/javascript">
@ -45,7 +46,13 @@ $(document).ready(function() {
})();
</script>
Status:<br>
<div id="stratux-main" class="well well-large">
<h1>Stratux</h1>
<div class="panel panel-default">
<div class="panel-heading">Status</div>
<div class="panel-body">
RTL-SDR devices: <span id="Devices">1</span><br>
Clients connected: <span id="Connected_Users">2</span><br>
Current firmware: <span id="Version">v0.1</span><br>
@ -54,17 +61,61 @@ $(document).ready(function() {
GPS satellites: <span id="GPS_satellites_locked"></span><br>
AHRS: <span id="RY835AI_connected"></span><br>
Uptime: <span id="Uptime"></span><br>
<br>
<form id="settings">
Set:<br>
978MHz <input type="radio" name="UAT_Enabled" value="true">On
<input type="radio" name="UAT_Enabled" value="false">Off<br>
1090MHz <input type="radio" name="ES_Enabled" value="true">On
<input type="radio" name="ES_Enabled" value="false">Off<br>
GPS <input type="radio" name="GPS_Enabled" value="true">On
<input type="radio" name="GPS_Enabled" value="false">Off<br>
AHRS <input type="radio" name="AHRS_Enabled" value="true">On
<input type="radio" name="AHRS_Enabled" value="false">Off<br>
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">Settings</div>
<div class="panel-body form-horizontal">
<div class="form-group">
<label class="control-label col-sm-4">978MHz</label>
<div class="col-sm-1">
<div class="onoffswitch">
<input type="checkbox" name="UAT_Enabled" class="onoffswitch-checkbox" id="uat-onoffswitch" checked>
<label class="onoffswitch-label" for="uat-onoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">1090MHz</label>
<div class="col-sm-1">
<div class="onoffswitch">
<input type="checkbox" name="ES_Enabled" class="onoffswitch-checkbox" id="es-onoffswitch" checked>
<label class="onoffswitch-label" for="es-onoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">GPS</label>
<div class="col-sm-1">
<div class="onoffswitch">
<input type="checkbox" name="GPS_Enabled" class="onoffswitch-checkbox" id="gps-onoffswitch" checked>
<label class="onoffswitch-label" for="gps-onoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4">AHRS</label>
<div class="col-sm-1">
<div class="onoffswitch">
<input type="checkbox" name="AHRS_Enabled" class="onoffswitch-checkbox" id="ahrs-onoffswitch" checked>
<label class="onoffswitch-label" for="ahrs-onoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>