Advertisement
Guest User

Untitled

a guest
Jun 26th, 2013
190
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.43 KB | None
  1. <html>
  2. <head>
  3.  
  4. <title>Curios - Watching</title>
  5.  
  6. <link rel="shortcut icon" href="http://www.iconj.com/ico/o/h/oht62g125e.ico" type="image/x-icon" />
  7.  
  8. <style>
  9.  
  10.     body {
  11.         background-color:#141414
  12.     }
  13.  
  14.     .button {
  15.         border-top: 1px solid #757575;
  16.         border-right: 1px solid #757575;
  17.         background: #363536;
  18.         background: -webkit-gradient(linear, left top, left bottom, from(#4d4d4d), to(#363536));
  19.         background: -webkit-linear-gradient(top, #4d4d4d, #363536);
  20.         background: -moz-linear-gradient(top, #4d4d4d, #363536);
  21.         background: -ms-linear-gradient(top, #4d4d4d, #363536);
  22.         background: -o-linear-gradient(top, #4d4d4d, #363536);
  23.         padding: 4px 10px;
  24.         -webkit-border-radius: 0px;
  25.         -moz-border-radius: 0px;
  26.         border-radius: 0px;
  27.         -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
  28.         -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
  29.         box-shadow: rgba(0,0,0,1) 0 1px 0;
  30.         text-shadow: rgba(0,0,0,.4) 0 1px 0;
  31.         color: #c9c9c9;
  32.         font-size: 12px;
  33.         font-family: Helvetica, Arial, Sans-Serif;
  34.         text-decoration: none;
  35.         vertical-align: middle;
  36.         margin:0px;
  37.         }
  38.     .button:hover {
  39.         border-top-color: #303030;
  40.         background: #303030;
  41.         color: #ccc;
  42.         }
  43.     .button:active {
  44.         border-top-color: #2e2e2e;
  45.         background: #2e2e2e;
  46.         }
  47.     .button a {
  48.         text-decoration: none;
  49.         color: #c9c9c9;
  50.         }
  51.     .button a:visited{
  52.         text-decoration: none;
  53.         color: #c9c9c9;
  54.         }
  55.     .button a:hover{
  56.         text-decoration: none;
  57.         color: #c9c9c9;
  58.         }
  59.     .button a:active{
  60.         text-decoration: none;
  61.         color: #c9c9c9;
  62.         }
  63.     .button a:link{
  64.         text-decoration: none;
  65.         color: #c9c9c9;
  66.         }
  67.     #chat iframe {
  68.         background-color: transparent;
  69.         border: 1px solid #353535;
  70.         padding: 0px;
  71.         overflow: hidden;
  72.     }
  73.  
  74.     #player {
  75.     width: 640px;
  76.     height: 385px;
  77.     }
  78.    
  79.     .handle {
  80.     cursor: move;
  81.     z-index: 10;
  82.     }
  83.      
  84.     #dragvideo {
  85.         position: absolute;
  86.         left: 2em;
  87.         top: 1em;
  88.     }
  89.    
  90.     #dragchat {
  91.         position: absolute;
  92.         left: 750px;
  93.         top: 1em;
  94.     }
  95.    
  96.     #dragcontrols {
  97.         position: absolute;
  98.         left: 2em;
  99.         top: 500px;
  100.     }
  101.    
  102.     .resizableaspect {
  103.         padding-right: 0.5em;
  104.        
  105.     .ui-resizable-helper {
  106.         border: 1px dotted #DEDEDE;
  107.     }
  108.    
  109.     #chat {
  110.         width: 600px;
  111.         height: 470px;
  112.     }
  113.    
  114.     #player {
  115.         width: 640px;
  116.         height: 385px;
  117.     }
  118. </style>
  119.  
  120.     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" rel="stylesheet"/>
  121.  
  122.     <script type="text/javascript" language="Javascript"
  123.               src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
  124.     </script>
  125.  
  126.     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  127.    
  128.      <script>
  129.     $(function() {
  130.          $( ".resizableaspect" ).resizable({
  131.             aspectRatio: true,
  132.               helper: "ui-resizable-helper",
  133.               stop: function(e, ui) {
  134.                      var pl=$('#player iframe')[0];pl.src=pl.src;
  135.               }
  136.          });
  137.      });
  138.   </script>
  139.  
  140.    <script>
  141.   $(function() {
  142.     $( "#resizable" ).resizable();
  143.      helper: "ui-resizable-helper"
  144.   });
  145.   </script>
  146.  
  147. </head>
  148.  
  149. <body>
  150.  
  151. <div id="dragvideo" class="drag">
  152. <div id="player" class="resizableaspect">
  153. <iframe width="100%" height="100%" src="http://cdn.livestream.com/embed/curios?layout=4&color=0x000000&autoPlay=true&mute=false&iconColorOver=0xe7e7e7&iconColor=0xcccccc&allowchat=true&height=385&width=640" style="border:0;outline:0" frameborder="0" scrolling="no" class="resizableaspect"></iframe>
  154. </div><span id="videohandle" class="button handle">|||</span>
  155. </div>
  156.  
  157. <div id="dragchat" class="drag">
  158. <div id="chat" class="resizable">
  159. <iframe width="100%" height="100%" scrolling="no" src="http://widget.mibbit.com/?settings=d80e31e826bb643c095282161f131216&server=irc.biolizard.net&channel=%23curios"></iframe>
  160. </div>
  161. <span id="chathandle" class="button handle" style="border-right:none;">|||</span>
  162. </div>
  163.  
  164. <div id="dragcontrols" class="drag">
  165. <div id="controls">
  166. <span class="button"><a href="javascript:var pl=$('#player iframe')[0];pl.src=pl.src;">↺ Repair</a></span><span class="button"><a href="http://www.livestream.com/curios" target="_blank">View on livestream.com</a></span><span class="button"><a href="http://curios-channel.tumblr.com/ask" target="_blank">Make a request</a></span><span class="button"><a href="http://curios-channel.tumblr.com/submit" target="_blank">Submit a video</a></span><span class="button"><a href="http://curios-channel.tumblr.com/" target="_blank">Back to blog page</a></span>
  167. </div>
  168. <span id="controlshandle" class="button handle" style="border-right:none;">|||</span>
  169. </div>
  170.  
  171. </body>
  172. </html>
Advertisement
RAW Paste Data Copied
Advertisement