Skip to content

Commit

Permalink
pwinter v 2
Browse files Browse the repository at this point in the history 
Demo test PWA. PWA Logo Printer v2
  • Loading branch information
@diekus
diekus committed Aug 5, 2021
1 parent a533c87 commit 3201b90
Show file tree
Hide file tree
Showing 7 changed files with 323 additions and 0 deletions.
8 changes: 8 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
#source SVG images
images/btn-dark.svg
images/btn-light.svg
images/ico-new.svg
images/ico-save.svg
images/ico-share.svg
images/pwa-logo.svg
images/pwinterlogo.svg
Binary file added images/pwinter.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
117 changes: 117 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json">
<link href="styles/pwinter.css" rel="stylesheet">
<link rel="shortcut icon" type="image/jpg" href="images/pwinter.png"/>
<script src="scripts/app.js"></script>
<title>The PWinter</title>
</head>
<body>
<header>
<span id="titleBar">
<strong>The PWinter</strong>
<span id="titleBarIcons">
<svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.5">
<title>New logo</title>
<path d="M0 9.563c0 5.278 4.285 9.563 9.563 9.563 5.278 0 9.563-4.285 9.563-9.563C19.126 4.285 14.841 0 9.563 0 4.285 0 0 4.285 0 9.563zm1.434 0a8.134 8.134 0 018.129-8.129c4.486 0 8.128 3.643 8.128 8.129a8.132 8.132 0 01-8.128 8.128c-4.486 0-8.129-3.642-8.129-8.128z" fill="#fff"/>
<path d="M9.563 5.26v8.606M13.866 9.563H5.26" fill="none" stroke="#fff" stroke-width="1.43"/>
</svg>
<svg class="icon" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.5">
<title>Save logo</title>
<path d="M0 16.257a2.87 2.87 0 002.869 2.869h11.475a4.785 4.785 0 004.782-4.782V2.869A2.87 2.87 0 0016.257 0H2.869A2.87 2.87 0 000 2.869v13.388zm1.434 0V2.869c0-.792.643-1.435 1.435-1.435h13.388c.792 0 1.434.643 1.434 1.435v11.475a3.348 3.348 0 01-3.347 3.347H2.869a1.435 1.435 0 01-1.435-1.434z" fill="#fff"/>
<path d="M3.825 19.126h9.563v-7.172H3.825v7.172zm1.435-1.435v-4.303h6.694v4.303H5.26z" fill="#fff"/>
<path d="M9.085 14.822v1.913" fill="none" stroke="#fff" stroke-width="1.43"/>
<path d="M3.825 9.563h11.476V0H3.825v9.563zM5.26 8.128V1.434h8.606v6.694H5.26z" fill="#fff"/>
</svg>
<svg class="icon" viewBox="0 0 20 17" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.5">
<title>Share logo</title>
<path d="M12.295.82h-7.65A3.827 3.827 0 00.82 4.645v7.65a3.827 3.827 0 003.825 3.825h7.65a3.827 3.827 0 003.825-3.825" fill="none" stroke="#fff" stroke-width="1.64"/>
<path d="M12.16 4.704V2.459l7.013 4.372-7.013 4.371V9.006c-1.865.106-5.465.903-5.465 5.475 0 0-1.741-8.961 5.465-9.777z" fill="#fff"/>
<path d="M12.16 4.704V2.459l7.013 4.372-7.013 4.371V9.006c-1.865.106-5.465.903-5.465 5.475 0 0-1.741-8.961 5.465-9.777zm1.639.709v.755l-1.455.165c-1.467.166-2.427.794-3.051 1.616 1-.382 2.001-.536 2.774-.58l1.732-.098v.977l2.275-1.417-2.275-1.418z" fill="#fff"/>
</svg>
</span>
</span>
</header>
<main id="canvasPreview">
<section>
<svg class="pwaLogo" viewBox="0 0 310 117" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<title>PWA logo preview</title>
<g fill-rule="nonzero">
<path d="M228.151 95.812l8.956-22.646h25.858l-12.272-34.354L266.041 0 310 116.716h-32.418l-7.513-20.904h-41.918" fill="#a0a0a0"/>
<path d="M200.496 116.717L247.554.002h-31.198l-32.192 75.423L161.273.002h-23.981l-24.578 75.423L95.38 41.056 79.694 89.383l15.927 27.334h30.702l22.211-67.639 21.176 67.639h30.786" fill="#59d8c8"/>
<path d="M29.614 76.65H48.83c5.822 0 11.006-.65 15.551-1.95l4.971-15.31L83.24 16.598a34.16 34.16 0 00-3.624-4.758C72.484 3.947 62.05 0 48.313 0H0v116.716h29.614V76.65zm25.437-49.798c2.785 2.803 4.178 6.555 4.178 11.255 0 4.737-1.225 8.492-3.674 11.268-2.687 3.086-7.631 4.627-14.836 4.627H29.614V22.646H40.8c6.715 0 11.465 1.402 14.251 4.206" fill="#a0a0a0"/>
</g>
</svg>
</section>
<section id="colorSelectionPane">
<span class="colorSelectionRow">
<!--div class="colorCircle"></div>
<div class="colorCircle"></div>
<div class="colorCircle"></div-->
<input type="color" id="head" name="head" value="#AFAFAF">
<input type="color" id="head" name="head" value="#59D8C8">
<input type="color" id="head" name="head" value="#AFAFAF">
</span>
<span class="colorSelectionRow">
<svg class="colorBtn" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-miterlimit="1.5">
<title>Set light background on the logo</title>
<circle cx="25" cy="25" r="25" fill="none"/>
<clipPath id="a">
<circle cx="25" cy="25" r="25"/>
</clipPath>
<g clip-path="url(#a)">
<path d="M25 35v5" fill="none" stroke="#3b3b3b" stroke-width="2.5"/>
<circle cx="25" cy="25" r="6.8" fill="#3b3b3b"/>
<path d="M25 15v-4M15 25h-4M35 25h5M18 18l-3-3M32 32l3 3M32 18l3-3M18 32l-3 3" fill="none" stroke="#3b3b3b" stroke-width="2.5"/>
</g>
<path d="M25 0a25 25 0 110 50 25 25 0 010-50zm0 5a20 20 0 110 40 20 20 0 010-40z" fill="#3b3b3b"/>
</svg>
<svg class="colorBtn" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<title>Set dark background on the logo</title>
<circle cx="25" cy="25" r="25" fill="none"/>
<clipPath id="a">
<circle cx="25" cy="25" r="25"/>
</clipPath>
<g fill="#3b3b3b" clip-path="url(#a)">
<path d="M33 33a11 11 0 01-18-8 11 11 0 0118-8h-1a8 8 0 101 16z"/>
<path d="M34 19l1 1h1l-1 1 1 1h-3v-1l-1-1h2v-1zM28 23l1 1h1v1h-1l1 2h-1l-1-1-1 1v-2h-1v-1h2v-1zM34 27l1 1h1v1h-1l1 1-1 1-1-1-1 1v-2h-1v-1h2v-1z"/>
</g>
<path d="M25 0a25 25 0 110 50 25 25 0 010-50zm0 5a20 20 0 110 40 20 20 0 010-40z" fill="#3b3b3b"/>
</svg>
</span>
</section>
</main>
<footer>
<svg class="logoFooter" viewBox="0 0 54 53" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="10">
<title>PWinter logo</title>
<path d="M5 7h43c3 0 5 2 5 5v16c0 3-2 6-5 6H5c-3 0-5-3-5-6V12c0-3 2-5 5-5z" fill="url(#_Linear1)" fill-rule="nonzero"/>
<path d="M5 7h43c3 0 5 2 5 5v16c0 3-2 6-5 6H5c-3 0-5-3-5-6V12c0-3 2-5 5-5zm0 4h43l1 1v16l-1 1H5l-1-1V12l1-1z" fill="#3d3d3d"/>
<path d="M11 51V21h32v30H11z" fill="#fff" stroke="#666" stroke-width="2.6"/>
<path d="M21 36l3 2v3l5-1 6 2-17 6v-5l3-1v-6z" fill="#3d3d3d" fill-rule="nonzero" stroke="#3d3d3d" stroke-width=".7"/>
<path d="M19 32l17 7v-4l-11-5 11-3v-2h-8 1l-10 3v4" fill="url(#_Linear2)" fill-rule="nonzero" stroke="url(#_Linear3)" stroke-width=".7" stroke-miterlimit="2"/>
<path fill="#5e5e5e" stroke="#3d3d3d" stroke-width="2.6" d="M9 21h36v4H9z"/>
<path d="M11 7V1h32v6" fill="#fff" stroke="#666" stroke-width="2.6"/>
<circle cx="8" cy="13.6" fill="#00c800" stroke="#64ff00" stroke-width="2.6" r=".7"/>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 26.5676 -13.2838 0 35 7)">
<stop offset="0" stop-color="#c4c4c4"/>
<stop offset=".3" stop-color="#ececec"/>
<stop offset="1" stop-color="#797979"/>
</linearGradient>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="translate(19 29) scale(16.6948)">
<stop offset="0" stop-color="#5a0fc8"/>
<stop offset="1" stop-color="#3dffdc"/>
</linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(16.9777 0 0 14.4638 19 32)">
<stop offset="0" stop-color="#5a0fc8"/>
<stop offset="1" stop-color="#3dffdc"/>
</linearGradient>
</defs>
</svg>
</footer>
</body>
</html>
14 changes: 14 additions & 0 deletions manifest.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"name": "The PWinter",
"short_name": "PWinter",
"start_url": "index.html",
"display": "standalone",
"display_override": ["window-controls-overlay"],
"background-color": "#AFAFAF",
"theme-color": "#3B3B3B",
"icons": [{
"src": "images/pwinter.png",
"sizes": "512x512",
"type": "image/png"
}]
}
8 changes: 8 additions & 0 deletions scripts/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
console.log('ServiceWorker registration failed: ', err);
});
}
128 changes: 128 additions & 0 deletions styles/pwinter.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
:root {
--shadow-color: rgba(0, 0, 0, .5);
--shadow: 0px 0px 20px var(--shadow-color);
--radius: 25px;
}

html {
background: rgb(175, 175, 175);
background: linear-gradient(170deg, rgba(59, 59, 59, 1) 30%, rgba(175, 175, 175, 1) 30%);
background-repeat: no-repeat;
height: 100vh;
}

body {
display: grid;
grid-template: 5rem auto / 1fr 4fr 1fr;
height: 100vh;
max-width: 1000px;
padding: 0px;
margin: 0px auto;
color: #FFF;
font-family: 'Courier New', Courier, monospace;
}

header {
grid-column: 1 / -1;
grid-row: 1 / 2;
}

#canvasPreview {
grid-column: 2 / 3;
grid-row: 2 / 3;
background-color: #FFF;
border-radius: var(--radius) var(--radius) 0px 0px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
align-content: flex-end;
width: 100%;
height: 100%;
}

#colorSelectionPane {
display: flex;
flex-direction: column;
margin: 3rem;
padding: 1rem;
border: #3B3B3B solid 7px;
border-radius: var(--radius);
box-shadow: inset var(--shadow);
}

.pwaLogo {
padding: 6em;
}

.icon {
height: 1rem;
}

.colorBtn {
height: 3em;
}

#titleBar {
display: flex;
flex-direction: row;
justify-content: space-around;
align-content: center;
padding: 0.2em;
}

#titleBarIcons {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 1rem;
}

.logoFooter {
height: 3rem;
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
}

.colorSelectionRow {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 1em;
}

.colorCircle {
border: #3B3B3B solid 6px;
border-radius: 50%;
height: 2.3em;
width: 2.3em;
}

input[type="color"] {
border: #3B3B3B solid 1.2px;
border-radius: 12%;
height: 3.3em;
width: 3.3em;
background:#3B3B3B;
}

@media (max-width: 900px) {
body {
grid-template: 5rem auto / 1fr 8fr 1fr;
}

.pwaLogo {
padding: 5em;
}
}

@media (max-width: 550px) {
body {
grid-template: 5rem auto / 1fr 10fr 1fr;
}

.pwaLogo {
padding: 2.5em;
}
}
48 changes: 48 additions & 0 deletions sw.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
// Perform install steps
var CACHE_NAME = 'pwinter-v1';
var urlsToCache = [
'styles/pwinter.css',
'index.html'
];

self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});

self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
}
)
);
});

self.addEventListener('activate', function(event) {

var cacheWhitelist = ['pwinter-v1'];

event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});

0 comments on commit 3201b90

Please sign in to comment.