forked from paularmstrong/nko-jackalope-promo
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
84 lines (74 loc) · 3.69 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>
<html lang="en">
<head>
<meta name="charset" content="utf-8" />
<title>Node Knockout!</title>
<script src="js/modernizer.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Neuton" media="all" />
<link rel="stylesheet" href="styles.css" media="all" />
</head>
<body>
<header>
<h1>Jackalope</h1>
<a class="ko" href="http://nodeknockout.com/teams/jackalope" target="nko" title="Help me win Node.js KO!">Vote for us on NodeKO</a>
</header>
<section>
<h2>Real-time Website Stats</h2>
<article>
<p>You're viewing a demo site created for <a href="http://jackalope.no.de">Jackalope</a>, a real-time web stats viewing application entry for the <a href="http://nodeknockout.com">Node Knockout</a> competition.</p>
<p>Every movement you make with your mouse is <em>instantly</em> transferred back through our Node.js server and back to the admin view, generating a heatmap in real-time for the admin to view!</p>
</article>
<aside>
<p>
<h3>Can I try it?</h3>
<p>Jackalope displays live data, you can try generating data right now! Leave this page open, then Click Here to launch http://website.com in a new browser window. Move and click your mouse on http://website.com and watch your activity be displayed on the heatmap.</p>
<h3>How does it work?</h3>
<p>Visitor mouse data is collected and sent via WebSocket through a Node.JS server. This page has another WebSocket connection where it receives data and displays it.</p>
<h3>Learn more</h3>
<p>Jackalope is a hot new way to see visitors interacting with your site in realtime. Currently in beta.</p>
<p>Jackalope requires a browser that supports WebSocket, such as Safari 5, and currently supports visualization and data gathering from up to 5 concurrent users.</p>
</p>
</aside>
</section>
<section class="roster">
<h2>Team Roster</h2>
<ul>
<li class="member">
<h3>Paul Armstrong</h3>
<img src="images/paul.jpg" alt="Paul Armstrong" />
<ul>
<li><a href="http://twitter.com/paularmstrong">@paularmstrong</a></li>
<li><a href="http://paularmstrongdesigns.com">paularmstrongdesigns.com</a></li>
</ul>
</li>
<li class="member">
<h3>Andy Atkinson</h3>
<img src="images/andy.jpg" alt="Andy Atkinson" />
<ul>
<li><a href="http://twitter.com/webandy">@webandy</a></li>
<li><a href="http://webandy.com">webandy.com</a></li>
</ul>
</li>
<li class="member">
<h3>Zach Johnson</h3>
<img src="images/zach.jpg" alt="Zach Johnson" />
<ul>
<li><a href="http://twitter.com/zachstronaut">@zachstronaut</a></li>
<li><a href="http://www.zachstronaut.com">www.zachstronaut.com</a></li>
</ul>
</li>
<li class="member">
<h3>Nate Kadlac</h3>
<img src="images/nate.jpg" alt="Nate Kadlac" />
<ul>
<li><a href="http://twitter.com/kadlac">@kadlac</a></li>
<li><a href="http://www.kadlac.com">www.kadlac.com</a></li>
</ul>
</li>
</ul>
</section>
<footer>
</footer>
<script type="text/javascript" src="http://localhost:8000/js/statsClient.js?align=center&width=960"></script>
</body>
</html>