source: dashboard/occ2011-thanks.html@ 389

Last change on this file since 389 was 339, checked in by Rick van der Zwet, 13 years ago

Thanks for the fun!
File size: 9.2 KB
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
4<head>
5<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
6<title>Open Community Camp 2011 - Live Page</title>
7
8
9<LINK rel="stylesheet" type="text/css" href="lib/css/themes/base/jquery.ui.all.css">
10<LINK rel="stylesheet" type="text/css" href="lib/css/layout-default-latest.css">
11<LINK rel="stylesheet" type="text/css" href="skins/tango/skin.css">
12
13<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
14
15<script src="lib/js/jquery-latest.js" type="text/javascript"></script>
16<script src="lib/js/jquery-ui-latest.js" type="text/javascript"></script>
17<script src="lib/js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
18<script src="lib/js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
19<script src="lib/js/jquery.jcarousel.min.js" type="text/javascript"></script>
20<script src="lib/js/jquery.layout-latest.js" type="text/javascript"></script>
21
22<style type="text/css">
23 .ui-tabs-panel { width: inherit; height: inherit; }
24
25 img { border: none; }
26
27 .title {
28 font-size: small;
29 }
30 ul.videos li {
31 float: left;
32 width: 10em;
33 margin-bottom: 1em;
34 }
35 ul.videos {
36 margin-bottom: 1em;
37 padding-left : 0em;
38 margin-left: 0em;
39 list-style: none;
40 }
41
42 #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
43 div#flickr-images .jcarousel-skin-tango .jcarousel-container-horizontal {
44 width: 94%;
45 }
46 div#flickr-images .jcarousel-skin-tango .jcarousel-clip-horizontal {
47 width: 100%;
48 }
49
50 div#youtube .jcarousel-skin-tango .jcarousel-container-horizontal {
51 width: 75%;
52 }
53 iframe {
54 width: 100%;
55 height: 100%;
56 border: 0px solid;
57 overflow-x: hidden;
58 overflow-y: hidden;
59 }
60</style>
61<script type="text/javascript">
62 // <![CDATA[
63 function mycarousel_initCallback(carousel)
64 {
65 // Disable autoscrolling if the user clicks the prev or next button.
66 carousel.buttonNext.bind('click', function() {
67 carousel.startAuto(0);
68 });
69
70 carousel.buttonPrev.bind('click', function() {
71 carousel.startAuto(0);
72 });
73
74 // Pause autoscrolling if the user moves with the cursor over the clip.
75 carousel.clip.hover(function() {
76 carousel.stopAuto();
77 }, function() {
78 carousel.startAuto();
79 });
80 };
81
82 function displayImages(data) {
83 // Start putting together the HTML string
84 var htmlString = "<ul id='flickr-images-list' class='jcarousel-skin-tango'>";
85
86 // Now start cycling through our array of Flickr photo details
87 $.each(data.photos.photo, function(i,item){
88 // http://farm3.static.flickr.com/2753/5859450667_d6e29b9fb2_s.jpg
89 var url = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_s.jpg';
90 var target = 'http://www.flickr.com/photos/' + item.owner + '/' + item.id + '/';
91
92 // Here's where we piece together the HTML
93 htmlString += '<li><a href="' + target + '" target="_blank">';
94 htmlString += '<img src="' + url + '" alt="' + item.title + '" title="' + item.title + '"/>';
95 htmlString += '</a></li>';
96 });
97
98 // Pop our HTML in the #images DIV
99 $('#flickr-images').html(htmlString + "</ul>");
100
101 // Close down the JSON function call
102 $('#flickr-images-list').jcarousel({
103 auto: 1,
104 wrap: 'last',
105 initCallback: mycarousel_initCallback
106 });
107 };
108
109 $(document).ready(function(){
110 // Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images
111// $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=occ2011&format=json&jsoncallback=?", displayImages);
112 $.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&name=value&api_key=138a25b8ce15c2cce5491b0c0170f2be&format=json&tags=occ2011&sort=interestingness-desc&page-count=1&jsoncallback=?&tag_mode=all",displayImages);
113 $("#tab-set").tabs();
114
115 $("#tab-set").localScroll({
116 target:"#tab-set",
117 hash: true,
118 duration : 0
119 });
120
121 $('#mycarousel').jcarousel({
122 auto: 1,
123 wrap: 'last',
124 initCallback: mycarousel_initCallback
125 });
126
127 $(document).ready(function () {
128 $('body').layout({
129 applyDefaultStyles: true,
130 west__size: 320,
131 east__size: 340,
132 north__size: 160,
133 south__size: 80
134 });
135 $( "#radio" ).buttonset();
136 });
137
138 $("input[name='window']").change(function () {
139 $("#mainFrame").attr('src',$("input[name='window']:checked").val());
140 });
141 });
142// ]]>
143</script>
144</head>
145<body>
146<div id="flickr-badge" class="ui-layout-north">
147<a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a>
148 <div id="flickr-images"></div>
149</div>
150<div id="twitter" class="ui-layout-west">
151 <script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
152 <script type="text/javascript">
153 // <![CDATA[
154 new TWTR.Widget({
155 version: 2,
156 type: 'search',
157 search: '#occ2011',
158 interval: 6000,
159 title: 'Open Community Camp 2011',
160 subject: 'http://opencommunitycamp.org',
161 width: 300,
162 height: 300,
163 theme: {
164 shell: {
165 background: '#8ec1da',
166 color: '#ffffff'
167 },
168 tweets: {
169 background: '#ffffff',
170 color: '#444444',
171 links: '#1985b5'
172 }
173 },
174 features: {
175 scrollbar: true,
176 loop: true,
177 live: true,
178 hashtags: true,
179 timestamp: true,
180 avatars: true,
181 toptweets: true,
182 behavior: 'all'
183 }
184 }).render().start();
185 // ]]>
186 </script>
187 <g:plusone></g:plusone>
188
189</div>
190 <div id="webchat" class="ui-layout-center">
191 <table width="100%">
192 <tr><td>
193 <a href="http://wifisoft.org"><img src="img/wifisoft-logo.jpg" width="50px"/></a></td><td>
194 <h3>#occ2011 has ended!</h3>
195 </td></tr></table>
196 <p />
197 We hope to see you again next year, check our website for more information: <a href="http://opencommunitycamp.org">http://opencommunitycamp.org</a>
198<p />
199 Big thanks to our sponsors:<p />
200 <a href="http://www.ziggozakelijk.nl"><img src="img/ziggo-logo.jpg" alt="Ziggo" height="100px" /></a>
201 <a href="http://optiver.com"><img height="100px" src="img/optiver-logo.png" alt="Optiver" /></a>
202</div>
203<div id="youtube" class="ui-layout-east">
204 <div id="playerContainer" style="width: 320px; height: 260px;">
205 <object id="player"></object>
206 </div>
207 <div id="videos2"></div>
208 <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
209 <script type="text/javascript">
210 // <![CDATA[
211 function loadVideo(playerUrl, autoplay) {
212 swfobject.embedSWF(
213 playerUrl + '&rel=1&border=0&fs=1&autoplay=' +
214 (autoplay?1:0), 'player', '320', '260', '9.0.0', false,
215 false, {allowfullscreen: 'true'});
216 }
217
218 function showMyVideos2(data) {
219 var feed = data.feed;
220 var entries = feed.entry || [];
221 var html = ['<ul id="mycarousel" class="jcarousel-skin-tango videos">'];
222 for (var i = 0; i < entries.length; i++) {
223 var entry = entries[i];
224 var title = entry.title.$t.substr(0, 20);
225 var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
226 var playerUrl = entries[i].media$group.media$content[0].url;
227 html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
228 '<img src="', thumbnailUrl, '" width="75" height="75" alt="',title ,'..."/>', '</li>');
229 }
230 html.push('</ul><br style="clear: left;"/>');
231 document.getElementById('videos2').innerHTML = html.join('');
232 if (entries.length > 0) {
233 loadVideo(entries[0].media$group.media$content[0].url, false);
234 }
235 }
236 // ]]>
237 </script>
238 <script type="text/javascript" src="https://gdata.youtube.com/feeds/api/videos?strict=true&amp;max-results=10&amp;category=occ2011&amp;alt=json-in-script&amp;callback=showMyVideos2">
239 </script>
240</div>
241<div class="ui-layout-south">
242<center>
243<form>
244 <div id="radio">
245 <input type="radio" id="radio1" name="window" value="http://live.occ2011.org:9999/browser-embedded.html" checked="checked" /><label for="radio1">Live Webcams</label>
246 <input type="radio" id="radio2" name="window" value="http://bunny.occ2011.org:9090?channels=occ" /><label for="radio2">WebChat</label>
247 <input type="radio" id="radio3" name="window" value="http://live.occ2011.org:9999/telex.html" /><label for="radio3">IRC Telex</label>
248 <input type="radio" id="radio4" name="window" value="http://live.occ2011.org:9999/room1.html" /><label for="radio4">Live Presentations</label>
249 <input type="radio" id="radio5" name="window" value="http://noc.occ2011.org/nagios/" /><label for="radio5">NOC Nagios</label>
250 <input type="radio" id="radio6" name="window" value="http://noc.occ2011.org/smokeping/smokeping.cgi" /><label for="radio6">NOC Smokeping</label>
251 </div>
252</form>
253<tt>Developed at <a href="http://opencommunitycamp.org">#occ2011</a> by <a href="http://rickvanderzwet.nl">Rick van der Zwet</a></tt>
254</center>
255</div>
256</body>
257</html>
Note: See TracBrowser for help on using the repository browser.