Create start menu

assets/css/desktop.css

@@ -1,3 +1,70 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url("/assets/fonts/Roboto-Regular.woff2") format("woff2"), url("/assets/fonts/Roboto-Regular.woff") format("woff"), url("/assets/fonts/Roboto-Regular.ttf") format("ttf");
+  font-weight: normal;
+  font-style: normal; }
+.container {
+  width: 80%;
+  margin: auto; }
+
+.overlay {
+  position: absolute;
+  background: rgba(48, 69, 89, 0.7);
+  z-index: 1000;
+  width: 100%;
+  height: 100%; }
+
+.invisible {
+  display: none; }
+
+.startMenu {
+  z-index: 1001;
+  background: white;
+  box-shadow: rgba(0, 0, 0, 0.5) 0 0 60px;
+  position: relative;
+  width: 25%;
+  height: 65%;
+  margin: auto;
+  margin-top: 7%; }
+
+.startText {
+  padding-top: 2%;
+  color: #2e3639;
+  font-family: Roboto; }
+  .startText h1 {
+    line-height: 2vw;
+    font-size: 1.7rem; }
+    .startText h1 span {
+      display: block;
+      font-size: 2.2rem; }
+  .startText p {
+    text-indent: 1.7rem;
+    font-size: 1rem;
+    line-height: 1.6vw; }
+    .startText p.no-ident {
+      margin-top: 1rem;
+      text-indent: 0; }
+
+.startButton {
+  cursor: pointer;
+  font-size: 1.1rem;
+  background-color: #333;
+  width: 100%;
+  bottom: 0;
+  position: absolute;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-around;
+  height: 5vw; }
+  .startButton div {
+    width: 100%;
+    padding-top: 2vw;
+    text-align: center; }
+  .startButton .play {
+    background-color: #03bd9c; }
+  .startButton .expose {
+    background-color: #3b75ad; }
+
 *, *:after, *:before {
   box-sizing: border-box;
   margin: 0;

assets/css/sass/app/desktop.scss

@@ -1,8 +1,12 @@
+@import "includes/_fonts";
+@import "includes/_globalElements";
+@import "includes/_startMenu";
 // Z-INDEXs:
 // 100 - main
 // 200 - windows
 // 300 - header, menu
 // 400 - screensaver
+// 1000 - overlay
 
 // THEMING VARIABLES
 

assets/css/sass/app/includes/_fonts.scss

@@ -0,0 +1,9 @@
+@font-face {
+    font-family: 'Roboto';
+    src: url('/assets/fonts/Roboto-Regular.woff2') format('woff2'),
+         url('/assets/fonts/Roboto-Regular.woff') format('woff'),
+         url('/assets/fonts/Roboto-Regular.ttf') format('ttf');
+    font-weight: normal;
+    font-style: normal;
+
+}

assets/css/sass/app/includes/_globalElements.scss

@@ -0,0 +1,14 @@
+.container{
+    width:80%;
+    margin:auto;
+}
+.overlay{
+    position: absolute;
+    background: rgba(48, 69, 89, 0.7);
+    z-index:1000;
+    width: 100%;
+    height: 100%;
+}
+.invisible{
+    display:none;
+}

assets/css/sass/app/includes/_startMenu.scss

@@ -0,0 +1,55 @@
+.startMenu{
+    z-index:1001;
+    background:white;
+    box-shadow: rgba(0,0,0,0.5) 0 0 60px;
+    position: relative;
+    width:25%;
+    height:65%;
+    margin:auto;
+    margin-top:7%;
+}
+.startText{
+    padding-top:2%;
+    color:#2e3639;
+    font-family:Roboto;
+    h1{
+        line-height: 2vw;
+        font-size:1.7rem;
+        span{
+            display:block;
+            font-size:2.2rem;
+        }
+    }
+    p{
+        text-indent: 1.7rem;
+        font-size:1rem;
+        line-height: 1.6vw;
+        &.no-ident{
+            margin-top:1rem;
+            text-indent: 0;
+        }
+    }
+}
+.startButton{
+    cursor:pointer;
+    font-size:1.1rem;
+    background-color:#333;
+    width:100%;
+    bottom:0;
+    position:absolute;
+    display:flex;
+    flex-flow: row nowrap;  
+    justify-content: space-around;
+    height: 5vw;
+    div{
+        width: 100%;
+        padding-top: 2vw;
+        text-align: center;
+    }
+    .play{
+        background-color:#03bd9c;
+    }
+    .expose{
+        background-color:#3b75ad;
+    }
+}

assets/js/app.js

@@ -26,6 +26,11 @@ $('.screensaver').on('click', function () {
   $(this).addClass("slideOutUp");
 });
 
+$('.play').on('click', function(){
+    $('.overlay').fadeOut(500);
+    $('.startMenu').fadeOut(500);
+});
+
 function Window(settings) {
 
   // ATTRIBUTES

config.rb

@@ -0,0 +1,25 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "assets/css"
+sass_dir = "assets/css/sass"
+images_dir = "assets/img"
+javascripts_dir = "assets/js"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>TODO supply a title</title>
+        <title>Internet d'hier et d'aujourd'hui : les dangers du web</title>
         <meta charset="UTF-8">
         <link rel="stylesheet" href="assets/css/normalize.css">
         <link rel="stylesheet" href="assets/css/font-awesome.css">
@@ -10,11 +10,13 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body>
+        <div class="loader">
+            
+        </div>
         <header>
           <time class="time" style="float: right">time</time>
           <time class="date" style="float: right">date</time>
         </header>
-        
         <main></main>
         <div class="screensaver">
           <div class="content">
@@ -23,6 +25,25 @@
           </div>
           <div class="unlock">Cliquez pour déverouiller</div>
         </div>
+        <div class="overlay"></div>
+        <div class="startMenu">
+            <div class="container">
+                <div class="startText">
+                    <h1>Internet d'hier et d'aujourd'hui : <span>Le danger des GAFAM</span></h1>
+                    <p>En 2017, les GAFAM (Google, Apple, Facebook, Amazon, Microsoft) centralisent nos données, privées, confidentielles, comme publiques. Elles profitent de leurs positions dominantes pour vendre ces informations aux plus offrants.</p>
+                    <p>Cependant, tout n'est pas perdu, un petit groupe de personne resiste encore et toujours à l'envahisseur.</p>
+                    <p class="no-ident">Cette application interactive a pour but de vous sensibiliser à l'usage que vous avez d'internet.</p>
+                </div>
+            </div>
+            <div class="startButton">
+                <div class="play" id="play">
+                    Jouer
+                </div>
+                <div class="expose" id="expose">
+                    Voir l'exposé
+                </div>
+            </div>
+        </div>
         <script src="assets/js/jquery-3.2.1.min.js"></script>
         <script src="assets/js/app.js"></script>
     </body>

sass/ie.scss

@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */

sass/print.scss

@@ -0,0 +1,3 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

sass/screen.scss

@@ -0,0 +1,6 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+
+@import "compass/reset";

stylesheets/ie.css

@@ -0,0 +1,5 @@
+/* Welcome to Compass. Use this file to write IE specific override styles.
+ * Import this file using the following HTML or equivalent:
+ * <!--[if IE]>
+ *   <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
+ * <![endif]--> */

stylesheets/print.css

@@ -0,0 +1,3 @@
+/* Welcome to Compass. Use this file to define print styles.
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

stylesheets/screen.css

@@ -0,0 +1,68 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+/* line 5, ../../../../../../usr/lib/ruby/gems/2.4.0/gems/compass-1.0.3/vendor/bundle/ruby/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+/* line 22, ../../../../../../usr/lib/ruby/gems/2.4.0/gems/compass-1.0.3/vendor/bundle/ruby/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html {
+  line-height: 1;
+}
+
+/* line 24, ../../../../../../usr/lib/ruby/gems/2.4.0/gems/compass-1.0.3/vendor/bundle/ruby/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+ol, ul {
+  list-style: none;
+}
+
+/* line 26, ../../../../../../usr/lib/ruby/gems/2.4.0/gems/compass-1.0.3/vendor/bundle/ruby/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* line 28, ../../../../../../usr/lib/ruby/gems/2.4.0/gems/compass-1.0.3/vendor/bundle/ruby/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+/* line 30, ../../../../../../usr/lib/ruby/gems/2.4.0/gems/compass-1.0.3/vendor/bundle/ruby/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q, blockquote {
+  quotes: none;
+}
+/* line 103, ../../../../../../usr/lib/ruby/gems/2.4.0/gems/compass-1.0.3/vendor/bundle/ruby/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+/* line 32, ../../../../../../usr/lib/ruby/gems/2.4.0/gems/compass-1.0.3/vendor/bundle/ruby/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+a img {
+  border: none;
+}
+
+/* line 116, ../../../../../../usr/lib/ruby/gems/2.4.0/gems/compass-1.0.3/vendor/bundle/ruby/2.4.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+  display: block;
+}