Andrey K. Choi
b4e513e996
✨ Features: - Modern tourism website with responsive design - AdminJS admin panel with image editor integration - PostgreSQL database with comprehensive schema - Docker containerization - Image upload and gallery management 🛠 Tech Stack: - Backend: Node.js + Express.js - Database: PostgreSQL 13+ - Frontend: HTML/CSS/JS with responsive design - Admin: AdminJS with custom components - Deployment: Docker + Docker Compose - Image Processing: Sharp with optimization 📱 Admin Features: - Routes/Tours management (city, mountain, fishing) - Guides profiles with specializations - Articles and blog system - Image editor with upload/gallery/URL options - User management and authentication - Responsive admin interface 🎨 Design: - Korean tourism focused branding - Mobile-first responsive design - Custom CSS with modern aesthetics - Image optimization and gallery - SEO-friendly structure 🔒 Security: - Helmet.js security headers - bcrypt password hashing - Input validation and sanitization - CORS protection - Environment variables
187 lines
12 KiB
HTML
187 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Демонстрация редактора изображений в AdminJS</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||
</head>
|
||
<body>
|
||
<div class="container mt-5">
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="card">
|
||
<div class="card-header bg-primary text-white">
|
||
<h4 class="mb-0">
|
||
<i class="fas fa-images me-2"></i>
|
||
Редактор изображений для AdminJS - Готов к использованию!
|
||
</h4>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="alert alert-success">
|
||
<i class="fas fa-check-circle me-2"></i>
|
||
<strong>Редактор изображений успешно интегрирован в AdminJS!</strong>
|
||
</div>
|
||
|
||
<h5>🎉 Что было реализовано:</h5>
|
||
<ul class="list-group list-group-flush mb-4">
|
||
<li class="list-group-item">
|
||
<i class="fas fa-check text-success me-2"></i>
|
||
Полнофункциональный редактор изображений с галереей
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="fas fa-check text-success me-2"></i>
|
||
API для загрузки и управления изображениями
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="fas fa-check text-success me-2"></i>
|
||
Автоматическая интеграция с полями изображений в AdminJS
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="fas fa-check text-success me-2"></i>
|
||
Превью изображений и организация по папкам
|
||
</li>
|
||
<li class="list-group-item">
|
||
<i class="fas fa-check text-success me-2"></i>
|
||
Оптимизация изображений через Sharp
|
||
</li>
|
||
</ul>
|
||
|
||
<h5>📝 Как использовать в AdminJS:</h5>
|
||
<ol class="mb-4">
|
||
<li class="mb-2">
|
||
<strong>Войдите в админ-панель:</strong>
|
||
<a href="/admin" class="btn btn-primary btn-sm ms-2" target="_blank">
|
||
<i class="fas fa-external-link-alt me-1"></i>
|
||
Открыть AdminJS
|
||
</a>
|
||
</li>
|
||
<li class="mb-2">
|
||
<strong>Данные для входа:</strong>
|
||
<ul class="mt-1">
|
||
<li>Username: <code>admin</code></li>
|
||
<li>Password: Используйте существующий пароль администратора</li>
|
||
</ul>
|
||
</li>
|
||
<li class="mb-2">
|
||
<strong>Редактируйте маршруты, гидов или статьи</strong>
|
||
</li>
|
||
<li class="mb-2">
|
||
<strong>Для полей изображений появится кнопка "📷 Выбрать"</strong>
|
||
</li>
|
||
<li class="mb-2">
|
||
<strong>Нажмите кнопку для открытия редактора в модальном окне</strong>
|
||
</li>
|
||
</ol>
|
||
|
||
<h5>🔧 Функции редактора:</h5>
|
||
<div class="row">
|
||
<div class="col-md-4 mb-3">
|
||
<div class="card h-100">
|
||
<div class="card-header bg-info text-white">
|
||
<i class="fas fa-upload me-2"></i>Загрузка
|
||
</div>
|
||
<div class="card-body">
|
||
<ul class="list-unstyled">
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Drag & Drop</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Формат: JPG, PNG, GIF</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Макс. размер: 5МБ</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Автооптимизация</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-3">
|
||
<div class="card h-100">
|
||
<div class="card-header bg-warning text-dark">
|
||
<i class="fas fa-images me-2"></i>Галерея
|
||
</div>
|
||
<div class="card-body">
|
||
<ul class="list-unstyled">
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Все загруженные изображения</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Фильтр по папкам</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Превью с именами</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Поиск по категориям</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4 mb-3">
|
||
<div class="card h-100">
|
||
<div class="card-header bg-success text-white">
|
||
<i class="fas fa-link me-2"></i>По URL
|
||
</div>
|
||
<div class="card-body">
|
||
<ul class="list-unstyled">
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Внешние изображения</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Прямые ссылки</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Предпросмотр</li>
|
||
<li><i class="fas fa-check-circle text-success me-2"></i>Быстрая вставка</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h5>📂 Организация файлов:</h5>
|
||
<div class="row">
|
||
<div class="col-md-3">
|
||
<div class="text-center p-3 border rounded">
|
||
<i class="fas fa-route fa-2x text-primary mb-2"></i>
|
||
<h6>/uploads/routes/</h6>
|
||
<small class="text-muted">Изображения маршрутов</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="text-center p-3 border rounded">
|
||
<i class="fas fa-user-tie fa-2x text-info mb-2"></i>
|
||
<h6>/uploads/guides/</h6>
|
||
<small class="text-muted">Фотографии гидов</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="text-center p-3 border rounded">
|
||
<i class="fas fa-newspaper fa-2x text-warning mb-2"></i>
|
||
<h6>/uploads/articles/</h6>
|
||
<small class="text-muted">Изображения статей</small>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="text-center p-3 border rounded">
|
||
<i class="fas fa-folder fa-2x text-secondary mb-2"></i>
|
||
<h6>/uploads/general/</h6>
|
||
<small class="text-muted">Общие изображения</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4">
|
||
<div class="alert alert-info">
|
||
<i class="fas fa-info-circle me-2"></i>
|
||
<strong>Техническая информация:</strong>
|
||
<br>
|
||
Редактор автоматически определяет поля изображений по именам (image_url, photo, avatar) и добавляет к ним кнопку выбора.
|
||
Изображения оптимизируются до разрешения 1200x800 с качеством 85% для оптимальной производительности.
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mt-4">
|
||
<a href="/admin" class="btn btn-primary btn-lg me-2" target="_blank">
|
||
<i class="fas fa-cogs me-2"></i>
|
||
Открыть админ-панель
|
||
</a>
|
||
<a href="/test-image-editor.html" class="btn btn-outline-secondary btn-lg" target="_blank">
|
||
<i class="fas fa-test-tube me-2"></i>
|
||
Тестовая страница
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||
</body>
|
||
</html> |