forked from Grae-Drake/hg-units
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (114 loc) · 4.93 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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HG Units</title>
<meta name="description" content="Collection of units from Highgrounds">
<meta name="author" content="Grae Drake">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<header>
<div class="container">
<ul class="navigation row">
<a class="three columns" href="http://www.highgroundsgame.com" target="_blank">
<li>Play Highgrounds <i class="fa fa-external-link-square"></i></li>
</a>
</ul>
</div>
</header>
<main class="container">
<div class="row hero">
<h2 style="margin-top: 10%">Highgrounds Units</h2>
</div>
<aside class="buttons">
<div class="search-text">
<p>Search</p>
<i class="fa fa-question-circle"></i>
</div>
<input id="search" type="text"/>
<div class="search-text">
<p href="#">Filter by city</p>
</div>
<div class="cities"></div>
</aside>
<section class="search-instructions">
<p>Search by unit name, type, cost, rarity, or ability.</p>
<p>Use a comma to separate multiple search criteria. For example, try searching for <span>2 gold, knight</span>, or <span>crystal, thief</span>.</p>
<p>You can also limit your search to certain fields by starting your query with <span>!name</span>, <span>!type</span>, <span>!cost</span>, <span>!rarity</span>, or <span>!action</span>. For example, try searching for <span>!cost 3 gold</span> or <span>!rarity rare</span>.</p>
</section>
<div class="unit-wrapper">
<div class="units"></div>
</div>
</main>
<footer>
<div>All images copyright 2012 Heart Shaped Games, all rights reserved.</div>
<div>Made with <i class="fa fa-code"></i> by <a href="http://www.grae.io/">Grae</a> and <a href="https://github.com/Grae-Drake/hg-units/graphs/contributors">contributers</a>. Fork me on <a href="www.github.com/Grae-Drake/hg-units">GitHub</a>. Now go play <a href="http://www.highgroundsgame.com" target="_blank">Highgrounds</a>.</div>
</footer>
<!-- City template -->
<script id="city-button" type="text/x-handlebars-template">
<button class="city"
data-city-id="{{id}}">
{{ name }}
</button>
</script>
<!-- Unit template -->
<script id="unit-card" type="text/x-handlebars-template">
<div class="unit {{#unless compendiumId}}non-compendium{{/unless}}"
data-search-text="{{searchText}}"
data-compendium-id="{{#if compendiumId}}{{compendiumId}}{{else}}undefined{{/if}}">
<div class="unit-top">
<div class="unit-sprite">
<img src="images/outline.png">
</div>
<div class="unit-top-text">
<p class="unit-name"> {{ toUpperCase name }} </p>
<p class="unit-types">
{{#each types }}
{{this}}
{{/each}}
</p>
<p class="unit-cost">
{{#if cost.gold }}
{{ cost.gold }} Gold
{{/if}}
{{#if cost.crystal}}
{{ cost.crystal }} Crystal
{{/if}}
{{#if cost.wood}}
{{ cost.wood }} Wood
{{/if}}
</p>
<p class="unit-rarity"> {{ rarity }} </p>
</div>
</div>
<div class="unit-bottom">
<div class="unit-back-row">
<p class="unit-row-title">Back Row</p>
{{#each homeActions}}
<p class="unit-action {{ this.type }} "> {{ this.value }} {{ toUpperCase this.type }} </p>
{{/each}}
</div>
<div class="unit-front-row">
<p class="unit-row-title">Front Row</p>
{{#each battleActions}}
<p class="unit-action {{ this.type }} "> {{ this.value }} {{ toUpperCase this.type }} </p>
{{/each}}
</div>
</div>
</div>
</script>
<!-- End unit template -->
<script type="text/javascript" src="xml-to-json.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="unitCompendium.js"></script>
</body>
</html>