/
BirdLeon
/
pcsocial
Обзор
Документация
Войти
/
BirdLeon
/
pcsocial
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
HTML/index.html
494 строки
28 KB
BirdLeon
create: README-1.md, ИНСТРУКЦИЯ.txt, ПОЛНАЯ_ДОКУМЕНТАЦИЯ.md, New file, auth.js, feed.js, main.js, messages.js, profile.js, utils.js, responsive.css, styles.css, index.html, logo.png, logo.svg, database.sql
23 фев 2026, 18:54
Верифицирован
23 фев 2026, 18:54
76579db
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PalomaCreep - Социальная сеть</title> <link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/responsive.css"> <link rel="icon" type="image/png" href="assets/images/favicon.png"> </head> <body> <div id="root"> <!-- Loading Screen --> <div id="loadingScreen" class="loading-screen"> <div class="loader"></div> <p>Загрузка PalomaCreep...</p> </div> <!-- Main Container --> <div class="main-container" id="mainContainer" style="display: none;"> <!-- Navigation Bar --> <nav class="navbar" id="navbar"> <div class="nav-container"> <div class="nav-logo"> <img src="assets/images/logo.svg" alt="PalomaCreep"> <span>PalomaCreep</span> </div> <div class="nav-search"> <input type="text" id="searchInput" placeholder="Поиск людей, сообществ..."> <button class="search-btn"><i class="icon-search"></i></button> </div> <div class="nav-menu"> <a href="#home" class="nav-item active" data-page="home"><i class="icon-home"></i><span>Главная</span></a> <a href="#people" class="nav-item" data-page="people"><i class="icon-people"></i><span>Люди</span></a> <a href="#communities" class="nav-item" data-page="communities"><i class="icon-community"></i><span>Сообщества</span></a> <a href="#messages" class="nav-item" data-page="messages"><i class="icon-message"></i><span>Сообщения</span></a> <a href="#notifications" class="nav-item" data-page="notifications"><i class="icon-bell"></i><span>Уведомления</span><span class="notification-badge" id="notificationBadge" style="display: none;">0</span></a> </div> <div class="nav-right"> <button class="btn-icon" id="darkModeToggle"><i class="icon-moon"></i></button> <div class="user-menu"> <button class="user-avatar-btn" id="userMenuToggle"> <img id="userAvatarNav" src="assets/images/default-avatar.png" alt="Profile"> </button> <div class="user-dropdown" id="userDropdown"> <a href="#profile" data-page="profile"><i class="icon-user"></i>Профиль</a> <a href="#settings" data-page="settings"><i class="icon-settings"></i>Настройки</a> <a href="#support" data-page="support"><i class="icon-help"></i>Поддержка</a> <hr> <button id="logoutBtn"><i class="icon-logout"></i>Выход</button> </div> </div> </div> </div> </nav> <!-- Sidebar --> <aside class="sidebar" id="sidebar"> <div class="sidebar-section"> <h3>Навигация</h3> <ul class="sidebar-menu"> <li><a href="#home" data-page="home"><i class="icon-home"></i>Лента</a></li> <li><a href="#videos" data-page="videos"><i class="icon-video"></i>Видео</a></li> <li><a href="#shorts" data-page="shorts"><i class="icon-play"></i>Короткие видео</a></li> <li><a href="#music" data-page="music"><i class="icon-music"></i>Музыка</a></li> <li><a href="#games" data-page="games"><i class="icon-game"></i>Игры</a></li> </ul> </div> <div class="sidebar-section"> <h3>Ваши сообщества</h3> <ul class="sidebar-menu" id="communitiesList"> <!-- Динамически заполнится --> </ul> </div> </aside> <!-- Main Content --> <main class="main-content" id="mainContent"> <!-- Home Feed --> <section id="homePage" class="page active"> <div class="feed-container"> <!-- Create Post --> <div class="post-creator"> <img id="userAvatarPost" src="assets/images/default-avatar.png" alt="Your Avatar" class="creator-avatar"> <div class="creator-input"> <textarea id="postInput" placeholder="Что нового?" maxlength="5000"></textarea> <div class="creator-actions"> <button class="creator-btn" id="attachImageBtn"><i class="icon-image"></i></button> <button class="creator-btn" id="attachVideoBtn"><i class="icon-video"></i></button> <button class="creator-btn" id="attachEmojiBtn"><i class="icon-emoji"></i></button> <button class="btn-primary" id="publishPostBtn">Опубликовать</button> </div> </div> </div> <!-- Posts Feed --> <div id="postsFeed" class="posts-feed"> <!-- Динамически заполнится --> </div> </div> <!-- Right Sidebar (Ads/Suggestions) --> <aside class="right-sidebar"> <div class="suggestions-card"> <h3>Люди на PalomaCreep</h3> <div id="suggestionsList" class="suggestions-list"> <!-- Динамически заполнится --> </div> </div> </aside> </section> <!-- Videos Page --> <section id="videosPage" class="page"> <div class="videos-container"> <h2>Видеохостинг</h2> <button class="btn-primary" id="uploadVideoBtn">Загрузить видео</button> <div id="videosList" class="videos-grid"> <!-- Динамически заполнится --> </div> </div> </section> <!-- Short Videos Page --> <section id="shortsPage" class="page"> <div class="shorts-container"> <h2>Короткие видео</h2> <div id="shortsList" class="shorts-grid"> <!-- Динамически заполнится --> </div> </div> </section> <!-- Music Page --> <section id="musicPage" class="page"> <div class="music-container"> <h2>Мои плейлисты</h2> <button class="btn-primary" id="createPlaylistBtn">Создать плейлист</button> <div id="playlistsList" class="playlists-grid"> <!-- Динамически заполнится --> </div> </div> </section> <!-- Games Page --> <section id="gamesPage" class="page"> <div class="games-container"> <h2>Игры на PalomaCreep</h2> <div id="gamesList" class="games-grid"> <!-- Динамически заполнится --> </div> </div> </section> <!-- People Page --> <section id="peoplePage" class="page"> <div class="people-container"> <h2>Люди</h2> <div class="people-filters"> <input type="text" id="peopleSearchInput" placeholder="Поиск людей..."> </div> <div id="peopleList" class="people-grid"> <!-- Динамически заполнится --> </div> </div> </section> <!-- Communities Page --> <section id="communitiesPage" class="page"> <div class="communities-container"> <h2>Сообщества</h2> <button class="btn-primary" id="createCommunityBtn">Создать сообщество</button> <div id="communitiesList2" class="communities-grid"> <!-- Динамически заполнится --> </div> </div> </section> <!-- Messages Page --> <section id="messagesPage" class="page"> <div class="messages-container"> <div class="messages-list-panel"> <h2>Сообщения</h2> <div id="conversationsList" class="conversations-list"> <!-- Динамически заполнится --> </div> </div> <div class="messages-chat-panel"> <div id="chatHeader" class="chat-header" style="display: none;"> <img id="chatUserAvatar" src="assets/images/default-avatar.png" alt=""> <div> <h3 id="chatUserName">Выберите чат</h3> </div> </div> <div id="messagesBox" class="messages-box"> <p style="text-align: center; color: #999;">Выберите разговор</p> </div> <div id="messageInputPanel" class="message-input-panel" style="display: none;"> <input type="text" id="messageInput" placeholder="Напишите сообщение..." maxlength="1000"> <button id="sendMessageBtn" class="btn-primary"><i class="icon-send"></i></button> </div> </div> </div> </section> <!-- Profile Page --> <section id="profilePage" class="page"> <div class="profile-container"> <div class="profile-header"> <img id="profileBanner" src="assets/images/default-banner.png" alt="Banner" class="profile-banner"> <div class="profile-info"> <img id="profileAvatar" src="assets/images/default-avatar.png" alt="Avatar" class="profile-avatar"> <div class="profile-details"> <h1 id="profileName">Имя пользователя</h1> <p id="profileBio">Биография</p> <div class="profile-stats"> <div class="stat"> <span class="stat-number" id="postsCount">0</span> <span class="stat-label">Постов</span> </div> <div class="stat"> <span class="stat-number" id="followersCount">0</span> <span class="stat-label">Подписчиков</span> </div> <div class="stat"> <span class="stat-number" id="followingCount">0</span> <span class="stat-label">Подписок</span> </div> </div> <div class="profile-actions" id="profileActions"> <!-- Динамически заполнится --> </div> </div> </div> </div> <div class="profile-tabs"> <button class="tab-btn active" data-tab="posts"><i class="icon-post"></i>Посты</button> <button class="tab-btn" data-tab="media"><i class="icon-image"></i>Медиа</button> <button class="tab-btn" data-tab="likes"><i class="icon-heart"></i>Нравится</button> <button class="tab-btn" data-tab="friends"><i class="icon-people"></i>Друзья</button> </div> <div class="profile-content"> <div id="profilePostsTab" class="tab-content active"> <!-- Динамически заполнится --> </div> <div id="profileMediaTab" class="tab-content"></div> <div id="profileLikesTab" class="tab-content"></div> <div id="profileFriendsTab" class="tab-content"></div> </div> </div> </section> <!-- Settings Page --> <section id="settingsPage" class="page"> <div class="settings-container"> <h2>Настройки</h2> <div class="settings-tabs"> <button class="settings-tab-btn active" data-tab="account">Аккаунт</button> <button class="settings-tab-btn" data-tab="privacy">Приватность</button> <button class="settings-tab-btn" data-tab="notifications">Уведомления</button> <button class="settings-tab-btn" data-tab="display">Дисплей</button> </div> <div class="settings-content"> <!-- Account Settings --> <div id="accountSettings" class="settings-tab-content active"> <div class="settings-group"> <label>Email</label> <input type="email" id="settingsEmail" readonly> </div> <div class="settings-group"> <label>Текущий пароль</label> <input type="password" id="currentPassword"> </div> <div class="settings-group"> <label>Новый пароль</label> <input type="password" id="newPassword"> </div> <div class="settings-group"> <label>Подтвердите пароль</label> <input type="password" id="confirmPassword"> </div> <button class="btn-primary" id="changePasswordBtn">Изменить пароль</button> </div> <!-- Privacy Settings --> <div id="privacySettings" class="settings-tab-content"> <div class="settings-group"> <label>Уровень приватности профиля</label> <select id="privacyLevel"> <option value="public">Публичный</option> <option value="friends">Только друзья</option> <option value="private">Приватный</option> </select> </div> <div class="settings-group checkbox"> <input type="checkbox" id="showOnlineStatus"> <label>Показывать статус онлайна</label> </div> <div class="settings-group checkbox"> <input type="checkbox" id="allowStrangersMessages"> <label>Разрешить сообщения от незнакомцев</label> </div> <button class="btn-primary" id="savePrivacyBtn">Сохранить</button> </div> <!-- Notifications Settings --> <div id="notificationsSettings" class="settings-tab-content"> <div class="settings-group checkbox"> <input type="checkbox" id="enableNotifications"> <label>Включить уведомления</label> </div> <div class="settings-group checkbox"> <input type="checkbox" id="enableEmailNotifications"> <label>Email уведомления</label> </div> <button class="btn-primary" id="saveNotificationsBtn">Сохранить</button> </div> <!-- Display Settings --> <div id="displaySettings" class="settings-tab-content"> <div class="settings-group"> <label>Тема</label> <select id="themeSelect"> <option value="light">Светлая</option> <option value="dark">Тёмная</option> </select> </div> <button class="btn-primary" id="saveDisplayBtn">Сохранить</button> </div> </div> </div> </section> <!-- Support Page --> <section id="supportPage" class="page"> <div class="support-container"> <h2>Техническая поддержка</h2> <div class="support-content"> <div class="support-faq"> <h3>Часто задаваемые вопросы</h3> <div class="faq-item"> <h4>Как создать аккаунт?</h4> <p>Нажмите кнопку "Регистрация" и заполните необходимые поля.</p> </div> <div class="faq-item"> <h4>Как восстановить пароль?</h4> <p>На странице входа нажмите "Забыли пароль?" и следуйте инструкциям.</p> </div> </div> <div class="support-form"> <h3>Создать ticket поддержки</h3> <form id="supportForm"> <input type="text" id="supportSubject" placeholder="Тема" required> <select id="supportCategory"> <option value="">Выберите категорию</option> <option value="technical">Техническая проблема</option> <option value="account">Проблема с аккаунтом</option> <option value="content">Проблема с контентом</option> <option value="other">Другое</option> </select> <textarea id="supportMessage" placeholder="Описание проблемы" maxlength="2000"></textarea> <button type="submit" class="btn-primary">Отправить</button> </form> </div> </div> </div> </section> <!-- Ban Page --> <section id="banPage" class="page"> <div class="ban-container"> <div class="ban-message"> <h1>Ваш аккаунт заблокирован</h1> <p id="banReason">Причина блокировки будет указана здесь</p> <p id="banDate">Дата блокировки: <span id="banDateText"></span></p> <p id="unbanDate" style="display: none;">Разблокировка: <span id="unbanDateText"></span></p> <button class="btn-primary" id="appealBanBtn">Подать жалобу</button> </div> </div> </section> </main> </div> <!-- Auth Container (Login/Register) --> <div id="authContainer" class="auth-container"> <div class="auth-box"> <div class="auth-logo"> <img src="assets/images/logo.svg" alt="PalomaCreep"> <h1>PalomaCreep</h1> </div> <!-- Login Form --> <div id="loginForm" class="auth-form active"> <h2>Вход</h2> <form id="loginFormElement"> <div class="form-group"> <label for="loginEmail">Email или имя пользователя</label> <input type="text" id="loginEmail" required> </div> <div class="form-group"> <label for="loginPassword">Пароль</label> <input type="password" id="loginPassword" required> </div> <button type="submit" class="btn-primary btn-block">Войти</button> </form> <p>Нет аккаунта? <a href="#" id="switchToRegister">Зарегистрироваться</a></p> </div> <!-- Register Form --> <div id="registerForm" class="auth-form"> <h2>Регистрация</h2> <form id="registerFormElement"> <div class="form-group"> <label for="registerFirstName">Имя</label> <input type="text" id="registerFirstName" required> </div> <div class="form-group"> <label for="registerLastName">Фамилия</label> <input type="text" id="registerLastName" required> </div> <div class="form-group"> <label for="registerUsername">Имя пользователя</label> <input type="text" id="registerUsername" required> </div> <div class="form-group"> <label for="registerEmail">Email</label> <input type="email" id="registerEmail" required> </div> <div class="form-group"> <label for="registerPassword">Пароль</label> <input type="password" id="registerPassword" required> </div> <div class="form-group"> <label for="registerConfirmPassword">Подтвердите пароль</label> <input type="password" id="registerConfirmPassword" required> </div> <div class="form-group checkbox"> <input type="checkbox" id="termsAccept" required> <label>Я согласен с условиями использования</label> </div> <button type="submit" class="btn-primary btn-block">Зарегистрироваться</button> </form> <p>Уже есть аккаунт? <a href="#" id="switchToLogin">Войти</a></p> </div> </div> </div> </div> <!-- Modals --> <div id="imageUploadModal" class="modal"> <div class="modal-content"> <span class="close-modal">×</span> <h2>Загрузить изображение</h2> <input type="file" id="imageUploadInput" accept="image/*"> <button class="btn-primary" id="confirmImageUploadBtn">Загрузить</button> </div> </div> <div id="videoUploadModal" class="modal"> <div class="modal-content"> <span class="close-modal">×</span> <h2>Загрузить видео</h2> <input type="file" id="videoUploadInput" accept="video/*"> <button class="btn-primary" id="confirmVideoUploadBtn">Загрузить</button> </div> </div> <div id="reportModal" class="modal"> <div class="modal-content"> <span class="close-modal">×</span> <h2>Пожаловаться</h2> <form id="reportForm"> <select id="reportReason" required> <option value="">Выберите причину</option> <option value="spam">Спам</option> <option value="harassment">Харассмент</option> <option value="hate">Ненавистный контент</option> <option value="inappropriate">Неподобающий контент</option> <option value="other">Другое</option> </select> <textarea id="reportDescription" placeholder="Описание..." maxlength="500"></textarea> <button type="submit" class="btn-primary">Отправить жалобу</button> </form> </div> </div> <script src="js/main.js"></script> <script src="js/auth.js"></script> <script src="js/feed.js"></script> <script src="js/messages.js"></script> <script src="js/profile.js"></script> <script src="js/utils.js"></script> </body> </html>