-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
425 lines (319 loc) · 25.3 KB
/
index.html
File metadata and controls
425 lines (319 loc) · 25.3 KB
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
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
<!DOCTYPE html>
<html lang="en">
<head>
<title>The First Explorers</title>
<script src="https://cloud.ccm19.de/app.js?apiKey=6fc0f32670a35f4722c1580a7a4f84253d80f878e0d93d00&domain=65310321e08e0d36190d82a4" referrerpolicy="origin"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="The First Explorers - a Build-Up strategy game. Join the community and watch this game grow.">
<link rel="alternate" hreflang="de" href="../de-de/">
<link rel="shortcut icon" href="media/images/TheFirstExplorers_Icon_withoutBG.png" type="image/x-icon">
<link rel="stylesheet" href="assets/css/boxicons.min.css">
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<!--==================== HEADER ====================-->
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">
<img src="media/images/TheFirstExplorers_Icon_withoutBG.png" alt="" class="nav__logo-img">
The First Explorers
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">Home</a>
</li>
<li class="nav__item">
<a href="#trailer" class="nav__link">Media</a>
</li>
<li class="nav__item">
<a href="#about" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="#faq" class="nav__link">FAQ</a>
</li>
<li class="nav__item">
<a href="https://drive.google.com/drive/u/1/folders/1T0pX4SKt2TOmMQKH-PEkljupGZGAXHyY" target="_blank" class="nav__link">Presskit</a>
</li>
<a href="mailto:contact@the-first-explorers.com" class="button button--ghost">Contact</a>
<a href="https://the-first-explorers.com/de-de/" class="button button--language">DE</a>
</ul>
<div class="nav__close" id="nav-close">
<i class='bx bx-x'></i>
</div>
<img src="media/images/TheFirstExplorers_Icon_withoutBG.png" alt="" class="nav__img">
</div>
<div class="nav__toggle" id="nav-toggle">
<i class='bx bx-grid-alt'></i>
</div>
</nav>
</header>
<main class="main">
<!--==================== HOME ====================-->
<div class="teaser">
<div id="teaser-video"></div>
<section class="home container" id="home">
<div class="home__content grid">
<div class="home__group">
<img src="media/images/TheFirstExplorers_Icon_withoutBG.png" alt="" class="home__img">
</div>
<div class="home__data">
<h3 class="home__subtitle">Build-up strategy game</h3>
<h1 class="home__title">The First <br> Explorers</h1>
<p class="home__description">Join the community and watch this game grow</p>
<div class="home__buttons_center">
<a href="https://store.steampowered.com/app/2544820/The_First_Explorers/" target="_blank" class="footer__social-link">
<img src="media/images/WishlistNow.png"/>
</a>
</div>
<div class="home__buttons_center">
<a href="https://www.patreon.com/user?u=102693809" target="_blank" class="footer__social-link">
<img src="media/images/SupportMeOnPatreon.png"/>
</a>
</div>
<div class="home__buttons">
<a href="https://discord.gg/NPNtT6Wmj2" target="_blank" class="footer__social-link">
<i class='bx bxl-discord-alt' ></i>
</a>
<a href="https://www.patreon.com/user?u=102693809" target="_blank" class="footer__social-link">
<i class='bx bxl-patreon' ></i>
</a>
<a href="https://twitter.com/First_Explorers" target="_blank" class="footer__social-link">
<i class='bx bxl-twitter' ></i>
</a>
<a href="https://www.youtube.com/@thefirstexplorers" target="_blank" class="footer__social-link">
<i class='bx bxl-youtube' ></i>
</a>
<a href="https://www.instagram.com/TheFirstExplorers/" target="_blank" class="footer__social-link">
<i class='bx bxl-instagram-alt' ></i>
</a>
</div>
</div>
</div>
</section>
</div>
<!--==================== TRAILER ====================-->
<!-- <section class="section trailer" id="trailer">
<div class="trailer__container container grid">
<h2>Media</h2>
<h3>Trailer</h3>
<iframe src="https://www.youtube.com/embed/0YYs7Po3xNI?si=xLPwU3Ix-BbnVBzy" title="YouTube video player" frameborder="0" style="aspect-ratio: 16/9; width: 100%; height: 100%;"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<h3>Pre-Alpha Gameplay</h3>
<iframe src="https://www.youtube.com/embed/7yclkBWfJfo?si=sA0o4DPwzhOqwioJ" title="YouTube video player" frameborder="0" style="aspect-ratio: 16/9; width: 100%; height: 100%;"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</section>
-->
<!--==================== ABOUT ====================-->
<section class="section about" id="about">
<div class="about__container container grid">
<div class="about__data">
<h2 class="section__title about__title">About <br> The First Explorers</h2>
<p class="about__description">The First Explorers is an atmospheric settlers-like game hitting the sweetspot between build-up and real-time strategy. Build, defend and expand your settlement in your very own way.
</p>
</div>
<img src="media/images/the-first-explorers-boxart.jpg" alt="" class="about__img">
</div>
</section>
<!--==================== FAQ ====================-->
<section class="section section_special" id="faq">
<div class="container faq__data" x-data="{ openPanel: null }">
<h2>FAQ</h2>
<h3>Game & Lore</h3>
<h4 @click="openPanel == 'world_setting' ? openPanel = null : openPanel = 'world_setting'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'world_setting' }">
In what kind of world is "The First Explorers" set?
</h4>
<p x-show="openPanel == 'world_setting'" x-transition:enter.duration.1500ms.origin.left>The game is set in the time of antiquity in Europe. The antiquity and late antiquity serve as a template for the
factions, the game world, artstyle and goods. However, historical accuracy is not a focus of the game.</p>
<h4 @click="openPanel == 'special' ? openPanel = null : openPanel = 'special'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'special' }">
What is special about "The First Explorers"?
</h4>
<p x-show="openPanel == 'special'" x-transition:enter.duration.1500ms.origin.left>You'll experience an atmospheric, settler-like game that offers the perfect mix between building and real-time strategy.
Look forward to a bustling world with an aquarium effect, i.e. every good and every inhabitant is graphically
represented and you can follow every production step. Only by observing the game world will you be able to see where
your fortunes are needed.</p>
<h4 @click="openPanel == 'fantasy' ? openPanel = null : openPanel = 'fantasy'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'fantasy' }">
Will there be fantasy elements?
</h4>
<p x-show="openPanel == 'fantasy'" x-transition:enter.duration.1500ms.origin.left>No, fantasy elements are not planned. There will be no fantasy peoples, wizards, werewolves or anything like that.</p>
<h4 @click="openPanel == 'factions' ? openPanel = null : openPanel = 'factions'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'factions' }">
Will there be different factions?
</h4>
<p x-show="openPanel == 'factions'" x-transition:enter.duration.1500ms.origin.left>Yes, it's planned to add the Romans, the Carthaginians and the Gauls.</p>
<h3>Gameflow</h3>
<h4 @click="openPanel == 'objective' ? openPanel = null : openPanel = 'objective'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'objective' }">
What is the objective in the game?
</h4>
<p x-show="openPanel == 'objective'" x-transition:enter.duration.1500ms.origin.left>You will land with your ship and your crew on an island and have to build a thriving settlement from scratch using the
available resources on the map. To successfully complete your game, you must defeat all opponents on the map.</p>
<h4 @click="openPanel == 'victory_condition' ? openPanel = null : openPanel = 'victory_condition'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'victory_condition' }">
What will be the victory conditions?
</h4>
<p x-show="openPanel == 'victory_condition'" x-transition:enter.duration.1500ms.origin.left>Victory by military success is firmly planned. However, there will also be other victory variants, which depend on the
map or game mode. Friends of peaceful victories should not miss out. There are plans for victory through economic
success or through the construction of special building projects.</p>
<h4 @click="openPanel == 'game_duration' ? openPanel = null : openPanel = 'game_duration'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'game_duration' }">
How long will a game last?
</h4>
<p x-show="openPanel == 'game_duration'" x-transition:enter.duration.1500ms.origin.left>A game can last between 1.5 hours and 4-5 hours and depends on how the players play. The game mechanics offer a lot of
flexibility here.</p>
<h4 @click="openPanel == 'game_modes' ? openPanel = null : openPanel = 'game_modes'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'game_modes' }">
What game modes are planned?
</h4>
<p x-show="openPanel == 'game_modes'" x-transition:enter.duration.1500ms.origin.left>Currently, the focus is on skirmish against the AI and human opponents, i.e. PvE and PvP. There is also a story campaign
planned!</p>
<h3>Gameplay</h3>
<h4 @click="openPanel == 'building' ? openPanel = null : openPanel = 'building'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'building' }">
How will building work?
</h4>
<p x-show="openPanel == 'building'" x-transition:enter.duration.1500ms.origin.left>Buildings and roads can be placed freely without a grid. Move and rotate the building until you found the perfect spot.</p>
<p x-show="openPanel == 'building'" x-transition:enter.duration.1500ms.origin.left>You'll find yourself trying to squeeze out every last bit of open space in your settlement!
There will also be hilly terrain that will increase the construction time of your buildings, so the properly chosen
building site is golden.</p>
<h4 @click="openPanel == 'civilian' ? openPanel = null : openPanel = 'civilian'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'civilian' }">
Can civilian buildings or civilian settlers be attacked?
</h4>
<p x-show="openPanel == 'civilian'" x-transition:enter.duration.1500ms.origin.left>No, civilian buildings or civilian settlers cannot be attacked by any unit. Only military buildings like watchtowers can
be captured.</p>
<h4 @click="openPanel == 'civilian_flee' ? openPanel = null : openPanel = 'civilian_flee'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'civilian_flee' }">
Do civilian settlers flee from enemy units?
</h4>
<p x-show="openPanel == 'civilian_flee'" x-transition:enter.duration.1500ms.origin.left>No, civilian settlers will continue to transport goods and will not flee.</p>
<h4 @click="openPanel == 'direct_unit_control' ? openPanel = null : openPanel = 'direct_unit_control'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'direct_unit_control' }">
Is there a direct unit control?
</h4>
<p x-show="openPanel == 'direct_unit_control'" x-transition:enter.duration.1500ms.origin.left>Civilian residents such as carriers or construction workers are indirectly controlled by your construction orders and
production tasks.</p>
<p x-show="openPanel == 'direct_unit_control'" x-transition:enter.duration.1500ms.origin.left>Soldiers, geologists, etc. are controlled directly. Look forward to raising huge armies and commanding them in battle!</p>
<h4 @click="openPanel == 'territory_expansion' ? openPanel = null : openPanel = 'territory_expansion'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'territory_expansion' }">
How do I expand my territory?
</h4>
<p x-show="openPanel == 'territory_expansion'" x-transition:enter.duration.1500ms.origin.left>The territory is delimited with border stones. The border can be expanded by placing military buildings like
watchtowers.</p>
<h4 @click="openPanel == 'settlement_upgrades' ? openPanel = null : openPanel = 'settlement_upgrades'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'settlement_upgrades' }">
Will there be settlement upgrades?
</h4>
<p x-show="openPanel == 'settlement_upgrades'" x-transition:enter.duration.1500ms.origin.left>Yes, by building special landmarks the settlement will level up and unlock new buildings and units in the game. The
settlement will start at the hamlet level. Currently, 3 settlement levels are planned: the hamlet, village and town level.</p>
<h4 @click="openPanel == 'mines' ? openPanel = null : openPanel = 'mines'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'mines' }">
Will there be mines and mining?
</h4>
<p x-show="openPanel == 'mines'" x-transition:enter.duration.1500ms.origin.left>Yes, there will be real mountains where you can build mines.</p>
<h4 @click="openPanel == 'food_system' ? openPanel = null : openPanel = 'food_system'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'food_system' }">
How does the food system work?
</h4>
<p x-show="openPanel == 'food_system'" x-transition:enter.duration.1500ms.origin.left>Miners work only when they get their basic food.</p>
<p x-show="openPanel == 'food_system'" x-transition:enter.duration.1500ms.origin.left>Production buildings basically work without meals. However, production efficiency can be massively increased with meals.
Meals are prepared in residential buildings by cooks. The cooks get the food from market stalls. The higher the
settlement level, the higher quality meals are possible.</p>
<h4 @click="openPanel == 'inhabitant_recrution' ? openPanel = null : openPanel = 'inhabitant_recrution'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'inhabitant_recrution' }">
How to get new inhabitants?
</h4>
<p x-show="openPanel == 'inhabitant_recrution'" x-transition:enter.duration.1500ms.origin.left>Currently, it is planned to recruit them via a port. The inhabitants will then come by ship from the homeland.</p>
<h4 @click="openPanel == 'walls' ? openPanel = null : openPanel = 'walls'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'walls' }">
Will there be walls?
</h4>
<p x-show="openPanel == 'walls'" x-transition:enter.duration.1500ms.origin.left>Yes, wooden palisades and stone walls are planned.</p>
<h4 @click="openPanel == 'soldiers_on_towers' ? openPanel = null : openPanel = 'soldiers_on_towers'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'soldiers_on_towers' }">
Can soldiers be positioned on towers and stone walls?
</h4>
<p x-show="openPanel == 'soldiers_on_towers'" x-transition:enter.duration.1500ms.origin.left>Absolutely.</p>
<h4 @click="openPanel == 'combat_power' ? openPanel = null : openPanel = 'combat_power'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'combat_power' }">
Will there be a combat power system?
</h4>
<p x-show="openPanel == 'combat_power'" x-transition:enter.duration.1500ms.origin.left>Definitely, especially at the beginning of a game the soldiers on their home territory will have a massive combat power
bonus over opponents. This effectively prevents rush tactics. In the course of a game you will be able to influence the
combat power.</p>
<h3>Community</h3>
<h4 @click="openPanel == 'mod_support' ? openPanel = null : openPanel = 'mod_support'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'mod_support' }">
Is mod support planned?
</h4>
<p x-show="openPanel == 'mod_support'" x-transition:enter.duration.1500ms.origin.left>Yes!</p>
<p x-show="openPanel == 'mod_support'" x-transition:enter.duration.1500ms.origin.left>Modsupport is planned.</p>
<p x-show="openPanel == 'mod_support'" x-transition:enter.duration.1500ms.origin.left>How extensive this will be, will be decided in the further development. Mods should be able to be searched, installed
and activated directly in the game as plugins. Self-created maps should be possible.</p>
<h4 @click="openPanel == 'community_interaction' ? openPanel = null : openPanel = 'community_interaction'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'community_interaction' }">
Will there be interaction with the community?
</h4>
<p x-show="openPanel == 'community_interaction'" x-transition:enter.duration.1500ms.origin.left>Absolutely. The developer is looking forward to a lively exchange on the official Discord server.
There, development progress will be shared and discussed with the community at regular inlefttervals.
I'm looking forward to your ideas and feedback!</p>
<h3>Behind The Scenes</h3>
<h4 @click="openPanel == 'stage_of_development' ? openPanel = null : openPanel = 'stage_of_development'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'stage_of_development' }">
What stage of development is the game currently in?
</h4>
<p x-show="openPanel == 'stage_of_development'" x-transition:enter.duration.1500ms.origin.left>Currently, the development is in the prototype phase. The game mechanics are being tested and iterated.</p>
<p x-show="openPanel == 'stage_of_development'" x-transition:enter.duration.1500ms.origin.left>Once the prototype phase is successfully completed, a Steam page will be created for the game and it will move to the next development phase.</p>
<h4 @click="openPanel == 'engine' ? openPanel = null : openPanel = 'engine'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'engine' }">
Which engine is used to develop the game?
</h4>
<p x-show="openPanel == 'engine'" x-transition:enter.duration.1500ms.origin.left><strong>Unreal Engine 5</strong> is used for development.</p>
<h4 @click="openPanel == 'procedural_maps' ? openPanel = null : openPanel = 'procedural_maps'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'procedural_maps' }">
Will there be handcrafted or procedural maps?
</h4>
<p x-show="openPanel == 'procedural_maps'" x-transition:enter.duration.1500ms.origin.left>Currently, the focus is on creating hand-crafted maps for the time being. However, since the beginning of the
development, it has been ensured that the use of procedural elements is possible for later. So procedural maps are
definitely in the realm of possibility.</p>
<h4 @click="openPanel == 'who' ? openPanel = null : openPanel = 'who'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'who' }">
Who is behind "The First Explorers"?
</h4>
<p x-show="openPanel == 'who'" x-transition:enter.duration.1500ms.origin.left>The project is a one-man-project by Buchwald Interactive. Behind the nickname is Sebastian, who lives in Germany and
develops the project in his spare time.</p>
<h4 @click="openPanel == 'platforms' ? openPanel = null : openPanel = 'platforms'">
<img src="media/images/arrow.png" alt="" x-bind:class="{ 'rotate-90': openPanel == 'platforms' }">
For which platforms will the game be released?
</h4>
<p x-show="openPanel == 'platforms'" x-transition:enter.duration.1500ms.origin.left>Currently a release for Windows is planned. Other platforms may be added in the course of development.</p>
</div>
</section>
</main>
<!--==================== FOOTER ====================-->
<footer class="footer section">
<span class="footer__copy">© Buchwald Interactive. All rights reserved.</span>
<a href="impressum/impressum.html" class="footer__impressum">Impressum</a>
</footer>
<!--=============== SCROLL UP ===============-->
<a href="#" class="scrollup" id="scroll-up">
<img src="media/images/wheel.png">
</a>
<!--=============== ALPINE JS ===============-->
<script defer src="assets/js/alpine.js"></script>
<!--=============== SCROLL REVEAL ===============-->
<script src="assets/js/scrollreveal.min.js"></script>
<!--=============== SWIPER JS ===============-->
<!-- <script src="assets/js/swiper-bundle.min.js"></script> -->
<!--=============== MAIN JS ===============-->
<script src="assets/js/main.js"></script>
<!--=============== YOUTUBE IMPLEMENTATION ===============-->
<!-- <script src="https://www.youtube.com/iframe_api"></script> -->
</body>
</html>