Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
200 lines (194 sloc) 5.69 KB
<!DOCTYPE html>
<html>
<head>
<title>Tweet Stream</title>
<style type="text/css">
h2 {
font-size: 17px;
color: #fff;
font-weight: normal;
}
a {
outline: 0;
text-decoration: none;
color: #c4193c;
font-weight: bold;
}
/* Sorry accessibility ...*/
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
html{ overflow-y:scroll; }
* { margin: 0;padding: 0;border: 0; }
body {
background: transparent url('http://farm5.static.flickr.com/4053/4477176000_ed64980ee9.jpg') repeat;
border-top: 12px solid #c4193c; }
input {
color: #ec6782;
font-weight: bold;
font-size: 13px;
}
input#submit {
background: #561018;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
font-size: 11px;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}
input#submit:active {
bottom: -2px;
}
input#text {
margin:12px 0;
padding:4px;
width:140px;
}
#sidebar {
float: left;
width: 180px;
margin-right: 15px;
height: 200px;
}
#sidebar-inner {
background: #c4193c;
position: fixed;
padding: 38px 12px 70px;
margin-top: -12px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
border-bottom: 1px solid rgba(0,0,0,0.25);
}
#input-inner {
position: relative;
}
#content {
float: left;
width: 665px;
margin-bottom: 25px;
}
#page {
font-family: "Century Schoolbook",Century,Palatino,Georgia,serif;
font-size: 16px;
line-height:1.5em;
color: #561018;
width: 900px;
margin: 0 0 0 80px;
}
#page ul {
background: #fff;
/*background: #eef6fa;*/
list-style: none;
padding: 22px 0 10px;
-webkit-border-bottom-right-radius: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 15px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
}
#page ul li {
border-bottom:1px solid #D2E2EA;
font-family:lucida Grande;
font-size:13px;
line-height:22px;
margin:8px 0;
padding:5px 30px;
overflow: auto;
}
#page ul li:last-child {
border-bottom: none;
}
#growl{
background: rgba(0, 0, 0, 0.85);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
color: #FFF;
position: absolute;
z-index: 99;
top: 25px;
right: 13px;
width: 200px;
height: 75px;
padding: 20px;
}
img.profile{
border:4px solid #D2E2EA;
float:left;
height:48px;
margin-bottom:6px;
margin-right:12px;
width:48px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
$(function () {
var tweetVal;
$('form#form').submit(function () {
tweetVal = $('#text').val();
sendProfile();
return false;
});
function sendProfile() {
$.getJSON("/stream", function (message) {
alert(message);
});
}
function update() {
$('#growl').fadeOut('slow');
}
var socket = new io.Socket(),
tweets = $("#tweets");
socket.connect();
socket.on('message', function (tweet) {
var url = '<a target="_blank" href="http://twitter.com/' + tweet.user.screen_name + '">';
var tweetLi = $("<li/>").html(url + '<img class="profile" src="' + tweet.user.profile_image_url + '" /></a>' + url + '@' + tweet.user.screen_name + '</a> ' + tweet.text);
tweets.prepend(tweetLi);
setInterval(update, 1500);
});
});
</script>
</head>
<body>
<div id="page">
<div id="growl"><p>Un moment s'il vous plait</p></div>
<div id="sidebar">
<div id="sidebar-inner">
<form id="form">
<h2><label for="profilename">Twitter Username</label><br /></h2>
<p><input autocomplete="off" id="text" type="text" /></p>
<div id="input-inner">
<p><input type="submit" value="Change Twitterer" id="submit" /></p>
</div>
</form>
</div>
</div>
<div id="content">
<ul id="tweets"><!-- \Tweets/ --></ul>
</div> <!-- /Content -->
</div> <!-- /Page -->
</body>
</html>