diff --git a/main_dc/yalarba/easySite/.env b/main_dc/yalarba/easySite/.env new file mode 100644 index 0000000..e69de29 diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/components.css b/main_dc/yalarba/easySite/easySite/app/assets/css/components.css new file mode 100644 index 0000000..ac33599 --- /dev/null +++ b/main_dc/yalarba/easySite/easySite/app/assets/css/components.css @@ -0,0 +1,168 @@ +/* assets/css/components.css */ +/* Кнопки */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-xs); + padding: var(--space-sm) var(--space-lg); + border: none; + border-radius: var(--radius-md); + font-weight: 500; + text-decoration: none; + cursor: pointer; + transition: all 0.2s; + font-size: 0.875rem; + line-height: 1.25rem; +} + +.btn-primary { + background: var(--primary-500); + color: var(--text-inverse); +} + +.btn-primary:hover { + background: var(--primary-600); + transform: translateY(-1px); + box-shadow: var(--shadow-md); +} + +.btn-secondary { + background: var(--secondary-500); + color: var(--text-inverse); +} + +.btn-secondary:hover { + background: var(--secondary-600); +} + +.btn-outline { + background: transparent; + border: 1px solid var(--border-medium); + color: var(--text-secondary); +} + +.btn-outline:hover { + background: var(--gray-50); + border-color: var(--primary-500); + color: var(--primary-600); +} + +/* Карточки */ +.card { + background: var(--bg-primary); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); + border: 1px solid var(--border-light); + overflow: hidden; + transition: all 0.3s; +} + +.card:hover { + box-shadow: var(--shadow-md); + transform: translateY(-2px); +} + +.card-header { + padding: var(--space-lg); + border-bottom: 1px solid var(--border-light); +} + +.card-body { + padding: var(--space-lg); +} + +.card-footer { + padding: var(--space-lg); + border-top: 1px solid var(--border-light); + background: var(--bg-secondary); +} + +/* Формы */ +.form-group { + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: var(--space-md); +} + +.form-label { + font-weight: 500; + color: var(--text-secondary); + font-size: 0.875rem; +} + +.form-input { + padding: var(--space-sm) var(--space-md); + border: 1px solid var(--border-medium); + border-radius: var(--radius-md); + font-size: 1rem; + transition: all 0.2s; + background: var(--bg-primary); +} + +.form-input:focus { + outline: none; + border-color: var(--primary-500); + box-shadow: 0 0 0 3px rgb(14 165 233 / 0.1); +} + +.form-select { + padding: var(--space-sm) var(--space-md); + border: 1px solid var(--border-medium); + border-radius: var(--radius-md); + background: var(--bg-primary); + cursor: pointer; +} + +/* Бейджи и теги */ +.badge { + display: inline-flex; + align-items: center; + padding: 0.25rem 0.5rem; + border-radius: var(--radius-sm); + font-size: 0.75rem; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.badge-primary { + background: var(--primary-100); + color: var(--primary-700); +} + +.badge-secondary { + background: var(--secondary-100); + color: var(--secondary-700); +} + +.badge-accent { + background: var(--accent-100); + color: var(--accent-700); +} + +.badge-success { + background: var(--success-50); + color: var(--success-600); +} + +/* Навигация */ +.nav-link { + color: var(--text-secondary); + text-decoration: none; + padding: var(--space-sm) var(--space-md); + border-radius: var(--radius-md); + transition: all 0.2s; + font-weight: 500; +} + +.nav-link:hover { + color: var(--primary-600); + background: var(--primary-50); +} + +.nav-link.active { + color: var(--primary-600); + background: var(--primary-50); +} diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/fonts.css b/main_dc/yalarba/easySite/easySite/app/assets/css/fonts.css new file mode 100644 index 0000000..ef34aa0 --- /dev/null +++ b/main_dc/yalarba/easySite/easySite/app/assets/css/fonts.css @@ -0,0 +1,43 @@ +/* assets/css/fonts.css */ +/* Подключение через @import */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap'); + +/* Система шрифтовых переменных */ +:root { + /* Шрифтовые семейства */ + --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + --font-heading: 'Playfair Display', 'Times New Roman', serif; + --font-accent: 'Open Sans', 'Arial', sans-serif; + + /* Размеры шрифтов */ + --text-xs: 0.75rem; /* 12px */ + --text-sm: 0.875rem; /* 14px */ + --text-base: 1rem; /* 16px */ + --text-lg: 1.125rem; /* 18px */ + --text-xl: 1.25rem; /* 20px */ + --text-2xl: 1.5rem; /* 24px */ + --text-3xl: 1.875rem; /* 30px */ + --text-4xl: 2.25rem; /* 36px */ + --text-5xl: 3rem; /* 48px */ + --text-6xl: 3.75rem; /* 60px */ + + /* Высота строк */ + --leading-tight: 1.25; + --leading-normal: 1.5; + --leading-relaxed: 1.75; + --leading-loose: 2; + + /* Межбуквенные интервалы */ + --tracking-tight: -0.025em; + --tracking-normal: 0; + --tracking-wide: 0.025em; + --tracking-wider: 0.05em; + + /* Насыщенность шрифтов */ + --font-light: 300; + --font-normal: 400; + --font-medium: 500; + --font-semibold: 600; + --font-bold: 700; + --font-extrabold: 800; +} \ No newline at end of file diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/travel-typography.css b/main_dc/yalarba/easySite/easySite/app/assets/css/travel-typography.css new file mode 100644 index 0000000..d78fbe7 --- /dev/null +++ b/main_dc/yalarba/easySite/easySite/app/assets/css/travel-typography.css @@ -0,0 +1,110 @@ +/* assets/css/travel-typography.css */ +/* Герой-секция */ +.hero-title { + font-family: var(--font-heading); + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: var(--font-bold); + line-height: 1.1; + letter-spacing: var(--tracking-tight); + margin-bottom: var(--space-lg); +} + +.hero-subtitle { + font-family: var(--font-accent); + font-size: clamp(1.125rem, 2vw, 1.5rem); + font-weight: var(--font-light); + line-height: var(--leading-relaxed); + opacity: 0.9; + margin-bottom: var(--space-xl); +} + +/* Карточки туров */ +.tour-title { + font-family: var(--font-primary); + font-size: var(--text-lg); + font-weight: var(--font-semibold); + line-height: var(--leading-tight); + color: var(--text-primary); + margin-bottom: var(--space-xs); +} + +.tour-location { + font-family: var(--font-primary); + font-size: var(--text-sm); + font-weight: var(--font-normal); + color: var(--text-tertiary); + margin-bottom: var(--space-sm); +} + +.tour-description { + font-family: var(--font-primary); + font-size: var(--text-sm); + font-weight: var(--font-normal); + line-height: var(--leading-relaxed); + color: var(--text-secondary); + margin-bottom: var(--space-md); +} + +/* Навигация и фильтры */ +.nav-brand { + font-family: var(--font-heading); + font-size: var(--text-xl); + font-weight: var(--font-bold); + color: var(--primary-600); +} + +.filter-title { + font-family: var(--font-primary); + font-size: var(--text-sm); + font-weight: var(--font-semibold); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); + color: var(--text-secondary); + margin-bottom: var(--space-sm); +} + +/* Отзывы и рейтинги */ +.review-text { + font-family: var(--font-accent); + font-size: var(--text-base); + font-weight: var(--font-normal); + line-height: var(--leading-relaxed); + color: var(--text-secondary); + font-style: italic; +} + +.review-author { + font-family: var(--font-primary); + font-size: var(--text-sm); + font-weight: var(--font-semibold); + color: var(--text-primary); +} + +/* Кнопки с иконками */ +.btn-with-icon { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + font-family: var(--font-primary); + font-weight: var(--font-medium); +} + +/* Адаптивная типографика */ +@media (max-width: 768px) { + :root { + --text-5xl: 2.5rem; + --text-4xl: 2rem; + --text-3xl: 1.75rem; + --text-2xl: 1.5rem; + --text-xl: 1.25rem; + --text-lg: 1.125rem; + } + + .hero-title { + font-size: 2.5rem; + } + + .hero-subtitle { + font-size: 1.25rem; + } +} \ No newline at end of file diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/travel.css b/main_dc/yalarba/easySite/easySite/app/assets/css/travel.css new file mode 100644 index 0000000..55df4fc --- /dev/null +++ b/main_dc/yalarba/easySite/easySite/app/assets/css/travel.css @@ -0,0 +1,119 @@ +/* assets/css/travel.css */ +/* Герой-секция с фоном */ +.hero-section { + background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%); + color: var(--text-inverse); + position: relative; + overflow: hidden; +} + +.hero-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.1; +} + +/* Карточки туров */ +.tour-card { + position: relative; + border-radius: var(--radius-xl); + overflow: hidden; + background: var(--bg-primary); +} + +.tour-card__image { + width: 100%; + height: 200px; + object-fit: cover; +} + +.tour-card__badge { + position: absolute; + top: var(--space-md); + right: var(--space-md); +} + +.tour-card__price { + color: var(--primary-600); + font-weight: 600; + font-size: 1.25rem; +} + +.tour-card__discount { + color: var(--error-500); + text-decoration: line-through; + font-size: 0.875rem; +} + +/* Категории услуг */ +.category-card { + background: var(--bg-primary); + border: 1px solid var(--border-light); + border-radius: var(--radius-lg); + padding: var(--space-xl); + text-align: center; + transition: all 0.3s; + cursor: pointer; +} + +.category-card:hover { + border-color: var(--primary-300); + transform: translateY(-4px); + box-shadow: var(--shadow-lg); +} + +.category-card__icon { + width: 48px; + height: 48px; + margin: 0 auto var(--space-md); + background: var(--primary-100); + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + color: var(--primary-600); +} + +/* Фильтры поиска */ +.search-filters { + background: var(--bg-secondary); + border-radius: var(--radius-lg); + padding: var(--space-lg); + border: 1px solid var(--border-light); +} + +.filter-group { + margin-bottom: var(--space-lg); +} + +.filter-label { + display: block; + margin-bottom: var(--space-sm); + font-weight: 500; + color: var(--text-secondary); +} + +/* Рейтинги */ +.rating-stars { + display: flex; + gap: 2px; +} + +.rating-star { + color: var(--secondary-400); +} + +.rating-star.empty { + color: var(--gray-300); +} + +.rating-value { + font-weight: 600; + color: var(--text-primary); + margin-left: var(--space-xs); +} \ No newline at end of file diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/typography.css b/main_dc/yalarba/easySite/easySite/app/assets/css/typography.css new file mode 100644 index 0000000..118256b --- /dev/null +++ b/main_dc/yalarba/easySite/easySite/app/assets/css/typography.css @@ -0,0 +1,213 @@ +/* assets/css/typography.css */ +/* Базовые настройки типографики */ +body { + font-family: var(--font-primary); + font-size: var(--text-base); + line-height: var(--leading-normal); + font-weight: var(--font-normal); + color: var(--text-primary); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* Заголовки */ +h1, +.h1 { + font-family: var(--font-heading); + font-size: var(--text-5xl); + font-weight: var(--font-bold); + line-height: var(--leading-tight); + letter-spacing: var(--tracking-tight); + color: var(--text-primary); + margin-bottom: var(--space-lg); +} + +h2, +.h2 { + font-family: var(--font-heading); + font-size: var(--text-4xl); + font-weight: var(--font-semibold); + line-height: var(--leading-tight); + letter-spacing: var(--tracking-tight); + color: var(--text-primary); + margin-bottom: var(--space-md); +} + +h3, +.h3 { + font-family: var(--font-heading); + font-size: var(--text-3xl); + font-weight: var(--font-semibold); + line-height: var(--leading-tight); + color: var(--text-primary); + margin-bottom: var(--space-md); +} + +h4, +.h4 { + font-family: var(--font-primary); + font-size: var(--text-2xl); + font-weight: var(--font-semibold); + line-height: var(--leading-tight); + color: var(--text-primary); + margin-bottom: var(--space-sm); +} + +h5, +.h5 { + font-family: var(--font-primary); + font-size: var(--text-xl); + font-weight: var(--font-semibold); + line-height: var(--leading-normal); + color: var(--text-primary); + margin-bottom: var(--space-sm); +} + +h6, +.h6 { + font-family: var(--font-primary); + font-size: var(--text-lg); + font-weight: var(--font-semibold); + line-height: var(--leading-normal); + color: var(--text-primary); + margin-bottom: var(--space-sm); +} + +/* Текстовые элементы */ +p { + margin-bottom: var(--space-md); + line-height: var(--leading-relaxed); + color: var(--text-secondary); +} + +.lead { + font-size: var(--text-xl); + font-weight: var(--font-light); + line-height: var(--leading-relaxed); + color: var(--text-secondary); +} + +.small { + font-size: var(--text-sm); + color: var(--text-tertiary); +} + +/* Ссылки */ +a { + color: var(--primary-600); + text-decoration: none; + transition: color 0.2s; +} + +a:hover { + color: var(--primary-700); + text-decoration: underline; +} + +/* Списки */ +ul, +ol { + margin-bottom: var(--space-md); + padding-left: var(--space-lg); +} + +li { + margin-bottom: var(--space-xs); + line-height: var(--leading-relaxed); + color: var(--text-secondary); +} + +/* Специальные текстовые классы */ +.text-hero { + font-family: var(--font-heading); + font-size: var(--text-6xl); + font-weight: var(--font-bold); + line-height: var(--leading-tight); + letter-spacing: var(--tracking-tight); +} + +.text-subtitle { + font-family: var(--font-accent); + font-size: var(--text-xl); + font-weight: var(--font-light); + line-height: var(--leading-relaxed); + color: var(--text-secondary); +} + +.text-caption { + font-family: var(--font-primary); + font-size: var(--text-sm); + font-weight: var(--font-normal); + color: var(--text-tertiary); + text-transform: uppercase; + letter-spacing: var(--tracking-wide); +} + +.text-price { + font-family: var(--font-primary); + font-size: var(--text-2xl); + font-weight: var(--font-bold); + color: var(--primary-600); +} + +.text-price-old { + font-family: var(--font-primary); + font-size: var(--text-lg); + font-weight: var(--font-normal); + color: var(--text-tertiary); + text-decoration: line-through; +} + +/* Классы для выравнивания */ +.text-center { + text-align: center; +} +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} + +/* Классы для насыщенности */ +.font-light { + font-weight: var(--font-light); +} +.font-normal { + font-weight: var(--font-normal); +} +.font-medium { + font-weight: var(--font-medium); +} +.font-semibold { + font-weight: var(--font-semibold); +} +.font-bold { + font-weight: var(--font-bold); +} + +/* Классы для цвета текста */ +.text-primary { + color: var(--text-primary); +} +.text-secondary { + color: var(--text-secondary); +} +.text-tertiary { + color: var(--text-tertiary); +} +.text-inverse { + color: var(--text-inverse); +} +.text-accent { + color: var(--accent-600); +} +.text-warning { + color: var(--warning-600); +} +.text-error { + color: var(--error-600); +} +.text-success { + color: var(--success-600); +} diff --git a/main_dc/yalarba/easySite/easySite/app/assets/css/variables.css b/main_dc/yalarba/easySite/easySite/app/assets/css/variables.css new file mode 100644 index 0000000..e6053f4 --- /dev/null +++ b/main_dc/yalarba/easySite/easySite/app/assets/css/variables.css @@ -0,0 +1,102 @@ +/* assets/css/variables.css */ +:root { + /* Основные цвета - природа, путешествия */ + --primary-50: #f0f9ff; + --primary-100: #e0f2fe; + --primary-200: #bae6fd; + --primary-300: #7dd3fc; + --primary-400: #38bdf8; + --primary-500: #0ea5e9; /* Основной синий - небо/вода */ + --primary-600: #0284c7; + --primary-700: #0369a1; + --primary-800: #075985; + --primary-900: #0c4a6e; + + /* Вторичные цвета - природа/земля */ + --secondary-50: #fefce8; + --secondary-100: #fef9c3; + --secondary-200: #fef08a; + --secondary-300: #fde047; + --secondary-400: #facc15; /* Золотой - солнце/песок */ + --secondary-500: #eab308; + --secondary-600: #ca8a04; + --secondary-700: #a16207; + --secondary-800: #854d0e; + --secondary-900: #713f12; + + /* Акцентные цвета - зелень/природа */ + --accent-50: #f0fdf4; + --accent-100: #dcfce7; + --accent-200: #bbf7d0; + --accent-300: #86efac; + --accent-400: #4ade80; /* Зеленый - природа/растения */ + --accent-500: #22c55e; + --accent-600: #16a34a; + --accent-700: #15803d; + --accent-800: #166534; + --accent-900: #14532d; + + /* Нейтральные цвета */ + --gray-50: #f8fafc; + --gray-100: #f1f5f9; + --gray-200: #e2e8f0; + --gray-300: #cbd5e1; + --gray-400: #94a3b8; + --gray-500: #64748b; + --gray-600: #475569; + --gray-700: #334155; + --gray-800: #1e293b; + --gray-900: #0f172a; + + /* Семантические цвета */ + --success-50: #f0fdf4; + --success-500: #22c55e; + --success-600: #16a34a; + + --warning-50: #fffbeb; + --warning-500: #f59e0b; + --warning-600: #d97706; + + --error-50: #fef2f2; + --error-500: #ef4444; + --error-600: #dc2626; + + --info-50: #eff6ff; + --info-500: #3b82f6; + --info-600: #2563eb; + + /* Фоновые цвета */ + --bg-primary: #ffffff; + --bg-secondary: #f8fafc; + --bg-tertiary: #f1f5f9; + + /* Текстовые цвета */ + --text-primary: #0f172a; + --text-secondary: #475569; + --text-tertiary: #64748b; + --text-inverse: #ffffff; + + /* Границы */ + --border-light: #e2e8f0; + --border-medium: #cbd5e1; + --border-dark: #94a3b8; + + /* Тени */ + --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); + + /* Радиусы */ + --radius-sm: 0.375rem; + --radius-md: 0.5rem; + --radius-lg: 0.75rem; + --radius-xl: 1rem; + + /* Отступы */ + --space-xs: 0.5rem; + --space-sm: 0.75rem; + --space-md: 1rem; + --space-lg: 1.5rem; + --space-xl: 2rem; + --space-2xl: 3rem; +} \ No newline at end of file diff --git a/main_dc/yalarba/easySite/easySite/nuxt.config.ts b/main_dc/yalarba/easySite/easySite/nuxt.config.ts index e1b0464..1e40edf 100644 --- a/main_dc/yalarba/easySite/easySite/nuxt.config.ts +++ b/main_dc/yalarba/easySite/easySite/nuxt.config.ts @@ -8,13 +8,24 @@ export default defineNuxtConfig({ '@nuxt/ui', '@nuxt/eslint' ], - css: ['~/assets/css/main.css'], + + css: [ + '~/assets/css/variables.css', + '~/assets/css/fonts.css', + '~/assets/css/typography.css', + '~/assets/css/travel-typography.css', + '~/assets/css/components.css', + '~/assets/css/travel.css', + '~/assets/css/main.css' + ], + // Настройки для работы за прокси runtimeConfig: { public: { baseURL: process.env.BASE_URL || 'http://localhost:3000' } }, + nitro: { preset: 'node-server' },