-
Notifications
You must be signed in to change notification settings - Fork 2
/
menu.html
64 lines (55 loc) · 3.19 KB
/
menu.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
<!DOCTYPE html>
<html>
<head>
<title>Artemis - Supplementary Console Selection</title>
<meta charset="utf-8" />
<meta name="description" content="Faux GUI supplement for set-dressing a gaming session of Artemis SBS." />
<meta name="author" content="Justin Warwick" />
<link rel='stylesheet' href='./sbs-ui.css' />
<!-- Here would be a good place to put your own additional css link for unique/special things like spacing adjsutments based on element ID. The fewer changes in sbs-ui.css, the better (esp. if you might want to share improvements that really are general purpose) -->
<script src="./sbs-ui.js"></script>
</head>
<body>
<div id="super_container">
<div id="console_super_controls">
<button class="major_action major_action_active">MENU</button>
<button class="major_action" onclick="window.location.href='chronometer.html';">CHRONOMETER</button>
<button class="major_action" onclick="window.location.href='lifesupport.html';">LIFE SUPPORT</button>
<button class="major_action" onclick="window.location.href='cartography.html';">CARTOGRAPHY</button>
<button class="major_action" onclick="window.location.href='commsvideo.html';">VIDEO COMMS</button>
<button class="major_action" onclick="window.location.href='manifest.html';">MANIFEST</button>
<button class="major_action" onclick="window.location.href='accesscontrol.html';">ACCESS CONTROL</button>
</div>
<div id="communique" >
<h1>Welcome to Artemis Glitter UI Style supplementary console selection</h1>
<p>Status and information flowing endlessly, giving a certain ambiance.</p>
<p>Even if information is not functionally meaningful, the experience is enhance by giving a feeling of authenticity.</p>
<p>Presumably, you want to fill the screen pretty evenly, if browser were in fullscreen mode. But also becareful not to overflow or else you get scrollbars that spoil the effect a little. Hopefully this page is clean and clear enough that you could copy it, rename it, then start copy and pasting segments that you like and just replace the content and order a little and then you have yourself a custom faux console.</p>
<button class="action" onclick="javascript:sessionStorage['greeting'] = 'acknowledged'; this.parentNode.style.display = 'none';">ACKNOWLEDGE</button>
<!--Probably it is better to put onclick and other evenhandler code in a seperate script block, even in a separate JS file. But this works ok too.-->
</div>
<div>
<h2>Alert Status: Nominal</h2>
<h2>Captain's Log: Supplemental</h2>
<p>ALPHA CONDITION ACTIVE</p>
<ul>
<li>Gravitational wave detected</li>
<li class="confirmed">Subspace aperture confirmed</li>
<li>polarity nominal</li>
<li>data acquisition in progress</li>
</ul>
<button class="action">INTRACOMM</button>
</div>
</div>
<audio id="audUmmy"/><!--Just leave this here, just needed to be able to query canplay in the initialization code to load compatible media types -->
<script>
window.console && console.log("TODO some dynamicness");
if (localStorage['sbs-ui-intro'] == "complete") {
console.log("No need to display dialog");
} else {
document.querySelector("#communique").style.display = 'block';
}
</script>
<script src="sbs-ui-wireup.js"></script>
</body>
</html>