-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (93 loc) · 4.17 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
<!DOCTYPE html>
<head>
<title>Race Across the Overland Route</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic|Noticia+Text:400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
</head>
<body>
<section id="intro">
<h1>A Race Across the Overland Route</h1>
<p>A vast overland route awaits you and a rival railway, as you set out to connect the Transcontinental Railroad. Each of you will begin construction on either end of the country and then race toward each other, converging somewhere in the barren expanse of the interior.</p>
<p>You have been given a deposit on your contract from the United States Government in order to supply your company, but you will also be rewarded for each mile of track your company is able to lay before you and your competitor meet.\
Be careful that you don't under-order, or even more, be careful that you don't over-order and have all those wasted supplies eat into your revenue, because whomever finishes with the most money wins.</p>
<a href="#order" id="confirm-section-one" class="button center">OK</a>
</section>
<section id="order">
<h1>Supply Your Company</h1>
<p>Both you and your rival have been given a contract deposit of <span id="deposit">$200000</span> that you must use
to purchase supplies. Each mile of track requires...
<ul class="mile-supplies">
<li><em id="wood-mile">50</em> wood</li>
<li><em id="steel-mile">5</em> steel</li>
<li><em id="labor-mile">10</em> men</li>
<li class="reward"><em id="reward-amt">$1000</em> reward</li>
</ul>
...to cover the route's <span id="total-distance"><em id="distance-miles">1900</em> miles</span> it will cost...
</p>
<table id="price-table">
<tr>
<th>Material</th>
<th>Unit Price</th>
<th>Total Needed</th>
<th>Total Price</th>
</tr>
<tr id="wood-data" class="row">
<td class="name">Wood</td>
<td class="price"></td>
<td class="needed"></td>
<td class="total-price"></td>
</tr>
<tr id="steel-data" class="row">
<td class="name">Steel</td>
<td class="price"></td>
<td class="needed"></td>
<td class="total-price"></td>
</tr>
<tr id="labor-data" class="row">
<td class="name">Labor</td>
<td class="price"></td>
<td class="needed"></td>
<td class="total-price"></td>
</tr>
<tr></tr>
</table>
<div class="container">
<form id="order-form">
<input id="wood-input" name="wood" type="number" min="0" step="1" placeholder="Amount of Wood">
<input id="steel-input" name="steel" type="number" min="0" step="1" placeholder="Amount of Steel">
<input id="labor-input" name="labor" type="number" min="0" step="1" placeholder="Number of Men">
<input id="order-submit" type="submit" value="Make Order">
</form>
</div>
</section>
<section id="results">
<h1>How did you do?</h1>
<div id="opponent-results" class="results">
<h2>Rival Railway</h2>
<div class="order">
<ul>
<li class="wood">Wood</li>
<li class="steel">Steel</li>
<li class="labor">Men</li>
</ul>
<h3 class="revenue">$</h3>
<h3 class="miles">3000</h3>
</div>
</div>
<div id="player-results" class="results">
<h2>Your Railway</h2>
<div class="order">
<ul>
<li class="wood">Wood</li>
<li class="steel">Steel</li>
<li class="labor">Men</li>
</ul>
<h3 class="revenue">$</h3>
<h3 class="miles">3000</h3>
</div>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>