html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<!-- a pretty simuluation of a vintage Seiko Dive Watch 6105 using SVG renders done in inkScape
it has a motion on the second hand that emulates the automatic movement of 6 beats per second
we use CSS animations rather than Javascript to keep it simple
a future version will have sound and allow you to move the bezel using your touchscreen or mouse
The page is fully responsive and scales the drawing accordingly!-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="ie=edge" http-equiv="x-ua-compatible">
<title>Dive Watch</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://material.io/static/images/simple-lp/favicons/components-192x192.png" rel="icon" sizes="192x192">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet">
<script async src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js">
</script>
<link href="./divewatch.css" rel="stylesheet">
</head>
<body class="mdc-typography">
<div class="animate">
<img class="bg-image" src="https://storage.googleapis.com/web-content012018/Dive%20Watch/water2.jpg">
</div>
<header class="mdc-top-app-bar mdc-top-app-bar--short">
<div class="mdc-top-app-bar__row">
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**all our svg files a size of 480x480 and start at 0,0 and centre at 100,100 for reference*/
body {
overflow: hidden;
/*touch-action: none;*/
--mdc-theme-primary: #5886e0;
--mdc-theme-secondary: #FF3D00;
--mdc-theme-background: #E1F5FE;
}
.bg-image {
position: fixed;
left: -100px;
top: -100px;
overflow: hidden;
width: 150%;
height: 120%;
animation-name: grow;
animation-duration: 60s;
animation-iteration-count: infinite;
animation-timing-function: linear;
z-index: -99;
}
@keyframes grow {
0% {
transform: scale(1, 1) translate(50px, 0px);
}
50% {
transform: scale(1.1, 1.1) translate(100px, 100px);
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//V3
/* jshint esversion: 6 */
const DEBUG = 1;
window.onload = function() {
/** initialize Material Design Components */
mdc.autoInit();
/**
* We use this revealing module pattern to hold all of our state for the debug infoPanel.
*/
let infoPanel = (function() {
let infoState = {
width: document.getElementById('xwidth'),
height: document.getElementById('yheight'),
xcoord: document.getElementById('x-coord'),
ycoord: document.getElementById('y-coord'),
xtrans: document.getElementById('x-trans'),
ytrans: document.getElementById('y-trans'),
theta: document.getElementById('theta'),
radius: document.getElementById('radius'),
audio: document.getElementById('audio'),
};
let init= ()=> {
infoState.width.innerHTML = String(watch.bezel.clientWidth);
infoState.height.innerHTML = String(watch.bezel.clientHeight);
infoState.audio.innerHTML = watchSound.aCtx.state;
document.getElementById('debugToggle').addEventListener('click', debugToggle, false);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run