# Этот HTML - код

Metaimperiya Metaimperiya

Это не учебник по верстке и не справочник по тегам. Это честный срез реальности человека, который живет внутри кода. От первой строки, написанной на коленке, до выстраивания архитектуры, которая держит на себе всё. Здесь нет «успешного успеха», зато есть бессонные ночи, поиск ошибки в пяти тысячах строк, бесконечные правки и то самое чувство, когда проект, наконец, оживает.

«Этот HTML-код» — это взгляд изнутри на то, как обычный текст превращается в работающую систему. Кусок жизни без купюр, где каждый тег — это история, а каждая закрытая скобка — маленький шаг к результату. Книга для тех, кто понимает, что разработка — это не про красивые офисы, а про умение не сдаваться, когда всё летит к чертям, а консоль выдает бесконечный список ошибок.

### Глава 1

<!DOCTYPE html>

<html lang="ru"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="robots" content="noindex, nofollow"> <title>METAIMPERIYA — Социальная платформа</title> <link rel="icon" href="assets/icons/metaimperiya.ico" sizes="any"> <link rel="icon" type="image/png" sizes="16x16" href="assets/icons/metaimperiya-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="assets/icons/metaimperiya-32x32.png"> <link rel="apple-touch-icon" href="assets/images/metaimperiya-192x192.png"> <link rel="manifest" href="site.webmanifest"> <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-database-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-auth-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/10.12.0/firebase-storage-compat.js"></script> <!-- ===== CSS ===== --> <link rel="stylesheet" href="css/core/base.css"> <link rel="stylesheet" href="css/core/reset.css"> <link rel="stylesheet" href="css/core/variables.css"> <link rel="stylesheet" href="css/features/feed.css"> <link rel="stylesheet" href="css/features/profile.css"> <link rel="stylesheet" href="css/features/friends.css"> <link rel="stylesheet" href="css/features/chat.css"> <link rel="stylesheet" href="css/features/modals.css"> <link rel="stylesheet" href="css/layout/grid.css"> <link rel="stylesheet" href="css/layout/panels.css"> <link rel="stylesheet" href="css/layout/sidebar.css"> <link rel="stylesheet" href="css/layout/topbar.css"> <link rel="stylesheet" href="css/modules/player.css"> <link rel="stylesheet" href="css/mobile.css"></head><body> <!-- ===== ТОП-БАР ===== --> <header class="pc-topbar" id="topbar"> METAIMPERIYA ️
<input class="search" placeholder="Поиск..." id="pcSearch"> <button onclick="openChatList()"></button> <button onclick="openNotifications()"></button> ?
<button onclick="toggleSettingsMenu()"></button>
</header> <!-- ===== САЙДБАР ===== -->
<button class="close-btn" onclick="closeSidebar()"></button> ?
Гость
Главная
Профиль
Люди
Группы
Фото
Страницы
Разделы
Новости
Видео
Музыка
Игры
Спорт
Уведомления
Чаты
Выйти
<!-- ===== КОНТЕЙНЕРЫ ===== -->
<!-- ===== ОСНОВНОЙ ЛЭЙАУТ ===== --> <!-- ЛЕВАЯ ПАНЕЛЬ --> Тренды
#метаимперия
#новости
#музыка
Статистика
Онлайн: 0
Постов: 0
<!-- ЦЕНТР --> <!-- ПЛЕЕР -->
ПЛЕЕР
Выберите трек
0:000:00
<button onclick="prevTrack()"></button> <button class="play-btn" id="playBtn" onclick="togglePlay()"></button> <button onclick="nextTrack()"></button> <button onclick="downloadCurrentTrack()">️</button>
<!-- ЛЕНТА --> <button onclick="formatText('bold')">B</button> <button onclick="formatText('italic')">I</button> <button onclick="formatText('underline')">U</button> <button onclick="formatText('strike')">S</button> <button onclick="formatText('h1')">H1</button> <button onclick="formatText('h2')">H2</button> <button onclick="formatText('quote')">"</button> <button onclick="formatText('code')"></></button> <button onclick="insertLink()"></button>
<label class="file-label" for="fileInput"> Фото</label> <button class="btn-submit" onclick="submitPost()"> Опубликовать</button> <button class="btn-cancel" onclick="clearPostForm()">Очистить</button>
<input type="file" id="fileInput" accept="image/*" class="hidden"> <button class="remove-pic" onclick="removeImage()"></button>
Группы
Все пользователи
?
Друзья: 0 Подписчики: 0 Подписки: 0
<button onclick="formatText('bold')">B</button> <button onclick="formatText('italic')">I</button> <button onclick="formatText('underline')">U</button> <button onclick="formatText('strike')">S</button> <button onclick="formatText('h1')">H1</button> <button onclick="formatText('h2')">H2</button> <button onclick="formatText('quote')">"</button> <button onclick="formatText('code')"></></button> <button onclick="insertLink()"></button>
<label class="file-label" for="fileInputProfile"> Фото</label> <button class="btn-submit" onclick="submitProfilePost()"> Опубликовать</button> <button class="btn-cancel" onclick="clearProfilePostForm()">Очистить</button>
<input type="file" id="fileInputProfile" accept="image/*" class="hidden"> <button class="remove-pic" onclick="removeProfileImage()"></button>
Мои посты
<button onclick="window.location.href='/'" style="background:none;border:none;color:var(--link-color);cursor:pointer;font-weight:600;"> Назад</button> Фото
<button onclick="formatText('bold')">B</button> <button onclick="formatText('italic')">I</button> <button onclick="formatText('underline')">U</button> <button onclick="formatText('strike')">S</button> <button onclick="formatText('h1')">H1</button> <button onclick="formatText('h2')">H2</button> <button onclick="formatText('quote')">"</button> <button onclick="formatText('code')"></></button> <button onclick="insertLink()"></button>
<label class="file-label" for="fileInputFoto"> Фото</label> <button class="btn-submit" onclick="submitFotoPost()"> Опубликовать</button> <button class="btn-cancel" onclick="clearFotoPostForm()">Очистить</button>
<input type="file" id="fileInputFoto" accept="image/*" class="hidden"> <button class="remove-pic" onclick="removeFotoImage()"></button>
<button class="back-btn" onclick="window.location.href='/'"> Назад</button>
<button class="back-btn" onclick="closeChat()"> Назад</button>
️ Печатает...
<input type="text" id="chatInput" placeholder="Сообщение..."> <button onclick="sendChatMessage()"></button>
<button class="back-btn" onclick="closePostPage()"> Назад</button>
<!-- ПРАВАЯ ПАНЕЛЬ --> Твой фрейм #1
Твой фрейм #2
<!-- ===== МОДАЛКИ ===== --> <button class="close-btn" onclick="closeLogin()"></button> Вход
<button class="btn-primary" onclick="document.getElementById('googleBtn').click()" style="width:100%;padding:12px;font-size:1rem;"> Войти через Google</button> <button id="googleBtn" style="display:none;"></button>
<button class="close-btn" onclick="closeEditProfile()"></button> ️ Редактировать профиль
<input type="text" id="editName" placeholder="Имя..."> <textarea id="editBio" placeholder="О себе..."></textarea> <button class="btn-primary" onclick="saveProfile()"> Сохранить</button> <button class="btn-secondary" onclick="closeEditProfile()">Отмена</button>
<button class="close-btn" onclick="closeEdit()"></button> ️ Редактировать пост
<input type="text" id="editMarquee" placeholder="Бегущая строка..."> <textarea id="editText" placeholder="Текст поста..." style="min-height:80px;"></textarea> <input type="text" id="editLink" placeholder="Ссылка для встраивания..."> <input type="text" id="editHashtags" placeholder="#хэштеги через пробел"> Размер фрейма: <button id="frameSizeSmall" class="btn-secondary" onclick="setFrameSize('small')" style="padding:2px 12px;font-size:0.6rem;"> Маленький</button> <button id="frameSizeLarge" class="btn-secondary" onclick="setFrameSize('large')" style="padding:2px 12px;font-size:0.6rem;">️ Большой</button>
<button onclick="addEditBtn()" style="background:none;border:none;color:var(--link-color);cursor:pointer;font-size:0.7rem;padding:4px 0;"> Добавить кнопку</button> <button class="btn-primary" onclick="saveEdit()"> Сохранить</button> <button class="btn-secondary" onclick="closeEdit()">Отмена</button> <button class="btn-danger" onclick="deleteEditPost()" style="margin-left:auto;"> Удалить</button>
<button class="close-btn" onclick="closeNotifications()"></button> Уведомления
<button class="close-btn" onclick="closeRepost()"></button> Репост
<input type="hidden" id="repostPostId"> <input type="hidden" id="repostType"> <textarea id="repostText" placeholder="Напишите что-нибудь (необязательно)..." style="min-height:60px;"></textarea> <button class="btn-primary" onclick="submitRepost()"> Репостнуть</button> <button class="btn-secondary" onclick="closeRepost()">Отмена</button>
<button class="close-btn" onclick="closeChatList()"></button> Чаты
<!-- ================================================================ --><!-- ПОДКЛЮЧЕНИЕ JS-ФАЙЛОВ - ПРАВИЛЬНЫЙ ПОРЯДОК --><!-- ================================================================ --><!-- 1. CORE --><script src="js/core/firebase.js"></script><script src="js/core/lang.js"></script><script src="js/core/auth.js"></script><script src="js/core/app.js"></script><!-- 2. МОДУЛИ --><script src="js/modules/player.js"></script><!-- 3. ЛЕНТА (ГЛАВНАЯ) --><script src="js/features/feed.js"></script><!-- 4. ФИЧИ ЛЕНТЫ --><script src="js/features/postMenu.js"></script><script src="js/features/likes.js"></script><script src="js/features/comments.js"></script><script src="js/features/reposts.js"></script><!-- 5. ОСТАЛЬНЫЕ ФИЧИ --><script src="js/features/profile.js"></script><script src="js/features/friends.js"></script><script src="js/features/groups.js"></script><script src="js/features/chat.js"></script><script src="js/features/notifications.js"></script><script src="js/features/admin.js"></script><script src="js/features/page.js"></script></body></html>Этот HTML-код представляет собой структуру основной страницы социальной платформы «METAIMPERIYA»