Skip to content

Commit 8284139

Browse files
vbawolvbawol
committed
extra stuff
1 parent 38e864c commit 8284139

File tree

14 files changed

+637
-0
lines changed

14 files changed

+637
-0
lines changed

‎cyber_fit/bg.png‎

8.73 MB
Loading

‎cyber_fit/blank.gif‎

11.1 KB
Loading

‎cyber_fit/front.png‎

1.19 MB
Loading

‎cyber_fit/index.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0">
7+
<meta name="apple-mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9+
<link rel="stylesheet" href="styles.css?v=4.5">
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Anta&display=swap" rel="stylesheet">
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
14+
<title>Cyber Fit</title>
15+
</head>
16+
17+
<body>
18+
<div class="game-container" id="game-container">
19+
<div class="top-columns">
20+
<div class="stats" id="player-score"></div>
21+
<div class="stats" id="click-count"></div>
22+
<div class="timer" id="timer"></div>
23+
<div class="stats" id="game-count"></div>
24+
<div class="stats" id="pass-rate"></div>
25+
</div>
26+
27+
<div id="car">
28+
<div id="bg">
29+
<img src="blank.gif" width="100%">
30+
<div class="top-hinge" id="top-hinge"></div>
31+
<div class="bottom-hinge" id="bottom-hinge"></div>
32+
<div class="top-hinge" id="front-top-hinge"></div>
33+
<div class="bottom-hinge" id="front-bottom-hinge"></div>
34+
</div>
35+
36+
<div class="frontdoor" id="frontdoor">
37+
<img src="blank.gif?v=4.5" width="100%">
38+
</div>
39+
40+
<div class="door" id="door">
41+
<img src="blank.gif?v=4.5" width="100%">
42+
</div>
43+
44+
<div class="sendit">
45+
<button class="custom-button2" id="send-it-button">Send it!</button>
46+
</div>
47+
48+
<div class="controls">
49+
<button class="custom-button" id="move-top-left-left">← X-</button>
50+
<button class="custom-button" id="move-top-up">↑ Z+</button>
51+
<button class="custom-button" id="move-top-left-right">→ X+</button>
52+
</div>
53+
54+
<div class="controls-bottom">
55+
<button class="custom-button" id="move-bottom-left-left">← X-</button>
56+
<button class="custom-button" id="move-bottom-down">↓ Z-</button>
57+
<button class="custom-button" id="move-bottom-left-right">→ X+</button>
58+
</div>
59+
60+
<div class="front_controls">
61+
<button class="custom-button" id="front-move-top-left-left">← X-</button>
62+
<button class="custom-button" id="front-move-top-up">↑ Z+</button>
63+
<button class="custom-button" id="front-move-top-left-right">→ X+</button>
64+
</div>
65+
66+
<div class="front_controls-bottom">
67+
<button class="custom-button" id="front-move-bottom-left-left">← X-</button>
68+
<button class="custom-button" id="front-move-bottom-down">↓ Z-</button>
69+
<button class="custom-button" id="front-move-bottom-left-right">→ X+</button>
70+
</div>
71+
72+
<div id="debug"></div>
73+
</div>
74+
75+
<div id="startgame" class="info-bottom">
76+
<h1>Welcome to Cyber Fit!</h1>
77+
<label for="playerName">Enter Player Name:</label>
78+
<br>
79+
<input type="text" id="playerName" name="playerName" value="Player 1">
80+
<span id="validationMessage"></span>
81+
<br>
82+
<br>
83+
<button class="start-game" onclick="startGame()">Start Game</button>
84+
</div>
85+
</div>
86+
87+
<div id="popupText"></div>
88+
<div id="highScores"></div>
89+
90+
<script src="script.js?v=4.5"></script>
91+
</body>
92+
93+
</html>

‎cyber_fit/main_bg.png‎

10.3 MB
Loading

‎cyber_fit/rear.png‎

1.24 MB
Loading

‎cyber_fit/styles.css‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
html, body {
2+
background-color: #272932;
3+
color: #ffffff;
4+
font-family: "Anta", sans-serif;
5+
font-weight: 400;
6+
font-style: normal;
7+
height: 100%;
8+
}
9+
10+
body {
11+
background-image: url('main_bg.png');
12+
background-size: 100%;
13+
background-repeat: no-repeat;
14+
background-position: top;
15+
}
16+
17+
#popupText {
18+
animation: fadeOut 2s ease forwards;
19+
z-index: 100;
20+
position: absolute;
21+
top: 50%;
22+
left: 50%;
23+
transform: translate(-50%, -50%);
24+
text-align: center;
25+
transform: translate(-50%, -50%);
26+
background-color: transparent;
27+
padding: 20px;
28+
font-size: 10vw; /* Increased text size */
29+
display: none;
30+
color: #FDF500;
31+
-webkit-text-stroke-width: 1px;
32+
-webkit-text-stroke-color: #272932;
33+
}
34+
35+
.stats {
36+
text-align: center;
37+
justify-content: center;
38+
align-items: center;
39+
font-size: 1.5vw;
40+
color: #1AC5B0;
41+
}
42+
43+
.timer {
44+
justify-content: center;
45+
align-items: center;
46+
font-size: 2.5vw;
47+
color: red;
48+
text-align: center;
49+
}
50+
51+
.game-container {
52+
width: 100vw;
53+
height: 100vh;
54+
display: flex;
55+
align-items: center;
56+
justify-content: center;
57+
position: relative;
58+
overflow: hidden; /* Hide overflowing content */
59+
}
60+
61+
#car {
62+
width: 100%;
63+
height: 100%;
64+
position: relative;
65+
transition: transform 0.5s ease-in-out; /* Add transition for smooth movement */
66+
}
67+
68+
.sendit {
69+
position: absolute;
70+
z-index: 10000;
71+
margin-top: 6%;
72+
margin-left: 45%;
73+
text-align: center;
74+
}
75+
76+
.controls {
77+
position: absolute;
78+
z-index: 10000;
79+
margin-top: 16%;
80+
margin-left: 44%;
81+
text-align: center;
82+
}
83+
84+
.controls-bottom {
85+
position: absolute;
86+
z-index: 10000;
87+
margin-top: 37%;
88+
margin-left: 44%;
89+
text-align: center;
90+
}
91+
92+
.front_controls {
93+
position: absolute;
94+
z-index: 10000;
95+
margin-top: 17%;
96+
margin-left: 24%;
97+
text-align: center;
98+
}
99+
100+
.front_controls-bottom {
101+
position: absolute;
102+
z-index: 10000;
103+
margin-top: 37%;
104+
margin-left: 24%;
105+
text-align: center;
106+
}
107+
108+
.info-bottom {
109+
position: absolute;
110+
z-index: 10000;
111+
margin-top: 0%;
112+
margin-left: 0%;
113+
width: 100%;
114+
height: 100%;
115+
text-align: center;
116+
background-color: black;
117+
color: #CB1DCD;
118+
font-size: 2vw; /* Increased text size */
119+
}
120+
121+
.player-bottom {
122+
position: absolute;
123+
z-index: 10000;
124+
margin-top: 40%;
125+
margin-left: 50%;
126+
}
127+
128+
.top-hinge {
129+
top: 31%;
130+
left: 0;
131+
z-index: 1001;
132+
position: absolute;
133+
width: 10px;
134+
height: 10px;
135+
background-color: transparent;
136+
visibility: visible;
137+
border-radius: 50%;
138+
}
139+
140+
.bottom-hinge {
141+
bottom: 17%;
142+
left: 0;
143+
z-index: 1002;
144+
position: absolute;
145+
width: 10px;
146+
height: 10px;
147+
background-color: transparent;
148+
visibility: visible;
149+
border-radius: 50%;
150+
}
151+
152+
#bg, #door, #frontdoor {
153+
width: 100%;
154+
height: auto;
155+
position: absolute;
156+
background-size: 100%;
157+
background-repeat: no-repeat;
158+
background-position: top;
159+
}
160+
161+
#bg {
162+
background-image: url('bg.png');
163+
z-index: 0;
164+
}
165+
166+
#door {
167+
transition: transform .5s, transform-origin .5s;
168+
background-image: url('rear.png');
169+
z-index: 1;
170+
}
171+
172+
#frontdoor {
173+
transition: transform .5s, transform-origin .5s;
174+
background-image: url('front.png');
175+
z-index: 1;
176+
}
177+
178+
.top-columns, .bottom-columns {
179+
z-index: 1;
180+
position: absolute;
181+
width: 100%;
182+
display: flex;
183+
justify-content: space-between;
184+
z-index: 3;
185+
}
186+
187+
#highScores {
188+
position: fixed;
189+
top: 8%;
190+
left: 1%;
191+
font-size: 1vw;
192+
color: #FDF500;
193+
background-color: #000000;
194+
opacity: .5;
195+
}
196+
197+
.top-columns {
198+
top: 0;
199+
background-color: #000000;
200+
}
201+
202+
.bottom-columns {
203+
bottom: 0;
204+
}
205+
206+
.top-columns div, .bottom-columns div {
207+
flex: 1;
208+
}
209+
210+
.custom-button {
211+
border: 0.1vw solid #9370DB;
212+
background-color: black;
213+
color: pink;
214+
border-radius: 2px;
215+
width: 3vw;
216+
height: 4vw;
217+
font-size: 1.5vw;
218+
}
219+
220+
.custom-button2 {
221+
border: 0.1vw solid #9370DB;
222+
background-color: black;
223+
color: pink;
224+
border-radius: 2px;
225+
width: 10vw;
226+
height: 4vw;
227+
font-size: 2vw;
228+
}
229+
230+
.start-game {
231+
border: 0.5vw solid #9370DB;
232+
background-color: black;
233+
color: pink;
234+
border-radius: 2px;
235+
width: 11vw;
236+
height: 7vw;
237+
font-size: 2.5vw;
238+
}
239+
240+
.anta-regular {
241+
font-family: "Anta", sans-serif;
242+
font-weight: 400;
243+
font-style: normal;
244+
}
245+
246+
input[type=text] {
247+
padding: 0;
248+
height: 2vw;
249+
position: relative;
250+
left: 0;
251+
outline: none;
252+
border: 2px solid #9370DB;
253+
background-color: white;
254+
color: #272932;
255+
font-size: 2vw;
256+
}
257+
258+
259+
260+
261+
@keyframes fadeOut {
262+
0% {
263+
opacity: 1;
264+
}
265+
100% {
266+
opacity: 0;
267+
display: none;
268+
}

‎takt_time/bg.png‎

1.66 MB
Loading

‎takt_time/blank.gif‎

1.08 KB
Loading

‎takt_time/blank2.gif‎

1.08 KB
Loading

0 commit comments

Comments
 (0)