Для реализации системы реакций на посты, похожей на Telegram, можно использовать JavaScript и HTML. Ниже представлен базовый пример, который можно адаптировать под свои нужды.
### Пример скрипта для реакций:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Реакции на пост</title>
<style>
.reaction {
margin: 5px;
cursor: pointer;
font-size: 24px;
}
.reacted {
color: red;
}
</style>
</head>
<body>
<div class="post">
<p>Это пост. Выберите реакцию:</p>
<span class="reaction" data-reaction="👍">👍</span>
<span class="reaction" data-reaction="❤️">❤️</span>
<span class="reaction" data-reaction="😂">😂</span>
<span class="reaction" data-reaction="😢">😢</span>
</div>
<div id="reaction-output"></div>
<script>
const reactions = document.querySelectorAll('.reaction');
const output = document.getElementById('reaction-output');
reactions.forEach(reaction => {
reaction.addEventListener('click', () => {
// Сброс предыдущей реакции
reactions.forEach(r => r.classList.remove('reacted'));
// Добавление класса к выбранной реакции
reaction.classList.add('reacted');
// Обновление вывода
output.innerText = `Вы выбрали реакцию: ${reaction.dataset.reaction}`;
});
});
</script>
</body>
</html>
```
### Что делает этот скрипт:
1. Создает простой пост с четырьмя реакциями (👍, ❤️, 😂, 😢).
2. При нажатии на реакцию она выделяется (изменяется цвет текста).
3. Выводит выбранную реакцию в отдельный блок.
### Настройки:
- Вы можете добавить больше реакций, изменяя HTML.
- Можно стилизовать элементы с помощью CSS по вашему усмотрению.
- Для работы с данными можно использовать AJAX для отправки выбранных реакций на сервер.
Если вам нужно более сложное решение, например, с учетом пользователей, вам может потребоваться использовать серверный язык (например, PHP, Node.js) и базу данных для хранения реакций.