Contenido

ViewTube

URI: http://viewtubeproyect.herokuapp.com/es

  1. <!doctype html>
  2.  
  3. <html lang="es">
  4.  
  5. <head>
  6. <meta charset="utf-8">
  7. <title>
  8. ViewTube
  9.  
  10. </title>
  11.  
  12. <link id="cssClaro" href="/css/claro.css" rel="stylesheet"/>
  13. <link
  14. id="cssOscuro" href="/css/oscuro.css" rel="stylesheet" disabled/>
  15.  
  16. <!-- Bootstrap -->
  17. <link
  18. href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  19.  
  20. <!-- Favicon (Logo en <title>) -->
  21.  
  22. </head>
  23.  
  24. <body>
  25. <header>
  26. <div class="row">
  27. <div id="tituloCabecera" class="col-5 col-xl-3">
  28. <a href="/es"><img id="logo" class="img-fluid" src="/images/icons/logo.png" alt="Logo"></a>
  29. <h1>
  30. <a href="/es">ViewTube</a>
  31. </h1>
  32. </div>
  33. <div class="col-5 col-xl-8">
  34. <div class="input-group">
  35. <form id="buscador" method="post">
  36. <input title="Buscador" name="textTitulo" type="text" class="form-control" aria-describedby="buscar">
  37. <button onclick="this.form.submit()" onchange="this.form.submit()" class="btn" type="button" id="buscar">Buscar</button>
  38. </form>
  39. </div>
  40. </div>
  41. <div id="menus" class="col-2 col-xl-1">
  42. <div class="dropdown">
  43. <img id="avatar" class="dropdown-toggle img-thumbnail" src="/images/avatares/sinFoto.png" type="button" data-bs-toggle="dropdown" aria-expanded="false" alt="Avatar por defecto">
  44. <ul id="dropdownMenu" class="dropdown-menu" aria-labelledby="menuAvatar">
  45. <li>
  46. <a href="/es/login" class="dropdown-item" >Iniciar sesión</a>
  47. </li>
  48. <li><hr class="dropdown-divider"></li>
  49. <li>
  50. <button id="claro" class="dropdown-item" onclick="cambiarTemaColor('claro')" type="button">
  51. Tema claro </button>
  52. </li>
  53. <li>
  54. <button id="oscuro" class="dropdown-item" onclick="cambiarTemaColor('oscuro')" type="button">
  55. Tema oscuro </button>
  56. </li>
  57. </ul>
  58. </div>
  59. <div class="dropdown">
  60. <button id="idiomaDrop" class="btn btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"></button>
  61. <ul id="dropdownIdioma" class="dropdown-menu" aria-labelledby="idiomaDrop">
  62. <li>
  63. <button class="dropdown-item" onclick="cambiarIdioma('ES')" type="button">ES</button>
  64. </li>
  65. <li>
  66. <button class="dropdown-item" onclick="cambiarIdioma('EN')" type="button">EN</button>
  67. </li>
  68. </ul>
  69. </div>
  70. </div>
  71. </div>
  72. </header>
  73.  
  74. <div id="container"> <div id="content" class="row">
  75. <div id="lateralIzquierdo" class="col-12 col-xl-2">
  76. <div class="row">
  77. <div class="col-4 col-xl-12">
  78. <div class="m-3">
  79. <form method="post">
  80. <label class="form-label" for="selCategoria">Categoría</label>
  81. <select title="Categorias" class="form-select mt-2" name="selCategoria" onchange="this.form.submit()">
  82. <option value="">Seleccione...</option>
  83. <option value="0">Ninguna</option>
  84. <option value="1">Naturaleza</option>
  85. <option value="2">Animales</option>
  86. <option value="3">Ciudad</option>
  87. </select>
  88. </form>
  89. </div>
  90. </div>
  91. <div class="col-4 col-xl-12">
  92. <div class="m-3">
  93. <form method="post">
  94. <label class="form-label" for="inputFecha">Fecha</label>
  95. <input onchange="this.form.submit()" class="form-control" type="date" name="inputFecha" value="" min="2021-09-15">
  96. </form>
  97. </div>
  98. </div>
  99. <div class="col-4 col-xl-12">
  100. <div class="m-3">
  101. <form method="post">
  102. <label class="form-label" for="ordenFecha">Ordenar por fecha</label>
  103. <select title="Orden por fecha" class="form-select mt-2" name="ordenFecha" onchange="this.form.submit()">
  104. <option value="">Seleccione...</option>
  105. <option value="ASC">Ascendente</option>
  106. <option value="DESC">Descendente</option>
  107. </select>
  108. </form>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113.  
  114. <div id="main" class="col-12 col-xl-10">
  115. <ul id="listaVideos" class="listaVideos">
  116. <div class="row justify-content-center justify-content-xl-start">
  117. <div class="col-10 col-xl-4">
  118. <li class='bloqueVideo'>
  119. <div class="row">
  120. <div class="col">
  121. <a href='/es/video/6'><img id="video" src="/images/thumbnailsVideos/thumbnailVideo-6.jpg" alt="Thumbnail video 6"/></a>
  122. </div>
  123. </div>
  124. <div class="row">
  125. <div class="col">
  126. <h3 id="tituloVideo">
  127. <a href='/es/video/6'>Mirada felina</a>
  128. </h3>
  129. </div>
  130. </div>
  131. <div class="row">
  132. <div class="col">
  133. <a id="nickUsuario" href="/es/perfil/1">ViewTube</a>
  134. </div>
  135. </div>
  136. <div class="row">
  137. <div class="col">
  138. 16-11-2021 17:09
  139. </div>
  140. </div>
  141. <div class="row">
  142. <div class="col">
  143. 0
  144. comentarios </div>
  145. </div>
  146. </li>
  147. </div>
  148. <div class="col-10 col-xl-4">
  149. <li class='bloqueVideo'>
  150. <div class="row">
  151. <div class="col">
  152. <a href='/es/video/5'><img id="video" src="/images/thumbnailsVideos/thumbnailVideo-5.jpg" alt="Thumbnail video 5"/></a>
  153. </div>
  154. </div>
  155. <div class="row">
  156. <div class="col">
  157. <h3 id="tituloVideo">
  158. <a href='/es/video/5'>Bullicio de autos</a>
  159. </h3>
  160. </div>
  161. </div>
  162. <div class="row">
  163. <div class="col">
  164. <a id="nickUsuario" href="/es/perfil/1">ViewTube</a>
  165. </div>
  166. </div>
  167. <div class="row">
  168. <div class="col">
  169. 15-11-2021 18:12
  170. </div>
  171. </div>
  172. <div class="row">
  173. <div class="col">
  174. 0
  175. comentarios </div>
  176. </div>
  177. </li>
  178. </div>
  179. <div class="col-10 col-xl-4">
  180. <li class='bloqueVideo'>
  181. <div class="row">
  182. <div class="col">
  183. <a href='/es/video/4'><img id="video" src="/images/thumbnailsVideos/thumbnailVideo-4.jpg" alt="Thumbnail video 4"/></a>
  184. </div>
  185. </div>
  186. <div class="row">
  187. <div class="col">
  188. <h3 id="tituloVideo">
  189. <a href='/es/video/4'>Anochecer en la costa</a>
  190. </h3>
  191. </div>
  192. </div>
  193. <div class="row">
  194. <div class="col">
  195. <a id="nickUsuario" href="/es/perfil/1">ViewTube</a>
  196. </div>
  197. </div>
  198. <div class="row">
  199. <div class="col">
  200. 15-11-2021 18:11
  201. </div>
  202. </div>
  203. <div class="row">
  204. <div class="col">
  205. 0
  206. comentarios </div>
  207. </div>
  208. </li>
  209. </div>
  210. </div>
  211. <div class="row justify-content-center justify-content-xl-start">
  212. <div class="col-10 col-xl-4">
  213. <li class='bloqueVideo'>
  214. <div class="row">
  215. <div class="col">
  216. <a href='/es/video/3'><img id="video" src="/images/thumbnailsVideos/thumbnailVideo-3.jpg" alt="Thumbnail video 3"/></a>
  217. </div>
  218. </div>
  219. <div class="row">
  220. <div class="col">
  221. <h3 id="tituloVideo">
  222. <a href='/es/video/3'>Vaca pastando</a>
  223. </h3>
  224. </div>
  225. </div>
  226. <div class="row">
  227. <div class="col">
  228. <a id="nickUsuario" href="/es/perfil/1">ViewTube</a>
  229. </div>
  230. </div>
  231. <div class="row">
  232. <div class="col">
  233. 15-11-2021 18:06
  234. </div>
  235. </div>
  236. <div class="row">
  237. <div class="col">
  238. 0
  239. comentarios </div>
  240. </div>
  241. </li>
  242. </div>
  243. <div class="col-10 col-xl-4">
  244. <li class='bloqueVideo'>
  245. <div class="row">
  246. <div class="col">
  247. <a href='/es/video/2'><img id="video" src="/images/thumbnailsVideos/thumbnailVideo-2.jpg" alt="Thumbnail video 2"/></a>
  248. </div>
  249. </div>
  250. <div class="row">
  251. <div class="col">
  252. <h3 id="tituloVideo">
  253. <a href='/es/video/2'>Lago en la montaña</a>
  254. </h3>
  255. </div>
  256. </div>
  257. <div class="row">
  258. <div class="col">
  259. <a id="nickUsuario" href="/es/perfil/1">ViewTube</a>
  260. </div>
  261. </div>
  262. <div class="row">
  263. <div class="col">
  264. 01-11-2021 21:20
  265. </div>
  266. </div>
  267. <div class="row">
  268. <div class="col">
  269. 0
  270. comentarios </div>
  271. </div>
  272. </li>
  273. </div>
  274. <div class="col-10 col-xl-4">
  275. <li class='bloqueVideo'>
  276. <div class="row">
  277. <div class="col">
  278. <a href='/es/video/1'><img id="video" src="/images/thumbnailsVideos/thumbnailVideo-1.jpg" alt="Thumbnail video 1"/></a>
  279. </div>
  280. </div>
  281. <div class="row">
  282. <div class="col">
  283. <h3 id="tituloVideo">
  284. <a href='/es/video/1'>Lago en el valle</a>
  285. </h3>
  286. </div>
  287. </div>
  288. <div class="row">
  289. <div class="col">
  290. <a id="nickUsuario" href="/es/perfil/1">ViewTube</a>
  291. </div>
  292. </div>
  293. <div class="row">
  294. <div class="col">
  295. 01-11-2021 20:17
  296. </div>
  297. </div>
  298. <div class="row">
  299. <div class="col">
  300. 1
  301. comentarios </div>
  302. </div>
  303. </li>
  304. </div>
  305. </div>
  306. <div class="row justify-content-center justify-content-xl-start">
  307. </div>
  308. </ul>
  309. </div>
  310. </div>
  311. <span></span>
  312. </div>
  313.  
  314. <footer>Copyright ©
  315. 2021
  316. <span>
  317. <a href='/es'>ViewTube</a>
  318. </span>
  319. </footer>
  320.  
  321. <!-- Bootstrap -->
  322. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  323.  
  324. <!-- Mis scripts -->
  325. <script src="/js/menuBase.js"></script>
  326. </body>
  327. </html>
  328.