/
index.html
172 lines (162 loc) · 6.41 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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Maskable.app</title>
<link href="/css/viewer.css" rel="stylesheet" />
<script type="module" src="/src/viewer/libs.js"></script>
<script type="module" src="/src/viewer/upload-icon.js"></script>
<script type="module" src="/src/viewer/change-mask.js"></script>
<script type="module" src="/src/viewer/keys.js"></script>
<script type="module" src="/src/viewer/load-url.js"></script>
<script async src="https://media.ethicalads.io/media/client/ethicalads.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
{{> meta }}
</head>
<body>
<file-drop accept="image/*" id="icon_drop" class="icon__file-drop drop">
<main class="viewer">
{{> navbar page="viewer" }}
<div class="demo__container">
<ul class="demo__list">
<!--
Different sample icons that the user can look at.
The original source of the icon is linked in the data-source attribute.
The alt tag is used as the title of the source.
-->
<li class="demo">
<a class="demo__link" href="?demo=demo/spec.svg">
<img
width="56"
height="56"
class="demo__preview"
src="demo/spec.svg"
alt="W3C example"
data-source="https://www.w3.org/TR/appmanifest/#examples-of-masks"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/color-breakdown.png">
<img
width="56"
height="56"
class="demo__preview"
src="demo/color-breakdown.png"
alt="Color Breakdown"
data-source="https://notwoods.github.io/color-breakdown/"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/insightful-energy.svg">
<img
width="56"
height="56"
class="demo__preview"
src="demo/insightful-energy.svg"
alt="Insightful Energy"
data-source="https://notwoods.github.io/insightful-energy/"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/big-island-buses.png">
<img
width="56"
height="56"
class="demo__preview"
src="demo/big-island-buses.png"
alt="Big Island Buses"
data-source="https://notwoods.github.io/big-island-buses/"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/proxx.png">
<img
width="56"
height="56"
class="demo__preview"
src="demo/proxx.png"
alt="PROXX"
data-source="https://proxx.app"
/>
</a>
</li>
<li class="demo">
<a class="demo__link" href="?demo=demo/svgomg.svg">
<img
width="56"
height="56"
class="demo__preview"
src="demo/svgomg.svg"
alt="SVGOMG"
data-source="https://jakearchibald.github.io/svgomg/"
/>
</a>
</li>
</ul>
<div class="button__row">
<input type="file" accept="image/*" class="hidden-offscreen" id="icon_file" name="icon_file" />
<label for="icon_file" class="icon__file-input button--primary"> Open icon file </label>
<button type="button" class="button--primary toggle--url" name="url" aria-controls="urlModal">
Load from URL
</button>
</div>
</div>
<section class="icon__grid">
<div class="icon__original">
<img width="192" height="192" class="icon" alt="Preview of original icon" src="demo/spec.svg" />
</div>
<div class="icon__mask masked">
<img width="192" height="192" class="icon" alt="Preview of maskable icon" src="demo/spec.svg" />
</div>
<div class="icon__shadow masked"></div>
</section>
{{> controls }}
<aside class="source text">
<p>
Icon from
<a href="https://www.w3.org/TR/appmanifest/#examples-of-masks" class="link source__link"> W3C example </a>
</p>
</aside>
<hr />
<aside class="about text">
{{> ad }}
<p class="about__main">
Use Maskable.app to preview your maskable PWA icons before adding them to your web app manifest.
</p>
<p class="about__main">
<a class="link" href="https://css-tricks.com/maskable-icons-android-adaptive-icons-for-your-pwa/">
Maskable icons</a
>
allow web developers to specify a full-bleed icon that will be cropped by the user-agent to match other
icons on the device. On Android, this lets developers get rid of the default white background around their
icons and use the entire provided space by generating adaptive icons.
</p>
{{> github }} {{> donate}}
</aside>
</main>
<dialog class="url-dialog" id="urlModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
<label for="url"><h2 id="modalTitle">Icon URL</h2></label>
<form action="/">
<button
type="button"
class="button--small close-button toggle--url"
name="cancel"
aria-label="Close URL dialog"
>
×
</button>
<input autofocus type="url" id="url" name="demo" placeholder="https://example.com/image.png" />
<div class="button__row dialog-buttons">
<button type="submit" class="button--primary">Load</button>
</div>
</form>
</dialog>
<button type="button" class="scrim toggle--url" aria-hidden="true" aria-label="Close URL dialog"></button>
</file-drop>
{{> clippaths}}
</body>
</html>