forked from YadavAkhileshh/Alien-Invasion-Defense
-
Notifications
You must be signed in to change notification settings - Fork 0
/
FAQs.html
152 lines (142 loc) · 4.41 KB
/
FAQs.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQs</title>
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
<!-- CSS Stylesheet -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #2D0A31;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.faqcontainer {
background-color: white;
border-radius: 10px;
padding: 30px;
width: 80%;
max-width: 600px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
h1 {
color: #2D0A31;
display: flex;
align-items: center;
margin-bottom: 20px;
}
h1 img {
width: 30px;
height: 30px;
margin-right: 10px;
}
.question {
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
}
.question:last-child {
border-bottom: none;
}
summary {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: bold;
color: #2D0A31;
}
summary::-webkit-details-marker {
display: none;
}
.arrow {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
details[open] .arrow {
transform: rotate(180deg);
}
p {
margin-top: 10px;
color: #555;
}
#google_translate_element {
position: absolute;
top: 20px;
right: 20px;
}
.goog-te-gadget-simple {
background-color: #333 !important;
border: none !important;
padding: 5px 10px !important;
border-radius: 4px !important;
color: white !important;
}
.goog-te-gadget-simple span {
color: white !important;
}
</style>
</head>
<body>
<div class="faqcontainer">
<h1><img src="assets/images/icon-star.svg" alt="Star Icon">FAQs</h1>
<!-- GTranslate Widget -->
<div id="google_translate_element"></div>
<!-- FAQ Questions -->
<div class="question">
<details>
<summary>How do I start the game? <img src="assets/images/icon-minus.svg" class="arrow"></summary>
<p>Click the "Start" button to begin the game.</p>
</details>
</div>
<div class="question">
<details>
<summary>How do I move and shoot in the game? <img src="assets/images/icon-minus.svg" class="arrow"></summary>
<p>Use your keyboard arrow keys or on-screen controls to move your spaceship and shoot at alien ships.</p>
</details>
</div>
<div class="question">
<details>
<summary>How many lives do I have? <img src="assets/images/icon-minus.svg" class="arrow"></summary>
<p>You have 3 lives. You lose a life if an alien reaches your base or if your ship is hit.</p>
</details>
</div>
<div class="question">
<details>
<summary>What happens when I lose all my lives? <img src="assets/images/icon-minus.svg" class="arrow"></summary>
<p>When you lose all 3 lives, the game ends. Click "Restart" to try again.</p>
</details>
</div>
<div class="question">
<details>
<summary>How do I progress in the game? <img src="assets/images/icon-minus.svg" class="arrow"></summary>
<p>To progress, you must destroy all alien ships in each wave to move on to the next level and increase your score.</p>
</details>
</div>
<div class="question">
<details>
<summary>Where can I find more information about the game? <img src="assets/images/icon-minus.svg" class="arrow"></summary>
<p>Refer to the game instructions for detailed gameplay rules and tips.</p>
</details>
</div>
</div>
<!-- GTranslate Widget Script -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'en,es,fr,de,it,pt,ru,zh-CN,ja,ko,hi',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
autoDisplay: false
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>