https://pastein.ru/t/KBS
Загрузка данных
<!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">
<title>DarkMessage Alpha 9.0</title>
<!-- Tailwind и FontAwesome -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Гарантированные стили, если Tailwind не загрузится */
body { background-color: #f1f4f7; color: #000; font-family: 'Inter', -apple-system, sans-serif; margin: 0; padding: 0; height: 100vh; overflow: hidden; }
.hidden { display: none !important; }
/* Навигация */
.nav-bar { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-top: 1px solid #e5e7eb; position: fixed; bottom: 0; width: 100%; display: flex; justify-content: space-around; padding: 10px 0 35px 0; z-index: 1000; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; font-size: 11px; color: #8e8e93; font-weight: 600; cursor: pointer; text-decoration: none; border: none; background: none; }
.nav-item.active { color: #0088cc; }
.nav-item i { font-size: 22px; margin-bottom: 4px; padding: 5px 15px; border-radius: 15px; transition: 0.2s; }
.nav-item.active i { background: #e1f5fe; color: #0088cc; }
/* Контейнеры экранов */
.screen { height: 100vh; overflow-y: auto; padding-bottom: 110px; box-sizing: border-box; }
.white-card { background: #fff; border-radius: 15px; margin: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
/* Настройки (как на скрине) */
.row { display: flex; align-items: center; gap: 15px; padding: 12px 16px; border-bottom: 1px solid #f2f2f2; cursor: pointer; }
.row:active { background: #f5f5f5; }
.row:last-child { border-bottom: none; }
.icon-box { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
/* Профиль (как на скрине) */
.profile-header { background: #fff; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.avatar-circle { width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #ce9ffc 0%, #7367f0 100%); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 10px 20px rgba(115, 103, 240, 0.3); }
.avatar-icon { font-size: 40px; color: #fff; opacity: 0.8; }
.online-dot { width: 14px; height: 14px; background: #4caf50; border: 2px solid #fff; border-radius: 50%; position: absolute; bottom: 5px; right: 5px; }
.btn-gray { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 10px; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
/* Чат */
#msg-container { background: #8db589 url("https://www.transparenttextures.com/patterns/pavel-konovalov.png"); }
.bubble { max-width: 80%; padding: 8px 12px; border-radius: 15px; font-size: 15px; margin-bottom: 4px; box-shadow: 0 1px 1px rgba(0,0,0,0.1); line-height: 1.4; }
.bubble-me { background: #efffde; align-self: flex-end; border-bottom-right-radius: 2px; }
.bubble-them { background: #fff; align-self: flex-start; border-bottom-left-radius: 2px; }
</style>
</head>
<body>
<!-- ЗАГРУЗКА -->
<div id="loading" class="fixed inset-0 bg-white z-[5000] flex items-center justify-center font-bold text-blue-500 italic uppercase tracking-tighter">DarkMessage...</div>
<!-- ЭКРАН ЧАТА -->
<div id="screen-chat-window" class="fixed inset-0 bg-white z-[2000] hidden flex flex-col">
<header class="p-3 border-b flex items-center gap-4 bg-white">
<button id="btn-chat-back" class="p-2 text-[#0088cc] bg-transparent border-none text-xl cursor-pointer"><i class="fa-solid fa-arrow-left"></i></button>
<div class="flex-1 font-bold" id="chat-active-name">Чат</div>
</header>
<div id="msg-container" class="flex-1 overflow-y-auto p-4 flex flex-col no-scrollbar"></div>
<div class="p-3 bg-white border-t flex items-center gap-3 pb-10">
<input id="msg-input" type="text" placeholder="Сообщение" class="flex-1 bg-gray-100 p-3 rounded-full px-5 outline-none border-none">
<button id="btn-send" class="w-10 h-10 bg-[#0088cc] text-white rounded-full flex items-center justify-center border-none"><i class="fa-solid fa-paper-plane"></i></button>
</div>
</div>
<!-- ОСНОВНОЙ ИНТЕРФЕЙС -->
<main id="main-ui" class="hidden h-screen flex flex-col">
<!-- ЭКРАН: ЧАТЫ -->
<section id="screen-chats" class="screen">
<header class="p-4 bg-white flex justify-between items-center border-b">
<h1 class="text-2xl font-bold m-0">Чаты</h1>
<i id="btn-add-chat" class="fa-solid fa-plus-circle text-blue-500 text-2xl cursor-pointer"></i>
</header>
<div id="chats-list" class="bg-white"></div>
</section>
<!-- ЭКРАН: НАСТРОЙКИ (Как на твоем скрине) -->
<section id="screen-settings" class="screen hidden">
<div class="profile-header">
<div class="avatar-circle">
<i class="fa-solid fa-user avatar-icon"></i>
<div class="absolute bottom-0 right-0 w-8 h-8 bg-blue-500 rounded-full border-4 border-white flex items-center justify-center text-white text-[10px]"><i class="fa-solid fa-camera"></i></div>
</div>
<h2 class="text-xl font-bold mt-4 m-0" id="set-name">DARKEW</h2>
<p class="text-gray-400 text-sm m-1" id="set-username">+7 (995) 674-38-22 • @DuckOwner0</p>
</div>
<div class="white-card">
<div class="row"><div class="icon-box bg-blue-500"><i class="fa-solid fa-user"></i></div><div class="flex-1 text-sm font-medium">Аккаунт<br><span class="text-[10px] text-gray-400 font-normal">Номер, имя пользователя, «О себе»</span></div><i class="fa-solid fa-chevron-right text-gray-300 text-xs"></i></div>
<div class="row"><div class="icon-box bg-orange-400"><i class="fa-solid fa-comment"></i></div><div class="flex-1 text-sm font-medium">Настройки чатов<br><span class="text-[10px] text-gray-400 font-normal">Обои, ночной режим, анимации</span></div><i class="fa-solid fa-chevron-right text-gray-300 text-xs"></i></div>
<div class="row"><div class="icon-box bg-green-500"><i class="fa-solid fa-key"></i></div><div class="flex-1 text-sm font-medium">Конфиденциальность<br><span class="text-[10px] text-gray-400 font-normal">Время захода, устройства</span></div><i class="fa-solid fa-chevron-right text-gray-300 text-xs"></i></div>
<div class="row"><div class="icon-box bg-red-500"><i class="fa-solid fa-volume-high"></i></div><div class="flex-1 text-sm font-medium">Уведомления<br><span class="text-[10px] text-gray-400 font-normal">Звуки, звонки, счетчик</span></div><i class="fa-solid fa-chevron-right text-gray-300 text-xs"></i></div>
</div>
<div class="white-card">
<div class="row" id="btn-logout"><div class="icon-box bg-gray-400"><i class="fa-solid fa-right-from-bracket"></i></div><div class="flex-1 text-sm font-medium text-red-500">Выйти из аккаунта</div></div>
</div>
</section>
<!-- ЭКРАН: ПРОФИЛЬ (Как на твоем скрине) -->
<section id="screen-profile" class="screen hidden">
<header class="p-4 flex justify-between items-center bg-white border-b">
<i class="fa-solid fa-table-cells-large text-lg text-gray-400"></i>
<i class="fa-solid fa-ellipsis-vertical text-lg text-gray-400"></i>
</header>
<div class="profile-header">
<div class="avatar-circle">
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center italic text-white font-bold text-2xl">D</div>
<div class="online-dot"></div>
</div>
<h2 class="text-2xl font-bold mt-4 m-0" id="prof-name">DARKEW</h2>
<div class="text-xs text-gray-400 mt-1 flex items-center gap-1 justify-center">
<span class="bg-gray-200 px-1 rounded font-bold text-[8px] text-gray-600 italic">1</span> в сети
</div>
</div>
<div class="flex gap-2 px-4 mb-4">
<div class="btn-gray"><i class="fa-solid fa-camera text-blue-500"></i> Выбрать фото</div>
<div class="btn-gray"><i class="fa-solid fa-pen text-blue-500"></i> Изменить</div>
<div class="btn-gray" onclick="switchTab('settings')"><i class="fa-solid fa-gear text-blue-500"></i> Настройки</div>
</div>
<div class="white-card p-4">
<div class="font-bold text-sm" id="prof-phone">+7 (995) 674-38-22</div>
<div class="text-[10px] text-gray-400 uppercase mb-3">Телефон</div>
<div class="font-bold text-sm" id="prof-username">@DuckOwner0</div>
<div class="text-[10px] text-gray-400 uppercase">Имя пользователя</div>
</div>
<div class="flex justify-center gap-8 border-b border-gray-200 mx-4 text-xs font-bold text-gray-400 mt-4">
<span class="text-blue-500 border-b-2 border-blue-500 pb-2">Публикации</span>
<span>Архив публикаций</span>
</div>
</section>
<!-- Навигация -->
<nav class="nav-bar">
<button id="nav-chats" class="nav-item active"><i class="fa-solid fa-comment"></i><span>Чаты</span></button>
<button id="nav-contacts" class="nav-item"><i class="fa-solid fa-user-group"></i><span>Контакты</span></button>
<button id="nav-settings" class="nav-item"><i class="fa-solid fa-gear"></i><span>Настройки</span></button>
<button id="nav-profile" class="nav-item"><i class="fa-solid fa-circle"></i><span>Профиль</span></button>
</nav>
</main>
<!-- ВХОД -->
<div id="screen-auth" class="hidden min-h-screen flex flex-col items-center justify-center p-8 bg-white">
<h1 class="text-3xl font-black italic text-blue-500 mb-8 tracking-tighter">DarkMessage</h1>
<div class="w-full max-w-sm space-y-4">
<input id="auth-email" type="email" placeholder="Email" class="w-full p-4 bg-gray-100 rounded-2xl outline-none border-none">
<input id="auth-password" type="password" placeholder="Пароль" class="w-full p-4 bg-gray-100 rounded-2xl outline-none border-none">
<button id="btn-login" class="w-full p-4 bg-blue-500 text-white rounded-2xl font-bold border-none cursor-pointer">Войти</button>
<button id="btn-register" class="w-full text-blue-500 font-bold text-sm bg-transparent border-none cursor-pointer">Создать аккаунт</button>
</div>
</div>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword, onAuthStateChanged, signOut, setPersistence, browserLocalPersistence } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js";
import { getFirestore, doc, setDoc, getDoc, collection, query, where, onSnapshot, addDoc, serverTimestamp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js";
const firebaseConfig = {
apiKey: "AIzaSyD_Ga_GaEtm3fJhXv_vRMKoZaox_Ga5rg4",
authDomain: "pocomessage.firebaseapp.com",
projectId: "pocomessage",
storageBucket: "pocomessage.firebasestorage.app",
messagingSenderId: "547295895591",
appId: "1:547295895591:web:e86367137c8cc31651ae02"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
setPersistence(auth, browserLocalPersistence);
let user = null;
let activeChatId = null;
// ПРИВЯЗКА СОБЫТИЙ
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('nav-chats').onclick = () => switchTab('chats');
document.getElementById('nav-settings').onclick = () => switchTab('settings');
document.getElementById('nav-profile').onclick = () => switchTab('profile');
document.getElementById('btn-chat-back').onclick = () => document.getElementById('screen-chat-window').classList.add('hidden');
document.getElementById('btn-send').onclick = sendMessage;
document.getElementById('btn-login').onclick = () => authAction('login');
document.getElementById('btn-register').onclick = () => authAction('reg');
document.getElementById('btn-logout').onclick = () => signOut(auth).then(() => location.reload());
});
window.switchTab = (tab) => {
['chats', 'settings', 'profile'].forEach(t => document.getElementById('screen-' + t).classList.add('hidden'));
['chats', 'contacts', 'settings', 'profile'].forEach(t => document.getElementById('nav-' + t).classList.remove('active'));
document.getElementById('screen-' + tab).classList.remove('hidden');
document.getElementById('nav-' + tab).classList.add('active');
}
async function authAction(type) {
const e = document.getElementById('auth-email').value;
const p = document.getElementById('auth-password').value;
try {
if(type === 'login') await signInWithEmailAndPassword(auth, e, p);
else {
const res = await createUserWithEmailAndPassword(auth, e, p);
await setDoc(doc(db, "users", res.user.uid), {
uid: res.user.uid,
email: e,
name: 'DARKEW',
phone: '+7 (995) 674-38-22',
username: '@DuckOwner0'
});
}
} catch(e) { alert(e.message); }
}
function loadChats() {
const list = document.getElementById('chats-list');
const q = query(collection(db, "chats"), where("emails", "array-contains", user.email));
onSnapshot(q, (snap) => {
list.innerHTML = "";
snap.forEach(d => {
const data = d.data();
const other = data.emails.find(e => e !== user.email);
const div = document.createElement('div');
div.style = "padding: 15px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #eee; background: #fff;";
div.innerHTML = `<div style="width: 50px; height: 50px; border-radius: 50%; background: #e3f2fd; color: #2196f3; display: flex; align-items: center; justify-content: center; font-weight: bold;">${other[0].toUpperCase()}</div>
<div style="flex: 1;"><div style="font-weight: bold;">${other.split('@')[0]}</div><div style="font-size: 12px; color: #999;">Нажмите, чтобы написать</div></div>`;
div.onclick = () => openChat(d.id, other);
list.appendChild(div);
});
});
}
function openChat(id, name) {
activeChatId = id;
document.getElementById('screen-chat-window').classList.remove('hidden');
document.getElementById('chat-active-name').innerText = name;
const container = document.getElementById('msg-container');
onSnapshot(query(collection(db, "messages"), where("chatId", "==", id)), (snap) => {
const msgs = [];
snap.forEach(m => msgs.push(m.data()));
msgs.sort((a,b) => (a.createdAt?.seconds || 0) - (b.createdAt?.seconds || 0));
container.innerHTML = "";
msgs.forEach(m => {
const isMe = m.senderId === user.uid;
const div = document.createElement('div');
div.className = `bubble ${isMe ? 'bubble-me' : 'bubble-them'}`;
div.innerText = m.text;
container.appendChild(div);
});
container.scrollTo(0, container.scrollHeight);
});
}
async function sendMessage() {
const inp = document.getElementById('msg-input');
if(!inp.value || !activeChatId) return;
await addDoc(collection(db, "messages"), { chatId: activeChatId, senderId: user.uid, text: inp.value, createdAt: serverTimestamp() });
inp.value = "";
}
onAuthStateChanged(auth, async (u) => {
document.getElementById('loading').classList.add('hidden');
if (u) {
user = u;
document.getElementById('screen-auth').classList.add('hidden');
document.getElementById('main-ui').classList.remove('hidden');
loadChats();
const d = await getDoc(doc(db, "users", u.uid));
if(d.exists()) {
const data = d.data();
document.getElementById('prof-name').innerText = data.name;
document.getElementById('set-name').innerText = data.name;
document.getElementById('prof-phone').innerText = data.phone;
document.getElementById('prof-username').innerText = data.username;
}
} else {
document.getElementById('screen-auth').classList.remove('hidden');
document.getElementById('main-ui').classList.add('hidden');
}
});
</script>
</body>
</html>