73 lines
3.8 KiB
HTML
73 lines
3.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<title>Часики</title>
|
|||
|
|
<meta name="viewport" content="width=device-width">
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500&display=swap" rel="stylesheet">
|
|||
|
|
<link rel="stylesheet" type="text/css" href="main.css">
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<nav>
|
|||
|
|
<div class="select thing" id="vclocks" onclick="ChangeSelect(this)">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
|
|||
|
|
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
|
|||
|
|
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="select" id="vstopwatch" onclick="ChangeSelect(this)">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-stopwatch" viewBox="0 0 16 16">
|
|||
|
|
<path d="M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5V5.6z"/>
|
|||
|
|
<path d="M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64a.715.715 0 0 1 .012-.013l.354-.354-.354-.353a.5.5 0 0 1 .707-.708l1.414 1.415a.5.5 0 1 1-.707.707l-.353-.354-.354.354a.512.512 0 0 1-.013.012A7 7 0 1 1 7 2.071V1.5a.5.5 0 0 1-.5-.5zM8 3a6 6 0 1 0 .001 12A6 6 0 0 0 8 3z"/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
<div class="select" id="vtimer" onclick="ChangeSelect(this)">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-hourglass-split" viewBox="0 0 16 16">
|
|||
|
|
<path d="M2.5 15a.5.5 0 1 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11zm2-13v1c0 .537.12 1.045.337 1.5h6.326c.216-.455.337-.963.337-1.5V2h-7zm3 6.35c0 .701-.478 1.236-1.011 1.492A3.5 3.5 0 0 0 4.5 13s.866-1.299 3-1.48V8.35zm1 0v3.17c2.134.181 3 1.48 3 1.48a3.5 3.5 0 0 0-1.989-3.158C8.978 9.586 8.5 9.052 8.5 8.351z"/>
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
<div id="clocks" class="show">
|
|||
|
|
<h1 class="time"><a id="main_time">00:00:00</a><small id="msec_time">.000</small></h1>
|
|||
|
|
<h4 id="date">Четверг, 1 января 1970 г.</h4>
|
|||
|
|
<div id="analog">
|
|||
|
|
<div id="hour"></div>
|
|||
|
|
<div id="min"></div>
|
|||
|
|
<div id="sec"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="stopwatch">
|
|||
|
|
<h1 class="time"><a id="main_sw">0:00:00</a><small id="msec_sw">.000</small></h1>
|
|||
|
|
<h4 id="date">
|
|||
|
|
<button id="s_start" onclick="stopwatch()">
|
|||
|
|
|
|||
|
|
</button>
|
|||
|
|
<button id="s_reset" onclick="reset()">
|
|||
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
|||
|
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
|
|||
|
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</h4>
|
|||
|
|
<div id="sanalog">
|
|||
|
|
<div id="shour"></div>
|
|||
|
|
<div id="smin"></div>
|
|||
|
|
<div id="ssec"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="timer">
|
|||
|
|
<h1 class="time"><a id="main_t">0:00:00</a><small id="msec_t">.000</small></h1>
|
|||
|
|
<h4 id="date"><input name="h" class="timer_input" type="number" id="set_timer_h" value="0" min="0"/><label for="h">ч.</label><input name="m" class="timer_input" type="number" id="set_timer_m" value="5" min="0" max="59"/><label for="m">мин.</label><input name="s" class="timer_input" type="number" id="set_timer_s" value="0" min="0" max="59"/><label for="s">сек.</label><button id="timer_button" onclick="timer()"></button></h4>
|
|||
|
|
<div id="tanalog">
|
|||
|
|
<div id="thour"></div>
|
|||
|
|
<div id="tmin"></div>
|
|||
|
|
<div id="tsec"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript" src="script.js"></script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|