Skip to content

Commit dce4b35

Browse files
Fred-TreatyFred-Treaty
committed
added docs
0 parents  commit dce4b35

File tree

4 files changed

+126
-0
lines changed

4 files changed

+126
-0
lines changed

‎LaunchRocket.gif‎

512 KB
Loading

‎index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Hello, World!</title>
5+
<link rel="stylesheet" href="styles.css" />
6+
</head>
7+
<body>
8+
<h1 class="title">AstroSiege Instructions</h1>
9+
<p id="currentTime"></p>
10+
<h2>Launching Rockets:</h2>
11+
<p>Click anywhere on the screen to launch a rocket.
12+
The rocket will explode alone when it reaches the clicked point on the screen if it does not hit any asteroid.</p>
13+
<p>When the rocket explodes it creates a shockwave that last for few seconds and any asteroid that contacts the shockwave will be destroyed.
14+
When the rocket hits an asteroid directly, the asteroid will explode and also release materials that you can use to upgrade your base.</p>
15+
<img src="LaunchRocket.gif" alt="Launch Rocket Animation">
16+
<h2>The top of the screen:</h2>
17+
<img src="topScreen.png" alt="Top Screen Interface">
18+
<p>The top of the screen is divided into three parts:</p>
19+
<p>The top left corner of the screen is the game menu</p>
20+
<p>The top middle of the screen is the current level.</p>
21+
<p>the top right corner of the screen you can see:<br>
22+
<ul>
23+
<li>the number of asteroids remaining.</li>
24+
<li>the number of rockets you have available.</li>
25+
<li>the shield health.</li>
26+
<li>the base health.</li>
27+
</ul>
28+
</p>
29+
<h2>Upgrading your base:</h2>
30+
<p>You can upgrade your base by clicking on the base and selecting the upgrade option.
31+
You can upgrade the following:
32+
<ul>
33+
<li>Rocket Launcher</li>
34+
<li>Asteroid Detector</li>
35+
<li>Shield Generator</li>
36+
<li>Repair Bot</li>
37+
</ul>
38+
</p>
39+
<!-- <image href="./images/UpgradeBase.gif"></image> -->
40+
<!-- <script src="script.js"></script> -->
41+
</body>
42+
</html>

‎styles.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
/* General Reset */
2+
body, h1, h2, p, ul, li {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
/* Base styles */
9+
body {
10+
font-family: 'Orbitron', sans-serif;
11+
background-color: #0a0e17;
12+
color: #e2e8f0;
13+
padding: 40px;
14+
line-height: 1.6;
15+
}
16+
17+
h1.title {
18+
font-size: 3em;
19+
text-align: center;
20+
color: #00bfff;
21+
text-shadow: 0 0 10px #00bfff;
22+
margin-bottom: 40px;
23+
}
24+
25+
h2 {
26+
color: #00ffa1;
27+
text-shadow: 0 0 5px #00ffa1;
28+
margin-top: 30px;
29+
font-size: 1.8em;
30+
}
31+
32+
p {
33+
margin: 10px 0;
34+
font-size: 1.1em;
35+
}
36+
37+
/* Container for sections */
38+
section {
39+
background: rgba(255, 255, 255, 0.05);
40+
border: 1px solid rgba(255, 255, 255, 0.1);
41+
padding: 20px;
42+
border-radius: 10px;
43+
margin-bottom: 30px;
44+
box-shadow: 0 0 10px #0ff3;
45+
}
46+
47+
/* Image styles */
48+
img {
49+
max-width: 100%;
50+
border: 2px solid #00bfff;
51+
border-radius: 8px;
52+
margin: 20px 0;
53+
}
54+
55+
/* UL styling */
56+
ul {
57+
list-style: none;
58+
padding-left: 20px;
59+
}
60+
61+
ul li::before {
62+
content: "🛰️ ";
63+
color: #00ffa1;
64+
font-size: 1.2em;
65+
}
66+
67+
/* Responsive text */
68+
@media screen and (max-width: 768px) {
69+
body {
70+
padding: 20px;
71+
}
72+
73+
h1.title {
74+
font-size: 2.2em;
75+
}
76+
77+
h2 {
78+
font-size: 1.4em;
79+
}
80+
81+
p {
82+
font-size: 1em;
83+
}
84+
}

‎topScreen.png‎

177 KB
Loading

0 commit comments

Comments
 (0)