Push dev work to master #2
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue