Update frontend to dark obsidian theme
This commit is contained in:
Dmitry Belan
@@ -1,14 +1,70 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<html class="dark h-full" lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>{% block title %}ЕГЭ LMS{% endblock %}</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<!-- Google Fonts: Space Grotesk, Plus Jakarta Sans, JetBrains Mono -->
|
||||
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
||||
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet"/>
|
||||
<!-- Tailwind CSS v3 with forms and container-queries -->
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
darkMode: 'class',
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
obsidian: {
|
||||
base: '#11131b',
|
||||
deep: '#0c0e16',
|
||||
card: '#191b23',
|
||||
border: '#2e313c',
|
||||
borderLight: '#3b3f4d',
|
||||
},
|
||||
accent: {
|
||||
blue: '#2563eb',
|
||||
blueHover: '#1d4ed8',
|
||||
blueSubtle: 'rgba(37, 99, 235, 0.12)',
|
||||
blueBorder: '#3b82f6',
|
||||
},
|
||||
status: {
|
||||
emerald: '#10b981',
|
||||
emeraldBg: 'rgba(16, 185, 129, 0.12)',
|
||||
amber: '#f59e0b',
|
||||
amberBg: 'rgba(245, 158, 11, 0.12)',
|
||||
rose: '#ef4444',
|
||||
roseBg: 'rgba(239, 68, 68, 0.12)',
|
||||
},
|
||||
txt: {
|
||||
primary: '#f1f5f9',
|
||||
secondary: '#cbd5e1',
|
||||
muted: '#94a3b8',
|
||||
faint: '#64748b'
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['"Space Grotesk"', 'sans-serif'],
|
||||
body: ['"Plus Jakarta Sans"', 'sans-serif'],
|
||||
mono: ['"JetBrains Mono"', 'monospace'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; }
|
||||
|
||||
body {
|
||||
background-color: #11131b;
|
||||
color: #f1f5f9;
|
||||
font-family: "Plus Jakarta Sans", sans-serif;
|
||||
}
|
||||
h1, h2, h3, nav button, .font-heading {
|
||||
font-family: "Space Grotesk", sans-serif;
|
||||
}
|
||||
.font-technical {
|
||||
font-family: "JetBrains Mono", monospace;
|
||||
}
|
||||
/* Исправление для картинок из CKEditor: растягиваем по ширине и сохраняем пропорции */
|
||||
.prose img {
|
||||
width: 100% !important;
|
||||
@@ -17,41 +73,91 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-gray-800 antialiased h-screen flex flex-col">
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="bg-white border-b border-gray-200 shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<a href="/" class="flex-shrink-0 flex items-center gap-2">
|
||||
<span class="material-icons text-blue-600">school</span>
|
||||
<span class="font-bold text-xl tracking-tight text-gray-900">ЕГЭ LMS</span>
|
||||
<body class="min-h-full flex flex-col antialiased selection:bg-accent-blue selection:text-white bg-obsidian-base text-txt-primary">
|
||||
|
||||
<!-- BEGIN: MainHeader -->
|
||||
<header class="sticky top-0 z-50 w-full border-b border-obsidian-border bg-obsidian-deep/95 backdrop-blur-md" data-purpose="site-navigation-header">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||
<!-- Brand Identity Logo & Name -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<a href="/" class="flex items-center space-x-3 group">
|
||||
<div class="w-8 h-8 rounded bg-accent-blue flex items-center justify-center text-white group-hover:bg-accent-blueHover transition-colors">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 14l9-5-9-5-9 5 9 5z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
|
||||
<path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-lg font-bold tracking-tight text-white flex items-center gap-1.5 font-heading">
|
||||
ЕГЭ <span class="text-accent-blue font-bold tracking-tight">LMS</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- User Navigation & Controls -->
|
||||
<div class="flex items-center space-x-3 sm:space-x-6">
|
||||
{% if user.is_authenticated %}
|
||||
{% if user.is_staff %}
|
||||
<!-- Admin Panel Link -->
|
||||
<a class="text-xs sm:text-sm font-medium text-txt-muted hover:text-white transition-colors duration-150 flex items-center gap-1.5 py-1 px-2 rounded hover:bg-obsidian-card font-heading" href="{% url 'admin:index' %}">
|
||||
<svg class="w-4 h-4 text-txt-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
|
||||
<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">Админ-панель</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
{% if user.is_authenticated %}
|
||||
{% if user.is_staff %}
|
||||
<a href="{% url 'admin:index' %}" class="text-sm font-medium text-purple-600 hover:text-purple-800 transition">Админ-панель</a>
|
||||
{% endif %}
|
||||
<span class="text-sm text-gray-600">Привет, <b>{{ user.first_name|default:user.username }}</b></span>
|
||||
<form action="{% url 'lms:logout' %}" method="post" class="inline">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="text-sm font-medium text-red-600 hover:text-red-800 transition">Выйти</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a href="{% url 'lms:login' %}" class="text-sm font-medium text-blue-600 hover:text-blue-800 transition">Войти</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- User Profile Pill -->
|
||||
<div class="flex items-center space-x-2 pl-3 border-l border-obsidian-border" data-purpose="user-greeting">
|
||||
<div class="w-6 h-6 rounded bg-obsidian-border text-txt-secondary flex items-center justify-center font-bold text-xs font-mono uppercase">
|
||||
{{ user.first_name.0|default:user.username.0 }}
|
||||
</div>
|
||||
<span class="text-xs sm:text-sm text-txt-muted">
|
||||
Привет, <strong class="text-txt-primary font-semibold font-heading">{{ user.first_name|default:user.username }}</strong>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Logout Action Button -->
|
||||
<form action="{% url 'lms:logout' %}" method="post" class="inline m-0 p-0 flex">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="text-xs sm:text-sm font-medium text-rose-400 hover:text-rose-300 transition-colors duration-150 flex items-center gap-1 py-1 px-2 rounded hover:bg-rose-950/20 font-heading">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path>
|
||||
</svg>
|
||||
<span class="hidden sm:inline">Выйти</span>
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a href="{% url 'lms:login' %}" class="text-xs sm:text-sm font-medium text-accent-blue hover:text-accent-blueHover transition-colors duration-150 flex items-center gap-1.5 py-1 px-3 rounded bg-accent-blue/10 hover:bg-accent-blue/20 font-heading">
|
||||
Войти
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- BEGIN: MainContent -->
|
||||
<main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-10">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
<!-- END: MainContent -->
|
||||
|
||||
<!-- BEGIN: MinimalFooter -->
|
||||
<footer class="mt-auto border-t border-obsidian-border py-5 text-xs text-txt-muted bg-obsidian-deep/50" data-purpose="site-footer">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-mono text-txt-muted text-[11px]">© 2026 ЕГЭ LMS. Все права защищены.</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-6">
|
||||
<span class="inline-flex items-center gap-1.5 text-[11px] font-mono text-txt-secondary">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-status-emerald"></span>
|
||||
Системы работают штатно
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- END: MinimalFooter -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user