16mm
/
intval3
1
0
Fork 0
Code Issues 1 Pull Requests 9 Projects Releases Wiki Activity

Add labels to direction UI

This commit is contained in:
mmcw-dev 2017-10-21 22:13:38 -04:00
parent ccdae964ee
commit 30f32983b9
1 changed files with 41 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/www/index.html
View File

@ -19,7 +19,12 @@
body{ body{
} }
#app{ #app{
padding: 10% 0; padding: 20px 10% 0 10%;
}
#bar{
height: 70px;
border-bottom: 1px solid #444;
width: 100%;
} }
/* The switch - the box around the slider */ /* The switch - the box around the slider */
.switch { .switch {
@ -62,7 +67,7 @@
} }
input:focus + .slider { input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
} }
input:checked + .slider:before { input:checked + .slider:before {
@ -80,8 +85,8 @@
border-radius: 50%; border-radius: 50%;
} }
input[type=number]{ input[type=number]{
width: 80%; width: 100%;
border: 1px solid #fff; border: 2px solid #fff;
border-radius: 5px; border-radius: 5px;
color: #fff; color: #fff;
font-size: 18px; font-size: 18px;
@ -93,7 +98,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
button{ button{
width: 80%; width: 100%;
border: 2px solid #fff; border: 2px solid #fff;
border-radius: 5px; border-radius: 5px;
color: #fff; color: #fff;
@ -105,37 +110,62 @@
margin: 5px 0; margin: 5px 0;
padding: 5px 0; padding: 5px 0;
text-align: center; text-align: center;
text-transform: uppercase;
} }
button:focus{ button:focus{
background-color: #20ce45; background-color: #20ce45;
border-color: #20ce45; border-color: #20ce45;
color: #212121; color: #212121;
font-weight: bold;
}
#fwdLabel,#bwdLabel{
display: block;
line-height: 34px;
height: 33px;
color: #444;
}
#fwdLabel.selected,
#bwdLabel.selected{
color: #fff;
}
#fwdLabel{
float: left;
}
#bwdLabel{
float: right;
}
.label{
text-align: right;
color: #666;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="bar">
</div>
<div id="app"> <div id="app">
<div> <div>
<div>Direction</div> <div class="label">Direction</div>
<span id="fwdLabel" class="selected">FORWARD</span>
<label class="switch" onclick="setDir();"> <label class="switch" onclick="setDir();">
<input type="checkbox" id="dir"> <input type="checkbox" id="dir">
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
<span id="bwdLabel">BACKWARD</span>
</div> </div>
<div> <div>
<div>Exposure (ms)</div> <div class="label">Exposure (ms)</div>
<input type="number" id="exposure" value="630" min="630" step="1" /> <input type="number" id="exposure" value="630" min="630" step="1" />
</div> </div>
<div> <div>
<div>Delay (ms)</div> <div class="label">Delay (ms)</div>
<input type="number" id="delay" value="0" min="0" step="1" /> <input type="number" id="delay" value="0" min="0" step="1" />
</div> </div>
<div> <div>
<button id="seq">Sequence</button> <button id="seq">START SEQUENCE</button>
</div> </div>
<div> <div>
<button id="frame" onclick="frame();">Frame</button> <button id="frame" onclick="frame();">FRAME</button>
</div> </div>
</div> </div>
<script> <script>