dashboard: perfect view
authorPierre-Olivier Mercier <nemunaire@nemunai.re>
Mon, 10 Dec 2018 01:10:01 +0000 (02:10 +0100)
committerPierre-Olivier Mercier <nemunaire@nemunai.re>
Mon, 10 Dec 2018 01:10:18 +0000 (02:10 +0100)
dashboard/static/index.html
frontend/static/css/fic.css

index 2cef2e6..c725437 100644 (file)
 
       <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">
            </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>
                <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>
            </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">
                  </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>
index 879b177..a5f49e4 100644 (file)
@@ -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;
+}