Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit 886c7a3eb74e4a36ffb6160570a2a7127ab981a7 @chriscoyier chriscoyier committed Dec 8, 2011
Showing with 160 additions and 0 deletions.
  1. +112 −0 index.html
  2. +48 −0 style.css
112 index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+
+ <meta charset="UTF-8">
+
+ <title>Build Your Social Page</title>
+
+ <link rel="stylesheet" href="style.css">
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script>
+// DOM Ready
+ $(function() {
+
+ $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?ids=52723107@N00&lang=en-us&format=json&jsoncallback=?", function(data){
+ $.each(data.items, function(index, item){
+ $("<img/>").attr("src", item.media.m).appendTo("#flickr")
+ .wrap("<a href='" + item.link + "'></a>");
+ });
+ });
+
+ $.getJSON('http://twitter.com/status/user_timeline/chriscoyier.json?count=10&callback=?', function(data){
+ $.each(data, function(index, item){
+ $('#twitter').append('<div class="tweet"><p>' + item.text.linkify() + '</p><p><strong>' + relative_time(item.created_at) + '</strong></p></div>');
+ });
+
+ });
+
+/* DEFUNCT
+ $.getJSON("http://www.scrnshots.com/users/chriscoyier/screenshots.json?callback=?", function(screenshots){
+ $.each(screenshots, function(index, screenshot){
+ $("#scrnshots").append("<a href='" + screenshot.url + "'><img src='" + screenshot.images.small + "' /></a>");
+ });
+ });
+*/
+
+ $.getJSON("http://api.dribbble.com/players/chriscoyier/shots?callback=?", function(data) {
+
+ $.each(data.shots, function(index, shot) {
+ $("#dribbble").append("<a href='" + shot.image_url + "'><img src='" + shot.image_teaser_url + "' /></a>");
+ });
+
+ });
+
+ function relative_time(time_value) {
+ var values = time_value.split(" ");
+ time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
+ var parsed_date = Date.parse(time_value);
+ var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
+ var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
+ delta = delta + (relative_to.getTimezoneOffset() * 60);
+
+ var r = '';
+ if (delta < 60) {
+ r = 'a minute ago';
+ } else if(delta < 120) {
+ r = 'couple of minutes ago';
+ } else if(delta < (45*60)) {
+ r = (parseInt(delta / 60)).toString() + ' minutes ago';
+ } else if(delta < (90*60)) {
+ r = 'an hour ago';
+ } else if(delta < (24*60*60)) {
+ r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
+ } else if(delta < (48*60*60)) {
+ r = '1 day ago';
+ } else {
+ r = (parseInt(delta / 86400)).toString() + ' days ago';
+ }
+
+ return r;
+ }
+
+ String.prototype.linkify = function() {
+ return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
+ return m.link(m);
+ });
+ };
+
+ });
+ </script>
+
+</head>
+
+<body>
+
+ <div id="page-wrap">
+
+ <div id="flickr">
+
+ <h2>Flickr</h2>
+
+ </div>
+
+ <div id="twitter">
+
+ <h2>Twitter</h2>
+
+ </div>
+
+ <div id="dribbble">
+
+ <h2>Dribbble</h2>
+
+ </div>
+
+ </div>
+
+</body>
+
+</html>
48 style.css
@@ -0,0 +1,48 @@
+/*
+ Chris Coyier
+ http://css-tricks.com
+*/
+
+* { margin: 0; padding: 0; }
+body {
+ font: 14px Georgia, Serif;
+}
+
+a {
+ outline: 0;
+}
+img, a img {
+ border: 0;
+}
+
+h1 {
+ font-weight: normal;
+}
+h2 {
+ font: bold 32px Sans-Serif;
+ margin: 0 0 10px 0;
+}
+
+#page-wrap {
+ width: 960px;
+ margin: 80px auto;
+}
+
+#twitter, #flickr, #dribbble {
+ width: 27%;
+ margin: 0 2% 0 0;
+ padding: 2%;
+ float: left;
+ background: #fff7cc;
+ border: 1px solid #ecd869;
+}
+
+img.profile-pic { float: left; padding: 5px; }
+
+#flickr img, #dribbble img, #twitter img { width: 100px; margin: 10px; }
+
+.tweet {
+ padding: 10px;
+ margin: 5px 0;
+ background: white;
+}

0 comments on commit 886c7a3

Please sign in to comment.