init

2018-11-04 15:58:15 +01:00
commit f956bcee28
1178 changed files with 584552 additions and 0 deletions
--- a/static/movie.html
+++ b/static/movie.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{{ .Title }} {{ .Year }}</title>
+    <style>body, html {
+        margin: 0;
+        padding: 0;
+        background: #171618;
+        color: #ecf0f1;
+        font-family: 'Open Sans', sans-serif;
+        width: 100%;
+    }
+
+    .movie-header {
+        display: flex;
+        justify-content: space-around;
+        padding: 16px;
+    }
+
+    .cover {
+        position: relative;
+        text-align: center;
+        margin: 0;
+        padding: 0;
+    }
+
+    .cover:hover .cover-img {
+        opacity: 0.5;
+    }
+
+    .cover:hover .icon-play {
+        opacity: 1;
+    }
+
+    .cover-img {
+        margin: 0;
+        padding: 0;
+    }
+
+    .icon-play {
+        margin: 0;
+        padding: 0;
+        color: white;
+        font-size: 80px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        vertical-align: center;
+        /*left: 50%;*/
+        transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        opacity: 0;
+    }
+
+    .title {
+        flex-grow: 1;
+        flex-basis: 0;
+        padding-left: 16px;
+    }
+
+    iframe {
+        width: 100%;
+        height: auto;
+        flex-grow: 1;
+        flex-basis: 0;
+    }
+
+    section {
+        padding: 16px;
+    }
+
+    .cast {
+        display: flex;
+    }
+    .actor {
+        margin: 10px;
+        width: 80px;
+        height: 120px;
+    }
+    .actor-img {
+        margin: auto;
+        border-radius: 100%;
+    }
+    .actor-name {
+        margin: auto;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+    </style>
+</head>
+<body>
+{{ template "navigation" }}
+<div class="movie-header">
+    <div class="cover">
+        <a href="{{ .Link }}">
+            <img class="cover-img" src="{{ .Cover }}">
+            <p class="icon-play">▶</p>
+        </a>
+    </div>
+    <div class="title">
+        <h1>{{ .Title }} {{ .Year }}</h1>
+        <p>{{ range .Genre }}{{ . }} {{ end }}
+        </p>
+    </div>
+    <iframe
+            src="{{ .Youtube }}" frameborder="0"
+            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+    </iframe>
+</div>
+<section class="details">
+    <h2>Synopsis</h2>
+    <p>{{ .Synopsis }}</p>
+</section>
+<section>
+    <h2>Casting</h2>
+    <div class="cast">
+        {{ range .Casting }}
+        <div class="actor">
+            <img class="actor-img" src="{{ .Image }}">
+            <p class="actor-name">{{ .Name }}</p>
+        </div>
+        {{ end }}
+    </div>
+</section>
+</body>
+</html>