 HTML - 
Metaimperiya Metaimperiya


         .     ,    .   ,   ,   ,     .    ,    ,      ,      ,  , , .

 HTML-      ,       .    ,      ,         .   ,  ,        ,     ,     ,      .





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><div class="app" id="app">    <!-- ===== - ===== -->    <header class="pc-topbar" id="topbar">        <div class="logo">            <span class="menu-icon" onclick="toggleSidebar()"></span>            <span onclick="goToFeed()">METAIMPERIYA ?</span>        </div>        <input class="search" placeholder="..." id="pcSearch">        <div class="right">            <button onclick="openChatList()"></button>            <button onclick="openNotifications()"></button>            <div class="avatar-wrap" id="pcAvatar" onclick="goToProfile()">                <span class="letter">?</span>            </div>            <span class="username" id="pcName" onclick="goToProfile()"></span>            <button onclick="toggleSettingsMenu()"></button>        </div>    </header>    <!-- =====  ===== -->    <div class="sidebar-overlay" id="sidebarOverlay" onclick="closeSidebar()"></div>    <div class="sidebar" id="sidebar">        <button class="close-btn" onclick="closeSidebar()"></button>        <div class="user-info">            <div class="avatar-wrap" id="sAvatar"><span class="letter">?</span></div>            <div>                <div class="name" id="sName"></div>                <div class="email" id="sEmail"></div>            </div>        </div>        <div class="menu-item" onclick="goToFeed();closeSidebar();"><span class="icon"></span> </div>        <div class="menu-item" onclick="goToProfile();closeSidebar();"><span class="icon"></span> </div>        <div class="menu-item" onclick="goToPeople();closeSidebar();"><span class="icon"></span> </div>        <div class="menu-item" onclick="goToGroups();closeSidebar();"><span class="icon"></span> </div>        <div class="menu-divider"></div>        <div class="menu-item" onclick="openPage('foto');closeSidebar();"><span class="icon"></span> </div>        <div class="menu-item" onclick="openPage('page');closeSidebar();"><span class="icon"></span> </div>        <div class="menu-divider"></div>        <div style="font-size:0.6rem;color:var(--muted-text);padding:4px 12px;text-transform:uppercase;"> </div>        <div class="menu-sub">            <div class="menu-item" onclick="window.location.href='pages/news/novosti.html';closeSidebar();"><span class="icon"></span> </div>            <div class="menu-item" onclick="window.location.href='pages/multimedia/video.html';closeSidebar();"><span class="icon"></span> </div>            <div class="menu-item" onclick="window.location.href='pages/multimedia/muzyka.html';closeSidebar();"><span class="icon"></span> </div>            <div class="menu-item" onclick="window.location.href='pages/life/igry.html';closeSidebar();"><span class="icon"></span> </div>            <div class="menu-item" onclick="window.location.href='pages/life/sport.html';closeSidebar();"><span class="icon"></span> </div>        </div>        <div class="menu-divider"></div>        <div class="menu-item" onclick="openNotifications();closeSidebar();"><span class="icon"></span> </div>        <div class="menu-item" onclick="openChatList();closeSidebar();"><span class="icon"></span> </div>        <div class="menu-divider"></div>        <div class="menu-item" onclick="logout();closeSidebar();"><span class="icon"></span> </div>    </div>    <!-- =====  ===== -->    <div id="settingsContainer"></div>    <div id="modalsContainer"></div>    <div id="playerContainer"></div>    <!-- =====   ===== -->    <div class="app-layout" id="appLayout">        <!--   -->        <div class="panel-left" id="panelLeft">            <div class="panel-card">                <div class="panel-title"> </div>                <div class="panel-item">#</div>                <div class="panel-item">#</div>                <div class="panel-item">#</div>            </div>            <div class="panel-card">                <div class="panel-title"> </div>                <div class="panel-item"> : <span id="onlineCount">0</span></div>                <div class="panel-item"> : <span id="totalPosts">0</span></div>            </div>        </div>        <!--  -->        <div class="panel-center">            <!--  -->            <div class="player-drawer" id="playerDrawer">                <div class="handle" onclick="toggleDrawer()">                    <div class="bar"></div>   <div class="bar"></div>                </div>                <div class="content" id="playerContent">                    <div class="track-info"><div class="track-name" id="currentTrackName"> </div></div>                    <div class="progress-wrap" id="progressWrap"><div class="progress-fill" id="progressFill"></div></div>                    <div class="time-wrap"><span id="currentTime">0:00</span><span id="totalTime">0:00</span></div>                    <div class="controls">                        <button onclick="prevTrack()"></button>                        <button class="play-btn" id="playBtn" onclick="togglePlay()"></button>                        <button onclick="nextTrack()"></button>                        <button onclick="downloadCurrentTrack()">?</button>                    </div>                    <div class="playlist" id="playlistContainer"></div>                </div>            </div>            <!--  -->            <div class="page active" id="page-feed">                <div class="card">                    <div class="post-form">                        <div class="editor-toolbar">                            <button onclick="formatText('bold')"><b>B</b></button>                            <button onclick="formatText('italic')"><i>I</i></button>                            <button onclick="formatText('underline')"><u>U</u></button>                            <button onclick="formatText('strike')"><s>S</s></button>                            <button onclick="formatText('h1')">H1</button>                            <button onclick="formatText('h2')">H2</button>                            <button onclick="formatText('quote')">"</button>                            <button onclick="formatText('code')">&lt;/&gt;</button>                            <button onclick="insertLink()"></button>                        </div>                        <div contenteditable="true" id="postEditor" class="post-editor" placeholder="   ?"></div>                        <div class="post-actions">                            <label class="file-label" for="fileInput"> </label>                            <button class="btn-submit" onclick="submitPost()"> </button>                            <button class="btn-cancel" onclick="clearPostForm()"></button>                        </div>                        <input type="file" id="fileInput" accept="image/*" class="hidden">                        <div class="preview-box" id="previewBox">                            <img id="previewImg"><span id="previewName"></span>                            <button class="remove-pic" onclick="removeImage()"></button>                        </div>                    </div>                </div>                <div id="feed"></div>            </div>            <div class="page" id="page-groups"><div class="card"><h3> </h3><div class="group-list" id="groupList"></div></div></div>            <div class="page" id="page-people"><div class="card"><h3>  </h3><div class="people-list" id="peopleList"></div></div></div>            <div class="page" id="page-profile">                <div class="profile-header">                    <div class="avatar-wrap" id="profileAvatar" onclick="uploadAvatar()"><span class="letter">?</span></div>                    <div class="name" id="profileName"></div>                    <div class="bio" id="profileBio"></div>                    <div class="profile-stats">                        <span> : <span id="friendsCount" class="stat-clickable">0</span></span>                        <span> : <span id="subscribersCount" class="stat-clickable">0</span></span>                        <span> : <span id="subscriptionsCount" class="stat-clickable">0</span></span>                    </div>                    <div class="profile-actions" id="profileActions"></div>                </div>                <div class="card" style="margin-top:8px;">                    <div class="post-form">                        <div class="editor-toolbar">                            <button onclick="formatText('bold')"><b>B</b></button>                            <button onclick="formatText('italic')"><i>I</i></button>                            <button onclick="formatText('underline')"><u>U</u></button>                            <button onclick="formatText('strike')"><s>S</s></button>                            <button onclick="formatText('h1')">H1</button>                            <button onclick="formatText('h2')">H2</button>                            <button onclick="formatText('quote')">"</button>                            <button onclick="formatText('code')">&lt;/&gt;</button>                            <button onclick="insertLink()"></button>                        </div>                        <div contenteditable="true" id="postEditorProfile" class="post-editor" placeholder="     ?"></div>                        <div class="post-actions">                            <label class="file-label" for="fileInputProfile"> </label>                            <button class="btn-submit" onclick="submitProfilePost()"> </button>                            <button class="btn-cancel" onclick="clearProfilePostForm()"></button>                        </div>                        <input type="file" id="fileInputProfile" accept="image/*" class="hidden">                        <div class="preview-box" id="previewBoxProfile">                            <img id="previewImgProfile"><span id="previewNameProfile"></span>                            <button class="remove-pic" onclick="removeProfileImage()"></button>                        </div>                    </div>                </div>                <h4 style="margin:10px 0 6px;">  </h4>                <div id="profilePosts"></div>            </div>            <div class="page" id="page-foto" style="display:none;">                <div style="padding-top:10px;">                    <button onclick="window.location.href='/'" style="background:none;border:none;color:var(--link-color);cursor:pointer;font-weight:600;"> </button>                    <h1> </h1>                    <div class="card" style="margin-top:10px;">                        <div class="post-form">                            <div class="editor-toolbar">                                <button onclick="formatText('bold')"><b>B</b></button>                                <button onclick="formatText('italic')"><i>I</i></button>                                <button onclick="formatText('underline')"><u>U</u></button>                                <button onclick="formatText('strike')"><s>S</s></button>                                <button onclick="formatText('h1')">H1</button>                                <button onclick="formatText('h2')">H2</button>                                <button onclick="formatText('quote')">"</button>                                <button onclick="formatText('code')">&lt;/&gt;</button>                                <button onclick="insertLink()"></button>                            </div>                            <div contenteditable="true" id="postEditorFoto" class="post-editor" placeholder="    ?"></div>                            <div class="post-actions">                                <label class="file-label" for="fileInputFoto"> </label>                                <button class="btn-submit" onclick="submitFotoPost()"> </button>                                <button class="btn-cancel" onclick="clearFotoPostForm()"></button>                            </div>                            <input type="file" id="fileInputFoto" accept="image/*" class="hidden">                            <div class="preview-box" id="previewBoxFoto">                                <img id="previewImgFoto"><span id="previewNameFoto"></span>                                <button class="remove-pic" onclick="removeFotoImage()"></button>                            </div>                        </div>                    </div>                    <div id="fotoFeed"></div>                </div>            </div>            <div class="page" id="page-page" style="display:none;">                <div style="padding:6px 0;"><button class="back-btn" onclick="window.location.href='/'"> </button></div>                <div id="pageContainer"></div>            </div>            <div class="chat-view" id="chatView">                <button class="back-btn" onclick="closeChat()"> </button>                <div class="chat-messages" id="chatMessages"></div>                <div id="typingIndicator" style="display:none;color:var(--text-secondary);font-size:0.6rem;padding:4px 8px;">? ...</div>                <div class="chat-input">                    <input type="text" id="chatInput" placeholder="...">                    <button onclick="sendChatMessage()"></button>                </div>            </div>            <div class="page" id="postPage">                <div style="padding:6px 0;"><button class="back-btn" onclick="closePostPage()"> </button></div>                <div id="postPageContainer"></div>            </div>        </div>        <!--   -->        <div class="panel-right" id="panelRight">            <div class="panel-card" style="min-height:300px;">                <div style="color:var(--muted-text);font-size:0.65rem;text-align:center;padding:10px;">   #1</div>            </div>            <div class="panel-card" style="min-height:200px;">                <div style="color:var(--muted-text);font-size:0.65rem;text-align:center;padding:10px;">   #2</div>            </div>        </div>    </div>    <div class="admin-dot" id="adminDot" onclick="adminLogin()"></div>    <!-- =====  ===== -->    <div class="modal-overlay" id="loginModal">        <div class="modal-box">            <button class="close-btn" onclick="closeLogin()"></button>            <h3> </h3>            <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>        </div>    </div>    <div class="modal-overlay" id="editProfileModal">        <div class="modal-box">            <button class="close-btn" onclick="closeEditProfile()"></button>            <h3>?  </h3>            <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>        </div>    </div>    <div class="modal-overlay" id="editModal">        <div class="modal-box">            <button class="close-btn" onclick="closeEdit()"></button>            <h3>?  </h3>            <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="#  ">            <div style="margin:8px 0;display:flex;gap:8px;align-items:center;">                <span style="font-size:0.7rem;color:var(--text-secondary);"> :</span>                <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>            </div>            <div id="editButtonsContainer"></div>            <button onclick="addEditBtn()" style="background:none;border:none;color:var(--link-color);cursor:pointer;font-size:0.7rem;padding:4px 0;">  </button>            <div style="margin-top:8px;display:flex;gap:8px;">                <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>            </div>        </div>    </div>    <div class="modal-overlay" id="notificationsModal">        <div class="modal-box">            <button class="close-btn" onclick="closeNotifications()"></button>            <h3> </h3>            <div id="notificationsList"></div>        </div>    </div>    <div class="modal-overlay" id="repostModal">        <div class="modal-box">            <button class="close-btn" onclick="closeRepost()"></button>            <h3> </h3>            <input type="hidden" id="repostPostId">            <input type="hidden" id="repostType">            <textarea id="repostText" placeholder=" - ()..." style="min-height:60px;"></textarea>            <div style="display:flex;gap:8px;">                <button class="btn-primary" onclick="submitRepost()"> </button>                <button class="btn-secondary" onclick="closeRepost()"></button>            </div>        </div>    </div>    <div class="modal-overlay" id="chatListModal">        <div class="modal-box">            <button class="close-btn" onclick="closeChatList()"></button>            <h3> </h3>            <div id="chatListContainer"></div>        </div>    </div></div><!-- ================================================================ --><!--  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




  .


   .

   ,     (https://www.litres.ru/pages/biblio_book/?art=74193689)  .

      Visa, MasterCard, Maestro,    ,   ,     ,  PayPal, WebMoney, ., QIWI ,       .


