diff --git a/autoComplete.css b/autoComplete.css new file mode 100644 index 0000000..c292689 --- /dev/null +++ b/autoComplete.css @@ -0,0 +1,129 @@ +.autoComplete_wrapper { + display: inline-block; + position: relative; + width: 100%; +} + +.autoComplete_wrapper > input { + height: 40px; + width: 100%; + margin: 0; + padding: 0 2rem 0 3rem; + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + font-size: 1rem; + text-overflow: ellipsis; + color: black; + outline: none; + /* border-radius: 10rem; */ + /* border: 0.05rem solid rgba(255, 0, 9, 0.5); */ + background-image: url(./images/search.svg); + background-size: 1.4rem; + background-position: left 0.8rem top 0.5rem; + background-repeat: no-repeat; + background-origin: border-box; + background-color: #fff; + transition: all 0.4s ease; + -webkit-transition: all -webkit-transform 0.4s ease; +} + +.autoComplete_wrapper > input::placeholder { + color: grey; + transition: all 0.3s ease; + -webkit-transition: all -webkit-transform 0.3s ease; +} + +.autoComplete_wrapper > input:hover::placeholder { + color: grey; + transition: all 0.3s ease; + -webkit-transition: all -webkit-transform 0.3s ease; +} + +.autoComplete_wrapper > input:focus::placeholder { + padding: 0.1rem 0.6rem; + font-size: 0.95rem; + color: rgb(224, 224, 224); +} + +.autoComplete_wrapper > input:focus::selection { + background-color: rgba(255, 122, 122, 0.15); +} + +.autoComplete_wrapper > input::selection { + background-color: rgba(255, 122, 122, 0.15); +} + +.autoComplete_wrapper > input:hover { + color: grey; + transition: all 0.3s ease; + -webkit-transition: all -webkit-transform 0.3s ease; +} + +.autoComplete_wrapper > input:focus { + color: grey; + border: 0.06rem solid grey; +} + +.autoComplete_wrapper > ul { + position: absolute; + max-height: 226px; + overflow-y: scroll; + box-sizing: border-box; + left: 0; + right: 0; + margin: 0.5rem 0 0 0; + padding: 0; + z-index: 1; + list-style: none; + border-radius: 0.6rem; + background-color: #fff; + border: 1px solid rgba(33, 33, 33, 0.07); + box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15); + outline: none; + transition: opacity 0.15s ease-in-out; + -moz-transition: opacity 0.15s ease-in-out; + -webkit-transition: opacity 0.15s ease-in-out; +} + +.autoComplete_wrapper > ul[hidden], +.autoComplete_wrapper > ul:empty { + display: block; + opacity: 0; + transform: scale(0); +} + +.autoComplete_wrapper > ul > li { + margin: 0.3rem; + padding: 0.3rem 0.5rem; + text-align: left; + font-size: 1rem; + color: #212121; + border-radius: 0.35rem; + background-color: rgba(255, 255, 255, 1); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: all 0.2s ease; +} + +.autoComplete_wrapper > ul > li mark { + background-color: transparent; + color: #B91C1C; + font-weight: bold; +} + +.autoComplete_wrapper > ul > li:hover { + cursor: pointer; + background-color: rgba(255, 122, 122, 0.15); +} + +.autoComplete_wrapper > ul > li[aria-selected="true"] { + background-color: rgba(255, 122, 122, 0.15); +} + + /* @media only screen and (max-width: 600px) { + .autoComplete_wrapper > input { + width: 90%; + } +} */ diff --git a/images/Event Horizon/1.png b/images/Event Horizon/1.png index e05fc84..b4f3c76 100644 Binary files a/images/Event Horizon/1.png and b/images/Event Horizon/1.png differ diff --git a/images/Event Horizon/2.png b/images/Event Horizon/2.png index cceda48..c17b14c 100644 Binary files a/images/Event Horizon/2.png and b/images/Event Horizon/2.png differ diff --git a/images/Event Horizon/3.png b/images/Event Horizon/3.png index c00fc3a..2509b69 100644 Binary files a/images/Event Horizon/3.png and b/images/Event Horizon/3.png differ diff --git a/images/Event Horizon/4.png b/images/Event Horizon/4.png new file mode 100644 index 0000000..c00fc3a Binary files /dev/null and b/images/Event Horizon/4.png differ diff --git a/images/Event Horizon/5.png b/images/Event Horizon/5.png new file mode 100644 index 0000000..25a7bd7 Binary files /dev/null and b/images/Event Horizon/5.png differ diff --git a/images/Event Horizon/poster.png b/images/Event Horizon/poster.png new file mode 100644 index 0000000..734978e Binary files /dev/null and b/images/Event Horizon/poster.png differ diff --git a/images/Friday the 13th/1.png b/images/Friday the 13th/1.png index cf45154..335eb32 100644 Binary files a/images/Friday the 13th/1.png and b/images/Friday the 13th/1.png differ diff --git a/images/Friday the 13th/2.png b/images/Friday the 13th/2.png index 309bacc..0741e02 100644 Binary files a/images/Friday the 13th/2.png and b/images/Friday the 13th/2.png differ diff --git a/images/Friday the 13th/3.png b/images/Friday the 13th/3.png index 24f0564..16dc90f 100644 Binary files a/images/Friday the 13th/3.png and b/images/Friday the 13th/3.png differ diff --git a/images/Friday the 13th/4.png b/images/Friday the 13th/4.png index 89818e9..fe5a723 100644 Binary files a/images/Friday the 13th/4.png and b/images/Friday the 13th/4.png differ diff --git a/images/Group.png b/images/Group.png new file mode 100644 index 0000000..5dd8e50 Binary files /dev/null and b/images/Group.png differ diff --git a/images/Group.svg b/images/Group.svg new file mode 100644 index 0000000..d6bb158 --- /dev/null +++ b/images/Group.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/images/Hellraiser/1.png b/images/Hellraiser/1.png new file mode 100644 index 0000000..72bba25 Binary files /dev/null and b/images/Hellraiser/1.png differ diff --git a/images/Hellraiser/2.png b/images/Hellraiser/2.png new file mode 100644 index 0000000..6b41a62 Binary files /dev/null and b/images/Hellraiser/2.png differ diff --git a/images/Hellraiser/3.png b/images/Hellraiser/3.png new file mode 100644 index 0000000..cb7efb2 Binary files /dev/null and b/images/Hellraiser/3.png differ diff --git a/images/Hellraiser/4.png b/images/Hellraiser/4.png new file mode 100644 index 0000000..95c5690 Binary files /dev/null and b/images/Hellraiser/4.png differ diff --git a/images/Hellraiser/vlcsnap-2022-09-25-19h54m40s897.png b/images/Hellraiser/vlcsnap-2022-09-25-19h54m40s897.png new file mode 100644 index 0000000..0448250 Binary files /dev/null and b/images/Hellraiser/vlcsnap-2022-09-25-19h54m40s897.png differ diff --git a/images/It Follows/1.png b/images/It Follows/1.png new file mode 100644 index 0000000..2d9ef9f Binary files /dev/null and b/images/It Follows/1.png differ diff --git a/images/It Follows/2.png b/images/It Follows/2.png new file mode 100644 index 0000000..3372ce0 Binary files /dev/null and b/images/It Follows/2.png differ diff --git a/images/It Follows/3.png b/images/It Follows/3.png new file mode 100644 index 0000000..afc9716 Binary files /dev/null and b/images/It Follows/3.png differ diff --git a/images/It Follows/4.png b/images/It Follows/4.png new file mode 100644 index 0000000..525fcb3 Binary files /dev/null and b/images/It Follows/4.png differ diff --git a/images/It Follows/5.png b/images/It Follows/5.png new file mode 100644 index 0000000..c827df6 Binary files /dev/null and b/images/It Follows/5.png differ diff --git a/images/The Texas Chainsaw Massacre/1.png b/images/The Texas Chainsaw Massacre/1.png new file mode 100644 index 0000000..89505fb Binary files /dev/null and b/images/The Texas Chainsaw Massacre/1.png differ diff --git a/images/The Texas Chainsaw Massacre/2.png b/images/The Texas Chainsaw Massacre/2.png new file mode 100644 index 0000000..fe17c40 Binary files /dev/null and b/images/The Texas Chainsaw Massacre/2.png differ diff --git a/images/The Texas Chainsaw Massacre/3.png b/images/The Texas Chainsaw Massacre/3.png new file mode 100644 index 0000000..7fbe7fe Binary files /dev/null and b/images/The Texas Chainsaw Massacre/3.png differ diff --git a/images/The Texas Chainsaw Massacre/4.png b/images/The Texas Chainsaw Massacre/4.png new file mode 100644 index 0000000..f53fd8e Binary files /dev/null and b/images/The Texas Chainsaw Massacre/4.png differ diff --git a/images/a nightmare on elm street/1.png b/images/a nightmare on elm street/1.png index 637244f..d91a90c 100644 Binary files a/images/a nightmare on elm street/1.png and b/images/a nightmare on elm street/1.png differ diff --git a/images/a nightmare on elm street/2.png b/images/a nightmare on elm street/2.png index db7a44f..6e87fd0 100644 Binary files a/images/a nightmare on elm street/2.png and b/images/a nightmare on elm street/2.png differ diff --git a/images/a nightmare on elm street/3.png b/images/a nightmare on elm street/3.png index 5351f5e..b1b4f94 100644 Binary files a/images/a nightmare on elm street/3.png and b/images/a nightmare on elm street/3.png differ diff --git a/images/a nightmare on elm street/4.png b/images/a nightmare on elm street/4.png new file mode 100644 index 0000000..ba68c62 Binary files /dev/null and b/images/a nightmare on elm street/4.png differ diff --git a/images/a nightmare on elm street/poster.jpg b/images/a nightmare on elm street/poster.jpg deleted file mode 100644 index 1c3424c..0000000 Binary files a/images/a nightmare on elm street/poster.jpg and /dev/null differ diff --git a/images/a nightmare on elm street/poster.png b/images/a nightmare on elm street/poster.png new file mode 100644 index 0000000..fa35d9c Binary files /dev/null and b/images/a nightmare on elm street/poster.png differ diff --git a/images/back.png b/images/back.png new file mode 100644 index 0000000..63c20ff Binary files /dev/null and b/images/back.png differ diff --git a/images/hellrasier/1.png b/images/hellrasier/1.png deleted file mode 100644 index 298bc92..0000000 Binary files a/images/hellrasier/1.png and /dev/null differ diff --git a/images/hellrasier/2.png b/images/hellrasier/2.png deleted file mode 100644 index c072350..0000000 Binary files a/images/hellrasier/2.png and /dev/null differ diff --git a/images/hellrasier/3.png b/images/hellrasier/3.png deleted file mode 100644 index e9dffa3..0000000 Binary files a/images/hellrasier/3.png and /dev/null differ diff --git a/images/images (2).png b/images/images (2).png new file mode 100644 index 0000000..7c4ee23 Binary files /dev/null and b/images/images (2).png differ diff --git a/images/images.png b/images/images.png new file mode 100644 index 0000000..d8d3849 Binary files /dev/null and b/images/images.png differ diff --git a/images/load-icon-png-8.png b/images/load-icon-png-8.png new file mode 100644 index 0000000..52f2187 Binary files /dev/null and b/images/load-icon-png-8.png differ diff --git a/images/place.png b/images/place.png new file mode 100644 index 0000000..c18c681 Binary files /dev/null and b/images/place.png differ diff --git a/images/search.svg b/images/search.svg new file mode 100644 index 0000000..62d9ca1 --- /dev/null +++ b/images/search.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index e645f6e..164f079 100644 --- a/index.html +++ b/index.html @@ -7,13 +7,14 @@ + test
- +
horror @@ -23,8 +24,8 @@
+ -
@@ -38,19 +39,29 @@
-

Use the death scene provided to guess the name of the movie.

+

Use the movie scene provided to guess the name of the movie.

- - -
-

If you guess wrong a new death - scene from the movie is revealed but you will use 1 point.

-
- - -
-

You have a maximum of 3 guesses to find the movie.

+
+ +
+

If you guess wrong or skip, a new + scene from the movie is revealed. You have a maximum of 3 guesses to find the movie.

+
+
+
+ +
+

you can use the buttons below the image to navigate once they are revealed.

+
+
+
+ +
+

If you win you'll have the chance to guess which image contains the survivor in the bonus stage.

+
+ +
@@ -58,14 +69,73 @@

Stats

-
- -
- × -

Streak

-
- your stats +

October 2022

+
+ +
+ +
+
M
+
T
+
W
+
T
+
F
+
S
+
S
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
+ +
+
+ +
+ × +

Streak

+ + + +
@@ -84,57 +154,7 @@

October 2022 Archive

×
-
- -
-
M
-
T
-
W
-
T
-
F
-
S
-
S
-
-
-
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
-
+
@@ -146,33 +166,87 @@ --> + +
+ +
+ + +
+
+

You got itπŸŽ‰

+ + + + + + + + + + + + + + + + + +
Streak:
Win:
Plays:
+ + + +
+
+ +
+
+
+
-movie death frame +movie death frame +
+
+

+

+ +
+ + + +
+ +
- - + +
-

+

-
+
+ +