Browse Source

Second version cypto_seul

Baptiste Marty 3 years ago
parent
commit
268f89b053
6 changed files with 103 additions and 15 deletions
  1. 21
    4
      CSS/crypto_seul.css
  2. 1
    0
      CSS/etrange_decouverte.css
  3. 2
    1
      HTML/crypto_seul.html
  4. 1
    1
      HTML/menu.html
  5. BIN
      Images/BigLogo.png
  6. 78
    9
      JAVASCRIPT/crypto_seul.js

+ 21
- 4
CSS/crypto_seul.css View File

@@ -67,12 +67,28 @@ body {
67 67
             }
68 68
 
69 69
             #codeBlock{
70
+                opacity:0;
71
+                animation: fade 2s forwards 1s;
70 72
                 display:flex;
73
+                flex-direction: column;
74
+                align-items: center;
75
+                justify-content: space-around;
71 76
                 margin-top:5vh;
77
+                width:80vw;
78
+                height:20vh;
72 79
             }
73 80
 
74
-                #codeTxt{
81
+                #codeTxtL1{
82
+                    display:flex;
83
+                    justify-content: center;
84
+                    align-items: center;
85
+
86
+                }
87
+
88
+                #codeTxtL2{
75 89
                     display:flex;
90
+                    justify-content: center;
91
+                    align-items: center;
76 92
                 }
77 93
 
78 94
             @keyframes fade {
@@ -85,18 +101,19 @@ body {
85 101
                 justify-content: space-around;
86 102
                 margin-top:5vh;
87 103
                 opacity:0;
104
+                animation: fade 2s forwards 2s;
88 105
             }
89 106
 
90 107
             .button {
91 108
                 outline: none;
92 109
                 border:0.2vw solid #b9b9b9;
93 110
                 border-radius: 4vw;
94
-                width:20vw;
111
+                width:15vw;
95 112
                 padding: 1vw 1.2vw 1vw 1.2vw;
96 113
                 color: black;
97 114
                 font-family: 'Special Elite', cursive;
98 115
                 font-size: 1.5vw;
99
-                background-image: linear-gradient(to top, black -50%, #BF0909 80%);
116
+                background-image: linear-gradient(to top, black -50%, #057B26 80%);
100 117
                 cursor : pointer;
101 118
                 display: flex;
102 119
                 justify-content: center;
@@ -109,7 +126,7 @@ body {
109 126
             }
110 127
 
111 128
             .button:active {
112
-                background-image: linear-gradient(to top, #BF0909 20%, black 150%);
129
+                background-image: linear-gradient(to top, #057B26 20%, black 150%);
113 130
             }
114 131
 
115 132
     footer{

+ 1
- 0
CSS/etrange_decouverte.css View File

@@ -211,6 +211,7 @@ body {
211 211
     display:flex;
212 212
     flex-direction: column;
213 213
     opacity:0;
214
+    z-index:-1;
214 215
 }
215 216
 
216 217
 

+ 2
- 1
HTML/crypto_seul.html View File

@@ -20,7 +20,8 @@
20 20
             <article id="text">
21 21
                 <p id="p1">A vous de deviner le mot de passe !</p>
22 22
                 <div id="codeBlock">
23
-                    <div id="codeTxt"></div>
23
+                    <div id="codeTxtL1"></div>
24
+                    <div id="codeTxtL2"></div>
24 25
                 </div>
25 26
             </article>
26 27
             <div id="buttons">

+ 1
- 1
HTML/menu.html View File

@@ -17,7 +17,7 @@
17 17
     <main>
18 18
         <section>
19 19
             <article id="logoBlock">
20
-                <img id="logo" src="../Images/Logo.png" alt="Logo"/>
20
+                <img id="logo" src="../Images/BigLogo.png" alt="Logo"/>
21 21
             </article>
22 22
             <article>
23 23
                 <span>

BIN
Images/BigLogo.png View File


+ 78
- 9
JAVASCRIPT/crypto_seul.js View File

@@ -1,24 +1,93 @@
1 1
 // select elements
2
-let codeTxt = document.getElementById("codeTxt")
2
+let codeTxtL1 = document.getElementById("codeTxtL1")
3
+let codeTxtL2 = document.getElementById("codeTxtL2")
4
+let button = document.getElementById("buttons")
3 5
 
4
-let mdp = "Le Mot de Passe"
6
+let mdp = "Le petit chaperon rouge"
7
+let mdpletters = mdp.replace(/ /g,'');
8
+let letters = []
9
+
10
+console.log(mdpletters);
5 11
 
6 12
 // functions
13
+
14
+function fillCases(div){
15
+    var letterCase = document.createElement("input");
16
+    letterCase.style.cssText = "background-color:white; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
17
+    div.appendChild(letterCase)
18
+    letters.push(letterCase)
19
+}
20
+
21
+function fillBlanks(div){
22
+    var spaceCase = document.createElement("div")
23
+    spaceCase.style.cssText = "width:3vw; height:5vh; margin:0vw 0.5vw 0vw 0.5vw; ";
24
+    div.appendChild(spaceCase)
25
+}
26
+
7 27
 function styleMdp() {
8 28
     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)
29
+
30
+        if (i > 8){
31
+            if (mdp[i] === ' '){
32
+                fillBlanks(codeTxtL2)
33
+            } else {
34
+                fillCases(codeTxtL2)
35
+            }
13 36
         } 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)
37
+            if (mdp[i] === ' '){
38
+                fillBlanks(codeTxtL1)
39
+            } else {
40
+                fillCases(codeTxtL1)
41
+            }
17 42
         }
18 43
         
19 44
     }
20 45
 }
21 46
 
47
+function colorLetters(index){
48
+    for (let i=0;i<letters.length;i++){
49
+        if (mdpletters[i] === mdpletters[index]){
50
+            letters[i].style.cssText = "background-color:#014bac; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
51
+        }
52
+}
53
+}
54
+
55
+function decolorLetters(){
56
+    for (let i=0;i<letters.length;i++){
57
+            letters[i].style.cssText = "background-color:white; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
58
+    }
59
+}
60
+
61
+function changeSameLetters(event,index){
62
+    for (let i=0;i<letters.length;i++){
63
+        if (mdpletters[i] === mdpletters[index]){
64
+            letters[i].value = event.target.value
65
+        }
66
+}
67
+}
68
+
69
+
70
+function verif(){
71
+    for (let i=0;i<letters.length;i++){
72
+        if (mdpletters[i] === letters[i].value){
73
+            letters[i].style.cssText = "background-color:#057B26; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
74
+        } else {
75
+            letters[i].style.cssText = "background-color:#BF0909; margin:0vw 0.5vw 0vw 0.5vw; width:2.5vw; height:5vh; font-size:1.5vw; text-align:center;border-radius:0.5vw;"
76
+        }
77
+    }
78
+}
79
+
22 80
 styleMdp()
23 81
 
24 82
 // listeners
83
+for (let i=0;i<letters.length;i++){
84
+    letters[i].addEventListener("focus",function(){
85
+        colorLetters(i)
86
+    })
87
+    letters[i].addEventListener("blur",decolorLetters)
88
+    letters[i].addEventListener("change",function(event){
89
+        changeSameLetters(event,i)
90
+    })
91
+}
92
+
93
+button.addEventListener("click",verif)

Loading…
Cancel
Save