From d60e9264e3f51ca794c9a611db09fab08a9bcbc0 Mon Sep 17 00:00:00 2001
From: Pierre-Olivier Mercier <nemunaire@nemunai.re>
Date: Mon, 10 Dec 2018 02:10:01 +0100
Subject: [PATCH] dashboard: perfect view

---
 dashboard/static/index.html | 56 ++++++++++++++++++-------------------
 frontend/static/css/fic.css |  8 ++++--
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/dashboard/static/index.html b/dashboard/static/index.html
index 2cef2e66..c725437f 100644
--- a/dashboard/static/index.html
+++ b/dashboard/static/index.html
@@ -271,7 +271,7 @@
 
       <div class="col-4">
 
-	<div ng-controller="EventsController" id="eventsList" style="position: fixed">
+	<div ng-controller="EventsController" id="eventsList" style="position:fixed;padding-right:10px">
 	  <div ng-repeat="e in events track by e.id" class="swap-animation" ng-cloak>
 	    <div class="card card-sm niceborder" ng-class="e.kind">
 	      <div class="card-header text-right">
@@ -283,8 +283,8 @@
 	    </div>
 	  </div>
 
-	  <div class="bg-light" ng-controller="CountdownController" style="box-shadow: 0px -5px 5px 5px #e9ecef; position: fixed; bottom: 109px; right: 0; width: 33vw;" ng-cloak>
-	    <div class="text-center text-dark" ng-if="time.hours === 0 || time.hours" style="margin-top: -5px; width: inherit">
+	  <div ng-controller="CountdownController" style="position: fixed; bottom: 109px; right: 0; width: 33vw; overflow: hidden; padding-top: 25px;" ng-cloak>
+	    <div class="bg-light text-center text-dark" ng-if="time.hours === 0 || time.hours" style="margin-top: -5px; width: inherit; box-shadow: white 0px -10px 15px 0px;">
 	      <div class="clock" ng-class="{expired: time.expired, end: time.end}" style="font-size: 50px">
 		<span id="hours">{{ time.hours | time }}</span>
 		<span class="point">:</span>
@@ -292,7 +292,7 @@
 		<span class="point">:</span>
 		<span id="sec">{{ time.seconds | time }}</span>
 	      </div>
-	      <div style="font-size: 18px; margin-top: -15px; text-shadow: 0 0 6px #446688;">
+	      <div style="font-size: 18px; margin-top: -15px; text-shadow: 0 0 6px #4eaee6;">
 		<span ng-if="!time.end && !startIn">Temps restant du challenge forensic</span>
 		<span ng-if="!time.end && startIn">Le challenge forensic va bientôt commencer&nbsp;!</span>
 		<span ng-if="time.end">Le challenge forensic est terminé&nbsp;!</span>
@@ -303,55 +303,55 @@
 	    </div>
 	  </div>
 
-	  <div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 110px" class="bg-dark">
-	    <div class="carousel slide" id="carousel-logos" data-ride="carousel" data-interval="10500">
-	      <div class="carousel-inner">
+	  <div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 110px;" class="bg-dark">
+	    <div class="carousel slide" id="carousel-logos" data-ride="carousel" data-interval="10500" style="height: inherit">
+	      <div class="carousel-inner" style="height: inherit">
 		<div class="carousel-item">
-		  <div class="carousel-caption">
-		    <a href="http://www.epita.fr/" class="mr-3"><img src="/img/epita.png" alt="Epita" style="max-height:110px"></a>
-		    <img src="/img/comcyber.png" alt="Réserves de cyberdéfense" style="height:110px">
+		  <div class="carousel-caption" style="display: table; width: 100%">
+		    <a href="http://www.epita.fr/" class="align-middle text-center" style="display: table-cell; width: 55%"><img src="/img/epita.png" alt="Epita" style="height:100px"></a>
+		    <a href="http://www.epita.fr/" class="align-middle text-center" style="display: table-cell; width: 45%"><img src="/img/comcyber.png" alt="Réserves de cyberdéfense" style="height:100px"></a>
 		  </div>
 		</div>
 		<div class="carousel-item">
-		  <div class="carousel-caption">
-		    <h2 style="margin: 17px">Bienvenue au challenge forensic&nbsp;!</h2>
+		  <div class="carousel-caption" style="padding: 15px; display: table;">
+		    <h2 class="align-middle" style="display: table-cell;">Bienvenue au challenge forensic&nbsp;!</h2>
 		  </div>
 		</div>
 		<div class="carousel-item">
-		  <div class="carousel-caption">
-		    <p class="text-justify text-bold" style="padding: 5px 16px; font-size: 111%">
+		  <div class="carousel-caption text-indent" style="padding: 0 15px; display: table; line-height: 1.3">
+		    <p class="text-justify text-bold align-middle" style="display: table-cell; font-size: 111%">
 		      Ce challenge met en scène des scénarii d'attaques auxquels
 		      nos systèmes d'information font face chaque jour.
 		    </p>
 		  </div>
 		</div>
 		<div class="carousel-item">
-		  <div class="carousel-caption">
-		    <p class="text-justify text-bold" style="padding: 20px 16px; font-size: 111%">
+		  <div class="carousel-caption text-indent" style="padding: 0 10px; display: table; line-height: 1.3">
+		    <p class="text-justify text-bold align-middle" style="display: table-cell; font-size: 111%">
 		      Les {{ teams | objectLength }} équipes doivent, en 4 heures, retracer les attaques à la
-		      recherche des données exfiltrées.
+		      recherche des données confidentielles exfiltrées.
 		    </p>
 		  </div>
 		</div>
 		<div class="carousel-item active">
-		  <div class="carousel-caption row" style="padding: 5px">
-		    <div class="col-4" style="padding-top: 4px;">
+		  <div class="carousel-caption" style="padding: 5px; display: table;">
+		    <div class="align-middle" style="display: table-cell; width: 30%">
 		      <a href="https://srs.epita.fr/"><img src="/img/srs.png" alt="Laboratoire SRS" style="max-width:100%; max-height:90px"></a>
 		    </div>
-		    <p class="col-8 text-bold" style="font-size: 110%">
+		    <p class="text-bold align-middle" style="font-size: 110%; display: table-cell; width: 70%;">
 		      Les challenges ont été réalisés par les étudiants de la
 		      spécialisation SRS de l'Épita.
 		    </p>
 		  </div>
 		</div>
 		<div class="carousel-item">
-		  <div class="carousel-caption row" style="padding: 14px">
-		    <div class="col-4">
+		  <div class="carousel-caption" style="padding: 5px; display: table">
+		    <p class="text-bold align-middle" style="font-size: 111%; display: table-cell; width: 70%">
+		      Avec le parrainage des réserves de cyberdéfense
+		    </p>
+		    <div class="align-middle" style="display: table-cell; width: 30%">
 		      <img src="/img/comcyber.png" alt="Réserves de cyberdéfense" style="max-width:100%; max-height: 80px">
 		    </div>
-		    <p class="col-8 text-bold" style="padding: 3px 5px 10px 0; font-size: 111%">
-		      Avec le parrainage du commandement de la cyberdéfense française
-		    </p>
 		  </div>
 		</div>
 		<div class="carousel-item">
@@ -379,10 +379,10 @@
 		  </div>
 		</div>
 		<div class="carousel-item">
-		  <div class="carousel-caption row" style="padding: 12px">
-		    <p class="text-bold" style="padding: 5px;">
+		  <div class="carousel-caption" style="display: table;">
+		    <p class="text-bold align-middle" style="display: table-cell; padding: 5px">
 		      Retrouvez les solutions des challenges dès demain sur :
-		      <span style="display: block; font-size: 150%" class="text-center">
+		      <span style="display: block; font-size: 135%" class="text-center">
 			<a style="font-family: mono" href="https://fic.srs.epita.fr/"><span class="text-info">https://fic.srs.epita.fr/</span></a>
 		      </span>
 		    </p>
diff --git a/frontend/static/css/fic.css b/frontend/static/css/fic.css
index 879b177d..a5f49e40 100644
--- a/frontend/static/css/fic.css
+++ b/frontend/static/css/fic.css
@@ -92,10 +92,10 @@ body {
     color: #A94442;
 }
 .point {
-    text-shadow: 0 0 20px #0055ff;
+    text-shadow: 0 0 20px #4eaee6;
 }
 .bg-dark .point {
-    text-shadow: 0 0 12px #0055ff;
+    text-shadow: 0 0 12px #4eaee6;
 }
 .end .point {
     text-shadow: 0 0 20px #ff5500;
@@ -295,3 +295,7 @@ blockquote {
 .card-sm .card-body.text-indent p {
     text-indent: 0.4rem;
 }
+
+.carousel-item, .carousel-caption {
+    height: inherit;
+}