sbedell.github.io/vibrate.html at master · sbedell/sbedell.github.io · GitHub

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en-US">
	<head>
		<title>HTML 5 Vibration Test</title>
		<meta charset="utf-8">
		<meta name="author" content="Steve B">
		<meta name="description" content="HTML 5 Vibration API test page.">
		<meta name="keywords" content="HTML5, Mobile, Vibration">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

		<script src="js/html5-vibrate.js"></script>

		<link href="/favicon.ico" rel="icon" type="image/x-icon">
		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Martian+Mono:wght@400;700&display=swap">
		<link rel="stylesheet" href="css/mainStyles.css">
		<link rel="stylesheet" href="css/vibrateStyles.css">
	</head>
	<body>
		<header class="hero">
			<p class="hero-prompt reveal">~/steve-bedell/vibrate $</p>
			<h1>Vibration Demo</h1>
			<p class="hero-tagline reveal" style="--delay: 0.15s">navigator.vibrate() — phones only</p>
		</header>

		<div class="page">
			<div>
				<label for="viblen">Vibration Duration (ms):</label>
				<input id="viblen" class="input-box" type="number" value="500" min="0" required />
			</div>

			<p><strong>Multiple Vibration Options:</strong></p>

			<div>
				<label for="vibinterval">Number of Vibrations:</label>
				<input id="vibinterval" class="input-box" type="number" value="5" min="0" required />
			</div>

			<div>
				<label for="pauselen">Time Between Vibrations (ms):</label>
				<input id="pauselen" class="input-box" type="number" value="200" min="0" required />
				<button class="my-btn btn-accent" type="button" onclick="singleVibrate()">Single Vibrate</button>
				<button class="my-btn btn-accent" type="button" onclick="multipleVibrate()">Multiple Vibrations</button>
				<button class="my-btn btn-danger" type="button" onclick="stopVibrate()">Stop Vibration(s)</button>
			</div>

			<hr />
			<p>Demo page for the new HTML5 Vibration API feature.</p>
			<p>This only works on Chrome. Firefox disabled support for Vibration API :(.</p>
			<p>You can read more about it at the Mozilla Developer Network or at the W3. <br />
				<a href="//developer.mozilla.org/en-US/docs/Web/Guide/API/Vibration">MDN - Vibration API</a><br />
				<a href="//www.w3.org/TR/vibration/">W3 Vibration API Spec</a>
			</p>

			<footer class="main-footer">
				<hr />
				<p>&copy; Steve Bedell 2014 - 2021.</p>
				<p class="home-link"><a href="./">Back to Home</a></p>
			</footer>
		</div>
	</body>
</html>