Чат
This commit is contained in:
154
lab1/screen-forms/chat-screen.html
Normal file
154
lab1/screen-forms/chat-screen.html
Normal file
@@ -0,0 +1,154 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user