80 lines
5.1 KiB
HTML
80 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{.metaTitle}}</title>
|
|
{{template "seoCommon" .}}
|
|
<link rel="stylesheet" href="/static/css/base.css">
|
|
<link rel="stylesheet" href="/static/css/profile.css?v=9">
|
|
<link rel="stylesheet" href="/static/css/profile-mobile.css?v=5">
|
|
<link rel="stylesheet" href="/static/css/history.css?v=4">
|
|
<link rel="stylesheet" href="/static/css/history-mobile.css?v=7">
|
|
<link rel="stylesheet" href="/static/css/account-empty.css?v=2">
|
|
</head>
|
|
<body class="profile-page history-page">
|
|
{{template "header" .}}
|
|
{{template "userCenterHero" .}}
|
|
{{template "userCenterTabs" .}}
|
|
<main class="history-main{{if not .groups}} is-empty{{end}}" data-history>
|
|
<h1 class="visually-hidden">观看历史</h1>
|
|
<div class="history-toolbar">
|
|
<div class="history-filters" role="group" aria-label="观看历史筛选">
|
|
<button class="history-filter is-active" type="button" data-history-filter="all" aria-pressed="true">全部</button>
|
|
<button class="history-filter" type="button" data-history-filter="short" aria-pressed="false">短剧</button>
|
|
<button class="history-filter" type="button" data-history-filter="series" aria-pressed="false">视频</button>
|
|
</div>
|
|
{{if .groups}}
|
|
<button class="history-clear" type="button" data-history-clear>
|
|
<img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/close.svg" alt="关闭">
|
|
<span class="history-clear__desktop">清空历史</span>
|
|
<span class="history-clear__mobile">清空</span>
|
|
</button>
|
|
{{end}}
|
|
</div>
|
|
{{range .groups}}
|
|
<section class="history-group" data-history-group>
|
|
<h2 class="history-group__title">{{.Title}}</h2>
|
|
<div class="history-list">
|
|
{{range .Entries}}
|
|
<article class="history-item" data-history-item data-kind="{{.Kind}}"{{if .ID}} data-id="{{.ID}}"{{end}}>
|
|
{{if .URL}}<a class="history-item__cover" href="{{.URL}}" {{externalLinkAttrs .URL}} aria-label="继续观看{{.Title}}">{{else}}<div class="history-item__cover">{{end}}
|
|
<img decoding="async" class="history-item__image lazy" src="/static/images/placeholder.png?v=2" data-src="{{.Image}}" alt="{{.Title}}" loading="lazy">
|
|
{{if .URL}}</a>{{else}}</div>{{end}}
|
|
<div class="history-item__body">
|
|
<h3 class="history-item__title">{{if .URL}}<a href="{{.URL}}" {{externalLinkAttrs .URL}}>{{.Title}}</a>{{else}}{{.Title}}{{end}}</h3>
|
|
<div class="history-item__details">
|
|
<span class="history-item__episodes">{{if .EpisodeText}}{{.EpisodeText}}{{else if .Current}}看至第 {{.Current}} 集{{else}}观看记录{{end}}{{if and (not .EpisodeText) .Total}} / 共 {{.Total}} 集{{end}}</span>
|
|
{{if .Genre}}<span class="history-item__genre">{{.Genre}}</span>{{end}}
|
|
<span class="history-item__mobile-time">{{.Time}}</span>
|
|
</div>
|
|
{{if .Progress}}<span class="history-item__progress"><span class="history-item__progress-fill" style="width:{{.Progress}}"></span></span>{{end}}
|
|
</div>
|
|
<span class="history-item__time">{{.Time}}</span>
|
|
{{if .URL}}<a class="history-item__resume" href="{{.URL}}" {{externalLinkAttrs .URL}} aria-label="继续观看{{.Title}}">
|
|
<img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/play_hollow.svg" alt="播放">
|
|
<span class="history-item__resume-desktop">继续观看</span><span class="history-item__resume-mobile">继续</span>
|
|
</a>{{end}}
|
|
<button class="history-item__remove" type="button" data-history-remove aria-label="移除{{.Title}}">
|
|
<img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/close.svg" alt="关闭">
|
|
</button>
|
|
</article>
|
|
{{end}}
|
|
</div>
|
|
</section>
|
|
{{end}}
|
|
<section class="account-empty" data-history-empty{{if .groups}} hidden{{end}} aria-labelledby="history-empty-title">
|
|
<span class="account-empty__icon" aria-hidden="true"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/play_hollow.svg" alt="播放"></span>
|
|
<h2 class="account-empty__title" id="history-empty-title">{{if .historyUnavailable}}观看记录暂时无法加载{{else}}暂无观看记录{{end}}</h2>
|
|
{{if not .historyUnavailable}}
|
|
<p class="account-empty__description"><span class="account-empty__description-desktop">你观看过的短剧会显示在这里</span><span class="account-empty__description-mobile">观看过的短剧会显示在这里</span></p>
|
|
<a class="account-empty__action" href="/"><img decoding="async" loading="lazy" src="/static/images/placeholder.png?v=2" data-src="/static/images/favorites-empty/arrow-right.svg" alt="前往首页">去首页逛逛</a>
|
|
{{end}}
|
|
</section>
|
|
{{template "accountPagination" .}}
|
|
</main>
|
|
{{template "footer" .}}
|
|
<script src="/static/js/history.js?v=6" defer></script>
|
|
</body>
|
|
</html>
|