-
Notifications
You must be signed in to change notification settings - Fork 24
/
index.html
102 lines (89 loc) · 3.08 KB
/
index.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
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minidenticons Demo</title>
<link rel="icon" href="/minidenticons/img/icon.svg" type="image/svg+xml">
<style type="text/css" media="screen, print">
body {
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
}
#github-link {
position: fixed;
top: 10px;
right: 10px;
}
main {
text-align: center;
}
fieldset {
border: 0;
width: 300px;
margin: auto;
}
fieldset > p {
text-align: left;
}
#username-input {
margin-top: 100px;
}
minidenticon-svg {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #EEE;
display: inline-block;
margin: 5px;
}
main + minidenticon-svg {
width: 80px;
height: 80px;
display: block;
margin: -225px auto 160px auto;
}
</style>
</head>
<body>
<script type="module">
import { minidenticonSvg } from "./minidenticons.min.js"
const main = document.querySelector('main')
const usernameInput = main.querySelector('#username-input')
const saturationInput = main.querySelector('#saturation-input')
const saturationLabel = main.querySelector('label[for=saturation]')
const lightnessInput = main.querySelector('#lightness-input')
const lightnessLabel = main.querySelector('label[for=lightness]')
function refresh() {
saturationLabel.textContent = `Saturation ${saturationInput.value}%`
lightnessLabel.textContent = `Lightness ${lightnessInput.value}%`
main.insertAdjacentHTML("afterend",
`<minidenticon-svg username="${usernameInput.value}"
title='"${usernameInput.value.replaceAll("'", "'")}", ${saturationInput.value}, ${lightnessInput.value}'
saturation="${saturationInput.value}" lightness="${lightnessInput.value}"
></minidenticon-svg>`
)
}
usernameInput.addEventListener('input', () => refresh())
saturationInput.addEventListener('change', () => refresh())
lightnessInput.addEventListener('change', () => refresh())
refresh()
</script>
<a id="github-link" href="https://github.com/laurentpayot/minidenticons">
<img src="https://badgen.net/badge/icon/github?icon=github&label" alt="GitHub repository">
</a>
<main>
<h1>Minidenticons Demo</h1>
<input id="username-input" autofocus size="18" placeholder="Enter a nice username">
<fieldset>
<p>
<input type="range" id="saturation-input" min="0" max="100" value="95">
<label for="saturation"></label>
</p>
<p>
<input type="range" id="lightness-input" min="0" max="100" value="45">
<label for="lightness"></label>
</p>
</fieldset>
</main>
</body>
</html>