Typing_Game/index.html at master · dmaydan/Typing_Game · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	</head>
	<body>
		<div class="jumbotron jumbotron-fluid bg-info text-white text-center">
			<div class="container">
				<h2 class="display-2">Typing Game</h2>
				<p class="lead">Test your typing abilities</p>
			</div>
		</div>
		<div class="container text-muted" id="main">
			<div class="row" style="margin-bottom: 20px;">
				<div class="card border-info col-7 ">
					<div class="card-body">
						<div class="line1 lead" data-bind="foreach: line1">
							<span class="word" data-bind="text: $data"></span>
						</div>
						<div class="line2 lead" data-bind="foreach: line2">
							<span class="word" data-bind="text: $data"></span>
						</div>
					</div>
				</div>
			</div>
			<div class="row" style="margin-bottom: 20px;">
				<div class="card border-0 col-7">
					<div class="row">
						<input autofocus="autofocus" data-bind="textInput: currentInput" class="col form-control form-control-lg" type="text">
						<div class="col-auto text-white bg-dark card d-flex align-items-center justify-content-center" data-bind="text: time" style="font-family:monospace; font-size: 17px;"></div>
						<button type="button" class="col-auto btn btn-primary" data-bind="click: restart"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path style="fill: #ffffff;"d="M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 14.8c-.45-.83-.7-1.79-.7-2.8 0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.2c.44.84.7 1.79.7 2.8 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z"/></svg></button>
					</div>
				</div>
			</div>
		</div>
		<script type='text/javascript' src="knockout-3.4.2.js"></script>
		<script type='text/javascript' src="jquery-3.3.1.min.js"></script>
		<script type='text/javascript' src="app.js"></script>
	    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
	    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	</body>
</html>