modified: main_dc/yalarba/easySite/easySite/app/assets/css/components.css
modified: main_dc/yalarba/easySite/easySite/app/assets/css/main.css modified: main_dc/yalarba/easySite/easySite/app/assets/css/travel.css modified: main_dc/yalarba/easySite/easySite/app/assets/css/typography.css modified: main_dc/yalarba/easySite/easySite/app/assets/css/variables.css modified: main_dc/yalarba/easySite/easySite/app/components/layout/Footer.vue modified: main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue new file: main_dc/yalarba/easySite/easySite/app/composables/useTheme.ts modified: main_dc/yalarba/easySite/easySite/app/pages/index.vue new file: main_dc/yalarba/easySite/easySite/app/plugins/theme.client.ts add dark theme for easysite
This commit is contained in:
@@ -166,3 +166,36 @@
|
||||
color: var(--primary-600);
|
||||
background: var(--primary-50);
|
||||
}
|
||||
|
||||
/* Дополнения для темной темы */
|
||||
.form-input,
|
||||
.form-select {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-medium);
|
||||
color: var(--text-primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-select:focus {
|
||||
border-color: var(--primary-500);
|
||||
box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-light);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border-medium);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--primary-500);
|
||||
color: var(--primary-500);
|
||||
}
|
||||
|
||||
@@ -8,27 +8,33 @@
|
||||
--gray-800: #1f2937;
|
||||
--gray-900: #111827;
|
||||
--white: #ffffff;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
transition: color 0.3s ease, background-color 0.3s ease,
|
||||
border-color 0.3s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--gray-900);
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-primary);
|
||||
transition: color 0.3s ease, background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Обновляем остальные стили для поддержки темы */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* Базовые компоненты */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
@@ -37,21 +43,24 @@ body {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: var(--white);
|
||||
background: var(--primary-500);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-dark);
|
||||
background: var(--primary-600);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--white);
|
||||
background: var(--bg-primary);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--border-light);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@@ -1,14 +1,18 @@
|
||||
/* assets/css/travel.css */
|
||||
/* Герой-секция с фоном */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-500) 0%,
|
||||
var(--primary-700) 100%
|
||||
);
|
||||
color: var(--text-inverse);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -117,3 +121,19 @@
|
||||
color: var(--text-primary);
|
||||
margin-left: var(--space-xs);
|
||||
}
|
||||
|
||||
/* Дополнения для темной темы */
|
||||
.search-filters {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
.category-card {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
border-color: var(--primary-300);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
@@ -211,3 +211,44 @@ li {
|
||||
.text-success {
|
||||
color: var(--success-600);
|
||||
}
|
||||
|
||||
/* Дополнения для темной темы */
|
||||
body {
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.lead {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.small {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-500);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--primary-400);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
--primary-200: #bae6fd;
|
||||
--primary-300: #7dd3fc;
|
||||
--primary-400: #38bdf8;
|
||||
--primary-500: #0ea5e9; /* Основной синий - небо/вода */
|
||||
--primary-500: #0ea5e9; /* Основной синий - небо/вода */
|
||||
--primary-600: #0284c7;
|
||||
--primary-700: #0369a1;
|
||||
--primary-800: #075985;
|
||||
@@ -17,7 +17,7 @@
|
||||
--secondary-100: #fef9c3;
|
||||
--secondary-200: #fef08a;
|
||||
--secondary-300: #fde047;
|
||||
--secondary-400: #facc15; /* Золотой - солнце/песок */
|
||||
--secondary-400: #facc15; /* Золотой - солнце/песок */
|
||||
--secondary-500: #eab308;
|
||||
--secondary-600: #ca8a04;
|
||||
--secondary-700: #a16207;
|
||||
@@ -29,7 +29,7 @@
|
||||
--accent-100: #dcfce7;
|
||||
--accent-200: #bbf7d0;
|
||||
--accent-300: #86efac;
|
||||
--accent-400: #4ade80; /* Зеленый - природа/растения */
|
||||
--accent-400: #4ade80; /* Зеленый - природа/растения */
|
||||
--accent-500: #22c55e;
|
||||
--accent-600: #16a34a;
|
||||
--accent-700: #15803d;
|
||||
@@ -84,7 +84,8 @@
|
||||
/* Тени */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
||||
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Радиусы */
|
||||
--radius-sm: 0.375rem;
|
||||
@@ -99,4 +100,108 @@
|
||||
--space-lg: 1.5rem;
|
||||
--space-xl: 2rem;
|
||||
--space-2xl: 3rem;
|
||||
|
||||
&[data-theme="dark"] {
|
||||
/* Основные цвета - темная тема */
|
||||
--primary-50: #0c4a6e;
|
||||
--primary-100: #075985;
|
||||
--primary-200: #0369a1;
|
||||
--primary-300: #0284c7;
|
||||
--primary-400: #0ea5e9;
|
||||
--primary-500: #38bdf8;
|
||||
--primary-600: #7dd3fc;
|
||||
--primary-700: #bae6fd;
|
||||
--primary-800: #e0f2fe;
|
||||
--primary-900: #f0f9ff;
|
||||
|
||||
/* Вторичные цвета - темная тема */
|
||||
--secondary-50: #713f12;
|
||||
--secondary-100: #854d0e;
|
||||
--secondary-200: #a16207;
|
||||
--secondary-300: #ca8a04;
|
||||
--secondary-400: #eab308;
|
||||
--secondary-500: #facc15;
|
||||
--secondary-600: #fde047;
|
||||
--secondary-700: #fef08a;
|
||||
--secondary-800: #fef9c3;
|
||||
--secondary-900: #fefce8;
|
||||
|
||||
/* Акцентные цвета - темная тема */
|
||||
--accent-50: #14532d;
|
||||
--accent-100: #166534;
|
||||
--accent-200: #15803d;
|
||||
--accent-300: #16a34a;
|
||||
--accent-400: #22c55e;
|
||||
--accent-500: #4ade80;
|
||||
--accent-600: #86efac;
|
||||
--accent-700: #bbf7d0;
|
||||
--accent-800: #dcfce7;
|
||||
--accent-900: #f0fdf4;
|
||||
|
||||
/* Нейтральные цвета - темная тема */
|
||||
--gray-50: #0f172a;
|
||||
--gray-100: #1e293b;
|
||||
--gray-200: #334155;
|
||||
--gray-300: #475569;
|
||||
--gray-400: #64748b;
|
||||
--gray-500: #94a3b8;
|
||||
--gray-600: #cbd5e1;
|
||||
--gray-700: #e2e8f0;
|
||||
--gray-800: #f1f5f9;
|
||||
--gray-900: #f8fafc;
|
||||
|
||||
/* Семантические цвета - темная тема */
|
||||
--success-50: #14532d;
|
||||
--success-500: #4ade80;
|
||||
--success-600: #86efac;
|
||||
|
||||
--warning-50: #713f12;
|
||||
--warning-500: #facc15;
|
||||
--warning-600: #fde047;
|
||||
|
||||
--error-50: #7f1d1d;
|
||||
--error-500: #f87171;
|
||||
--error-600: #fca5a5;
|
||||
|
||||
--info-50: #1e3a8a;
|
||||
--info-500: #60a5fa;
|
||||
--info-600: #93c5fd;
|
||||
|
||||
/* Фоновые цвета - темная тема */
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-tertiary: #334155;
|
||||
|
||||
/* Текстовые цвета - темная тема */
|
||||
--text-primary: #f8fafc;
|
||||
--text-secondary: #e2e8f0;
|
||||
--text-tertiary: #cbd5e1;
|
||||
--text-inverse: #0f172a;
|
||||
|
||||
/* Границы - темная тема */
|
||||
--border-light: #334155;
|
||||
--border-medium: #475569;
|
||||
--border-dark: #64748b;
|
||||
|
||||
/* Тени - темная тема */
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3),
|
||||
0 2px 4px -2px rgb(0 0 0 / 0.3);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3),
|
||||
0 4px 6px -4px rgb(0 0 0 / 0.3);
|
||||
}
|
||||
|
||||
/* Градиенты для hero-секции */
|
||||
--hero-gradient: linear-gradient(
|
||||
135deg,
|
||||
var(--primary-500) 0%,
|
||||
var(--primary-700) 100%
|
||||
);
|
||||
--hero-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%230ea5e9" points="0,1000 1000,0 1000,1000"/></svg>');
|
||||
|
||||
/* Темная тема */
|
||||
&[data-theme="dark"] {
|
||||
--hero-gradient: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
--hero-pattern: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%23374151" points="0,1000 1000,0 1000,1000"/></svg>');
|
||||
}
|
||||
}
|
||||
@@ -118,9 +118,11 @@
|
||||
|
||||
<style scoped>
|
||||
.footer {
|
||||
background: var(--gray-900);
|
||||
color: var(--text-inverse);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
margin-top: auto;
|
||||
border-top: 1px solid var(--border-light);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
@@ -151,6 +153,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
@@ -162,12 +165,15 @@
|
||||
.logo-name {
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-primary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-description {
|
||||
color: var(--gray-400);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
font-size: 0.9rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
@@ -181,15 +187,18 @@
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background: var(--gray-700);
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background: var(--primary-500);
|
||||
border-color: var(--primary-500);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
@@ -200,7 +209,8 @@
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-inverse);
|
||||
color: var(--text-primary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-title-margin {
|
||||
@@ -221,28 +231,33 @@
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: var(--gray-400);
|
||||
color: var(--text-secondary);
|
||||
min-width: 80px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: var(--gray-300);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.4;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: 1rem;
|
||||
min-width: 1.5rem;
|
||||
color: var(--text-tertiary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.info-link {
|
||||
color: var(--gray-300);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.info-link:hover {
|
||||
color: var(--primary-400);
|
||||
color: var(--primary-500);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
@@ -252,9 +267,9 @@
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
color: var(--gray-400);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -262,13 +277,14 @@
|
||||
}
|
||||
|
||||
.footer-link:hover {
|
||||
color: var(--primary-400);
|
||||
color: var(--primary-500);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid var(--gray-700);
|
||||
border-top: 1px solid var(--border-light);
|
||||
padding: 1.5rem 0;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-bottom-content {
|
||||
@@ -278,8 +294,9 @@
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: var(--gray-500);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.875rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-bottom-links {
|
||||
@@ -288,14 +305,15 @@
|
||||
}
|
||||
|
||||
.footer-bottom-link {
|
||||
color: var(--gray-500);
|
||||
color: var(--text-tertiary);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
transition: color 0.3s;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-bottom-link:hover {
|
||||
color: var(--gray-300);
|
||||
color: var(--primary-500);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
|
||||
@@ -12,6 +12,15 @@
|
||||
|
||||
<!-- Навигация -->
|
||||
<nav class="nav">
|
||||
<!-- Переключатель темы -->
|
||||
<button @click="toggleTheme" class="theme-toggle" :title="theme === 'light' ? 'Темная тема' : 'Светлая тема'">
|
||||
<span class="theme-icon" :class="theme">
|
||||
<span class="sun">☀️</span>
|
||||
<span class="moon">🌙</span>
|
||||
</span>
|
||||
<span class="theme-text">{{ theme === 'light' ? 'Темная' : 'Светлая' }}</span>
|
||||
</button>
|
||||
|
||||
<NuxtLink to="/profile" class="nav-link">
|
||||
👤 Профиль
|
||||
</NuxtLink>
|
||||
@@ -28,18 +37,19 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Простой хедер без проверки авторизации
|
||||
const { theme, toggleTheme } = useTheme()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
background: var(--bg-primary);
|
||||
background: var(--bg-primary); /* Теперь использует основной фон */
|
||||
box-shadow: var(--shadow-sm);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
width: 100%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@@ -56,10 +66,11 @@
|
||||
gap: 0.75rem;
|
||||
text-decoration: none;
|
||||
color: var(--text-primary);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
color: var(--text-primary);
|
||||
color: var(--primary-500);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
@@ -71,6 +82,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.logo-text {
|
||||
@@ -83,6 +95,7 @@
|
||||
font-weight: bold;
|
||||
font-size: 1.5rem;
|
||||
white-space: nowrap;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.nav {
|
||||
@@ -97,19 +110,82 @@
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.2s;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--primary-600);
|
||||
color: var(--primary-500);
|
||||
background: var(--primary-50);
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Стили для переключателя темы */
|
||||
.theme-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--primary-300);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.theme-icon {
|
||||
position: relative;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.theme-icon .sun,
|
||||
.theme-icon .moon {
|
||||
position: absolute;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.theme-icon.light .sun {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.theme-icon.light .moon {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.theme-icon.dark .sun {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
.theme-icon.dark .moon {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.theme-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -138,6 +214,14 @@
|
||||
.logo-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.theme-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
// composables/useTheme.ts
|
||||
export const useTheme = () => {
|
||||
const theme = ref<'light' | 'dark'>('light')
|
||||
|
||||
const setTheme = (newTheme: 'light' | 'dark') => {
|
||||
theme.value = newTheme
|
||||
document.documentElement.setAttribute('data-theme', newTheme)
|
||||
localStorage.setItem('theme', newTheme)
|
||||
}
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newTheme = theme.value === 'light' ? 'dark' : 'light'
|
||||
setTheme(newTheme)
|
||||
}
|
||||
|
||||
// Инициализация темы при загрузке
|
||||
onMounted(() => {
|
||||
const savedTheme = localStorage.getItem('theme') as 'light' | 'dark'
|
||||
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
|
||||
const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light')
|
||||
setTheme(initialTheme)
|
||||
})
|
||||
|
||||
return {
|
||||
theme: readonly(theme),
|
||||
toggleTheme,
|
||||
setTheme
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,9 @@
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h1 class="hero-title">Создавай аккаунт, добавляй объекты и получи сайт на каждый добавленный объект</h1>
|
||||
<h1 class="hero-title">Создавай аккаунт</h1>
|
||||
<h1 class="hero-title">Добавляй услуги</h1>
|
||||
<h1 class="hero-title">Получи сайт</h1>
|
||||
<p class="hero-subtitle">Диджитал присутвие в интернете легко и доступно</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,14 +46,14 @@ const handleSearch = () => {
|
||||
|
||||
/* Hero секция занимает всю доступную высоту */
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
|
||||
background: var(--hero-gradient);
|
||||
color: var(--text-inverse);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1 0 auto; /* Занимает всё доступное пространство */
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - 80px); /* Минимальная высота минус хедер */
|
||||
min-height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
@@ -61,7 +63,7 @@ const handleSearch = () => {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%230ea5e9" points="0,1000 1000,0 1000,1000"/></svg>');
|
||||
background: var(--hero-pattern);
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
// plugins/theme.client.ts
|
||||
export default defineNuxtPlugin(() => {
|
||||
const initializeTheme = () => {
|
||||
const savedTheme = localStorage.getItem('theme')
|
||||
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
|
||||
const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light')
|
||||
document.documentElement.setAttribute('data-theme', theme)
|
||||
}
|
||||
|
||||
// Инициализируем при загрузке
|
||||
initializeTheme()
|
||||
|
||||
// Слушаем изменения системной темы
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
||||
if (!localStorage.getItem('theme')) {
|
||||
document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light')
|
||||
}
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user