Heclosi <itle> <style> body { background: linear-gradient(135deg, #f9d1d1, #c6e2ff, #f6d8ff); font-family: 'Poppins', sans-serif; color: #333; text-align: center; margin: 0; padding: 0; animation: bgmove 10s infinite alternate; } @keyframes bgmove { 0% { background: linear-gradient(135deg, #f9d1d1, #c6e2ff); } 50% { background: linear-gradient(135deg, #d4fc79, #96e6a1); } 100% { background: linear-gradient(135deg, #f6d8ff, #b8f3ff); } } h1 { margin-top: 30px; font-size: 36px; color: #444; text-shadow: 1px 1px 4px rgba(0,0,0,0.1); } .container { max-width: 800px; margin: auto; background: rgba(255, 255, 255, 0.6); border-radius: 20px; padding: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); } #chat-box { border: 2px solid #ccc; border-radius: 10px; height: 300px; overflow-y: auto; padding: 10px; background: #fff; } #message { width: 70%; padding: 10px; border-radius: 8px; border: 1px solid #aaa; margin-top: 10px; } button { background-color: #7ba8ff; color: white; border: none; padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 16px; margin: 8px; transition: 0.3s; } button:hover { background-color: #578dff; transform: scale(1.05); } img { width: 200px; border-radius: 20px; margin: 15px 0; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: 0.3s; } img:hover { transform: scale(1.05); } footer { margin-top: 20px; font-size: 14px; color: #555; } </style> </head> <body> <h1> Heclosi Chat </h1> <div class="container"> <h3>💬 Khu Chat</h3> <div id="chat-box"></div> <input type="text" id="message" placeholder="Nhập tin nhắn của bạn..."> <button onclick="sendMessage()">Gửi</button> <button onclick="saveChat()">💾 Lưu Chat</button> <hr> <h3>🎨 Khu Ảnh Chill</h3> <img id="anh" src="https://picsum.photos/250?random=1" alt="Ảnh ngẫu nhiên"> <br> <button onclick="doiAnh()">Đổi ảnh 🎨</button> <hr> <h3>📞 Liên hệ</h3> <p>Email: <b>heclosi.contact@gmail.com</b></p> <p>Discord: <b>@HeclosiTeam</b></p> <a href="https://heclosi-chat.example.com" target="_blank"> <button>🌐 Truy cập Heclosi Chat chính</button> </a> </div> <footer>© 2025 Heclosi <audio id="nhac" src="https://cdn.pixabay.com/download/audio/2023/03/20/audio_40df23a9b8.mp3?filename=chill-lofi-140747.mp3" autoplay loop></audio> <script> const chatBox = document.getElementById("chat-box"); function sendMessage() { const input = document.getElementById("message"); const text = input.value.trim(); if (text !== "") { const msg = document.createElement("p"); msg.textContent = "Bạn: " + text; msg.style.background = "#e3f2fd"; msg.style.padding = "6px 10px"; msg.style.borderRadius = "10px"; msg.style.textAlign = "left"; chatBox.appendChild(msg); chatBox.scrollTop = chatBox.scrollHeight; input.value = ""; } } function saveChat() { const content = chatBox.innerText || ""; const blob = new Blob([content], { type: "text/plain" }); const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "Heclosi_Chat.txt"; a.click(); } function doiAnh() { const img = document.getElementById("anh"); img.src = `https://picsum.photos/250?random=${Math.floor(Math.random() * 1000)}`; } </script> </body> </html>