-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
executable file
·150 lines (142 loc) · 8.2 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Timesify</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
html {
background: url(images/brooklyn-bridge.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="container">
<div class="inner cover">
<a href="https://twitter.com/timesify" class="pull-right">
<img src="images/twitter-logo-png-black.png" >
</a>
<a href="https://github.com/dfenjves/timesify" class="pull-right">
<img src="images/GitHub-Mark-32px.png" >
</a>
<h1 class="cover-heading">Timesify. Browse Freely.</h1>
<p class="lead">
Timesify turns articles on TMZ, Buzzfeed, and other embarrassing sites into the look of The New York Times, so you don't have to be ashamed. We cloak your love of Mary Kate and Ashley Olsen in the posture of a concerned citizen.
</p>
<p>
<a href="#about" data-toggle="modal" data-target="#about">
Learn more
</a>
|
<a href="#video" data-toggle="modal" data-target="#video">
Watch the video!
</a>
</p>
</div>
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-6 align-center">
<p class="lead">
<a href="javascript:window.location='http://www.timesify.com/go.html?url='+window.location.href;" class="btn btn-lg btn-default">Timesify</a>
</p>
<p>Drag the Timesify button to your bookmarks bar to get started.
<br />
Once you get to the article you need to timesify, just click the bookmarklet.
</p>
</div>
<div class="col-xs-3">
<a href="http://www.comedyhackday.org/nyc/" class="pull-left" id="starburst">
<img src="images/starburst2.png" alt="Winner of Comedy Hack Day 4">
</a>
</div>
</div>
<div class="mastfoot">
<div class="inner">
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="about" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">About Timesify</h4>
</div>
<div class="modal-body">
<h4>What It Is:</h4>
<p>
Timesify hides embarrassing articles — the ones you're reading all the time (Gawker, TMZ, Upworthy, et al.) — and gives them the appearance of being a New York Times article. You read about butt injections, but look like you give a damn.
</p>
<h4>How to Use It:</h4>
<p>
On the Timesify homepage, drag the box that says "Timesify" to your bookmark bar. Any time you're on an article you'd like to Timesify, just click the Timesify bookmarklet. Family and friends will instantly think you're smarter than you are.
</p>
<p>
The text of the embarrassing article will be found on a page that appears to be the New York Times with a headline and photo from a New York Times article (always selected from the most recent articles the Times has published, using the Open Times API from Mashery).
</p>
<p>
At the start of the text there is a small section called in case you missed it that will summarize the article you are pretending to read in one to two sentences. That way if anyone asks you what you're reading about, you can tell them exactly what that article you aren't reading is about. Go ahead and read that no matter what. That might be the most news you read this week.
</p>
<p>
If you'd like to see the images from the embarrassing article, just click the ad in the right-hand bar of the Timesified article and the ad will turn into the images from the article. Click it again to see the next photo on the page in case of listicle.
</p>
<p>
Go forth. Pretend to be something better than you are.
</p>
</div>
<div class="modal-footer">
Made by <a href="https://twitter.com/dfenjves" target="_blank">@dfenjves</a>, <a href="https://twitter.com/dlukenelson" target="_blank">@dlukenelson</a>, and <a href="https://twitter.com/kitopastorino" target="_blank">@kitopastorino</a>.
</div>
</div>
</div>
</div>
<div class="modal fade" id="video" tabindex="-1" role="dialog" aria-labelledby="video" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Timesify</h4>
</div>
<div class="modal-body">
<iframe width="560" height="315" src="http://www.youtube.com/embed/B8KkKmMsy1g?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-51919376-1', 'timesify.com');ga('send','pageview');
</script>
</body>
</html>