Skip to content

Commit 732222e

Browse files
codesayanpalcodercodesayanpalcoder
authored
Add files via upload
1 parent a70410c commit 732222e

13 files changed

+609
-0
lines changed

‎Black - 13495.mp4

2.99 MB
Binary file not shown.

‎app.css

+170
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
#myVideo {
2+
position: fixed;
3+
right: 0;
4+
bottom: 0;
5+
min-width: 100%;
6+
min-height: 100%;
7+
}
8+
9+
.content {
10+
position: fixed;
11+
background: rgba(0, 0, 0, 0.5);
12+
color: #f1f1f1;
13+
width: 100%;
14+
padding: 20px;
15+
text-transform: uppercase;
16+
background-image: linear-gradient(
17+
-225deg,
18+
#231557 0%,
19+
#44107a 29%,
20+
#ff1361 67%,
21+
#fff800 100%
22+
);
23+
24+
bottom:0;
25+
padding: 20px;
26+
background-size: auto auto;
27+
background-clip: border-box;
28+
background-size: 200% auto;
29+
background-clip: text;
30+
-webkit-text-fill-color:transparent;
31+
-webkit-background-clip: text;
32+
-webkit-text-fill-color: transparent;
33+
animation: textclip 2s linear infinite;
34+
35+
}
36+
37+
@keyframes textclip {
38+
to {
39+
background-position: 200% center;
40+
}
41+
}
42+
:root {
43+
44+
font-size: 62.5%;
45+
}
46+
47+
* {
48+
box-sizing: border-box;
49+
text-align:center;
50+
font-family: Arial, Helvetica, sans-serif;
51+
margin: 0;
52+
padding: 0;
53+
color: orange;
54+
}
55+
56+
h1,
57+
h2,
58+
h3,
59+
h4 {
60+
margin-bottom: 1rem;
61+
}
62+
63+
h1 {
64+
font-size: 5.4rem;
65+
color: green;
66+
margin-bottom: 5rem;
67+
}
68+
69+
h1 > span {
70+
font-size: 2.4rem;
71+
font-weight: 500;
72+
}
73+
74+
h2 {
75+
font-size: 4.2rem;
76+
margin-bottom: 4rem;
77+
font-weight: 700;
78+
}
79+
80+
h3 {
81+
font-size: 2.8rem;
82+
font-weight: 500;
83+
}
84+
85+
/* UTILITIES */
86+
87+
.container {
88+
width: 100vw;
89+
height: 100vh;
90+
display: flex;
91+
justify-content: center;
92+
align-items: center;
93+
max-width: 80rem;
94+
margin: 0 auto;
95+
padding: 2rem;
96+
}
97+
98+
.container > * {
99+
width: 100%;
100+
}
101+
102+
.flex-column {
103+
display: flex;
104+
flex-direction: column;
105+
}
106+
107+
.flex-center {
108+
justify-content: center;
109+
align-items: center;
110+
}
111+
112+
.justify-center {
113+
justify-content: center;
114+
}
115+
116+
.text-center {
117+
text-align: center;
118+
}
119+
120+
.hidden {
121+
display: none;
122+
}
123+
124+
/* BUTTONS */
125+
.btn {
126+
font-size: 1.8rem;
127+
padding: 1rem 0;
128+
width: 20rem;
129+
text-align: center;
130+
border: 0.1rem solid goldenrod;
131+
margin-bottom: 1rem;
132+
text-decoration: none;
133+
background-color: antiquewhite;
134+
color:green;
135+
136+
}
137+
138+
.btn:hover {
139+
cursor: pointer;
140+
box-shadow: 0 0.4rem 1.4rem ;
141+
color: #ff1361;;
142+
transition: transform 150ms;
143+
}
144+
145+
.btn[disabled]:hover {
146+
cursor: not-allowed;
147+
box-shadow: none;
148+
transform: none;
149+
}
150+
151+
/* FORMS */
152+
form {
153+
width: 100%;
154+
display: flex;
155+
flex-direction: column;
156+
align-items: center;
157+
}
158+
159+
input {
160+
margin-bottom: 1rem;
161+
width: 20rem;
162+
padding: 1.5rem;
163+
font-size: 1.8rem;
164+
border: none;
165+
box-shadow: 0 0.1rem 1.4rem 0 green;
166+
}
167+
168+
input::placeholder {
169+
color: #aaa;
170+
}

‎end.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Congrats!</title>
8+
<link rel="stylesheet" href="app.css" />
9+
</head>
10+
<body>
11+
<Body background="images.jpg">
12+
<div class="container">
13+
<div id="end" class="flex-center flex-column">
14+
<h1 id="finalScore"></h1>
15+
<form>
16+
<input
17+
type="text"
18+
name="username"
19+
id="username"
20+
placeholder="username"
21+
/>
22+
<button
23+
type="submit"
24+
class="btn"
25+
id="saveScoreBtn"
26+
onclick="saveHighScore(event)"
27+
disabled
28+
>
29+
Save
30+
</button>
31+
</form>
32+
<a class="btn" href="/game.html">Play Again</a>
33+
<a class="btn" href="/">Go Home</a>
34+
</div>
35+
</div>
36+
<script src="end.js"></script>
37+
</body>
38+
</html>

‎end.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
const username = document.getElementById('username');
2+
const saveScoreBtn = document.getElementById('saveScoreBtn');
3+
const finalScore = document.getElementById('finalScore');
4+
const mostRecentScore = localStorage.getItem('mostRecentScore');
5+
6+
const highScores = JSON.parse(localStorage.getItem('highScores')) || [];
7+
8+
const MAX_HIGH_SCORES = 5;
9+
10+
finalScore.innerText = mostRecentScore;
11+
12+
username.addEventListener('keyup', () => {
13+
saveScoreBtn.disabled = !username.value;
14+
});
15+
16+
saveHighScore = (e) => {
17+
e.preventDefault();
18+
19+
const score = {
20+
score: mostRecentScore,
21+
name: username.value,
22+
};
23+
highScores.push(score);
24+
highScores.sort((a, b) => b.score - a.score);
25+
highScores.splice(5);
26+
27+
localStorage.setItem('highScores', JSON.stringify(highScores));
28+
window.location.assign('/');
29+
};

‎game.css

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
#myVideo {
2+
position: fixed;
3+
right: 0;
4+
bottom: 0;
5+
min-width: 100%;
6+
min-height: 100%;
7+
}
8+
.center{
9+
position: fixed;
10+
bottom: 50px;
11+
right:70px;
12+
left:50px;
13+
14+
15+
color: #f1f1f1;
16+
width: 70%;
17+
padding: 40px;
18+
}
19+
20+
21+
.choice-container {
22+
display: flex;
23+
margin-bottom: 0.5rem;
24+
width: 100%;
25+
font-size: 1.8rem;
26+
border: 0.1rem solid rgb(86, 165, 235, 0.25);
27+
background-color: white;
28+
}
29+
30+
.choice-container:hover {
31+
cursor: pointer;
32+
box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
33+
transform: translateY(-0.1rem);
34+
transition: transform 150ms;
35+
}
36+
37+
.choice-prefix {
38+
padding: 1.5rem 2.5rem;
39+
background-color: green;
40+
color: white;
41+
}
42+
43+
.choice-text {
44+
padding: 1.5rem;
45+
width: 100%;
46+
}
47+
48+
.correct {
49+
background-color:greenyellow;
50+
}
51+
52+
.incorrect {
53+
background-color: #dc3545;
54+
}
55+
56+
/* HUD */
57+
58+
#hud {
59+
display: flex;
60+
justify-content: space-between;
61+
}
62+
63+
.hud-prefix {
64+
text-align: center;
65+
font-size: 2rem;
66+
}
67+
68+
.hud-main-text {
69+
text-align: center;
70+
}
71+
72+
#progressBar {
73+
width: 20rem;
74+
height: 4rem;
75+
border: 0.3rem solid green;
76+
margin-top: 1.5rem;
77+
}
78+
79+
#progressBarFull {
80+
height: 3.4rem;
81+
background-color: green;
82+
width: 0%;
83+
}
84+
85+
/* LOADER */
86+
#loader {
87+
border: 1.6rem solid white;
88+
border-radius: 50%;
89+
border-top: 1.6rem solid #56a5eb;
90+
width: 12rem;
91+
height: 12rem;
92+
animation: spin 2s linear infinite;
93+
}
94+
95+
@keyframes spin {
96+
0% {
97+
transform: rotate(0deg);
98+
}
99+
100% {
100+
transform: rotate(360deg);
101+
}
102+
}

0 commit comments

Comments
 (0)