154 lines
6.6 KiB
HTML
154 lines
6.6 KiB
HTML
<!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="chat-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 chat-main">
|
||
<div class="chat-container">
|
||
|
||
<!-- Сообщения чата -->
|
||
<div class="messages-area">
|
||
|
||
<!-- Системное сообщение -->
|
||
<div class="system-message">
|
||
<div class="system-text">Поход начался в 09:00</div>
|
||
</div>
|
||
|
||
<!-- Сообщение от другого участника -->
|
||
<div class="message message-other">
|
||
<div class="message-avatar">👴</div>
|
||
<div class="message-bubble">
|
||
<div class="message-author">Иван</div>
|
||
<div class="message-text">Нашел поляну с белыми! Идите сюда</div>
|
||
<div class="message-time">14:35</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Сообщение с местоположением -->
|
||
<div class="message message-other">
|
||
<div class="message-avatar">👴</div>
|
||
<div class="message-bubble">
|
||
<div class="message-author">Иван</div>
|
||
<div class="location-card">
|
||
<div class="location-icon">📍</div>
|
||
<div class="location-info">
|
||
<div class="location-text">Отправил геолокацию</div>
|
||
<div class="location-distance">1.2 км от вас</div>
|
||
</div>
|
||
</div>
|
||
<div class="message-time">14:36</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Своё сообщение -->
|
||
<div class="message message-own">
|
||
<div class="message-bubble">
|
||
<div class="message-text">Отлично! Идём к тебе</div>
|
||
<div class="message-time">14:37</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Сообщение с фото -->
|
||
<div class="message message-other">
|
||
<div class="message-avatar">👧</div>
|
||
<div class="message-bubble">
|
||
<div class="message-author">Алиса</div>
|
||
<img src="img/mushrooms/лисички.jpg" alt="Фото гриба" class="message-photo">
|
||
<div class="message-text">Мама, это лисички?</div>
|
||
<div class="message-time">14:38</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Своё сообщение -->
|
||
<div class="message message-own">
|
||
<div class="message-bubble">
|
||
<div class="message-text">Да, лисички! Молодец! 👍</div>
|
||
<div class="message-time">14:39</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Системное сообщение -->
|
||
<div class="system-message">
|
||
<div class="system-text">🎯 Иван достиг точки встречи №2</div>
|
||
</div>
|
||
|
||
<!-- Сообщение от другого участника -->
|
||
<div class="message message-other">
|
||
<div class="message-avatar">👧</div>
|
||
<div class="message-bubble">
|
||
<div class="message-author">Алиса</div>
|
||
<div class="message-text">Я тоже собрала целую корзину!</div>
|
||
<div class="message-time">14:42</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Панель ввода сообщения -->
|
||
<div class="input-panel">
|
||
<button class="input-action-btn">
|
||
<span class="action-icon">📷</span>
|
||
</button>
|
||
<button class="input-action-btn">
|
||
<span class="action-icon">📍</span>
|
||
</button>
|
||
<input type="text" class="message-input" placeholder="Сообщение...">
|
||
<button class="send-btn">
|
||
<span class="send-icon">📤</span>
|
||
</button>
|
||
</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">
|
||
<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>
|
||
</nav>
|
||
|
||
<!-- Плавающая кнопка SOS -->
|
||
<button class="sos-button">
|
||
<span class="sos-icon">🆘</span>
|
||
</button>
|
||
|
||
</div>
|
||
</body>
|
||
|
||
</html> |