forked from GoogleChromeLabs/pwa-workshop-codelab
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (87 loc) · 5.39 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
<!DOCTYPE html>
<!--
Copyright 2021 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/images/logo.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PWA Edit</title>
<link rel="stylesheet" href="/css/style.css" />
<script type="module" src="/js/main.js"></script>
</head>
<body class="dark">
<button id="install" aria-label="Install">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g><path d="M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z" /></g>
</svg>
</button>
<button id="mode" aria-label="Switch night mode off">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="night" data-active="true">
<path d="M9.5 4c4.41 0 8 3.59 8 8s-3.59 8-8 8c-.34 0-.68-.02-1.01-.07 1.91-2.16 3.01-4.98 3.01-7.93s-1.1-5.77-3.01-7.93C8.82 4.02 9.16 4 9.5 4m0-2c-1.82 0-3.53.5-5 1.35 2.99 1.73 5 4.95 5 8.65s-2.01 6.92-5 8.65c1.47.85 3.18 1.35 5 1.35 5.52 0 10-4.48 10-10S15.02 2 9.5 2z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="day" data-active="false">
<path d="M5 12.5H2v-2h3v2zM13 2h-2v3h2V2zm6 8.5v2h3v-2h-3zM17 12c0 2.76-2.24 5-5 5s-5-2.24-5-5 2.24-5 5-5 5 2.24 5 5zm-6 10h2v-3h-2v3zm-5.01-6.11l-2.12 2.12 1.41 1.41L7.4 17.3l-1.41-1.41zM5.64 4.22L4.22 5.64l2.12 2.12 1.41-1.41-2.11-2.13zm10.25 1.77L17.3 7.4l2.12-2.12-1.41-1.41-2.12 2.12zm2.47 13.79l1.41-1.41-2.12-2.12-1.41 1.41 2.12 2.12z" />
</svg>
</button>
<div class="actions">
<button class="actions--action actions--toggle" aria-label="Open actions" aria-expanded="false" aria-haspopup="true" aria-controls="actions-menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="actions--icon" aria-hidden="true">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
</svg>
</button>
<ul class="actions--menu" aria-hidden="true" id="actions-menu">
<!-- File System Access -->
<li class="actions--menu-item">
<button class="actions--action" aria-label="Open file" id="open" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="actions--icon actions--icon__small">
<path d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" />
</svg>
</button>
</li>
<li class="actions--menu-item">
<button class="actions--action" aria-label="Save file" id="save" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="actions--icon actions--icon__small">
<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm2 16H5V5h11.17L19 7.83V19z" />
<circle cx="12" cy="15" r="3" />
<path d="M6 6h9v4H6z" />
</svg>
</button>
</li>
<li class="actions--menu-item">
<button class="actions--action" aria-label="Reset file" id="reset" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="actions--icon actions--icon__small">
<path d="M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z" />
</svg>
</button>
</li>
<!-- Multi-Screen Window Placement -->
<li class="actions--menu-item">
<button class="actions--action" aria-label="Toggle preview mode" id="preview" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="actions--icon actions--icon__small">
<path d="M19,3H5C3.89,3,3,3.9,3,5v14c0,1.1,0.89,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.11,3,19,3z M19,19H5V7h14V19z M12,10.5 c1.84,0,3.48,0.96,4.34,2.5c-0.86,1.54-2.5,2.5-4.34,2.5S8.52,14.54,7.66,13C8.52,11.46,10.16,10.5,12,10.5 M12,9 c-2.73,0-5.06,1.66-6,4c0.94,2.34,3.27,4,6,4s5.06-1.66,6-4C17.06,10.66,14.73,9,12,9L12,9z M12,14.5c-0.83,0-1.5-0.67-1.5-1.5 s0.67-1.5,1.5-1.5s1.5,0.67,1.5,1.5S12.83,14.5,12,14.5z" />
</svg>
</button>
</li>
<!-- Screen Wake Lock -->
<li class="actions--menu-item">
<button class="actions--action" aria-label="Toggle focused mode" id="focus" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="actions--icon actions--icon__small">
<path d="M16 5v8c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V5h10m4-2H4v10c0 2.21 1.79 4 4 4h6c2.21 0 4-1.79 4-4v-3h2c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm-2 5V5h2v3h-2zm2 11H4v2h16v-2z" />
</svg>
</button>
</li>
</ul>
</div>
</body>
</html>