Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 13th, 2012  |  syntax: HTML  |  size: 10.16 KB  |  hits: 25  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Управление медиа проигрывателем</title>
  6. <script src="jquery.js" type="text/javascript"></script>
  7. <style type="text/css">
  8. .button_start_all {
  9.         cursor:pointer;
  10.     height:40px;
  11.     width:154px;
  12.     background-image:url('img/start_all.png');
  13.     background-repeat:no-repeat;
  14.         background-color: #EBF4FB;
  15.         border:none;
  16. }
  17. .button_stop_all {
  18.         cursor:pointer;
  19.         height:40px;
  20.         width:154px;
  21.         background-image:url('img/stop_all.png');
  22.         background-repeat:no-repeat;
  23.         background-color: #EBF4FB;
  24.         border:none;
  25. }
  26.  
  27. body{
  28.         font-family:Arial, Helvetica, sans-serif;
  29.         font-size:13px;
  30. }
  31. .foot_all {
  32.         text-align: right;
  33.         vertical-align: middle;
  34.         margin-top: 10px;
  35.         margin-right: 5px;
  36.         margin-bottom: 5px;
  37.         margin-left: 5px;
  38. }
  39.  
  40. /* ----------- My Form ----------- */
  41. .myform{
  42.         margin:0 auto;
  43.         width:600px;
  44.         padding:14px;
  45. }
  46.  
  47.  /* ----------- stylized ----------- */
  48.  #stylized{
  49.  border:solid 2px #b7ddf2;
  50.  background:#ebf4fb;
  51.  }
  52.  #stylized h1,h2,h3,th {
  53.  font-size:12px;
  54.  font-weight:bold;
  55.  margin-bottom:8px;
  56.  }
  57.  #stylized p{
  58.  font-size:11px;
  59.  color:#666666;
  60.  margin-bottom:20px;
  61.  border-bottom:solid 1px #b7ddf2;
  62.  padding-bottom:10px;
  63.  }
  64.  #stylized label{
  65.  display:block;
  66.  font-weight:bold;
  67.  text-align:right;
  68.  width:160px;
  69.  float:left;
  70.  }
  71.  #stylized .small{
  72.  color:#666666;
  73. display:block;
  74.  font-size:11px;
  75.  font-weight:normal;
  76.  text-align:right;
  77.  width:160px;
  78.  }
  79. select {
  80.    background: transparent;
  81.    width: 275px;
  82.    
  83.    font-size: 14px;
  84.    /*
  85.    border: 1px solid #ccc;
  86.     padding: 5px;
  87.         */
  88.         padding:4px 2px;
  89.         border:solid 1px #aacfe4;
  90.    
  91.    height: 300px;
  92. }
  93. dl.progress,
  94. dl.progress *
  95.     { margin: 0; padding: 0; }
  96.  
  97. dl.progress {
  98.     padding: 1px; border: 1px solid #aacfe4;
  99.     height: 20px; width: 99%; }
  100.  
  101. .progress dt
  102.     { width: 0; height: 0; overflow: hidden; }
  103.  
  104. .progress .done
  105.     { height: 100%; float: left; }
  106.  
  107. .progress .done
  108.     {
  109.         background-color: #73C2E1;
  110. }
  111.  
  112.  
  113. .pl_table {
  114.         border: medium groove #b7ddf2;
  115.         position: relative;
  116.         margin: auto;
  117.         float: left;
  118. }
  119. .button_stop {  cursor:pointer;
  120.     height:70px;
  121.     width:70px;
  122.     background-image:url('img/stop.png');
  123.     background-repeat:no-repeat;
  124.         background-color: #EBF4FB;
  125. }
  126. .head_player {
  127.         font-family: Verdana, Geneva, sans-serif;
  128.         font-size: 15px;
  129.         font-weight: bold;
  130.         color: #227899;
  131.         padding-left: 5px;
  132.         text-align: right;
  133. }
  134. .global_header {
  135.         font-family: Verdana, Geneva, sans-serif;
  136.         font-size: 18px;
  137.         text-align: left;
  138. }
  139. .min_numbers {
  140.         font-size: 10px;
  141.         text-align: center;
  142.         vertical-align: middle;
  143.         font-weight: bold;
  144. }
  145. .min_play {
  146.         background-image: url(img/min_play.png);
  147.         background-repeat: no-repeat;
  148.         background-position: center center;
  149.         width: 48px;
  150.         height: 48px;
  151.         cursor: pointer;
  152. }
  153. .min_stop {
  154.         background-image: url(img/min_stop.png);
  155.         background-repeat: no-repeat;
  156.         background-position: center center;
  157.         height: 48px;
  158.         width: 48px;
  159.         cursor: pointer;
  160. }
  161. </style>
  162. </head>
  163.  
  164. <body>
  165.  
  166. <div id="stylized" class="myform">
  167. <div class="foot_all">
  168. <div class="global_header">
  169. Панель управления плеерами
  170.         Admin Mode</div>
  171. <form action="" method="post">
  172.   <input name="start_all" type="submit" class="button_start_all" id="start_all" value=""/>
  173.   <input name="stop_all" type="submit" class="button_stop_all" id="stop_all" value=""/></form>
  174.   </div>
  175.  <table width="100%" border="0" cellpadding="5" cellspacing="5">
  176.    <tr>
  177. <script type="text/javascript">
  178.     $(document).ready(function(){
  179.                 var oldNum;
  180.                
  181.                 trackName = function(id){
  182.                     $.ajax({
  183.                     type: 'GET',
  184.                     url: 'get_name.php?id=0',
  185.                     success: function(data){
  186.                         $('#track-name'+id).html(data);
  187.                     }
  188.                    });
  189.                 }
  190.                 reloadcontent =function(){
  191.                    $.ajax({
  192.                     dataType: 'json',
  193.                     type: 'GET',
  194.                     url: 'get_state.php?id=0',
  195.                     success: function(data){
  196.                         if(oldNum != data.num) trackName(data.id);
  197.                         $('#done'+data.id).css('width',data.percent).html(data.percent);
  198.                         $('#position'+data.id).html(data.time);
  199.                         $('#num'+data.id).html(data.num);
  200.                                                                        
  201.                         oldNum = data.num;
  202.                     }
  203.                    });
  204.                 };
  205.                 setInterval(reloadcontent, 2000);
  206.     });
  207.    
  208. </script>
  209.  
  210.   <td>
  211.  <table width="285" border="1" cellpadding="3" cellspacing="0" class="pl_table">
  212.    <tr>
  213.      <td>
  214.        <img src="img/audio_icon.png" alt="Плеер проигрывает аудио и видео" width="30" height="30" title="Плеер проигрывает аудио и видео" align="left" /><img src="img/video_icon.png" width="30" height="30" alt="Плеер проигрывает аудио и видео" title="Плеер проигрывает аудио и видео" align="left" /><div  class="head_player">#1  Медиа-плеер играет</div>     </td>
  215.    </tr>
  216.    <tr>
  217.      <td><dl class="progress">
  218.        <dd class="done" id="done0" style="width:5%">5%     </dl></td>
  219.    </tr>
  220.    <tr>
  221.      <td>Позиция <span id="position0">00:00:32</span></td>
  222.    </tr>
  223.    <tr>
  224.      <td>Текущий трек № <span id="num0">9</span><br /><span id="track-name0">07_mrid.mp3</span></td>
  225.    </tr>
  226.    <tr>
  227.      <td align="center"><a href="adm.php?id=0"><img src="img/player_adm.png" /></a>
  228.     http://test1.ru/webplayer/get_state.php?id=0   </td>
  229.     </tr>
  230.  </table></td>
  231.  <script type="text/javascript">
  232.     $(document).ready(function(){
  233.                 var oldNum;
  234.                
  235.                 trackName = function(id){
  236.                     $.ajax({
  237.                     type: 'GET',
  238.                     url: 'get_name.php?id=1',
  239.                     success: function(data){
  240.                         $('#track-name'+id).html(data);
  241.                     }
  242.                    });
  243.                 }
  244.                 reloadcontent =function(){
  245.                    $.ajax({
  246.                     dataType: 'json',
  247.                     type: 'GET',
  248.                     url: 'get_state.php?id=1',
  249.                     success: function(data){
  250.                         if(oldNum != data.num) trackName(data.id);
  251.                         $('#done'+data.id).css('width',data.percent).html(data.percent);
  252.                         $('#position'+data.id).html(data.time);
  253.                         $('#num'+data.id).html(data.num);
  254.                                                                        
  255.                         oldNum = data.num;
  256.                     }
  257.                    });
  258.                 };
  259.                 setInterval(reloadcontent, 2000);
  260.     });
  261.    
  262. </script>
  263.  
  264.   <td>
  265.  <table width="285" border="1" cellpadding="3" cellspacing="0" class="pl_table">
  266.    <tr>
  267.      <td>
  268.        <img src="img/audio_icon.png" alt="Плееер проигрывает только аудио файлы" width="30" height="30" title="Плееер проигрывает только аудио файлы"align="left" /><div  class="head_player">#2  Медиа-плеер играет</div>     </td>
  269.    </tr>
  270.    <tr>
  271.      <td><dl class="progress">
  272.        <dd class="done" id="done1" style="width:5%">5%     </dl></td>
  273.    </tr>
  274.    <tr>
  275.      <td>Позиция <span id="position1">00:00:32</span></td>
  276.    </tr>
  277.    <tr>
  278.      <td>Текущий трек № <span id="num1">9</span><br /><span id="track-name1">07_mrid.mp3</span></td>
  279.    </tr>
  280.    <tr>
  281.      <td align="center"><a href="adm.php?id=1"><img src="img/player_adm.png" /></a>
  282.     http://test1.ru/webplayer/get_state.php?id=1   </td>
  283.     </tr>
  284.  </table></td>
  285.  </tr><tr> </tr>
  286.  </table>
  287.  
  288.  <div align="right">
  289.  <strong>Состояниее плееров</strong>
  290.    <table border="0" cellpadding="0" cellspacing="3">
  291.          
  292.           <tr class="min_numbers">
  293.           <td class="min_play" onClick="location='adm.php?id=0'">1</td><td class="min_play" onClick="location='adm.php?id=1'">2</td>          </tr>
  294.   </table>
  295.   </div>
  296.  <!-- АВТОРИЗАЦИЯ АДМИНА -->
  297.          <script type="text/javascript">
  298.             $(document).ready(function(){
  299.                 var error = 'ОШИБКА!';
  300.                 $('#auth').click(function(){
  301.                     $('.container').slideToggle('slow');
  302.                    return false;
  303.                 });
  304.  
  305.                 $('#keyboard li').click(function(){
  306.                     $('#pin').attr('value',$('#pin').attr('value')+$(this).text());
  307.                 });
  308.                  $('#autorization').submit(function(){
  309.                      $.post('_ajax.php',$(this).serialize(), function(data){
  310.                          if(data == 1){
  311.                              window.location.href = 'http://test1.ru/webplayer/';
  312.                          }
  313.                          else{
  314.                              alert (error);
  315.                          }
  316.                      });
  317.                      return false;
  318.                  });
  319.  
  320.             });
  321.         </script>
  322.         <style>
  323.             #keyboard{
  324.                 list-style: none;
  325.                 display: block;
  326.                 background: #CCC;
  327.                 width: 170px;
  328.                 margin: 0;
  329.                 padding: 0;
  330.                 text-align: center;
  331.             }
  332.             #keyboard li {
  333.                 background: none repeat scroll 0 0 #FFFFFF;
  334.                 border-radius: 10px 10px 10px 10px;
  335.                 display: inline-block;
  336.                 height: 50px;
  337.                 line-height: 50px;
  338.                 width: 50px;
  339.                 margin: 2px;
  340.                 cursor: pointer;
  341.             }
  342.         </style>
  343.                 <a href="?logout=1">Завершить сеанс</a>        <!-- КОНЕЦ АВТОРИЗАЦИИ -->
  344.  
  345.  
  346.  
  347. </div>
  348. </body>
  349. </html>
create a new version of this paste RAW Paste Data