Экран планирования похода
This commit is contained in:
177
lab1/screen-forms/planning-screen.html
Normal file
177
lab1/screen-forms/planning-screen.html
Normal file
@@ -0,0 +1,177 @@
|
||||
<!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="common.css">
|
||||
<link rel="stylesheet" href="planning-screen.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="app-container">
|
||||
|
||||
<!-- Шапка приложения -->
|
||||
<header class="app-header">
|
||||
<div class="header-content">
|
||||
<img src="../logo/logo.png" alt="Логотип" class="app-logo">
|
||||
<h1 class="app-title">По грибы!</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Основное содержимое экрана -->
|
||||
<main class="app-main">
|
||||
<div class="content-container">
|
||||
<h2 class="screen-title">Планирование похода</h2>
|
||||
<p class="screen-description">
|
||||
Создайте новый маршрут, выберите дату и пригласите участников
|
||||
</p>
|
||||
|
||||
<!-- Карта для выбора маршрута -->
|
||||
<div class="map-container">
|
||||
<img src="img/map-preview.png" alt="Предварительный просмотр карты" class="map-preview">
|
||||
<button class="map-action-btn">
|
||||
<span class="btn-icon">📍</span>
|
||||
<span>Выбрать на карте</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Информация о маршруте -->
|
||||
<div class="route-info card">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Район</span>
|
||||
<span class="info-value">Токсово, Всеволожский р-н</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Расстояние</span>
|
||||
<span class="info-value">8.3 км</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Время в пути</span>
|
||||
<span class="info-value">~4 часа 30 минут</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Дата и время -->
|
||||
<div class="date-time-section">
|
||||
<h3 class="section-title">Когда идём?</h3>
|
||||
<div class="date-selector card">
|
||||
<div class="selector-icon">📅</div>
|
||||
<div class="selector-content">
|
||||
<div class="selector-label">Дата похода</div>
|
||||
<div class="selector-value">Суббота, 28 сентября 2025</div>
|
||||
</div>
|
||||
<div class="selector-arrow">›</div>
|
||||
</div>
|
||||
|
||||
<div class="time-selector card">
|
||||
<div class="selector-icon">🕐</div>
|
||||
<div class="selector-content">
|
||||
<div class="selector-label">Время начала</div>
|
||||
<div class="selector-value">09:00</div>
|
||||
</div>
|
||||
<div class="selector-arrow">›</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Погода -->
|
||||
<div class="weather-card card">
|
||||
<div class="weather-header">
|
||||
<span class="weather-icon">☀️</span>
|
||||
<div class="weather-info">
|
||||
<div class="weather-temp">+12°C</div>
|
||||
<div class="weather-desc">Ясно, без осадков</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="weather-details">
|
||||
<div class="weather-detail">
|
||||
<span class="detail-label">Восход</span>
|
||||
<span class="detail-value">06:45</span>
|
||||
</div>
|
||||
<div class="weather-detail">
|
||||
<span class="detail-label">Закат</span>
|
||||
<span class="detail-value">18:20</span>
|
||||
</div>
|
||||
<div class="weather-detail">
|
||||
<span class="detail-label">Ветер</span>
|
||||
<span class="detail-value">3 м/с</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Участники -->
|
||||
<div class="participants-section">
|
||||
<h3 class="section-title">Участники похода</h3>
|
||||
|
||||
<div class="participant-item">
|
||||
<div class="participant-avatar">👩</div>
|
||||
<div class="participant-info">
|
||||
<div class="participant-name">Мария (Вы)</div>
|
||||
<div class="participant-role">Организатор</div>
|
||||
</div>
|
||||
<div class="participant-status status-confirmed">✓</div>
|
||||
</div>
|
||||
|
||||
<div class="participant-item">
|
||||
<div class="participant-avatar">👴</div>
|
||||
<div class="participant-info">
|
||||
<div class="participant-name">Иван Семёнович</div>
|
||||
<div class="participant-role">Участник</div>
|
||||
</div>
|
||||
<div class="participant-status status-confirmed">✓</div>
|
||||
</div>
|
||||
|
||||
<div class="participant-item">
|
||||
<div class="participant-avatar">👧</div>
|
||||
<div class="participant-info">
|
||||
<div class="participant-name">Алиса</div>
|
||||
<div class="participant-role">Участник</div>
|
||||
</div>
|
||||
<div class="participant-status status-pending">?</div>
|
||||
</div>
|
||||
|
||||
<button class="btn-add-participant">
|
||||
<span class="btn-icon">➕</span>
|
||||
<span>Пригласить ещё</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Кнопки действий -->
|
||||
<div class="actions">
|
||||
<button class="btn btn-secondary btn-full">Сохранить черновик</button>
|
||||
<button class="btn btn-primary btn-full">Создать поход</button>
|
||||
</div>
|
||||
|
||||
<div class="bottom-spacer"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Нижняя навигационная панель -->
|
||||
<nav class="app-navigation">
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">🗺️</span>
|
||||
<span class="nav-label">Маршрут</span>
|
||||
</button>
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">🧺</span>
|
||||
<span class="nav-label">Корзина</span>
|
||||
</button>
|
||||
<button class="nav-button nav-button-active">
|
||||
<span class="nav-icon">🏠</span>
|
||||
<span class="nav-label">Главная</span>
|
||||
</button>
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">💬</span>
|
||||
<span class="nav-label">Чат</span>
|
||||
</button>
|
||||
<button class="nav-button">
|
||||
<span class="nav-icon">👥</span>
|
||||
<span class="nav-label">Группа</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user