You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

68 lines
2.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Recent Videos</title>
<style>
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: #fff; }
.thumb { width: 100%; height: auto; border-radius: 6px; display: block; }
.meta { margin-top: 8px; font-size: 14px; line-height: 1.4; }
.meta a { text-decoration: none; color: #0b73ff; }
.pager { margin: 16px 0; display: flex; gap: 8px; justify-content: center; }
.pager a { padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; text-decoration: none; color: #333; }
.pager .current { padding: 6px 10px; border-radius: 6px; background: #eee; }
body {
font-family: Arial, sans-serif;
background: #111;
color: #eee;
text-align: center;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Recent Videos</h1>
<div class="grid">
{% for v in videos %}
<div class="card">
<a href="{{ url_for('web.view_video', video_id=v.video_id) }}">
<img class="thumb"
src="{{ (v.thumbnail or '') | replace('\\','/') }}"
alt="thumb"
onerror="this.style.display='none'">
</a>
<div class="meta">
<div>
<strong><a href="{{ url_for('web.view_video', video_id=v.video_id) }}">{{ v.video_id }}</a></strong>
</div>
<div>
by <a href="{{ url_for('web.user_page', username=v.username) }}">{{ v.username }}</a>
· {{ v.platform }}
</div>
<div>
{{ (v.created_at or v.updated_at) }}
</div>
<div>
{{ "%.1f"|format((v.size or 0)|float) }} MB · {{ v.duration or 0 }}s
</div>
</div>
</div>
{% endfor %}
</div>
<div class="pager">
{% if page > 1 %}
<a href="{{ url_for('web.recent', page=page-1) }}">&laquo; Prev</a>
{% endif %}
<span class="current">Page {{ page }} / {{ total_pages }}</span>
{% if page < total_pages %}
<a href="{{ url_for('web.recent', page=page+1) }}">Next &raquo;</a>
{% endif %}
</div>
</body>
</html>