-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
50 lines (46 loc) · 2.23 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
<!doctype html>
<html lang="en">
<head>
<title>AJAX / Hangman</title>
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div class="container">
<header>
<h1>Hangman</h1>
</header>
<main>
<section class="content-container">
<div class="words-side">
<div class="letters-picked">
<p>Letters picked: <span class="display-letters"></span></p>
</div>
<div class="guess-words">
<p>Guess: <span class="guess-here"></span></p>
</div>
<form class="form-container">
<label>Choose a Letter (A - Z)</label>
<input class="form-input-box" type="text" maxlength="1" pattern="[a-zA-Z]" name="wordPicker" id="inputPart" value="" tabindex="1" required>
<input class="buttonPart" type="submit" value="Submit">
</form>
</div>
<div class="hangman-side">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="300px" viewBox="0 0 150 300" enable-background="new 0 0 150 300" xml:space="preserve">
<line class="arm-left" fill="none" stroke="#000000" stroke-width="8" stroke-miterlimit="10" x1="70.014" y1="126.375" x2="42.931" y2="154"/>
<line class="arm-right" fill="none" stroke="#000000" stroke-width="8" stroke-miterlimit="10" x1="70.014" y1="126.375" x2="103.694" y2="154"/>
<line class="body" fill="none" stroke="#000000" stroke-width="8" stroke-miterlimit="10" x1="70" y1="107" x2="70" y2="201"/>
<ellipse class="head" stroke="#000000" stroke-width="8" stroke-miterlimit="10" cx="70.014" cy="67.694" rx="42.014" ry="39.583"/>
<line class="leg-left" fill="none" stroke="#000000" stroke-width="8" stroke-miterlimit="10" x1="70" y1="197.208" x2="34.597" y2="267.348"/>
<line class="leg-right" fill="none" stroke="#000000" stroke-width="8" stroke-miterlimit="10" x1="70" y1="197.208" x2="106.473" y2="267.348"/>
</svg>
<div class="turn-counter"></div>
</div>
<div class="end-times">
<p></p>
</div>
</section>
</main>
</div>
<script src="js/app.js"></script>
</body>
</html>