From 4ce85ac1c4552922d56e888492e4c0ee0fea895a Mon Sep 17 00:00:00 2001 From: ssyyhhrr <44934807+ssyyhhrr@users.noreply.github.com> Date: Sun, 19 Jun 2022 21:52:43 +0100 Subject: [PATCH] Tutorial Message --- assets/css/main.css | 63 +++++++++++++++++++++++++++++++++++++++++++++ views/index.ejs | 40 +++++++++++++++++++++++++++- 2 files changed, 102 insertions(+), 1 deletion(-) diff --git a/assets/css/main.css b/assets/css/main.css index c65d061..47967de 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -156,6 +156,18 @@ input[type=text] { font-family: "FormulaOne"; } +.tutorial .text { + font-size: 0.9em; + line-height: 45px; + vertical-align: middle; + position: absolute; + width: 45px; + margin-left: auto; + margin-right: auto; + color: white; + font-family: "FormulaOne"; +} + .credits { color: white; position: absolute; @@ -167,6 +179,11 @@ input[type=text] { transform: translateX(-50%) } +.tutorial p { + color: white; + font-family: "FormulaOne"; +} + .credits p { margin-bottom: 0.5em; } @@ -189,6 +206,37 @@ p a:hover { flex-direction: row; } +.tutorial { + max-width: 30em; + max-height: 80vh; + position: fixed; + background-color: #171717; + z-index: 2; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-shadow: 0 4px 23px 0 rgb(0 0 0 / 20%); + padding: 1.6em; +} + +.splitter { + width: 100%; + height: 1px; + background-color: #3a3a3c; +} + +.backdrop { + width: 150vw; + height: 150vh; + position: fixed; + background-color: #000; + margin: 0; + padding: 0; + transform: translate(-25vw, -25vh); + opacity: 0.6; + z-index: 1 +} + .frame { background-color: #171717; height: 55px; @@ -200,6 +248,16 @@ p a:hover { transition: all 1s; } +.tutorial .frame { + height: 45px; + width: 45px; + margin-right: 10px; +} + +.tutorial .team { + padding: 7px; +} + #time { font-variant-numeric: tabular-nums; } @@ -209,6 +267,11 @@ p a:hover { border-radius: 10px; } +.previous { + background-color: #e78f3a; + border-radius: 10px; +} + .correct { background-color: #508b53; border-radius: 10px; diff --git a/views/index.ejs b/views/index.ejs index 5a328a0..3ad7905 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -10,7 +10,45 @@ -

Stewardle

+
+

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 +

+
+

Examples

+
+ +
+

The driver is of British nationality.

+ +
+
+
+

The driver does not race for Mercedes.

+
+
+ +

The driver previously raced for Haas.

+
+
+
44
+

The number is too low.

+
+
+
103
+

The number is too high.

+
+

+
+

A new STEWARDLE will be available each day!

+
+
+

Stewardle

Driver