fic/server
Archived
1
0
Fork 0
Code Issues Pull requests 10 Releases Wiki Activity

Improve public screen page

Browse source
This commit is contained in:
nemunaire 2017-12-17 20:44:23 +01:00
commit 11a3fc9a49
7 changed files with 220 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/static/css/fic.css
View file

@ -25,6 +25,12 @@ body {
overflow-y: scroll;
}
.bg-public {
background-image: url('../img/logo-epita-bw.png');
background-repeat: no-repeat;
background-size: cover;
}
.beautiful {
font-family: "Linux Biolinum",Helvetica,Arial,sans-serif;
}

BIN
frontend/static/img/logo-epita-bw.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 220 KiB

1
frontend/static/js/common.js
View file

@ -29,6 +29,7 @@ angular.module("FICApp")
})
.filter("time", function() {
return function(input) {
input = Math.floor(input);
if (input == undefined) {
return "--";
} else if (input >= 10) {

22
frontend/static/js/public.js
View file

@ -38,7 +38,7 @@ angular.module("FICApp")
if (time.st > 0 && time.st <= srv_cur) {
remain = time.st + time.du - srv_cur;
} else if (time.st > 0) {
$rootScope.startIn = Math.floor(time.st - srv_cur);
$rootScope.startAt = time.st;
}
if (remain < 0) {
remain = 0;
@ -109,6 +109,26 @@ angular.module("FICApp")
refreshEvents()
$interval(refreshEvents, 2100);
})
.controller("CountdownController", function($scope, $interval) {
$scope.duration = 0;
$scope.init = function(end) {
console.log(end);
console.log(Date.parse(end)/1000);
$scope.initT(Date.parse(end)/1000);
}
$scope.initT = function(end) {
var time = angular.fromJson(sessionStorage.userService);
var srv_cur = (Date.now() + (time.cu * 1000 - time.he)) / 1000;
$scope.duration += Math.floor(end - srv_cur);
}
var stop = $interval(function() {
$scope.duration -= 1;
if ($scope.duration < -10)
$interval.cancel(stop);
}, 1000);
})
.controller("DataController", function($scope, $http, $rootScope, $interval) {
var refreshScene = function() {
$http.get("/public.json").then(function(response) {

67
frontend/static/public.html
View file

@ -14,7 +14,7 @@
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
<script src="/js/angular.min.js"></script>
</head>
<body class="bg-light" style="overflow: hidden;" class="container-fluid" ng-controller="DataController">
<body class="bg-light bg-public" style="overflow: hidden;" class="container-fluid" ng-controller="DataController">
<div class="row" style="margin:10px 0">
<div class="col-8">
<noscript>
@ -25,9 +25,9 @@
<div ng-repeat="(k,s) in scene" class="repeatedd-item" style="margin-bottom: 15px;">
<div class="card" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'init'">
<div class="card" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'teams'">
<div class="card-body">
<h1>Bienvenue au challenge forensic&nbsp;!</h1>
<h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1>
<p class="lead text-justify">
Avant de vous installer, venez récupérer votre clef USB auprès
de notre équipe. Elle contient le certificat qui vous permettra
@ -42,17 +42,19 @@
</div>
</div>
<div class="card border-success" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'countdown'">
<div class="card-header bg-success text-white">
<h3 style="margin:0"><strong>Le {{ settings.title }} est sur le point de commencer&nbsp;!</strong></h3>
<div class="card border-{{s.params.color}}" ng-if="s.type == 'countdown' && !s.params.hide">
<div class="card-header bg-{{s.params.color}} text-white" ng-if="s.params.title">
<h3 style="margin:0"><strong ng-bind="s.params.title"></strong></h3>
</div>
<div ng-controller="CountdownController" ng-init="s.params.end?init(s.params.end):initT(startAt)">
<div class="card-body text-center" style="font-size: 450%;" ng-if="duration > 0">{{ duration / 60 | time }} <span class="point">:</span> {{ duration % 60 | time }}</div>
<div class="card-body text-center" style="font-size: 450%;" ng-if="!duration || duration <= 0">{{ s.params.lead }}</div>
</div>
<div class="card-body text-center" style="font-size: 450%;" ng-if="startIn">{{ startIn }}</div>
<div class="card-body text-center" style="font-size: 450%;" ng-if="!startIn">Go, go, go&nbsp;!</div>
</div>
<div class="card" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'public'">
<div class="card-body">
<h1>Bienvenue au challenge forensic&nbsp;!</h1>
<h1 ng-if="!s.params.notitle">Bienvenue au challenge forensic&nbsp;!</h1>
<p class="lead text-justify">
Durant ce challenge, les équipes doivent <strong>remonter des scénarii
d'attaques</strong> auxquels nos systèmes d'information <strong>font faces
@ -72,18 +74,21 @@
<div class="card" ng-if="s.type == 'message' && !s.params.hide">
<div class="card-body">
<h1 ng-if="s.params.title"><strong>{{ s.params.title }}</strong></h1>
<p ng-if="s.params.lead" class="lead text-justify">{{ s.params.lead }}</p>
<h1 ng-if="s.params.title"><strong ng-bind="s.params.title"></strong></h1>
<p ng-if="s.params.lead" class="lead text-justify" ng-bind="s.params.lead"></p>
<p ng-bind-html="s.params.html" ng-if="s.params.html"></p>
<p ng-if="s.params.text">{{ s.params.text }}</p>
<p ng-if="s.params.text" ng-bind="s.params.text"></p>
</div>
</div>
<div class="card" ng-if="s.type == 'panel' && !s.params.hide">
<div class="card-header {{ s.params.kind }}" ng-if="s.params.title">
<h3 style="margin:0">{{ s.params.title }}</h3>
<div class="card border-{{ s.params.color }}" ng-if="s.type == 'panel' && !s.params.hide">
<div class="card-header bg-{{ s.params.color }} text-white" ng-if="s.params.title">
<h3 style="margin:0" ng-bind="s.params.title"></h3>
</div>
<div class="card-body" ng-if="s.params.text || s.params.lead">
<h4 ng-if="s.params.lead" class="card-title text-justify" ng-bind="s.params.lead"></h4>
<p class="card-text" ng-bind="s.params.text"></p>
</div>
<div class="card-body" ng-if="s.params.text">{{ s.params.text }}</div>
<div class="card-body" ng-if="s.params.html" ng-bind-html="s.params.html"></div>
</div>
@ -105,16 +110,16 @@
</div>
</div>
<div class="card" ng-if="s.type == 'table' && !s.params.hide">
<table class="table table-bordered table-striped table-sm">
<div ng-if="s.type == 'table' && !s.params.hide">
<table class="table table-striped table-sm">
<thead>
<tr>
<tr class="text-light">
<th class="frotated"></th>
<th class="rotated" ng-repeat="(tid,th) in themes" ng-if="s.params.themes.indexOf(tid-0) !== -1"><div><span>{{ th.name }}</span></div></th>
<th class="rotated" ng-repeat="(tid,th) in themes" ng-if="s.params.themes.indexOf(tid-0) !== -1"><div class="bg-dark"><span>{{ th.name }}</span></div></th>
</tr>
</thead>
<tbody ng-if="s.params.kind == 'levels'">
<tr ng-repeat="lvl in [1,2,3,4,5]">
<tbody class="table-bordered bg-secondary text-dark" ng-if="s.params.kind == 'levels'">
<tr ng-repeat="lvl in [1,2,3,4,5,6,7,8,9,10]">
<th class="text-center"><nobr>Niveau {{ lvl }}</nobr></th>
<td ng-repeat="(tid,th) in themes" class="text-center" ng-if="s.params.themes.indexOf(tid-0) !== -1">
<span ng-repeat="exercice in th.exercices" ng-if="$index == lvl-1 && (exercice.tried || lvl == 1)" ng-class="{'text-primary': exercice.solved == 0, 'text-success': exercice.solved >= 1, 'text-bold': exercice.solved >= 1, 'text-warning': exercice.solved == 0 && exercice.tried}">
@ -124,7 +129,7 @@
</td>
</tr>
</tbody>
<tbody ng-if="s.params.kind == 'teams'">
<tbody class="table-bordered bg-secondary text-dark" ng-if="s.params.kind == 'teams'">
<tr ng-repeat="team in rank | orderBy: 'rank' | limitTo: s.params.limit: s.params.begin" ng-if="s.params.teams.indexOf(team.id-0) !== -1" ng-controller="TeamController">
<th class="text-center">{{ team.rank }}<sup ng-if="team.rank == 1">er</sup><sup ng-if="team.rank > 1">e</sup><br><span style="text-overflow: ellipsis; display: inline-block; width: 82px;overflow: hidden;">{{ team.name }}</span></th>
<td ng-repeat="(tid,th) in themes" class="text-center" ng-if="mystats && s.params.themes.indexOf(tid-0) !== -1">
@ -135,12 +140,12 @@
</tbody>
<tfoot ng-if="s.params.total" ng-init="team={id:0}">
<tr ng-controller="TeamController">
<td class="text-right">
<td class="text-right text-dark">
<span ng-if="s.params.kind == 'levels'">Résolus</span>
<span ng-if="s.params.kind == 'teams'">Total résolus</span><br>
Tentatives
</td>
<td ng-repeat="(tid,th) in themes" class="text-center" ng-if="mystats && s.params.themes.indexOf(tid-0) !== -1">
<td class="table-bordered bg-dark" ng-repeat="(tid,th) in themes" class="text-center" ng-if="mystats && s.params.themes.indexOf(tid-0) !== -1">
<strong>{{ mystats.themes[tid].solved }}</strong><br>
{{ mystats.themes[tid].tries }}
</td>
@ -151,7 +156,7 @@
<div class="card" ng-if="s.type == 'rank' && !s.params.hide">
<table class="table table-bordered table-striped table-sm">
<thead>
<thead class="thead-dark">
<tr>
<th class="text-right">Place</th>
<th>Équipe</th>
@ -204,7 +209,7 @@
<div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 14vh" class="bg-primary">
<div class="carousel slide" id="carousel-logos" data-ride="carousel" data-interval="10500">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-item">
<div class="carousel-caption">
<a href="http://www.epita.fr/"><img src="/img/epita.png" alt="Epita" style="max-height:14vh"></a>
<img src="/img/rcc.png" alt="Réserve Citoyenne Cyberdéfense" style="height:14vh">
@ -212,7 +217,7 @@
</div>
<div class="carousel-item">
<div class="carousel-caption">
<h2>Bienvenue au challenge forensic&nbsp;!</h2>
<h2 style="margin: 17px">Bienvenue au challenge forensic&nbsp;!</h2>
</div>
</div>
<div class="carousel-item">
@ -252,9 +257,9 @@
</p>
</div>
</div>
<div class="carousel-item">
<div class="carousel-caption" style="padding: 3px 25px; width: 32vw;">
<table class="table table-bordered table-sm table-striped">
<div class="carousel-item active">
<div class="carousel-caption">
<table class="table table-sm table-striped">
<tbody>
<tr>
<td>11&nbsp;h</td>