wcstuff/index.html at master · jinRuan/wcstuff · 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
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
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="kimono-main.min.js"></script>
		<script src="js/knob.min.js"></script>
		<script src="c3.min.js"></script>
		<script src="charts.js"></script>
        <script src="js/flags.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script>
		<link rel="stylesheet" type="text/css" href="kimono-main.min.css">
		<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.1.29/c3.css">
		<style>
			.select1{
				padding-top: 30px;
				padding-bottom: 40px;
			}

			img.octopus {
				height: 60px;
			}


			.c3 text {
				fill: white;
			}

			p.data-label {
				padding-bottom: 10px;
			}

			div.data-column {
				text-align: center;
			}

			p.small {
				font-size: 12px;
			}

			div.push-over-2 {
				margin-left: 1.5%;
			}

			a.oct-link {
				display: block;
			}
			div.winner {
				padding-left: 2.2%;
			}


		</style>

	</head>

	<body>
		<section id="Wrap" class="btc-wrap">
			<div id="Explorer" class="container bitcoin">
				<div class="row">
					<div class="col-md-9 intro">
						<h1>World Cup Predictor</h1>
						<p class="first-para">
							A couple weeks ago, Kimono introduced our <a>World Cup API</a> to the world. In the past few weeks, we've seen some awesome hacks built using our API, like this one and this one. We've put together a simple World Cup predictor using our own API below. Enjoy!
						</p>
						<p>
							Select two teams below and we'll predict the winner of the match. One of our founders is a quantum physicist but we still can't guarantee 100% accuracy. Maybe you can use Kimono to do better?
						</p>
					</div>
					<div class="col-md-3">
						<div class="row" style="margin-top: 58px;"><div class="col-md-3"><img src="ezimba.gif" class="octopus"></div><div class="col-md-8">This is our <a href="http://en.wikipedia.org/wiki/Paul_the_Octopus" target="_blank" class="oct-link">magic octopus.</a></div></div>
						<a class="new-user-cta pull-left special" href="/signup" target="_self" style="margin-top: 18px;">New to kimono? Make your own APIs out of anything. <strong>Signup for free</strong> <span class="glyphicon glyphicon-chevron-right"></span></a>
					</div>
				</div>
				<div class="row">
					<div class="col-md-3">
						<p class="small">We found the 3 factors that correlate with victory most are total goals and number of red cards of a teams' players last season, as well as a momentum factor based on World Cup match results. Feel free to adjust these factors and others by moving the toggles to the right.</p>
					</div>
					<div class="col-md-6 push-over-2">
						<div class="row">
							<div class="col-md-4 data-column">
								<p class="data-label first-para">Team Goals Factor</p>
								<input type="text" class="dial dial-tg" value="50" data-width="60" data-height="60" data-skin="tron" data-thickness=".08" data-angleOffset="180" data-fgColor="#1f77b4">
							</div>

							<div class="col-md-4 data-column">
								<p class="data-label first-para">Minutes Factor</p>
								<input type="text" class="dial dial-min" value="0" data-width="60" data-height="60" data-skin="tron" data-thickness=".08" data-angleOffset="180" data-fgColor="rgb(255, 127, 14)">
							</div>

							<div class="col-md-4 data-column">
								<p class="data-label first-para">Yellow Card Factor</p>
								<input type="text" class="dial dial-y" value="0" data-width="60" data-height="60" data-skin="tron" data-thickness=".08" data-angleOffset="180" data-fgColor="#1f77b4">
							</div>
						</div>
						<div class="row">
							<div class="col-md-4 data-column">
								<p class="data-label first-para">Cohesion Factor</p>
								<input type="text" class="dial dial-c" value="0" data-width="60" data-height="60" data-skin="tron" data-thickness=".08" data-angleOffset="180" data-fgColor="rgb(255, 127, 14)">
							</div>

							<div class="col-md-4 data-column">
								<p class="data-label first-para">Momentum Factor</p>
								<input type="text" class="dial dial-m" value="50" data-width="60" data-height="60" data-skin="tron" data-thickness=".08" data-angleOffset="180" data-fgColor="#1f77b4">
							</div>

							<div class="col-md-4 data-column">
								<p class="data-label first-para">Red Card Factor</p>
								<input type="text" class="dial dial-rc" value="50" data-width="60" data-height="60" data-skin="tron" data-thickness=".08" data-angleOffset="180" data-fgColor="rgb(255, 127, 14)">
							</div>

						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-3">
						<div class="row select1">
							<div class="col-md-8">
								<select class="form-control input-sm" id="team1"><option value="1">Algeria</option><option value="2">Argentina</option><option value="3">Australia</option><option value="4">Belgium</option><option value="5">Bosnia-Herzegovina</option><option value="6">Brazil</option><option value="7">Cameroon</option><option value="8">Chile</option><option value="9">Colombia</option><option value="10">Costa Rica</option><option value="11">Côte d'Ivoire</option><option value="12">Croatia</option><option value="13">Ecuador</option><option value="14">England</option><option value="15">France</option><option value="16" selected="selected">Germany</option><option value="17">Ghana</option><option value="18">Greece</option><option value="19">Honduras</option><option value="20">Iran</option><option value="21">Italy</option><option value="22">Japan</option><option value="23">Korea Republic</option><option value="24">Mexico</option><option value="25">Netherlands</option><option value="26">Nigeria</option><option value="27">Portugal</option><option value="28">Russia</option><option value="29">Spain</option><option value="30">Switzerland</option><option value="31">United States</option><option value="32">Uruguay</option></select>
							</div>
							<div class="col-md-4" id="team1flag">
							</div>
						</div>
						<div class="row">
							<div class="col-md-8">
								<select class="form-control input-sm" id="team2"><option value="1">Algeria</option><option value="2">Argentina</option><option value="3">Australia</option><option value="4">Belgium</option><option value="5">Bosnia-Herzegovina</option><option value="6" selected="selected">Brazil</option><option value="7">Cameroon</option><option value="8">Chile</option><option value="9">Colombia</option><option value="10">Costa Rica</option><option value="11">Côte d'Ivoire</option><option value="12">Croatia</option><option value="13">Ecuador</option><option value="14">England</option><option value="15">France</option><option value="16">Germany</option><option value="17">Ghana</option><option value="18">Greece</option><option value="19">Honduras</option><option value="20">Iran</option><option value="21">Italy</option><option value="22">Japan</option><option value="23">Korea Republic</option><option value="24">Mexico</option><option value="25">Netherlands</option><option value="26">Nigeria</option><option value="27">Portugal</option><option value="28">Russia</option><option value="29">Spain</option><option value="30">Switzerland</option><option value="31">United States</option><option value="32">Uruguay</option></select>
							</div>
							<div class="col-md-4" id="team2flag">
							</div>
						</div>
					</div>
					<div class="col-md-6">
						<div id="chart"></div>
					</div>
					<div class="col-md-3 winner">
						<div id="winner"></div>
					</div>
				</div>

			</div>
		</section>
	</body>
</html>