100 lines
3.6 KiB
HTML
100 lines
3.6 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<title>预测历史</title>
|
|
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@700;800&display=swap" rel="stylesheet" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#005EB8',
|
|
primaryDeep: '#0c4188',
|
|
page: '#f3f5f8',
|
|
card: '#ffffff',
|
|
line: '#e5e7eb',
|
|
textMain: '#0f172a',
|
|
textSub: '#64748b',
|
|
blueSoft: '#eaf3ff',
|
|
bluePanel: '#1d4f9a',
|
|
outline: '#c7ced8',
|
|
successSoft: '#e9f8ee',
|
|
successText: '#16a34a',
|
|
warnSoft: '#fff4e8',
|
|
warnText: '#c2410c',
|
|
dangerSoft: '#fff0f0',
|
|
dangerText: '#dc2626',
|
|
lowCard: '#f8fafc'
|
|
},
|
|
fontFamily: {
|
|
headline: ['Manrope', 'Inter', 'sans-serif'],
|
|
body: ['Inter', 'sans-serif']
|
|
},
|
|
boxShadow: {
|
|
soft: '0 24px 24px -12px rgba(24,28,30,.06)',
|
|
card: '0 10px 25px rgba(15, 23, 42, .06)'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
body { font-family: 'Inter', sans-serif; }
|
|
h1, h2, h3, h4 { font-family: 'Manrope', 'Inter', sans-serif; }
|
|
.dot-grid {
|
|
background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,.30) 1.2px, transparent 0);
|
|
background-size: 42px 42px;
|
|
}
|
|
.panel-frame {
|
|
box-shadow: none;
|
|
border: none;
|
|
}
|
|
.gradient-board {
|
|
background: linear-gradient(180deg, #2455a3 0%, #123e7d 100%);
|
|
}
|
|
.spinner {
|
|
width: 18px; height: 18px; border-radius: 9999px;
|
|
border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
|
|
animation: spin .75s linear infinite;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
</style>
|
|
|
|
</head>
|
|
<body class="bg-page min-h-screen p-8 text-textMain">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h1 class="text-3xl font-extrabold">预测历史</h1>
|
|
<a href="{{ url_for('main.home') }}" class="px-4 py-2 rounded-lg border border-slate-200 bg-white">返回主页</a>
|
|
</div>
|
|
<div class="grid gap-4">
|
|
{% for record in records %}
|
|
<div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-card flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div>
|
|
<div class="font-bold">{{ record.original_filename }}</div>
|
|
<div class="text-sm text-textSub mt-1">{{ record.upload_time.strftime('%Y-%m-%d %H:%M:%S') }}</div>
|
|
</div>
|
|
<div class="flex flex-wrap gap-3">
|
|
<a class="px-4 py-2 rounded-lg border border-slate-200 bg-white" href="{{ url_for('main.download_file', record_id=record.id, file_type='original') }}">原始文件</a>
|
|
<a class="px-4 py-2 rounded-lg bg-primary text-white" href="{{ url_for('main.download_file', record_id=record.id, file_type='prediction') }}">预测结果</a>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<div class="bg-white rounded-2xl border border-slate-200 p-10 text-center text-textSub">还没有历史记录。</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|