-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
301 lines (270 loc) · 14.3 KB
/
index.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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wasted Space: Blast 'em (then recycle 'em)</title>
<meta name="keywords" content="graphic design, pixel art, 8 bit, 16 bit, environment, climate change, climate crisis, go green, enviroaction, enviroart, ecoart, save the planet, plastic pollution, pixel planet, pixel planet today, creative, omaha, nebraska, terrabyte, wasted space, tech, education, greentech">
<meta name="description" content="Wasted Space is an eco-focused arcade game where players destroy enemy ships and recycle their parts into upgrades.">
<meta name="author" content="Terrabyte">
<!-- social cards metadata -->
<meta property="og:title" content="Wasted Space: Blast 'em (then recycle 'em')">
<meta property="og:type" content="website">
<meta property="og:url" content="https://wastedspace.fun">
<meta property="og:description" content="Wasted Space is an eco-focused arcade game where players destroy enemy ships and recycle their parts into upgrades.">
<meta property="og:image" content="/img/meta/og-image.png">
<link rel="shortcut icon" type="image/png" href="/favicon.ico"/>
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
<!-- aurum framework -->
<link href="https://au.goldenharpmedia.com/framework/packages/v1.0/au.css" rel="stylesheet">
<!-- page styles -->
<link rel="stylesheet" href="https://www.pixelplanettoday.com/css/general-styles.css">
<link rel="stylesheet" href="https://www.pixelplanettoday.com/css/footer-section-styles.css">
<link href="/css/site-styles.css" rel="stylesheet">
<link href="/css/footer-styles.css" rel="stylesheet">
<!-- scripts -->
<!-- shared scripts -->
<script type="text/javascript" src="https://terrabyte.eco/js/shared-scripts.js"></script>
<!-- site scripts -->
<!-- <script type="text/javascript" src="/js/scripts.js"></script> -->
<!-- microanalytics -->
<script data-host="https://app.microanalytics.io" data-dnt="false" src="https://app.microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
</head>
<body>
<header>
<div class="header-content" data-au="container align-center">
<nav data-au="set-width container align-center">
<a class="" href="https://terrabyte-tech.itch.io/wasted-space">Play the Beta!</a>
</nav>
</div>
</header>
<section id="hero-section" data-au="container align-center">
<div class="section-content col-container" data-au="container align-center">
<div class="col-content" data-au="flex-width">
<div id="">
<!-- logo -->
<!-- <div class="logo-container"></div> -->
<div data-au="flex-width">
<h1>Blast 'em!</h1>
<h2>(then recycle 'em)</h2>
</div>
</div>
<div id="info">
<p>Wasted Space is a classic arcade game that drives home the idea of reusing and recycling. Fly a spaceship through endless enemies and collect materials from destroyed ships in order to upgrade your own!</p>
</div>
</div>
<div id="links" class="col-content" data-au="flex-width">
<a class="button show-for-desktop show-for-tablet" href="https://terrabyte-tech.itch.io/wasted-space">Play the Beta!</a>
<a href="https://youtube.com/shorts/aPGDjK-rEZ0?feature=share" target="_blank">Watch the First Look</a>
<!-- <a href="https://terrabyte-tech.itch.io/wasted-space">Itch.io</a> -->
<a href="https://www.youtube.com/@TerrabyteEco" target="_blank">Terrabyte on YouTube</a>
<a href="https://shop.pixelplanettoday.com/wasted-space" target="_blank">Wasted Space merch</a>
<!-- <a href="https://terrabyte.eco">Terrabyte Website</a> -->
<!-- <a href="https://github.com/terrabyte-tech">Terrabyte on GitHub</a> -->
</div>
</div>
</section>
<section id="backstory-section" data-au="container all-center">
<div class="section-content">
<div class="subsection">
<h3>Concept</h3>
<p>Recyclers are a frugal people, but The Careless are insistent on crushing their way of life. As a recycler yourself, fighting alongside your friend, Astro, is the only path to survival. And the best part? Recycling spare parts into bigger and better things (like weapon upgrades, strategic build-ons, and other buffs) is kinda your way of life.</p>
</div>
<div class="subsection">
<h3>How to play</h3>
<div class="how-to-play col-container" data-au="container align-center">
<div class="col-content">
<img src="/img/wasted-space_pc-controls-graphic.png" alt=""/>
</div>
<div class="col-content">
<img src="/img/wasted-space_touch-controls-graphic.png" alt=""/>
</div>
<div class="col-content">
<img src="/img/wasted-space_arcade-controls-graphic.png" alt=""/>
</div>
</div>
</div>
</div>
</section>
<section id="enemies-section" data-au="container align-center">
<div class="section-content">
<h2>Who you're up against</h2>
<div class="col-container" data-au="container align-top">
<div class="col-content entity-section cruiser" data-au="flex-width flex-container flex-vertical all-center">
<div class="card-illus"></div>
<h3 class="card-label">Cruisers</h3>
<p class="card-description">Some enemies, like cruisers and mines, are mere utilities for The Careless.</p>
</div>
<div class="col-content entity-section shooter" data-au="flex-width flex-container flex-vertical all-center">
<div class="card-illus"></div>
<h3 class="card-label">Shooters</h3>
<p class="card-description">But even if you manage to survive 10 waves, enemies will only become more difficult.</p>
</div>
<div class="col-content entity-section saucer" data-au="flex-width flex-container flex-vertical all-center">
<div class="card-illus"></div>
<h3 class="card-label">...and more!</h3>
<p class="card-description">A basic rule of thumb: red ships coming from the right — bad!</p>
</div>
</div>
</div>
</section>
<!-- <section id="powerups-section">
<div class="subsection">
<h3>Upgrades</h3>
<p>Don't let anything go to waste! Building upgrades from enemy parts gives you an edge that you won't want to go without. But be aware — each upgrade will require more and more parts to build. Upgrades are randomized, but better </p>
</div>
<div class="subsection">
<div class="upgrade-row">
<div class="upgrade-img"></div>
<div class="upgrade-desc">
<h4>Carbon Launcher</h4>
<p>Take the fight to the enemy, <em>with</em> the enemy. Recycle materials into something of a bomb to destroy enemies within the blast radius.</p>
</div>
</div>
<div class="upgrade-row">
<div class="upgrade-img"></div>
<div class="upgrade-desc">
<h4>Repairs</h4>
<p>The most general of the general: collect parts to patch those holes in your ship hull. These patches do go a bit further by not only refill one of your ship's health points, but also increase your max health by one.</p>
</div>
</div>
<div class="upgrade-row">
<div class="upgrade-img"></div>
<div class="upgrade-desc">
<h4>Magnetism</h4>
<p>Space garbage is only as valuable as what can be salvaged. Equip your ship with magnets to ensure none get away.</p>
</div>
</div>
<div class="upgrade-row">
<div class="upgrade-img"></div>
<div class="upgrade-desc">
<h4>Overcharge</h4>
<p>Give the enemy too much of a good thing. Overload enemy ship systems with too much electricity to disable them (something of an electromagnetic pulse, if you will).</p>
</div>
</div>
<div class="upgrade-row">
<div class="upgrade-img"></div>
<div class="upgrade-desc">
<h4>Rapid Fire</h4>
<p>Why miss your target when you can just paint the sky with lasers? Using this upgrade allows you to shoot twice as fast for a limited amount of time. But want a little helpful hint?Getting impatient and clicking to upgrade again will </p>
</div>
</div>
<div class="upgrade-row">
<div class="upgrade-img"></div>
<div class="upgrade-desc">
<h4>Confusion</h4>
<p>It can be confusing trying to make the best environmentally-conscious decision as possible. But this upgrade is meant to <em>really</em> throw enemies for a loop. Confuse enemies so much they come back from where they came from.</p>
</div>
</div>
<div class="upgrade-row">
<div class="upgrade-img"></div>
<div class="upgrade-desc">
<h4>Eco Warriors</h4>
<p>Going green is contagious - just watch your friends and family after making eco-friendly changes in your life. In-game, these allies come in the form of fellow eco-warriors! Friendly ships shoot at enemies to help thin out waves of enemies.</p>
</div>
</div>
<div class="upgrade-row">
<div class="upgrade-img"></div>
<div class="upgrade-desc">
<h4>Golden Repairs</h4>
<p>The best kinds of repairs are the ones that go above and beyond to leave you better off than before. These repairs do just that by not only refilling your ship's health, but by maxing out its capacity to 9.</p>
</div>
</div>
</div>
</section> -->
<a name="merch"></a>
<section id="merch-section">
<div class="merch-banner"></div>
<div class="section-content" data-au="container all-center">
<div class="button-container" data-aux="container all-center">
<a class="button" href="https://shop.pixelplanettoday.com/wasted-space" target="_blank">Shop Wasted Space merch</a>
<a class="button" href="https://terrabyte.eco/donate" target="_blank">Support Development</a>
</div>
</div>
<div class="merch-banner"></div>
</section>
<a name="newsletter"></a>
<section id="newsletter-section">
<div class="section-content col-container" data-au="flex-container align-center">
<div data-au="flex-width flex-container all-center">
<div class="wasted-space-shooting-anim"></div>
</div>
<div class="newsletter-container" data-au="flex-width">
<div class="newsletter-about">
<h2>Sign up for our newsletter, <span class="force-one-line"><little-bytes></span></h2>
<p>Get quarterly round-ups of Wasted Space updates, as well as Pixel Planet Today post highlights and other company updates!</p>
</div>
<div class="newsletter-form">
<form
action="https://buttondown.email/api/emails/embed-subscribe/terrabyte"
method="post"
target="popupwindow"
onsubmit="window.open('https://buttondown.email/terrabyte', 'popupwindow')"
class="embeddable-buttondown-form"
>
<div class="form-row">
<input type="email" name="email" id="bd-email" placeholder="name@email.com"/>
</div>
<div class="form-row">
<input type="submit" value="Subscribe"/>
<input type="hidden" name="tag" value="Wasted Space Subscribers"/>
</div>
<div class="form-row">
<p>Powered by <a class="text-link" href="https://buttondown.email" target="_blank">Buttondown</a>.</p>
</div>
</form>
</div>
</div>
</div>
</section>
<a name="footer"></a>
<footer>
<section id="cookie-footer">
<div class="section-content">
<p>You won't find any cookies on this site, but other Terrabyte sites may include both first- and third-party cookies. To learn more about how we may process your data, take a look at the <a class="text-link" href="https://terrabyte.eco/legal/privacy-policy.html" target="_blank">Terrabyte Privacy Policy</a>.</p>
</div>
</section>
<section class="section-content">
<div id="logos-social-footer" data-au="flex-container align-center">
<div class="footer-logos-container" data-au="flex-container align-center flex-width">
<a href="https://terrabyte.eco/wasted-space" target="_blank">
<div class="footer-logo wasted-space-logo" data-au="set-width"></div>
</a>
<h2 class="set-widthx" data-au="set-width">//</h2>
<a href="https://terrabyte.eco" target="_blank">
<div class="footer-logo tb-logo" data-au="set-width"></div>
</a>
</div>
</div>
<div class="company-links-container">
<a class="text-link" href="https://terrabyte.eco/about-us" target="_blank">About Us</a>
<a class="text-link" href="https://terrabyte.eco/legal/privacy-policy.html" target="_blank">Privacy Policy</a>
<a class="text-link" href="https://terrabyte.eco/legal/cookie-policy.html" target="_blank">Cookie Policy</a>
<a class="text-link" href="https://terrabyte.eco/legal/accessibility.html" target="_blank">Accessibility</a>
</div>
<div id="copyright-social-footer" data-au="flex-container align-top">
<div id="footer-copyright-container" data-au="flex-width">
<p>© <span id="current-year-text"></span> <a class="text-link" href="https://www.terrabyte.eco" target="_blank">Terrabyte, LLC</a>. Terrabyte, its products, and related marks are trademarks of Terrabyte, LLC. All Rights Reserved.</p>
<p>Website designed & hosted by <a class="text-link" href="https://www.goldenharpmedia.com" target="_blank">Golden Harp Media</a></p>
</div>
<div id="website-carbon-container" data-au="set-width">
<!-- website carbon badge -->
<div id="wcb" class="carbonbadge"></div>
<script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
</div>
</div>
</section>
</footer>
</body>
</html>