forked from christianp/building-houses
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
51 lines (45 loc) · 2.3 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building Houses</title>
<!-- jquery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.min.js"></script>
<script type="text/javascript" src="js/thing.js"></script>
<link rel="stylesheet" href="css/normalize.css"></link>
<link rel="stylesheet" href="css/thing.css"></link>
</head>
<body>
<h1>Building Houses</h1>
<div class="explanation">
<p>Place houses so that each of the equally-sized plots has exactly one house in it. Each time you place a house, the plots get resized so another one can fit in.</p>
<p>The graphic below shows you the houses you've placed, as well as the plots that will need to be occupied when you place your <strong>next</strong> house.
<p>Click on a plot or write a position in the box to place a house</p>
</div>
<form id="text-input">
<label>Add a house at position: <input type="text"/></label>
<button>please</button>
</form>
<div id="field-container">
<svg class="field" width="920" height="100"></svg>
<button id="undo">Undo</button>
<button id="reset">Reset</button>
</div>
<div id="hopeless-warning">
<p>Oops! No matter where you place your next house, there will be two houses in the same plot.</p>
<button id="see-why">Show my last working solution</button>
</div>
<div id="fail">
<p>You successfully placed <span id="score"></span> <span id="house-pluralise">houses</span>.
</div>
<div class="house-list">
<h4>Placed houses</h4>
<ul></ul>
</div>
<div class="footer">
This was made by <a href="http://checkmyworking.com">cp</a>. The idea was <a href="http://singingbanana.com">James Grime's</a>.
</div>
<a href="https://github.com/christianp/building-houses"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
</body>
</html>