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

Update bootstrap to 4.0-beta

Browse source
This commit is contained in:
nemunaire 2017-12-14 04:08:43 +01:00
parent 978f260c64
commit 73080d7d0d
23 changed files with 616 additions and 649 deletions
Download patch file Download diff file Expand all files Collapse all files

77
admin/index.go
View file

@ -10,55 +10,52 @@ const indextpl = `<!DOCTYPE html>
<script src="/js/d3.v3.min.js"></script> <script src="/js/d3.v3.min.js"></script>
</head> </head>
<body> <body>
<nav class="navbar navbar-inverse navbar-static-top"> <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light" style="margin-bottom: 5px;">
<div class="container"> <a class="navbar-brand" href="{{.urlbase}}">
<img alt="FIC" src="{{.urlbase}}img/fic.png" style="height: 30px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#adminMenu" aria-controls="adminMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-header"> <div class="collapse navbar-collapse" id="adminMenu">
<a class="navbar-brand" href="{{.urlbase}}"> <ul class="navbar-nav mr-auto">
<img alt="FIC" src="{{.urlbase}}img/fic.png" style="height: 100%"> <li class="nav-item"><a class="nav-link" href="{{.urlbase}}teams">&Eacute;quipes</a></li>
</a> <li class="nav-item"><a class="nav-link" href="{{.urlbase}}themes">Thèmes</a></li>
</div> <li class="nav-item"><a class="nav-link" href="{{.urlbase}}exercices">Exercices</a></li>
<li class="nav-item"><a class="nav-link" href="{{.urlbase}}public">Public</a></li>
<ul class="nav navbar-nav"> <li class="nav-item"><a class="nav-link" href="{{.urlbase}}events">&Eacute;vénements</a></li>
<li><a href="{{.urlbase}}teams">&Eacute;quipes</a></li> <li class="nav-item"><a class="nav-link" href="{{.urlbase}}settings">Paramètres</a></li>
<li><a href="{{.urlbase}}themes">Thèmes</a></li>
<li><a href="{{.urlbase}}exercices">Exercices</a></li>
<li><a href="{{.urlbase}}public">Public</a></li>
<li><a href="{{.urlbase}}events">&Eacute;vénements</a></li>
<li><a href="{{.urlbase}}settings">Paramètres</a></li>
</ul> </ul>
<p id="clock" class="navbar-text navbar-right" ng-controller="CountdownController">
<span ng-show="startIn > 0">
Démarrage dans :
<span>{{"{{ startIn }}"}}</span>"
<span class="point">|</span>
</span>
<span id="hours">{{"{{ time.hours | time }}"}}</span>
<span class="point">:</span>
<span id="min">{{"{{ time.minutes | time }}"}}</span>
<span class="point">:</span>
<span id="sec">{{"{{ time.seconds | time }}"}}</span>
</p>
</div> </div>
<span id="clock" class="navbar-text" ng-controller="CountdownController" ng-cloak>
<span ng-show="startIn > 0">
Démarrage dans :
<span>{{"{{ startIn }}"}}</span>"
<span class="point">|</span>
</span>
<span id="hours">{{"{{ time.hours | time }}"}}</span>
<span class="point">:</span>
<span id="min">{{"{{ time.minutes | time }}"}}</span>
<span class="point">:</span>
<span id="sec">{{"{{ time.seconds | time }}"}}</span>
</span>
</nav> </nav>
<div class="container"> <div class="container" ng-controller="DIWEBoxController">
<div class="row" ng-controller="DIWEBoxController"> <div ng-repeat="box in boxes" class="alert alert-dismissible alert-{{"{{ box.kind }}"}}" ng-cloak>
<div ng-repeat="box in boxes" class="alert alert-dismissible alert-{{"{{ box.kind }}"}}" ng-cloak> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong ng-if="box.title">{{"{{ box.title }}"}}</strong> {{"{{ box.msg }}"}}
<strong ng-if="box.title">{{"{{ box.title }}"}}</strong> {{"{{ box.msg }}"}} <button class="btn btn-sm btn-success" ng-if="box.yes || box.no" ng-click="box.yes()">Yes</button>
<button class="btn btn-sm btn-success" ng-if="box.yes || box.no" ng-click="box.yes()">Yes</button> <button class="btn btn-sm btn-danger" ng-if="box.yes || box.no" ng-click="box.no()">No</button>
<button class="btn btn-sm btn-danger" ng-if="box.yes || box.no" ng-click="box.no()">No</button>
</div>
</div>
<div class="row">
<div class="col-sm-12" ng-view></div>
</div> </div>
</div> </div>
<div class="container" ng-view></div>
<script src="/js/jquery.min.js"></script> <script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script> <script src="/js/bootstrap.min.js"></script>
<script src="/js/angular.min.js"></script> <script src="/js/angular.min.js"></script>
<script src="{{.urlbase}}js/angular-resource.min.js"></script> <script src="{{.urlbase}}js/angular-resource.min.js"></script>

7
admin/static/css/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

11
admin/static/css/slate.min.css vendored
View file

File diff suppressed because one or more lines are too long

77
admin/static/index.html
View file

@ -8,55 +8,52 @@
<script src="/js/d3.v3.min.js"></script> <script src="/js/d3.v3.min.js"></script>
</head> </head>
<body> <body>
<nav class="navbar navbar-inverse navbar-static-top"> <nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light" style="margin-bottom: 5px;">
<div class="container"> <a class="navbar-brand" href="/">
<img alt="FIC" src="/img/fic.png" style="height: 30px">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#adminMenu" aria-controls="adminMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-header"> <div class="collapse navbar-collapse" id="adminMenu">
<a class="navbar-brand" href="/"> <ul class="navbar-nav mr-auto">
<img alt="FIC" src="/img/fic.png" style="height: 100%"> <li class="nav-item"><a class="nav-link" href="/teams">&Eacute;quipes</a></li>
</a> <li class="nav-item"><a class="nav-link" href="/themes">Thèmes</a></li>
</div> <li class="nav-item"><a class="nav-link" href="/exercices">Exercices</a></li>
<li class="nav-item"><a class="nav-link" href="/public">Public</a></li>
<ul class="nav navbar-nav"> <li class="nav-item"><a class="nav-link" href="/events">&Eacute;vénements</a></li>
<li><a href="/teams">&Eacute;quipes</a></li> <li class="nav-item"><a class="nav-link" href="/settings">Paramètres</a></li>
<li><a href="/themes">Thèmes</a></li>
<li><a href="/exercices">Exercices</a></li>
<li><a href="/public">Public</a></li>
<li><a href="/events">&Eacute;vénements</a></li>
<li><a href="/settings">Paramètres</a></li>
</ul> </ul>
<p id="clock" class="navbar-text navbar-right" ng-controller="CountdownController">
<span ng-show="startIn > 0">
Démarrage dans :
<span>{{ startIn }}</span>"
<span class="point">|</span>
</span>
<span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span>
<span id="min">{{ time.minutes | time }}</span>
<span class="point">:</span>
<span id="sec">{{ time.seconds | time }}</span>
</p>
</div> </div>
<span id="clock" class="navbar-text" ng-controller="CountdownController" ng-cloak>
<span ng-show="startIn > 0">
Démarrage dans :
<span>{{ startIn }}</span>"
<span class="point">|</span>
</span>
<span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span>
<span id="min">{{ time.minutes | time }}</span>
<span class="point">:</span>
<span id="sec">{{ time.seconds | time }}</span>
</span>
</nav> </nav>
<div class="container"> <div class="container" ng-controller="DIWEBoxController">
<div class="row" ng-controller="DIWEBoxController"> <div ng-repeat="box in boxes" class="alert alert-dismissible alert-{{ box.kind }}" ng-cloak>
<div ng-repeat="box in boxes" class="alert alert-dismissible alert-{{ box.kind }}" ng-cloak> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button> <strong ng-if="box.title">{{ box.title }}</strong> {{ box.msg }}
<strong ng-if="box.title">{{ box.title }}</strong> {{ box.msg }} <button class="btn btn-sm btn-success" ng-if="box.yes || box.no" ng-click="box.yes()">Yes</button>
<button class="btn btn-sm btn-success" ng-if="box.yes || box.no" ng-click="box.yes()">Yes</button> <button class="btn btn-sm btn-danger" ng-if="box.yes || box.no" ng-click="box.no()">No</button>
<button class="btn btn-sm btn-danger" ng-if="box.yes || box.no" ng-click="box.no()">No</button>
</div>
</div>
<div class="row">
<div class="col-sm-12" ng-view></div>
</div> </div>
</div> </div>
<div class="container" ng-view></div>
<script src="/js/jquery.min.js"></script> <script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script> <script src="/js/bootstrap.min.js"></script>
<script src="/js/angular.min.js"></script> <script src="/js/angular.min.js"></script>
<script src="/js/angular-resource.min.js"></script> <script src="/js/angular-resource.min.js"></script>

1
admin/static/js/popper.min.js vendored Symbolic link
View file

@ -0,0 +1 @@
../../../frontend/static/js/popper.min.js

7
admin/static/views/home.html
View file

@ -1,8 +1,9 @@
<div class="well well-lg"> <div class="jumbotron text-light bg-primary">
<h3>Interface d'administration du challenge</h3> <h1 class="display-4">Interface d'administration du challenge</h1>
<p> <p class="lead">
Sélectionnez une action dans le menu ci-dessus. Sélectionnez une action dans le menu ci-dessus.
</p> </p>
<hr class="my-4">
<p ng-controller="VersionController"> <p ng-controller="VersionController">
Version de l'API : {{ v.version }} Version de l'API : {{ v.version }}
</p> </p>

165
admin/static/views/settings.html
View file

@ -1,121 +1,114 @@
<h2>Paramètres<a ng-click="regenerate()" class="pull-right btn btn-info" role="button"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Regénérer les fichiers statiques</a></h2> <div class="jumbotron text-light bg-primary">
<h2>Paramètres<button ng-click="regenerate()" class="float-right btn btn-info" type="button"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Regénérer les fichiers statiques</a></h2>
<hr>
<form ng-submit="saveSettings()" class="form-horizontal well"> <form ng-submit="saveSettings()">
<input type="hidden" class="form-control" id="lastRegeneration" ng-model="config.generation"> <input type="hidden" class="form-control form-control-sm" id="lastRegeneration" ng-model="config.generation">
<div class="form-group"> <div class="form-group row">
<label for="challengeName" class="col-sm-2 control-label">Nom du challenge</label> <label for="challengeName" class="col-sm-2 col-form-label col-form-label-sm">Nom du challenge</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="text" class="form-control" id="challengeName" ng-model="config.title"> <input type="text" class="form-control form-control-sm" id="challengeName" ng-model="config.title">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group row">
<label for="challengeAuthors" class="col-sm-2 control-label">Auteurs du challenge</label> <label for="challengeAuthors" class="col-sm-2 col-form-label col-form-label-sm">Auteurs du challenge</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="text" class="form-control" id="challengeAuthors" ng-model="config.authors"> <input type="text" class="form-control form-control-sm" id="challengeAuthors" ng-model="config.authors">
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group row">
<label for="startTime" class="col-sm-2 control-label">Début du challenge</label> <label for="startTime" class="col-sm-2 col-form-label col-form-label-sm">Début du challenge</label>
<div class="col-sm-8"> <div class="col-sm-10">
<input type="text" class="form-control" id="startTime" ng-model="config.start"> <div class="input-group">
</div> <input type="text" class="form-control form-control-sm" id="startTime" ng-model="config.start">
<div class="col-sm-2 text-right"> <span class="input-group-btn">
<a ng-click="launchChallenge()" class="btn btn-warning" role="button"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Lancer le challenge</a> <button ng-click="launchChallenge()" class="btn btn-sm btn-secondary" type="button"><span class="glyphicon glyphicon-play" aria-hidden="true"></span> Lancer le challenge</button>
</span>
</div>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group row">
<label for="endTime" class="col-sm-2 control-label">Fin du challenge</label> <label for="endTime" class="col-sm-2 col-form-label col-form-label-sm">Fin du challenge</label>
<div class="col-sm-7"> <div class="col-sm-7">
<input type="text" class="form-control" id="endTime" ng-model="config.end"> <input type="text" class="form-control form-control-sm" id="endTime" ng-model="config.end">
</div> </div>
<div class="col-sm-1 text-right"> <div class="col-sm-1 text-right">
<label for="duration" class="control-label">Durée</label> <label for="duration" class="col-form-label col-form-label-sm">Durée</label>
</div> </div>
<div class="col-sm-2"> <div class="col-sm-2">
<div class="input-group"> <div class="input-group input-group-sm">
<input type="text" class="form-control" id="duration" ng-model="duration" integer> <input type="text" class="form-control form-control-sm" id="duration" ng-model="duration" integer>
<div class="input-group-addon">min</div> <span class="input-group-addon">min</span>
</div> </div>
</div> </div>
</div> </div>
<hr> <hr>
<div class="form-group"> <div class="form-group row">
<label for="firstBlood" class="col-sm-2 control-label">Bonus premier sang</label> <label for="firstBlood" class="col-sm-2 col-form-label col-form-label-sm">Bonus premier sang</label>
<div class="col-sm-1"> <div class="col-sm-1">
<input type="text" class="form-control" id="firstBlood" ng-model="config.firstBlood" float> <input type="text" class="form-control form-control-sm" id="firstBlood" ng-model="config.firstBlood" float>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group row">
<label for="submissionCostBase" class="col-sm-2 control-label">Coût de base d'une soumission</label> <label for="submissionCostBase" class="col-sm-2 col-form-label col-form-label-sm">Coût de base d'une soumission</label>
<div class="col-sm-1"> <div class="col-sm-1">
<input type="text" class="form-control" id="submissionCostBase" ng-model="config.submissionCostBase" float> <input type="text" class="form-control form-control-sm" id="submissionCostBase" ng-model="config.submissionCostBase" float>
</div> </div>
</div> </div>
<hr> <hr>
<div class="form-group"> <fieldset class="form-group">
<div class="col-sm-offset-2 col-sm-10"> <div class="row">
<div class="checkbox"> <legend class="col-form-legend col-sm-2">Options</legend>
<label>
<input type="checkbox" ng-model="config.allowRegistration"> Activer les inscriptions
</label>
</div>
</div>
</div>
<div class="form-group"> <div class="col-sm-10">
<div class="col-sm-offset-2 col-sm-10"> <div class="form-check">
<div class="checkbox"> <label class="form-check-label">
<label> <input class="form-check-input" type="checkbox" ng-model="config.allowRegistration"> Activer les inscriptions
<input type="checkbox" ng-model="config.denyNameChange"> Interdire les changements de nom d'équipe </label>
</label> </div>
</div>
</div>
</div>
<div class="form-group"> <div class="form-check">
<div class="col-sm-offset-2 col-sm-10"> <label class="form-check-label">
<div class="checkbox"> <input class="form-check-input" type="checkbox" ng-model="config.denyNameChange"> Interdire les changements de nom d'équipe
<label> </label>
<input type="checkbox" ng-model="config.enableResolutionRoute"> Activer la route montrant les solutions </div>
</label>
</div>
</div>
</div>
<div class="form-group"> <div class="form-check">
<div class="col-sm-offset-2 col-sm-10"> <label class="form-check-label">
<div class="checkbox"> <input class="form-check-input" type="checkbox" ng-model="config.enableResolutionRoute"> Activer la route montrant les solutions
<label> </label>
<input type="checkbox" ng-model="config.partialValidation"> Activer la validation partielle des challenges </div>
</label>
</div> <div class="form-check">
</div> <label class="form-check-label">
</div> <input class="form-check-input" type="checkbox" ng-model="config.partialValidation"> Activer la validation partielle des challenges
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" ng-model="config.enableExerciceDepend"> Activer les dépendances des exercices
</label>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="config.enableExerciceDepend"> Activer les dépendances des exercices
</label>
</div> </div>
</div> </div>
</div> </fieldset>
<hr> <hr>
<div class="form-group"> <div class="form-group row">
<label class="col-sm-2 control-label">Synchronisation</label> <label class="col-sm-2 col-form-label col-form-label-sm">Synchronisation</label>
<div class="col-sm-10">{{ configro.sync }}</div> <div class="col-sm-10">{{ configro.sync }}</div>
</div> </div>
@ -123,16 +116,16 @@
<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save" aria-hidden="true"></span> Propager ces paramètres</button> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save" aria-hidden="true"></span> Propager ces paramètres</button>
</div> </div>
</form> </form>
</div>
<div class="well">
<div class="col-sm-4 center"> <div class="card-deck">
<a ng-click="reset('challenges')" class="btn btn-warning" role="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Effacer les challenges et les thèmes</a> <div class="card">
</div> <button ng-click="reset('challenges')" class="btn btn-secondary" type="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Effacer les challenges et les thèmes</button>
<div class="col-sm-4 center"> </div>
<a ng-click="reset('teams');" class="btn btn-warning" role="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Effacer les équipes</a> <div class="card">
</div> <button ng-click="reset('teams');" class="btn btn-secondary" type="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Effacer les équipes</button>
<div class="col-sm-4 center"> </div>
<a ng-click="reset('game');" class="btn btn-warning" role="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Effacer la partie (tentatives, indices, ...)</a> <div class="card">
</div> <button ng-click="reset('game');" class="btn btn-secondary" type="button"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Effacer la partie (tentatives, indices, ...)</button>
<div class="clearfix"></div> </div>
</div> </div>

13
frontend/static/css/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

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

@ -17,6 +17,10 @@
display:none !important; display:none !important;
} }
.popover.bs-popover-left .arrow::after {
border-left-color: #7A8288;
}
body { body {
overflow-y: scroll; overflow-y: scroll;
} }
@ -86,13 +90,12 @@ keyframes clockanim {
100% { opacity: 1.0; }; 100% { opacity: 1.0; };
} }
.well { samp.cksum {
text-align: justify; overflow-x: hidden;
}
.samp {
overflow-x: auto;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 20vw;
display: inline-block;
vertical-align: middle;
} }
h1 small.authors { h1 small.authors {
@ -195,3 +198,10 @@ th.rotated div span {
text-align: left; text-align: left;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
ul.list-inline li {
display: inline;
}
ul.list-inline li:not(:last-child)::after {
content: " ● "
}

39
frontend/static/e404.html
View file

@ -1,52 +1,39 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Challenge Forensic</title> <title>Challenge Forensic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="author" content="EPITA Laboratoire SRS"> <meta name="author" content="EPITA Laboratoire SRS">
<meta name="robots" content="all"> <meta name="robots" content="all">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
</head> </head>
<body> <body class="bg-light">
<div class="navbar navbar-default"> <div class="navbar navbar-expand-lg navbar-dark bg-dark text-light">
<div class="container"> <div class="container">
<div class="row"> <div class="col-md-auto">
<div class="navbar-header col-sm-3">
<a href="/"> <a href="/">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block"> <img src="/img/fic.png" alt="Forum International de la Cybersécurité">
</a> </a>
</div> </div>
<div class="navbar-right col-sm-2"> <div id="clock" class="col-md-auto text-center">Challenge Forensic</div>
<div class="col-md-auto">
<a href="http://www.epita.fr/"> <a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita" class="center-block"> <img src="/img/epita.png" alt="Epita">
</a> </a>
</div> </div>
<div id="clock" class="col-sm-7">
Challenge forensic
</div>
</div>
</div> </div>
</div> </div>
<div class="container" style="margin-top:20px;"> <div class="container" style="margin-top:20px;">
<div class="jumbotron"> <div class="jumbotron">
<div class="text-center">
<img src="http://http.cat/404" alt="cat not found!">
</div>
<h1>Page introuvable <small>Erreur 404</small></h1> <h1>Page introuvable <small>Erreur 404</small></h1>
<p> <hr>
<p class="lead">
La page &agrave; laquelle vous tentez d'acc&eacute;der n'existe pas ou l'adresse que vous avez tap&eacute;e est incorrecte. La page &agrave; laquelle vous tentez d'acc&eacute;der n'existe pas ou l'adresse que vous avez tap&eacute;e est incorrecte.
</p> </p>
<p> <p>

39
frontend/static/e413.html
View file

@ -1,52 +1,39 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Challenge Forensic</title> <title>Challenge Forensic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="author" content="EPITA Laboratoire SRS"> <meta name="author" content="EPITA Laboratoire SRS">
<meta name="robots" content="all"> <meta name="robots" content="all">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
</head> </head>
<body> <body class="bg-light">
<div class="navbar navbar-default"> <div class="navbar navbar-expand-lg navbar-dark bg-dark text-light">
<div class="container"> <div class="container">
<div class="row"> <div class="col-md-auto">
<div class="navbar-header col-sm-3">
<a href="/"> <a href="/">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block"> <img src="/img/fic.png" alt="Forum International de la Cybersécurité">
</a> </a>
</div> </div>
<div class="navbar-right col-sm-2"> <div id="clock" class="col-md-auto text-center">Challenge Forensic</div>
<div class="col-md-auto">
<a href="http://www.epita.fr/"> <a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita" class="center-block"> <img src="/img/epita.png" alt="Epita">
</a> </a>
</div> </div>
<div id="clock" class="col-sm-7">
Challenge forensic
</div>
</div>
</div> </div>
</div> </div>
<div class="container" style="margin-top:20px;"> <div class="container" style="margin-top:20px;">
<div class="jumbotron"> <div class="jumbotron">
<div class="text-center">
<img src="http://http.cat/413" alt="cat not found!">
</div>
<h1>Requête trop grosse <small>Erreur 413</small></h1> <h1>Requête trop grosse <small>Erreur 413</small></h1>
<p> <hr>
<p class="lead">
La quantité de données que vous souhaitez envoyer au serveur est trop importante pour qu'il accepte de la traiter. La quantité de données que vous souhaitez envoyer au serveur est trop importante pour qu'il accepte de la traiter.
</p> </p>
</div> </div>

39
frontend/static/e500.html
View file

@ -1,52 +1,39 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Challenge Forensic</title> <title>Challenge Forensic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="author" content="EPITA Laboratoire SRS"> <meta name="author" content="EPITA Laboratoire SRS">
<meta name="robots" content="all"> <meta name="robots" content="all">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
</head> </head>
<body> <body class="bg-light">
<div class="navbar navbar-default"> <div class="navbar navbar-expand-lg navbar-dark bg-dark text-light">
<div class="container"> <div class="container">
<div class="row"> <div class="col-md-auto">
<div class="navbar-header col-sm-3">
<a href="/"> <a href="/">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block"> <img src="/img/fic.png" alt="Forum International de la Cybersécurité">
</a> </a>
</div> </div>
<div class="navbar-right col-sm-2"> <div id="clock" class="col-md-auto text-center">Challenge Forensic</div>
<div class="col-md-auto">
<a href="http://www.epita.fr/"> <a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita" class="center-block"> <img src="/img/epita.png" alt="Epita">
</a> </a>
</div> </div>
<div id="clock" class="col-sm-7">
Challenge forensic
</div>
</div>
</div> </div>
</div> </div>
<div class="container" style="margin-top:20px;"> <div class="container" style="margin-top:20px;">
<div class="jumbotron"> <div class="jumbotron">
<div class="text-center">
<img src="http://http.cat/500" alt="cat not found!">
</div>
<h1>Erreur interne <small>Erreur 500</small></h1> <h1>Erreur interne <small>Erreur 500</small></h1>
<p> <hr>
<p class="lead">
Notre serveur est actuellement dans l'incapacit&eacute; de repondre &agrave; votre requ&ecirc;te.<br>Veuillez recommencer dans quelques instants. Notre serveur est actuellement dans l'incapacit&eacute; de repondre &agrave; votre requ&ecirc;te.<br>Veuillez recommencer dans quelques instants.
</p> </p>
<p> <p>

166
frontend/static/index.html
View file

@ -1,124 +1,110 @@
<!DOCTYPE html> <!DOCTYPE html>
<html ng-app="FICApp"> <html lang="fr" ng-app="FICApp">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Challenge Forensic</title> <title>Challenge Forensic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="author" content="EPITA Laboratoire SRS"> <meta name="author" content="EPITA Laboratoire SRS">
<meta name="robots" content="all"> <meta name="robots" content="all">
<base href="/"> <base href="/">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
<script src="/js/angular.min.js"></script> <script src="/js/angular.min.js"></script>
</head> </head>
<body> <body class="bg-light">
<div class="navbar navbar-default"> <div class="navbar navbar-expand-lg navbar-dark bg-dark text-light">
<div class="container"> <div class="container">
<div class="row"> <div class="col-md-auto">
<div class="navbar-left col-md-3"> <a href="https://www.forum-fic.com/" ng-if="!(time.start || my.team_id)">
<a href="https://www.forum-fic.com/" ng-if="!(time.start || my.team_id)"> <img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block"> </a>
<a href="/" ng-if="(time.start || my.team_id)" ng-cloak>
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block">
</a>
</div>
<div id="clock" class="col-md-auto text-center" ng-hide="1">Chargement...</div>
<div id="clock" class="col-md-auto text-center" ng-class="{expired: time.expired, end: time.end}" ng-if="time.start || my.team_id" ng-cloak>
<span id="hours">{{ time.hours | time }}</span>
<span class="point">:</span>
<span id="min">{{ time.minutes | time }}</span>
<span class="point">:</span>
<span id="sec">{{ time.seconds | time }}</span>
</div>
<div id="clock" class="col-md-auto btn-group btn-group-lg" ng-if="!(time.start || my.team_id)" ng-cloak>
<a class="btn btn-light" href="/">
<span class="glyphicon glyphicon-home"></span> Accueil
</a> </a>
<a href="/" ng-if="(time.start || my.team_id)" ng-cloak> <a class="btn btn-light" href="/rank">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité" class="center-block"> <span class="glyphicon glyphicon-list"></span> Classement
</a> </a>
</div> <a class="btn btn-light disabled" href="https://www.youtube.com/playlist?list=PLSJ8QLhKMtQv7jRhdAn9wXSMYTsvqfieX">
<div id="clock" class="col-md-6 text-center" ng-hide="1">Chargement...</div> <span class="glyphicon glyphicon-blackboard"></span> Vidéos
<div id="clock" class="col-md-6 text-center" ng-class="{expired: time.expired, end: time.end}" ng-if="time.start || my.team_id" ng-cloak> </a>
<span id="hours">{{ time.hours | time }}</span> </div>
<span class="point">:</span> <div class="col-md-auto">
<span id="min">{{ time.minutes | time }}</span> <div class="carousel slide" data-ride="carousel" data-interval="30000" style="width: 150px">
<span class="point">:</span> <div class="carousel-inner text-center">
<span id="sec">{{ time.seconds | time }}</span> <div class="carousel-item active">
</div> <a href="http://www.epita.fr/">
<div id="clock" class="col-md-6" ng-if="!(time.start || my.team_id)" style="padding: 25px" ng-cloak> <img src="/img/epita.png" alt="Epita">
<div class="btn-group btn-group-justified btn-group-lg"> </a>
<a class="btn btn-default" href="/"> </div>
<span class="glyphicon glyphicon-home"></span> Accueil <div class="carousel-item">
</a> <a href="https://srs.epita.fr/">
<a class="btn btn-default" href="/rank"> <img src="/img/srs.png" alt="Laboratoire SRS Épita">
<span class="glyphicon glyphicon-list"></span> Classement </a>
</a> </div>
<a class="btn btn-default disabled" href="https://www.youtube.com/playlist?list=PLSJ8QLhKMtQv7jRhdAn9wXSMYTsvqfieX"> <div class="carousel-item">
<span class="glyphicon glyphicon-blackboard"></span> Vidéos <img src="/img/rcc.png" alt="Réserve Citoyenne Cyberdéfense">
</a> </div>
</div> </div>
</div> </div>
<div class="col-md-3 text-right">
<a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita" class="center-block">
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="container" ng-controller="DataController"> <div ng-controller="DataController">
<div class="row"> <nav class="navbar navbar-expand-lg bg-primary" ng-cloak>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#themesMenu" aria-controls="themesMenu" aria-expanded="false" aria-label="Toggle navigation">
<div class="col-sm-3"> <span class="navbar-toggler-icon"></span>
<div class="panel panel-default" ng-if="(my.team_id)" style="margin-top: 10px; margin-bottom: 0px;" ng-cloak> </button>
<div class="panel-heading" style="background-color: {{ teams[my.team_id].color }}; color: {{ teams[my.team_id].color }};"> <div class="collapse navbar-collapse" id="themesMenu">
<a style="margin: -8px -13px; color: {{ teams[my.team_id].color }};" class="pull-right btn btn-default" href="/edit"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a> <ul class="navbar-nav mr-auto">
<div class="panel-title"> <li ng-repeat="(k,theme) in themes"><a ng-class="{active: k == current_theme}" class="nav-link" ng-href="/{{ k }}" data-toggle="tab">{{ theme.name }} <span class="badge badge-light"><span class="glyphicon glyphicon-fire" aria-hidden="true" ng-if="max_solved > 1 && theme.solved == max_solved" alt="Déjà {{ theme.solved }} challenges résolus dans ce thème"></span> <span class="glyphicon glyphicon-gift" aria-hidden="true" ng-if="theme.exercice_coeff_max > 1" alt="Des bonus existent pour au moins un challenge de ce thème"></span> <span ng-if="(my.team_id)">{{ theme.exercice_solved }}/</span>{{ theme.exercice_count }}</span></a></li>
<strong class="teamname">{{ my.name }}</strong> </ul>
</div> </div>
</div> <span class="navbar-text text-light" ng-show="(my.team_id)" ng-cloak>
<div class="panel-body"> <a tabindex="0" class="badge" role="button" style="background-color: {{ teams[my.team_id].color }}; color: {{ teams[my.team_id].color }};" data-toggle="popover" data-trigger="focus" data-template="<div class='popover' role='tooltip'><div class='arrow'></div><h3 class='popover-header bg-light text-dark'></h3><div class='popover-body bg-secondary text-dark'></div></div>" title="{{ my.name }}<a class='btn btn-sm btn-info float-right' href='/edit'>Édit.</a>" data-html="true" data-content="{{ teams[my.team_id].rank }}<sup>e</sup> sur {{ teams_count }} &ndash; {{ my.score }} points<br><div class='btn-group'><a class='btn btn-sm btn-primary' href='/rules'>Règles</a><a class='btn btn-sm btn-primary' href='/rank'>Classement</a></div>">
<span ng-if="teams[my.team_id].rank">{{ teams[my.team_id].rank }}<sup><sup><ng-pluralize count="teams[my.team_id].rank" when="{'one': 're', 'other': 'e'}"></ng-pluralize></sup></sup> sur {{ teams_count }} &ndash;</span> {{ my.name }}
<ng-pluralize count="my.score" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> </a>
<div style="margin: -8px -10px;" class="pull-right btn-group"> </span>
<a class="btn btn-default" href="/rules"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span></a> </nav>
<a class="btn btn-default" href="/rank"><span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span></a>
</div>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="page-header">
<h1 ng-if="(current_theme)" ng-cloak>{{ themes[current_theme].name }} <small class="authors" ng-if="themes[current_theme].authors">{{ themes[current_theme].authors }}</small></h1>
<h1 ng-if="(!current_theme && title)" ng-cloak>{{ title }} <small class="authors" ng-if="authors">{{ authors }}</small></h1>
<h1 ng-if="(!current_theme && !title)">{{ settings.title }} <small class="authors">{{ settings.authors }}</small></h1>
</div>
</div>
<div class="container">
<div class="page-header text-primary" ng-cloak>
<h1 ng-if="(current_theme)">{{ themes[current_theme].name }} <small class="authors" ng-if="themes[current_theme].authors">{{ themes[current_theme].authors }}</small></h1>
<h1 ng-if="(!current_theme && title)" ng-cloak>{{ title }} <small class="authors" ng-if="authors">{{ authors }}</small></h1>
<h1 ng-if="(!current_theme && !title)">{{ settings.title }} <small class="authors">{{ settings.authors }}</small></h1>
</div> </div>
<div class="row"> <div style="clear: both"></div>
<div class="col-sm-3"> <div ng-view>
<div class="list-group" ng-cloak> <noscript>
<a ng-repeat="(k,theme) in themes" ng-class="{active: k == current_theme}" class="list-group-item" ng-href="/{{ k }}"><span class="badge"><span class="glyphicon glyphicon-fire" aria-hidden="true" ng-if="max_solved > 1 && theme.solved == max_solved" alt="Déjà {{ theme.solved }} challenges résolus dans ce thème"></span> <span class="glyphicon glyphicon-gift" aria-hidden="true" ng-if="theme.exercice_coeff_max > 1" alt="Des bonus existent pour au moins un challenge de ce thème"></span> <span ng-if="(my.team_id)">{{ theme.exercice_solved }}/</span>{{ theme.exercice_count }}</span>{{ theme.name }}</a> <div class="alert alert-danger">
<strong>Veuillez activer le JavaScript.</strong> Ce site requiert un navigateur interprêtant le JavaScript pour fonctionner. Veuillez l'activer ou en télécharger un supportant cette technologie.
</div> </div>
</noscript>
<a href="https://srs.epita.fr/"><img src="/img/srs.png" alt="Laboratoire SRS Épita" style="width: 48%; max-width: 200px;"></a>
<img src="/img/rcc.png" alt="Réserve Citoyenne Cyberdéfense" style="width: 48%; max-width: 200px;">
</div>
<div class="col-sm-9" ng-view>
<noscript>
<div class="alert alert-danger">
<strong>Veuillez activer le JavaScript.</strong> Ce site requiert un navigateur interprêtant le JavaScript pour fonctionner. Veuillez l'activer ou en télécharger un supportant cette technologie.
</div>
</noscript>
</div>
</div> </div>
</div> </div>
<script src="/js/jquery.min.js"></script> <script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script> <script src="/js/bootstrap.min.js"></script>
<script src="/js/angular-route.min.js"></script> <script src="/js/angular-route.min.js"></script>
<script src="/js/angular-sanitize.min.js"></script> <script src="/js/angular-sanitize.min.js"></script>

12
frontend/static/js/bootstrap.min.js vendored
View file

File diff suppressed because one or more lines are too long

9
frontend/static/js/jquery.min.js vendored
View file

File diff suppressed because one or more lines are too long

5
frontend/static/js/popper.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

216
frontend/static/public.html
View file

@ -3,26 +3,19 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Challenge Forensic</title> <title>Challenge Forensic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="author" content="EPITA Laboratoire SRS"> <meta name="author" content="EPITA Laboratoire SRS">
<meta name="robots" content="all"> <meta name="robots" content="all">
<base href="/"> <base href="/">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
<script src="/js/angular.min.js"></script> <script src="/js/angular.min.js"></script>
</head> </head>
<body style="overflow: hidden;" class="container-fluid" ng-controller="DataController"> <body class="bg-light" style="overflow: hidden;" class="container-fluid" ng-controller="DataController">
<div class="row" style="margin-top: 10px"> <div class="row" style="margin:10px 0">
<div class="col-xs-8"> <div class="col-8">
<noscript> <noscript>
<div class="alert alert-danger"> <div class="alert alert-danger">
<strong>Veuillez activer le JavaScript.</strong> Ce site requiert un navigateur interprêtant le JavaScript pour fonctionner. Veuillez l'activer ou en télécharger un supportant cette technologie. <strong>Veuillez activer le JavaScript.</strong> Ce site requiert un navigateur interprêtant le JavaScript pour fonctionner. Veuillez l'activer ou en télécharger un supportant cette technologie.
@ -31,79 +24,87 @@
<div ng-repeat="(k,s) in scene" class="repeatedd-item"> <div ng-repeat="(k,s) in scene" class="repeatedd-item">
<div class="well" 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 == 'init'">
<h1>Bienvenue au challenge forensic&nbsp;!</h1> <div class="card-body">
<p class="lead text-justify"> <h1>Bienvenue au challenge forensic&nbsp;!</h1>
Avant de vous installer, venez récupérer votre clef USB auprès <p class="lead text-justify">
de notre équipe. Elle contient le certificat qui vous permettra Avant de vous installer, venez récupérer votre clef USB auprès
de vous authentifier auprès de notre serveur. de notre équipe. Elle contient le certificat qui vous permettra
</p> de vous authentifier auprès de notre serveur.
<p class="lead text-justify"> </p>
Une fois connecté au réseau, contactez notre serveur sur&nbsp;: <p class="lead text-justify">
<span style="display: block; font-size: 200%" class="text-center"> Une fois connecté au réseau, contactez notre serveur sur&nbsp;:
<a style="font-family: mono" href="https://fic.srs.epita.fr/"><span class="text-info">https://fic.srs.epita.fr/</span></a> <span style="display: block; font-size: 200%" class="text-center">
</span> <a style="font-family: mono" href="https://fic.srs.epita.fr/"><span class="text-info">https://fic.srs.epita.fr/</span></a>
</p> </span>
</div> </p>
<div class="panel panel-success" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'countdown'">
<div class="panel-heading">
<h3 class="panel-title"><strong>Le {{ settings.title }} est sur le point de commencer&nbsp;!</strong></h3>
</div> </div>
<div class="panel-body text-center" style="font-size: 450%;" ng-if="startIn">{{ startIn }}</div>
<div class="panel-body text-center" style="font-size: 450%;" ng-if="!startIn">Go, go, go&nbsp;!</div>
</div> </div>
<div class="well" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'public'"> <div class="card border-success" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'countdown'">
<h1>Bienvenue au challenge forensic&nbsp;!</h1> <div class="card-header bg-success text-white">
<p class="lead text-justify"> <h3 style="margin:0"><strong>Le {{ settings.title }} est sur le point de commencer&nbsp;!</strong></h3>
Durant ce challenge, les équipes doivent remonter des scénarii
d'attaques auxquels nos systèmes d'information font faces
chaque jour : fuite de données, compromission d'un poste de
travail, exploitation de vulnérabilités d'un site web, ...
</p>
<p class="lead text-justify">
Pour valider un challenge, chaque participant va télécharger :
soit des journaux d'évènements, des extraits de trafic réseau
ou même des copies figées de la mémoire vive de machines
malveillantes, pour essayer de comprendre comment l'attaquant a
contourné la sécurité de la machine et quelles actions hostiles
ont été effectuées.
</p>
</div>
<div class="well" ng-if="s.type == 'message' && !s.params.hide">
<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>
<p ng-bind-html="s.params.html" ng-if="s.params.html"></p>
<p ng-if="s.params.text">{{ s.params.text }}</p>
</div>
<div class="panel {{ s.params.kind }}" ng-if="s.type == 'panel' && !s.params.hide">
<div class="panel-heading" ng-if="s.params.title">
<h3 class="panel-title">{{ s.params.title }}</h3>
</div> </div>
<div class="panel-body" ng-if="s.params.text">{{ s.params.text }}</div> <div class="card-body text-center" style="font-size: 450%;" ng-if="startIn">{{ startIn }}</div>
<div class="panel-body" ng-if="s.params.html" ng-bind-html="s.params.html"></div> <div class="card-body text-center" style="font-size: 450%;" ng-if="!startIn">Go, go, go&nbsp;!</div>
</div> </div>
<div class="well" ng-if="s.type == 'exercice' && !s.params.hide"> <div class="card" ng-if="s.type == 'welcome' && !s.params.hide && s.params.kind == 'public'">
<p class="lead"> <div class="card-body">
<strong>Challenge <em>{{ themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].title }}</em> du thème {{ themes[my.exercices[s.params.exercice].theme_id].name }}</strong> <h1>Bienvenue au challenge forensic&nbsp;!</h1>
<small class="authors" ng-if="themes[my.exercices[s.params.exercice].theme_id].authors">par {{ themes[my.exercices[s.params.exercice].theme_id].authors }}</small> <p class="lead text-justify">
</p> Durant ce challenge, les équipes doivent <strong>remonter des scénarii
<p ng-bind-html="my.exercices[s.params.exercice].statement"></p> d'attaques</strong> auxquels nos systèmes d'information <strong>font faces
<ul class="list-inline"> chaque jour</strong> : fuite de données, compromission d'un poste de
<li>Rapporte <ng-pluralize count="themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].gain" when="{'0': 'aucun point', 'one': '{} point', 'other': '{} points'}"></ng-pluralize></li> travail, exploitation de vulnérabilités d'un site web, ...
<li><ng-pluralize count="my.exercices[s.params.exercice].files.length" when="{'0': 'Aucun fichier disponible', 'one': '{} fichier disponible', 'other': '{} fichiers disponibles'}"></ng-pluralize></li> </p>
<li ng-if="my.exercices[s.params.exercice].hints.length"><ng-pluralize count="my.exercices[s.params.exercice].hints.length" when="{'0': 'Aucun indice disponible', 'one': '{} indice disponible', 'other': '{} indices disponibles'}"></ng-pluralize></li> <p class="lead text-justify">
<li>Tenté par <ng-pluralize count="themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].tried" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li> Pour valider un challenge, chaque participant va télécharger :
<li><ng-pluralize count="my.exercices[s.params.exercice].solved_number" when="{'0': 'aucun tentative', 'one': '{} tentative', 'other': '{} tentatives'}"></ng-pluralize></li> soit des <strong>journaux d'évènements</strong>, des extraits de trafic réseau
<li>Résolu par <ng-pluralize count="themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li> ou même des <strong>copies</strong> figées <strong>de la mémoire vive</strong> de machines
</ul> malveillantes, pour <strong>essayer de comprendre</strong> comment l'attaquant a
<strong>contourné la sécurité</strong> de la machine et quelles actions hostiles
ont été effectuées.
</p>
</div>
</div> </div>
<div class="panel" ng-if="s.type == 'table' && !s.params.hide"> <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>
<p ng-bind-html="s.params.html" ng-if="s.params.html"></p>
<p ng-if="s.params.text">{{ 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>
<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>
<div class="card" ng-if="s.type == 'exercice' && !s.params.hide">
<div class="card-body">
<p class="lead">
<strong>Challenge <em>{{ themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].title }}</em> du thème {{ themes[my.exercices[s.params.exercice].theme_id].name }}</strong>
<small class="authors" ng-if="themes[my.exercices[s.params.exercice].theme_id].authors">par {{ themes[my.exercices[s.params.exercice].theme_id].authors }}</small>
</p>
<p ng-bind-html="my.exercices[s.params.exercice].statement"></p>
<ul class="list-inline">
<li>Rapporte <ng-pluralize count="themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].gain" when="{'0': 'aucun point', 'one': '{} point', 'other': '{} points'}"></ng-pluralize></li>
<li><ng-pluralize count="my.exercices[s.params.exercice].files.length" when="{'0': 'Aucun fichier disponible', 'one': '{} fichier disponible', 'other': '{} fichiers disponibles'}"></ng-pluralize></li>
<li ng-if="my.exercices[s.params.exercice].hints.length"><ng-pluralize count="my.exercices[s.params.exercice].hints.length" when="{'0': 'Aucun indice disponible', 'one': '{} indice disponible', 'other': '{} indices disponibles'}"></ng-pluralize></li>
<li>Tenté par <ng-pluralize count="themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].tried" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
<li><ng-pluralize count="my.exercices[s.params.exercice].solved_number" when="{'0': 'aucun tentative', 'one': '{} tentative', 'other': '{} tentatives'}"></ng-pluralize></li>
<li>Résolu par <ng-pluralize count="themes[my.exercices[s.params.exercice].theme_id].exercices[s.params.exercice].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize></li>
</ul>
</div>
</div>
<div class="card" ng-if="s.type == 'table' && !s.params.hide">
<table class="table table-bordered table-striped table-condensed"> <table class="table table-bordered table-striped table-condensed">
<thead> <thead>
<tr> <tr>
@ -147,7 +148,7 @@
</table> </table>
</div> </div>
<div class="panel" ng-if="s.type == 'rank' && !s.params.hide"> <div class="card" ng-if="s.type == 'rank' && !s.params.hide">
<table class="table table-bordered table-striped table-condensed"> <table class="table table-bordered table-striped table-condensed">
<thead> <thead>
<tr> <tr>
@ -169,7 +170,7 @@
</div> </div>
</div> </div>
<div class="col-xs-4"> <div class="col-4">
<div ng-controller="EventsController"> <div ng-controller="EventsController">
<div ng-repeat="e in events | limitTo: 7" class="repeated-item"> <div ng-repeat="e in events | limitTo: 7" class="repeated-item">
@ -179,7 +180,7 @@
</div> </div>
</div> </div>
<div style="box-shadow: 0px -5px 5px 5px #272b30; position: fixed; bottom: calc(14vh - 1px); right: 0; width: 33vw;" class="navbar navbar-inverse" ng-controller="TimeController"> <div style="box-shadow: 0px -5px 5px 5px #e9ecef; position: fixed; bottom: calc(14vh - 1px); right: 0; width: 33vw;" class="navbar navbar-inverse" ng-controller="TimeController">
<div class="text-center" ng-if="time.hours === 0 || time.hours" style="margin-top: -5px;"> <div class="text-center" ng-if="time.hours === 0 || time.hours" style="margin-top: -5px;">
<div id="clock" ng-class="{expired: time.expired, end: time.end}" style="font-size: 50px" ng-cloak> <div id="clock" ng-class="{expired: time.expired, end: time.end}" style="font-size: 50px" ng-cloak>
<span id="hours">{{ time.hours | time }}</span> <span id="hours">{{ time.hours | time }}</span>
@ -199,30 +200,29 @@
</div> </div>
</div> </div>
<div style="position: fixed; bottom: 0; right: 0; width: 33vw; height: 14vh" class="navbar navbar-inverse"> <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"> <div class="carousel slide" id="carousel-logos" data-ride="carousel" data-interval="10500">
<div class="carousel-inner"> <div class="carousel-inner">
<div class="item active"> <div class="carousel-item active">
<div class="carousel-caption"> <div class="carousel-caption">
<a href="http://www.epita.fr/"><img src="/img/epita.png" alt="Epita" style="width:30%"></a> <a href="http://www.epita.fr/"><img src="/img/epita.png" alt="Epita" style="max-height:14vh"></a>
<a href="https://srs.epita.fr/"><img src="/img/srs.png" alt="Laboratoire SRS" style="width:30%"></a> <img src="/img/rcc.png" alt="Réserve Citoyenne Cyberdéfense" style="height:14vh">
<img src="/img/rcc.png" alt="Réserve Citoyenne Cyberdéfense" style="width:30%">
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<div class="carousel-caption" style="padding: 0 10px"> <div class="carousel-caption">
<h2>Bienvenue au challenge forensic&nbsp;!</h2> <h2>Bienvenue au challenge forensic&nbsp;!</h2>
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<div class="carousel-caption"> <div class="carousel-caption">
<p class="text-justify text-bold" style="padding: 20px 16px; font-size: 111%"> <p class="text-justify text-bold" style="padding: 5px 16px; font-size: 111%">
Ce challenge met en scène des scénarii d'attaques auxquels Ce challenge met en scène des scénarii d'attaques auxquels
nos systèmes d'information font faces chaque jour. nos systèmes d'information font faces chaque jour.
</p> </p>
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<div class="carousel-caption"> <div class="carousel-caption">
<p class="text-justify text-bold" style="padding: 20px 16px; font-size: 111%"> <p class="text-justify text-bold" style="padding: 20px 16px; font-size: 111%">
Les 42 équipes doivent, en 4 heures, retracer les attaques à la Les 42 équipes doivent, en 4 heures, retracer les attaques à la
@ -230,28 +230,28 @@
</p> </p>
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<div class="carousel-caption row" style="padding: 12px"> <div class="carousel-caption row" style="padding: 10px">
<div class="col-xs-4"> <div class="col-4">
<a href="https://www.epita.fr/"><img src="/img/epita.png" alt="Épita" style="height: 10vh"></a> <a href="https://srs.epita.fr/"><img src="/img/srs.png" alt="Laboratoire SRS" style="height:12vh"></a>
</div> </div>
<p class="col-xs-8 text-bold" style="font-size: 111%"> <p class="col-8 text-bold" style="font-size: 111%">
Les challenges ont été réalisés par les étudiants de la Les challenges ont été réalisés par les étudiants de la
spécialisation SRS de l'Épita spécialisation SRS de l'Épita.
</p> </p>
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<div class="carousel-caption row" style="padding: 12px"> <div class="carousel-caption row" style="padding: 12px">
<div class="col-xs-4"> <div class="col-4">
<img src="/img/rcc.png" alt="Réserve Citoyenne Cyberdéfense" style="max-width:100%; max-height: 11vh"> <img src="/img/rcc.png" alt="Réserve Citoyenne Cyberdéfense" style="max-width:100%; max-height: 11vh">
</div> </div>
<p class="col-xs-8 text-bold" style="padding: 10px 10px 10px 0; font-size: 111%"> <p class="col-8 text-bold" style="padding: 10px 10px 10px 0; font-size: 111%">
Avec le parrainage du réseau de la Réserve Citoyenne Cyberdéfense Avec le parrainage du réseau de la Réserve Citoyenne Cyberdéfense
</p> </p>
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<div class="carousel-caption" style="padding: 3px 25px; width: 32vw;"> <div class="carousel-caption" style="padding: 3px 25px; width: 32vw;">
<table class="table table-bordered table-condensed table-striped"> <table class="table table-bordered table-condensed table-striped">
<tbody> <tbody>
@ -275,10 +275,10 @@
</table> </table>
</div> </div>
</div> </div>
<div class="item"> <div class="carousel-item">
<div class="carousel-caption row" style="padding: 12px"> <div class="carousel-caption row" style="padding: 12px">
<p class="text-bold" style="padding: 5px; font-size: 105%"> <p class="text-bold" style="padding: 5px;">
Retrouvez la correction des challenges dès demain sur : 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: 150%" 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> <a style="font-family: mono" href="https://fic.srs.epita.fr/"><span class="text-info">https://fic.srs.epita.fr/</span></a>
</span> </span>
@ -295,6 +295,7 @@
</div> </div>
<script src="/js/jquery.min.js"></script> <script src="/js/jquery.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script> <script src="/js/bootstrap.min.js"></script>
<script src="/js/angular-animate.min.js"></script> <script src="/js/angular-animate.min.js"></script>
<script src="/js/angular-route.min.js"></script> <script src="/js/angular-route.min.js"></script>
@ -302,10 +303,5 @@
<script src="/js/i18n/angular-locale_fr-fr.js"></script> <script src="/js/i18n/angular-locale_fr-fr.js"></script>
<script src="/js/public.js"></script> <script src="/js/public.js"></script>
<script src="/js/common.js"></script> <script src="/js/common.js"></script>
<script>
$(".carousel").carousel({
interval: 21000
});
</script>
</body> </body>
</html> </html>

30
frontend/static/views/home.html
View file

@ -1,5 +1,8 @@
<div class="well well-lg" style="text-indent: 1em"> <div class="row">
<h3 style="text-indent: 0">Bienvenue <span ng-repeat="member in my.members"><span ng-if="$last && !$first"> et </span><span ng-if="$middle">, </span>{{ member.firstname | capitalize }} {{ member.lastname | capitalize }}</span> !</h3> <div class="col text-justify">
<div class="jumbotron" style="text-indent: 1em">
<h2 style="text-indent: 0">Bienvenue <span ng-repeat="member in my.members"><span ng-if="$last && !$first"> et </span><span ng-if="$middle">, </span>{{ member.firstname | capitalize }} {{ member.lastname | capitalize }}</span> !</h2>
<hr>
<p ng-if="(my.team_id)"> <p ng-if="(my.team_id)">
Félicitations ! vous êtes maintenant connecté à l'espace de votre Félicitations ! vous êtes maintenant connecté à l'espace de votre
équipe <em>{{ teams[my.team_id].name }}</em>. Vous pouvez changer ce nom équipe <em>{{ teams[my.team_id].name }}</em>. Vous pouvez changer ce nom
@ -27,17 +30,20 @@
<strong>Attention :</strong> puisqu'il s'agit de captures effectuées dans le <strong>Attention :</strong> puisqu'il s'agit de captures effectuées dans le
but de découvrir si des actes malveillants ont été commis sur différents but de découvrir si des actes malveillants ont été commis sur différents
systèmes d'information, les contenus qui sont systèmes d'information, les contenus qui sont
téléchargeables <em>peuvent</em> contenir du contenu malveillant ! téléchargeables <em>peuvent</em> contenir du contenu malveillant&nbsp;!
</div> </div>
<div class="panel panel-default" ng-if="(my.team_id)"> </div>
<div class="panel-heading">
<h3 class="panel-title">Progression</h3> <div class="col-md-3" ng-if="(my.team_id)">
</div> <div class="card text-white bg-primary">
<div class="panel-body"> <div class="card-header">
Progression
</div>
<div class="card-body">
<strong>Vous</strong> <strong>Vous</strong>
<div class="progress progress-striped"> <div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: {{ my.score * 100 / max_gain }}%;"> aria-valuemin="0" aria-valuemax="100" style="width: {{ my.score * 100 / max_gain }}%;">
<span class="sr-only">{{ my.score * 100 / max_gain }}% Complete</span> <span class="sr-only">{{ my.score * 100 / max_gain }}% Complete</span>
</div> </div>
@ -45,7 +51,7 @@
<strong>Le temps</strong> <strong>Le temps</strong>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" <div class="progress-bar bg-info" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: {{ 100 - time.remaining / time.duration * 100 }}%;"> aria-valuemin="0" aria-valuemax="100" style="width: {{ 100 - time.remaining / time.duration * 100 }}%;">
<span class="sr-only">{{ time.remaining }} secondes restantes</span> <span class="sr-only">{{ time.remaining }} secondes restantes</span>
</div> </div>
@ -54,7 +60,7 @@
<div ng-if="rank.length && rank[0].id != my.team_id"> <div ng-if="rank.length && rank[0].id != my.team_id">
<strong>La meilleure équipe ({{ rank[0].name }})</strong> <strong>La meilleure équipe ({{ rank[0].name }})</strong>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: {{ rank[0].score * 100 / max_gain }}%;"> aria-valuemin="0" aria-valuemax="100" style="width: {{ rank[0].score * 100 / max_gain }}%;">
<span class="sr-only">{{ rank[0].score * 100 / max_gain }}% Complete</span> <span class="sr-only">{{ rank[0].score * 100 / max_gain }}% Complete</span>
</div> </div>
@ -64,7 +70,7 @@
<div ng-if="rank[0].id == my.team_id && rank.length > 1"> <div ng-if="rank[0].id == my.team_id && rank.length > 1">
<strong>La seconde équipe ({{ rank[1].name }})</strong> <strong>La seconde équipe ({{ rank[1].name }})</strong>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60"
aria-valuemin="0" aria-valuemax="100" style="width: {{ rank[1].score * 100 / max_gain }}%;"> aria-valuemin="0" aria-valuemax="100" style="width: {{ rank[1].score * 100 / max_gain }}%;">
<span class="sr-only">{{ rank[1].score * 100 / max_gain }}% Complete</span> <span class="sr-only">{{ rank[1].score * 100 / max_gain }}% Complete</span>
</div> </div>

4
frontend/static/views/rank.html
View file

@ -1,5 +1,5 @@
<div class="panel panel-success"> <div class="card bg-primary text-light">
<div class="panel-body"> <div class="card-body">
<input type="search" class="form-control" placeholder="Rechercher" ng-model="query"> <input type="search" class="form-control" placeholder="Rechercher" ng-model="query">
</div> </div>
<table class="table table-hover table-striped"> <table class="table table-hover table-striped">

21
frontend/static/views/rules.html
View file

@ -1,12 +1,14 @@
<div class="well well-lg text-indent"> <div class="card-group">
<div class="card">
<div class="card-body text-indent">
<h2>Débloquage des challenges</h2> <h2>Débloquage des challenges</h2>
<p> <p>
Au début, seul le premier challenge de chaque thème est Au début, seul le premier challenge de chaque thème est
accessible. Les challenges de niveau supérieur sont débloqués en accessible. Les challenges de niveau supérieur sont débloqués en
validant le challenge du niveau qui les précéde. validant le challenge du niveau qui les précéde.
</p> </p>
<hr> <hr>
<h2>Le classement</h2> <h2>Le classement</h2>
<p> <p>
Pour figurer dans le classement, il faut avoir réalisé au moins une action : Pour figurer dans le classement, il faut avoir réalisé au moins une action :
@ -23,8 +25,6 @@
Pour gagner des points, vous devez résoudre les challenges qui vous sont Pour gagner des points, vous devez résoudre les challenges qui vous sont
proposés. Plus l'exercice est compliqué, plus il rapporte de points. proposés. Plus l'exercice est compliqué, plus il rapporte de points.
</p> </p>
<div class="row">
<div class="col-sm-offset-3 col-sm-6">
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
<thead> <thead>
<tr> <tr>
@ -55,8 +55,6 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div>
<h3>Coût des indices</h3> <h3>Coût des indices</h3>
<p> <p>
@ -65,14 +63,16 @@
points, la valeur de points perdue est indiquée pour chaque indice. points, la valeur de points perdue est indiquée pour chaque indice.
</p> </p>
</div>
</div>
<div class="card">
<div class="card-body text-indent">
<h3>Coût de soumission</h3> <h3>Coût de soumission</h3>
<p> <p>
Vous disposez de 9 tentatives pour trouver la/les solutions d'un Vous disposez de 9 tentatives pour trouver la/les solutions d'un
challenge. Au delà, chaque tentative vous fait perdre une petite quantité challenge. Au delà, chaque tentative vous fait perdre une petite quantité
de points comme suit : de points comme suit :
</p> </p>
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
<thead> <thead>
<tr> <tr>
@ -107,8 +107,6 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</div>
<p> <p>
Par exemple : Par exemple :
</p> </p>
@ -122,6 +120,7 @@
La dernière soumission (lorsque tous les flags sont bons) est comptabilisée La dernière soumission (lorsque tous les flags sont bons) est comptabilisée
parmi ce nombre de tentatives. parmi ce nombre de tentatives.
</p> </p>
<hr>
<h3>Bonus</h3> <h3>Bonus</h3>
<p> <p>
@ -146,3 +145,5 @@
thème"></span> thème"></span>
</p> </p>
</div> </div>
</div>
</div>

32
frontend/static/views/team-edit.html
View file

@ -1,6 +1,6 @@
<div class="panel panel-default"> <div class="card">
<div class="panel-heading">Votre équipe est composée de :</div> <div class="card-header">Votre équipe est composée de :</div>
<div class="panel-body" ng-if="!my.members.length"> <div class="card-body" ng-if="!my.members.length">
Passez voir l'équipe serveur pour compléter ces informations. Passez voir l'équipe serveur pour compléter ces informations.
</div> </div>
<ul class="list-group" ng-if="my.members.length"> <ul class="list-group" ng-if="my.members.length">
@ -13,22 +13,20 @@
</ul> </ul>
</div> </div>
<div class="panel panel-info"> <div class="card border-info" style="margin-top: 10px">
<div class="panel-heading">Changer de nom d'équipe</div> <div class="card-header bg-info text-light">Changer de nom d'équipe</div>
<div class="panel-body"> <div class="card-body">
<p ng-class="messageClass" ng-if="message || sberr"><strong ng-if="!sberr">Votre demande a bien été envoyée !</strong><strong ng-if="sberr">{{ sberr }}</strong> {{ message }}</p> <p ng-class="messageClass" ng-if="message || sberr"><strong ng-if="!sberr">Votre demande a bien été envoyée !</strong><strong ng-if="sberr">{{ sberr }}</strong> {{ message }}</p>
<form class="form-horizontal" ng-submit="tsubmit()"> <form ng-submit="tsubmit()">
<div class="form-group row">
<div class="form-group"> <label for="newName" class="col col-form-label">Nouveau nom</label>
<label for="newName" class="col-sm-2 control-label">Nouveau nom</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="text" class="form-control" id="newName" ng-model="newName" placeholder="{{ my.name }}"> <div class="input-group">
</div> <input type="text" class="form-control" id="newName" ng-model="newName" placeholder="{{ my.name }}">
</div> <span class="input-group-btn">
<button class="btn btn-info">Valider</button>
<div class="row form-group"> </span>
<div class="col-sm-offset-3"> </div>
<button class="btn btn-info">Valider</button>
</div> </div>
</div> </div>

69
frontend/static/views/theme.html
View file

@ -1,38 +1,45 @@
<ul class="nav nav-tabs nav-justified"> <nav role="navigation">
<li ng-repeat="(k,exercice) in themes[current_theme].exercices" ng-class="{active: k == current_exercice, disabled: !my.exercices[k]}"><a ng-if="(!my.exercices[k])">{{ exercice.title }}</a><a ng-href="/{{ current_theme }}/{{ k }}" ng-if="(my.exercices[k])">{{ exercice.title }} <span class="glyphicon glyphicon-gift" aria-hidden="true" ng-if="themes[current_theme].exercices[k].curcoeff > 1.0"></span> <span class="glyphicon glyphicon-ok" aria-hidden="true" ng-if="(my.team_id && my.exercices[k].solved)"></span></a></li> <ol class="breadcrumb">
</ul> <li ng-repeat="(k,exercice) in themes[current_theme].exercices" class="breadcrumb-item" ng-class="{active: k == current_exercice, disabled: !my.exercices[k]}"><a ng-if="(!my.exercices[k])">{{ exercice.title }}</a><a ng-href="/{{ current_theme }}/{{ k }}" ng-if="(my.exercices[k])">{{ exercice.title }} <span class="glyphicon glyphicon-gift" aria-hidden="true" ng-if="themes[current_theme].exercices[k].curcoeff > 1.0"></span> <span class="glyphicon glyphicon-ok" aria-hidden="true" ng-if="(my.team_id && my.exercices[k].solved)"></span></a></li>
</ol>
</nav>
<div class="alert alert-warning" style="margin-top:15px;" ng-if="!(my.exercices[current_exercice])"> <div class="alert alert-warning" style="margin-top:15px;" ng-if="!(my.exercices[current_exercice])">
Vous n'avez pas encore accès à cet exercice. Vous n'avez pas encore accès à cet exercice.
</div> </div>
<div style="margin-top: 15px" class="well well-lg" ng-if="(my.exercices[current_exercice])"> <div class="jumbotron" style="margin-top: 15px" class="well well-lg" ng-if="(my.exercices[current_exercice])">
<p ng-bind-html="my.exercices[current_exercice].statement"></p> <p ng-bind-html="my.exercices[current_exercice].statement"></p>
<ul> <ul>
<li><strong>Gain :</strong> <ng-pluralize count="themes[current_theme].exercices[current_exercice].gain" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> <em ng-if="themes[current_theme].exercices[current_exercice].solved < 1">{{ 1 + settings.firstBlood | coeff }} prem's</em> <em ng-if="themes[current_theme].exercices[current_exercice].curcoeff != 1.0">{{ themes[current_theme].exercices[current_exercice].curcoeff | coeff }} bonus</em></li> <li><strong>Gain&nbsp;:</strong> <ng-pluralize count="themes[current_theme].exercices[current_exercice].gain" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> <em ng-if="themes[current_theme].exercices[current_exercice].solved < 1">{{ 1 + settings.firstBlood | coeff }} prem's</em> <em ng-if="themes[current_theme].exercices[current_exercice].curcoeff != 1.0">{{ themes[current_theme].exercices[current_exercice].curcoeff | coeff }} bonus</em></li>
<li><strong>Résolu par :</strong> <ng-pluralize count="themes[current_theme].exercices[current_exercice].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize>.</li> <li><strong>Résolu par&nbsp;:</strong> <ng-pluralize count="themes[current_theme].exercices[current_exercice].solved" when="{'0': 'aucune équipe', 'one': '{} équipe', 'other': '{} équipes'}"></ng-pluralize>.</li>
</ul> </ul>
</div> </div>
<div class="panel panel-default" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].files.length)"> <div class="row">
<div class="panel-heading">
<div class="panel-title"><span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Téléchargements</div> <div class="col-xl" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].files.length)">
<div class="card" style="margin-bottom: 15px">
<div class="card-header text-white">
<span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> Téléchargements
</div> </div>
<div class="list-group"> <div class="list-group">
<a ng-href="{{ file.path }}" target="_self" class="list-group-item" ng-repeat="file in my.exercices[current_exercice].files"> <a ng-href="{{ file.path }}" target="_self" class="list-group-item" ng-repeat="file in my.exercices[current_exercice].files">
<h1 class="pull-left" style="margin: 7px 7px 5px -5px"><span class="glyphicon glyphicon-download" aria-hidden="true"></span></h1> <h1 class="pull-left" style="margin: 7px 7px 5px -5px"><span class="glyphicon glyphicon-download" aria-hidden="true"></span></h1>
<h4 class="list-group-item-heading"><strong><samp>{{ file.name }}</samp></strong></h4> <h4 class="list-group-item-heading"><strong><samp>{{ file.name }}</samp></strong></h4>
<p class="list-group-item-text">Taille : <span title="{{ file.size }} octets">{{ file.size | size }}</span> &ndash; <a href="https://blake2.net/">b2sum</a> : <samp>{{ file.checksum }}</samp></p> <p class="list-group-item-text"><nobr>Taille&nbsp;: <span title="{{ file.size }} octets">{{ file.size | size }}</span></nobr> &ndash; <nobr><span title="blake2.net">b2sum</span>&nbsp;: <samp class="cksum" title="{{ file.checksum }}">{{ file.checksum }}</samp></nobr></p>
</a> </a>
</div> </div>
</div> </div>
</div>
<div class="panel panel-info" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].hints.length)"> <div class="col-xl" ng-if="(my.exercices[current_exercice] && my.exercices[current_exercice].hints.length)">
<div class="panel-heading"> <div class="card border-info">
<div class="panel-title"><span class="glyphicon glyphicon-lamp" aria-hidden="true"></span> Indices</div> <div class="card-header bg-info text-white">
<span class="glyphicon glyphicon-lamp" aria-hidden="true"></span> Indices
</div> </div>
<div class="list-group"> <div class="list-group">
<a target="_self" class="list-group-item" ng-repeat="hint in my.exercices[current_exercice].hints" ng-href="{{ hint.file }}"> <a target="_self" class="list-group-item" ng-repeat="hint in my.exercices[current_exercice].hints" ng-href="{{ hint.file }}">
<button ng-click="hsubmit(hint)" class="pull-right btn btn-info" ng-if="!(hint.content || hint.file)" ng-class="{disabled: hint.submitted}"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Débloquer</button> <button ng-click="hsubmit(hint)" class="float-right btn btn-info" ng-if="!(hint.content || hint.file)" ng-class="{disabled: hint.submitted}"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Débloquer</button>
<button ng-click="hint.hidden = false;" class="pull-right btn btn-info" ng-if="hint.content && hint.hidden"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Afficher</button> <button ng-click="hint.hidden = false;" class="pull-right btn btn-info" ng-if="hint.content && hint.hidden"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span> Afficher</button>
<h1 class="pull-left" style="margin: 5px 7px 5px -5px" ng-if="hint.file"><span class="glyphicon glyphicon-download" aria-hidden="true"></span></h1> <h1 class="pull-left" style="margin: 5px 7px 5px -5px" ng-if="hint.file"><span class="glyphicon glyphicon-download" aria-hidden="true"></span></h1>
<h4 class="list-group-item-heading">{{ hint.title }}</h4> <h4 class="list-group-item-heading">{{ hint.title }}</h4>
@ -42,19 +49,21 @@
</a> </a>
</div> </div>
</div> </div>
</div>
<div class="panel panel-danger" ng-if="my.team_id && my.exercices[current_exercice] && !(my.exercices[current_exercice].solved)"> <div class="col-xl" style="margin-bottom: 25px">
<div class="panel-heading"> <div class="card border-danger" ng-if="my.team_id && my.exercices[current_exercice] && !(my.exercices[current_exercice].solved)" style="margin-bottom: 15px">
<div class="panel-title"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Soumettre une solution</div> <div class="card-header bg-danger text-white">
<span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Soumettre une solution
</div> </div>
<ul class="list-group" ng-if="(my.exercices[current_exercice].tries || my.exercices[current_exercice].submitted || sberr)"> <ul class="list-group" ng-if="(my.exercices[current_exercice].tries || my.exercices[current_exercice].submitted || sberr)">
<li class="list-group-item text-warning" ng-if="my.exercices[current_exercice].tries"><ng-pluralize count="my.exercices[current_exercice].tries" when="{'one': '{} tentative effectuée', 'other': '{} tentatives effectuées'}"></ng-pluralize>. Dernière solution envoyée à {{ my.exercices[current_exercice].solved_time | date:"mediumTime" }}.</li> <li class="list-group-item text-warning" ng-if="my.exercices[current_exercice].tries"><ng-pluralize count="my.exercices[current_exercice].tries" when="{'one': '{} tentative effectuée', 'other': '{} tentatives effectuées'}"></ng-pluralize>. Dernière solution envoyée à {{ my.exercices[current_exercice].solved_time | date:"mediumTime" }}.</li>
<li class="list-group-item" ng-class="messageClass" ng-if="my.exercices[current_exercice].submitted || sberr"><strong ng-if="!sberr">Votre solution a bien été envoyée !</strong><strong ng-if="sberr">{{ sberr }}</strong> {{ message }}</li> <li class="list-group-item" ng-class="messageClass" ng-if="my.exercices[current_exercice].submitted || sberr"><strong ng-if="!sberr">Votre solution a bien été envoyée !</strong><strong ng-if="sberr">{{ sberr }}</strong> {{ message }}</li>
</ul> </ul>
<div class="panel-body" ng-if="!my.exercices[current_exercice].submitted || sberr"> <div class="card-body" ng-if="!my.exercices[current_exercice].submitted || sberr">
<form ng-controller="SubmissionController" ng-submit="ssubmit()"> <form ng-controller="SubmissionController" ng-submit="ssubmit()">
<div class="form-group" ng-repeat="key in flags" ng-class="{'has-success': key.found, 'has-feedback': key.found}"> <div class="form-group" ng-repeat="key in flags" ng-class="{'has-success': key.found, 'has-feedback': key.found}">
<label for="sol_{{ key.id }}">{{ key.name }} :</label> <label for="sol_{{ key.id }}">{{ key.name }}&nbsp;:</label>
<input type="text" class="form-control" id="sol_{{ key.id }}" name="sol_{{ key.id }}" ng-model="key.value" ng-disabled="key.found"> <input type="text" class="form-control" id="sol_{{ key.id }}" name="sol_{{ key.id }}" ng-model="key.value" ng-disabled="key.found">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" ng-if="key.found"></span> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true" ng-if="key.found"></span>
</div> </div>
@ -65,22 +74,22 @@
</div> </div>
</div> </div>
<div class="panel panel-success" ng-if="(my.team_id && my.exercices[current_exercice].solved)"> <div class="card border-success" ng-if="(my.team_id && my.exercices[current_exercice].solved)">
<div class="panel-heading"> <div class="card-header bg-success text-white">
<div class="panel-title"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Challenge réussi !</div> <span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Challenge réussi !
</div> </div>
<div class="panel-body"> <div class="card-body">
Vous êtes la {{ my.exercices[current_exercice].solved_rank }}<sup><ng-pluralize count="my.exercices[current_exercice].solved_rank" when="{'one': 're', 'other': 'e'}"></ng-pluralize></sup> équipe à avoir résolu ce challenge à {{ my.exercices[current_exercice].solved_time | date:"mediumTime" }}. Vous avez marqué <ng-pluralize count="my.exercices[current_exercice].gain" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> ! Vous êtes la {{ my.exercices[current_exercice].solved_rank }}<sup><ng-pluralize count="my.exercices[current_exercice].solved_rank" when="{'one': 're', 'other': 'e'}"></ng-pluralize></sup> équipe à avoir résolu ce challenge à {{ my.exercices[current_exercice].solved_time | date:"mediumTime" }}. Vous avez marqué <ng-pluralize count="my.exercices[current_exercice].gain" when="{'one': '{} point', 'other': '{} points'}"></ng-pluralize> !
</div> </div>
</div> </div>
<div class="panel panel-success" ng-if="(!my.team_id && my.exercices[current_exercice].keys)"> <div class="card border-success" ng-if="(!my.team_id && my.exercices[current_exercice].keys)">
<div class="panel-heading"> <div class="card-heading bg-success text-white">
<div class="panel-title"><span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Solution du challenge</div> <span class="glyphicon glyphicon-flag" aria-hidden="true"></span> Solution du challenge
</div> </div>
<div class="panel-body"> <div class="card-body">
<p> <p>
Vérifiez les clefs que vous trouvez en comparant leur <a href="https://blake2.net/">BLAKE2b</a> : Vérifiez les clefs que vous trouvez en comparant leur <a href="https://blake2.net/">BLAKE2b</a>&nbsp;:
</p> </p>
<dl class="dl-horizontal" ng-repeat="key in my.exercices[current_exercice].keys"> <dl class="dl-horizontal" ng-repeat="key in my.exercices[current_exercice].keys">
<dt title="{{ key.slice(128) }}">{{ key.slice(128) }}</dt> <dt title="{{ key.slice(128) }}">{{ key.slice(128) }}</dt>
@ -88,8 +97,10 @@
</dl> </dl>
<div class="embed-responsive"> <div class="embed-responsive">
<iframe type="text/html" ng-if="my.exercices[current_exercice].video_uri" ng-src="{{ my.exercices[current_exercice].video_uri }}" class="embed-responsive-item"> <iframe type="text/html" ng-if="my.exercices[current_exercice].video_uri" ng-src="{{ my.exercices[current_exercice].video_uri }}" class="embed-responsive-item">
Regardez la vidéo de résolution de cet exercice : <a ng-href="{{ my.exercices[current_exercice].video_uri }}">{{ my.exercices[current_exercice].video_uri }}</a>. Regardez la vidéo de résolution de cet exercice&nbsp;: <a ng-href="{{ my.exercices[current_exercice].video_uri }}">{{ my.exercices[current_exercice].video_uri }}</a>.
</iframe> </iframe>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>

204
frontend/static/welcome.html
View file

@ -1,54 +1,43 @@
<!DOCTYPE html> <!DOCTYPE html>
<html ng-app="FICApp"> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Challenge Forensic</title> <title>Challenge Forensic</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/assets/js/html5shiv.js"></script>
<script src="/assets/js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<meta name="author" content="EPITA Laboratoire SRS"> <meta name="author" content="EPITA Laboratoire SRS">
<meta name="robots" content="all"> <meta name="robots" content="all">
<link href="/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
<link href="/css/fic.css" type="text/css" rel="stylesheet" media="screen">
</head> </head>
<body class="beautiful"> <body class="bg-light beautiful">
<div class="navbar navbar-inverse"> <div class="navbar navbar-expand-lg navbar-dark bg-dark text-light">
<div class="container"> <div class="container">
<div class="row"> <div class="col-md-auto">
<div class="navbar-header col-sm-2 text-left">
<a href="/"> <a href="/">
<img src="/img/fic.png" alt="Forum International de la Cybersécurité"> <img src="/img/fic.png" alt="Forum International de la Cybersécurité">
</a> </a>
</div> </div>
<div class="navbar-right col-sm-2 text-right"> <div id="clock" class="col-md-auto text-center">Challenge Forensic</div>
<div class="col-md-auto">
<a href="http://www.epita.fr/"> <a href="http://www.epita.fr/">
<img src="/img/epita.png" alt="Epita"> <img src="/img/epita.png" alt="Epita">
</a> </a>
</div> </div>
<div id="clock" class="col-sm-8 text-center">
Challenge forensic
</div>
</div>
</div> </div>
</div> </div>
<div class="container" style="margin-top:20px;"> <div class="container text-justify" style="margin-top:20px; text-indent: 1.5em">
<div class="jumbotron text-justify" style="text-indent: 1.5em"> <div class="jumbotron">
<h1 style="text-indent: 0">Bienvenue !</h1> <h1 style="text-indent: 0">Bienvenue !</h1>
<p style="text-indent: 0"> <p style="text-indent: 0" class="alert alert-primary">
<strong> <strong>
Vous n'êtes pas encore connecté en tant qu'équipe sur notre serveur. Vous n'êtes pas encore connecté en tant qu'équipe sur notre serveur.
</strong> </strong>
</p><hr> </p><hr>
<p> <p class="lead">
Bienvenue dans cette première épreuve du challenge forensic&nbsp;! Bienvenue dans cette première épreuve du challenge forensic&nbsp;!
Votre première activité consiste à accéder au site dédié à cet Votre première activité consiste à accéder au site dédié à cet
événement ; ce guide est là pour vous y aider. événement ; ce guide est là pour vous y aider.
@ -59,10 +48,13 @@
contient des fichiers permettant votre authentification auprès de contient des fichiers permettant votre authentification auprès de
nos serveurs. Ne la laissez pas sans surveillance ! nos serveurs. Ne la laissez pas sans surveillance !
</p> </p>
<br> </div>
<h2>Installation du certificat client</h2>
<div class="card" style="margin-bottom:20px;">
<div class="card-header bg-dark">
<h2 style="margin: 0">Installation du certificat client</h2>
</div>
<div class="card-body">
<p> <p>
Le certificat <em>client</em> est envoyé à notre serveur pour vous Le certificat <em>client</em> est envoyé à notre serveur pour vous
identifier et vous authentifier. Votre certificat et votre clef identifier et vous authentifier. Votre certificat et votre clef
@ -86,73 +78,6 @@
<li><a href="#cert-client-ie">Internet Explorer/Edge</a></li> <li><a href="#cert-client-ie">Internet Explorer/Edge</a></li>
<li><a href="#cert-client-safari">Safari</a></li> <li><a href="#cert-client-safari">Safari</a></li>
</ol> </ol>
<br>
<h2 id="cert-client-mozilla-firefox">Mozilla Firefox</h2>
<ol>
<li>Ouvrez la fenêtre des préférences du navigateur.</li>
<li>Choisissez la catégorie <strong>Avancé</strong>.</li>
<li>Sélectionnez l'onglet <strong>Certificats</strong>.</li>
<li>Cliquez sur <strong>Afficher les certificats</strong>.</li>
<li>Sélectionnez l'onglet <strong>Vos certificats</strong>.</li>
<li>Cliquez sur <strong>Importer…</strong> et sélectionnez votre certificat client.</li>
</ol>
<br>
<h2 id="cert-client-chromium">Chromium/Google Chrome</h2>
<h3 id="cert-client-chromium-windows">Sous Microsoft Windows</h3>
<p>
Le navigateur utilise les paramètres du système ; suivez les
instructions concernant <a href="#cert-client-ie">Internet
Explorer</a>.
</p>
<h3 id="cert-client-chromium-macos">Sous Mac OS</h3>
<ol>
<li>Ouvrez le menu des préférences du navigateur.</li>
<li>Cliquez sur <strong>Afficher les paramètres avancés</strong>.</li>
<li>Dans la section <strong>HTTPS/SSL</strong>, cliquez sur <strong>Gérer les certificats</strong>. Le trousseau d'accès se lance.</li>
<li>Dans le menu <strong>Fichier</strong>, sélectionnez <strong>Importer des éléments…</strong> et sélectionnez votre certificat client.</li>
<li>Choisissez un trousseau.</li>
</ol>
<h3 id="cert-client-chromium-gnu-linux">Sous GNU/Linux, FreeBSD ou OpenBSD</h3>
<ol>
<li>Ouvrez le menu des préférences du navigateur.</li>
<li>Cliquez sur <strong>Afficher les paramètres avancés</strong>.</li>
<li>Dans la section <strong>HTTPS/SSL</strong>, cliquez sur <strong>Gérer les certificats</strong>.</li>
<li>Sélectionnez l'onglet <strong>Vos certificats</strong>.</li>
<li>Cliquez sur <strong>Importer…</strong> et sélectionnez votre certificat client.</li>
</ol>
<br>
<h2 id="cert-client-ie">Internet Explorer</h2>
<ol>
<li>Double-cliquez sur le fichier <samp>.p12</samp> présent sur votre clef USB. L'<em>assistant d'importation du certificat</em> apparaît.</li>
<li>Cliquez sur <strong>Suivant</strong>.</li>
<li>Cliquez sur <strong>Suivant</strong>.</li>
<li>Entrez le mot de passe fourni sur papier puis cliquez sur <strong>Suivant</strong>.</li>
<li>Cliquez sur <strong>Suivant</strong> (le certificat sera automatiquement placé dans le magasin <em>Personnel</em>).</li>
<li>Cliquez sur <strong>Terminer</strong>.</li>
</ol>
<p>
Selon votre version de Windows, votre système peut ensuite vous
demander de définir un mot de passe pour protéger ce certificat.
</p>
<p>
<strong>Microsoft Internet Explorer&nbsp;:</strong> Aucune version
de <em>Microsoft Internet Explorer</em> (nom d'« Internet Explorer »
jusqu'à sa version 9 comprise) n'est supportée par notre serveur.
</p>
<br>
<h2 id="cert-client-safari">Safari</h2>
<ol>
<li><strong>Double-cliquez</strong> sur le fichier <samp>.p12</samp> présent sur votre clef USB.</li>
<li>Entrez le mot de passe fourni sur papier puis cliquez sur <strong>Suivant</strong>.</li>
</ol>
<hr> <hr>
<p> <p>
@ -164,6 +89,95 @@
Bon courage&nbsp;! Bon courage&nbsp;!
</p> </p>
</div>
</div>
<div class="card" style="margin-bottom:20px;">
<div class="card-header bg-dark">
<h2 id="cert-client-mozilla-firefox" style="margin: 0">Mozilla Firefox</h2>
</div>
<div class="card-body">
<ol>
<li>Ouvrez la fenêtre des préférences du navigateur.</li>
<li>Choisissez la catégorie <strong>Avancé</strong>.</li>
<li>Sélectionnez l'onglet <strong>Certificats</strong>.</li>
<li>Cliquez sur <strong>Afficher les certificats</strong>.</li>
<li>Sélectionnez l'onglet <strong>Vos certificats</strong>.</li>
<li>Cliquez sur <strong>Importer…</strong> et sélectionnez votre certificat client.</li>
</ol>
</div>
</div>
<div class="card" style="margin-bottom:20px;">
<div class="card-header bg-dark">
<h2 id="cert-client-chromium" style="margin: 0">Chromium/Google Chrome</h2>
</div>
<div class="card-body">
<h3 class="card-title" id="cert-client-chromium-windows">Sous Microsoft Windows</h3>
<p>
Le navigateur utilise les paramètres du système ; suivez les
instructions concernant <a href="#cert-client-ie">Internet
Explorer</a>.
</p>
<h3 class="card-title" id="cert-client-chromium-macos">Sous Mac OS</h3>
<ol>
<li>Ouvrez le menu des préférences du navigateur.</li>
<li>Cliquez sur <strong>Afficher les paramètres avancés</strong>.</li>
<li>Dans la section <strong>HTTPS/SSL</strong>, cliquez sur <strong>Gérer les certificats</strong>. Le trousseau d'accès se lance.</li>
<li>Dans le menu <strong>Fichier</strong>, sélectionnez <strong>Importer des éléments…</strong> et sélectionnez votre certificat client.</li>
<li>Choisissez un trousseau.</li>
</ol>
<h3 class="card-title" id="cert-client-chromium-gnu-linux">Sous GNU/Linux, FreeBSD ou OpenBSD</h3>
<ol>
<li>Ouvrez le menu des préférences du navigateur.</li>
<li>Cliquez sur <strong>Afficher les paramètres avancés</strong>.</li>
<li>Dans la section <strong>HTTPS/SSL</strong>, cliquez sur <strong>Gérer les certificats</strong>.</li>
<li>Sélectionnez l'onglet <strong>Vos certificats</strong>.</li>
<li>Cliquez sur <strong>Importer…</strong> et sélectionnez votre certificat client.</li>
</ol>
</div>
</div>
<div class="card" style="margin-bottom:20px;">
<div class="card-header bg-dark">
<h2 id="cert-client-ie" style="margin: 0">Internet Explorer</h2>
</div>
<div class="card-body">
<ol>
<li>Double-cliquez sur le fichier <samp>.p12</samp> présent sur votre clef USB. L'<em>assistant d'importation du certificat</em> apparaît.</li>
<li>Cliquez sur <strong>Suivant</strong>.</li>
<li>Cliquez sur <strong>Suivant</strong>.</li>
<li>Entrez le mot de passe fourni sur papier puis cliquez sur <strong>Suivant</strong>.</li>
<li>Cliquez sur <strong>Suivant</strong> (le certificat sera automatiquement placé dans le magasin <em>Personnel</em>).</li>
<li>Cliquez sur <strong>Terminer</strong>.</li>
</ol>
<p>
Selon votre version de Windows, votre système peut ensuite vous
demander de définir un mot de passe pour protéger ce certificat.
</p>
<p>
<strong>Microsoft Internet Explorer&nbsp;:</strong> Aucune version
de <em>Microsoft Internet Explorer</em> (nom d'« Internet Explorer »
jusqu'à sa version 9 comprise) n'est supportée par notre serveur.
</p>
</div>
</div>
<div class="card" style="margin-bottom:20px;">
<div class="card-header bg-dark">
<h2 id="cert-client-safari" style="margin: 0">Safari</h2>
</div>
<div class="card-body">
<ol>
<li><strong>Double-cliquez</strong> sur le fichier <samp>.p12</samp> présent sur votre clef USB.</li>
<li>Entrez le mot de passe fourni sur papier puis cliquez sur <strong>Suivant</strong>.</li>
</ol>
</div>
</div> </div>
</div> </div>