ava-pwar
Version:
Web component that generates markup from manifest
120 lines (92 loc) • 4.11 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ava-pwar demo</title>
</head>
<body>
<div style="width:600px;height:1800px;">
<litter-g></litter-g>
<h3>ava-pwar-simple - One possible View of a PWA Manifest</h3>
<ava-pwar-simple href="https://www.polymer-project.org/"></ava-pwar-simple>
<ava-pwar-simple href="https://stencilcomponents.com/"></ava-pwar-simple>
<ava-pwar-simple href="https://hnpwa.com/"></ava-pwar-simple>
<ava-pwar-simple href="https://mobile.twitter.com/"></ava-pwar-simple>
<ava-pwar-simple href="https://www.cnet.com/"></ava-pwar-simple>
<ava-pwar-simple href="https://slate.com/"></ava-pwar-simple>
<ava-pwar-simple href="https://app.destinyitemmanager.com/"></ava-pwar-simple>
<ava-pwar-simple href="https://www.metalroofing.com/"></ava-pwar-simple>
<ava-pwar-simple href="https://www.facturaelectronicagfa.mx/"></ava-pwar-simple>
<ava-pwar-simple href="https://preactjs.com/"></ava-pwar-simple>
<ava-pwar-simple href="https://www.curablehealth.com/clara"></ava-pwar-simple>
<ava-pwar-simple href="https://littlezoo.febvre.info/"></ava-pwar-simple>
<hr>
<h3>Minimal PWA Avator support -- build your own UI</h3>
<label for="pwaurl">Enter PWA URL (end with slash):</label>
<wired-input id="pwaurl" placeholder="Enter PWA url" value="https://www.webcomponents.org/"></wired-input>
<p-d on="input" to="{input}"></p-d>
<wired-button>Fetch</wired-button>
<p-d on="click" if="wired-button" to="{href:target.input}"></p-d>
<ava-pwar></ava-pwar>
<p-d on="manifest-changed" to="xtal-json-editor{input};div.simple{input}"></p-d>
<div class="simple" data-lit>
<script nomodule>
html `
<div class="iconLabel">Icon:</div>
<div class="icon"><img src="${input.icons ? input.url + input.icons[0].src : 'https://i.4pcdn.org/s4s/1510444672885s.jpg'}"/></div>
<div class="nameLabel">Name:</div>
<div class="name">${input.name}</div>
<div class="shortNameLabel">Short Name:</div>
<div class="shortName">${input.short_name}</div>
`
</script>
</div>
<xtal-json-editor options="{}" height="300px"></xtal-json-editor>
<style>
ava-pwar-simple{
height: 300px;
display:block;
}
.name,
.shortName {
font-weight: 800;
}
.iconLabel, .nameLabel, .shortNameLabel, .shortName{
display: none;
}
.simple {
padding: 16px;
mix-blend-mode: difference;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
/* transition: 0.3s; */
}
a, a:visited, a:hover, a:active {
color: inherit;
}
/* On mouse-over, add a deeper shadow */
.simple:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
/* Add some padding inside the card container */
ava-pwar-simple {
padding: 2px 16px;
margin-top:10px;
}
</style>
<!-- Polyfills needed for retro browsers -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- End Polyfills -->
<script type="module" src="https://cdn.jsdelivr.net/npm/ava-pwar@0.0.13/ava-pwar.iife.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/wired-elements@0.8.2/dist/wired-elements.bundled.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/p-d.p-u@0.0.69/p-d.p-u.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/xtal-json-editor@0.0.29/xtal-json-editor.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/litter-g@0.0.15/litter-g.iife.js"></script>
</div>
</body>
</html>