Changeset 335 for dashboard


Ignore:
Timestamp:
Jul 22, 2011, 10:58:07 PM (13 years ago)
Author:
Rick van der Zwet
Message:

New layout and UI

Location:
dashboard
Files:
47 added
1 edited

Legend:

Unmodified
Added
Removed

  • dashboard/occ2011-dashboard.html

    r334 r335  
    1 <html>
     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">
    24<head>
     5<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    36<title>Open Community Camp 2011 - Live Page</title>
    4 <script src="js/jquery.min.js" type="text/javascript"></script>
    5 <script src="js/jquery-ui.min.js" type="text/javascript"></script>
    6 <script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
    7 <script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
    8 <script src="js/jquery.jcarousel.min.js" type="text/javascript"></script>
    9 
    10 <link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />
    11 <link rel="stylesheet" href="css/skin.css" type="text/css" media="all" />
    12  
     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  .title {
     26    font-size: small;
     27  }
     28  ul.videos li {
     29    float: left;
     30    width: 10em;
     31    margin-bottom: 1em;
     32  }
     33  ul.videos {
     34    margin-bottom: 1em;
     35    padding-left : 0em;
     36    margin-left: 0em;
     37    list-style: none;
     38  }
     39
     40  #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
     41  div#flickr-images .jcarousel-skin-tango .jcarousel-container-horizontal {
     42    width: 94%;
     43  }
     44  div#flickr-images .jcarousel-skin-tango .jcarousel-clip-horizontal {
     45    width: 100%;
     46  }
     47
     48  div#youtube .jcarousel-skin-tango .jcarousel-container-horizontal {
     49    width: 75%;
     50  }
     51  iframe {
     52    width: 100%;
     53    height: 100%;
     54    border: 0px solid;
     55    overflow-x: hidden;
     56    overflow-y: hidden;
     57  }
     58</style>
    1359<script type="text/javascript">
    14   $(function() {
    15     $( "#tab-set" ).tabs();
    16   });
    17 
     60 // <![CDATA[
    1861  function mycarousel_initCallback(carousel)
    1962  {
    … …  
    3578  };
    3679
     80  function displayImages(data) {
     81    // Start putting together the HTML string
     82    var htmlString = "<ul id='flickr-images-list' class='jcarousel-skin-tango'>";
     83
     84    // Now start cycling through our array of Flickr photo details
     85    $.each(data.items, function(i,item){
     86      var sourceSquare = (item.media.m);
     87      // I only want the ickle square thumbnails
     88      var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
     89
     90      // Here's where we piece together the HTML
     91      htmlString += '<li><a href="' + item.link + '" target="_blank">';
     92      htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '"/>';
     93      htmlString += '</a></li>';
     94    });
     95
     96  // Pop our HTML in the #images DIV 
     97  $('#flickr-images').html(htmlString + "</ul>");
     98
     99  // Close down the JSON function call
     100  $('#flickr-images-list').jcarousel({
     101      auto: 1,
     102      wrap: 'last',
     103      initCallback: mycarousel_initCallback
     104  });
     105  };
     106
    37107  $(document).ready(function(){
    38     $(".tab-set").tabs();
    39     if($("#tab-set") && document.location.hash){
    40                 $("#tab-set").scrollTo("#tab-set");
    41         }
     108    // Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images
     109    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=occ2011&format=json&jsoncallback=?", displayImages);
     110    $("#tab-set").tabs();
     111
    42112    $("#tab-set").localScroll({
    43113      target:"#tab-set",
    44114      hash: true,
    45       duration : 0,
    46     });
     115      duration : 0
     116    });
     117
    47118    $('#mycarousel').jcarousel({
    48119        auto: 1,
    … …  
    50121        initCallback: mycarousel_initCallback
    51122    });
     123
     124    $(document).ready(function () {
     125      $('body').layout({
     126        applyDefaultStyles: true,
     127        west__size: 320,
     128        east__size: 340,
     129        north__size: 160,
     130        south__size: 80
     131      });
     132      $( "#radio" ).buttonset();
     133    });
     134
     135    $("input[name='window']").change(function () {
     136      $("#mainFrame").attr('src',$("input[name='window']:checked").val());
     137    });
    52138  });
     139// ]]>
    53140</script>
    54141</head>
    55142<body>
    56 
    57 <div id="tab-set">
    58   <ul>
    59     <li><a href="#main">Main Page</a></li>
    60     <li><a href="#telex">IRC Telex</a></li>
    61     <li><a href="#noc">NOC</a></li>
    62     <li><a href="#webcam">Live WebCams</a></li>
    63     <li><a href="#room1">Live Room1</a></li>
    64     <li><a href="#about">Join in! Use hashtag #occ2011</a></li>
    65   </ul>
    66   <div id="main">
    67     <table>
    68     <tr><td colspan="3">
    69     <!-- Start of Flickr Badge -->
    70     <style type="text/css">
    71     #flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
    72     #flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
    73     #flickr_icon_td {padding:0 5px 0 0 !important;}
    74     .flickr_badge_image {text-align:center !important;}
    75     .flickr_badge_image img {border: 1px solid black !important;}
    76     #flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
    77     #flickr_badge_uber_wrapper a:hover,
    78     #flickr_badge_uber_wrapper a:link,
    79     #flickr_badge_uber_wrapper a:active,
    80     #flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
    81     #flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
    82     #flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
    83 </style>
    84 <style type="text/css">
    85   .titlec {
    86   font-size: small;
    87   }
    88   ul.videos li {
    89   float: left;
    90   width: 10em;
    91   margin-bottom: 1em;
    92   }
    93   ul.videos
    94   {
    95   margin-bottom: 1em;
    96   padding-left : 0em;
    97   margin-left: 0em;
    98   list-style: none;
    99   }
    100 </style>
    101 
    102 <table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr>
    103   <td>
    104     <a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a>
    105     <table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
    106       <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=m&layout=h&source=all_tag&user=70375122%40N00&tag=occ2011"></script>
    107     </table>
    108   </td>
    109 </tr></table>
    110 <!-- End of Flickr Badge -->
    111 
    112 </td>
    113 </tr><tr>
    114 <td>
    115   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    116   <script type="text/javascript">
    117     new TWTR.Widget({
    118     version: 2,
    119     type: 'search',
    120     search: '#occ2011',
    121     interval: 6000,
    122     title: 'Open Community Camp 2011',
    123     subject: 'http://opencommunitycamp.org',
    124     width: 300,
    125     height: 300,
    126     theme: {
    127     shell: {
    128       background: '#8ec1da',
    129       color: '#ffffff'
    130     },
    131     tweets: {
    132       background: '#ffffff',
    133       color: '#444444',
    134       links: '#1985b5'
    135     }
    136     },
    137     features: {
    138     scrollbar: true,
    139     loop: true,
    140     live: true,
    141     hashtags: true,
    142     timestamp: true,
    143     avatars: true,
    144     toptweets: true,
    145     behavior: 'all'
    146     }
    147     }).render().start();
    148   </script>
    149 </td>
    150 <td>
    151   <div style="background-color: #00FFFF;width:647px;height:400px">
    152   <iframe src="http://webchat.freenode.net?channels=occ&uio=d4" width="647px" height="400px"></iframe>
    153   </div>
    154 </td>
    155 <td>
     143<div id="flickr-badge" class="ui-layout-north">
     144<a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a>
     145 <div id="flickr-images"></div>
     146</div>
     147<div id="twitter" class="ui-layout-west">
     148    <script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
     149    <script type="text/javascript">
     150    // <![CDATA[
     151      new TWTR.Widget({
     152      version: 2,
     153      type: 'search',
     154      search: '#occ2011',
     155      interval: 6000,
     156      title: 'Open Community Camp 2011',
     157      subject: 'http://opencommunitycamp.org',
     158      width: 300,
     159      height: 300,
     160      theme: {
     161      shell: {
     162        background: '#8ec1da',
     163        color: '#ffffff'
     164      },
     165      tweets: {
     166        background: '#ffffff',
     167        color: '#444444',
     168        links: '#1985b5'
     169      }
     170      },
     171      features: {
     172      scrollbar: true,
     173      loop: true,
     174      live: true,
     175      hashtags: true,
     176      timestamp: true,
     177      avatars: true,
     178      toptweets: true,
     179      behavior: 'all'
     180      }
     181      }).render().start();
     182    // ]]>
     183    </script>
     184    <g:plusone></g:plusone>
     185
     186</div>
     187 <div id="webchat" class="ui-layout-center">
     188   <iframe id="mainFrame" src="http://live.occ2011.org:9999/browser-embedded.html" width="100%" height="100%"></iframe>
     189</div>
     190<div id="youtube" class="ui-layout-east">
    156191  <div id="playerContainer" style="width: 320px; height: 260px;">
    157192    <object id="player"></object>
    … …  
    160195  <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
    161196  <script type="text/javascript">
     197    // <![CDATA[
    162198    function loadVideo(playerUrl, autoplay) {
    163199      swfobject.embedSWF(
    … …  
    185221      }
    186222    }
     223  // ]]>
    187224  </script>
    188   <script type="text/javascript" src="https://gdata.youtube.com/feeds/api/videos?strict=true&max-results=10&category=occ2011&alt=json-in-script&callback=showMyVideos2">
     225  <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">
    189226  </script>
    190 </td>
    191 </tr></table>
    192 
    193 </div>
    194 <div id="telex">
    195   <table><tr><td>
    196     <iframe src="http://webchat.freenode.net?channels=occ&uio=d4" width="647" height="400"></iframe></td><td>
    197     <img src="http://live.occ2011.org:9999/cam4/video" />
    198   </td></tr></table>
    199 </div>
    200 <div id="noc">
    201   <iframe src="http://noc.occ2011.org" width="100%" height="100%"></iframe>
    202 </div>
    203 <div id="webcam">
    204   <iframe src="http://live.occ2011.org:9999/browser.html" width="100%" height="100%"></iframe>
    205 </div>
    206 <div id="room1">
    207   <iframe src="http://live.occ2011.org:9999/room1.html" width="100%" height="100%"></iframe>
    208 </div>
    209 </div>
    210 
    211 
    212 
     227</div>
     228<div class="ui-layout-south">
     229<center>
     230<form>
     231  <div id="radio">
     232      <input type="radio" id="radio1" name="window" value="http://live.occ2011.org:9999/browser-embedded.html" checked="checked" /><label for="radio1">Live Webcams</label>
     233      <input type="radio" id="radio2" name="window" value="http://bunny.occ2011.org:9090?channels=occ" /><label for="radio2">WebChat</label>
     234      <input type="radio" id="radio3" name="window" value="http://live.occ2011.org:9999/telex.html"   /><label for="radio3">IRC Telex</label>
     235      <input type="radio" id="radio4" name="window" value="http://live.occ2011.org:9999/room1.html"   /><label for="radio4">Live Presentations</label>
     236   </div>
     237</form>
     238<tt>Developed at <a href="http://opencommunitycamp.org">#occ2011</a> by <a href="http://rickvanderzwet.nl">Rick van der Zwet</a></tt>
     239</center>
     240</div>
    213241</body>
    214242</html>
Note: See TracChangeset for help on using the changeset viewer.