From 3201b905bb98dd95dba5ec450d8c3647f66675e9 Mon Sep 17 00:00:00 2001 From: diekus Date: Thu, 5 Aug 2021 16:21:24 +0100 Subject: [PATCH] pwinter v 2 Demo test PWA. PWA Logo Printer v2 --- .gitignore | 8 +++ images/pwinter.png | Bin 0 -> 2568 bytes index.html | 117 +++++++++++++++++++++++++++++++++++++++++ manifest.json | 14 +++++ scripts/app.js | 8 +++ styles/pwinter.css | 128 +++++++++++++++++++++++++++++++++++++++++++++ sw.js | 48 +++++++++++++++++ 7 files changed, 323 insertions(+) create mode 100644 .gitignore create mode 100644 images/pwinter.png create mode 100644 index.html create mode 100644 manifest.json create mode 100644 scripts/app.js create mode 100644 styles/pwinter.css create mode 100644 sw.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a65fa1d --- /dev/null +++ b/.gitignore @@ -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 \ No newline at end of file diff --git a/images/pwinter.png b/images/pwinter.png new file mode 100644 index 0000000000000000000000000000000000000000..8944dbf6892decebcce3565d3540e28d43b2502e GIT binary patch literal 2568 zcmV+j3itJiP)EukX`Vk+MG!PR4KAfPez1`q(<5h=StNgitt#)3u6!7?j2Nc7! zg-3Cy010qNS#tmY3ljhU3ljkVnw%H_00=BeL_t(& zf$f@WY*c9($A9O{<#gJfnRX7)P=u+4a*47eN&|s#2{-xDmBd8C#iCIwCIr(j8v+ty zFd{Kg1M!2XYeLFu))3fT$R@Z#U<0H=nyAGnE*HxHWjdX9rflh%Ip=--(9SS3oz8_$ zfld4;C+D2^ectDJ{_o{^FXt!}fws1`wZJK$t{C|#L=gD;i4!OOT1e1Yq{8n2^^V^Ysm#mu z@Fn8^#6D|Kk`D(D9$fM0(WBpo!{IDT%4AU@-|JK*nf9vq!!`EPp*uH)H zesbf+jeYTWT*c+4+H{en#Kpdw+K7$0C3vBhy9Um+@dsIns2HAdw-P?MSJ}MWz(_t%YM-~z^Mx#^i=!;@tU?AmZN#Pzcqm5x0 zR903_p{s>4JUmQ)e?Ktlr)ip{&tu8wB>MaNQ%YY4SeBIu3fv9A~b*gd;FCQ|Lu(7HYgjYf83TO(b z3NmZ%)to9-niHei&89jZtMqDW)WSVMN;z%;VVdT6Vw$E2(==0Izq`Ae`uci29uF`& z0Twechl6oqeF>yKrb?1rKc`S#;Xv~`2+Z=Zc~LE2no))3DD4C=kw_4W#ZvFX!^7#v z-vDTuCY)7ORbkUKXQXFbxNspuu)e+?pU+pEWhp@_&xr}pG?gzd()rr@87!RTL7l{Q z=fQ&qbar;;m8q(#>Qi-H|J@5)$$}yQRe9b@Dxg5zwD}}B%sU@H;dba*xy(%nUDtoB zc64;?_xt^KCaX-?a&#O?AUPz(=p|7Yj9L8c-cx>bu7~fv_X!tz2C+o`?Z}J3FpN7L z9UVVZ0lZ%C!n(S;_b2leWz%=-`23P8d^21qNi}0F2Bb*GMl5=wCcpZ7FS|PL^6Ow9 zgGB_VLQqwey1KgebzNTw8ABU(?AYPAENhEpSu255i1K>9t6VNuBfzm^$0iK-0HFsa zXHWLh^^X`aVKd^AqY=`pBD|xaUg%@tzD5O~N{!b^qfx=Py#`I{c-^LHvUl%Z01}DB z-B>L4aay+RbULp(ozAnTPMwM*6Enj7SjO99R|;)yZ5=>k{yH1QjM*A(2LdD#lB-uD zy!V$rB9_g7Vn1JUC%dc!AtYg8(Kqrb-JTKlYSY<-KB0b>%XR(q>C@jVgrFMbim#zQ{Yd!q9 z_HztbHfLjld?$2oK64Cl_BBNBqHl_V&`-+sn&SLx&F0)YMcKyJaIbGBU!YOP6@}-FGw24~K?^@|N>@y;N6M zvu@owX3m^hE_cd9th2L|qeqVtjYf+)Y<0O@`2BvGnwr?Tb0>=yEt>QPj%<{LSTGnQ z91a(hGYkX6FxawX3mZ0Un9?(qDIa5%m6g=g)UbT{a<*>WTGsBC4^u+S;c(#h`3bR$@M%kJ{Q=HgDccOG^v7KJj99s! + + + + + + + + + + The PWinter + + +
+ + The PWinter + + + New logo + + + + + Save logo + + + + + + + Share logo + + + + + + +
+
+
+ +
+
+ + + + + + + + + Set light background on the logo + + + + + + + + + + + + + Set dark background on the logo + + + + + + + + + + + +
+
+ + + \ No newline at end of file diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..fcafb04 --- /dev/null +++ b/manifest.json @@ -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" + }] +} \ No newline at end of file diff --git a/scripts/app.js b/scripts/app.js new file mode 100644 index 0000000..eb918de --- /dev/null +++ b/scripts/app.js @@ -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); + }); + } \ No newline at end of file diff --git a/styles/pwinter.css b/styles/pwinter.css new file mode 100644 index 0000000..539b312 --- /dev/null +++ b/styles/pwinter.css @@ -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; + } +} \ No newline at end of file diff --git a/sw.js b/sw.js new file mode 100644 index 0000000..1c8a110 --- /dev/null +++ b/sw.js @@ -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); + } + }) + ); + }) + ); +}); \ No newline at end of file