137 lines
3.9 KiB
HTML
137 lines
3.9 KiB
HTML
{{template "base" .}}
|
|
|
|
{{define "title"}}GameDB{{end}}
|
|
|
|
{{define "styles"}}
|
|
<style>
|
|
.game-card {
|
|
height: 100%;
|
|
transition: transform 0.2s;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.game-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.game-cover {
|
|
height: 200px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.game-description {
|
|
display: -webkit-box;
|
|
line-clamp: 3;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.col-lg-5-item {
|
|
flex: 0 0 20%;
|
|
max-width: 20%;
|
|
}
|
|
}
|
|
</style>
|
|
{{end}}
|
|
|
|
{{define "content"}}
|
|
<!-- Games Grid -->
|
|
<div class="container py-4">
|
|
<h2 class="mb-4">Month Top</h2>
|
|
<div class="row g-4">
|
|
{{range .MonthTop}}
|
|
<div class="col-12 col-sm-6 col-md-4 col-lg-5-item">
|
|
<a href="/game/{{.ID.Hex}}" class="card game-card">
|
|
{{if .Cover}}
|
|
<img src="{{.Cover}}" class="card-img-top game-cover" alt="{{.Name}}" />
|
|
{{else}}
|
|
<div class="card-img-top game-cover bg-secondary d-flex align-items-center justify-content-center">
|
|
<span class="text-white">No Image</span>
|
|
</div>
|
|
{{end}}
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{.Name}}</h5>
|
|
<p class="card-text game-description">{{.Description}}</p>
|
|
{{if .Publishers}}
|
|
<div class="publishers mb-2">
|
|
<small class="text-muted">Publishers:</small>
|
|
{{range $index, $publisher := .Publishers}} {{if $index}}, {{end}}
|
|
<small class="text-muted">{{$publisher}}</small>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container py-4">
|
|
<h2 class="mb-4">Most Played</h2>
|
|
<div class="row g-4">
|
|
{{range .MostPlayed}}
|
|
<div class="col-12 col-sm-6 col-md-4 col-lg-5-item">
|
|
<a href="/game/{{.ID.Hex}}" class="card game-card">
|
|
{{if .Cover}}
|
|
<img src="{{.Cover}}" class="card-img-top game-cover" alt="{{.Name}}" />
|
|
{{else}}
|
|
<div class="card-img-top game-cover bg-secondary d-flex align-items-center justify-content-center">
|
|
<span class="text-white">No Image</span>
|
|
</div>
|
|
{{end}}
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{.Name}}</h5>
|
|
<p class="card-text game-description">{{.Description}}</p>
|
|
{{if .Publishers}}
|
|
<div class="publishers mb-2">
|
|
<small class="text-muted">Publishers:</small>
|
|
{{range $index, $publisher := .Publishers}} {{if $index}}, {{end}}
|
|
<small class="text-muted">{{$publisher}}</small>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container py-4">
|
|
<h2 class="mb-4">Best of the Year</h2>
|
|
<div class="row g-4">
|
|
{{range .BestOfTheYear}}
|
|
<div class="col-12 col-sm-6 col-md-4 col-lg-5-item">
|
|
<a href="/game/{{.ID.Hex}}" class="card game-card">
|
|
{{if .Cover}}
|
|
<img src="{{.Cover}}" class="card-img-top game-cover" alt="{{.Name}}" />
|
|
{{else}}
|
|
<div class="card-img-top game-cover bg-secondary d-flex align-items-center justify-content-center">
|
|
<span class="text-white">No Image</span>
|
|
</div>
|
|
{{end}}
|
|
<div class="card-body">
|
|
<h5 class="card-title">{{.Name}}</h5>
|
|
<p class="card-text game-description">{{.Description}}</p>
|
|
{{if .Publishers}}
|
|
<div class="publishers mb-2">
|
|
<small class="text-muted">Publishers:</small>
|
|
{{range $index, $publisher := .Publishers}} {{if $index}}, {{end}}
|
|
<small class="text-muted">{{$publisher}}</small>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{define "scripts"}} {{end}} |