YTSFlix_Go/static/movie.html

128 lines
2.5 KiB
HTML
Raw Permalink Normal View History

2018-11-04 14:58:15 +00:00
<!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>