PageRenderTime 57ms CodeModel.GetById 29ms RepoModel.GetById 1ms app.codeStats 0ms

/Bioskop/app/views/movie.html

https://gitlab.com/saleelpk95/Bioskop
HTML | 264 lines | 164 code | 40 blank | 60 comment | 0 complexity | 97f0c91460ae07423b16b9d81ca5eea4 MD5 | raw file
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="description" content="">
  8. <meta name="author" content="">
  9. <title>{{title}}</title>
  10. <!-- Bootstrap Core CSS -->
  11. <link href="../css/bootstrap.min.css" rel="stylesheet">
  12. <!-- Custom CSS -->
  13. <link href="../css/modern-business.css" rel="stylesheet">
  14. <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> -->
  15. <link rel="stylesheet" type="text/css" href="../css/home.css">
  16. <!-- Custom Fonts -->
  17. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  18. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  19. <!--[if lt IE 9]>
  20. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  21. <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  22. <![endif]-->
  23. </head>
  24. <body>
  25. <!-- Navigation -->
  26. <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  27. <div class="container">
  28. <!-- Brand and toggle get grouped for better mobile display -->
  29. <div class="navbar-header">
  30. <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  31. <span class="sr-only">Toggle navigation</span>
  32. <span class="icon-bar"></span>
  33. <span class="icon-bar"></span>
  34. <span class="icon-bar"></span>
  35. </button>
  36. <a class="navbar-brand" href="/" style="font-size: 24px;font-family: 'Purisa';" >Bioskop</a>
  37. </div>
  38. <!-- Collect the nav links, forms, and other content for toggling -->
  39. <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="padding-top: 10px;">
  40. <ul class="nav navbar-nav navbar-right">
  41. <li>
  42. <form action="/" method="get" id="query">
  43. <input type="hidden" name="get_result" value="1">
  44. <input type="hidden" name="tag" value="0">
  45. <input type="text" placeholder="Movies" name="query" id="username" size="20">
  46. <button type="submit" class="btn btn-success btn-sm" form="query" value="Submit">Search</button>
  47. </form>
  48. </li>
  49. <li>
  50. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
  51. </li>
  52. <li>
  53. <form action="/" method="post" id="logout">
  54. <input type="hidden" name="logout" value="1">
  55. <button type="submit" class="btn btn-success btn-sm" form="logout" value="Submit">Logout</button>
  56. </form>
  57. </li>
  58. </ul>
  59. </div>
  60. <!-- /.navbar-collapse -->
  61. </div>
  62. <!-- /.container -->
  63. </nav>
  64. <!-- Page Content -->
  65. <div class="container">
  66. <!-- Page Heading/Breadcrumbs -->
  67. <div class="row">
  68. <div class="col-lg-12">
  69. <h1 class="page-header" style="font-family:'Comic Sans MS';" >{{info.movie}}
  70. </h1>
  71. </div>
  72. </div>
  73. <!-- /.row -->
  74. <!-- Portfolio Item Row -->
  75. <div class="row">
  76. <div class="col-md-3">
  77. {% if info.icon %}
  78. <img src="http://image.tmdb.org/t/p/w185{{info.icon}}" />
  79. {% else %}
  80. <img src="https://s22.postimg.org/tzukkur1d/13045678_1287104944693725_1040959616_n.jpg" />
  81. {% endif %}
  82. </div>
  83. <div class="col-md-9">
  84. <h3 style="font-family:'Comic Sans MS';" >Description</h3>
  85. {% if info.description %}
  86. <p>{{info.description}}</p>
  87. {% else %}
  88. <p>Not Available</p>
  89. {% endif %}
  90. </div>
  91. <div class="col-md-4">
  92. <h3 style="font-family:'Comic Sans MS';" >Genres</h3>
  93. <ul>
  94. {% if genre%}
  95. {% for g in genre %}
  96. <li>{{g}}</li>
  97. {% endfor %}
  98. {% else %}
  99. N/A
  100. {% endif %}
  101. </ul>
  102. <br>
  103. <br>
  104. {% if info.trailer %}
  105. <button class="video-link btn btn-lg btn-primary" data-video-id="{{info.trailer}}">Watch Trailer</button>
  106. {% else %}
  107. <p> <b>Trailer </b>not available </p>
  108. {% endif %}
  109. </div>
  110. <!-- {% if m.trailer %} -->
  111. <!-- {% endif %} -->
  112. <!-- <button></button> -->
  113. <div class="col-md-4">
  114. <h3 style="font-family:'Comic Sans MS';" >Average Rating</h3>
  115. {% if info.rating == -1 %}
  116. <p>Not Available</p>
  117. {% else %}
  118. {% if info.rating == 0 %}
  119. <p>N/A</p>
  120. {% else %}
  121. <p>{{info.rating|number_format(2)}}</p>
  122. {% endif %}
  123. {% endif %}
  124. <br>
  125. {% if rated == true %}
  126. <p> You have already rated this movie! </p>
  127. <p> Feel differently? </p>
  128. {% else %}
  129. <p>Wached it already?<br>Rate the movie</p>
  130. {% endif %}
  131. <form action="/movie/{{info.id}}" method="post" id="rate">
  132. <input type="hidden" name="rate" value="1"></span></td>
  133. <input type="number" name="rating" id="some_id" value="{{my_rate}}" class="rating" />
  134. <button type="submit" class="btn btn-success" form="rate" value="Submit">Rate</button>
  135. </form>
  136. </div>
  137. <!-- <div class="col-md-9">
  138. <br>
  139. <br>
  140. {% if info.trailer %}
  141. <button class="video-link btn btn-lg btn-primary" data-video-id="{{info.trailer}}">Watch Trailer</button>
  142. {% endif %}
  143. </div> -->
  144. </div>
  145. <!-- /.row -->
  146. <!-- Related Projects Row -->
  147. <div class="row">
  148. <div class="col-lg-12">
  149. <h3 class="page-header" style="font-family:'Comic Sans MS';" >Similar Movies</h3>
  150. </div>
  151. <!-- <div class="col-sm-3 col-xs-6">
  152. <a href="#">
  153. <img class="img-responsive img-hover img-related" src="http://placehold.it/500x300" alt="">
  154. </a>
  155. </div>
  156. <div class="col-sm-3 col-xs-6">
  157. <a href="#">
  158. <img class="img-responsive img-hover img-related" src="http://placehold.it/500x300" alt="">
  159. </a>
  160. </div>
  161. <div class="col-sm-3 col-xs-6">
  162. <a href="#">
  163. <img class="img-responsive img-hover img-related" src="http://placehold.it/500x300" alt="">
  164. </a>
  165. </div>
  166. <div class="col-sm-3 col-xs-6">
  167. <a href="#">
  168. <img class="img-responsive img-hover img-related" src="http://placehold.it/500x300" alt="">
  169. </a>
  170. </div> -->
  171. {% for m in similar %}
  172. <div class="col-md-2 col-sm-3">
  173. <div class="thumbnail">
  174. <a href="/movie/{{m.id}}">
  175. {% if m.icon %}
  176. <img class="img-responsive img-portfolio img-hover" src="http://image.tmdb.org/t/p/w185{{m.icon}}" alt="" style="height: 278px;">
  177. {% else %}
  178. <img class="img-responsive img-portfolio img-hover" src="https://s22.postimg.org/tzukkur1d/13045678_1287104944693725_1040959616_n.jpg" alt="" style="height: 278px;">
  179. {% endif %}
  180. </a>
  181. <div class="caption" style="text-overflow: ellipsis; overflow:hidden; white-space:nowrap;">
  182. {{m.movie}}
  183. </div>
  184. </div>
  185. <!-- {{m.movie}} -->
  186. </div>
  187. {% endfor %}
  188. </div>
  189. <!-- /.row -->
  190. <hr>
  191. <!-- Footer -->
  192. <footer>
  193. <div class="row">
  194. <div class="col-lg-12">
  195. <p>Copyright &copy; Suraj Shiva Saleel Punit 2016</p>
  196. </div>
  197. </div>
  198. </footer>
  199. </div>
  200. <!-- /.container -->
  201. <!-- jQuery -->
  202. <!-- Bootstrap Core JavaScript -->
  203. <script src="../js/jquery.js"></script>
  204. <script src="../js/bootstrap.min.js"></script>
  205. </body>
  206. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  207. <script src="../js/videoLightning.js"></script>
  208. <script src="../js/star-rating.min.js"></script>
  209. <script src="../js/bootstrap-rating-input.min.js" type="text/javascript"></script>
  210. <script>
  211. videoLightning({settings: {autoplay: true, color: "white"}, element: ".video-link"});
  212. </script>
  213. <script>
  214. $(function() {
  215. $(".rslides").responsiveSlides();
  216. });
  217. // $("#input-id").rating();
  218. // // with plugin options
  219. // $("#input-id").rating({min:1, max:10, step:2, size:'lg'});
  220. </script>
  221. </html>