Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 200 lines (194 sloc) 5.83 kb
2426b84 first commit
tristen authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Tweet Stream</title>
5 <style type="text/css">
6 h2 {
7 font-size: 17px;
8 color: #fff;
9 font-weight: normal;
10 }
a5d3e79 Revised Readme, Added startup username and password requirement, aesthet...
tristen authored
11 a {
12 outline: 0;
13 text-decoration: none;
14 color: #c4193c;
15 font-weight: bold;
16 }
2426b84 first commit
tristen authored
17 /* Sorry accessibility ...*/
18 button::-moz-focus-inner,
19 input[type="reset"]::-moz-focus-inner,
20 input[type="button"]::-moz-focus-inner,
21 input[type="submit"]::-moz-focus-inner,
22 input[type="file"] > input[type="button"]::-moz-focus-inner {
23 border: none;
24 }
25 html{ overflow-y:scroll; }
26 * { margin: 0;padding: 0;border: 0; }
27 body {
28 background: transparent url('http://farm5.static.flickr.com/4053/4477176000_ed64980ee9.jpg') repeat;
29 border-top: 12px solid #c4193c; }
30 input {
31 color: #ec6782;
32 font-weight: bold;
33 font-size: 13px;
34 }
35 input#submit {
36 background: #561018;
37 display: inline-block;
38 padding: 5px 10px 6px;
39 color: #fff;
40 font-size: 11px;
41 text-decoration: none;
42 font-weight: bold;
43 line-height: 1;
44 -moz-border-radius: 5px;
45 -webkit-border-radius: 5px;
46 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
47 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
48 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
49 border-bottom: 1px solid rgba(0,0,0,0.25);
50 position: relative;
51 cursor: pointer;
52 }
53 input#submit:active {
54 bottom: -2px;
55 }
56 input#text {
57 margin:12px 0;
58 padding:4px;
59 width:140px;
60 }
61 #sidebar {
62 float: left;
63 width: 180px;
64 margin-right: 15px;
65 height: 200px;
66 }
67 #sidebar-inner {
68 background: #c4193c;
69 position: fixed;
70 padding: 38px 12px 70px;
71 margin-top: -12px;
72 -webkit-border-bottom-right-radius: 10px;
73 -webkit-border-bottom-left-radius: 10px;
74 -moz-border-radius-bottomright: 10px;
75 -moz-border-radius-bottomleft: 10px;
76 border-bottom-right-radius: 10px;
77 border-bottom-left-radius: 10px;
78 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
79 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
80 border-bottom: 1px solid rgba(0,0,0,0.25);
81 }
82 #input-inner {
83 position: relative;
84 }
85 #content {
86 float: left;
87 width: 665px;
a5d3e79 Revised Readme, Added startup username and password requirement, aesthet...
tristen authored
88 margin-bottom: 25px;
2426b84 first commit
tristen authored
89 }
90 #page {
91 font-family: "Century Schoolbook",Century,Palatino,Georgia,serif;
92 font-size: 16px;
93 line-height:1.5em;
94 color: #561018;
95 width: 900px;
96 margin: 0 0 0 80px;
97 }
98 #page ul {
99 background: #fff;
100 /*background: #eef6fa;*/
101 list-style: none;
102 padding: 22px 0 10px;
103 -webkit-border-bottom-right-radius: 15px;
104 -webkit-border-bottom-left-radius: 15px;
105 -moz-border-radius-bottomright: 15px;
106 -moz-border-radius-bottomleft: 15px;
107 border-bottom-right-radius: 15px;
108 border-bottom-left-radius: 15px;
109 }
110 #page ul li {
111 border-bottom:1px solid #D2E2EA;
112 font-family:lucida Grande;
113 font-size:13px;
114 line-height:22px;
115 margin:8px 0;
116 padding:5px 30px;
a5d3e79 Revised Readme, Added startup username and password requirement, aesthet...
tristen authored
117 overflow: auto;
118 }
119 #page ul li:last-child {
120 border-bottom: none;
2426b84 first commit
tristen authored
121 }
122 #growl{
123 background: rgba(0, 0, 0, 0.85);
124 -webkit-border-radius: 20px;
125 -moz-border-radius: 20px;
126 border-radius: 20px;
127 color: #FFF;
128 position: absolute;
129 z-index: 99;
130 top: 25px;
131 right: 13px;
132 width: 200px;
133 height: 75px;
134 padding: 20px;
135 }
a5d3e79 Revised Readme, Added startup username and password requirement, aesthet...
tristen authored
136 img.profile{
137 border:4px solid #D2E2EA;
138 float:left;
139 height:48px;
140 margin-bottom:6px;
141 margin-right:12px;
142 width:48px;
143 }
2426b84 first commit
tristen authored
144 </style>
145 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
146 <script src="http://cdn.socket.io/stable/socket.io.js"></script>
147 <script>
a5d3e79 Revised Readme, Added startup username and password requirement, aesthet...
tristen authored
148 $(function () {
149 var tweetVal;
150
2426b84 first commit
tristen authored
151 $('form#form').submit(function () {
152 tweetVal = $('#text').val();
a5d3e79 Revised Readme, Added startup username and password requirement, aesthet...
tristen authored
153 sendProfile();
2426b84 first commit
tristen authored
154 return false;
155 });
156
a5d3e79 Revised Readme, Added startup username and password requirement, aesthet...
tristen authored
157 function sendProfile() {
158 $.getJSON("/stream", function (message) {
159 alert(message);
160 });
161 }
162
2426b84 first commit
tristen authored
163 function update() {
164 $('#growl').fadeOut('slow');
165 }
a5d3e79 Revised Readme, Added startup username and password requirement, aesthet...
tristen authored
166 var socket = new io.Socket(),
167 tweets = $("#tweets");
2426b84 first commit
tristen authored
168
169 socket.connect();
170 socket.on('message', function (tweet) {
a5d3e79 Revised Readme, Added startup username and password requirement, aesthet...
tristen authored
171 var url = '<a target="_blank" href="http://twitter.com/' + tweet.user.screen_name + '">';
172 var tweetLi = $("<li/>").html(url + '<img class="profile" src="' + tweet.user.profile_image_url + '" /></a>' + url + '@' + tweet.user.screen_name + '</a> ' + tweet.text);
2426b84 first commit
tristen authored
173 tweets.prepend(tweetLi);
a5d3e79 Revised Readme, Added startup username and password requirement, aesthet...
tristen authored
174 setInterval(update, 1500);
2426b84 first commit
tristen authored
175 });
176 });
177 </script>
178 </head>
179
180 <body>
181 <div id="page">
182 <div id="growl"><p>Un moment s'il vous plait</p></div>
183 <div id="sidebar">
184 <div id="sidebar-inner">
185 <form id="form">
186 <h2><label for="profilename">Twitter Username</label><br /></h2>
187 <p><input autocomplete="off" id="text" type="text" /></p>
188 <div id="input-inner">
189 <p><input type="submit" value="Change Twitterer" id="submit" /></p>
190 </div>
191 </form>
192 </div>
193 </div>
194
195 <div id="content">
196 <ul id="tweets"><!-- \Tweets/ --></ul>
197 </div> <!-- /Content -->
198 </div> <!-- /Page -->
199 </body>
200 </html>
Something went wrong with that request. Please try again.