<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="boxCheckboxVirtual">
<div class="boxCheckboxVirtualTitle">pracoviště: <strong>P2</strong></div>
<!--
<div class="checkboxVirtual checkboxVirtual-item-0">
<input type="checkbox" id="id0" class="mainCheckbox"/>
<label for="id0"><div><span class="checkboxVirtualName">Svačinář</span>
<span class="stopwatchBreak"></span><span class="stopwatch"></span></div></label>
</div>
-->
<div>
<div class="checkboxVirtual checkboxVirtual-item-1">
<input type="checkbox" id="id1" class="mainCheckbox"/>
<label for="id1"><div><span class="checkboxVirtualName">Logistika</span>
<span class="stopwatchBreak"></span><span class="stopwatch"></span></div></label>
</div>
</div>
<div class="checkboxVirtual checkboxVirtual-item-2">
<input type="checkbox" id="id2" class="mainCheckbox"/>
<label for="id2"><div><span class="checkboxVirtualName">Kvalita</span>
<span class="stopwatchBreak"></span><span class="stopwatch"></span></div></label>
</div>
<div class="checkboxVirtual checkboxVirtual-item-3">
<input type="checkbox"checked id="id3" class="mainCheckbox" startTime="2017/03/10 22:00:00"/>
<label for="id3"><div><span class="checkboxVirtualName">Teamleader</span>
<span class="stopwatchBreak"></span><span class="stopwatch"></span></div></label>
</div>
<div class="checkboxVirtual checkboxVirtual-item-4">
<input type="checkbox" id="id4" class="mainCheckbox"/>
<label for="id4"><div><span class="checkboxVirtualName">Seřizovač</span>
<span class="stopwatchBreak"></span><span class="stopwatch"></span></div></label>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://momentjs.com/downloads/moment-with-locales.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/--pk--/test-jBBoVe */
body {
background-color: #2c2e41;
font-family: "Helvetica Neue", sans-serif;
}
/* brát až odsud, tamto definuje už default.css */
.boxCheckboxVirtual {
border: 1px solid #bdc3c7;
width: 230px;
background: #2c3e50;
}
.boxCheckboxVirtualTitle {
color: black;
background:#bdc3c7;
padding:10px 5px;
text-align:center;
}
.checkboxVirtual {
width: 140px;
height: 140px;
background: #ddd;
margin: 20px 45px;
border-radius: 70px;
position: relative;
box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
text-align: center;
display:table;
vertical-align: middle;
}
.checkboxVirtual label {
width: 130px;
height: 130px;
border-radius: 65px;
cursor: pointer;
position: absolute;
top: 5px;
left: 5px;
z-index: 1;
box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);
color:white;
background-color: #34495e;
display: table;
}
.checkboxVirtual div {
display: table-cell;
vertical-align:middle;
}
.checkboxVirtual label > div > span {padding-bottom: 4px; }
.checkboxVirtual-item-0 .checkboxVirtualName {border-bottom: solid 4px #27ae60;}
.checkboxVirtual-item-1 .checkboxVirtualName {border-bottom: solid 4px #f1c40f;}
.checkboxVirtual-item-2 .checkboxVirtualName {border-bottom: solid 4px #ecf0f1;}
.checkboxVirtual-item-3 .checkboxVirtualName {border-bottom: solid 4px #2980b9;}
.checkboxVirtual-item-4 .checkboxVirtualName {border-bottom: solid 4px #c0392b;}
.checkboxVirtual input[type=checkbox]:checked + label {color:black;}
.checkboxVirtual input[type=checkbox]:checked + label > div > span {border-bottom:none;}
.checkboxVirtual-item-0 input[type=checkbox]:checked + label {background:#2ecc71;}
.checkboxVirtual-item-1 input[type=checkbox]:checked + label {background:#f1c40f;}
.checkboxVirtual-item-2 input[type=checkbox]:checked + label {background:#ecf0f1;}
.checkboxVirtual-item-3 input[type=checkbox]:checked + label {background:#3498db;}
.checkboxVirtual-item-4 input[type=checkbox]:checked + label {background:#e74c3c;}
.stopwatch {
background-color:rgba(0, 0, 0, 0.5);
color: white;
padding:3px;
border:inset 2px rgba(0, 0, 0, 0.5);
display:none;
}
.stopwatchBreak {
display:block;
height:5px;
}
/*Downloaded from https://www.codeseek.co/--pk--/test-jBBoVe */
$(document).ready(function() {
//Ty co jsou zatržený zobrazí stopky
var runStopWatch = 0;
$( ".checkboxVirtual" ).each(function() {
if ($(this).find(".mainCheckbox").is(":checked")) {
$(this).find(".stopwatch").html('??:??:??');
$(this).find(".stopwatch").show();
if (runStopWatch == 0) {var controlStopWatch = setInterval(function(){ stopWatchFunc() }, 1000)}
}
});
$('.mainCheckbox').change(function() {
if($(this).is(":checked")) {
$(this).parent().find(".stopwatch").html('00:00:00');
$(this).parent().find(".stopwatch").show();
$(this).attr('startTime',moment(_.now()).format('YYYY/MM/DD HH:mm:ss'));
if (runStopWatch == 0) {var controlStopWatch = setInterval(function(){ stopWatchFunc() }, 1000)}
} else {
$(this).parent().find(".stopwatch").hide();
var checkRunStopWatch = 0;
//Pokud uz nic nebezi, zastavit funkci
$( ".checkboxVirtual" ).each(function() {
if ($(this).find(".mainCheckbox").is(":checked")) {checkRunStopWatch = 1;}
});
if (checkRunStopWatch == 0) {clearInterval(controlStopWatch);}
}
});
function stopWatchFunc() {
runStopWatch = 1;
$( ".checkboxVirtual" ).each(function() {
if ($(this).find(".mainCheckbox").is(":checked")) {
tmpDate = moment.utc(moment().format('x') - moment($(this).find(".mainCheckbox").attr('startTime'))).format('HH:mm:ss');
$(this).find(".stopwatch").html(tmpDate);
}
});
}
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
Underscore js
jQuery
v3.1.1
