Skip to content

Commit 1817273

Browse files
amandabakeramandabaker
authored
PWAStore first demo draft
Demo test for Web Install API
2 parents d8386c6 + 2bf3fec commit 1817273

16 files changed

+359
-0
lines changed

‎pwa-pwastore/images/app-icons/bubble.png

23 KB
Loading

‎pwa-pwastore/images/app-icons/pwamp.png

5.85 KB
Loading

‎pwa-pwastore/images/app-icons/pwinter.png

36.9 KB
Loading

‎pwa-pwastore/images/favicon.png

7.1 KB
Loading

‎pwa-pwastore/images/pwastore-logo.png

39.6 KB
Loading

‎pwa-pwastore/images/pwastore-logo.svg

+15
Loading

‎pwa-pwastore/images/pwastore144.png

9.7 KB
Loading

‎pwa-pwastore/images/pwastore256.png

17.3 KB
Loading

‎pwa-pwastore/images/pwastore512.png

36.6 KB
Loading

‎pwa-pwastore/images/pwastore96.png

6.67 KB
Loading

‎pwa-pwastore/index.html

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link href="styles/reset.css" rel="stylesheet">
7+
<link href="styles/pwastore.css" rel="stylesheet">
8+
<link rel="icon" type="image/x-icon" href="images/favicon.png">
9+
<link rel="manifest" href="manifest.json" />
10+
<meta name="app-title" content="Web Install demo by MSEdgeDEV">
11+
<title>The PWA Store</title>
12+
<link rel="stylesheet" href="styles/pwastore-dark.css" media="(prefers-color-scheme: dark)"/>
13+
<link rel="stylesheet" href="styles/pwastore-light.css" media="(prefers-color-scheme: light)"/>
14+
<meta name="theme-color" content="#FFF5E0" media="(prefers-color-scheme: light)"/>
15+
<meta name="theme-color" content="#3D3D3D" media="(prefers-color-scheme: dark)"/>
16+
17+
</head>
18+
<body>
19+
<div class="draggable"></div>
20+
<header>
21+
<img src="images/pwastore-logo.svg" width="100" height="100" class="storeicon">
22+
<div class="category_filter_nav">
23+
<button class="btn_category">new!</button>
24+
<button class="btn_category">music</button>
25+
<button class="btn_category">image</button>
26+
<button class="btn_category">all apps</button>
27+
</div>
28+
</header>
29+
<main>
30+
<article class="app_entry">
31+
<img src="images/app-icons/pwinter.png" width="75" height="75" class="app_icon">
32+
<h2>The PWinter</h2>
33+
<p class="app_descrip">Custom PWA icon generator.</p>
34+
<button class="btn_install">Install</button>
35+
</article>
36+
37+
<article class="app_entry">
38+
<img src="images/app-icons/pwamp.png" width="75" height="75" class="app_icon">
39+
<h2>PWAmp</h2>
40+
<p class="app_descrip">Music player, but make it progressive.</p>
41+
<button class="btn_install">Install</button>
42+
</article>
43+
44+
<article class="app_entry">
45+
<img src="images/app-icons/bubble.png" width="75" height="75" class="app_icon">
46+
<h2>Bubble</h2>
47+
<p class="app_descrip">Equirectangular picture viewer.</p>
48+
<button class="btn_install">Install</button>
49+
</article>
50+
51+
</main>
52+
<footer>
53+
&copy; Microsoft Edge
54+
</footer>
55+
56+
<template>
57+
<article class="app_entry">
58+
<img src="" width="75" height="75" class="app_icon">
59+
<h2>Title</h2>
60+
<p class="app_descrip">Equirectangular picture viewer.</p>
61+
<button class="btn_install">Install</button>
62+
</article>
63+
</template>
64+
65+
</body>
66+
</html>

‎pwa-pwastore/manifest.json

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "PWAStore",
3+
"short_name": "PWAStore",
4+
"start_url": ".",
5+
"id": "thepwastore",
6+
"display": "standalone",
7+
"display_override": ["window-controls-overlay"],
8+
"background_color": "#006FDF",
9+
"theme_color": "#FFF5E0",
10+
"description": "A PWA demo store for the Web Install API.",
11+
"icons": [
12+
{
13+
"src": "images/pwastore512.png",
14+
"sizes": "512x512",
15+
"type": "image/png"
16+
},
17+
{
18+
"src": "images/pwastore144.png",
19+
"sizes": "144x144",
20+
"type": "image/png"
21+
},
22+
{
23+
"src": "images/pwastore96.png",
24+
"sizes": "96x96",
25+
"type": "image/png"
26+
}
27+
],
28+
"launch_handler": {
29+
"client_mode": "navigate-existing"
30+
}
31+
}
32+

‎pwa-pwastore/styles/pwastore-dark.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:root{
2+
--background: var(--black);
3+
--text: var(--off-white);
4+
--card-bg: var(--grey);
5+
--subheader2: var(--yellow);
6+
--btn-category-bg: var(--grey) ;
7+
--btn-category-border: var(--blue);
8+
--btn-category-fg: var(--off-white);
9+
--footer-fg: var(--off-white);
10+
--footer-bg: var(--dark-blue);
11+
}

‎pwa-pwastore/styles/pwastore-light.css

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
:root{
2+
--background: var(--light-yellow);
3+
--text: var(--black);
4+
--card-bg: var(--off-white);
5+
--subheader2: var(--blue);
6+
--btn-category-bg: var(--light-yellow);
7+
--btn-category-border: var(--blue);
8+
--btn-category-fg: var(--blue);
9+
--footer-fg: var(--black);
10+
--footer-bg: var(--yellow);
11+
}

‎pwa-pwastore/styles/pwastore.css

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
:root{
2+
--content-padding: 0.75rem 1.25rem;
3+
--dark-blue: #004183;
4+
--blue: #006FDF;
5+
--light-yellow: #FFF5E0;
6+
--yellow: #FFD25E;
7+
--off-white: #FEFEFE;
8+
--black: #3D3D3D;
9+
--grey: #727272;
10+
--green: #11AB00;
11+
--dark-green: #14690B;
12+
--light-green: #B9F3B3;
13+
14+
color-scheme: dark light;
15+
}
16+
17+
html {
18+
background: var(--background);
19+
height: 100dvh;
20+
width: 100dvw;
21+
font-family: sans-serif;
22+
color: var(--text)
23+
}
24+
25+
body {
26+
display: grid;
27+
height: 100dvh;
28+
width: 100dvw;
29+
grid-template: min-content auto min-content / repeat(4, 1fr);
30+
justify-items: stretch;
31+
}
32+
33+
header {
34+
padding: var(--content-padding);
35+
display:flex;
36+
flex-direction: row;
37+
align-items: center;
38+
justify-content: space-between;
39+
flex-direction: row;
40+
41+
grid-row: 1 / 2;
42+
grid-column: 1 / -1;
43+
}
44+
45+
main {
46+
padding: var(--content-padding);
47+
48+
grid-row: 2 / 3;
49+
grid-column: 1 / -1;
50+
51+
display:grid;
52+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
53+
grid-template-rows: repeat(auto-fill, 275px);
54+
grid-gap: 1rem;
55+
justify-content: center;
56+
}
57+
58+
h2 {
59+
color: var(--subheader2);
60+
font-size: 1.25rem;
61+
font-weight: bold;
62+
margin: .1rem;
63+
}
64+
65+
.app_descrip {
66+
line-height: 1.1rem;
67+
margin-top: .5rem;
68+
}
69+
70+
footer {
71+
background: var(--footer-bg);
72+
color: var(--footer-fg);
73+
padding: 2rem;
74+
display: flex;
75+
flex-direction: row;
76+
justify-content: center;
77+
align-items: center;
78+
align-content: center;
79+
80+
grid-row: 3 / 4;
81+
grid-column: 1 / -1;
82+
}
83+
84+
.storeicon {
85+
margin-left: env(titlebar-area-x, 0);
86+
margin-top: env(titlebar-area-height, 0);
87+
}
88+
89+
.btn_category {
90+
background: var(--btn-category-bg);
91+
color: var(--btn-category-fg);
92+
margin: .3rem;
93+
padding: .75rem;
94+
border-radius: 50px;
95+
border-color: var(--btn-category-border);
96+
cursor: pointer;
97+
text-wrap: nowrap;
98+
}
99+
100+
.btn_install {
101+
background: var(--light-green);
102+
color: var(--green);
103+
padding: .65rem;
104+
margin: 1.2rem;
105+
border-radius: 10px;
106+
border-color: var(--green);
107+
cursor: pointer;
108+
font-size: 1.1rem;
109+
transition: transform ease-in .2s, color ease-in .3s;
110+
}
111+
112+
.btn_install:hover {
113+
color: var(--dark-green);
114+
transform: scale(1.05);
115+
}
116+
117+
.category_filter_nav {
118+
margin: 1rem;;
119+
display: flex;
120+
flex-wrap: wrap;
121+
}
122+
123+
.app_entry {
124+
background: var(--card-bg);
125+
border-radius: 1rem;
126+
padding: 1.2rem;
127+
border: var(--blue) solid ;
128+
display: flex;
129+
flex-direction: column;
130+
align-items: center;
131+
transition: transform ease-in-out .3s;
132+
}
133+
134+
.app_entry:hover {
135+
transform: scale(1.03);
136+
box-shadow: silver;
137+
}
138+
139+
.app_icon {
140+
margin: .5rem;
141+
}
142+
143+
.draggable {
144+
position: fixed;
145+
top: env(titlebar-area-y, 0);
146+
left: env(titlebar-area-x, 0);
147+
width: env(titlebar-area-width, 100%);
148+
height: env(titlebar-area-height, 33px);
149+
-webkit-app-region: drag;
150+
app-region: drag;
151+
}
152+
153+
@media only screen and (max-width: 600px) {
154+
main {
155+
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
156+
grid-template-rows: repeat(auto-fill, 275px);
157+
}
158+
159+
header {
160+
flex-direction: column;
161+
justify-content: space-evenly;
162+
}
163+
164+
.category_filter_nav {
165+
justify-content: center;
166+
justify-items: center;
167+
align-items: center;
168+
}
169+
}
170+
171+
@media only screen and (max-width: 350px) {
172+
main {
173+
grid-template-columns: repeat(auto-fill, 100%);
174+
grid-template-rows: repeat(auto-fill, 275px);
175+
}
176+
}

‎pwa-pwastore/styles/reset.css

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/* http://meyerweb.com/eric/tools/css/reset/
2+
v2.0 | 20110126
3+
License: none (public domain)
4+
*/
5+
6+
html, body, div, span, applet, object, iframe,
7+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8+
a, abbr, acronym, address, big, cite, code,
9+
del, dfn, em, img, ins, kbd, q, s, samp,
10+
small, strike, strong, sub, sup, tt, var,
11+
b, u, i, center,
12+
dl, dt, dd, ol, ul, li,
13+
fieldset, form, label, legend,
14+
table, caption, tbody, tfoot, thead, tr, th, td,
15+
article, aside, canvas, details, embed,
16+
figure, figcaption, footer, header, hgroup,
17+
menu, nav, output, ruby, section, summary,
18+
time, mark, audio, video {
19+
margin: 0;
20+
padding: 0;
21+
border: 0;
22+
font-size: 100%;
23+
font: inherit;
24+
vertical-align: baseline;
25+
}
26+
/* HTML5 display-role reset for older browsers */
27+
article, aside, details, figcaption, figure,
28+
footer, header, hgroup, menu, nav, section {
29+
display: block;
30+
}
31+
body {
32+
line-height: 1;
33+
}
34+
ol, ul {
35+
list-style: none;
36+
}
37+
blockquote, q {
38+
quotes: none;
39+
}
40+
blockquote:before, blockquote:after,
41+
q:before, q:after {
42+
content: '';
43+
content: none;
44+
}
45+
table {
46+
border-collapse: collapse;
47+
border-spacing: 0;
48+
}

0 commit comments

Comments
 (0)