-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
163 lines (134 loc) · 6.49 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<script src="js/jquery-3.5.1.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.bundle.min.js"></script>
<link rel="preload" href="assets/satans.ttf" as="font" type="font/ttf" crossorigin="anonymous" >
<style>
@font-face
{
font-family: 'Satans';
font-weight:400;
font-style:normal;
src: url('assets/satans.ttf') format('truetype'),
local('Satans Minions'),
url('assets/satans.ttf') format('truetype');
}
</style>
<link rel="stylesheet" href="css/styles.css">
<script src="js/typeahead/typeahead.bundle.min.js"></script>
<script src="js/spark-md5.min.js"></script>
<script src="js/editions.js"></script>
<script src="js/main.js"></script>
<meta charset="utf-8">
<title>Name That Card!</title>
</head>
<body>
<!--<header>-->
<!-- <img class="img-fluid" src="" alt=""> //This will make your image responsive-->
<!--</header>-->
<div class="row no-gutters">
<div class="col-lg-12" id="header">
<!-- <img class="img-fluid" src="assets/banner-image.jpg" alt="">-->
<h1 class="color-overlay display-3">Name That Card!</h1>
</div>
</div>
<div class="container mt-3">
<div id="mainContent" class="jumbotron">
<div class="row mb-4">
<!-- <label for="EditionBox">Pick Edition: </label>-->
<div class="col d-flex justify-content-center">
<label for="EditionBox"></label><select id="EditionBox"></select>
</div>
</div>
<div class="row mb-4">
<div class="col">
<div class="d-flex justify-content-center">
<canvas id="MtgCanvas" width="223" height="310"></canvas>
</div>
</div>
</div>
<!-- progress-bar-animated HUGE MEMORY LEAK .progress-bar.active infinite keyframe animation -->
<div class="row mb-4 m-2">
<div class="col-lg-12">
<!-- progress-->
<div class="progress justify-content-center">
<!-- progress-bar bg-success green glow-->
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100" style="width: 100%"></div>
</div>
</div>
</div>
<div class="row m-2 mb-3">
<div class="col-lg-12 d-flex justify-content-center">
<label for="UserInput"></label>
<input type="text" name="UserInput" class="inputs form-control form-control-lg typeahead" id="UserInput"
placeholder="Press Play to Start!" autocomplete="off" autocorrect="off" autocapitalize="off"
spellcheck="false"/>
<!-- <div class="tt-menu" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none;">-->
<!-- <div class="tt-dataset tt-dataset-states"></div>-->
<!-- </div>-->
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<button type="button" id="ActionBtn" class="btn btn-primary btn-lg">Wait...</button>
</div>
</div>
<div class="row">
<div class="col-md-4 custom-card">
<div class="fill card border-primary mt-5 mx-auto" style="max-width: 20rem;">
<div class="card-header">About</div>
<div class="card-body">
<h4 class="card-title">What is this?</h4>
<p class="card-text">MTG Quiz picks the artwork from a random card in the selected MTG
edition and challenges you to name the card. How well do you know your Mana Flare from your
Mana Clash?</p>
</div>
</div>
</div>
<div class="col-md-4 custom-card">
<div class="fill card border-primary mt-5 mx-auto" style="max-width: 20rem;">
<div class="card-header" id="ranking-header">Your Accuracy: ??</div>
<div class="card-body">
<h4 class="card-title" id="ranking-position">Unknown</h4>
<p class="card-text" id="ranking-desc">You're an up-and-comer so we don't know how well you are
going to do yet. Before we can assign you a rating, you'll need to play a few rounds in order to assess your abilities.</p>
</div>
</div>
</div>
<div class="col-md-4 custom-card">
<div class="fill card border-primary mt-5 mx-auto" style="max-width: 20rem;">
<div class="card-header">Instructions</div>
<div class="card-body">
<h4 class="card-title">How to Play?</h4>
<p class="card-text">Click the Play button to show a new card. Type the name of the card before the time runs out. The game will give you
an overall player rating reflecting your proficiency from Prodigal Sorcerer all the way to
Planeswalker.</p>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<div><a href="https://specularrealms.com/projects">See other projects by Specular Realms</a></div>
</div>
</div>
<img style="position: absolute" id="spinner" src="assets/spinner-main.png" class="rotate" alt="" hidden>
</div>
</div>
<div class="container mt-4">
<div class="row">
<div class="col-lg-12">
<code class="disclaimer">The MTG Picture Quiz is unofficial Fan Content permitted under the Fan Content
Policy. Not approved/endorsed by Wizards. Portions of the materials used are property of Wizards of the
Coast. © Wizards of the Coast LLC.</code>
</div>
</div>
</div>
</body>
</html>