diff --git a/assets/css/main.css b/assets/css/main.css index 47967de..f02b3a3 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -217,6 +217,7 @@ p a:hover { transform: translate(-50%, -50%); box-shadow: 0 4px 23px 0 rgb(0 0 0 / 20%); padding: 1.6em; + transition: all 0.5s; } .splitter { @@ -225,6 +226,19 @@ p a:hover { background-color: #3a3a3c; } +.close { + color: #fff; + position: absolute; + right: 1.6em; + font-size: 1.4em; + transition: all 0.2s; +} + +.close:hover { + color: #D3D3D3; + cursor: pointer; +} + .backdrop { width: 150vw; height: 150vh; @@ -234,6 +248,7 @@ p a:hover { padding: 0; transform: translate(-25vw, -25vh); opacity: 0.6; + transition: all 0.5s; z-index: 1 } @@ -255,7 +270,7 @@ p a:hover { } .tutorial .team { - padding: 7px; + padding: 9px; } #time { diff --git a/assets/js/main.js b/assets/js/main.js index 9cb3a4d..3a455dd 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,3 +1,5 @@ +let canClose = true + function autocomplete(inp, arr) { /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/ @@ -251,4 +253,25 @@ function editDistance(s1, s2) { costs[s2.length] = lastValue; } return costs[s2.length]; +} + +document.getElementsByClassName("backdrop")[0].onmousedown = () => { + close() +} + +document.getElementsByClassName("close")[0].onmousedown = () => { + close() +} + +function close() { + if (!canClose) return + canClose = false + let tutorial = document.getElementsByClassName("tutorial")[0] + let backdrop = document.getElementsByClassName("backdrop")[0] + tutorial.style.opacity = 0 + backdrop.style.opacity = 0 + setTimeout(() => { + tutorial.remove() + backdrop.remove() + }, 500) } \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 3ad7905..fd173ac 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -11,6 +11,9 @@
Guess the STEWARDLE in six tries.
Each guess must be a valid F1 driver name who has raced in the 2014 season or later. Hit the enter button to submit.
After each guess, the color of the tiles will change to show how close your guess was to the Driver of the Day
@@ -18,22 +21,16 @@
Examples
The driver is of British nationality.
-
The driver does not race for Mercedes.

The driver previously raced for Haas.
+
The driver previously raced for Williams.
A new STEWARDLE will be available each day!
+A new STEWARDLE will be available each day!