88 lines
2.5 KiB
HTML
88 lines
2.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Wings of the 90s - Flight Simulator</title>
|
||
|
|
<link rel="stylesheet" href="css/style.css">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<canvas id="game-canvas" width="320" height="200"></canvas>
|
||
|
|
<div id="crt-overlay"></div>
|
||
|
|
|
||
|
|
<div id="loading-screen">
|
||
|
|
<div class="loading-box">
|
||
|
|
<h1>WINGS OF THE 90S</h1>
|
||
|
|
<h2>Flight Simulator v1.0</h2>
|
||
|
|
<div class="progress-container">
|
||
|
|
<div class="progress-bar" id="progress-bar"></div>
|
||
|
|
</div>
|
||
|
|
<p id="loading-message">INITIALIZING...</p>
|
||
|
|
<div class="loading-plane">
|
||
|
|
<pre>
|
||
|
|
__
|
||
|
|
/ \
|
||
|
|
| . . |
|
||
|
|
\___/
|
||
|
|
/ \
|
||
|
|
/ \
|
||
|
|
~~~~~
|
||
|
|
</pre>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="main-menu" style="display:none;">
|
||
|
|
<div class="menu-box">
|
||
|
|
<h1>WINGS OF THE 90S</h1>
|
||
|
|
<div id="menu-items">
|
||
|
|
<div class="menu-item selected" data-action="new-flight">NEW FLIGHT</div>
|
||
|
|
<div class="menu-item" data-action="controls">CONTROLS</div>
|
||
|
|
<div class="menu-item" data-action="quit">QUIT</div>
|
||
|
|
</div>
|
||
|
|
<p class="copyright">(C) 1993 PIXEL WINGS SOFTWARE</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="controls-screen" style="display:none;">
|
||
|
|
<div class="menu-box">
|
||
|
|
<h2>CONTROLS</h2>
|
||
|
|
<div class="controls-list">
|
||
|
|
<p>W / S ... Throttle Up / Down</p>
|
||
|
|
<p>ARROW UP / DOWN ... Pitch</p>
|
||
|
|
<p>ARROW LEFT / RIGHT ... Roll</p>
|
||
|
|
<p>Q / E ... Yaw (Rudder)</p>
|
||
|
|
<p>C ... Toggle Camera View</p>
|
||
|
|
<p>ESC ... Pause / Menu</p>
|
||
|
|
</div>
|
||
|
|
<p class="prompt">PRESS ANY KEY TO CONTINUE</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="pause-menu" style="display:none;">
|
||
|
|
<div class="menu-box">
|
||
|
|
<h2>PAUSED</h2>
|
||
|
|
<div id="pause-items">
|
||
|
|
<div class="menu-item selected" data-action="resume">RESUME</div>
|
||
|
|
<div class="menu-item" data-action="main-menu">MAIN MENU</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="hud-overlay" style="display:none;">
|
||
|
|
<canvas id="hud-canvas" width="320" height="200"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="quit-screen" style="display:none;">
|
||
|
|
<div class="menu-box">
|
||
|
|
<h1>GOODBYE!</h1>
|
||
|
|
<p>Thanks for flying Wings of the 90s.</p>
|
||
|
|
<p class="prompt">CLOSE THIS TAB TO EXIT</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script type="module" src="js/main.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|