-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
122 lines (116 loc) · 5.31 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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script language="text/javascript" src="js/jquery.jtwitter.js"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
function SwitchImage(el) {
var element = $(el);
var img;
if(element.is(":visible")) {
// Going UP!
img = "images/Grey_DOWN.png";
element.parent().find(".heading img").attr("src", img);
element.slideUp("normal", function() {
element.parent().find(".heading").animate({width: "450px"});
});
}
else {
// Coming down!
img = "images/Grey_UP.png";
element.parent().find(".heading img").attr("src", img);
element.parent().find(".heading").animate({width: "100%"}, function() {
element.slideDown();
});
}
}
function GetTweet() {
var tweet = $('#tweet').text("Getting Data...");
var url = "http://twitter.com/status/user_timeline/wedtm.json?count=1&callback=?";
$.getJSON(url, function(data) {
var post = data[0];
var img = " <img onclick='GetTweet()' src='images/Grey_REFRESH.png' width='20px'/>";
tweet.html(img + post.text);
});
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>WedTM</title>
<style type="text/css" media="screen">
* {margin: 0px; padding: 0px;}
body{background:#CFCFCF;font-size:1.3em;font-family:"Hybrea",Helvetica,sans-serif;}
@font-face { font-family: "Hybrea"; src:local("Hybrea"), url("hybrea.otf") format("opentype"); }
#header {margin-left: 40px; padding: 15px; }
#header #name {margin-left:15px; margin-right:-15px; font-size:60px;}
#header #gravatar {border:5px solid #ACACAC; }
#content {margin: 40px; margin-top:10px; padding-left:15px;}
#tweet {border:3px solid #ACACAC; background-color:#DFDFDF;font-style:italic; color:#9C9C9C;
font-family:"Arial", sans-serif;font-size:10px;padding:5px;width:auto; display:inline;}
#tweet img {vertical-align:middle;}
#tweet img:hover {cursor:pointer;}
#footer {text-align:center;font-style:italic; color:#9C9C9C;font-family:"Arial", sans-serif;font-size:10px;
padding:5px;width:auto; display:inline;}
#footer a {text-decoration:none;color:inherit;}
#footer a:hover {text-decoration:underline;}
.block {position:relative;width:100%;}
.block .heading {background-color:#FFFFFF; font-size: 12px; padding:15px 0 15px 15px; width:450px;
font-family: Helvetica, sans-serif; border:3px solid #ACACAC; margin-bottom:-3px; margin-left:0px; position:relative;}
.block .heading:hover {cursor:pointer;}
.block .heading h1 {display:inline;}
.block .heading img {right:5px; position:absolute;}
.block .heading img:hover {cursor:pointer;}
.block .content {border: 3px solid #ACACAC; background-color:#FFFFFF; padding:15px; display:none; padding-right:0px;
width:100%;margin-top:0px; margin-bottom:15px;}
.block .content a {text-decoration: none;}
.block .content a:hover {text-decoration: none;}
</style>
</head>
<body>
<div id="header">
<img id ="gravatar" src="http://www.gravatar.com/avatar/cce6dedd189d53eea48e6121bb9a0383?s=160" /><span id="name">Miles Smith (WedTM)</span><br />
<div id="tweet">Getting Data...</div>
</div>
<div id="content">
<div id="b1" class="block">
<div class="heading" onclick="SwitchImage('#b1 .content')">
<h1>Here's how you can find me...</h1>
<img src="images/Grey_DOWN.png" width="25px"/>
</div>
<div class="content">
Twitter: <a href="http://twitter.com/wedtm/">http://twitter.com/wedtm</a><br />
Github: <a href="http://github.com/wedtm/">http://github.com/wedtm</a><br />
Last.FM: <a href="http://last.fm/user/wedtm">http://last.fm/user/wedtm</a><br />
Ohloh: <a href="http://ohloh.net/accounts/wedtm">http://ohloh.net/accounts/wedtm</a><br />
</div>
</div>
<div id="b2" class="block">
<div class="heading" onclick="SwitchImage('#b2 .content')">
<h1>Projects I'm involved in...</h1>
<img src="images/Grey_DOWN.png" width="25px"/>
</div>
<div class="content">
Nisme: <a href="http://wedtm.com/nisme/">http://wedtm.com/nisme/</a><br />
GEP 5.0: <a href="http://appcon.net/">http://appcon.net/</a><br />
Too.tl: <a href="http://too.tl/">http://too.tl</a><br />
</div>
</div>
<div id="b3" class="block">
<div class="heading" onclick="SwitchImage('#b3 .content')">
<h1>Products I use...</h1>
<img src="images/Grey_DOWN.png" width="25px"/>
</div>
<div class="content">
Lighthouse: <a href="http://lighthouseapp.com/">http://lighthouseapp.com/</a><br />
Github: <a href="http://github.com/wedtm/">http://github.com/</a><br />
Ruby on Rails: <a href="http://rubyonrails.org/">http://rubyonrails.org</a><br />
jQuery: <a href="http://jquery.com/">http://jquery.com/</a><br />
</div>
</div>
<div id="footer"><p>WedTM is Miles Smith, you can find out more at <a href="http://wedtm.com/">wedtm.com</a>.</p></div>
</div>
<script type="text/javascript">
GetTweet();
</script>
</body>
</html>