Browse Source

Create start menu

master
Dryusdan 3 years ago
parent
commit
497f0a5ee3
43 changed files with 294 additions and 4 deletions
  1. BIN
      .sass-cache/3550d13cda90d0c8406fca2db74a74a435e52bdd/animate.scssc
  2. BIN
      .sass-cache/3550d13cda90d0c8406fca2db74a74a435e52bdd/desktop.scssc
  3. BIN
      .sass-cache/3550d13cda90d0c8406fca2db74a74a435e52bdd/normalize.scssc
  4. BIN
      .sass-cache/3b9df6d74647cd633634d27081df42e4415ce120/_utilities.scssc
  5. BIN
      .sass-cache/71053266c7f93eb69f891bdf34e1652f51bfada1/ie.scssc
  6. BIN
      .sass-cache/71053266c7f93eb69f891bdf34e1652f51bfada1/print.scssc
  7. BIN
      .sass-cache/71053266c7f93eb69f891bdf34e1652f51bfada1/screen.scssc
  8. BIN
      .sass-cache/cd1fe277b8ae2079ea31bc2bd1afc669c4d39766/_reset.scssc
  9. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_animated.scssc
  10. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_bordered-pulled.scssc
  11. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_core.scssc
  12. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_fixed-width.scssc
  13. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_icons.scssc
  14. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_larger.scssc
  15. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_list.scssc
  16. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_mixins.scssc
  17. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_path.scssc
  18. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_rotated-flipped.scssc
  19. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_screen-reader.scssc
  20. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_stacked.scssc
  21. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_variables.scssc
  22. BIN
      .sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/font-awesome.scssc
  23. BIN
      .sass-cache/f8a8cd4a17a57f9a41dc41e00f61fbbe5329b9f6/_fonts.scssc
  24. BIN
      .sass-cache/f8a8cd4a17a57f9a41dc41e00f61fbbe5329b9f6/_globalElements.scssc
  25. BIN
      .sass-cache/f8a8cd4a17a57f9a41dc41e00f61fbbe5329b9f6/_startMenu.scssc
  26. +67
    -0
      assets/css/desktop.css
  27. +2
    -2
      assets/css/desktop.css.map
  28. +4
    -0
      assets/css/sass/app/desktop.scss
  29. +9
    -0
      assets/css/sass/app/includes/_fonts.scss
  30. +14
    -0
      assets/css/sass/app/includes/_globalElements.scss
  31. +55
    -0
      assets/css/sass/app/includes/_startMenu.scss
  32. BIN
      assets/fonts/Roboto-Regular.ttf
  33. BIN
      assets/fonts/Roboto-Regular.woff
  34. BIN
      assets/fonts/Roboto-Regular.woff2
  35. +5
    -0
      assets/js/app.js
  36. +25
    -0
      config.rb
  37. +23
    -2
      index.html
  38. +5
    -0
      sass/ie.scss
  39. +3
    -0
      sass/print.scss
  40. +6
    -0
      sass/screen.scss
  41. +5
    -0
      stylesheets/ie.css
  42. +3
    -0
      stylesheets/print.css
  43. +68
    -0
      stylesheets/screen.css

BIN
.sass-cache/3550d13cda90d0c8406fca2db74a74a435e52bdd/animate.scssc View File


BIN
.sass-cache/3550d13cda90d0c8406fca2db74a74a435e52bdd/desktop.scssc View File


BIN
.sass-cache/3550d13cda90d0c8406fca2db74a74a435e52bdd/normalize.scssc View File


BIN
.sass-cache/3b9df6d74647cd633634d27081df42e4415ce120/_utilities.scssc View File


BIN
.sass-cache/71053266c7f93eb69f891bdf34e1652f51bfada1/ie.scssc View File


BIN
.sass-cache/71053266c7f93eb69f891bdf34e1652f51bfada1/print.scssc View File


BIN
.sass-cache/71053266c7f93eb69f891bdf34e1652f51bfada1/screen.scssc View File


BIN
.sass-cache/cd1fe277b8ae2079ea31bc2bd1afc669c4d39766/_reset.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_animated.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_bordered-pulled.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_core.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_fixed-width.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_icons.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_larger.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_list.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_mixins.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_path.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_rotated-flipped.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_screen-reader.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_stacked.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/_variables.scssc View File


BIN
.sass-cache/e76bb44158c73dce624592b484f39cbbd01aa953/font-awesome.scssc View File


BIN
.sass-cache/f8a8cd4a17a57f9a41dc41e00f61fbbe5329b9f6/_fonts.scssc View File


BIN
.sass-cache/f8a8cd4a17a57f9a41dc41e00f61fbbe5329b9f6/_globalElements.scssc View File


BIN
.sass-cache/f8a8cd4a17a57f9a41dc41e00f61fbbe5329b9f6/_startMenu.scssc View File


+ 67
- 0
assets/css/desktop.css View File

@ -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;


+ 2
- 2
assets/css/desktop.css.map
File diff suppressed because it is too large
View File


+ 4
- 0
assets/css/sass/app/desktop.scss View File

@ -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


+ 9
- 0
assets/css/sass/app/includes/_fonts.scss View File

@ -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;
}

+ 14
- 0
assets/css/sass/app/includes/_globalElements.scss View File

@ -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;
}

+ 55
- 0
assets/css/sass/app/includes/_startMenu.scss View File

@ -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;
}
}

BIN
assets/fonts/Roboto-Regular.ttf View File


BIN
assets/fonts/Roboto-Regular.woff View File


BIN
assets/fonts/Roboto-Regular.woff2 View File


+ 5
- 0
assets/js/app.js View File

@ -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


+ 25
- 0
config.rb View File

@ -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

+ 23
- 2
index.html View File

@ -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>


+ 5
- 0
sass/ie.scss View File

@ -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]--> */

+ 3
- 0
sass/print.scss View File

@ -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" /> */

+ 6
- 0
sass/screen.scss View File

@ -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";

+ 5
- 0
stylesheets/ie.css View File

@ -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]--> */

+ 3
- 0
stylesheets/print.css View File

@ -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" /> */

+ 68
- 0
stylesheets/screen.css View File

@ -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;
}

Loading…
Cancel
Save