/
varsl
/
HTML-CSS
Обзор
Документация
Войти
/
varsl
/
HTML-CSS
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
frontend/dashboard.html
284 строки
13 KB
varsl
Добавление файлов фронтеда
21 дек 2025, 23:11
21 дек 2025, 23:11
7b4bf01
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Личный кабинет - Зоопарк Дикий Мир</title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/animations.css"> <link rel="stylesheet" href="css/dashboard.css"> <link rel="stylesheet" href="libs/all.min.css"> </head> <body> <div class="page-wrapper"> <header class="header"> <nav class="navbar container"> <div class="logo"> <i class="fas fa-paw"></i> <span>Зоопарк Дикий Мир</span> </div> <button class="menu-toggle" id="menuToggle"> <i class="fas fa-bars"></i> </button> <ul class="nav-menu" id="navMenu"> <li><a href="index.html"><i class="fas fa-home"></i> Главная</a></li> <li><a href="about.html"><i class="fas fa-info-circle"></i> О нас</a></li> <li><a href="animals.html"><i class="fas fa-dove"></i> Животные</a></li> <li><a href="catalog.html"><i class="fas fa-th-list"></i> Каталог</a></li> <li><a href="prices.html"><i class="fas fa-tag"></i> Цены</a></li> <li><a href="ticket.html"><i class="fas fa-ticket-alt"></i> Билеты</a></li> <li><a href="excursion.html"><i class="fas fa-calendar-alt"></i> Экскурсии</a></li> <li><a href="contacts.html"><i class="fas fa-address-book"></i> Контакты</a></li> <li><a href="map.html"><i class="fas fa-map-marked-alt"></i> Карта</a></li> <li class="auth-buttons"> <!-- Кнопки входа/выхода будут загружены через JavaScript --> </li> </ul> </nav> </header> <div class="dashboard-container"> <aside class="dashboard-sidebar"> <div class="sidebar-header"> <div class="user-avatar" id="userAvatar"> <i class="fas fa-user"></i> </div> <h3 class="user-name" id="userName">Загрузка...</h3> <p class="user-email" id="userEmail">...</p> <p class="user-phone" id="userPhone">...</p> </div> <nav class="sidebar-menu"> <a href="dashboard.html" class="menu-item active"> <i class="fas fa-chart-line"></i> <span>Дашборд</span> </a> <a href="profile.html" class="menu-item"> <i class="fas fa-user"></i> <span>Профиль</span> </a> <a href="ticket.html" class="menu-item"> <i class="fas fa-ticket-alt"></i> <span>Мои билеты</span> </a> <a href="excursion.html" class="menu-item"> <i class="fas fa-calendar-alt"></i> <span>Мои экскурсии</span> </a> <a href="animals.html" class="menu-item"> <i class="fas fa-heart"></i> <span>Любимые животные</span> </a> <a href="#" class="menu-item" id="historyBtn"> <i class="fas fa-history"></i> <span>История посещений</span> </a> </nav> </aside> <main class="dashboard-content"> <div class="dashboard-header"> <h1 class="dashboard-title">Личный кабинет</h1> <p class="dashboard-subtitle" id="welcomeMessage">Добро пожаловать!</p> </div> <div class="stats-grid"> <div class="stat-card"> <div class="stat-icon tickets"> <i class="fas fa-ticket-alt"></i> </div> <div class="stat-content"> <h3 class="stat-tickets">0</h3> <p>Активных билетов</p> </div> </div> <div class="stat-card"> <div class="stat-icon visits"> <i class="fas fa-calendar-check"></i> </div> <div class="stat-content"> <h3 class="stat-visits">0</h3> <p>Посещений</p> </div> </div> <div class="stat-card"> <div class="stat-icon spending"> <i class="fas fa-wallet"></i> </div> <div class="stat-content"> <h3 class="stat-spending">0 ₽</h3> <p>Общие расходы</p> </div> </div> <div class="stat-card"> <div class="stat-icon days"> <i class="fas fa-clock"></i> </div> <div class="stat-content"> <h3 class="stat-days">0</h3> <p>Дней с нами</p> </div> </div> </div> <div class="charts-section"> <div class="section-header"> <h2>Статистика посещений</h2> <div class="chart-controls"> <button class="btn btn-small btn-outline chart-filter active" data-chart="visitsChart" data-filter="monthly"> По месяцам </button> <button class="btn btn-small btn-outline" id="refreshData"> <i class="fas fa-sync-alt"></i> </button> </div> </div> <div class="chart-container"> <canvas id="visitsChart"></canvas> </div> </div> <div class="recent-activity"> <div class="section-header"> <h2>Недавняя активность</h2> </div> <div class="activity-list" id="activityList"> <div class="activity-item"> <div class="activity-icon"> <i class="fas fa-info-circle"></i> </div> <div class="activity-content"> <div class="activity-title">Совершите действия на сайте</div> <div class="activity-time">Купите билет или посетите зоопарк</div> </div> </div> </div> </div> <div class="table-container"> <div class="section-header"> <h2>Мои билеты</h2> <div class="filter-section"> <input type="text" id="searchInput" class="filter-input" placeholder="Поиск билетов..."> <select id="filterSelect" class="filter-select"> <option value="all">Все статусы</option> <option value="active">Активные</option> <option value="used">Использованные</option> <option value="cancelled">Отмененные</option> </select> </div> </div> <div class="tickets-loading" id="ticketsLoading"> <i class="fas fa-spinner fa-spin"></i> Загрузка билетов... </div> <table class="data-table" id="ticketsTable" style="display: none;"> <thead> <tr> <th data-sort="id">Номер <i class="fas fa-sort"></i></th> <th data-sort="date">Дата посещения <i class="fas fa-sort"></i></th> <th data-sort="type">Тип билета <i class="fas fa-sort"></i></th> <th data-sort="price">Сумма <i class="fas fa-sort"></i></th> <th data-sort="status">Статус <i class="fas fa-sort"></i></th> <th>Действия</th> </tr> </thead> <tbody id="ticketsBody"> <!-- Билеты будут загружены динамически --> </tbody> </table> <div class="no-tickets" id="noTickets" style="display: none;"> <div class="no-tickets-content"> <i class="fas fa-ticket-alt"></i> <h3>У вас пока нет билетов</h3> <p>Приобретите свой первый билет в зоопарк</p> <a href="ticket.html" class="btn btn-primary">Купить билет</a> </div> </div> </div> <div class="achievements-section" id="achievementsSection" style="display: none;"> <div class="section-header"> <h2>Достижения</h2> </div> <div class="achievements-grid" id="achievementsList"> <!-- Достижения будут загружены динамически --> </div> </div> <div class="quick-actions"> <h2>Быстрые действия</h2> <div class="actions-grid"> <button class="action-card" id="buyTicketBtn"> <div class="action-icon"> <i class="fas fa-ticket-alt"></i> </div> <h3>Купить билет</h3> <p>Приобрести новый билет онлайн</p> </button> <button class="action-card" id="bookExcursionBtn"> <div class="action-icon"> <i class="fas fa-calendar-plus"></i> </div> <h3>Записаться на экскурсию</h3> <p>Выбрать и забронировать экскурсию</p> </button> <button class="action-card" id="viewAnimalsBtn"> <div class="action-icon"> <i class="fas fa-heart"></i> </div> <h3>Любимые животные</h3> <p>Посмотреть ваши избранные животные</p> </button> <button class="action-card" id="editProfileBtn"> <div class="action-icon"> <i class="fas fa-user-edit"></i> </div> <h3>Редактировать профиль</h3> <p>Обновить личную информацию</p> </button> </div> </div> </main> </div> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h3>Зоопарк Дикий Мир</h3> <p>г. Москва, ул. Зоологическая, 123</p> <p>Ежедневно с 9:00 до 20:00</p> </div> <div class="footer-section"> <h3>Контакты</h3> <p><i class="fas fa-phone"></i> +7 (495) 123-45-67</p> <p><i class="fas fa-envelope"></i> info@wildzoo.ru</p> </div> <div class="footer-section"> <h3>Мы в соцсетях</h3> <div class="social-links"> <a href="#"><i class="fab fa-vk"></i></a> <a href="#"><i class="fab fa-telegram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> </div> <div class="footer-bottom"> <p>© 2025 Зоопарк Дикий Мир. Все права защищены.</p> </div> </div> </footer> </div> <script src="js/main.js"></script> <script src="js/auth.js"></script> <script src="js/dashboard.js"></script> <script src="libs/chart.min.js"></script> </body> <script src="js/auth-manager.js"></script> </html>