Compare commits
No commits in common. "0bcd5861ec688af584e65300d2b628fac63aed7b" and "695751627a51efebe6f738d0789c8e9974f41022" have entirely different histories.
0bcd5861ec
...
695751627a
@ -25,8 +25,7 @@
|
|||||||
"aot": true,
|
"aot": true,
|
||||||
"assets": [
|
"assets": [
|
||||||
"src/favicon.ico",
|
"src/favicon.ico",
|
||||||
"src/assets",
|
"src/assets"
|
||||||
"src/manifest.json"
|
|
||||||
],
|
],
|
||||||
"styles": [
|
"styles": [
|
||||||
"src/styles.scss"
|
"src/styles.scss"
|
||||||
|
783
package-lock.json
generated
23
package.json
@ -11,23 +11,22 @@
|
|||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@angular/animations": "~10.2.1",
|
"@angular/animations": "~10.2.0",
|
||||||
"@angular/common": "~10.2.1",
|
"@angular/common": "~10.2.0",
|
||||||
"@angular/compiler": "~10.2.1",
|
"@angular/compiler": "~10.2.0",
|
||||||
"@angular/core": "~10.2.1",
|
"@angular/core": "~10.2.0",
|
||||||
"@angular/forms": "~10.2.1",
|
"@angular/forms": "~10.2.0",
|
||||||
"@angular/platform-browser": "~10.2.1",
|
"@angular/platform-browser": "~10.2.0",
|
||||||
"@angular/platform-browser-dynamic": "~10.2.1",
|
"@angular/platform-browser-dynamic": "~10.2.0",
|
||||||
"@angular/router": "~10.2.1",
|
"@angular/router": "~10.2.0",
|
||||||
"@vimeo/player": "^2.14.1",
|
|
||||||
"rxjs": "~6.6.3",
|
"rxjs": "~6.6.3",
|
||||||
"tslib": "^2.0.0",
|
"tslib": "^2.0.0",
|
||||||
"zone.js": "~0.10.2"
|
"zone.js": "~0.10.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@angular-devkit/build-angular": "~0.1002.0",
|
"@angular-devkit/build-angular": "~0.1001.7",
|
||||||
"@angular/cli": "~10.2.0",
|
"@angular/cli": "~10.1.7",
|
||||||
"@angular/compiler-cli": "~10.2.1",
|
"@angular/compiler-cli": "~10.2.0",
|
||||||
"@types/node": "^12.11.1",
|
"@types/node": "^12.11.1",
|
||||||
"@types/jasmine": "~3.5.0",
|
"@types/jasmine": "~3.5.0",
|
||||||
"@types/jasminewd2": "~2.0.3",
|
"@types/jasminewd2": "~2.0.3",
|
||||||
|
@ -1,16 +0,0 @@
|
|||||||
// Create your Sass color vars (will be available in all the project)
|
|
||||||
$primary: #ffffff;
|
|
||||||
$accent: #d33131;
|
|
||||||
$reverse: #000000;
|
|
||||||
$green: #4caf50;
|
|
||||||
$yellow: #ffeb3b;
|
|
||||||
$warn: yellow;
|
|
||||||
|
|
||||||
//media query
|
|
||||||
$breakpoint-tablet: 768px;
|
|
||||||
$breakpoint-phone: 500px;
|
|
||||||
$background-color: #1c1c1c;
|
|
||||||
// $slide-background: #f90;
|
|
||||||
$slide-background: #090501;
|
|
||||||
|
|
||||||
$backgroundhover: #ff0038b5;
|
|
@ -6,8 +6,7 @@ import { InitComponent} from './init/init.component';
|
|||||||
|
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
{ path: ':name', component: SlideComponent },
|
{ path: ':name', component: SlideComponent },
|
||||||
{ path: '', redirectTo: '/home', pathMatch: 'full'}
|
{ path: '', component: InitComponent }
|
||||||
// { path: '', component: InitComponent }
|
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<div class="router" [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
|
<div [@myAnimation]="o.isActivated ? o.activatedRoute : ''">
|
||||||
<router-outlet #o="outlet"></router-outlet>
|
<router-outlet #o="outlet"></router-outlet>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -1 +0,0 @@
|
|||||||
div.router { overflow:hidden;}
|
|
@ -1,4 +1,4 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
transition,
|
transition,
|
||||||
@ -27,21 +27,4 @@ import {
|
|||||||
|
|
||||||
export class AppComponent {
|
export class AppComponent {
|
||||||
title = 'beire-frontend';
|
title = 'beire-frontend';
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
// var $ = document.getElementById.bind(document);
|
|
||||||
//
|
|
||||||
// var orientKey = 'orientation';
|
|
||||||
// if ('mozOrientation' in screen) {
|
|
||||||
// orientKey = 'mozOrientation';
|
|
||||||
// } else if ('msOrientation' in screen) {
|
|
||||||
// orientKey = 'msOrientation';
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// var promise = null;
|
|
||||||
// if (screen[orientKey].lock) { promise = screen[orientKey].lock('landscape-primary'); }
|
|
||||||
// lockedAllowed = window.screen.lockOrientation(orientation);
|
|
||||||
|
|
||||||
// document.documentElement.requestFullscreen();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -6,10 +6,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|||||||
import { AppRoutingModule } from './app-routing.module';
|
import { AppRoutingModule } from './app-routing.module';
|
||||||
import { AppComponent } from './app.component';
|
import { AppComponent } from './app.component';
|
||||||
import { SlideComponent } from './slide/slide.component';
|
import { SlideComponent } from './slide/slide.component';
|
||||||
import { InitComponent } from './init/init.component';
|
|
||||||
|
|
||||||
import { ClientService } from './client.service';
|
import { ClientService } from './client.service';
|
||||||
import { PlayerService } from './player.service';
|
import { InitComponent } from './init/init.component';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
@ -24,8 +23,7 @@ import { PlayerService } from './player.service';
|
|||||||
HttpClientModule
|
HttpClientModule
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
ClientService,
|
ClientService
|
||||||
PlayerService,
|
|
||||||
],
|
],
|
||||||
bootstrap: [AppComponent]
|
bootstrap: [AppComponent]
|
||||||
})
|
})
|
||||||
|
@ -1,14 +1,5 @@
|
|||||||
<div class="slide" routerLink="home" style="background-image:url('/assets/img/trailer.gif');">
|
<div class="slide">
|
||||||
<div class="element">
|
<div class="element">
|
||||||
<!-- <h1 routerLink="home" style="cursor:pointer">Beire</h1> -->
|
<div class="round-button" title="Pulsa para iniciar" routerLink="home"></div>
|
||||||
<!-- <h2>Un propuesta de Maite Redondo y Luca Rullo</h2> -->
|
|
||||||
<!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> -->
|
|
||||||
<!-- <h3>Con la ayuda de Pedro, María, Luis, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre,Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre </h3> -->
|
|
||||||
<div class="element logo">
|
|
||||||
<img src="assets/img/landarte_logo.png"/>
|
|
||||||
<img src="assets/img/logoCK.png"/>
|
|
||||||
<img src="assets/img/logoBeire.png"/>
|
|
||||||
<img src="assets/img/logoSoinumapa.png"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,16 +1,9 @@
|
|||||||
@import "../../_variables.scss";
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top:0;
|
|
||||||
margin-bottom:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.slide {
|
div.slide {
|
||||||
color:$primary;
|
color:#fff;
|
||||||
width:100vw;
|
width:100vw;
|
||||||
height:100vh;
|
height:100vh;
|
||||||
background-size:cover;
|
background-size:cover;
|
||||||
background-color:#ccc;
|
background-color:#f90;
|
||||||
background-blend-mode: luminosity;
|
background-blend-mode: luminosity;
|
||||||
display:flex;
|
display:flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -26,40 +19,18 @@ div.element {
|
|||||||
text-align:center;
|
text-align:center;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.logo img {
|
|
||||||
padding:10px;
|
|
||||||
max-height:40px;
|
|
||||||
max-width:100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.round-button {
|
div.round-button {
|
||||||
opacity:0.6;
|
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
margin:auto;
|
margin:auto;
|
||||||
font-size:2em;
|
font-size:2em;
|
||||||
/*border:5px solid #fff;*/
|
border:5px solid #fff;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
border-radius:100%;
|
border-radius:100%;
|
||||||
width:5vw;
|
width:10vw;
|
||||||
height:5vw;
|
height:10vw;
|
||||||
background:$primary;
|
|
||||||
transition:1s;
|
transition:1s;
|
||||||
display:flex;
|
|
||||||
align-items:center;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
animation-name: heartBeat;
|
|
||||||
-webkit-animation-name: heartBeat;
|
|
||||||
animation-duration: 1.5s;
|
|
||||||
-webkit-animation-duration: 1.5s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
-webkit-animation-iteration-count: infinite;
|
|
||||||
animation-delay: 3;
|
|
||||||
-webkit-animation-delay: 3;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.round-button:hover {
|
div.round-button:hover {
|
||||||
background-color:$backgroundhover;
|
background:#fff;
|
||||||
opacity:0.3;
|
|
||||||
//transform:rotate(-90deg);
|
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,4 @@
|
|||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { PlayerService } from '../player.service';
|
|
||||||
import { Observable } from 'rxjs';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-init',
|
selector: 'app-init',
|
||||||
@ -9,15 +7,9 @@ import { Observable } from 'rxjs';
|
|||||||
})
|
})
|
||||||
export class InitComponent implements OnInit {
|
export class InitComponent implements OnInit {
|
||||||
|
|
||||||
constructor(
|
constructor() { }
|
||||||
private playerService:PlayerService
|
|
||||||
) { }
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// //document.documentElement.requestFullscreen();
|
|
||||||
// screen.orientation.lock('landscape').then(null, function(error) {
|
|
||||||
// console.error('orientation')
|
|
||||||
// });
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -1,16 +0,0 @@
|
|||||||
import { TestBed } from '@angular/core/testing';
|
|
||||||
|
|
||||||
import { PlayerService } from './player.service';
|
|
||||||
|
|
||||||
describe('PlayerService', () => {
|
|
||||||
let service: PlayerService;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
TestBed.configureTestingModule({});
|
|
||||||
service = TestBed.inject(PlayerService);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should be created', () => {
|
|
||||||
expect(service).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
@ -1,219 +0,0 @@
|
|||||||
import { Injectable,OnInit } from '@angular/core';
|
|
||||||
import { Subject,Observable } from 'rxjs';
|
|
||||||
import { ClientService } from './client.service';
|
|
||||||
import { HttpClient,HttpResponse } from '@angular/common/http';
|
|
||||||
import {environment} from '../environments/environment';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class PlayerService {
|
|
||||||
|
|
||||||
audio:any;
|
|
||||||
audio_paused:boolean = true;
|
|
||||||
audio_stopped = true;
|
|
||||||
audio_status = "init";
|
|
||||||
|
|
||||||
/* Playing */
|
|
||||||
private _audio_is_playing = new Subject();
|
|
||||||
public audio_is_playing$ = this._audio_is_playing.asObservable();
|
|
||||||
audio_buffered;
|
|
||||||
|
|
||||||
/* Playlist */
|
|
||||||
ListURL = environment.ListURL;
|
|
||||||
ListIndex = 0;
|
|
||||||
|
|
||||||
/* Time */
|
|
||||||
private _audio_current_time = new Subject();
|
|
||||||
public audio_current_time$ = this._audio_current_time.asObservable();
|
|
||||||
audio_duration;
|
|
||||||
audio_elapsed;
|
|
||||||
audio_position;
|
|
||||||
|
|
||||||
/* Player App */
|
|
||||||
private _init_app = new Subject();
|
|
||||||
init_app$ = this._init_app.asObservable();
|
|
||||||
|
|
||||||
/* Title */
|
|
||||||
private _audio_title = new Subject();
|
|
||||||
public audio_title$ = this._audio_title.asObservable();
|
|
||||||
|
|
||||||
audio_title;
|
|
||||||
audio_id;
|
|
||||||
audio_url;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private clientService:ClientService,
|
|
||||||
private http:HttpClient
|
|
||||||
) {
|
|
||||||
this.audio = new Audio();
|
|
||||||
this.audio_paused = true; //audio not playing
|
|
||||||
this._audio_is_playing.next(this.audio_paused);
|
|
||||||
this.audio_stopped = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
// https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
|
|
||||||
//end audio play
|
|
||||||
this.audio_status = "init"
|
|
||||||
this.audio.onended = this.handleEnded.bind(this);
|
|
||||||
this.audio.oncanplay= this.handledCanPlay.bind(this);
|
|
||||||
|
|
||||||
//play updates
|
|
||||||
this.audio.ontimeupdate = this.handleTimeUpdate.bind(this);
|
|
||||||
this.audio.onwaiting = this.handleWaiting.bind(this);
|
|
||||||
this.audio.onloadedmetadata = this.handleLoadMetadata.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
// JSON playlist environment config
|
|
||||||
playList() {
|
|
||||||
this.http.get<any>(this.ListURL).
|
|
||||||
subscribe(
|
|
||||||
(r) => {
|
|
||||||
let data = r.data;
|
|
||||||
if (data.length <= 0) { return }
|
|
||||||
this.ListIndex = this.getRandomInt(data.length);
|
|
||||||
if (this.ListIndex >= data.length) { this.ListIndex = 0 }
|
|
||||||
if (!data[this.ListIndex]["title"]) {this.audio_title = "desde Beire"}
|
|
||||||
else {this.audio_title = data[this.ListIndex]["title"]}
|
|
||||||
this.playUrl(data[this.ListIndex]["url"],this.audio_title)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
playUrl(url,title) {
|
|
||||||
|
|
||||||
//if (title==this.audio_title) this.playList();
|
|
||||||
|
|
||||||
this.audio.src = url;
|
|
||||||
this.audio_title = title;
|
|
||||||
this.audio.load();
|
|
||||||
this.audio.ontimeupdate = this.handleTimeUpdate.bind(this);
|
|
||||||
this.audio.onloadstart = () => {this.audio_buffered = 0;}
|
|
||||||
this.audio.onended = (url) => { this.ListIndex++; this.playList(); /* loop player */ };
|
|
||||||
this.audio.onprogress = this.onProgress()
|
|
||||||
|
|
||||||
this.audio.oncanplay = () => {
|
|
||||||
this._init_app.next(true);
|
|
||||||
|
|
||||||
|
|
||||||
this.audio_paused=false;
|
|
||||||
this._audio_is_playing.next(this.audio_paused);
|
|
||||||
this._audio_title.next(this.audio_title);
|
|
||||||
|
|
||||||
|
|
||||||
this.canPlay();
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
canPlay() {
|
|
||||||
this.audio_status = "canplay";
|
|
||||||
var a = this.audio.play();
|
|
||||||
try {
|
|
||||||
if (a!==undefined) {
|
|
||||||
a.then(_ => {
|
|
||||||
this.initPlayer(this.audio_title,this.audio_id);
|
|
||||||
}).catch(error=>{
|
|
||||||
console.log(error)
|
|
||||||
console.log("not possible to play")
|
|
||||||
// show play button!!!
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
/* firefox & old browsers not use Observale*/
|
|
||||||
this.initPlayer(this.audio_title,this.audio_id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
initPlayer(title,id) {
|
|
||||||
this.audio_title=title;
|
|
||||||
this.audio_stopped = false;
|
|
||||||
this.audio_paused = false;
|
|
||||||
this.audio_id = id;
|
|
||||||
}
|
|
||||||
|
|
||||||
stop() {
|
|
||||||
this.audio.onloadstart = null;
|
|
||||||
this.audio.oncanplay = null
|
|
||||||
this.audio.onprogress = null;
|
|
||||||
this.audio.pause();
|
|
||||||
this.audio_buffered=-1
|
|
||||||
this.audio.currentTime = 0;
|
|
||||||
this.audio.removeAttribute('src');
|
|
||||||
this.audio.load();
|
|
||||||
this.audio_paused = true;
|
|
||||||
this.audio_stopped = true;
|
|
||||||
this.audio_id = 0;
|
|
||||||
this.audio_url="";
|
|
||||||
}
|
|
||||||
|
|
||||||
mute() {
|
|
||||||
if (this.audio.muted) { this.audio.muted=false } else { this.audio.muted=true}
|
|
||||||
}
|
|
||||||
|
|
||||||
onProgress() {
|
|
||||||
var duration = this.audio.duration;
|
|
||||||
if (duration > 0) {
|
|
||||||
for (var i=0; i<this.audio.buffered.length; i++) {
|
|
||||||
if (this.audio.buffered.start(this.audio.buffered.length - 1 - i) < this.audio.currentTime) {
|
|
||||||
this.audio_buffered = this.audio.buffered.end(this.audio.buffered.length-1);
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//handleEvents
|
|
||||||
handleStop() {
|
|
||||||
this.stop();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleEnded(e) {
|
|
||||||
this.stop();
|
|
||||||
this.audio_status = "finish";
|
|
||||||
}
|
|
||||||
|
|
||||||
handleTimeUpdate(e) {
|
|
||||||
this.audio_status = "playing";
|
|
||||||
let elapsed = this.audio.currentTime;
|
|
||||||
let duration = this.audio.duration;
|
|
||||||
|
|
||||||
/* para pinchar un streaming */
|
|
||||||
//if (duration == NaN || duration == Infinity || this.audio.src === environment.urlStream) duration=0;
|
|
||||||
|
|
||||||
if (elapsed) {
|
|
||||||
this.audio_position = elapsed / duration;
|
|
||||||
this.audio_elapsed = this.formatTime(elapsed);
|
|
||||||
this.audio_duration = this.formatTime(duration);
|
|
||||||
this._audio_current_time.next({currentTime: this.formatTime(elapsed), duration: this.formatTime(duration)});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handledCanPlay(e) {
|
|
||||||
console.log(e)
|
|
||||||
//play
|
|
||||||
}
|
|
||||||
|
|
||||||
handleWaiting() {
|
|
||||||
this.audio_status = "waiting";
|
|
||||||
}
|
|
||||||
|
|
||||||
handleLoadMetadata(e) {
|
|
||||||
console.log(e)
|
|
||||||
}
|
|
||||||
|
|
||||||
/* utils */
|
|
||||||
private formatTime(seconds) {
|
|
||||||
let minutes:any = Math.floor(seconds / 60);
|
|
||||||
minutes = (minutes >= 10) ? minutes : "0" + minutes;
|
|
||||||
seconds = Math.floor(seconds % 60);
|
|
||||||
seconds = (seconds >= 10) ? seconds : "0" + seconds;
|
|
||||||
return minutes + ":" + seconds;
|
|
||||||
}
|
|
||||||
|
|
||||||
private getRandomInt(max) {
|
|
||||||
return Math.floor(Math.random() * Math.floor(max));
|
|
||||||
}
|
|
||||||
}
|
|
@ -1,59 +1,14 @@
|
|||||||
<ng-container *ngIf="!showInit">
|
<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}">
|
||||||
|
|
||||||
<div class="slide" *ngIf="slide" [ngStyle]="{'background-image':'url('+getFeaturedImage()+')'}" (click)="playUrl()">
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="element logo" *ngIf="slide.name=='about'">
|
<div class="element big-title" [innerHTML]="slide.title"></div>
|
||||||
<a href="http://www.landarte.es/"><img style="max-height:60px;" src="assets/img/landarte_logo.png"/></a>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="slide.name!='about' && audio_title!=slide.title" class="element big-title" [innerHTML]="slide.title"></div>
|
|
||||||
<div class="element big-title" *ngIf="audio_title==slide.title && currentTime && duration!='00:00'" (click)="play()">{{currentTime}}</div>
|
|
||||||
<div class="element second-title" [innerHTML]="slide.content"></div>
|
<div class="element second-title" [innerHTML]="slide.content"></div>
|
||||||
<div class="element logo" *ngIf="slide.name=='about'">
|
<div class="element logo" *ngIf="slide.name=='home'"><img style="padding-top:30px;max-width:100px;" src="assets/img/landarte_logo.png"/></div>
|
||||||
<a href="http://www.culturanavarra.es/"><img src="assets/img/logoCK.png"/></a>
|
|
||||||
<a href="http://www.navarra.es/"><img src="assets/img/navarra.png"/></a>
|
|
||||||
</div>
|
|
||||||
<div class="element logo" *ngIf="slide.name=='about'">
|
|
||||||
<a href="https://www.beire.es/"><img src="assets/img/logoBeire.png"/></a>
|
|
||||||
<a href="http://soinumapa.net"><img src="assets/img/logoSoinumapa.png" style="max-width:80px;"/></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="controls" *ngIf="slide">
|
<div class="controls" *ngIf="slide">
|
||||||
<div *ngIf="slide.o" class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
|
<div class="left control"><div class="arrow" [id]="slide.o" (click)="left($event)"><img src="assets/img/left.svg"/></div></div>
|
||||||
<div *ngIf="slide.e" class="right control end"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
|
<div class="right control"><div class="arrow" [id]="slide.e" (click)="right($event)"><img src="assets/img/right.svg"/></div></div>
|
||||||
<div *ngIf="slide.n" class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><img src="assets/img/top.svg"/></div></div>
|
<div class="top control"><div class="arrow" [id]="slide.n" (click)="up($event)"><img src="assets/img/top.svg"/></div></div>
|
||||||
<div *ngIf="slide.s" class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><img src="assets/img/down.svg"/></div></div>
|
<div class="bottom control"><div class="arrow" [id]="slide.s" (click)="down($event)"><img src="assets/img/down.svg"/></div></div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header">
|
|
||||||
<h1 routerLink="/home">Beire </h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="header menu">
|
|
||||||
<h1 routerLink="/about" *ngIf="slide && slide.name!='about'">+</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer player">
|
|
||||||
<span class="mute" (click)="mute()" [ngClass]="{'muted': muted}">mute</span>
|
|
||||||
<span class="audioElement audioTimer" *ngIf="currentTime && duration!='00:00'">{{currentTime}}<ng-container *ngIf="duration!='00:00'">/{{duration}}</ng-container></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="footer right">
|
|
||||||
<span class="audioElement"[innerHTML]="'Escuchando '+audio_title"></span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="video-player" [ngStyle]="{'display':showVideo }" (click)="stopVideo()">
|
|
||||||
<div id="video-player-content" (click)="stopVideo()"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<div *ngIf="showInit" class="slide init-slide" style="background-image:url('/assets/img/trailer.gif');" (click)="forcePlay()">
|
|
||||||
<div class="element">
|
|
||||||
<!-- <h1 routerLink="home" style="cursor:pointer">Beire</h1> -->
|
|
||||||
<!-- <h2>Un propuesta de Maite Redondo y Luca Rullo</h2> -->
|
|
||||||
<!-- <div class="round-button" title="Pulsa para iniciar" routerLink="home" (click)="play()"></div> -->
|
|
||||||
<!-- <h3>Con la ayuda de Pedro, María, Luis, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre,Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre, Nombre </h3> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,141 +1,48 @@
|
|||||||
@import "../../_variables.scss";
|
|
||||||
|
|
||||||
div.slide {
|
div.slide {
|
||||||
color:$primary;
|
color:#fff;
|
||||||
width:100vw;
|
width:100vw;
|
||||||
height:100vh;
|
height:100vh;
|
||||||
background-size:cover;
|
background-size:cover;
|
||||||
background-color:$slide-background;
|
background-color:#f90;
|
||||||
// background-blend-mode: luminosity;
|
background-blend-mode: luminosity;
|
||||||
filter:grayscale(1);
|
|
||||||
background-position: center center;
|
|
||||||
display:flex;
|
display:flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow:hidden;
|
overflow:crosshair;
|
||||||
}
|
|
||||||
|
|
||||||
div.slide.init-slide {
|
|
||||||
background-size:cover;
|
|
||||||
background-position:center center;
|
|
||||||
position:absolute;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
z-index:2000;
|
|
||||||
top:0;
|
|
||||||
left:0;
|
|
||||||
filter:none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.element {
|
div.element {
|
||||||
width:50vw;
|
width:50vw;
|
||||||
margin:auto;
|
margin:auto;
|
||||||
text-align:justify;
|
text-align:center;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.big-title {
|
div.big-title {
|
||||||
font-weight: bold;
|
font-family:"Staatliches",sans-serif;
|
||||||
font-family:"Helvetica Bold",sans-serif;
|
font-size:10rem;
|
||||||
// font-size:2vw;
|
opacity:0.6;
|
||||||
font-size:calc(12px + 2vw);
|
|
||||||
color:$primary;
|
|
||||||
opacity:1;
|
|
||||||
max-width: 100px;
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.second-title {
|
div.second-title {
|
||||||
font-size:1.2vmax;
|
font-size:3rem;
|
||||||
font-family:"Helvetica",serif;
|
font-family:"Reenie Beanie",serif;
|
||||||
overflow-wrap:break-word;
|
|
||||||
text-align:justify;
|
|
||||||
a { text-decoration:none; font-weight:bold;}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* controls */
|
/* controls */
|
||||||
div.controls{
|
div.controls{
|
||||||
div.control {
|
div.control {position:absolute;z-index:100;width:10vw;height:20vh;display:flex;justify-content: center; align-items: center;}
|
||||||
position:absolute;
|
div.left { top:0;left:0;height:100vh; }
|
||||||
z-index:100;
|
div.right { top:0;right:0;height:100vh; }
|
||||||
width:22vw;
|
div.top { top:0;left:0;width:100vw; }
|
||||||
height:18vh;
|
div.bottom { bottom:0;left:0;width:100vw; }
|
||||||
display:flex;justify-content: center; align-items: center;}
|
|
||||||
div.left { top:0;left:4.5vw;height:100vh;max-width:80px; }
|
|
||||||
div.right { top:0;right:4.5vw;height:100vh;max-width:80px; }
|
|
||||||
div.top { top:5.5vh;left:0;width:100vw;padding-top:2vh;max-height:80px; }
|
|
||||||
div.bottom { bottom:6vh;left:0;width:100vw;max-height:80px; }
|
|
||||||
}
|
|
||||||
|
|
||||||
div.controls.end {
|
|
||||||
justify-content: end;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
div.arrow {
|
div.arrow {
|
||||||
display:inline-flex;
|
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
min-width:75px;
|
min-width:75px;
|
||||||
min-height:75px;
|
min-height:75px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
// font-size:2vw;
|
|
||||||
font-size:calc(12px + 2vw);
|
|
||||||
font-weight:bold;
|
|
||||||
div.rotate-up { transform:rotate(90deg);}
|
|
||||||
div.rotate-down { transform:rotate(-90deg);}
|
|
||||||
img { max-width:60px; max-height:60px; margin:auto;}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* header */
|
|
||||||
div.header {
|
|
||||||
h1 { font-size:calc(12px + 2vw); cursor:pointer;}
|
|
||||||
color:$primary;
|
|
||||||
position:absolute;z-index:200;top:0;left:0;height:10vh;
|
|
||||||
// width:100vw;
|
|
||||||
max-width:100%;
|
|
||||||
text-align:left;margin-left:5vw;margin-top:3vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
.muted { opacity:0.6; text-decoration:line-through;;}
|
|
||||||
.audioElement { margin:0 20px;
|
|
||||||
@media screen and (max-width: $breakpoint-phone) { display:none;}
|
|
||||||
}
|
|
||||||
|
|
||||||
div.footer {
|
|
||||||
overflow:hidden;
|
|
||||||
color:$primary;
|
|
||||||
position:absolute;z-index:200;bottom:0;left:0;height:10vh;
|
|
||||||
max-width:50%;
|
|
||||||
text-align:left;margin-left:5vw;margin-top:3vw;
|
|
||||||
span.mute { cursor:pointer;}
|
|
||||||
}
|
|
||||||
|
|
||||||
div.footer.right {
|
|
||||||
left:auto;
|
|
||||||
right:0;
|
|
||||||
}
|
|
||||||
div.menu {
|
|
||||||
z-index:200;cursor:pointer;left:auto;
|
|
||||||
right:0;padding-right:5vw;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
div.video-player {
|
|
||||||
position:absolute;
|
|
||||||
width:100vw;
|
|
||||||
height:100vh;
|
|
||||||
z-index:300;
|
|
||||||
align-items: center;
|
|
||||||
display:flex;
|
|
||||||
background:rgba(0,0,0,0.5);
|
|
||||||
top:0;
|
|
||||||
* { margin:auto;}
|
|
||||||
#video-player-content { max-width:100%; max-height:100%; display:inherit; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/** logo **/
|
|
||||||
div.logo img {
|
|
||||||
padding:10px;
|
|
||||||
max-height:40px;
|
|
||||||
max-width:200px;
|
|
||||||
}
|
}
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
|
import { Component, OnInit } from '@angular/core';
|
||||||
import { ClientService } from '../client.service';
|
import { ClientService } from '../client.service';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import {environment} from '../../environments/environment';
|
import {environment} from '../../environments/environment';
|
||||||
import { ActivatedRoute, Router } from '@angular/router';
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
import { PlayerService } from '../player.service';
|
|
||||||
import Player from '@vimeo/player';
|
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -15,50 +15,16 @@ import Player from '@vimeo/player';
|
|||||||
export class SlideComponent implements OnInit {
|
export class SlideComponent implements OnInit {
|
||||||
|
|
||||||
slide: any;
|
slide: any;
|
||||||
muted:boolean = false;
|
|
||||||
showInit:boolean = true;
|
|
||||||
|
|
||||||
/*player info*/
|
|
||||||
duration=""
|
|
||||||
currentTime=""
|
|
||||||
audio_title="Streaming from Beire"
|
|
||||||
|
|
||||||
/* video player */
|
|
||||||
showVideo = "none";
|
|
||||||
videoPlayer:any;
|
|
||||||
_videoID:string;
|
|
||||||
//@ViewChild('vimeoPlayer') vimeoPlayer: ElementRef;
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private clientService:ClientService,
|
private clientService:ClientService,
|
||||||
private route: ActivatedRoute,
|
private route: ActivatedRoute,
|
||||||
private router: Router,
|
private router: Router,
|
||||||
private playerService:PlayerService,
|
) {}
|
||||||
) {
|
|
||||||
|
|
||||||
/* subscribe timer */
|
|
||||||
playerService.audio_current_time$
|
|
||||||
.subscribe(
|
|
||||||
(res:any) => {
|
|
||||||
this.duration = res.duration;
|
|
||||||
this.currentTime = res.currentTime;
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
playerService.audio_title$
|
|
||||||
.subscribe(
|
|
||||||
(res:any) => {
|
|
||||||
this.audio_title = res;
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
// play stream
|
|
||||||
this.play();
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (e) => { this.onKeydown(e) });
|
document.addEventListener('keydown', (e) => { this.onKeydown(e) });
|
||||||
|
//document.addEventListener('keydown', (e) => { console.log(e)})
|
||||||
|
|
||||||
this.route.params.subscribe(
|
this.route.params.subscribe(
|
||||||
params => {
|
params => {
|
||||||
@ -72,39 +38,6 @@ export class SlideComponent implements OnInit {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getVideoId():string {
|
|
||||||
return this._videoID;
|
|
||||||
}
|
|
||||||
|
|
||||||
showVideoVimeo(id:string) {
|
|
||||||
|
|
||||||
var options = {loop: false, id: id, responsive: false, autoplay: true};
|
|
||||||
|
|
||||||
if (this.videoPlayer && this.getVideoId() != id) { this.videoPlayer = this.videoPlayer.destroy();}
|
|
||||||
else if ( this.getVideoId() == id ) {
|
|
||||||
//this.videoPlayer.requestFullscreen();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.videoPlayer = new Player('video-player-content', options);
|
|
||||||
this.showVideo = "flex"
|
|
||||||
this.videoPlayer.on('play', () => {
|
|
||||||
this._videoID = id;
|
|
||||||
this.videoPlayer.getFullscreen().then( (f) => {
|
|
||||||
//if (!f) { this.videoPlayer.requestFullscreen(); }
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
this.videoPlayer.on('ended', () => { this.stopVideo(); });
|
|
||||||
this.videoPlayer.on('fullscreenchange', (data) => { if (!data.fullscreen) { this.stopVideo(); } })
|
|
||||||
}
|
|
||||||
|
|
||||||
stopVideo() {
|
|
||||||
this.videoPlayer.pause().then( () => {
|
|
||||||
this.mute(); //unmute
|
|
||||||
this.showVideo = "none";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
getFeaturedImage(): string {
|
getFeaturedImage(): string {
|
||||||
return environment.uriAPI+"items/"+this.slide.name+"/"+this.slide.featuredImage;
|
return environment.uriAPI+"items/"+this.slide.name+"/"+this.slide.featuredImage;
|
||||||
}
|
}
|
||||||
@ -115,6 +48,7 @@ export class SlideComponent implements OnInit {
|
|||||||
//ArrowRight
|
//ArrowRight
|
||||||
//ArrowUp
|
//ArrowUp
|
||||||
//ArrowDown
|
//ArrowDown
|
||||||
|
console.log(e)
|
||||||
switch (e.code) {
|
switch (e.code) {
|
||||||
case "ArrowLeft" :
|
case "ArrowLeft" :
|
||||||
this.left(e);
|
this.left(e);
|
||||||
@ -126,37 +60,12 @@ export class SlideComponent implements OnInit {
|
|||||||
this.up(e); break;
|
this.up(e); break;
|
||||||
case "ArrowDown" :
|
case "ArrowDown" :
|
||||||
this.down(e); break;
|
this.down(e); break;
|
||||||
case "Space" :
|
|
||||||
this.playUrl(); break;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
left(e) { if (this.slide.o) this.router.navigate(['/', this.slide.o]);}
|
left(e) { this.router.navigate(['/', this.slide.o]);}
|
||||||
right(e) { if (this.slide.e) this.router.navigate(['/', this.slide.e]); }
|
right(e) { this.router.navigate(['/', this.slide.e]); }
|
||||||
up(e) { if (this.slide.n) this.router.navigate(['/', this.slide.n]); }
|
up(e) { this.router.navigate(['/', this.slide.n]); }
|
||||||
down(e) { if (this.slide.s) this.router.navigate(['/', this.slide.s]); }
|
down(e) { this.router.navigate(['/', this.slide.s]); }
|
||||||
|
|
||||||
mute() {
|
|
||||||
this.playerService.mute();
|
|
||||||
this.muted = !this.muted;
|
|
||||||
}
|
|
||||||
|
|
||||||
play() {
|
|
||||||
this.playerService.playList()
|
|
||||||
}
|
|
||||||
|
|
||||||
playUrl() {
|
|
||||||
/* stop audio */
|
|
||||||
if (this.slide.title === this.audio_title) { this.playerService.playList() }
|
|
||||||
/* playVideo */
|
|
||||||
if (this.slide.featuredVideo) { this.mute(); this.showVideoVimeo(this.slide.featuredVideo); }
|
|
||||||
/* playAudio */
|
|
||||||
else if (this.slide.featuredAudio) { this.playerService.playUrl(this.slide.featuredAudio, this.slide.title); }
|
|
||||||
}
|
|
||||||
|
|
||||||
forcePlay() {
|
|
||||||
this.showInit = false;
|
|
||||||
this.play();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 22 KiB |
Before Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 7.8 KiB |
Before Width: | Height: | Size: 9.6 KiB |
Before Width: | Height: | Size: 142 KiB |
Before Width: | Height: | Size: 14 MiB |
@ -1,7 +0,0 @@
|
|||||||
{ "data" : [
|
|
||||||
{"title":"Traktorea", "url":"https://www.soinumapa.net/wp-content/uploads/2020/10/20201017_TRACTOR_ARANDO.mp3"},
|
|
||||||
{"title":"Kanpaiak", "url":"https://www.soinumapa.net/wp-content/uploads/2020/10/20201017_BEIRE_CAMPANAS_EDIT.mp3"},
|
|
||||||
{"title":"Erlezaintza", "url":"https://www.soinumapa.net/wp-content/uploads/2020/10/20200909_ABEJAS_COMER_APICULTOR_DIA_BEIRE_ARGUEDAS.mp3"},
|
|
||||||
{"title":"Uxue Santutegia", "url":"https://www.soinumapa.net/wp-content/uploads/2020/10/20200912_INTERIOR_IGLESIA_PUERTA_UJUE_EDITED.mp3"}
|
|
||||||
]
|
|
||||||
}
|
|
@ -1,5 +1,3 @@
|
|||||||
export const environment = {
|
export const environment = {
|
||||||
production: true,
|
production: true
|
||||||
uriAPI: "https://public.audio-lab.org/beireapi/",
|
|
||||||
ListURL: "https://beire.soinumapa.net/assets/playlist.json"
|
|
||||||
};
|
};
|
||||||
|
@ -4,8 +4,7 @@
|
|||||||
|
|
||||||
export const environment = {
|
export const environment = {
|
||||||
production: false,
|
production: false,
|
||||||
uriAPI: "https://public.audio-lab.org/beireapi/",
|
uriAPI: "https://public.audio-lab.org/beireapi/"
|
||||||
ListURL: "http://localhost:4200/assets/playlist.json"
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
BIN
src/favicon.ico
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 948 B |
@ -2,14 +2,10 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Beire - Una propuesta de Maite Redondo y Luca Rullo</title>
|
<title>BeireFrontend</title>
|
||||||
<base href="/">
|
<base href="/">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
<meta name="description" content="Una propuesta de Maite Redondo y Luca Rullo para el programa Landarte, Cultura contemporánea y ruralidad. Con la ayuda de JESUSA — PAZ — LOLA — JUANA — CATALINA — ARACELI — YASMIN — ANGÉLICA — MIREN — NAIARA — NOA — TERE — AMAYA — IDOIA — PATRICIA — DAVID — LUIS MARI — PAULA — DAVID — JUAN — MARI CARMEN — AINARA — MARGARITA RUBIO — FERMINA [BURRA] — AZAHARA — ASIER — JUDITH — MARKEL — ION — NIEZYELA — SAAD — ALICIA — OIHANE — JOAQUIN — JAVIER GORRIA — ALFONSO — MARI — PEPÍN — BERTA — JOSÉ PIERRE — BRUNO — VIRGINIA — POLI — VALENTÍN — CHARO — CECILIA — FERMINA — FLAVIO — CASINO DE BEIRE — MARI — PEDRO LUIS — HILDA — BAR BARIAIN — ANGÉLICA — MARGARITA ONGAY — VICTOR — EDUARDO — CARLOS — IGNACIO — ESCALERAS ARIZONA — ESCUELA DE MÚSICA DE OLITE — GERMÁN — JAVIER CLEMENTE — AMETS — MIKEL — GARAZI — PERU — NURIA — JON — ANNE — MARC">
|
|
||||||
<meta name="keywords" content="beire, landarte, navarra, nafarroa, cultura, documental, interactivo, documentary, interactive, maite redondo, luca rullo">
|
|
||||||
<meta name="author" content="Maite Redondo y Luca Rullo">
|
|
||||||
<link rel="manifest" href="manifest.json" />
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<app-root></app-root>
|
<app-root></app-root>
|
||||||
|
@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"display": "standalone",
|
|
||||||
"orientation": "landscape-primary"
|
|
||||||
}
|
|
128
src/styles.scss
@ -1,132 +1,10 @@
|
|||||||
/* You can add global styles to this file, and also import other style files */
|
/* You can add global styles to this file, and also import other style files */
|
||||||
|
|
||||||
//@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Reenie+Beanie&family=Staatliches&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Raleway&family=Reenie+Beanie&family=Staatliches&display=swap');
|
||||||
@import './_variables.scss';
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family:"Swiss Bold";
|
|
||||||
src:url('assets/font/swissboldcondensed.woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family:"Swiss Light";
|
|
||||||
src:url('assets/font/swisslight.woff2');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family:"Helvetica";
|
|
||||||
src:url('assets/font/HelvLight Regular.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family:"Helvetica Bold";
|
|
||||||
src:url('assets/font/HelveticaWorld-Bold.ttf');
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family:"Frutiger";
|
|
||||||
src:url('assets/font/FrutigerLTStd-Cn.otf');
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin:0;
|
margin:0;
|
||||||
padding:0;
|
padding:0;
|
||||||
background-color:$background-color;
|
background-color:#1c1c1c;
|
||||||
cursor:crosshair;
|
cursor:none;
|
||||||
font-family:"Frutiger";
|
|
||||||
}
|
|
||||||
|
|
||||||
*:focus{
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
// font-family:"Staatliches",sans-serif;
|
|
||||||
text-transform:uppercase;
|
|
||||||
font-family:"Frutiger";
|
|
||||||
font-weight:100;
|
|
||||||
font-size:2vw;
|
|
||||||
// opacity:0.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size:3vw;
|
|
||||||
font-family:"Frutiger",serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-family:"Frutiger";
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
text-decoration:none;
|
|
||||||
font-weight:bold;
|
|
||||||
color:$primary;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* animations css */
|
|
||||||
|
|
||||||
@keyframes heartBeat {
|
|
||||||
0% {
|
|
||||||
transform: scale(none);
|
|
||||||
-webkit-transform: scale(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: scale(1.2);
|
|
||||||
-webkit-transform: scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
30% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
-webkit-transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
45% {
|
|
||||||
transform: scale(1.25);
|
|
||||||
-webkit-transform: scale(1.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: scale(none);
|
|
||||||
-webkit-transform: scale(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(none);
|
|
||||||
-webkit-transform: scale(none);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes heartBeat {
|
|
||||||
0% {
|
|
||||||
transform: scale(none);
|
|
||||||
-webkit-transform: scale(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
20% {
|
|
||||||
transform: scale(1.2);
|
|
||||||
-webkit-transform: scale(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
30% {
|
|
||||||
transform: scale(1.05);
|
|
||||||
-webkit-transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
45% {
|
|
||||||
transform: scale(1.25);
|
|
||||||
-webkit-transform: scale(1.25);
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: scale(none);
|
|
||||||
-webkit-transform: scale(none);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: scale(none);
|
|
||||||
-webkit-transform: scale(none);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|