-
Notifications
You must be signed in to change notification settings - Fork 47
/
index.html
76 lines (72 loc) · 4.07 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
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-73203609-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-73203609-3');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>The Command Line Heroes BASH!</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
<canvas id="game-canvas"></canvas>
<img id="test-pattern" src="assets/clh-thumb.png">
<div id="game">
<div id="intro" v-bind:class="{ show: state == 'loading' }">
<img class="logo" src="./assets/clh-logo-white.svg">
<span>
<span v-if="isMobile">Apologies, mobile is not yet supported, but <a href="https://github.com/CommandLineHeroes/clh-bash">PRs are welcome</a>! </span>
<span v-else>DOWNLOADING</span>
<span v-if="!isMobile" class="cursor">█</span>
</span>
</div>
<div v-bind:class="{ show: showTitle }" id="title-screen">
<img v-bind:class="{ show: showTitle }" id="clh-logo" src="./assets/clh-logo-white.svg">
<p v-bind:class="{ show: showTitle }" id="instructions">
Test your command line skills.<br>
You have {{parseInt(gameDuration/1000)}} seconds to type commands from:
</p>
<p v-bind:class="{ show: showTitle }" id="langs">
BASH · JAVASCRIPT · PYTHON · HTML5
</p>
<p v-bind:class="{ show: showTitle }" id="tagline">
Set the terminal on fire. Type PLAY to begin.
</p>
<p v-bind:class="{ show: showTitle }" id="listen">
Listen to the podcast at <a target=_blank href="https://www.redhat.com/en/command-line-heroes">redhat.com/commandlineheroes</a>.<br><br>
<a href="#credits" onclick="showCredits()">Credits</a> · <a target="_blank" href="https://github.com/CommandLineHeroes/clh-bash">GitHub</a>
</p>
<p v-bind:class="{ show: showTitle }" id="credits">
Created by <a href="https://clayto.com">Michael Clayton</a>, <a href="http://jaredsprague.com/">Jared Sprague</a>, and the <a href="https://www.redhat.com/en/command-line-heroes/">Command Line Heroes</a> team and community.<br><br>
Soundtrack: <a href="https://waveshaper1.bandcamp.com/track/66-mhz">"66 MHZ"</a> by <a href="https://waveshaper1.bandcamp.com/">Waveshaper</a>.<br><br>
Special thanks: Dan Courcy · Eric Kramer · Open-source contributors · <a href="https://discord.gg/DYEGmFc">Command Line Heroes Discord</a> community<br><br>
<a href="#instructions" onclick="showInstructions()">Back</a>
</p>
</div>
<textarea
v-model="cmd"
v-on:keydown="handleKeypress"
v-on:keyup="handleKeyup"
v-on:paste="handlePaste"
ref="cmd"
spellcheck=false
type="text"
name="cmd"
id="cmd"></textarea>
</div>
<script src="node_modules/howler/dist/howler.min.js"></script>
<script src="node_modules/ismobilejs/dist/isMobile.min.js"></script>
<script src="node_modules/three/build/three.min.js"></script>
<script src="node_modules/three/examples/js/libs/stats.min.js"></script>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/lodash/lodash.min.js"></script>
<script src="node_modules/@tweenjs/tween.js/src/Tween.js"></script>
<script type="module" src="src/main.js"></script>
</body>
</html>