Browse Source

Page reussite

Baptiste Marty 11 months ago
parent
commit
c2ae894a77
5 changed files with 151 additions and 7 deletions
  1. 14
    2
      CSS/crypto_seul.css
  2. 90
    0
      CSS/reussite.css
  3. 2
    1
      HTML/crypto_seul.html
  4. 28
    0
      HTML/reussite.html
  5. 17
    4
      JAVASCRIPT/crypto_seul.js

+ 14
- 2
CSS/crypto_seul.css View File

@@ -113,7 +113,7 @@ body {
113 113
                 color: black;
114 114
                 font-family: 'Special Elite', cursive;
115 115
                 font-size: 1.5vw;
116
-                background-image: linear-gradient(to top, black -50%, #057B26 80%);
116
+                
117 117
                 cursor : pointer;
118 118
                 display: flex;
119 119
                 justify-content: center;
@@ -125,10 +125,22 @@ body {
125 125
                 box-shadow: 0 0 3vw  #B0C4DE;
126 126
             }
127 127
 
128
-            .button:active {
128
+            #reset:active {
129
+                background-image: linear-gradient(to top, #BF0909 20%, black 150%);
130
+            }
131
+
132
+            #reset {
133
+                background-image: linear-gradient(to top, black -50%, #BF0909 80%);
134
+            }
135
+
136
+            #validate:active {
129 137
                 background-image: linear-gradient(to top, #057B26 20%, black 150%);
130 138
             }
131 139
 
140
+            #validate {
141
+                background-image: linear-gradient(to top, black -50%, #057B26 80%);
142
+            }
143
+
132 144
     footer{
133 145
         height:15vh;
134 146
         display:flex;

+ 90
- 0
CSS/reussite.css View File

@@ -0,0 +1,90 @@
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
+            @keyframes fade {
70
+                0% {opacity :0}
71
+                100% {opacity:1}
72
+            }
73
+
74
+footer{
75
+    height:15vh;
76
+    display:flex;
77
+    flex-direction: column;
78
+    justify-content:flex-end;
79
+    align-items: center;
80
+    font-size:1vw;
81
+    margin-top:2vw;
82
+}
83
+
84
+    #names{
85
+        margin : 0;
86
+    }
87
+
88
+    #rights{
89
+        margin-bottom:0;
90
+    }

+ 2
- 1
HTML/crypto_seul.html View File

@@ -25,7 +25,8 @@
25 25
                 </div>
26 26
             </article>
27 27
             <div id="buttons">
28
-                <button class="button">Valider</button>
28
+                <button class="button" id="reset">Remettre à zéro</button>
29
+                <a class="button" id="validate">Valider</a>
29 30
             </div>
30 31
         </section>
31 32
     </main>

+ 28
- 0
HTML/reussite.html View File

@@ -0,0 +1,28 @@
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/reussite.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
+</head>
12
+<body>
13
+    <header>
14
+        <h1>Bravo !</h1>
15
+        <nav><a href='./menu.html'>Retourner au menu</a></nav>
16
+    </header>
17
+    <main id="main">
18
+        <section id="content">
19
+            <article id="text">
20
+                <p id="p1">Vous avez atteint la salle secrète</p>
21
+        </section>
22
+    </main>
23
+    <footer>
24
+        <p id="names">Copyright © 2020 Florian EHR - Pierre FAVARY - Baptiste MARTY</p>
25
+        <p id="rights">Tous droits réservés </p>
26
+    </footer>
27
+</body>
28
+</html>

+ 17
- 4
JAVASCRIPT/crypto_seul.js View File

@@ -1,10 +1,10 @@
1 1
 // select elements
2 2
 let codeTxtL1 = document.getElementById("codeTxtL1")
3 3
 let codeTxtL2 = document.getElementById("codeTxtL2")
4
-let button = document.getElementById("buttons")
4
+let buttons = document.getElementById("buttons")
5 5
 
6 6
 let mdp = "Le petit chaperon rouge"
7
-let mdpletters = mdp.replace(/ /g,'');
7
+let mdpletters = mdp.replace(/ /g,'').toUpperCase();
8 8
 let letters = []
9 9
 
10 10
 console.log(mdpletters);
@@ -13,6 +13,7 @@ console.log(mdpletters);
13 13
 
14 14
 function fillCases(div){
15 15
     var letterCase = document.createElement("input");
16
+    letterCase.setAttribute("maxlength",1)
16 17
     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 18
     div.appendChild(letterCase)
18 19
     letters.push(letterCase)
@@ -68,13 +69,24 @@ function changeSameLetters(event,index){
68 69
 
69 70
 
70 71
 function verif(){
72
+    var AllOk = true
71 73
     for (let i=0;i<letters.length;i++){
72
-        if (mdpletters[i] === letters[i].value){
74
+        if (mdpletters[i] === letters[i].value.toUpperCase()){
73 75
             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 76
         } else {
75 77
             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;"
78
+            AllOk = false;
76 79
         }
77 80
     }
81
+    if (AllOk){
82
+        buttons.children[1].setAttribute("href","reussite.html")
83
+    }
84
+}
85
+
86
+function reset(){
87
+    for (let i=0;i<letters.length;i++){
88
+        letters[i].value = null;
89
+    }
78 90
 }
79 91
 
80 92
 styleMdp()
@@ -90,4 +102,5 @@ for (let i=0;i<letters.length;i++){
90 102
     })
91 103
 }
92 104
 
93
-button.addEventListener("click",verif)
105
+buttons.children[1].addEventListener("click",verif)
106
+buttons.children[0].addEventListener("click",reset)

Loading…
Cancel
Save