-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
87 lines (79 loc) · 4.04 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>The Twitter Twayback Machine by staringispolite</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
<link rel='shortcut icon' href='img/favicon.ico' type='image/x-icon'/ >
</head>
<body>
<section class="page-header">
<h1 class="project-name"><img src="img/icon_lg.png"/>The Twayback Machine</h1>
<h2 class="project-tagline">Enter a twitter @username to see Ye Olde tweets from them!</h2>
<input class="btn" type="text" id="username" placeholder="@username"/>
<a href="#" target="_blank" id="go-btn" class="btn">Go way back ></a>
</section>
<section class="main-content">
<h3>
<a id="welcome" class="anchor" href="#welcome" aria-hidden="true"><span class="octicon octicon-link"></span></a>
Welcome to the Twayback Machine
</h3>
<p>
The Twayback Machine makes it ever-so-slightly easier to jump back in time to your friends' Twitter feeds from long ago, for fun and trolling.
</p>
<p>
It was inspired by archive.org's <a herf="https://archive.org/web/">Wayback Machine</a> and
the grounbreaking research (and documentation) from
<a href="https://twitter.com/ryandawidjan">@ryandawidjan</a> and <a href="https://twitter.com/libovness">@libovness</a> on
<a href="https://medium.com/@ryandawidjan/inventing-the-tweetroll-4e8cd517b81d">TweeTrolling</a>.
</p>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/staringispolite/twayback-machine">The Twayback Machine</a>
is maintained by <a href="https://twitter.com/staringispolite">Jonathan Howard</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
<br/>
<span class="site-footer-credits">Icon is a mashup of "Time flies" by Andreas Wikström, and "Bird" by Thomas Le Bas, of The Noun Project.</span>
</footer>
</section>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-69814554-1");
pageTracker._trackPageview();
} catch(err) {}
// Give focus to the input field on load
$(document).ready(function() {
$('#username').focus();
});
// Twayback Machine
var TwaybackMachine = function() {
return {
go: function(username) {
// I'm sure someone could still break this, but don't be dumb.
username = encodeURIComponent(username);
// See what people are searching.
_gaq.push(['_trackPageview', '/twayback-machine/search/' + username]);
_gaq.push( function() {
// Twitter search works with or without @-sign.
var searchURL = "https://twitter.com/search?q=from%3A" + username + "%20until%3A2011-12-31&src=twayback";
window.location.href=searchURL;
});
}
};
}();
// Button click
$('#go-btn').click(function() {
TwaybackMachine.go($('#username').val());
return false;
});
</script>
</body>
</html>