-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
101 lines (97 loc) · 2.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="Description" content="Plop" />
<meta name="theme-color" content="#fff100" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="manifest" href="manifest.json" />
<link rel="apple-touch-icon" href="icon-192.png" />
<title>Plop Generator</title>
<style>
:root {
--color-9: #000;
--color-7: #44474f;
--radius: 8px;
}
body,
label {
display: flex;
flex-direction: column;
align-items: center;
}
body {
padding: 1rem 0;
gap: 2rem;
background: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
}
label {
color: var(--color-9);
font-size: 1rem;
font-weight: bold;
}
canvas {
outline: var(--radius) solid var(--color-9);
border-radius: var(--radius);
}
input {
width: 64px;
height: 32px;
padding: 0;
border: none;
cursor: pointer;
}
input:focus-visible {
border: 2px outset var(--color-7);
outline: none;
}
button {
display: block;
border-radius: var(--radius);
background: var(--color-9);
font-size: 1rem;
border: none;
padding: 1rem 2rem;
color: white;
cursor: pointer;
outline-offset: 0px;
}
button:is(:hover, :focus-visible) {
background: var(--color-7);
outline: 2px solid var(--color-7);
outline-offset: 2px;
}
button:active {
outline-offset: -2px;
}
#ruler {
position: absolute;
height: 1px;
width: 1px;
opacity: 0;
}
#anchor {
position: relative;
}
</style>
</head>
<body>
<header>
<label>
Background color
<input type="color" name="body" id="color" value="#fff100" />
</label>
</header>
<div id="anchor">
<div id="ruler"></div>
<canvas id="canvas"> </canvas>
</div>
<button id="download">Export to PNG</button>
<script type="module" src="/src/index.js"></script>
<noscript><p>Please enable javascript in your brower</p></noscript>
</body>
</html>