pcgamedb/server/templates/game.html

213 lines
5.4 KiB
HTML
Raw Normal View History

2024-11-28 17:04:28 -05:00
{{template "base" .}}
{{define "title"}}{{.Name}} - 游戏详情{{end}}
{{define "styles"}}
2024-11-28 14:53:36 -05:00
<style>
.game-cover {
max-height: 400px;
object-fit: cover;
}
.screenshot-gallery {
height: 600px;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}
.info-label {
font-weight: bold;
color: #666;
}
.download-card {
transition: transform 0.2s;
}
.download-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.tag {
display: inline-block;
padding: 0.25rem 0.5rem;
margin: 0.25rem;
background-color: #f8f9fa;
border-radius: 0.25rem;
font-size: 0.875rem;
}
</style>
2024-11-28 17:04:28 -05:00
{{end}}
{{define "content"}}
2024-11-28 14:53:36 -05:00
<!-- Game Details -->
<div class="container py-4">
<!-- Basic Info -->
<div class="row mb-4">
<div class="col-md-4">
{{if .Cover}}
2024-11-28 17:04:28 -05:00
<img src="{{.Cover}}" class="img-fluid rounded game-cover" alt="{{.Name}}" />
2024-11-28 14:53:36 -05:00
{{else}}
2024-11-28 17:04:28 -05:00
<div class="game-cover bg-secondary d-flex align-items-center justify-content-center rounded">
2024-11-28 14:53:36 -05:00
<span class="text-white">暂无封面</span>
</div>
{{end}}
</div>
<div class="col-md-8">
<h1 class="mb-3">{{.Name}}</h1>
{{if .Aliases}}
<div>
<span class="info-label">别名:</span>
{{range .Aliases}}
<span class="tag">{{.}}</span>
{{end}}
</div>
{{end}}
<div>
<span class="info-label">开发商:</span>
{{range .Developers}}
<span class="tag">{{.}}</span>
{{end}}
</div>
<div>
<span class="info-label">发行商:</span>
{{range .Publishers}}
<span class="tag">{{.}}</span>
{{end}}
</div>
{{if .Languages}}
<div>
<span class="info-label">支持语言:</span>
{{range .Languages}}
<span class="tag">{{.}}</span>
{{end}}
</div>
{{end}} {{if .Description}}
<div>
<p>{{.Description}}</p>
</div>
{{end}} {{if .SteamID}}
<div>
2024-11-28 17:04:28 -05:00
<a href="https://store.steampowered.com/app/{{.SteamID}}" target="_blank" class="btn btn-primary">
2024-11-28 14:53:36 -05:00
在 Steam 上查看
</a>
</div>
{{end}}
</div>
</div>
<!-- Screenshots -->
{{if .Screenshots}}
<div class="mb-4">
<div class="swiper screenshot-gallery">
<div class="swiper-wrapper">
{{range .Screenshots}}
<div class="swiper-slide">
<img src="{{.}}" alt="游戏截图" />
</div>
{{end}}
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
{{end}}
<!-- Download Links -->
{{if .Games}}
<div class="mb-4">
<h3 class="mb-3">下载链接</h3>
<div class="row g-4">
{{range .Games}}
<div class="col-md-6">
<div class="card download-card">
<div class="card-body">
2024-11-28 17:04:28 -05:00
<h5 class="card-title">{{.RawName}}</h5>
2024-11-28 14:53:36 -05:00
{{if .Size}}
2024-11-28 17:04:28 -05:00
<div class="card-text">
2024-11-28 14:53:36 -05:00
<small class="text-muted">文件大小:{{.Size}}</small>
2024-11-28 17:04:28 -05:00
</div>
{{end}}
{{if .Author}}
<div class="card-text">
2024-11-28 14:53:36 -05:00
<small class="text-muted">来源:{{.Author}}</small>
2024-11-28 17:04:28 -05:00
</div>
{{end}}
{{if .Password}}
<div class="card-text">
解压密码:<code>{{.Password}}</code>
</div>
2024-11-28 14:53:36 -05:00
{{end}}
2024-11-28 17:04:28 -05:00
<div class="mt-2 d-flex justify-content-between align-items-center">
<!-- <a href="{{.Download}}" class="btn btn-success" target="_blank">下载</a> -->
<div class="input-group" style="max-width: 300px;">
<input type="text" class="form-control form-control-sm" value="{{.Download}}" readonly>
<button class="btn btn-outline-secondary btn-sm" type="button"
onclick="copyToClipboard(this.previousElementSibling)">
复制
</button>
</div>
<a href="{{.Url}}" class="btn btn-outline-primary" target="_blank">详情页</a>
2024-11-28 14:53:36 -05:00
</div>
</div>
<div class="card-footer text-muted">
更新时间:{{.UpdatedAt.Format "2006-01-02 15:04:05"}}
</div>
</div>
</div>
{{end}}
</div>
</div>
{{end}}
</div>
2024-11-28 17:04:28 -05:00
{{end}}
{{define "scripts"}}
2024-11-28 14:53:36 -05:00
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper(".screenshot-gallery", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
2024-11-28 17:04:28 -05:00
function copyToClipboard(input) {
input.select();
input.setSelectionRange(0, 99999);
navigator.clipboard.writeText(input.value).then(() => {
const button = input.nextElementSibling;
const originalText = button.textContent;
button.textContent = '已复制';
button.classList.remove('btn-outline-secondary');
button.classList.add('btn-success');
setTimeout(() => {
button.textContent = originalText;
button.classList.remove('btn-success');
button.classList.add('btn-outline-secondary');
}, 1500);
}).catch(err => {
console.error('复制失败:', err);
});
}
2024-11-28 14:53:36 -05:00
</script>
2024-11-28 17:04:28 -05:00
{{end}}