115 lines
3.5 KiB
HTML
115 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Мои приложения</title>
|
||
|
||
<!-- Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<!-- Google Fonts: Inter -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
|
||
<script>
|
||
tailwind.config = {
|
||
theme: {
|
||
extend: {
|
||
fontFamily: {
|
||
sans: ['Inter', 'ui-sans-serif', 'system-ui'],
|
||
},
|
||
colors: {
|
||
brand: {
|
||
50: '#EFF6FF',
|
||
100: '#DBEAFE',
|
||
500: '#3B82F6',
|
||
600: '#2563EB',
|
||
},
|
||
},
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
body {
|
||
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||
background-color: #F8FAFC;
|
||
}
|
||
|
||
/* Карточка: hover-эффект */
|
||
.app-card {
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||
border: 2px solid transparent;
|
||
}
|
||
.app-card:hover {
|
||
transform: translateY(-4px) scale(1.02);
|
||
box-shadow: 0 12px 32px rgba(59, 130, 246, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
border-color: #3B82F6;
|
||
}
|
||
|
||
/* Аватарка */
|
||
.app-avatar {
|
||
border-radius: 16px;
|
||
width: 80px;
|
||
height: 80px;
|
||
font-size: 36px;
|
||
line-height: 1;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="min-h-screen py-12 px-4">
|
||
|
||
<!-- Header -->
|
||
<header class="text-center mb-12">
|
||
<h1 class="text-3xl font-bold text-slate-900 tracking-tight">Мои приложения</h1>
|
||
<p class="mt-2 text-slate-500 text-sm font-medium">
|
||
{{ count }} активн{{ 'ое' if count == 1 else ('ых' if 2 <= count <= 4 else 'ых') }} приложени{{ 'е' if count == 1 else ('я' if 2 <= count <= 4 else 'й') }}
|
||
</p>
|
||
</header>
|
||
|
||
<!-- Grid -->
|
||
<main class="max-w-5xl mx-auto">
|
||
{% if apps %}
|
||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
||
{% for app in apps %}
|
||
<a
|
||
href="{{ app.url }}"
|
||
class="app-card bg-white rounded-2xl shadow-sm p-6 flex flex-col items-center text-center cursor-pointer no-underline"
|
||
title="{{ app.name }}"
|
||
>
|
||
<!-- Avatar (CSS gradient + icon) -->
|
||
<div
|
||
class="app-avatar mb-4 flex items-center justify-center text-4xl rounded-2xl shadow-lg select-none"
|
||
style="background: {{ app.gradient }};"
|
||
>
|
||
{{ app.icon if app.icon else app.name[0] }}
|
||
</div>
|
||
|
||
<!-- Name -->
|
||
<h2 class="text-slate-900 font-semibold text-base leading-snug mb-1">{{ app.name }}</h2>
|
||
|
||
<!-- Description -->
|
||
<p class="text-slate-500 text-sm leading-relaxed line-clamp-2">{{ app.description }}</p>
|
||
</a>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="text-center py-24">
|
||
<p class="text-slate-400 text-lg">Нет доступных приложений.</p>
|
||
<p class="text-slate-400 text-sm mt-2">Добавьте приложения в <code class="bg-slate-100 px-1 rounded">config/apps.json</code></p>
|
||
</div>
|
||
{% endif %}
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="text-center mt-16 text-slate-400 text-xs">
|
||
<p>apps.mva154.duckdns.org</p>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|