zxq5/chatapp
2
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

more progress on TOTP/2FA

Browse Source
This commit is contained in:
zxq5
2025-10-10 01:45:02 +01:00
parent b13cb5086a
commit 4a6c3bc49c
12 changed files with 189 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/templates/chat.html.tera
+22 -77
View File
@@ -5,6 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Discord Clone - Group Chat</title>
<link rel="stylesheet" href="static/css/index.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
</head>
<body>
<div class="chat-container">
@@ -13,7 +16,7 @@
<div class="chat-header">
<div class="chat-title">
<img class="user-avatar" src="cdn/profile/0"></img>
<h1>Chat title</h1>
<h1>Wish.com Discord frfr</h1>
</div>
</div>
@@ -53,84 +56,26 @@
</div>
</div>
<script>
<script type="module">
import markdownit from 'https://cdn.jsdelivr.net/npm/markdown-it@14.1.0/+esm';
const md = markdownit({
html: true,
linkify: true,
typographer: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(str, { language: lang }).value;
} catch (__) {}
}
return ''; // use external default escaping
}
})
const user_id = {{ user_id }};
var users = {};
// Location tracker state
const locationUsers = [
{ id: 1, color: "linear-gradient(135deg, #ff6b6b, #ff8e8e)" },
{ id: 2, color: "linear-gradient(135deg, #4ecdc4, #7fdbda)" },
{ id: 3, color: "linear-gradient(135deg, #45b7d1, #6cc5e0)" },
];
let hiddenUsersCount = 5; // Users not shown in the visible stack
let currentUserInLocation = false;
function updateLocationUsers() {
const container = document.getElementById("locationUsers");
container.innerHTML = "";
const maxVisible = 3;
const visibleUsers = locationUsers.slice(0, maxVisible);
visibleUsers.forEach((user) => {
const pic = document.createElement("div");
pic.className = "location-user-pic";
pic.style.background = user.color;
container.appendChild(pic);
});
// Calculate total hidden users (hidden users + current user if tracking)
const totalHidden =
hiddenUsersCount + (currentUserInLocation ? 1 : 0);
// Add count indicator if there are more users
if (totalHidden > 0) {
const count = document.createElement("div");
count.className = "location-count";
count.textContent = `+${totalHidden}`;
container.appendChild(count);
}
}
// Toggle location tracking
// const locationBubble = document.getElementById("locationBubble");
// const joinButton = document.getElementById("joinButton");
// let isExpanded = false;
// locationBubble.addEventListener("click", function (e) {
// // Don't toggle expanded state if clicking the join button
// if (e.target.id === "joinButton") return;
// isExpanded = !isExpanded;
// this.classList.toggle("expanded", isExpanded);
// });
// joinButton.addEventListener("click", function (e) {
// e.stopPropagation();
// currentUserInLocation = !currentUserInLocation;
// this.classList.toggle("active", currentUserInLocation);
// this.textContent = currentUserInLocation ? "Leave" : "Join";
// locationBubble.classList.toggle(
// "active",
// currentUserInLocation,
// );
// // Animate click
// this.style.transform = "scale(0.95)";
// setTimeout(() => {
// this.style.transform = "";
// }, 150);
// updateLocationUsers();
// });
// // Initialize location users
// updateLocationUsers();
// Handle message sending
const input = document.querySelector("input");
const sendButton = document.querySelector(".send-button");
@@ -154,7 +99,7 @@
<span class="username">${message.display_name}</span>
<span class="timestamp">${date}</span>
</div>
<div class="message-text">${message.text}</div>
<div class="message-text">${md.render(message.text)}</div>
</div>
`;
messagesContainer.appendChild(messageEl);