я делаю сообщество аниме любителей , интерфейс должен быть адаптивый под телефон , контент на подобие твитера тик тока вот мой код доработай и создай тематических механизмов <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>АнимеСообщество</title>
    <style>
        /* Основные стили */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            overflow-x: hidden;
        }
        /* Навигационная панель */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #ff4081;
            padding: 10px 20px;
            color: white;
            position: sticky;
            top: 0;
        }
        .navbar .logo {
            font-size: 24px;
            font-weight: bold;
        }
        .navbar .nav-icons {
            display: flex;
            gap: 15px;
            cursor: pointer;
        }
        /* Главная лента */
        .feed {
            padding: 20px;
            animation: fadeIn 1s ease-in;
        }
        .post {
            background-color: white;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            animation: fadeInUp 0.5s ease-out;
        }
        .post .post-header {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .post .post-header img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        .post .post-header img:hover {
            transform: scale(1.1);
        }
        .post .post-content {
            margin-top: 10px;
        }
        /* Форма создания поста */
        .create-post {
            background-color: white;
            padding: 15px;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            animation: slideInLeft 0.5s;
        }
        .create-post textarea {
            width: 100%;
            height: 80px;
            padding: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            resize: none;
        }
        .create-post button {
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #ff4081;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .create-post button:hover {
            background-color: #e62770;
        }
        /* Профиль пользователя */
        .profile {
            padding: 20px;
            animation: fadeIn 1s ease-in;
        }
        .profile-header {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .profile-header img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            transition: transform 0.3s;
        }
        .profile-header img:hover {
            transform: scale(1.1);
        }
        .profile-content {
            margin-top: 20px;
        }
        /* Скрытые секции */
        .section {
            display: none;
        }
        .active {
            display: block;
        }

        /* Анимации */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideInLeft {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
        }
    </style>
</head>
<body>

    <!-- Навигационная панель -->
    <div class="navbar">
        <div class="logo">АнимеСообщество</div>
        <div class="nav-icons">
            <span onclick="showSection('feed')">🏠 Лента</span>
            <span onclick="showSection('createPost')">➕ Создать</span>
            <span onclick="showSection('profile')">👤 Профиль</span>
        </div>
    </div>

    <!-- Главная лента -->
    <div id="feed" class="section active feed">
        <div class="post">
            <div class="post-header">
                <img src="https://via.placeholder.com/40" alt="Аватар">
                <strong>Анико_Любитель</strong>
            </div>
            <div class="post-content">
                <img src="https://via.placeholder.com/600x200" alt="Аниме изображение" style="width: 100%; border-radius: 8px;"/>
                Обожаю новый сезон "Attack on Titan"! Как вам развитие сюжета?
            </div>
        </div>
        <!-- Дополнительные посты будут добавляться здесь -->
    </div>

    <!-- Форма создания поста -->
    <div id="createPost" class="section create-post">
        <h2>Создать новый пост</h2>
        <textarea id="postContent" placeholder="Что у вас на уме?"></textarea>
        <button onclick="createPost()">Опубликовать</button>
    </div>

    <!-- Профиль пользователя -->
    <div id="profile" class="section profile">
        <div class="profile-header">
            <img src="https://via.placeholder.com/100" alt="Аватар">
            <div>
                <h2>Имя Пользователя</h2>
                <p>@nik_name</p>
            </div>
        </div>
        <div class="profile-content">
            <h3>О себе</h3>
            <p>Любитель аниме, манги и всего японского! 🎌</p>
            <h3>Мои посты</h3>
            <!-- Пользовательские посты будут отображаться здесь -->
        </div>
    </div>

    <!-- JavaScript для взаимодействия -->
    <script>
        // Функция для переключения секций
        function showSection(sectionId) {
            const sections = document.querySelectorAll('.section');
            sections.forEach(section => {
                if (section.id === sectionId) {
                    section.classList.add('active');
                } else {
                    section.classList.remove('active');
                }
            });
        }

        // Функция для создания нового поста
        function createPost() {
            const content = document.getElementById('postContent').value.trim();
            if (content === "") {
                alert("Пожалуйста, введите текст поста.");
                return;
            }

            // Создание элементов поста
            const post = document.createElement('div');
            post.className = 'post';

            const postHeader = document.createElement('div');
            postHeader.className = 'post-header';
            postHeader.innerHTML = `
                <img src="https://via.placeholder.com/40" alt="Аватар">
                <strong>Вы</strong>
            `;

            const postContent = document.createElement('div');
            postContent.className = 'post-content';
            postContent.textContent = content;

            post.appendChild(postHeader);
            post.appendChild(postContent);

            // Добавление поста в начало ленты
            const feed = document.getElementById('feed');
            feed.insertBefore(post, feed.firstChild);

            // Очистка текстовой области и переключение на ленту
            document.getElementById('postContent').value = "";
            showSection('feed');
        }
    </script>

</body>
</html>