137 lines
9.6 KiB
HTML
137 lines
9.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}发现 - YRTV{% endblock %}
|
|
|
|
{% block content %}
|
|
{% set tone_styles = {
|
|
'positive': 'border-emerald-200 bg-emerald-50 dark:border-emerald-900/50 dark:bg-emerald-950/20',
|
|
'negative': 'border-rose-200 bg-rose-50 dark:border-rose-900/50 dark:bg-rose-950/20',
|
|
'fun': 'border-cyan-200 bg-cyan-50 dark:border-cyan-900/50 dark:bg-cyan-950/20'
|
|
} %}
|
|
{% set tone_badges = {
|
|
'positive': 'bg-emerald-100 text-emerald-700',
|
|
'negative': 'bg-rose-100 text-rose-700',
|
|
'fun': 'bg-cyan-100 text-cyan-700'
|
|
} %}
|
|
{% set medal_styles = {
|
|
'gold': 'from-amber-300 to-yellow-500 text-amber-950',
|
|
'silver': 'from-slate-200 to-slate-400 text-slate-800',
|
|
'bronze': 'from-orange-300 to-amber-700 text-orange-950'
|
|
} %}
|
|
<div class="space-y-10 px-4 sm:px-0">
|
|
<section class="overflow-hidden rounded-3xl bg-gradient-to-br from-slate-950 via-cyan-950 to-yrtv-950 p-8 text-white shadow-2xl">
|
|
<div class="flex flex-col gap-8 lg:flex-row lg:items-end lg:justify-between">
|
|
<div>
|
|
<div class="text-xs font-black uppercase tracking-[0.3em] text-cyan-300">{{ brand.primary }} · Data Discovery</div>
|
|
<h1 class="mt-3 text-4xl font-black">有趣的数据，不只展示好的一面</h1>
|
|
<p class="mt-3 max-w-2xl text-sm leading-7 text-slate-300">从 885 条 roster 比赛记录中自动发现高光、低谷、反差和个人习惯。每张卡片都有统计证据。</p>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-3 text-center">
|
|
{% for label, value in [('发现', insights|length), ('勋章维度', medals|length), ('获奖队员', leaderboard|length)] %}
|
|
<div class="rounded-2xl bg-white/10 px-5 py-3"><div class="text-2xl font-black">{{ value }}</div><div class="text-[10px] uppercase text-slate-400">{{ label }}</div></div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="insights" class="space-y-5">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h2 class="text-2xl font-black text-slate-900 dark:text-white">趣味发现</h2>
|
|
<p class="text-sm text-slate-500">正面、负面和纯粹有趣的数据都保留。</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="{{ url_for('discover.index', dimension=dimension) }}#insights" class="rounded-full px-4 py-2 text-sm font-bold {% if not tone %}bg-slate-900 text-white dark:bg-white dark:text-slate-900{% else %}bg-white text-slate-500 dark:bg-slate-800{% endif %}">全部</a>
|
|
{% for key, label in tone_labels.items() %}
|
|
<a href="{{ url_for('discover.index', tone=key, dimension=dimension) }}#insights" class="rounded-full px-4 py-2 text-sm font-bold {% if tone == key %}{{ tone_badges[key] }}{% else %}bg-white text-slate-500 dark:bg-slate-800{% endif %}">{{ label }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
{% for insight in insights %}
|
|
<article class="rounded-2xl border p-5 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md {{ tone_styles[insight.tone] }}">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<span class="rounded-full px-2.5 py-1 text-[10px] font-black uppercase {{ tone_badges[insight.tone] }}">{{ insight.tone_label }} · {{ insight.category }}</span>
|
|
<h3 class="mt-3 text-xl font-black text-slate-900 dark:text-white">{{ insight.title }}</h3>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-3xl font-black text-slate-900 dark:text-white">
|
|
{% if insight.metric_unit == '%' %}{{ '%.0f'|format(insight.metric_value) }}{% elif insight.metric_value == insight.metric_value|int %}{{ insight.metric_value|int }}{% else %}{{ '%.2f'|format(insight.metric_value) }}{% endif %}<span class="text-sm">{{ insight.metric_unit }}</span>
|
|
</div>
|
|
<div class="text-[10px] uppercase text-slate-400">{{ insight.metric_label }}</div>
|
|
</div>
|
|
</div>
|
|
<p class="mt-4 text-sm leading-6 text-slate-600 dark:text-slate-300">{{ insight.description }}</p>
|
|
<div class="mt-4 flex items-center justify-between border-t border-black/5 pt-3 dark:border-white/10">
|
|
<a href="{{ url_for('players.detail', steam_id=insight.steam_id_64) }}" class="font-bold text-slate-800 hover:text-yrtv-600 dark:text-white">{{ insight.identity.username or insight.steam_id_64 }}</a>
|
|
<span class="text-xs text-slate-400">
|
|
{% if insight.evidence.matches %}{{ insight.evidence.matches }} 场样本{% endif %}
|
|
{% if insight.evidence.map %} · {{ insight.evidence.map }}{% endif %}
|
|
</span>
|
|
</div>
|
|
</article>
|
|
{% else %}
|
|
<div class="col-span-full rounded-2xl bg-white py-16 text-center text-slate-400 dark:bg-slate-800">当前筛选暂无发现</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="medals" class="space-y-5">
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div>
|
|
<h2 class="text-2xl font-black text-slate-900 dark:text-white">表现勋章墙</h2>
|
|
<p class="text-sm text-slate-500">每张地图、每个 ELO 分段按 Rating 评选金银铜，最低 5 场。</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<a href="{{ url_for('discover.index', tone=tone) }}#medals" class="rounded-full px-4 py-2 text-sm font-bold {% if not dimension %}bg-slate-900 text-white dark:bg-white dark:text-slate-900{% else %}bg-white text-slate-500 dark:bg-slate-800{% endif %}">全部</a>
|
|
<a href="{{ url_for('discover.index', tone=tone, dimension='map') }}#medals" class="rounded-full px-4 py-2 text-sm font-bold {% if dimension == 'map' %}bg-yrtv-600 text-white{% else %}bg-white text-slate-500 dark:bg-slate-800{% endif %}">分地图</a>
|
|
<a href="{{ url_for('discover.index', tone=tone, dimension='elo') }}#medals" class="rounded-full px-4 py-2 text-sm font-bold {% if dimension == 'elo' %}bg-yrtv-600 text-white{% else %}bg-white text-slate-500 dark:bg-slate-800{% endif %}">分 ELO</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
|
|
{% for group in medals %}
|
|
<article class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
|
|
<div class="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
|
|
<div>
|
|
<div class="text-[10px] font-black uppercase tracking-wider text-slate-400">{{ 'Map Medal' if group.dimension_type == 'map' else 'ELO Medal' }}</div>
|
|
<h3 class="text-lg font-black text-slate-900 dark:text-white">{{ group.dimension_label }}</h3>
|
|
</div>
|
|
<span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-bold text-slate-500 dark:bg-slate-800">{{ group.medals|length }} medals</span>
|
|
</div>
|
|
<div class="divide-y divide-slate-100 dark:divide-slate-800">
|
|
{% for medal in group.medals %}
|
|
<a href="{{ url_for('players.detail', steam_id=medal.steam_id_64) }}" class="flex items-center gap-4 px-5 py-4 hover:bg-slate-50 dark:hover:bg-slate-800/40">
|
|
<div class="flex h-11 w-11 flex-none items-center justify-center rounded-full bg-gradient-to-br text-lg font-black shadow {{ medal_styles[medal.medal_tier] }}">{{ medal.medal_rank }}</div>
|
|
<div class="min-w-0 flex-1">
|
|
<div class="truncate font-black text-slate-900 dark:text-white">{{ medal.identity.username or medal.steam_id_64 }}</div>
|
|
<div class="text-xs text-slate-400">{{ medal.matches }} 场 · K/D {{ '%.2f'|format(medal.avg_kd) }} · ADR {{ '%.1f'|format(medal.avg_adr) }}</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-xl font-black text-yrtv-600">{{ '%.2f'|format(medal.avg_rating) }}</div>
|
|
<div class="text-[10px] uppercase text-slate-400">{{ '%.0f%%'|format(medal.win_rate * 100) }} win</div>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</article>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="rounded-2xl bg-gradient-to-r from-amber-500 to-orange-600 p-6 text-white shadow-xl">
|
|
<h2 class="text-xl font-black">勋章总榜</h2>
|
|
<div class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
{% for player in leaderboard %}
|
|
<a href="{{ url_for('players.detail', steam_id=player.steam_id_64) }}" class="flex items-center justify-between rounded-xl bg-white/10 p-4 hover:bg-white/20">
|
|
<div><div class="font-black">{{ loop.index }}. {{ player.identity.username or player.steam_id_64 }}</div><div class="mt-1 text-xs text-amber-100">🥇 {{ player.gold }} · 🥈 {{ player.silver }} · 🥉 {{ player.bronze }}</div></div>
|
|
<div class="text-3xl font-black">{{ player.medals }}</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{% endblock %}
|