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 0000000..8944dbf
Binary files /dev/null and b/images/pwinter.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5588278
--- /dev/null
+++ b/index.html
@@ -0,0 +1,117 @@
+
+
+
+
+
+
+
+
+
+
+ The PWinter
+
+
+
+
+ The PWinter
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ 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