2,373 package-lock.json
View file

Large diffs are not rendered by default.

14 package.json
View file
@@ -12,31 +12,29 @@
},
"private": true,
"dependencies": {
"@angular/cli": "1.6.8",
"@angular/compiler-cli": "^5.2.0",
"@angular/animations": "^5.2.0",
"@angular/animations": "^5.2.7",
"@angular/cdk": "^5.2.3",
"@angular/cli": "1.6.8",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/compiler-cli": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@angular/material": "^5.2.3",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@ng-bootstrap/ng-bootstrap": "^1.0.0",
"angular-material": "^1.1.7",
"bootstrap": "^4.0.0",
"core-js": "^2.4.1",
"less": "^3.0.1",
"list-files-in-dir": "^0.1.4",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19",
"typescript": "~2.5.3",
"@angular/language-service": "^5.2.0"
"zone.js": "^0.8.19"
},
"devDependencies": {

"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^6.0.101",
0 src/app/alerts/alerts.component.css
View file
Empty file.
8 src/app/alerts/alerts.component.html
View file

This file was deleted.

25 src/app/alerts/alerts.component.spec.ts
View file

This file was deleted.

38 src/app/alerts/alerts.component.ts
View file

This file was deleted.

2 src/app/app-routing.module.ts
View file
@@ -8,7 +8,7 @@ const routes: Routes = [
{ path: 'maps', component: MaplistComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'maps/detail/:mapName', component: MapdetailComponent }
{ path: 'maps/detail/:mapName', component: MapdetailComponent },
];

@NgModule({
38 src/app/app.component.html
View file
@@ -1,29 +1,15 @@
<nav class="navbar fixed-top navbar-toggleable-md navbar-default bg-faded">
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" routerLink="/dashboard">Project Reality: Statistics</a>

<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto" routerLinkActive="active">
<li class="nav-item">
<a class="nav-link" routerLink="maps">Maps</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="http://www.realitymod.com/mapgallery">Map Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.realitymod.com/prspy">PRSPY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://www.realitymod.com/">Forums</a>
</li>
</ul>
</div>
</nav>
<app-alerts></app-alerts>
<mat-toolbar class="toolbar">
<div class="header-text">
<a class="title" routerLink="/dashboard">Project Reality: Statistics</a>
</div>
<!-- Navigation -->
<nav class="links">
<a href="http://www.realitymod.com/mapgallery/" class="link">Map Gallery</a>
<a href="http://www.realitymod.com/prspy/" class="link">PRSPY</a>
<a href="http://www.realitymod.com/forum/" class="link">Forums</a>
</nav>
<span></span>
</mat-toolbar>
<router-outlet></router-outlet>


13 src/app/app.module.ts
View file
@@ -1,27 +1,28 @@
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AlertsComponent } from './alerts/alerts.component';
import { MaplistComponent } from './maplist/maplist.component';
import { AppRoutingModule } from './/app-routing.module';
import {RouterModule} from '@angular/router';
import { MapdetailComponent } from './mapdetail/mapdetail.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import {MapService} from './map.service';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatToolbarModule, MatGridListModule,
MatFormFieldModule, MatTableModule, MatSortModule , MatInputModule} from '@angular/material';

@NgModule({
declarations: [
AppComponent,
AlertsComponent,
MaplistComponent,
MapdetailComponent,
DashboardComponent
DashboardComponent,
],
imports: [
RouterModule, BrowserModule, HttpClientModule, NgbModule.forRoot(), AppRoutingModule
RouterModule, BrowserModule, BrowserAnimationsModule,
MatButtonModule, MatToolbarModule, HttpClientModule, MatInputModule, MatGridListModule,
MatFormFieldModule, MatTableModule, MatSortModule, AppRoutingModule
],
providers: [MapService],
bootstrap: [AppComponent]
2 src/app/dashboard/dashboard.component.css
View file
@@ -3,9 +3,9 @@
padding:0 !important;
margin-top:70px !important;
background: #333;
margin-top: 23px;
text-align:center;
margin-bottom: 0 !important;
color: white;
}

.btn-info{
10 src/app/dashboard/dashboard.component.html
View file
@@ -1,10 +1,6 @@
<div class="jumbotron">
<img src="../assets/logo.png">
<h1 class="display-3">Project Reality: Statistics</h1>
<p class="lead">Data gathered from public Project Reality servers.</p>
<hr class="my-4">
<p class="lead">
<a class="btn btn-info btn-lg" routerLink="/maps">Map Statistics</a>
</p>
<hr class="my-4">
<h2 class="mat-display-2">Project Reality: Statistics</h2>
<h3 class="mat-h3">Data gathered from public Project Reality servers.</h3>
<button mat-raised-button routerLink="/maps">Map Statistics</button>
</div>
28 src/app/mapdetail/mapdetail.component.css
View file
@@ -1,23 +1,15 @@
tr.route td{
background-color: rgba(191, 183, 183, 0.78);
tr td{
background-color: #424242;
color:rgba(255, 255, 255, 0.7);
font-size:14px;
padding: 12px;
border-bottom: 1px solid rgb(97, 97, 97);
}
tr.layer td{
background-color: rgba(159, 153, 153, 0.78);
th {
font-size:14px;
}

tr.gamemode td{
background-color: rgba(120, 116, 116, 0.78);
}
tr.map td{
background-color: rgba(94, 89, 89, 0.78);
}

tr.header td, th{
color: #d8d8d8;
border: transparent;
}
.material-icons {
font-size: 14px; /* Preferred icon size */

.btn-info{
background: #39c;
border: #39c;
}
115 src/app/mapdetail/mapdetail.component.html
View file
@@ -1,61 +1,64 @@
<div *ngIf="level">
<h1 class="display-4">{{mapName}} details</h1>
<table class="table">
<thead>
<tr class="header">
<th scope="col"></th>
<th scope="col"># Played</th>
<th scope="col">Avg. Duration</th>
<th scope="col">Avg. Tickets Team 1</th>
<th scope="col">Avg. Tickets Team 2</th>
<th scope="col"># Wins Team 1</th>
<th scope="col"># Wins Team 2</th>
</tr>
</thead>
<tbody>
<tr class="map">
<td><b>{{mapName}}</b></td>
<td>{{level.timesPlayed}}</td>
<td>{{level.averageDuration.toFixed() | number}} min</td>
<td>{{level.averageTicketsTeam1}}</td>
<td>{{level.averageTicketsTeam2}}</td>
<td>{{level.winsTeam1}} ({{level.winsTeam1 / level.timesPlayed * 100 | number}}%)</td>
<td>{{level.winsTeam2}} ({{level.winsTeam2 / level.timesPlayed * 100 | number}}%)</td>
</tr>
<ng-template ngFor let-gamemode [ngForOf]= "level.gameModes" let-i="index">
<tr class="gamemode">
<td><i>&nbsp;{{gamemode.name}}</i></td>
<td>{{gamemode.timesPlayed}}</td>
<td>{{gamemode.averageDuration.toFixed()}} min</td>
<td>{{gamemode.averageTicketsTeam1}}</td>
<td>{{gamemode.averageTicketsTeam2}}</td>
<td>{{gamemode.winsTeam1}} ({{gamemode.winsTeam1 / gamemode.timesPlayed * 100 | number}}%)</td>
<td>{{gamemode.winsTeam2}} ({{gamemode.winsTeam2 / gamemode.timesPlayed * 100 | number}}%)</td>
</tr>
<ng-template ngFor let-layer [ngForOf]= "gamemode.layers" let-j="index">
<tr class="layer">
<td>&nbsp;&nbsp;&nbsp;{{layer.name}}</td>
<td>{{layer.timesPlayed}}</td>
<td>{{layer.averageDuration.toFixed()}} min</td>
<td>{{layer.averageTicketsTeam1}}</td>
<td>{{layer.averageTicketsTeam2}}</td>
<td>{{layer.winsTeam1}} ({{layer.winsTeam1 / layer.timesPlayed * 100 | number}}%)</td>
<td>{{layer.winsTeam2}} ({{layer.winsTeam2 / layer.timesPlayed * 100 | number}}%)</td>
<br>
<h1 class="mat-display-1">{{mapName}} details </h1>
<div class="shadow-z-1">
<table class="table table-hover">
<thead>
<tr class="header">
<th scope="col"></th>
<th scope="col"># Played</th>
<th scope="col">Avg. Duration</th>
<th scope="col">Avg. Tickets Team 1</th>
<th scope="col">Avg. Tickets Team 2</th>
<th scope="col"># Wins Team 1</th>
<th scope="col"># Wins Team 2</th>
</tr>
<ng-template ngFor let-route [ngForOf]= "layer.routes" let-m="index">
<tr class="route">
<td>&nbsp;&nbsp;&nbsp;&nbsp;{{route.id}}</td>
<td>{{route.timesPlayed}}</td>
<td>{{route.averageDuration.toFixed()}} min</td>
<td>{{route.averageTicketsTeam1}}</td>
<td>{{route.averageTicketsTeam2}}</td>
<td>{{route.winsTeam1}} ({{route.winsTeam1 / route.timesPlayed * 100 | number}}%)</td>
<td>{{route.winsTeam2}} ({{route.winsTeam2 / route.timesPlayed * 100 | number}}%)</td>
</thead>
<tbody>
<tr>
<td>{{mapName}}</td>
<td>{{level.timesPlayed}}</td>
<td>{{level.averageDuration.toFixed() | number}} min</td>
<td>{{level.averageTicketsTeam1}}</td>
<td>{{level.averageTicketsTeam2}}</td>
<td>{{level.winsTeam1}} ({{level.winsTeam1 / level.timesPlayed * 100 | number}}%)</td>
<td>{{level.winsTeam2}} ({{level.winsTeam2 / level.timesPlayed * 100 | number}}%)</td>
</tr>
<ng-template ngFor let-gamemode [ngForOf]="level.gameModes" let-i="index">
<tr>
<td>&nbsp;<i class="material-icons">subdirectory_arrow_right</i>{{gamemode.name}}</td>
<td>{{gamemode.timesPlayed}}</td>
<td>{{gamemode.averageDuration.toFixed()}} min</td>
<td>{{gamemode.averageTicketsTeam1}}</td>
<td>{{gamemode.averageTicketsTeam2}}</td>
<td>{{gamemode.winsTeam1}} ({{gamemode.winsTeam1 / gamemode.timesPlayed * 100 | number}}%)</td>
<td>{{gamemode.winsTeam2}} ({{gamemode.winsTeam2 / gamemode.timesPlayed * 100 | number}}%)</td>
</tr>
<ng-template ngFor let-layer [ngForOf]="gamemode.layers" let-j="index">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="material-icons">subdirectory_arrow_right</i>{{layer.name}}</td>
<td>{{layer.timesPlayed}}</td>
<td>{{layer.averageDuration.toFixed()}} min</td>
<td>{{layer.averageTicketsTeam1}}</td>
<td>{{layer.averageTicketsTeam2}}</td>
<td>{{layer.winsTeam1}} ({{layer.winsTeam1 / layer.timesPlayed * 100 | number}}%)</td>
<td>{{layer.winsTeam2}} ({{layer.winsTeam2 / layer.timesPlayed * 100 | number}}%)</td>
</tr>
<ng-template ngFor let-route [ngForOf]="layer.routes" let-m="index">
<tr>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="material-icons">subdirectory_arrow_right</i>{{route.id}}</td>
<td>{{route.timesPlayed}}</td>
<td>{{route.averageDuration.toFixed()}} min</td>
<td>{{route.averageTicketsTeam1}}</td>
<td>{{route.averageTicketsTeam2}}</td>
<td>{{route.winsTeam1}} ({{route.winsTeam1 / route.timesPlayed * 100 | number}}%)</td>
<td>{{route.winsTeam2}} ({{route.winsTeam2 / route.timesPlayed * 100 | number}}%)</td>
</tr>
</ng-template>
</ng-template>
</ng-template>
</ng-template>
</ng-template>
</tbody>
</table>
<button class="btn btn-info" routerLink="/maps">Back to maps list</button>
</tbody>

</table>
</div>
</div>
12 src/app/mapdetail/mapdetail.component.ts
View file
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Level } from '../level';
import { ActivatedRoute } from '@angular/router';
import {MapService} from '../map.service';
import {MatTableDataSource} from '@angular/material';

@Component({
selector: 'app-mapdetail',
@@ -10,15 +11,20 @@ import {MapService} from '../map.service';
})
export class MapdetailComponent implements OnInit {

level: Level;
level;
mapName: string;
data: object;
dataSource;
displayedColumns = ['name', 'timesPlayed', 'averageDuration', 'averageTicketsTeam1',
'averageTicketsTeam2', 'winsTeam1', 'winsTeam2'];

constructor( private route: ActivatedRoute,
private mapService: MapService) { }
constructor( private route: ActivatedRoute, private mapService: MapService) {
this.dataSource = new MatTableDataSource();
}

ngOnInit() {
this.getLevel();
this.dataSource = new MatTableDataSource(this.level);
}

getLevel(): void {
29 src/app/maplist/maplist.component.css
View file
@@ -1,9 +1,3 @@
a, a:hover, a:active, a:visited { color: #39c; }

tr.header td, th{
color: #d8d8d8;
}

.stat {
margin:20px auto;
text-align:center;
@@ -26,3 +20,26 @@ tr.header td, th{
font-size:12px;
color: #c0c0c0;
}

.mat-cell {
color: #d7d7d7;
}
.mat-header-row, .mat-row{
color: #d7d7d7;
}

a {
color:#39c;
}

.mat-placeholder {
color: white;
}

.mat-input-underline {
background-color: white;
}

.mat-header-cell{
font-size:14px;
}
107 src/app/maplist/maplist.component.html
View file
@@ -1,62 +1,85 @@
<div><h1 class="display-4">Maps</h1>
<p class="lead">
Last generated on {{maplist.date}}. <br />
Click on a map's name for detailed statistics.
</p>
<div class="container">
<div class="row">
<div>
<mat-grid-list cols="4" rowHeight="160px">
<mat-grid-tile>
<div class="col stat">
<div class="milestone-counter">
<i class="fas fa-map fa-3x"></i>
<span class="stat-count highlight">{{maplist.maps.length}}<br> maps</span>
<h1 class="stat-count mat-h1">{{maplist.maps.length}}<br> maps</h1>
</div>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="col stat">
<div class="milestone-counter">
<i class="fas fa-hashtag fa-3x"></i>
<span class="stat-count highlight">{{roundsplayed}}<br>Total rounds</span>
<h1 class="stat-count mat-h1">{{roundsplayed}}<br>Total rounds</h1>
</div>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="col stat">
<div class="milestone-counter">
<i class="fas fa-balance-scale fa-3x"></i>
<span class="stat-count highlight">{{team1balance | number}}% vs {{team2balance | number}}%<br>Team 1 vs Team 2 </span>
<h1 class="stat-count mat-h1">{{team1balance | number}}% vs {{team2balance | number}}%<br>Team 1 vs Team 2 </h1>
</div>
</div>
</mat-grid-tile>
<mat-grid-tile>
<div class="col stat">
<div class="milestone-counter">
<i class="fas fa-stopwatch fa-3x"></i>
<span class="stat-count highlight">{{averagetime | number}} min<br>Average Duration</span>
<h1 class="stat-count mat-h1">{{averagetime | number}} min<br>Average Duration</h1>
</div>
</div>
</div>
</div>
<table class="table">
<thead>
<tr class="header">
<th scope="col">Name</th>
<th scope="col"># Played</th>
<th scope="col">Avg. Duration</th>
<th scope="col">Avg. Tickets Team 1</th>
<th scope="col">Avg. Tickets Team 2</th>
<th scope="col"># Wins Team 1</th>
<th scope="col"># Wins Team 2</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-level [ngForOf]= "maplist.maps" let-i="index">
<tr class="gamemode">
<th><a routerLink="/maps/detail/{{level.name}}">
<span>{{level.name}}</span>
</a></th>
<td>{{level.timesPlayed}}</td>
<td>{{level.averageDuration.toFixed()}} min</td>
<td>{{level.averageTicketsTeam1}}</td>
<td>{{level.averageTicketsTeam2}}</td>
<td>{{level.winsTeam1}} ({{level.winsTeam1 / level.timesPlayed * 100 | number}}%)</td>
<td>{{level.winsTeam2}} ({{level.winsTeam2 / level.timesPlayed * 100 | number}}%)</td>
</tr>
</ng-template>
</tbody>
</table>
</div>
</mat-grid-tile></mat-grid-list></div>

<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter Map">
</mat-form-field>

<p >
Last generated on {{maplist.date}}. Click on a map's name for detailed statistics.
</p>
<mat-table [dataSource]="dataSource" matSort>

<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
<mat-cell *matCellDef="let row"> <a routerLink="/maps/detail/{{row.name}}">
<span>{{row.name}}</span>
</a> </mat-cell>
</ng-container>

<ng-container matColumnDef="timesPlayed">
<mat-header-cell *matHeaderCellDef mat-sort-header> # Played </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.timesPlayed}} </mat-cell>
</ng-container>

<ng-container matColumnDef="averageDuration">
<mat-header-cell *matHeaderCellDef mat-sort-header> Average Duration </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.averageDuration.toFixed()}} min </mat-cell>
</ng-container>

<ng-container matColumnDef="averageTicketsTeam1">
<mat-header-cell *matHeaderCellDef mat-sort-header> Average Tickets Team 1 </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.averageTicketsTeam1}} </mat-cell>
</ng-container>

<ng-container matColumnDef="averageTicketsTeam2">
<mat-header-cell *matHeaderCellDef mat-sort-header> Average Tickets Team 2 </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.averageTicketsTeam2}} </mat-cell>
</ng-container>

<ng-container matColumnDef="winsTeam1">
<mat-header-cell *matHeaderCellDef> Wins Team 1 </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.winsTeam1}} ({{row.winsTeam1 / row.timesPlayed * 100 | number}}%) </mat-cell>
</ng-container>

<ng-container matColumnDef="winsTeam2">
<mat-header-cell *matHeaderCellDef> Wins Team 2 </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.winsTeam2}} ({{row.winsTeam2 / row.timesPlayed * 100 | number}}%) </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
32 src/app/maplist/maplist.component.ts
View file
@@ -1,14 +1,12 @@
import { Component, OnInit } from '@angular/core';
import 'rxjs/add/operator/map';
import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {MatSort, MatTableDataSource} from '@angular/material';
import {MapService} from '../map.service';
import {Level} from '../level';

@Component({
selector: 'app-maplist',
templateUrl: './maplist.component.html',
styleUrls: ['./maplist.component.css']
})
export class MaplistComponent implements OnInit {
export class MaplistComponent implements OnInit, AfterViewInit {

maplist;
roundsplayed = 0;
@@ -17,13 +15,18 @@ export class MaplistComponent implements OnInit {
totalteam1 = 0;
totalteam2 = 0;
averagetime = 0;
constructor(private mapService: MapService) {}
displayedColumns = ['name', 'timesPlayed', 'averageDuration', 'averageTicketsTeam1',
'averageTicketsTeam2', 'winsTeam1', 'winsTeam2'];
dataSource;

@ViewChild(MatSort) sort: MatSort;

constructor(private mapService: MapService) {
this.dataSource = new MatTableDataSource();
}

ngOnInit() {
this.getAllLevels();
for (const map of this.maplist.maps) {
this.roundsplayed = this.roundsplayed + map.timesPlayed;
}
}

getdata(maplist) {
@@ -42,9 +45,20 @@ export class MaplistComponent implements OnInit {
this.averagetime = this.averagetime / maplist.maps.length;
this.team1balance = parseFloat((this.totalteam1 / this.roundsplayed * 100).toFixed(2));
this.team2balance = parseFloat((this.totalteam2 / this.roundsplayed * 100).toFixed(2));
this.dataSource = new MatTableDataSource(this.maplist.maps);
}

public getAllLevels(): void {
this.mapService.getAllLevels().subscribe(maplist => this.getdata(maplist));
}

ngAfterViewInit() {
this.dataSource.sort = this.sort;
}

applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
this.dataSource.filter = filterValue;
}
}
7 src/index.html
View file
@@ -7,14 +7,11 @@

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700'>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

</head>
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
19 src/projectreality.scss
View file
@@ -0,0 +1,19 @@
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
// Define a theme.
$primary: mat-palette($mat-light-blue, 700, 500, 900);
$accent: mat-palette($mat-blue-grey, A200, A100, A400);

$theme: mat-dark-theme($primary, $accent);

// Include all theme styles for the components.
@include angular-material-theme($theme);
118 src/styles.css
View file
@@ -1,60 +1,86 @@
body {
background-color: #333;
color: white;
}
/* navbar */
.navbar-default {
background-color: #111;
border-color: #111;
height: 70px;
}
/* Title */
.navbar-default .navbar-brand {
color: #39c;
font-size: 20px;
font-weight: 400;
font-family: 'Roboto', sans-serif;
display: table;
margin: 0 auto;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: rgb(51, 51, 51);
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #39c;

p{
color:white;
}
h1{
color:white;
}

.nav-link:hover {
background-color: rgba(51, 50, 52, 0.99);
color: #39c;
transition: background .2s;
transition-property: background;
transition-duration: 0.2s;
transition-timing-function: initial;
transition-delay: initial;
}
/* Link */
.navbar-default .navbar-nav > li > a {
display: block;
padding: 15px;
color: #39c;
.mat-button, .mat-fab, .mat-icon-button, .mat-mini-fab, .mat-raised-button {
color: black;
background: rgb(51, 153, 204);
}

.toolbar {
height: 48px;
background: #111111;
color: rgb(51, 153, 204);
-ms-flex-negative: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
padding: 0 25px;
align-items: center;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
z-index: 99;
position: relative;
}

i:hover{
background-color: rgba(255, 255,255, 0.1);
cursor:pointer;
border-radius: 50%;
}
.header-text {
width: 100%;
padding: 0 25px;
flex-shrink: 1;
overflow: hidden;
white-space: nowrap;
}

.navbar {
-webkit-box-shadow: -2px -9px 7px 12px rgba(0,0,0,0.4);
-moz-box-shadow: -2px -9px 7px 12px rgba(0,0,0,0.4);
box-shadow: -2px -9px 7px 12px rgba(0,0,0,0.4);

/* the rest of your styling */
a {
text-decoration: none;
}
.custom-toggler.navbar-toggler {
border-color: #39c;

.title {
white-space: nowrap;
color: rgb(51, 153, 204);
font-size: 20px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.02em;
font-weight: 400;
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#39c' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
.sub-title {
font-size: small;
}

.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#39c' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
nav.links {
display: flex;
flex-direction: row;
}

div {
padding-top: 4px;
padding-left: 10px;
padding-right: 10px;
a.link {
font-size: 16px;
padding: 15px;
color: inherit;
text-decoration: none;
transition: background 200ms;
transition: background .2s;
}
a.link .hover {
background-color: rgba(255, 255,255, 0.1);
transition: background .2s;
}
530 src/variables.less
View file

Large diffs are not rendered by default.