Merge branch 'master' into gh-pages

README.md

@@ -52,16 +52,16 @@ Basé sur une idée originale de Léo Ducas
 Mathieu Jouhet & Nicolas Pelletier
 
 #### Inria
-* *Coordination :* Service communication du centre de recherche Inria Paris - Rocquencourt
-* *Référents médiation :* Thierry Vieville et Laurent Viennot
-* *Référent scientifique :* Léo Ducas
+* **Coordination :** Service communication du centre de recherche Inria Paris - Rocquencourt
+* **Référents médiation :** Thierry Vieville et Laurent Viennot
+* **Référent scientifique :** Léo Ducas
 
 #### Digital Cuisine
-* *Directeur Artistique :* Mathieu Jouhet ([@daformat](https://twitter.com/daformat))
-* *Graphiste :* Nicolas Pelletier
-* *Game engine :* Vincent Mézino
-* *Intégration html, développement javascript:* Mathieu Jouhet
-* *Test :* Olivier Lance, Pierre-Jean Quilleré
+* **Directeur Artistique :** Mathieu Jouhet ([@daformat](https://twitter.com/daformat))
+* **Graphiste :** Nicolas Pelletier
+* **Game engine :** Vincent Mézino
+* **Intégration html, développement javascript:** Mathieu Jouhet
+* **Test :** Olivier Lance, Pierre-Jean Quilleré
 
 ___
 

bonus.html

@@ -133,6 +133,14 @@
         <div class="text-content">
           <p>Quelques ressources supplémentaires pour mieux comprendre la cryptographie</p>
 
+
+          <article class="entry">
+            <h3>Logiciel pour chiffrer ses emails</h3>
+            <p>Pourquoi et comment utiliser openPGP ?<br/>
+            <a href="http://openpgp.vie-privee.org/" target="_blank">http://openpgp.vie-privee.org/</a></p>
+          </article>
+
+
           <article class="entry">
             <h3>Cryptographie asymétrique</h3>
             <p>Définition et explication de la cryptographie asymétrique sur Wikipédia<br/>

css/cryptris.css

@@ -724,7 +724,7 @@ border: 1px solid #0091BB;
 }
 
 .share .encrypted-message .social-actions p{
-	margin: 28px;
+	margin: 11px;
 }
 
 .share .encrypted-message .message-spinner{
@@ -754,7 +754,7 @@ border: 1px solid #0091BB;
 }
 
 /* Disclaimer */
-.share .warning{
+.share p.warning, .share div.warning{
 	display: inline-block;
 
 	background-color: #000;
@@ -805,8 +805,102 @@ border: 1px solid #0091BB;
 }
 
 
+/*modal screen */
+.modal{
+	position: absolute;
+	z-index: 1000;
+	background-color: rgba(0,0,0,0.75);
+	display: block;
+	height: 0;
+	width: 0;
+	overflow: hidden;
+	min-height: 0;
+	min-width: 0;
+
+	-webkit-transition: opacity ease 0.35s;
+	-moz-transition: opacity ease 0.35s;
+	transition: opacity ease 0.35s;
+
+	opacity: 0;
+}
+
+.modal.visible{
+	display: table;
+	height: 100%;
+	width: 100%;
+	opacity: 1;
+
+}
+
+.modal .window{
+	position: relative;
+	padding: 50px;
+	width: auto;
+	height: auto;
+	opacity: 1;
 
+	max-width: 600px;
+
+	display: inline-block;
+	-webkit-transition: all ease 0.3s;
+	-moz-transition: all ease 0.3s;
+	transition: all ease 0.3s;
+
+	-webkit-transform-origin: center;
+	-moz-transform-origin: center;
+	transform-origin: center;
+
+	-webkit-transform: scale(0);
+	-moz-transform: scale(0);
+	transform: scale(0);
+
+}
 
+.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6{
+	margin-top: 0px;
+}
+
+.modal .window.visible{
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	transform: scale(1);
+}
+
+.modal .window .header{
+	position: absolute;
+	width: 100%;
+	height: 0px;
+	top: 0;
+}
+.modal .window .header .btn-close{
+	position: absolute;
+	top: -28px;
+	right: 23px;
+}
+
+.modal .window{
+	background-color: rgba(0,0,0,0.75);
+
+	border-radius: 8px;
+
+	border: 1px solid rgba(175, 238, 247, 0.5);
+	-webkit-box-shadow: 0 0 10px rgba(15, 231, 255, 0.75);
+	box-shadow:  0 0  10px rgba(15, 231, 255, 0.75);
+
+	text-align: center;
+
+}
+
+.modal .window input, .modal .window textarea{
+	border: 1px solid rgba(175, 238, 247, 0.5);
+	background-color: rgba(0, 0, 0, 0);
+	color: #80C9C3;
+	text-align: center;
+	width: 550px;
+	padding: 8px 6px;
+	font-size: 1em;
+	font-family: Inconsolata;
+}
 /*
 	New login screen
 */

index.html

@@ -156,6 +156,9 @@
               <a href="jeu.html"><span class="arrow">▶</span>Nouvelle partie<span class="arrow">◀</span></a>
             </li>
             <li>
+              <a href="intro.html"><span class="arrow">▶</span>Comprendre<span class="arrow">◀</span></a>
+            </li>  
+            <li>              
               <a href="arcade.html"><span class="arrow">▶</span>Arcade<span class="arrow">◀</span></a>
             </li>
             <li>
@@ -185,9 +188,10 @@
 
         <!-- Facebook -->
 
-<!--
+        <!--
           <a href="http://www.facebook.com/sharer.php?s=100&p[url]=http://cryptris.com&p[title]=Cryptris, un jeu sur la cryptographie asymétrique" target="_blank" onclick="javascript:window.open('http://www.facebook.com/sharer.php?s=100&p[url]=http://cryptris.com&p[title]=Cryptris, un jeu sur la cryptographie asymétrique&p[summary]=Jouez contre l’ordinateur pour savoir qui arrivera à décrypter le plus rapidement.','', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600'); return false;"><img class="retina" src="img/[email protected]" data-at2x="img/[email protected]" alt=""></a>
--->
+        -->
+        <a id="share-em"><img class="retina" src="img/[email protected]" data-at2x="img/[email protected]" alt=""></a>
         <a id="share-fb"><img class="retina" src="img/[email protected]" data-at2x="img/[email protected]" alt=""></a>
         <a id="share-tw"><img class="retina" src="img/[email protected]" data-at2x="img/[email protected]" alt=""></a>
         <span
@@ -205,12 +209,12 @@
 
         <!-- Twitter -->
 
-<!--
+        <!--
           <a onclick='javascript:window.open("https://twitter.com/intent/tweet?text=Cryptris - un jeu sur l’univers de la cryptographie asymétrique. Affrontez l’ordinateur sur&url=http://cryptris.com","_blank","toolbar=no, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");' href="https://twitter.com/intent/tweet?text=Cryptris - un jeu sur la cryptographie asymétrique&url=http://cryptris.com" target="_blank"><img class="retina" src="img/[email protected]" data-at2x="img/[email protected]" alt=""></a>
--->
+        -->
 
         <!-- Google plus -->  
-<!--
+        <!--
         <span
           class="g-interactivepost"
           data-contenturl="https://cryptris.com/"
@@ -223,11 +227,27 @@
           data-calltoactiondeeplinkid="/">
           <a href="#"><img class="retina" src="img/[email protected]" data-at2x="img/[email protected]" alt=""></a>
         </span>
--->
+        -->
 
       </div>
     </div>
 
+
+
+    <div class="wrapper modal">
+      <div class="vertical-centering">
+        <div class="window">
+
+        <header class="header"><a href="#" class="btn-close"><img src="img/btn-close.png"></a></header>
+
+        <h2>Partager par email</h2>
+          <p>Copiez-collez cette adresse pour partager le jeu par email&nbsp;:</p>
+          <input id="share-url" value="[...]">
+        </div>
+      </div>
+    </div>
+
+
     <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 
     <script type="text/javascript">

intro.html

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Documents introductifs au jeu - Cryptris</title>
+    <meta name="viewport" content="" id="viewport"/>
+    <meta charset="utf-8">
+    <meta name="apple-mobile-web-app-title" content="Cryptris">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
+    <link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144x144.png" />
+    <link rel="apple-touch-icon" sizes="57x57" href="img/apple-touch-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-120x120.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-76x76.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-152x152.png" />
+
+    <link href="img/apple-touch-startup-image-320x460.png"
+          media="(device-width: 320px) and (device-height: 480px)
+             and (-webkit-device-pixel-ratio: 1)"
+          rel="apple-touch-startup-image">
+    <link href="img/apple-touch-startup-image-640x920.png"
+          media="(device-width: 320px) and (device-height: 480px)
+             and (-webkit-device-pixel-ratio: 2)"
+          rel="apple-touch-startup-image">              
+    <link href="img/apple-touch-startup-image-640x1096.png"
+          media="(device-width: 320px) and (device-height: 568px)
+             and (-webkit-device-pixel-ratio: 2)"
+          rel="apple-touch-startup-image">
+
+    <link href="img/apple-touch-startup-image-768x1004.png"
+          media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: portrait)
+             and (-webkit-device-pixel-ratio: 1)"
+          rel="apple-touch-startup-image">
+    <link href="img/apple-touch-startup-image-748x1024.png"
+          media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: landscape)
+             and (-webkit-device-pixel-ratio: 1)"
+          rel="apple-touch-startup-image">
+
+    <link href="img/apple-touch-startup-image-1536x2008.png"
+          media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: portrait)
+             and (-webkit-device-pixel-ratio: 2)"
+          rel="apple-touch-startup-image">
+    <link href="img/apple-touch-startup-image-1496x2048.png"
+          media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: landscape)
+             and (-webkit-device-pixel-ratio: 2)"
+          rel="apple-touch-startup-image">
+
+    <!-- Css -->
+    <link href="css/fonts.css" rel="stylesheet" media="screen">
+    <link href="css/cryptris.css" rel="stylesheet" media="screen">
+
+    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="vendor/html5shiv.js"></script>
+      <script src="vendor/respond.min.js"></script>
+    <![endif]-->
+
+    <script src="vendor/jquery-1.10.2.min.js"></script>
+    <script src="js/viewport.js"></script>
+    <script src="js/mobile-detection.js"></script>
+    <script src="js/count-characters-left.js"></script>
+    <script src="js/keyboard-nav.js"></script>
+    <script src="js/share-animate-steps.js"></script>
+
+
+    <!--LOAD EXTERNAL JS FILE-->
+    <script type="text/javascript" src="./vendor/dat.gui.min.js"></script>
+    <script type="text/javascript" src="./vendor/caat.js"></script>
+
+    <!--LOAD CUSTOM JS FILE-->
+    <script type="text/javascript" src="./js/game_engine/global.js"></script>
+    <script type="text/javascript" src="./js/game_engine/game.js"></script>
+    <script type="text/javascript" src="./js/game_engine/controls.js"></script>
+    <script type="text/javascript" src="./js/game_engine/game_box.js"></script>
+    <script type="text/javascript" src="./js/game_engine/info_column.js"></script>
+    <script type="text/javascript" src="./js/game_engine/message_columns.js"></script>
+    <script type="text/javascript" src="./js/game_engine/key_columns.js"></script>
+    <script type="text/javascript" src="js/preloaded_images.js"></script>
+    <script type="text/javascript" src="js/game_engine/share.js"></script>
+
+
+  </head>
+  <body class="share">
+
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-46578010-1', 'mathieujouhet.com');
+  ga('send', 'pageview');
+
+</script>  
+
+    <div class="wrapper bg-circuits block">
+
+      <div class="animation">
+        <div class="layer-00 blinking-smooth-1"></div>
+        <div class="layer-01 blinking-smooth-2"></div>
+        <div class="layer-02 blinking-smooth-3"></div>
+        <div class="layer-03 blinking-smooth-4"></div>
+      </div>      
+
+      <div class="wrapper" id="step1">
+
+        <div class="vertical-centering">
+            <img class="cryptris-logo-medium" src="img/logo-cryptris-large.png">
+
+        <div>
+          <h2>Documents introductifs au jeu</h2>
+          <ul class="main-menu selectable">
+            <li>
+              <a href="http://images.math.cnrs.fr/Cryptris-1-2-Comprendre-une-des.html"><span class="arrow">▶</span>Comprendre Cryptris<span class="arrow">◀</span></a>
+            </li>
+            <li>
+              <a href="http://images.math.cnrs.fr/Cryptris-2-2-Les-dessous.html"><span class="arrow">▶</span>Les dessous géométriques<span class="arrow">◀</span></a>
+            </li>
+
+            <li>
+              <a href="docs/fiche-pedagogique.pdf"><span class="arrow">▶</span>Conseils pédagogiques<span class="arrow">◀</span></a>
+            </li>
+            <li>
+              Dialogue enfant-scientifique
+              <a href="docs/cryptis1.mp3"><span class="arrow">▶</span>(audio 1/3)<span class="arrow">◀</span></a> 
+              <a href="docs/cryptis2.mp3"><span class="arrow">▶</span>(audio 2/3)<span class="arrow">◀</span></a>
+              <a href="docs/cryptis3.mp3"><span class="arrow">▶</span>(audio 3/3)<span class="arrow">◀</span></a>
+            </li>
+            <li>
+              <a href="jeu.html"><span class="arrow">▶</span>Jouer<span class="arrow">◀</span></a>
+            </li>
+          </ul>
+        </div>
+
+        </div>
+
+      </div>
+
+    </div>
+
+    <a href="./index.html" class="btn-close"><img src="img/btn-close.png"></a>
+
+    <!-- <script src="vendor/retina.js"></script> -->
+
+    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
+  </body>
+</html>