Добавь в мой код больше красок и дизайна, переработай интерфейс и стили добавь анимации ,  сделай расположения интерфейса как у твич <!-- public/index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Платформа трансляций</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container" id="mainContainer">
        <!-- Главный экран -->
        <div id="welcomeScreen">
            <h1>Добро пожаловать на платформу трансляций</h1>
            <div class="buttons">
                <button id="startStreamerBtn" class="btn">Начать трансляцию</button>
                <button id="startViewerBtn" class="btn">Смотреть трансляции</button>
            </div>
        </div>

        <!-- Экран стримера -->
        <div id="streamerScreen" style="display: none;">
            <h2>Начать трансляцию</h2>
            
            <!-- Выбор источника трансляции -->
            <div class="source-selection">
                <label>
                    <input type="radio" name="source" value="camera" checked>
                    Веб-камера
                </label>
                <label>
                    <input type="radio" name="source" value="file">
                    Видео-файл
                </label>
            </div>
            
            <!-- Загрузка видео-файла -->
            <div id="fileInputContainer" style="display: none; margin-top: 15px;">
                <input type="file" id="videoFileInput" accept="video/*">
            </div>

            <!-- Выбор категории трансляции -->
            <div class="category-selection" style="margin-top: 15px;">
                <label for="category">Категория:</label>
                <select id="category">
                    <option value="gaming">Игры</option>
                    <option value="music">Музыка</option>
                    <option value="education">Образование</option>
                    <option value="other">Другое</option>
                </select>
            </div>
            
            <!-- Кнопки управления трансляцией -->
            <div class="buttons">
                <button id="startStreamBtn" class="btn">Начать стрим</button>
                <button id="endStreamBtn" class="btn" style="display:none;">Закончить стрим</button>
            </div>
            
            <!-- Информация о трансляции -->
            <div id="streamInfo" style="display:none; margin-top: 20px;">
                <p>Трансляция активна! Ссылка для зрителей:</p>
                <input type="text" id="streamLink" readonly>
                <!-- Видео для локального отображения
                <video id="localVideo" autoplay muted playsinline></video> -->
                <!-- Видео-файл, который транслируется -->
                <video id="uploadedVideo" style="display:none;" autoplay muted ></video>
                <!-- Прогресс-бар -->
                <div id="progressContainer">
                    <progress id="videoProgress" value="0" max="100"></progress>
                    <span id="progressLabel">0%</span>
                </div>
                <!-- Чат -->
                <div class="chatContainer">
                    <div class="chatMessages"></div>
                    <form class="chatForm">
                        <input type="text" class="chatInput" placeholder="Введите сообщение...">
                        <button type="submit">Отправить</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Экран зрителя -->
        <div id="viewerScreen" style="display: none;">
            <h2>Активные трансляции</h2>
            <!-- Фильтр по категориям -->
            <div class="filter-section">
                <label for="filterCategory">Фильтр по категории:</label>
                <select id="filterCategory">
                    <option value="all">Все</option>
                    <option value="gaming">Игры</option>
                    <option value="music">Музыка</option>
                    <option value="education">Образование</option>
                    <option value="other">Другое</option>
                </select>
            </div>
            <ul id="streamsList">
                <!-- Список активных стримов будет динамически заполнен -->
            </ul>
        </div>

        <!-- Экран просмотра трансляции -->
        <div id="streamScreen" style="display: none;">
            <h2>Просмотр трансляции</h2>
            <div id="streamContainer">
                <video id="remoteVideo" autoplay playsinline controls></video>
                <!-- Чат -->
                <div class="chatContainer">
                    <div class="chatMessages"></div>
                    <form class="chatForm">
                        <input type="text" class="chatInput" placeholder="Введите сообщение...">
                        <button type="submit">Отправить</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script src="js/main.js"></script>
</body>
</html>