icon and image changes
15
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.
|
||||
|
|
21
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'));
|
||||
});
|
10
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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 536 B |
Before Width: | Height: | Size: 625 KiB After Width: | Height: | Size: 788 KiB |
After Width: | Height: | Size: 912 KiB |
After Width: | Height: | Size: 625 KiB |
After Width: | Height: | Size: 9.1 KiB |
|
@ -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>
|
After Width: | Height: | Size: 1.4 KiB |
|
@ -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>
|
After Width: | Height: | Size: 536 B |
After Width: | Height: | Size: 3.7 MiB |
Before Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 5.2 KiB |
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 30 KiB |
After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 16 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 15 KiB |
After Width: | Height: | Size: 14 KiB |
After Width: | Height: | Size: 611 KiB |
|
@ -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>
|
After Width: | Height: | Size: 536 B |
After Width: | Height: | Size: 2.7 KiB |
|
@ -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>
|
After Width: | Height: | Size: 536 B |
After Width: | Height: | Size: 2.6 MiB |
After Width: | Height: | Size: 1.2 MiB |
After Width: | Height: | Size: 418 KiB |
|
@ -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>
|
After Width: | Height: | Size: 1.5 KiB |