Gitlab CSE Unil

Skip to content

GitLab

Commit 32860652 authored by M. Chardon's avatar M. Chardon
Browse files

init vigenere

parent 5d8fc9f5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1799 additions and 0 deletions
vigenere/attack.html 0 → 100644
View file @ 32860652
This diff is collapsed.
vigenere/block/contact.html 0 → 100644
View file @ 32860652
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Contacts</h4>
</div>
<div class="modal-body">
<p>
For pedagogic support please contact
</p>
<ul>
<li>Professor <a href="mailto:David-Olivier.Jaquet-Chiffelle@unil.ch">Jaquet-Chiffelle David-Olivier</a></li>
<li>Graduate assistant <a href="mailto:Elenore.Ryser@unil.ch">Ryser Elénore</a></li>
</ul>
<p>For IT support please contact the <a href='http://www.unil.ch/riset/contact' target='_blank'>RISET</a> of University of Lausanne.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
\ No newline at end of file
vigenere/block/contact_fr.html 0 → 100644
View file @ 32860652
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Contacts</h4>
</div>
<div class="modal-body">
<p>
Pour une demande concernant un aspect pédagogique, merci de contacter
</p>
<ul>
<li>Le professeur <a href="mailto:David-Olivier.Jaquet-Chiffelle@unil.ch">Jaquet-Chiffelle David-Olivier</a></li>
<li>L'assistante étudiante <a href="mailto:Elenore.Ryser@unil.ch">Ryser Elénore</a></li>
</ul>
<p>Pour tout support informatique, merci de contacter le <a href='http://www.unil.ch/riset/contact' target='_blank'>RISET</a> de l'université de Lausanne.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
\ No newline at end of file
vigenere/block/credit.html 0 → 100644
View file @ 32860652
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Credits</h4>
</div>
<div class="modal-body">
<p>
Web tool for discovering Vigenère cipher developped by the <a href="http://www.unil.ch/esc" target='_blank'>ESC</a> and the <a href='http://www.unil.ch/riset/' target='_blank'>RISET</a> of University of Lausanne.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
\ No newline at end of file
vigenere/block/credit_fr.html 0 → 100644
View file @ 32860652
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Credits</h4>
</div>
<div class="modal-body">
<p>
Outil Web de découverte du chiffrement Vigenère développé par l'<a href="http://www.unil.ch/esc" target='_blank'>ESC</a> et le <a href='http://www.unil.ch/riset/' target='_blank'>RISET</a> de l'Université de Lausanne.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
\ No newline at end of file
vigenere/block/footer.html 0 → 100644
View file @ 32860652
<div class="container">
<div class="row">
<div class="col-sm-4">
<a class="unilogo-esc" href="http://www.unil.ch/esc" style='font-size: 85px;'></a>
</div>
<div class="col-sm-3">
<ul class="list-unstyled small">
<li>
<a data-toggle="modal" href="#contacts">
<span class="glyphicon glyphicon-envelope"></span>&nbsp;
Contacts
</a>
</li>
<li>
<a data-toggle="modal" href="#credits">
<span class="glyphicon glyphicon-glass"></span>&nbsp;
Credits
</a>
</li>
<li>
<a target="_blank" href="http://unil.ch/central/en/home/legalinformation.html">
<span class="glyphicon glyphicon-briefcase"></span>&nbsp;
Legal information
</a>
</li>
</ul>
</div>
<div class="col-sm-3 col-sm-offset-1">
<p class="text-right small">&copy; 2018 Unil<br/> <a href="http://www.unil.ch/" target="_blank">University of Lausanne</a> <br/>
Version: 1.20 - 17/01/2018<br/>
<a href="">Some rights reverved</a>
</p>
</div>
</div>
</div>
vigenere/block/footer_fr.html 0 → 100644
View file @ 32860652
<div class="container">
<div class="row">
<div class="col-sm-4">
<a class="unilogo-esc" href="http://www.unil.ch/esc" style='font-size: 85px;'></a>
</div>
<div class="col-sm-3">
<ul class="list-unstyled small">
<li>
<a data-toggle="modal" href="#contacts">
<span class="glyphicon glyphicon-envelope"></span>&nbsp;
Contacts
</a></li>
<li>
<a data-toggle="modal" href="#credits">
<span class="glyphicon glyphicon-glass"></span>&nbsp;
Crédits
</a>
</li>
<li>
<a target="_blank" href="http://unil.ch/central/home/legalinformation.html">
<span class="glyphicon glyphicon-briefcase"></span>&nbsp;
Informations légales
</a>
</li>
</ul>
</div>
<div class="col-sm-3 col-sm-offset-1">
<p class="text-right small">&copy; 2018 Unil<br/> <a href="http://www.unil.ch/" target="_blank">Université de Lausanne</a> <br/>
Version: 1.20 - 17/01/2018<br/>
<a href="">Tous droits réservés</a>
</p>
</div>
</div>
</div>
vigenere/block/help_cleartext.html 0 → 100644
View file @ 32860652
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><span class="i18n" data-lang="menu_help"></span></h4>
</div>
<div class="modal-body">
<h4>Encrypt text:</h4>
<ol>
<li>Normalization in order to remove spaces and punctuation.</li>
<li>Choose a key. The key length must be (much) smaller than the length of the plaintext. A long text and a short key will make it easier to decipher the message.</li>
</ol>
<hr/>
<h4 style="padding-top: 10px;">Example:</h4>
<p>Key: SECRET</p>
<table class="table table-striped">
<tr>
<td></td>
<td style="padding-left: 10px;">
A la fin, il ne peut en rester qu’un
</td>
</tr>
<tr>
<td>Message</td>
<td style="padding-left: 10px;font-family: 'Lucida Grande,Lucida Sans,Arial',monospace">
A&nbsp;&nbsp;L&nbsp;&nbsp;A&nbsp;&nbsp;F&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;I&nbsp;&nbsp;L&nbsp;&nbsp;N&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;P&nbsp;&nbsp;E&nbsp;&nbsp;U&nbsp;&nbsp;T&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;S&nbsp;&nbsp;T&nbsp;&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;R&nbsp;&nbsp;Q&nbsp;&nbsp;U&nbsp;&nbsp;U&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;
</td>
</tr>
<tr>
<td>Key</td>
<td style="padding-left: 10px;font-family: 'Lucida Grande,Lucida Sans,Arial',monospace">
S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;&nbsp;&nbsp;E
</td>
</tr>
</table>
<p>Letters are added together using an addition table based on the alphabetical order.</p>
<div class="alert alert-info">
<strong>Example:</strong> A (0) + S (18) = S (18)
</div>
<p>When the addition exceeds Z (25), we start again at the beginning of the alphabet, like if all characters were written on a circle.</p>
<div class="alert alert-info">
<strong>Example:</strong> N (13) + T (19) = G (32 / 6)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;32-26 = 6
</div>
<table class="table table-striped">
<tr>
<td>Plaintext</td>
<td style="padding-left: 10px;font-family: 'Lucida Grande,Lucida Sans,Arial',monospace">
A&nbsp;&nbsp;L&nbsp;&nbsp;A&nbsp;&nbsp;F&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;I&nbsp;&nbsp;L&nbsp;&nbsp;N&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;P&nbsp;&nbsp;E&nbsp;&nbsp;U&nbsp;&nbsp;T&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;S&nbsp;&nbsp;T&nbsp;&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;R&nbsp;&nbsp;Q&nbsp;&nbsp;U&nbsp;&nbsp;U&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;
</td>
</tr>
<tr>
<td>Key</td>
<td style="padding-left: 10px;font-family: 'Lucida Grande,Lucida Sans,Arial',monospace">
S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;&nbsp;&nbsp;E
</td>
</tr>
<tr>
<td>Ciphertext</td>
<td style="padding-left: 10px;font-family: 'Lucida Grande,Lucida Sans,Arial',monospace">
S&nbsp;&nbsp;P&nbsp;&nbsp;C&nbsp;&nbsp;W&nbsp;&nbsp;M&nbsp;&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;A&nbsp;&nbsp;P&nbsp;&nbsp;P&nbsp;&nbsp;V&nbsp;&nbsp;&nbsp;&nbsp;T&nbsp;&nbsp;X&nbsp;&nbsp;M&nbsp;&nbsp;X&nbsp;&nbsp;G&nbsp;&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;V&nbsp;&nbsp;X&nbsp;&nbsp;K&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;I&nbsp;&nbsp;U&nbsp;&nbsp;N&nbsp;&nbsp;M&nbsp;&nbsp;&nbsp;&nbsp;R
</td>
</tr>
</table>
<p>We can use the Vigenère table in order to avoid the calculations.</p>
<hr/>
<div class="panel-group" style="padding-top: 10px;">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseh1">Potential addition for those wanting to go further</a>
</h4>
</div>
<div id="collapseh1" class="panel-collapse collapse">
<div class="panel-body">
<h5>The modulo calculus works with the remainder of the Euclidean division:</h5>
A / B = Q + R&nbsp;&nbsp;&nbsp;&nbsp;A ≡ R (modulo B)<br/>
<h5>Observation about the modulo:</h5>
<table>
<tr>
<td style='padding-left: 20px;'>0/3 = 0 remainder 0</td>
<td style='padding-left: 20px;'>0 ≡ 0 (modulo 3)</td>
</tr>
<tr>
<td style='padding-left: 20px;'>1/3 = 0 remainder 1</td>
<td style='padding-left: 20px;'>1 ≡ 1 (modulo 3)</td>
</tr>
<tr>
<td style='padding-left: 20px;'>2/3 = 0 remainder 2</td>
<td style='padding-left: 20px;'>2 ≡ 2 (modulo 3)</td>
</tr>
<tr>
<td style='padding-left: 20px;'>3/3 = 1 remainder 0</td>
<td style='padding-left: 20px;'>3 ≡ 0 (modulo 3)</td>
</tr>
<tr>
<td style='padding-left: 20px;'>4/3 = 1 remainder 1</td>
<td style='padding-left: 20px;'>4 ≡ 1 (modulo 3)</td>
</tr>
</table>
<p>With the alphabet, we work modulo 26</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
\ No newline at end of file
vigenere/block/help_cleartext_fr.html 0 → 100644
View file @ 32860652
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><span class="i18n" data-lang="menu_help"></span></h4>
</div>
<div class="modal-body">
<h4>Texte encrypté :</h4>
<ol>
<li>Normaliser pour retirer espaces et ponctuations</li>
<li>Choisir une clef d’encryptage. La longueur de la clef doit être (bien) plus petite que la longueur du texte à encrypter. Un long texte et une petite clef rende le décryptage plus facile.</li>
</ol>
<hr/>
<h4 style="padding-top: 10px;">Exemple :</h4>
<p>Clé : SECRET</p>
<table class="table table-striped">
<tr>
<td></td>
<td style="padding-left: 10px;">
A la fin, il ne peut en rester qu’un
</td>
</tr>
<tr>
<td>Message</td>
<td style="padding-left: 10px;font-family: 'Lucida Grande,Lucida Sans,Arial',monospace">
A&nbsp;&nbsp;L&nbsp;&nbsp;A&nbsp;&nbsp;F&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;I&nbsp;&nbsp;L&nbsp;&nbsp;N&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;P&nbsp;&nbsp;E&nbsp;&nbsp;U&nbsp;&nbsp;T&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;S&nbsp;&nbsp;T&nbsp;&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;R&nbsp;&nbsp;Q&nbsp;&nbsp;U&nbsp;&nbsp;U&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;
</td>
</tr>
<tr>
<td>Clé</td>
<td style="padding-left: 10px;font-family: 'Lucida Grande,Lucida Sans,Arial',monospace">
S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;&nbsp;&nbsp;E
</td>
</tr>
</table>
<p>Les lettres sont ajoutées les unes au autres en utilisant une table d’addition basée sur l’ordre alphabétique.</p>
<div class="alert alert-info">
<strong>Exemple :</strong> A (0) + S (18) = S (18)
</div>
<p>Quand les additions excèdent Z (25), nous recommençons au début de l’alphabet, comme si les lettres étaient écrites en cercle.</p>
<div class="alert alert-info">
<strong>Example:</strong> N (13) + T (19) = G (32 / 6)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;32-26 = 6
</div>
<table class="table table-striped">
<tr>
<td>Texte clair</td>
<td style="padding-left: 10px;font-family: 'Lucida Grande,Lucida Sans,Arial',monospace">
A&nbsp;&nbsp;L&nbsp;&nbsp;A&nbsp;&nbsp;F&nbsp;&nbsp;I&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;I&nbsp;&nbsp;L&nbsp;&nbsp;N&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;P&nbsp;&nbsp;E&nbsp;&nbsp;U&nbsp;&nbsp;T&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;S&nbsp;&nbsp;T&nbsp;&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;R&nbsp;&nbsp;Q&nbsp;&nbsp;U&nbsp;&nbsp;U&nbsp;&nbsp;&nbsp;&nbsp;N&nbsp;&nbsp;
</td>
</tr>
<tr>
<td>Clé</td>
<td style="padding-left: 10px;font-family: 'Lucida Grande,Lucida Sans,Arial',monospace">
S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;C&nbsp;&nbsp;&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;R&nbsp;&nbsp;E&nbsp;&nbsp;T&nbsp;&nbsp;S&nbsp;&nbsp;&nbsp;&nbsp;E
</td>
</tr>
<tr>
<td>Texte chiffré</td>
<td style="padding-left: 10px;font-family: 'Lucida Grande,Lucida Sans,Arial',monospace">
S&nbsp;&nbsp;P&nbsp;&nbsp;C&nbsp;&nbsp;W&nbsp;&nbsp;M&nbsp;&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;A&nbsp;&nbsp;P&nbsp;&nbsp;P&nbsp;&nbsp;V&nbsp;&nbsp;&nbsp;&nbsp;T&nbsp;&nbsp;X&nbsp;&nbsp;M&nbsp;&nbsp;X&nbsp;&nbsp;G&nbsp;&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;V&nbsp;&nbsp;X&nbsp;&nbsp;K&nbsp;&nbsp;X&nbsp;&nbsp;&nbsp;&nbsp;G&nbsp;&nbsp;I&nbsp;&nbsp;U&nbsp;&nbsp;N&nbsp;&nbsp;M&nbsp;&nbsp;&nbsp;&nbsp;R
</td>
</tr>
</table>
<p>Nous pouvons utiliser la table de Vigenère pour éviter les calculs.</p>
<hr/>
<div class="panel-group" style="padding-top: 10px;">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapseh1">Pour aller plus loin</a>
</h4>
</div>
<div id="collapseh1" class="panel-collapse collapse">
<div class="panel-body">
<h5>Le calcul en modulo fonctionne avec le reste de la division euclidienne :</h5>
A / B = Q + R&nbsp;&nbsp;&nbsp;&nbsp;A ≡ R (modulo B)<br/>
<h5>Observation à propos du modulo :</h5>
<table>
<tr>
<td style='padding-left: 20px;'>0/3 = 0 reste 0</td>
<td style='padding-left: 20px;'>0 ≡ 0 (modulo 3)</td>
</tr>
<tr>
<td style='padding-left: 20px;'>1/3 = 0 reste 1</td>
<td style='padding-left: 20px;'>1 ≡ 1 (modulo 3)</td>
</tr>
<tr>
<td style='padding-left: 20px;'>2/3 = 0 reste 2</td>
<td style='padding-left: 20px;'>2 ≡ 2 (modulo 3)</td>
</tr>
<tr>
<td style='padding-left: 20px;'>3/3 = 1 reste 0</td>
<td style='padding-left: 20px;'>3 ≡ 0 (modulo 3)</td>
</tr>
<tr>
<td style='padding-left: 20px;'>4/3 = 1 reste 1</td>
<td style='padding-left: 20px;'>4 ≡ 1 (modulo 3)</td>
</tr>
</table>
<p>Avec l’alphabet, nous travaillons modulo 26</p>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
</div>
</div>
</div>
\ No newline at end of file
vigenere/css/dashboard.css 0 → 100644
View file @ 32860652
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
vigenere/css/general.css 0 → 100644
View file @ 32860652
/*
Created on : 18 janv. 2016, 11:05:18
Copyright 2017 Université de Lausanne
License http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
*/
body{
font: "Trebuchet MS", sans-serif;
margin: 20px;
height: 100%;
}
.ic{}
.icX{
width: 40px;
margin-right: 10px;
}
svg{
font: 10px sans-serif;
margin-top: 20px;
}
td ul{
margin-bottom: 0px;
margin-top: 0px;
}
#kasiski_text td{
padding: 2px;
font-size: 90%;
}
.tdcle{
padding-right:15px;
padding-left:15px;
}
.inputcleshift{
width: 30px;
}
.imc_case{
padding: 2px 8px;
width: 10px;
font-size: 95%;
}
.imc_coche{
}
#trGlobalShiftKeyRes{
color: blue;
font-weight: bold;
}
#trGlobalShiftKey{
color: green;
font-weight: bold;
}
#trGlobalShiftKeyDecalRelatif, #trGlobalShift{
font-style: italic;
}
.display{}
#text_brut, #text_normalise, #text_chiffre, #chiffrage_operation, #text_chiffre_colonnes,
#text_chiffre_input, #finalClearText, #div_text_normalise_raw, #div_text_normalise_column,
#div_text_chiffre_raw, #div_text_chiffre_column, #kasiski_text{
font-family: 'Lucida Grande,Lucida Sans,Arial', monospace;
line-height: 1.3em;
}
#text_normalise, #text_chiffre, #text_chiffre_colonnes{
background-color: #e4f1fb;
line-height: 1.3em;
}
#finalClearText{
background-color: #e3fdd7;
line-height: 1.3em;
}
.kasiskiRed{
color:red;
background-color: #ebccd1;
font-size: 1.0em;
font-weight: bold;
}
.kasiskieye:hover{
cursor: pointer;
}
.cleDecalageRelatifRed, .red{
color:red;
font-weight: bold;
}
.cleDecalageRelatifBlue, .blue{
color:blue;
font-weight: bold;
}
.inputDecalageRelatifBlue{
background-color: #a6e1ec;
}
.yellow{
color:darkorange ;
font-weight: bold;
}
.formatTextDiv{}
img {
border: 0 none;
}
.img-flag {
height: 15px;
width: 18px;
}
footer {
background-color: #6c6e73;
box-shadow: 0 3px 3px -1px rgba(0, 0, 0, 0.33) inset;
height: 110px;
overflow: auto;
padding-top: 15px;
position: absolute;
width: 100%;
color:white;
position: absolute;
left: 0;
}