icon and image changes

README.md

@@ -1,16 +1,13 @@
 # Weatherscan Simulator
 Weatherscan simulation in HTML/JS/CSS
-Remade with Openweathermaps api
+
+Visit https://weatherscan.app/?long_island for a demo
 
 ## Running locally
-1. Create OpenWeatherMaps (https://home.openweathermap.org/api_keys) and Mapbox (https://account.mapbox.com/) API keys.
-2. Go to `webroot/js/groupull.js`, search for and replace `putapikeyhere` with your OpenWeatherMaps API key.
-3. Go to `webroot/js/location.js`, search for and replace `putapikeyhere` with your OpenWeatherMapsApi key.
-4. Go to `webroot/js/radar.js`, search for and replace `putapikeyhere` with your Mapbox API key.
-5. Download & Install [node.js LTS](https://nodejs.org/en/)
-6. In terminal, run `npm install --production` in the root folder of this project. This will install any dependencies.
-7. In terminal, run `npm start` in the root folder of this project. This will start a local web server.
-8. Follow the link in the console output.
+1. Download & Install [node.js LTS](https://nodejs.org/en/)
+2. In terminal, run `npm install --production` in the root folder of this project. This will install any dependencies.
+3. In terminal, run `npm start` in the root folder of this project. This will start a local web server.
+4. Follow the link in the console output.
 
 ## Development
 This project uses gulp to compile SASS to CSS.

gulpfile.js

@@ -1,21 +0,0 @@
-const gulp = require('gulp');
-const sass = require('gulp-sass');
-const autoprefixer = require('gulp-autoprefixer');
-const cleanCSS = require('gulp-clean-css');
-const sourcemaps = require('gulp-sourcemaps');
-
-gulp.task('sass', function () {
-  return gulp.src('src/scss/*.scss')
-      .pipe(sourcemaps.init())
-      .pipe(sass())
-      .pipe(autoprefixer())
-      .pipe(cleanCSS())
-      .pipe(sourcemaps.write('.'))
-      .pipe(gulp.dest('webroot/css'));
-});
-
-gulp.task('default', gulp.series('sass'));
-
-gulp.task('watch', function () {
-  gulp.watch('scss/*.scss', gulp.series('sass'));
-});

package.json

@@ -2,20 +2,22 @@
   "name": "weatherscan",
   "description": "weatherscan wmulator",
   "scripts": {
-    "start": "http-server ./webroot"
+    "start": "live-server ./webroot"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Jessecar96/Weatherscan.git"
   },
   "dependencies": {
-    "http-server": "^0.11.1"
+    "date-fns": "^2.23.0",
+    "http-server": "^0.12.3",
+    "live-server": "^1.2.1"
   },
   "devDependencies": {
-    "gulp": "^4.0.2",
+    "gulp": "^3.9.1",
     "gulp-autoprefixer": "^6.1.0",
     "gulp-clean-css": "^4.2.0",
-    "gulp-sass": "^4.0.2",
+    "gulp-sass": "^5.0.0",
     "gulp-sourcemaps": "^2.6.5"
   }
 }

webroot/images/airport-curve.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 768" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#89a4cc;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M117.9,384C117.9,171.9,294,0,511.2,0H0v768h511.2C294,768,117.9,596.1,117.9,384z"/>
+	</g>
+	<g>
+		<path class="st0" d="M511.2,0c217.2,0,393.3,171.9,393.3,384S728.4,768,511.2,768H1024V0H511.2z"/>
+	</g>
+</g>
+</svg>

webroot/images/check.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 100 100" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient gradientUnits="userSpaceOnUse" x1="239.618" y1="140.593" x2="239.618" y2="170.654" id="gradient-0" spreadMethod="pad" gradientTransform="matrix(2.087918, 1.861155, -1.68698, 1.892509, -188.839584, -698.654768)">
+      <stop offset="0" style="stop-color: rgb(249, 250, 255);"/>
+      <stop offset="0.401" style="stop-color: rgb(155, 165, 179);"/>
+      <stop offset="1" style="stop-color: rgb(55, 73, 98);"/>
+    </linearGradient>
+  </defs>
+  <path style="stroke: rgba(0, 0, 0, 0); fill: url(#gradient-0);" d="M 21.806 84.088 C 28.868 73.09 53.954 37.084 99.999 16.654 C 100.143 16.59 68.496 -0.028 68.466 0 C 56.628 10.612 25.532 54.87 25.4 54.662 C 13.586 36.2 -0.042 24.262 0 24.32 C 9.56 37.712 16.846 53.768 21.77 84.082"/>
+  <path style="stroke: rgba(254, 0, 0, 0); fill: rgb(223, 69, 65);" d="M 13.418 35.32 C 19.484 42.142 20.868 44.24 25.694 51.546 C 29.228 46.526 33.66 40.264 37.542 35.45 C 37.552 35.478 29.134 35.282 13.418 35.32 Z"/>
+  <path style="stroke: rgba(254, 0, 0, 0); fill: rgb(223, 69, 65);" d="M 20.844 69.602 C 25.512 71.764 41.936 80.342 63.764 84.912 C 62.338 80.882 53.98 57.672 53.978 57.688 C 54.048 57.632 20.956 69.532 20.844 69.602 Z" transform="matrix(-0.33889, 0.940826, -0.940826, -0.33889, 123.721199, 55.662018)"/>
+</svg>

webroot/images/health-curve.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 768" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#149db3;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M117.9,384C117.9,171.9,294,0,511.2,0H0v768h511.2C294,768,117.9,596.1,117.9,384z"/>
+	</g>
+	<g>
+		<path class="st0" d="M511.2,0c217.2,0,393.3,171.9,393.3,384S728.4,768,511.2,768H1024V0H511.2z"/>
+	</g>
+</g>
+</svg>

webroot/images/red-curve-dark.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 768" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#ac2e0d;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M117.9,384C117.9,171.9,294,0,511.2,0H0v768h511.2C294,768,117.9,596.1,117.9,384z"/>
+	</g>
+	<g>
+		<path class="st0" d="M511.2,0c217.2,0,393.3,171.9,393.3,384S728.4,768,511.2,768H1024V0H511.2z"/>
+	</g>
+</g>
+</svg>

webroot/images/red-curve.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" preserveAspectRatio="none" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 768" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#dd3c20;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M117.9,384C117.9,171.9,294,0,511.2,0H0v768h511.2C294,768,117.9,596.1,117.9,384z"/>
+	</g>
+	<g>
+		<path class="st0" d="M511.2,0c217.2,0,393.3,171.9,393.3,384S728.4,768,511.2,768H1024V0H511.2z"/>
+	</g>
+</g>
+</svg>

webroot/images/yes2.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 150 175" width="150" height="175" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="drop-shadow-filter-0" x="-500%" y="-500%" width="1000%" height="1000%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
+      <feOffset dx="0" dy="4"/>
+      <feComponentTransfer result="offsetblur">
+        <feFuncA id="spread-ctrl" type="linear" slope="1.2"/>
+      </feComponentTransfer>
+      <feFlood flood-color="rgba(0,0,0,0.34)"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <circle style="fill: rgb(105, 110, 206);" cx="377.855" cy="233.096" r="94.538" transform="matrix(0.738972, 0, 0, 0.856269, -205.198013, -115.225967)"/>
+  <g transform="matrix(1.094601, 0, -0.067249, 1.45586, 77.548401, -250.186142)" style="filter: url(#drop-shadow-filter-0);">
+    <g transform="matrix(1, 0, 0, 1, -0.0422, -0.686879)">
+      <rect x="65.36" y="20.809" width="23.264" height="26.693" style="fill: rgb(255, 255, 255);" transform="matrix(1, 0, -0.147216, 1, -56.626949, 162.685516)"/>
+      <rect x="65.914" y="107.886" width="21.99" height="21.977" style="fill: rgb(255, 255, 255);" transform="matrix(1, 0, -0.147216, 1, -58.003323, 144.267807)"/>
+    </g>
+    <polygon style="stroke: rgba(0, 0, 0, 0); fill: rgb(255, 255, 255);" points="1.719 209.187 25.048 209.184 11.013 245.671 -1.089 245.659"/>
+  </g>
+</svg>