forked from toolness/hackasaurus-parable
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (58 loc) · 3.8 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
<!DOCTYPE html>
<meta charset="utf-8">
<title>The Parable of The Hackasaurus</title>
<link rel="stylesheet" href="hints.css" class="include-in-remix-dialog">
<link rel="stylesheet" href="main-page.css">
<script src="jquery.min.js"></script>
<script src="hints.js" class="include-in-remix-dialog"></script>
<script src="bugs.js" class="include-in-remix-dialog"></script>
<script src="main-page.js"></script>
<script>$(window).ready(init);</script>
<!-- The help bar at the top of the page. -->
<div class="help">
<span class="not-done">Can you fix this page? There <span class="singular">is</span><span class="plural">are</span> <span class="remaining"></span> thing<span class="plural">s</span> wrong with it.</span>
<span class="done">Yay, you fixed the page! Now visit <a href="http://hackasaurus.org/en-US/goggles/install/">hackasaurus.org</a> to learn how to use the goggles <em>anywhere</em> on the web.</span>
</div>
<!-- Achievements awarded to users when they fix bugs. -->
<div class="achievements">
<div id="url-hacker" class="achievement">
<h3>Achievement Unlocked</h3>
<p>URL Hacker</p>
</div>
<div id="deleter" class="achievement">
<h3>Achievement Unlocked</h3>
<p>Deleter</p>
</div>
<div id="style-hacker" class="achievement">
<h3>Achievement Unlocked</h3>
<p>Style Hacker</p>
</div>
<div id="typo-fixer" class="achievement">
<h3>Achievement Unlocked</h3>
<p>Copy Editor</p>
</div>
</div>
<!-- Hints offered to users as they explore the page and UI. -->
<div class="hints">
<div class="remix-dialog-hints">
<div class="attr hint">Click on an attribute’s value to edit it.</div>
<div class="txt hint">Click on a text node to edit it.</div>
</div>
<div class="deletion hint">Tap <kbd><span class="mac">delete</span><span class="non-mac">backspace</span></kbd> to remove an element.</div>
<div class="remix hint">Tap <kbd><span>R</span></kbd> to change the source code of an element.</div>
<div class="style hint">Press and hold <kbd><span>C</span></kbd> to view the style of an element.</div>
<div class="float hint">Click to edit a style property.</div>
<div class="pin hint">While holding <kbd><span>C</span></kbd>, tap <kbd><span>space bar</span></kbd> to make changes to an element’s style.</div>
</div>
<!-- The page that needs fixing. -->
<h1>The Parable of The Hackasaurus</h1>
<div class="drop-cap">O</div><p>nce upon a time there lived a clever girl named Sue who liked to make things. She knit hats and built robots to wear them. But she didn’t know anything about how the Web worked; it was as opaque as a television screen to her.</p>
<p>One day a giant dinosaur appeared as she was exploring the web.</p>
<div class="image-holder"><div class="curtain"></div><img id="hackasaur" src="images/hackasaur.jpg" alt="Picture of Hackasaur" draggable="false"></div>
<p>“I’m going to show you how to hack the web!”, the dinosaur told Sue.</p>
<p>“Hack?” Sue asked. “Isn’t that evil?”</p>
<p>“No!” said the dinosaur. “Hacking can be used for good or ill. It is about tinkering with things to change how they work. Good hackers improve them and make them work better, but bad hackers make them worse.”</p>
<p>“Wow!” said Sue. “I want to be a good hacker.”</p>
<p>“Ok, then, try on these <a id="bookmarklet" href="javascript:(function(){var%20script=document.createElement('script');script.src='https://secure.toolness.com/webxray/webxray.js';script.className='webxray';document.head.appendChild(script);})();">Web X-Ray Goggles</a> and we’ll get started!”</p>
<p class="needs-fixing">Sue wore the goggles the dinosaur gave her, and suddenly she could see and change how everything on the weeb was put together.</p>
<div class="image-holder"><img id="supergirl" src="imagees/supergirl.png" alt="Picture of Sue wearing goggles"></div>