Dope new landing page
This commit is contained in:
parent
8e0a2e966f
commit
05654fa1e4
@ -37,7 +37,8 @@
|
||||
"./node_modules/leaflet-polylinedecorator/dist/leaflet.polylineDecorator.js",
|
||||
"./node_modules/leaflet-openweathermap/leaflet-openweathermap.js",
|
||||
"./node_modules/leaflet-rotatedmarker/leaflet.rotatedMarker.js",
|
||||
"./node_modules/esri-leaflet/dist/esri-leaflet.js"
|
||||
"./node_modules/esri-leaflet/dist/esri-leaflet.js",
|
||||
"./node_modules/jquery/dist/jquery.js"
|
||||
]
|
||||
},
|
||||
"configurations": {
|
||||
|
||||
@ -30,6 +30,7 @@
|
||||
"esri-leaflet": "^2.3.0",
|
||||
"firebase": "^6.3.0",
|
||||
"hammerjs": "^2.0.8",
|
||||
"jquery": "^3.4.1",
|
||||
"leaflet": "^1.5.1",
|
||||
"leaflet-openweathermap": "^1.0.0",
|
||||
"leaflet-polylinedecorator": "^1.6.0",
|
||||
|
||||
@ -26,7 +26,7 @@ export const fadeIn = trigger('fadeIn', [
|
||||
export const fadeOut = trigger('fadeOut', [
|
||||
transition(':leave', [
|
||||
style({ opacity: 1 }),
|
||||
animate(defaultTiming, style({ opacity: 0 }))
|
||||
animate(1500, style({ opacity: 0 }))
|
||||
])
|
||||
]);
|
||||
|
||||
|
||||
@ -17,9 +17,11 @@ import {AngularFirestoreModule} from "@angular/fire/firestore";
|
||||
import {ToolbarComponent} from "./components/toolbar/toolbar.component";
|
||||
import {PaletteComponent} from "./components/palette/palette.component";
|
||||
import {MarkerComponent} from "./components/marker/marker.component";
|
||||
import {AnimatedBackgroundComponent} from "./components/animatedBackground/animatedBackground.component";
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AnimatedBackgroundComponent,
|
||||
AppComponent,
|
||||
CalibrateComponent,
|
||||
HomeComponent,
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,153 @@
|
||||
import {AfterViewChecked, Component} from "@angular/core";
|
||||
import {fadeOut} from "../../animations";
|
||||
|
||||
@Component({
|
||||
selector: 'animated-background',
|
||||
templateUrl: 'animatedBackground.component.html',
|
||||
styleUrls: ['animatedBackground.component.scss'],
|
||||
animations: [fadeOut]
|
||||
})
|
||||
export class AnimatedBackgroundComponent implements AfterViewChecked {
|
||||
private once = true;
|
||||
|
||||
splash = true;
|
||||
|
||||
constructor() {
|
||||
setTimeout(() => this.splash = false, 1000);
|
||||
}
|
||||
|
||||
ngAfterViewChecked() {
|
||||
const $ = window['$'];
|
||||
if (this.once && !!$) {
|
||||
this.once = false;
|
||||
(function () {
|
||||
var WIDTH, HEIGHT, canvas, con, g;
|
||||
var pxs = [];
|
||||
var rint = 50;
|
||||
|
||||
$.fn.sprites = function () {
|
||||
this.append($('<canvas id="sprites"></canvas>'));
|
||||
setup(this);
|
||||
};
|
||||
|
||||
function setup(container) {
|
||||
let windowSize = function () {
|
||||
WIDTH = container.innerWidth();
|
||||
HEIGHT = container.innerHeight();
|
||||
canvas = container.find('#sprites');
|
||||
canvas.attr('width', WIDTH).attr('height', HEIGHT);
|
||||
};
|
||||
|
||||
windowSize();
|
||||
|
||||
$(window).resize(function () {
|
||||
windowSize();
|
||||
});
|
||||
|
||||
con = canvas[0].getContext('2d');
|
||||
|
||||
for (let i = 0; i < 100; i++) {
|
||||
pxs[i] = new Circle();
|
||||
pxs[i].reset();
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
con.clearRect(0, 0, WIDTH, HEIGHT);
|
||||
con.globalCompositeOperation = "lighter";
|
||||
|
||||
for (var i = 0; i < pxs.length; i++) {
|
||||
pxs[i].fade();
|
||||
pxs[i].move();
|
||||
pxs[i].draw();
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
function Circle() {
|
||||
this.s = {
|
||||
ttl: 15000,
|
||||
xmax: 5,
|
||||
ymax: 2,
|
||||
rmax: 7,
|
||||
rt: 1,
|
||||
xdef: 960,
|
||||
ydef: 540,
|
||||
xdrift: 4,
|
||||
ydrift: 4,
|
||||
random: true,
|
||||
blink: true
|
||||
};
|
||||
|
||||
this.reset = function () {
|
||||
this.x = (this.s.random ? WIDTH * Math.random() : this.s.xdef);
|
||||
this.y = (this.s.random ? HEIGHT * Math.random() : this.s.ydef);
|
||||
this.r = ((this.s.rmax - 1) * Math.random()) + 1;
|
||||
|
||||
this.dx = (Math.random() * this.s.xmax) * (Math.random() < 0.5 ? -1 : 1);
|
||||
this.dy = (Math.random() * this.s.ymax) * (Math.random() < 0.5 ? -1 : 1);
|
||||
|
||||
this.hl = (this.s.ttl / rint) * (this.r / this.s.rmax);
|
||||
this.rt = Math.random() * this.hl;
|
||||
|
||||
this.stop = Math.random() * 0.2 + 0.4;
|
||||
|
||||
this.s.rt = Math.random() + 1;
|
||||
this.s.xdrift *= Math.random() * (Math.random() < 0.5 ? -1 : 1);
|
||||
this.s.ydrift *= Math.random() * (Math.random() < 0.5 ? -1 : 1);
|
||||
};
|
||||
|
||||
this.fade = function () {
|
||||
this.rt += this.s.rt;
|
||||
};
|
||||
|
||||
this.draw = function () {
|
||||
let newo, cr;
|
||||
|
||||
if (this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) {
|
||||
this.s.rt = this.s.rt * -1;
|
||||
} else if (this.rt >= this.hl) {
|
||||
this.reset();
|
||||
}
|
||||
|
||||
newo = 1 - (this.rt / this.hl);
|
||||
|
||||
con.beginPath();
|
||||
con.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
|
||||
con.closePath();
|
||||
|
||||
cr = this.r * newo;
|
||||
|
||||
g = con.createRadialGradient(this.x, this.y, 0, this.x, this.y, (cr <= 0 ? 1 : cr));
|
||||
g.addColorStop(0.0, 'rgba(193,254,254,' + newo + ')');
|
||||
g.addColorStop(this.stop, 'rgba(193,254,254,' + (newo * 0.2) + ')');
|
||||
g.addColorStop(1.0, 'rgba(193,254,254,0)');
|
||||
|
||||
con.fillStyle = g;
|
||||
con.fill();
|
||||
};
|
||||
|
||||
this.move = function () {
|
||||
this.x += (this.rt / this.hl) * this.dx;
|
||||
this.y += (this.rt / this.hl) * this.dy;
|
||||
if (this.x > WIDTH || this.x < 0) this.dx *= -1;
|
||||
if (this.y > HEIGHT || this.y < 0) this.dy *= -1;
|
||||
};
|
||||
|
||||
this.getX = function () {
|
||||
return this.x;
|
||||
};
|
||||
|
||||
this.getY = function () {
|
||||
return this.y;
|
||||
};
|
||||
};
|
||||
})();
|
||||
|
||||
$('.spriteWrap').sprites();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,40 +1,13 @@
|
||||
<div class="d-flex w-100 h-100 flex-column justify-content-center align-items-center px-4" style="background-color: #1976d2">
|
||||
<div>
|
||||
<img src="assets/images/logo.png" width="100%" height="auto">
|
||||
</div>
|
||||
<div class="my-5 text-center">
|
||||
<h3 class="text-white">Collaborative map making... {{typedText | async}}</h3>
|
||||
</div>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button mat-flat-button class="w-100 text-white" style="background-color: #dd4b39">
|
||||
<i class="fab fa-google mr-2"></i> Sign in with Google
|
||||
</button>
|
||||
<button mat-flat-button class="w-100 mt-2 text-white" style="background-color: #00acee">
|
||||
<i class="fab fa-twitter mr-2"></i> Sign in with Twitter
|
||||
</button>
|
||||
<button mat-flat-button class="w-100 mt-2 text-white" style="background-color: #3b5998">
|
||||
<i class="fab fa-facebook mr-2"></i>Sign in with Facebook
|
||||
</button>
|
||||
</div>
|
||||
<div class="col mt-5 mt-md-0">
|
||||
<button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" (click)="new()">
|
||||
<mat-icon>add</mat-icon> New Map
|
||||
</button>
|
||||
<div class="d-flex mt-2 align-items-baseline">
|
||||
<div class="flex-grow-1">
|
||||
<mat-form-field appearance="fill" class="w-100 text-white mat-padding-0">
|
||||
<input #mapCode matInput placeholder="Map Code">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" [routerLink]="['/', mapCode.value]">
|
||||
<mat-icon>explore</mat-icon> Open
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<animated-background></animated-background>
|
||||
<div class="badge">
|
||||
<img src="assets/images/logo.png" width="200px" height="auto">
|
||||
</div>
|
||||
<div class="controls">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6">
|
||||
<button mat-flat-button class="w-100 text-white" style="background-color: #dd0330" (click)="new()">
|
||||
<mat-icon>add</mat-icon> New Map
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
15
src/app/views/home/home.component.scss
Normal file
15
src/app/views/home/home.component.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 15%;
|
||||
left: 50%;
|
||||
z-index: 500;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
bottom: 10%;
|
||||
left: 50%;
|
||||
z-index: 500;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
@ -8,7 +8,8 @@ const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||
|
||||
@Component({
|
||||
selector: 'home',
|
||||
templateUrl: 'home.component.html'
|
||||
templateUrl: 'home.component.html',
|
||||
styleUrls: ['home.component.scss']
|
||||
})
|
||||
export class HomeComponent {
|
||||
phrase = 'If you\'re into that';
|
||||
|
||||
@ -9,8 +9,10 @@ html, body {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
overscroll-behavior: none;
|
||||
font-family: Roboto, "Helvetica Neue", sans-serif;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user