list.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <html>
  2. <head>
  3. <title>gildas.ch</title>
  4. <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  5. <style>
  6. body {
  7. font-family: 'Roboto', sans-serif;
  8. }
  9. h2 {
  10. font-size: 1.2em;
  11. color: #757575;
  12. }
  13. ul {
  14. list-style-type: none;
  15. display: flex;
  16. flex-wrap: wrap;
  17. padding: 0;
  18. }
  19. li {
  20. width: 240px;
  21. height: 400px;
  22. display: grid;
  23. grid-template-rows: 320px 80px;
  24. box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  25. margin: 10px;
  26. }
  27. li .poster {
  28. justify-self: center;
  29. align-self: center;
  30. }
  31. li .metadata {
  32. padding: 10px;
  33. }
  34. li img {
  35. max-width: 240px;
  36. max-height: 320px;
  37. }
  38. h3 {
  39. margin-bottom: 5px;
  40. margin-top: 5px;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. {{ range $e := .Errors }}
  46. <div class="error">{{ $e }}</div>
  47. {{ end }}
  48. <h2>Movies</h2>
  49. <ul>
  50. {{ range $m := .Collection.Movies }}
  51. <li>
  52. <div class="poster">
  53. <img src="{{ $m.Poster }}" title="{{ $m.Title }}" alt="{{ $m.Title }}" />
  54. </div>
  55. <div class="metadata">
  56. <h3>{{ $m.Title }}</h3>
  57. <div>{{ $m.Director }}</div>
  58. </div>
  59. </li>
  60. {{ end }}
  61. </ul>
  62. <h2>Add a movie</h2>
  63. <div>
  64. <form method="get">
  65. <p>
  66. Search by IMDB id: <input type="text" name="imdb_id" value="{{ .IMDBID }}" />
  67. <input type="submit" />
  68. </p>
  69. </form>
  70. <form method="post" action="/">
  71. <p>Add OMBD JSON movie:<br />
  72. <textarea name="omdb_json" style="width:500px;height:140px;">{{ .OMDBString }}</textarea>
  73. <input type="submit" />
  74. </p>
  75. </form>
  76. </div>
  77. </body>
  78. </html>