c586ddc868
- Обновлен CLAUDE.md с добавлением принципов качества кода - Расширен interaction-integrity-rules.md новыми правилами взаимодействия - Дополнен rules-complete.md техническими требованиями - Добавлен демо-компонент вариантов кнопки "Назад" в UI Kit - Обновлены компоненты админ панели и страницы создания расходников - Уточнены visual-design-rules.md для компонента BackButton - Исправлены ESLint ошибки и предупреждения 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
263 lines
14 KiB
HTML
263 lines
14 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>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<style>
|
||
body {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
min-height: 100vh;
|
||
}
|
||
.glass {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(16px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
.sidebar-mock {
|
||
width: 240px;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
.block-mock {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
backdrop-filter: blur(16px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
border-radius: 16px;
|
||
height: 180px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="p-8 text-white">
|
||
<h1 class="text-3xl font-bold mb-8 text-center">Варианты размещения кнопки "Назад"</h1>
|
||
|
||
<!-- ВАРИАНТ 1: ПЛАВАЮЩАЯ КНОПКА СЛЕВА -->
|
||
<div class="mb-12">
|
||
<h2 class="text-xl font-semibold mb-4">🌟 Вариант 1: Плавающая кнопка слева</h2>
|
||
<div class="flex gap-4 h-48">
|
||
<!-- Sidebar Mock -->
|
||
<div class="sidebar-mock rounded-2xl p-4 flex flex-col">
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-8 h-8 bg-purple-500 rounded-full"></div>
|
||
<span class="text-sm">Rennel</span>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<div class="text-sm opacity-60">Главная</div>
|
||
<div class="text-sm opacity-60">Маркет</div>
|
||
<div class="text-sm opacity-60">Мессенджер</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Floating Back Button -->
|
||
<div class="relative">
|
||
<button class="absolute left-0 top-6 z-10 w-8 h-8 glass rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 hover:bg-white/20 group">
|
||
<svg class="h-4 w-4 text-white/70 group-hover:text-white group-hover:h-5 group-hover:w-5 transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Block 1 Mock -->
|
||
<div class="flex-1 block-mock p-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<svg class="h-5 w-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||
</svg>
|
||
<h2 class="text-lg font-semibold">Поставщики</h2>
|
||
</div>
|
||
<div class="w-64 glass rounded-full px-3 py-1.5 text-sm">
|
||
<span class="text-white/60">Поиск поставщиков...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ВАРИАНТ 2: ПОЛОСА НАВИГАЦИИ СВЕРХУ -->
|
||
<div class="mb-12">
|
||
<h2 class="text-xl font-semibold mb-4">📍 Вариант 2: Полоса навигации сверху</h2>
|
||
<div class="flex gap-4">
|
||
<!-- Sidebar Mock -->
|
||
<div class="sidebar-mock rounded-2xl p-4 flex flex-col h-48">
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-8 h-8 bg-purple-500 rounded-full"></div>
|
||
<span class="text-sm">Rennel</span>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<div class="text-sm opacity-60">Главная</div>
|
||
<div class="text-sm opacity-60">Маркет</div>
|
||
<div class="text-sm opacity-60">Мессенджер</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Content Area -->
|
||
<div class="flex-1">
|
||
<!-- Navigation Bar -->
|
||
<div class="flex items-center justify-start mb-4">
|
||
<button class="w-6 h-6 hover:w-8 hover:h-8 bg-gradient-to-r from-purple-500/20 to-blue-500/20 hover:from-purple-500/40 hover:to-blue-500/40 rounded-full flex items-center justify-center transition-all duration-300 backdrop-blur-sm border border-white/10 hover:border-white/30 group">
|
||
<svg class="h-3 w-3 group-hover:h-4 group-hover:w-4 text-white/60 group-hover:text-white transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Block 1 Mock -->
|
||
<div class="block-mock p-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<svg class="h-5 w-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||
</svg>
|
||
<h2 class="text-lg font-semibold">Поставщики</h2>
|
||
</div>
|
||
<div class="w-64 glass rounded-full px-3 py-1.5 text-sm">
|
||
<span class="text-white/60">Поиск поставщиков...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ВАРИАНТ 3: КНОПКА В РАЗРЫВЕ -->
|
||
<div class="mb-12">
|
||
<h2 class="text-xl font-semibold mb-4">🎯 Вариант 3: Кнопка в разрыве</h2>
|
||
<div class="flex gap-4 h-48 relative">
|
||
<!-- Sidebar Mock -->
|
||
<div class="sidebar-mock rounded-2xl p-4 flex flex-col">
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-8 h-8 bg-purple-500 rounded-full"></div>
|
||
<span class="text-sm">Rennel</span>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<div class="text-sm opacity-60">Главная</div>
|
||
<div class="text-sm opacity-60">Маркет</div>
|
||
<div class="text-sm opacity-60">Мессенджер</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Button in Gap -->
|
||
<div class="w-0 flex items-center justify-center relative">
|
||
<button class="absolute w-10 h-10 glass rounded-xl hover:bg-white/15 flex items-center justify-center transition-all duration-500 hover:scale-125 hover:rotate-12 hover:border-purple-400/50 group backdrop-blur-md">
|
||
<svg class="h-4 w-4 text-white/50 group-hover:text-purple-300 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Block 1 Mock -->
|
||
<div class="flex-1 block-mock p-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<svg class="h-5 w-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||
</svg>
|
||
<h2 class="text-lg font-semibold">Поставщики</h2>
|
||
</div>
|
||
<div class="w-64 glass rounded-full px-3 py-1.5 text-sm">
|
||
<span class="text-white/60">Поиск поставщиков...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ВАРИАНТ 4: BREADCRUMB СТИЛЬ -->
|
||
<div class="mb-12">
|
||
<h2 class="text-xl font-semibold mb-4">🍞 Вариант 4: Breadcrumb стиль</h2>
|
||
<div class="flex gap-4">
|
||
<!-- Sidebar Mock -->
|
||
<div class="sidebar-mock rounded-2xl p-4 flex flex-col h-48">
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-8 h-8 bg-purple-500 rounded-full"></div>
|
||
<span class="text-sm">Rennel</span>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<div class="text-sm opacity-60">Главная</div>
|
||
<div class="text-sm opacity-60">Маркет</div>
|
||
<div class="text-sm opacity-60">Мессенджер</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Content Area -->
|
||
<div class="flex-1">
|
||
<!-- Breadcrumb -->
|
||
<div class="flex items-center gap-2 mb-2 pl-2">
|
||
<button class="p-1 hover:p-2 bg-white/0 hover:bg-white/10 rounded-lg transition-all duration-300 group">
|
||
<svg class="h-3 w-3 group-hover:h-4 group-hover:w-4 text-white/40 group-hover:text-white transition-all" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||
</svg>
|
||
</button>
|
||
<span class="text-white/20 text-sm">•</span>
|
||
<span class="text-white/60 text-sm">Поставщики</span>
|
||
</div>
|
||
|
||
<!-- Block 1 Mock -->
|
||
<div class="block-mock p-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<svg class="h-5 w-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||
</svg>
|
||
<h2 class="text-lg font-semibold">Поставщики</h2>
|
||
</div>
|
||
<div class="w-64 glass rounded-full px-3 py-1.5 text-sm">
|
||
<span class="text-white/60">Поиск поставщиков...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ВАРИАНТ 5: ВЕРТИКАЛЬНАЯ ПАНЕЛЬ -->
|
||
<div class="mb-12">
|
||
<h2 class="text-xl font-semibold mb-4">🔥 Вариант 5: Вертикальная панель</h2>
|
||
<div class="flex gap-4 h-48">
|
||
<!-- Sidebar Mock -->
|
||
<div class="sidebar-mock rounded-2xl p-4 flex flex-col">
|
||
<div class="flex items-center gap-3 mb-6">
|
||
<div class="w-8 h-8 bg-purple-500 rounded-full"></div>
|
||
<span class="text-sm">Rennel</span>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<div class="text-sm opacity-60">Главная</div>
|
||
<div class="text-sm opacity-60">Маркет</div>
|
||
<div class="text-sm opacity-60">Мессенджер</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Vertical Panel -->
|
||
<div class="w-8 flex flex-col items-center py-4">
|
||
<button class="w-6 h-6 hover:w-7 hover:h-7 bg-gradient-to-b from-purple-500/10 to-transparent hover:from-purple-500/30 hover:to-purple-400/10 rounded-full flex items-center justify-center transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20 group">
|
||
<svg class="h-3 w-3 group-hover:h-4 group-hover:w-4 text-white/50 group-hover:text-purple-300 transition-all duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Block 1 Mock -->
|
||
<div class="flex-1 block-mock p-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<svg class="h-5 w-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||
</svg>
|
||
<h2 class="text-lg font-semibold">Поставщики</h2>
|
||
</div>
|
||
<div class="w-64 glass rounded-full px-3 py-1.5 text-sm">
|
||
<span class="text-white/60">Поиск поставщиков...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center text-white/60 mt-8">
|
||
<p>Наведите курсор на кнопки для просмотра hover эффектов</p>
|
||
</div>
|
||
</body>
|
||
</html> |