index.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE html>
  2. <head>
  3. <meta charset="utf-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  5. <title>Daveo Radio</title>
  6. <meta name="description" content="">
  7. <meta name="viewport" content="width=device-width">
  8. <link rel="stylesheet" href="css/style.min.css">
  9. </head>
  10. <body>
  11. <div class="container">
  12. <div class="col-lg-6 text-center">
  13. <section id="audo" class="bg-light-gray">
  14. </section>
  15. </div>
  16. </div>
  17. <div class="container">
  18. <div class="col-lg-6 text-center">
  19. <section id="request-line" class="bg-light-gray">
  20. <div class="row-fluid">
  21. <div class="span12 well" style="background-color:white; border:0px">
  22. <!-- Tabs -->
  23. <div class="row-fluid">
  24. <div class="span12">
  25. <ul id="rooms_tabs" class="nav nav-tabs">
  26. <li class="dropdown">
  27. <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-th"></i>&nbsp;Options&nbsp;<b class="caret"></b></a>
  28. <ul class="dropdown-menu">
  29. <li><a href="#modal_joinroom" data-toggle="modal"><i class="icon-plus"></i>&nbsp;Join room</a></li>
  30. <li><a id="b_leave_room" href="#"><i class="icon-minus"></i>&nbsp;Leave current room</a></li>
  31. <li class="divider"></li>
  32. <li><a href="#modal_setnick" data-toggle="modal"><i class="icon-user"></i>&nbsp;Set nickname</a></li>
  33. </ul>
  34. </li>
  35. <li id="MainRoom_tab" class="active"><a href="#MainRoom" data-toggle="tab">MainRoom</a></li>
  36. </ul>
  37. </div>
  38. </div>
  39. <div id="rooms" class="tab-content">
  40. <div class="tab-pane active" id="MainRoom">
  41. <div class="row-fluid">
  42. <div class="span12 well">
  43. <div id="room_messages" style="min-height:220px; max-height:220px; overflow:auto;">
  44. <span class="label label-info">ServerBot</span>&nbsp;&nbsp;Welcome to the room :)<br/>
  45. </div>
  46. </div>
  47. </div>
  48. <div class="row-fluid">
  49. <div class="span12">
  50. <h3>Now chatting...</h3>
  51. </div>
  52. </div>
  53. <div class="row-fluid">
  54. <div id="room_users" class="span12">
  55. <span class="badge badge-inverse">ServerBot</span>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="row-fluid">
  63. <div class="span12">
  64. <div class="navbar">
  65. <div class="navbar-inner">
  66. <form class="navbar-form">
  67. <input id="message_text" type="text" class="span9">
  68. <button id="b_send_message" class="btn btn-primary">Send</button>
  69. </form>
  70. </div>
  71. </div>
  72. </div>
  73. </div>
  74. <div id="modal_joinroom" class="modal hide fade">
  75. <div class="modal-header">
  76. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  77. <h3>Join room</h3>
  78. </div>
  79. <div class="modal-body">
  80. <input id="room_name" type="text" class="input-xlarge" placeholder="Room name">
  81. <p><small>Room will be created if it doesn't exist</small></p>
  82. </div>
  83. <div class="modal-footer">
  84. <a id="b_join_room" href="#" class="btn btn-primary">Join now</a>
  85. </div>
  86. </div>
  87. <div id="modal_setnick" class="modal hide fade">
  88. <div class="modal-header">
  89. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  90. <h3>Set nickname</h3>
  91. </div>
  92. <div class="modal-body">
  93. <input id="nickname" type="text" class="input-xlarge" placeholder="Type your nickname here">
  94. <p><small>Pick up something more cool than anonymous :)</small></p>
  95. </div>
  96. <div class="modal-footer">
  97. <a id="b_set_nickname" href="#" class="btn btn-primary">Set nickname</a>
  98. </div>
  99. </div>
  100. </section>
  101. </div>
  102. </div>
  103. <script src="js/vendor.min.js"></script>
  104. <script src="/socket.io/socket.io.js"></script>
  105. <script src="js/radio.min.js"></script>
  106. </body>
  107. </html>