PWAStore first demo draft

Demo test for Web Install API
MicrosoftEdge · Aug 7, 2024 · 1817273 · 1817273
2 parents d8386c6 + 2bf3fec
commit 1817273
Show file tree

Hide file tree

Showing 16 changed files with 359 additions and 0 deletions.
diff --git a/pwa-pwastore/images/app-icons/bubble.png b/pwa-pwastore/images/app-icons/bubble.png
diff --git a/pwa-pwastore/images/app-icons/pwamp.png b/pwa-pwastore/images/app-icons/pwamp.png
diff --git a/pwa-pwastore/images/app-icons/pwinter.png b/pwa-pwastore/images/app-icons/pwinter.png
diff --git a/pwa-pwastore/images/favicon.png b/pwa-pwastore/images/favicon.png
diff --git a/pwa-pwastore/images/pwastore-logo.png b/pwa-pwastore/images/pwastore-logo.png
diff --git a/pwa-pwastore/images/pwastore-logo.svg b/pwa-pwastore/images/pwastore-logo.svg
diff --git a/pwa-pwastore/images/pwastore144.png b/pwa-pwastore/images/pwastore144.png
diff --git a/pwa-pwastore/images/pwastore256.png b/pwa-pwastore/images/pwastore256.png
diff --git a/pwa-pwastore/images/pwastore512.png b/pwa-pwastore/images/pwastore512.png
diff --git a/pwa-pwastore/images/pwastore96.png b/pwa-pwastore/images/pwastore96.png
diff --git a/pwa-pwastore/index.html b/pwa-pwastore/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="styles/reset.css" rel="stylesheet">
+    <link href="styles/pwastore.css" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="images/favicon.png">
+    <link rel="manifest" href="manifest.json" />
+    <meta name="app-title" content="Web Install demo by MSEdgeDEV">
+    <title>The PWA Store</title>
+    <link rel="stylesheet" href="styles/pwastore-dark.css" media="(prefers-color-scheme: dark)"/>
+    <link rel="stylesheet" href="styles/pwastore-light.css" media="(prefers-color-scheme: light)"/>
+    <meta name="theme-color" content="#FFF5E0" media="(prefers-color-scheme: light)"/>
+    <meta name="theme-color" content="#3D3D3D" media="(prefers-color-scheme: dark)"/>
+
+</head>
+<body>
+    <div class="draggable"></div>
+    <header>
+        <img src="images/pwastore-logo.svg" width="100" height="100" class="storeicon">
+        <div class="category_filter_nav">
+            <button class="btn_category">new!</button>
+            <button class="btn_category">music</button>
+            <button class="btn_category">image</button>
+            <button class="btn_category">all apps</button>
+        </div>
+    </header>
+    <main>
+        <article class="app_entry">
+            <img src="images/app-icons/pwinter.png" width="75" height="75" class="app_icon">
+            <h2>The PWinter</h2>
+            <p class="app_descrip">Custom PWA icon generator.</p>
+            <button class="btn_install">Install</button>
+        </article>
+
+        <article class="app_entry">
+            <img src="images/app-icons/pwamp.png" width="75" height="75" class="app_icon">
+            <h2>PWAmp</h2>
+            <p class="app_descrip">Music player, but make it progressive.</p>
+            <button class="btn_install">Install</button>
+        </article>
+
+        <article class="app_entry">
+            <img src="images/app-icons/bubble.png" width="75" height="75" class="app_icon">
+            <h2>Bubble</h2>
+            <p class="app_descrip">Equirectangular picture viewer.</p>
+            <button class="btn_install">Install</button>
+        </article>
+
+    </main>
+    <footer>
+        &copy; Microsoft Edge
+    </footer>
+
+    <template>
+        <article class="app_entry">
+            <img src="" width="75" height="75" class="app_icon">
+            <h2>Title</h2>
+            <p class="app_descrip">Equirectangular picture viewer.</p>
+            <button class="btn_install">Install</button>
+        </article>        
+    </template>
+
+</body>
+</html>
diff --git a/pwa-pwastore/manifest.json b/pwa-pwastore/manifest.json
@@ -0,0 +1,32 @@
+{
+    "name": "PWAStore",
+    "short_name": "PWAStore",
+    "start_url": ".",
+    "id": "thepwastore",
+    "display": "standalone",
+    "display_override": ["window-controls-overlay"],
+    "background_color": "#006FDF",
+    "theme_color": "#FFF5E0",
+    "description": "A PWA demo store for the Web Install API.",
+    "icons": [
+      {
+        "src": "images/pwastore512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      },
+      {
+        "src": "images/pwastore144.png",
+        "sizes": "144x144",
+        "type": "image/png"
+      },
+      {
+        "src": "images/pwastore96.png",
+        "sizes": "96x96",
+        "type": "image/png"
+      }
+    ],
+    "launch_handler": {
+        "client_mode": "navigate-existing"
+    }
+  }
+
diff --git a/pwa-pwastore/styles/pwastore-dark.css b/pwa-pwastore/styles/pwastore-dark.css
@@ -0,0 +1,11 @@
+:root{
+    --background: var(--black);
+    --text: var(--off-white);
+    --card-bg: var(--grey);
+    --subheader2: var(--yellow);
+    --btn-category-bg: var(--grey) ;
+    --btn-category-border: var(--blue);
+    --btn-category-fg: var(--off-white);
+    --footer-fg: var(--off-white);
+    --footer-bg: var(--dark-blue);
+}
diff --git a/pwa-pwastore/styles/pwastore-light.css b/pwa-pwastore/styles/pwastore-light.css
@@ -0,0 +1,11 @@
+:root{
+    --background: var(--light-yellow);
+    --text: var(--black);
+    --card-bg: var(--off-white);
+    --subheader2: var(--blue);
+    --btn-category-bg: var(--light-yellow);
+    --btn-category-border: var(--blue);
+    --btn-category-fg: var(--blue);
+    --footer-fg: var(--black);
+    --footer-bg: var(--yellow);
+}
diff --git a/pwa-pwastore/styles/pwastore.css b/pwa-pwastore/styles/pwastore.css
@@ -0,0 +1,176 @@
+:root{
+    --content-padding: 0.75rem 1.25rem;
+    --dark-blue: #004183;
+    --blue: #006FDF;
+    --light-yellow: #FFF5E0;
+    --yellow: #FFD25E;
+    --off-white: #FEFEFE;
+    --black: #3D3D3D;
+    --grey: #727272;
+    --green: #11AB00;
+    --dark-green: #14690B;
+    --light-green: #B9F3B3;
+
+    color-scheme: dark light;
+}
+
+html {
+    background: var(--background);
+    height: 100dvh;
+    width: 100dvw;
+    font-family: sans-serif;
+    color: var(--text)
+}
+
+body {
+    display: grid;
+    height: 100dvh;
+    width: 100dvw;
+    grid-template: min-content auto min-content / repeat(4, 1fr);
+    justify-items: stretch;
+}
+
+header {
+    padding: var(--content-padding);
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: row;
+
+    grid-row: 1 / 2;
+    grid-column: 1 / -1;
+}
+
+main {
+    padding: var(--content-padding);
+
+    grid-row: 2 / 3;
+    grid-column: 1 / -1;
+
+    display:grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-rows:  repeat(auto-fill, 275px);
+    grid-gap: 1rem;
+    justify-content: center;
+}
+
+h2 {
+    color: var(--subheader2);
+    font-size: 1.25rem;
+    font-weight: bold;
+    margin: .1rem;
+}
+
+.app_descrip {
+    line-height: 1.1rem;
+    margin-top: .5rem;
+}
+
+footer {
+    background: var(--footer-bg);
+    color: var(--footer-fg);
+    padding: 2rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+
+    grid-row: 3 / 4;
+    grid-column: 1 / -1;
+}
+
+.storeicon {
+    margin-left: env(titlebar-area-x, 0);
+    margin-top: env(titlebar-area-height, 0);
+}
+
+.btn_category {
+    background: var(--btn-category-bg);
+    color: var(--btn-category-fg);
+    margin: .3rem;
+    padding: .75rem;
+    border-radius: 50px;
+    border-color: var(--btn-category-border);
+    cursor: pointer;
+    text-wrap: nowrap;
+}
+
+.btn_install {
+    background: var(--light-green);
+    color: var(--green);
+    padding: .65rem;
+    margin: 1.2rem;
+    border-radius: 10px;
+    border-color: var(--green);
+    cursor: pointer;
+    font-size: 1.1rem;
+    transition: transform ease-in .2s, color ease-in .3s;
+}
+
+.btn_install:hover {
+    color: var(--dark-green);
+    transform: scale(1.05);
+}
+
+.category_filter_nav {
+    margin: 1rem;;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.app_entry {
+    background: var(--card-bg);
+    border-radius: 1rem;
+    padding: 1.2rem;
+    border: var(--blue) solid ;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform ease-in-out .3s;
+}
+
+.app_entry:hover {
+    transform: scale(1.03);
+    box-shadow: silver;
+}
+
+.app_icon {
+    margin: .5rem;
+}
+
+.draggable {
+    position: fixed;
+    top: env(titlebar-area-y, 0);
+    left: env(titlebar-area-x, 0);
+    width: env(titlebar-area-width, 100%);
+    height: env(titlebar-area-height, 33px);
+    -webkit-app-region: drag;
+    app-region: drag;
+}
+
+@media only screen and (max-width: 600px) {
+    main {
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        grid-template-rows:  repeat(auto-fill, 275px);    
+    }
+
+    header {
+        flex-direction: column;
+        justify-content: space-evenly;
+    }
+
+    .category_filter_nav {
+        justify-content: center;
+        justify-items: center;
+        align-items: center;
+    }
+}
+
+@media only screen and (max-width: 350px) {
+    main {
+        grid-template-columns: repeat(auto-fill, 100%);
+        grid-template-rows:  repeat(auto-fill, 275px);    
+    }
+}
diff --git a/pwa-pwastore/styles/reset.css b/pwa-pwastore/styles/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}