diff --git a/css/main.css b/css/main.css deleted file mode 100644 index 433331f..0000000 --- a/css/main.css +++ /dev/null @@ -1,265 +0,0 @@ -* { - margin: 0; - padding: 0; - -webkit-tap-highlight-color: transparent; -} - -a { - text-decoration: none; -} - -.hide { - display: none !important; -} - -body { - font-family: "Roboto", Helvetica, Arial, sans-serif; - background: #ffffff; -} - -ul, li { - list-style-type: none; -} - -.hide-overflow { - overflow: hidden; -} - -.header-container { - height: inherit; -} - -.header-container p { font-weight: lighter; } - -.header-container h2, -.header-container p { - color: #fff; - text-align: left; - padding-left: 20px; - padding-top: 20px; -} - -.header-container p { - padding-right: 20px; -} - -.header-container h2 { - font-weight: 400; -} - -.menu-icon { - fill: #fff; - width: 28px; - height: 28px; - cursor: pointer; - position: relative; - top: 13px; - left: 5px; - cursor: pointer; -} - -.header { - position: fixed; - margin: 0 auto; - text-align: left; - background: #03a9f4; - color: #fff; - top: 0; - left: 0; - right: 0; - height: 55px; - font-size: 20px; - padding-left: 10px; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); - z-index: 9; - will-change: transform; -} - -.header span { - display: inline-block; - vertical-align: top; - line-height: 55px; - padding-left: 25px; -} - -#menu { - width: 280px; - height: 100%; - max-height: 100%; - position: fixed; - top: 0; - left: 0; - bottom: 0; - background: #FAFAFA; - border-right: 1px solid #e0e0e0; - will-change: transform; - overflow-y: auto; - -webkit-transform: translateX(-290px); - -ms-transform: translateX(-290px); - transform: translateX(-290px); - transition: 200ms all ease-in; - z-index: 11; - will-change: transform; -} - -#menu.visible { - -webkit-transform: translateX(0); - -ms-transform: translateX(0); - transform: translateX(0); -} - -#menu-overlay { - position: fixed; - left: 0; - bottom: 0; - right: 0; - background: rgba(0, 0, 0, 0.21); - width: 100%; - height: 100%; - z-index: 10; - visibility: hidden; - will-change: transform; -} - -#menu a { - display: block; - padding: 20px; - border-bottom: 1px solid #C8C8C8; - text-align: left; - padding-left: 25px; - cursor: pointer; - color: #424242; -} - -#menu .homepage { - /*border-bottom: 0;*/ -} - -#menu .homepage span { - font-size: 20px; - font-weight: bold; - display: inline-block; - position: relative; - top: -12px; - left: 10px; -} - -#menu .homepage:hover { - text-decoration: none; -} - -#menu li:last-of-type { - margin-top: 20px; - padding-left: 20px; -} - -#menu .info span { - display: inline-block; - margin-bottom: 10px; -} - -#menu .info { - padding-top: 25px; - padding-left: 25px; -} - -#menu .info-offline { - padding-top: 0; -} - -#menu li p { - position: absolute; - left: 20px; -} - -#menu li p { - bottom: 0; -} - -#menu a:hover, -#menu a:focus { - background: #EEEEEF; -} - -#menu-overlay.visible { - visibility: visible; -} - -.logo { - width: 40px; - height: 40px; -} - -.container { - width: 75%; - min-height: 80px; - margin: 30px auto; - padding: 20px; - background: #fff; - color: #000; - -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14); - box-shadow: 0 1px 4px 0 rgba(0,0,0,0.14); - border-radius: 2px; -} - -.container a { - font-size: 16px; - display: inline-block; - color: #4F8EFA; -} - -.container a:hover { - text-decoration: underline; -} - -#main { - margin-top: 40px; - overflow-x: hidden; - overflow-y: hidden; - -webkit-overflow-scrolling: touch; -} - -.btn-notification { - width: 230px; - height: 40px; - font-size: 15px; - border: 0; - background: #4F8EFA; - color: #fff; - border-radius: 2px; - margin: 30px auto -5px; - display: block; - cursor: pointer; - outline: 0; - box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.38); - -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.38); - -moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.38); - -o-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.38); -} - -.btn-notification:active { - box-shadow: none; -} - -p { - margin-bottom: 20px; -} - -.header-container p { - margin: 0; -} - -.container p .author { - color: #0288d1; - font-weight: normal; -} - -.container:first-of-type { - margin-top: 0; -} - - -.custom-checkbox.offline, -.custom-checkbox.offline::before { - background: rgb(212, 212, 212); -} diff --git a/css/styles.css b/css/styles.css index 5a1fff6..f109457 100644 --- a/css/styles.css +++ b/css/styles.css @@ -27,6 +27,7 @@ li { .no-select { -moz-user-select: none; -ms-user-select: none; + -webkit-user-select: none; user-select: none; } @@ -68,7 +69,10 @@ header { overflow: hidden; z-index: 1; color: #fff; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; -webkit-transition: background-color 250ms linear; transition: background-color 250ms linear; } @@ -227,7 +231,6 @@ header.offline { font-size: 14px; font-weight: 500; cursor: pointer; - user-select: none; margin-right: 15px; } diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..449c974 Binary files /dev/null and b/favicon.ico differ diff --git a/images/icons/android-chrome-192x192.png b/images/icons/android-chrome-192x192.png index 6a1e7f9..935cc08 100644 Binary files a/images/icons/android-chrome-192x192.png and b/images/icons/android-chrome-192x192.png differ diff --git a/images/icons/android-chrome-512x512.png b/images/icons/android-chrome-512x512.png index bb4bc2c..abd0dc3 100644 Binary files a/images/icons/android-chrome-512x512.png and b/images/icons/android-chrome-512x512.png differ diff --git a/images/icons/apple-touch-icon.png b/images/icons/apple-touch-icon.png index 526a7a8..98acba2 100644 Binary files a/images/icons/apple-touch-icon.png and b/images/icons/apple-touch-icon.png differ diff --git a/images/icons/favicon-16x16.png b/images/icons/favicon-16x16.png index 81ec813..4e08874 100644 Binary files a/images/icons/favicon-16x16.png and b/images/icons/favicon-16x16.png differ diff --git a/images/icons/favicon-32x32.png b/images/icons/favicon-32x32.png index 2766997..77c5839 100644 Binary files a/images/icons/favicon-32x32.png and b/images/icons/favicon-32x32.png differ diff --git a/images/icons/mstile-150x150.png b/images/icons/mstile-150x150.png index 4e01409..1c06bf4 100644 Binary files a/images/icons/mstile-150x150.png and b/images/icons/mstile-150x150.png differ diff --git a/index.html b/index.html index bcdaa45..7275718 100644 --- a/index.html +++ b/index.html @@ -8,17 +8,17 @@ - + - - - - + + + + - +
@@ -79,8 +79,6 @@ }); } - - - + diff --git a/js/all.js b/js/all.js new file mode 100644 index 0000000..8809350 --- /dev/null +++ b/js/all.js @@ -0,0 +1 @@ +(function(e){"use strict";var n=document.querySelector(".snack-bar");var t=document.querySelector(".snack-bar-msg");var o=document.querySelector(".snack-bar-action");function i(e){if(!e)return;if(n.classList.contains("show")){r()}n.classList.add("show");t.textContent=e;setTimeout(function(){r()},3e3)}function r(){n.classList.remove("show")}o.addEventListener("click",function(){r()});e.showSnackBar=i})(typeof window==="undefined"?module.exports:window);"use strict";var apiKey="428a20d6f31803d62bc3d29c0eff0937";var headerElement=document.querySelector("header");var menuIconElement=document.querySelector(".header-icon");var menuElement=document.querySelector(".menu");var menuOverlayElement=document.querySelector(".menu-overlay");var cardElement=document.querySelector(".card");function toggleSpinner(){if(spinnerElement.classList.contains("hide")){spinnerElement.classList.remove("hide")}else{spinnerElement.classList.add("hide")}}function updateNetworkStatus(){if(navigator.onLine){headerElement.classList.remove("offline")}else{headerElement.classList.add("offline");showSnackBar("offline")}}function showMenu(){menuElement.classList.add("show");menuOverlayElement.classList.add("show")}function hideMenu(){menuElement.classList.remove("show");menuOverlayElement.classList.remove("show")}menuIconElement.addEventListener("click",showMenu,false);menuOverlayElement.addEventListener("click",hideMenu,false);(function(){navigator.serviceWorker.ready.then(function(e){isPushSupported(e)});window.addEventListener("online",updateNetworkStatus,false);window.addEventListener("offline",updateNetworkStatus,false);function e(){var e="http://api.openweathermap.org/data/2.5/weather?q=Bangalore,India&appid="+apiKey;fetch(e,{method:"GET"}).then(function(e){return e.json()}).then(function(e){console.log(e);cardElement.querySelector(".card-title span").textContent=e.name+", "+e.sys.country;cardElement.querySelector(".card-wind-info span").textContent=e.wind.speed+"KM/H";cardElement.querySelector(".card-humidity-info span").textContent=e.main.humidity+"%";cardElement.querySelector(".card-max-temp span").textContent=e.main.temp_max;cardElement.querySelector(".card-min-temp span").textContent=e.main.temp_min}).catch(function(e){console.error(e)})}e()})();var notificationBtnElement=document.getElementById("turn-on-notification");var pushBtnElement=document.getElementById("send-push");var apiKey="AIzaSyCjrU5SqotSg2ybDLK_7rMMt9Rv0dMusvY";var gcmURL="https://android.googleapis.com/gcm/send";function isPushSupported(e){if(Notification.permission==="denied"){console.warn("User has blocked push notification.");return}if(!("PushManager"in window)){console.error("Push notification isn't supported in your browser.");return}e.pushManager.getSubscription().then(function(e){if(e){changePushStatus(true)}else{changePushStatus(false)}}).catch(function(e){console.error("Error occurred while enable push ",e)})}function subscribePush(){navigator.serviceWorker.ready.then(function(e){if(!e.pushManager){alert("Your browser doesn't support push notification.");return}e.pushManager.subscribe({userVisibleOnly:true}).then(function(e){console.info("Push notification subscribed.");changePushStatus(true)}).catch(function(e){console.log("Push notification subscription error: ",e)})})}function unsubscribePush(){navigator.serviceWorker.ready.then(function(e){e.pushManager.getSubscription().then(function(e){if(!e){console.error("Unable to unregister push notification.");return}e.unsubscribe().then(function(){console.info("Push notification unsubscribed.");changePushStatus(false)}).catch(function(e){console.error(e)})}).catch(function(e){console.error("Failed to unsubscribe push notification.")})})}function changePushStatus(e){notificationBtnElement.dataset.checked=e;notificationBtnElement.checked=e;if(e){pushBtnElement.removeAttribute("disabled")}else{pushBtnElement.setAttribute("disabled",true)}}notificationBtnElement.addEventListener("click",function(){var e=notificationBtnElement.dataset.checked==="true";if(e){unsubscribePush()}else{subscribePush()}});function curlCommand(e){var n=e.endpoint.split("/");var t=n[n.length-1];var o='curl --header "Authorization: key='+apiKey+'" --header Content-Type:"application/json" '+gcmURL+' -d "{\\"registration_ids\\":[\\"'+t+'\\"]}"';console.log("%c curl command to send push notification ","background: #000; color: #fff; font-size: 13px;");console.log(o)}function sendPushNotification(e){navigator.serviceWorker.ready.then(function(e){e.pushManager.getSubscription().then(function(e){curlCommand(e);fetch("/send_notification",{method:"post",headers:{Accept:"application/json","Content-Type":"application/json"},body:JSON.stringify(e)}).then(function(e){return e.json()})})})}pushBtnElement.addEventListener("click",function(){sendPushNotification()},false); \ No newline at end of file diff --git a/js/app.js b/js/app.js index 0617e27..852b1ab 100644 --- a/js/app.js +++ b/js/app.js @@ -61,8 +61,8 @@ menuOverlayElement.addEventListener("click", hideMenu, false); var url = 'http://api.openweathermap.org/data/2.5/weather?q=Bangalore,India&appid=' + apiKey; fetch(url, { method: 'GET' }) - .then(resp => resp.json()) - .then(res => { + .then(function(resp){ return resp.json() }) + .then(function(res) { console.log(res); cardElement.querySelector('.card-title span').textContent = res.name + ', ' + res.sys.country; cardElement.querySelector('.card-wind-info span').textContent = res.wind.speed + 'KM/H'; diff --git a/manifest.json b/manifest.json index 96dad0f..7a9f19c 100644 --- a/manifest.json +++ b/manifest.json @@ -8,12 +8,12 @@ "background_color": "#f5f5f5", "theme_color": "#212225", "icons": [{ - "src": "images/icons/android-chrome-192x192.png", + "src": "./images/icons/android-chrome-192x192.png", "type": "image/png", "sizes": "192x192" }, { - "src": "images/icons/android-chrome-512x512.png", + "src": "./images/icons/android-chrome-512x512.png", "type": "image/png", "sizes": "512x512" }], diff --git a/package.json b/package.json index ad4277a..a8cf6a6 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,16 @@ "node": "4.1.1" }, "scripts": { - "start": "node server.js" + "start": "npm run build && node server.js", + "css": "postcss -u autoprefixer -r css/*", + "js": "mkdir -p dist/js && uglifyjs 'js/snackbar.js' 'js/app.js' 'js/main.js' -m -o js/all.js", + "build": "npm run css && npm run js", + "postinstall": "npm run start" }, - "license": "MIT" + "license": "MIT", + "devDependencies": { + "autoprefixer": "^6.4.0", + "postcss-cli": "^2.6.0", + "uglify-js": "^2.7.3" + } } diff --git a/serviceWorker.js b/serviceWorker.js index c2fdcd2..e0b83e1 100644 --- a/serviceWorker.js +++ b/serviceWorker.js @@ -8,15 +8,13 @@ var cacheName = 'initial-cache-v1'; //Files to save in cache var files = [ './', - '/index.html', - '/index.html?utm=homescreen', //SW treats query string as new page - '/css/styles.css', + './index.html', + './index.html?utm=homescreen', //SW treats query string as new page + './css/styles.css', 'https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700', //caching 3rd party content - '/images/icons/android-chrome-192x192.png', - '/js/app.js', - '/js/main.js', - '/js/snackbar.js', - '/manifest.json' + './images/icons/android-chrome-192x192.png', + './js/all.js', + './manifest.json' ]; //Adding `install` event listener