Browse Source

First version of Crypto_Seul

Baptiste Marty 3 years ago
parent
commit
f1ac25a6c8
5 changed files with 192 additions and 1 deletions
  1. 131
    0
      CSS/crypto_seul.css
  2. 36
    0
      HTML/crypto_seul.html
  3. 1
    1
      HTML/etrange_decouverte.html
  4. BIN
      Images/Logo.png
  5. 24
    0
      JAVASCRIPT/crypto_seul.js

+ 131
- 0
CSS/crypto_seul.css View File

@@ -0,0 +1,131 @@
1
+body {
2
+    display: flex;
3
+    flex-direction: column;
4
+    justify-content: space-between;
5
+    align-items: center;
6
+    color:white;
7
+    font-family: 'Special Elite', cursive;
8
+    background-color: black;
9
+    height: 95vh;
10
+}
11
+
12
+    header {
13
+        color: #BF0909;
14
+        font-family: 'Special Elite', cursive;
15
+        display: flex;
16
+        flex-direction: column;
17
+        justify-content: space-between;
18
+        align-items: center;
19
+        height:15vh;
20
+        z-index:0;
21
+    }
22
+        h1 {
23
+            font-size: min(4vw,7vh);
24
+            margin-bottom:0.5vw;
25
+        }
26
+
27
+        header a {
28
+            font-size: min(1vw,1.7vh);
29
+            text-decoration: none;
30
+            color: #494949;
31
+        }
32
+
33
+        header a:hover {
34
+            color: white;
35
+        }
36
+
37
+    #main {
38
+        display: flex;
39
+        height:65vh;
40
+    }
41
+
42
+        #content {
43
+            display: flex;
44
+            flex-direction: column;
45
+            justify-content: space-around;
46
+            width: 50vw;
47
+        }
48
+
49
+            #text {
50
+                margin-top:4vh;
51
+                font-family: 'Special Elite', cursive;
52
+                font-size: min(1.8vw,3.6vh);
53
+                text-align: center;
54
+                color: white;
55
+                cursor:default;
56
+                display:flex;
57
+                flex-direction:column;
58
+                justify-content: center;
59
+                align-items: center;
60
+            }
61
+
62
+            #p1{
63
+                opacity:0;
64
+                margin:0.1vh 0vw 0.1vh 0vw;
65
+                animation: fade 2s forwards;
66
+                
67
+            }
68
+
69
+            #codeBlock{
70
+                display:flex;
71
+                margin-top:5vh;
72
+            }
73
+
74
+                #codeTxt{
75
+                    display:flex;
76
+                }
77
+
78
+            @keyframes fade {
79
+                0% {opacity :0}
80
+                100% {opacity:1}
81
+            }
82
+
83
+            #buttons {
84
+                display: flex;
85
+                justify-content: space-around;
86
+                margin-top:5vh;
87
+                opacity:0;
88
+            }
89
+
90
+            .button {
91
+                outline: none;
92
+                border:0.2vw solid #b9b9b9;
93
+                border-radius: 4vw;
94
+                width:20vw;
95
+                padding: 1vw 1.2vw 1vw 1.2vw;
96
+                color: black;
97
+                font-family: 'Special Elite', cursive;
98
+                font-size: 1.5vw;
99
+                background-image: linear-gradient(to top, black -50%, #BF0909 80%);
100
+                cursor : pointer;
101
+                display: flex;
102
+                justify-content: center;
103
+                align-items: center;
104
+            }
105
+
106
+            .button:hover {
107
+                border: 0.2vw solid white;
108
+                box-shadow: 0 0 3vw  #B0C4DE;
109
+            }
110
+
111
+            .button:active {
112
+                background-image: linear-gradient(to top, #BF0909 20%, black 150%);
113
+            }
114
+
115
+    footer{
116
+        height:15vh;
117
+        display:flex;
118
+        flex-direction: column;
119
+        justify-content:flex-end;
120
+        align-items: center;
121
+        font-size:1vw;
122
+        margin-top:2vw;
123
+    }
124
+    
125
+        #names{
126
+            margin : 0;
127
+        }
128
+
129
+        #rights{
130
+            margin-bottom:0;
131
+        }

+ 36
- 0
HTML/crypto_seul.html View File

@@ -0,0 +1,36 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+    <meta charset="UTF-8">
5
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+    <title>INSAïde</title>
7
+    <link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
8
+    <link rel="stylesheet" href="../CSS/crypto_seul.css">
9
+    <link rel="preconnect" href="https://fonts.gstatic.com">
10
+    <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> 
11
+    <script defer type="text/javascript" src="../JAVASCRIPT/crypto_seul.js"></script>
12
+</head>
13
+<body>
14
+    <header>
15
+        <h1>Le code secret</h1>
16
+        <nav><a href='./menu.html'>Retourner au menu</a></nav>
17
+    </header>
18
+    <main id="main">
19
+        <section id="content">
20
+            <article id="text">
21
+                <p id="p1">A vous de deviner le mot de passe !</p>
22
+                <div id="codeBlock">
23
+                    <div id="codeTxt"></div>
24
+                </div>
25
+            </article>
26
+            <div id="buttons">
27
+                <button class="button">Valider</button>
28
+            </div>
29
+        </section>
30
+    </main>
31
+    <footer>
32
+        <p id="names">Copyright © 2020 Florian EHR - Pierre FAVARY - Baptiste MARTY</p>
33
+        <p id="rights">Tous droits réservés </p>
34
+    </footer>
35
+</body>
36
+</html>

+ 1
- 1
HTML/etrange_decouverte.html View File

@@ -12,7 +12,7 @@
12 12
 </head>
13 13
 <body>
14 14
     <div id="eyeBlock">
15
-        <div id="supEye"><p class="endText" id="loose">Vous avez perdu !</p></div>
15
+        <div id="supEye"><p class="endText" id="loose">Vous êtes allé(e) dormir<br/>vous laissez tomber l'aventure.</p></div>
16 16
         <div id="eye"></div>
17 17
         <div id="infEye"><a class="endText" id="return" href='./menu.html'>Recommencer l'aventure</a></div>
18 18
     </div>

BIN
Images/Logo.png View File


+ 24
- 0
JAVASCRIPT/crypto_seul.js View File

@@ -0,0 +1,24 @@
1
+// select elements
2
+let codeTxt = document.getElementById("codeTxt")
3
+
4
+let mdp = "Le Mot de Passe"
5
+
6
+// functions
7
+function styleMdp() {
8
+    for (let i=0;i<mdp.length;i++){
9
+        if (mdp[i] === ' '){
10
+            var spaceCase = document.createElement("div")
11
+            spaceCase.style.cssText = "width:3vw;height:5vh;margin:0vw 0.5vw 0vw 0.5vw;";
12
+            codeTxt.appendChild(spaceCase)
13
+        } else {
14
+            var letterCase = document.createElement("input");
15
+            letterCase.style.cssText = "background-color:white;margin:0vw 0.5vw 0vw 0.5vw;width:3vw;height:5vh"
16
+            codeTxt.appendChild(letterCase)
17
+        }
18
+        
19
+    }
20
+}
21
+
22
+styleMdp()
23
+
24
+// listeners

Loading…
Cancel
Save