-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
151 lines (147 loc) · 5.67 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
147
148
149
150
151
<!DOCTYPE html>
<!-- Frontend: https://github.com/potch/glow -->
<!-- Backend: https://github.com/jbalogh/glow -->
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="media/screen.css">
<title data-gettext>Firefox 4 Download Stats</title>
<link rel="shortcut icon" type="image/x-icon" href="media/favicon.ico">
<style>
#map polygon {
fill: url(#glow);
}
</style>
</head>
<body>
<noscript>
<p>Please find a browser that supports JavaScript and <canvas>.</p>
<p><a href="http://www.mozilla.com/firefox/?from=glow">Get Firefox</a></p>
</noscript>
<div id="bigcounter">
</div>
<div id="app">
<section id="ui">
<div class="menu glow"></div>
<div class="bars glow"></div>
<div class="masthead glow">
<h1 data-gettext>Firefox 4 Download Stats</h1>
<div id="cta">
<a id="dlbutton" href="http://www.mozilla.com/firefox/?from=glow&WT.mc_id=glow"></a>
</div>
<div id="social">
<a href="http://twitterparty.mozilla.org/" class="button" id="twitter"><img src="media/twitter-badge.png"><span data-gettext>Twitter</span></a>
<a href="http://mozilla.com/mobile/?WT.mc_id=glow" class="button" id="mobile"><img src="media/phone.png"><span data-gettext>Android</span></a>
<a href="#" class="show-about"></a>
</div>
</div>
<div id="timewarp">
<form action="#">
<input pattern="\d\d-\d\d-\d{4} \d\d?:\d\d"
placeholder="MM-DD-YYYY HH:MM">
<button type="submit">Hit it</button>
</form>
</div>
<a href="http://www.sqlstream.com" id="sqlstream" target="_blank">
<img src="media/sqlstreamlogo.png" width="85" height="19">
</a>
<div id="bar-tip"><div id="t"></div></div>
</section>
<section id="geo" dir="ltr">
<div id="map_container">
<div id="mapdata"></div>
<canvas id="pings" width="3600" height="1800"></canvas>
</div>
</section>
<section id="sunburst">
<canvas id="chart"></canvas>
<div id="chart-sidebar">
<nav id="crumb"></nav>
<ul id="rankedlist">
</ul>
</div>
</section>
</div>
<img id="logo" src="media/logo-large.png">
<div id="callout">
</div>
<canvas id="c"></canvas>
<div id="about" data-gettext>
<p>
glow.mozilla.org tracks downloads for Firefox 4. When someone clicks
the download button on mozilla.com or asks for an upgrade from inside
Firefox, we approximate their location based on IP address and store
anonymous aggregate location information in our database.
</p>
<p>
Each dot that shows up on the map represents someone who just
downloaded Firefox (with a few seconds of latency as we process
everything on the backend). The counter at the top shows the total
downloads of Firefox since March 22, 2011, when Firefox 4 was
released. The arc chart shows those downloads broken down all the way
to the city level.
</p>
</div>
<svg>
<defs>
<radialGradient gradientUnits="userSpaceOnUse" id="glow" fx="50%" fy="0" cx="1800" cy="0" r="1800">
<stop offset="0%" style="stop-color:#23497a; stop-opacity:1"></stop>
<stop offset="78%" style="stop-color:#011841; stop-opacity:1"></stop>
</radialGradient>
</defs>
</svg>
<script src="dynamo/"></script>
<script src="media/jquery.js"></script>
<script src="media/vast.js"></script>
<script src="media/gettext.js"></script>
<script src="media/map.js"></script>
<script src="media/bars.js"></script>
<script src="media/counter.js"></script>
<script src="media/arcchart.js"></script>
<script src="media/glow.js"></script>
<script src="media/webtrends.js"></script>
<script>
$('html').addClass(glow.dir)
.attr({lang: glow.locale.replace('_', '-'), dir: glow.dir});
$.getScript("locale/" + glow.locale + "/l10n.js", function() {
glow.init();
$("[data-gettext]").each(function(){
// Replace spaces around <> with nothing. Then collapse all other
// spaces into one space.
var s = $(this).html()
.replace(/\s*([<>])\s*/g, '$1')
.replace(/\s+/g, ' ');
$(this).html(gettext($.trim(s)));
});
});
var $mc = $("#map_container"),
$map = $("#map");
glow.view = "map";
function loadMap(cb) {
$.get("./maps/world_4.svg", function(resp) {
if (vast.capabilities.inlineSVG) {
$("#mapdata").empty().html(resp);
} else {
$("#mapdata").empty().append('<img width="3600" height"1800" src="maps/world_4.png">');
}
$("#mapdata").css({
"-moz-transform-origin": "0 0",
"-webkit-transform-origin": "0 0",
"-o-transform-origin": "0 0",
"-ms-transform-origin": "0 0"
});
cb();
}, "text");
}
$(function(){
// Wait 10 seconds to do webtrends so we can set up everything else.
setTimeout(function() {
var _tag=new WebTrends(),
collect = function() { _tag.dcsCollect(); };
_tag.dcsGetId() ? $.getScript(_tag.dcsGetId(), collect) : collect();
}, 10000);
});
</script>
<noscript><img alt="DCSIMG" id="DCSIMG" width="1" height="1" src="http://statse.webtrendslive.com/dcs2spfmdvz5bd7g077trfrve_3f2b/njs.gif?dcsuri=/nojavascript&WT.js=No&WT.tv=9.3.0&WT.dcssip=www.glow.mozilla.org"/></noscript>
</body>
</html>