-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
94 lines (75 loc) · 4.08 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Select Character</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../index.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Noto+Serif" rel="stylesheet">
</head>
<body>
<img id="end-result-image" class="hide" src="/img/tmp/chracter select frame.png" alt="">
<div class="main-container">
<div class="background-img-conainer">
<img src="/img/background-dark.svg" alt="" class="background-img">
</div>
<div class="content-section">
<h1 class="game-title">THE JOURNEY NORTH</h1>
<h3 class="player-instructions">
SELECT TWO CHARACTERS TO PLAY
</h3>
<h3 class="player-instructions" id="errorInstructions">
only select two characters
</h3>
<div class="play-button invisable" id="playButton">PLAY</div>
<div class="shield-container">
<div class="shield-item" value="brian"><img src="img/brian in shild.svg" alt=""></div>
<div class="shield-item" value="jon"><img src="img/jon in shild.svg" alt=""></div>
<div class="shield-item" value="dineris"><img src="img/deneris in shild.svg" alt=""></div>
<div class="shield-item" value="tyrian"><img src="img/tirian in shild.svg" alt=""></div>
</div>
<div class="container-box invisable" id="informationBox">
<div class="selected-chracter-info">
<!-- name: "Jon Snow" -->
<label for="chracterName" id="chracterNameLabel">
<h3 id="chracterName" class="chracter-info__name">Jon Snow</h3>
</label>
<!-- ancestralWeapons: ["Ice"] -->
<label for="ancestralWeapons">Ancestral Weapons:
<h4 id="ancestralWeapons" class="chracter-info__weapon">Ice</h4>
</label>
<!-- coatOfArms: "A running grey direwolf, on an ice-white field" -->
<label for="coatOfArms">Coat Of Arms:
<h4 id="coatOfArms" class="chracter-info__coat-of-armas">A running grey direwolf, on an ice-white field</h4>
</label>
<!-- house: "House Stark of Winterfell" -->
<label for="house">House:
<h4 id="house" class="chracter-info__house">House Stark of Winterfell</h4>
</label>
<!-- alias: "Lord Snow" -->
<label for="charcterAlias">Alias:
<h4 id="charcterAlias" class="chracter-info__alias">Lord Snow</h4>
</label>
<!-- stats: {name: "Jon Snow", ID: 583, modefiers: Array(0)} -->
<!-- title: "Lord Commander of the Night's Watch" -->
<label for="characterTitle">Title:
<h4 id="characterTitle" class="chracter-info__title">Lord Commander of the Night's Watch</h4>
</label>
<!-- words: Winter is Coming" -->
<label for="houseWords"> House Words:
<h4 id="houseWords" class="chracter-info__words">Winter is Coming</h4>
</label>
</div>
</div>
</div>
</div>
<!-- API -->
<!-- https://anapioficeandfire.com/. -->
<!-- multiplayer -->
<!-- https://socket.io/docs/ -->
<script src="index.js"></script>
</div>
</body>
</html>