-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhere.html
90 lines (84 loc) · 3.21 KB
/
here.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
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#00908a">
<title>Playground</title>
<style>
body {
margin: 1em;
font-family: sans-serif;
color: #666;
overscroll-behavior: none;
}
header {
float: right;
}
section, header div {
display: flex;
flex-direction: column;
}
button {
background-color: white;
color: #00908a;
outline: none;
border: 1px solid currentColor;
border-radius: 2em;
font-size: 1.1em;
padding: .25em;
margin: 1em;
width: 100px;
}
</style>
</head>
<body>
<header>
<div>
<small>Powered by</small>
<svg width="110" height="18">
<path fill="#383c45" d="M0 1h3v5h4V1h3v13H7V8.5H3V14H0M21.8 1v13h3V9h1.4l2.6 5h3.3l-3.2-5.5a4 3.9 0 0 0-1-7.5m-3.1 2.2h2a2 1.8 0 0 1 0 3.5h-2M12.2 1v13h8v-2.3h-5V8.4h4v-2h-4V3.2H20l.3-2.2m40.9 8.2a2.2 2.2 0 1 1 1.5 1.5l.3-1.3a.8.8 0 1 0-.5-.6M33.1 1v13h8v-2.3h-5V8.4h4v-2h-4V3.2h4.8l.3-2.2"/>
<path fill="#48dad0" d="M43.3 3.9h2l.3 1.3a4 7 20 0 1 5.3 0 4 7 20 0 1 5.6.6V14h-2.4V7a2 5.5 20 0 0-3 0v7h-2.4V7a2 5.5 20 0 0-3 0v7h-2.4m14.6 0V8a5.4 5.4 0 1 1 6 6m.4-2a3.6 3.6 0 1 0-.4.1m5.9 1.9h2l.2-.9c8.5 6 8.5-14.6 0-7.8v-5h-2.2M72 6.9c5.2-5.5 5.2 9.8 0 4.3M80.9 0a1.5 1.5 0 1 0 .2 0m-1.3 4h2.4v10h-2.4M84.3.2h2.4v11q-.1 1.4 1.1.8l.5 1.8q-3.6 1.2-4-2M90.5 0a1.5 1.5 0 1 0 .2 0m-1.3 4h2.4v10h-2.4m3.5-10h1.5V1.6h2.4V4h2.4l-.3 1.7h-2.1v5.5q.2 1.5 2.2.6l.8 1.5q-5 2.1-5.4-2V5.7h-1.5m7.3-1.7h2.6l1.9 8.2L107 4h2.4l-3.2 10q-1 3.7-5.1 4l-.2-1.7q1.4-.2 2.6-1.3"/>
</svg>
</div>
</header>
<section>
<button id="share">Share</button>
<button id="vibrate">Surprise</button>
</section>
<div id="output"></div>
<script>
function log(message) {
console.log(message)
const p = document.createElement('p')
p.appendChild(document.createTextNode(message))
document.querySelector('#output').appendChild(p)
}
async function share() {
if (!navigator.share) {
log('😞 Error: navigator.share not supported')
return
}
try {
await navigator.share({title: 'Amnon\'s Playground', text: 'fiddling around with some web dev tech', url: 'https://targumon.github.io/playground/'})
log('🎉 Shared!')
} catch (error) {
log('💩 Error sharing: ' + error)
}
}
function vibrate() {
if (!navigator.vibrate) {
log('😞 Error: navigator.vibrate not supported')
return
}
navigator.vibrate([250, 250, 125, 125, 125, 125, 250, 250, 250, 600, 250, 250, 250]);
log('💓 Vibrated?')
}
function onLoad() {
document.querySelector('#share').addEventListener('click', share)
document.querySelector('#vibrate').addEventListener('click', vibrate)
}
window.addEventListener('load', onLoad)
</script>
</body>
</html>