Skip to content

Commit a7a1561

Browse files
FredericoMSAlmeidaFredericoMSAlmeida
committed
added power-up section
1 parent 4247afa commit a7a1561

File tree

6 files changed

+117
-3
lines changed

6 files changed

+117
-3
lines changed

‎index.html‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="UTF-8">
45
<title>AstroSiege Instructions</title>
56
<link rel="stylesheet" href="styles.css" />
67
</head>
@@ -27,15 +28,52 @@ <h2>The top of the screen:</h2>
2728
</ul>
2829
</p>
2930
<h2>Upgrading your base:</h2>
30-
<p>You can upgrade your base by clicking on the base and selecting the upgrade option.
31+
<p>You can upgrade your base by Clicking the button [Manage Base] on the Start Screen. <br>Then clicking on the base and selecting the upgrade option.
3132
You can upgrade the following:
3233
<ul>
3334
<li>Rocket Launcher</li>
3435
<li>Asteroid Detector</li>
3536
<li>Shield Generator</li>
36-
<li>Repair Bot</li>
37+
<li>Base Strength</li>
3738
</ul>
3839
</p>
40+
<h2>PowerUps:</h2>
41+
<p>There are 4 types of power ups available along the game.</p>
42+
43+
<div class="powerups-grid">
44+
<div class="grid-header">Icon</div>
45+
<div class="grid-header">Name</div>
46+
<div class="grid-header">Duration</div>
47+
<div class="grid-header">Description</div>
48+
49+
<div class="grid-icon">
50+
<img src="pu2X.png" alt="Shockwave Grow 2X Icon" class="powerup-icon">
51+
</div>
52+
<div class="grid-name">Shockwave Grow 2X</div>
53+
<div class="grid-duration">10s</div>
54+
<div class="grid-description">Increase the size of the shockwave in 2X</div>
55+
56+
<div class="grid-icon">
57+
<img src="puInfinite.png" alt="Infinite Rockets Icon" class="powerup-icon">
58+
</div>
59+
<div class="grid-name">Infinite Rockets</div>
60+
<div class="grid-duration">10s</div>
61+
<div class="grid-description">Infinite Rockets</div>
62+
63+
<div class="grid-icon">
64+
<img src="puIB.png" alt="Invincible Base Icon" class="powerup-icon">
65+
</div>
66+
<div class="grid-name">Invincible Base</div>
67+
<div class="grid-duration">10s</div>
68+
<div class="grid-description">Base does not take damage</div>
69+
70+
<div class="grid-icon">
71+
<img src="puIS.png" alt="Invincible Shield Icon" class="powerup-icon">
72+
</div>
73+
<div class="grid-name">Invincible Shield</div>
74+
<div class="grid-duration">10s</div>
75+
<div class="grid-description">Shield does not take damage</div>
76+
</div>
3977
<!-- <image href="./images/UpgradeBase.gif"></image> -->
4078
<!-- <script src="script.js"></script> -->
4179
</body>

‎pu2X.png‎

64.3 KB
Loading

‎puIB.png‎

64.3 KB
Loading

‎puIS.png‎

58.1 KB
Loading

‎puInfinite.png‎

67.9 KB
Loading

‎styles.css‎

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,87 @@ section {
4545
}
4646

4747
/* Image styles */
48-
img {
48+
/* img {
4949
max-width: 100%;
5050
border: 2px solid #00bfff;
5151
border-radius: 8px;
5252
margin: 20px 0;
53+
} */
54+
55+
/* PowerUp image styles - scaled to 1/3 original size */
56+
.powerup-icon {
57+
width: 33.33%;
58+
max-width: 33.33%;
59+
height: auto;
60+
margin: 5px;
61+
}
62+
63+
/* Modern CSS Grid Layout for PowerUps */
64+
.powerups-grid {
65+
display: grid;
66+
grid-template-columns: 15% 35% 15% 35%;
67+
gap: 1px;
68+
margin: 20px 0;
69+
background: rgba(255, 255, 255, 0.05);
70+
border-radius: 8px;
71+
overflow: hidden;
72+
}
73+
74+
.grid-header {
75+
background: rgba(0, 191, 255, 0.2);
76+
color: #00bfff;
77+
font-weight: bold;
78+
padding: 15px 10px;
79+
text-align: center;
80+
border-bottom: 2px solid rgba(0, 191, 255, 0.4);
81+
}
82+
83+
.grid-icon, .grid-name, .grid-duration, .grid-description {
84+
/* background: rgba(255, 255, 255, 0.05); */
85+
padding: 15px 10px;
86+
display: flex;
87+
align-items: center;
88+
}
89+
90+
.grid-icon {
91+
justify-content: center;
92+
}
93+
94+
.grid-duration {
95+
justify-content: center;
96+
font-weight: bold;
97+
color: #00ffa1;
98+
}
99+
100+
.grid-name {
101+
font-weight: bold;
102+
color: #e2e8f0;
103+
}
104+
105+
.grid-description {
106+
color: #cbd5e0;
107+
}
108+
109+
/* Responsive grid for smaller screens */
110+
@media screen and (max-width: 768px) {
111+
.powerups-grid {
112+
grid-template-columns: 1fr;
113+
gap: 10px;
114+
}
115+
116+
.grid-header:nth-child(n+2) {
117+
display: none;
118+
}
119+
120+
.grid-icon, .grid-name, .grid-duration, .grid-description {
121+
justify-content: flex-start;
122+
padding: 10px;
123+
}
124+
125+
.grid-icon::before { content: "Icon: "; font-weight: bold; }
126+
.grid-name::before { content: "Name: "; font-weight: bold; }
127+
.grid-duration::before { content: "Duration: "; font-weight: bold; }
128+
.grid-description::before { content: "Description: "; font-weight: bold; }
53129
}
54130

55131
/* UL styling */

0 commit comments

Comments
 (0)