/
index.html
146 lines (111 loc) · 8.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Firefox Tweet Machine</title>
<!--
Source Code Available at Github
http://github.com/quodis/Firefox-Tweet-Machine
-->
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="keywords" content="Mozilla,Firefox,Twitter,Tweet" />
<meta name="description" content="Firefox Tweet Machine is a visualization of Firefox activity on Twitter. It is an experiment with exclusively open web tools and technologies." />
<meta name="author" content="Quodis, Mozilla" />
<meta name="copyright" content="© 2010" />
<meta name="distribution" content="global" />
<link rel="stylesheet" href="assets/css/ftm-global.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="assets/css/colorbox.css" type="text/css" media="screen, projection" />
<link rel="shortcut icon" href="assets/img/global/favicon.ico" />
<link rel="apple-touch-icon" type="image/png" href="http://firefoxtweetmachine.com/assets/img/global/ftm-apple-touch-icon.png">
<link rel="image_src" href="http://firefoxtweetmachine.com/assets/img/global/ftm-facebook-thumb.png">
<!-- scripts -->
<script type="text/javascript" src="assets/js/minimized.js"></script>
<!--
<script src="assets/js/jquery-1.4.2.min.js"></script>
<script src="assets/js/box2d-min.js"></script>
<script src="assets/js/preloadCssImages.jQuery_v5.js"></script>
<script src="assets/js/jquery.timeago.js"></script>
<script src="assets/js/raphael-min.js"></script>
<script src="assets/js/jquery.colorbox-min.js"></script>
<script src="assets/js/jquery.history.js"></script>
<script src="assets/js/global.js"></script>
<script src="assets/js/gauge.js"></script>
<script src="assets/js/keyboard.js"></script>
<script src="assets/js/preload.js"></script>
-->
<!-- scripts /-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35433268-29']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!-- page -->
<div id="page">
<header id="brand">
<h1><a href="/" title="Restart Firefox Tweet Machine">Firefox Tweet Machine</a></h1>
</header>
<!-- bubbles -->
<section id="bubbles">
</section>
<!-- bubbles /-->
<!-- machine -->
<section id="machine">
<form id="search-box" role="search">
<label for="search-input" accesskey="s">Search</label>
<input type="text" name="search-input" class="text" value="Search" id="search-input" tabindex="1">
<button name="search-bttn" type="submit" class="button" id="search-submit-bttn" title="Go!" value="Go!" tabindex="2">Go!</button>
</form>
<ul id="machine-tools">
<li id="gravity-inverter" class="lever up"><a href="#" title="Invert world gravity (g)" accesskey="g">Invert world gravity</a></li>
<li id="pressure-indicator"><span class="value min">0</span> <span class="pointer" title="High activity">High activity</span> <span class="value max">100</span></li>
<li id="activity-indicator" class="off">Activity off</li>
<li id="flow-transposer" class="lever up"><a href="#" title="Pause tweet activity (p)" accesskey="p">Pause tweet activity</a></li>
</ul>
<dl id="social-tools" class="dashboard">
<dt class="twitter-follow"><a href="http://twitter.com/firefox" title="Follow on Twitter" rel="external">Follow</a></dt>
<dd class="twitter-follow"><a href="http://twitter.com/firefox/followers" title="View followers" rel="external"></a></dd>
<dt class="twitter-retweet"><a href="http://button.topsy.com/retweet?nick=firefox&title=Firefox%20Tweet%20Machine&url=http://firefoxtweetmachine.com/" title="Retweet" rel="external">Retweet</a></dt>
<dd class="twitter-retweet"><a href="http://topsy.com/firefoxtweetmachine.com/" title="View retweets" rel="external"></a></dd>
<dt class="fb-share"><a href="http://www.facebook.com/sharer.php?u=http://firefoxtweetmachine.com/&t=Firefox%20Tweet%20Machine" onClick="window.open(this.href, 'facebook', 'toolbar=no, width=550, height=450'); return false;" title="Share on Facebook" rel="external">Share</a></dt>
<dd class="fb-share"><a href="http://www.facebook.com/sharer.php?u=http://firefoxtweetmachine.com/&t=Firefox%20Tweet%20Machine" onClick="window.open(this.href, 'facebook', 'toolbar=no, width=550, height=450'); return false;" title="Share on Facebook" rel="external"></a></dd>
</dl>
<dl id="counter" class="dashboard">
<dt></dt>
<dd></dd>
</dl>
</section>
<!-- machine /-->
<!-- colophon -->
<div id="colophon-wrapper">
<section id="colophon">
<header>
<h1>About the Machine</h1>
</header>
<p>
Firefox Tweet Machine is a visualization of Firefox activity on Twitter designed and put together by <a href="http://quodis.com/en/" rel="external" title="Quodis">Quodis</a> for <a href="http://mozilla.com/" title="Mozilla" rel="external">Mozilla</a>.
</p>
<p>
It is an experiment with exclusively open web tools and technologies, and works on all modern browsers that support HTML5 and CSS3.
</p>
<p>
Technologies used: <a href="http://dev.twitter.com/" rel="external" title="Twitter API's">Twitter API's</a> (Search & REST); <a href="http://box2d-js.sourceforge.net/" rel="external" title="Box2DJS">Box2DJS</a> (<a href="http://kjam.org/post/105/" rel="external" title="kJam">ported to jQuery</a>) for the physics; <a href="http://php.net/" rel="external" title="PHP">PHP</a>, <a href="http://benalman.com/projects/php-simple-proxy/" rel="external" title="Simple PHP Proxy">Simple PHP Proxy</a>, <a href="http://memcached.org/" rel="external" title="Memcached">Memcached</a>, <a href="http://code.google.com/p/spyc/" rel="external" title="YAML loader">YAML loader</a> and <a href="http://github.com/jmathai/twitter-async" rel="external" title="Twitter-Async">Twitter-Async</a> for the backend; <a href="http://raphaeljs.com/" rel="external" title="Raphäel JS">Raphäel JS</a> for the gauge SVG animation; <a href="http://jquery.com/" rel="external" title="jQuery">jQuery</a> for easier javascript coding; <a href="http://colorpowered.com/colorbox/" rel="external" title="ColorBox">ColorBox</a>, <a href="http://www.mikage.to/jquery/jquery_history.html" rel="external" title="history">history</a>, <a href="http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/" rel="external" title="Preload CSS Images">Preload CSS Images</a> and <a href="http://timeago.yarp.com/" rel="external" title="timeago">timeago</a> plugins; <a href="http://topsy.com/" rel="external" title="Topsy">Topsy</a> for the RT functions; <a href="http://www.yanone.de/" rel="external" title="Yanone">Yanone Kaffeesatz</a> loaded through <a href="http://code.google.com/apis/webfonts/" rel="external" title="Google Font API">Google Font API</a> for the interface type and <a href="http://www.impallari.com/lobster/" rel="external" title="Pablo Impallari">The Lobster Font</a> for the logo.
</p>
<h2>Keyboard shortcuts</h2>
<p>p = play/pause the machine; g = invert gravity; s = jump to search field; a = open the "About the Machine" window; esc = deselect search field / close the "About the Machine" window</p>
</section>
</div>
<!-- colophon /-->
<footer role="contentinfo">
<p class="links"><a class="colorbox" href="#colophon" title="About the Machine (a)" accesskey="a">About the Machine</a> <a href="http://firefox.com/" title="Visit firefox.com">Visit firefox.com</a></p>
</footer>
</div>
<!-- page /-->
</body>
</html>