Scribd
Upload
4 views15 pages

Index

The document is an HTML template for an enhanced private chat application featuring a modern interface with a glass effect design. It includes sections for user authentication, friend lists, chat messages, and story sharing, all styled with CSS for a visually appealing experience. JavaScript functions are included to handle user interactions such as adding friends, sending messages, and managing notifications.

Uploaded by

mouhamedmachkour629
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views15 pages

Index

The document is an HTML template for an enhanced private chat application featuring a modern interface with a glass effect design. It includes sections for user authentication, friend lists, chat messages, and story sharing, all styled with CSS for a visually appealing experience. JavaScript functions are included to handle user interactions such as adding friends, sending messages, and managing notifications.

Uploaded by

mouhamedmachkour629
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 15

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Private Chat</title>
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body {
min-height: 100vh;
background: linear-gradient(135deg, #1a1c2c 0%, #4a3b74 100%);
color: #ffffff;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 20px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

/* Stories Section */
.stories-container {
margin: 20px 0;
padding: 20px;
overflow-x: auto;
white-space: nowrap;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
}

.story-item {
display: inline-block;
margin-right: 15px;
text-align: center;
cursor: pointer;
}

.story-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743
50%, #cc2366 75%, #bc1888 100%);
margin-bottom: 5px;
}

.story-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #1a1c2c;
}

.story-username {
font-size: 12px;
color: #fff;
}

/* Story Modal */
.story-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
z-index: 2000;
}

.story-content {
position: relative;
width: 100%;
max-width: 400px;
margin: 40px auto;
background: #1a1c2c;
border-radius: 20px;
overflow: hidden;
}

.story-header {
padding: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}

.story-image {
width: 100%;
height: auto;
}

.story-footer {
padding: 15px;
}

.story-stats {
display: flex;
gap: 20px;
margin-top: 10px;
}

/* Notifications */
.notifications-icon {
position: relative;
cursor: pointer;
}

.notifications-count {
position: absolute;
top: -5px;
right: -5px;
background: #dc2743;
color: white;
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}

.notifications-panel {
display: none;
position: absolute;
top: 60px;
right: 20px;
width: 300px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 15px;
z-index: 1000;
}

.notification-item {
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 10px;
}

/* Add Story Button */


.add-story-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #6e8efb 0%, #4a3b74 100%);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Rest of your existing styles remain the same */


/* ... (Keep all previous styles) ... */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 20px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.auth-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}

.auth-form {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 20px;
width: 90%;
max-width: 400px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

.auth-form h2 {
color: #fff;
text-align: center;
margin-bottom: 20px;
font-size: 24px;
}

.auth-form input {
width: 100%;
padding: 12px;
margin: 10px 0;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
color: white;
font-size: 16px;
transition: all 0.3s ease;
}

.auth-form input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.1);
}

.auth-form button {
width: 100%;
padding: 12px;
margin: 10px 0;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #6e8efb 0%, #4a3b74 100%);
color: white;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
}

.auth-form button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#user-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

#user-info button {
padding: 8px 20px;
border-radius: 8px;
border: none;
background: linear-gradient(135deg, #ff6b6b 0%, #c92a2a 100%);
color: white;
cursor: pointer;
transition: all 0.3s ease;
}

.chat-section {
display: flex;
gap: 20px;
margin: 20px 0;
height: calc(100vh - 200px);
}

.friends-list {
width: 300px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px;
display: flex;
flex-direction: column;
}

.friends-list h3 {
margin-bottom: 15px;
color: #fff;
font-size: 20px;
}

.friend-item {
padding: 12px 15px;
margin: 5px 0;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}

.friend-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateX(5px);
}

.friend-item.active {
background: rgba(110, 142, 251, 0.3);
border-left: 4px solid #6e8efb;
}

.add-friend-form {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.add-friend-form h4 {
margin-bottom: 10px;
color: #fff;
}

.add-friend-form input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
color: white;
}

.add-friend-form button {
width: 100%;
padding: 10px;
border-radius: 8px;
border: none;
background: linear-gradient(135deg, #6e8efb 0%, #4a3b74 100%);
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
#chat-container {
flex: 1;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}

.message {
max-width: 70%;
padding: 12px 16px;
border-radius: 15px;
margin: 5px 0;
word-wrap: break-word;
}

.message.sent {
background: linear-gradient(135deg, #6e8efb 0%, #4a3b74 100%);
align-self: flex-end;
border-bottom-right-radius: 5px;
}

.message.received {
background: rgba(255, 255, 255, 0.15);
align-self: flex-start;
border-bottom-left-radius: 5px;
}

#message-form {
display: flex;
gap: 10px;
padding: 20px;
margin-top: 20px;
}

#message-input {
flex: 1;
padding: 12px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
color: white;
font-size: 16px;
}

#message-form button {
padding: 12px 30px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #6e8efb 0%, #4a3b74 100%);
color: white;
cursor: pointer;
transition: all 0.3s ease;
}
#message-form button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<!-- Auth Container -->
<div class="auth-container" id="auth-container">
<div class="auth-form">
<h2 id="auth-title">Login</h2>
<input type="text" id="userId" placeholder="User ID">
<input type="password" id="password" placeholder="Password">
<input type="text" id="username" placeholder="Username" style="display:
none;">
<button onclick="handleAuth()">Login</button>
<button onclick="toggleAuth()">Switch to Register</button>
</div>
</div>

<!-- Main Container -->


<div class="container" style="display: none;">
<div id="user-info" class="glass-effect">
<h2>Welcome, <span id="user-display"></span></h2>
<div style="display: flex; gap: 20px; align-items: center;">
<div class="notifications-icon" onclick="toggleNotifications()">
📬
<span class="notifications-count">0</span>
<div class="notifications-panel" id="notifications-panel">
<!-- Notifications will be populated here -->
</div>
</div>
<button onclick="logout()">Logout</button>
</div>
</div>

<!-- Stories Section -->


<div class="stories-container glass-effect">
<div class="story-item" onclick="addStory()">
<div class="story-avatar">
<img src="/api/placeholder/60/60" alt="Add Story">
</div>
<span class="story-username">Add Story</span>
</div>
<div id="stories-list">
<!-- Stories will be populated here -->
</div>
</div>

<div class="chat-section">
<div class="friends-list glass-effect">
<h3>Friends</h3>
<div id="friends-container"></div>

<div class="add-friend-form">
<h4>Add Friend</h4>
<input type="text" id="friend-id" placeholder="Friend's ID">
<button onclick="addFriend()">Add</button>
</div>
</div>

<div id="chat-container" class="glass-effect"></div>


</div>

<form id="message-form" class="glass-effect">


<input type="text" id="message-input" placeholder="Type your
message..." required>
<button type="submit">Send</button>
</form>
</div>

<!-- Story Modal -->


<div class="story-modal" id="story-modal">
<div class="story-content">
<div class="story-header">
<span class="story-user"></span>
<span onclick="closeStory()" style="cursor: pointer;">✖</span>
</div>
<img class="story-image" src="" alt="Story">
<div class="story-footer">
<div class="story-stats">
<span class="story-views">0 views</span>
<span class="story-likes">0 likes</span>
</div>
</div>
</div>
</div>

<script src="/socket.io/socket.io.js"></script>
<script>
let currentUserId = '';
let currentFriendId = '';
let socket = null;
let notifications = [];

// Story handling functions


function addStory() {
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.onchange = async (e) => {
const file = e.target.files[0];
const formData = new FormData();
formData.append('story', file);
formData.append('userId', currentUserId);

try {
const response = await fetch('/upload-story', {
method: 'POST',
body: formData
});
const result = await response.json();
if (result.success) {
loadStories();
}
} catch (error) {
console.error('Error uploading story:', error);
}
};
input.click();
}

async function loadStories() {


try {
const response = await fetch(`/get-stories/${currentUserId}`);
const stories = await response.json();
const storiesList = document.getElementById('stories-list');
storiesList.innerHTML = '';

stories.forEach(story => {
const storyElement = document.createElement('div');
storyElement.className = 'story-item';
storyElement.onclick = () => viewStory(story);
storyElement.innerHTML = `
<div class="story-avatar">
<img src="${story.userAvatar ||
'/api/placeholder/60/60'}" alt="${story.username}">
</div>
<span class="story-username">${story.username}</span>
`;
storiesList.appendChild(storyElement);
});
} catch (error) {
console.error('Error loading stories:', error);
}
}

function viewStory(story) {
const modal = document.getElementById('story-modal');
const image = modal.querySelector('.story-image');
const user = modal.querySelector('.story-user');
const views = modal.querySelector('.story-views');
const likes = modal.querySelector('.story-likes');

image.src = story.imageUrl;
user.textContent = story.username;
views.textContent = `${story.views.length} views`;
likes.textContent = `${story.likes.length} likes`;

modal.style.display = 'block';

// Emit story view


socket.emit('view-story', {
storyId: story.id,
viewerId: currentUserId
});
}

function closeStory() {
document.getElementById('story-modal').style.display = 'none';
}

// Notification functions
function toggleNotifications() {
const panel = document.getElementById('notifications-panel');
panel.style.display = panel.style.display === 'none' ? 'block' :
'none';
}

function updateNotificationCount() {
const count = document.querySelector('.notifications-count');
count.textContent = notifications.length;
}

function addNotification(notification) {
notifications.push(notification);
updateNotificationCount();
updateNotificationPanel();
}

function updateNotificationPanel() {
const panel = document.getElementById('notifications-panel');
panel.innerHTML = notifications.map(notif => `
<div class="notification-item">
<img src="${notif.avatar || '/api/placeholder/40/40'}" alt=""
style="width: 40px; height: 40px; border-radius: 50%;">
<div>
<div>${notif.message}</div>
<small>${new
Date(notif.timestamp).toLocaleTimeString()}</small>
</div>
</div>
`).join('');
}

// Initialize socket with additional event listeners


function initializeSocket(userId) {
socket = io({
auth: { userId }
});

socket.on('private-message', ({ senderId, message, senderName }) => {


if (senderId === currentFriendId) {
appendMessage(message, false);
}
addNotification({
message: `New message from ${senderName}`,
timestamp: Date.now()
});
});

socket.on('story-liked', ({ storyId, likerId, likerName }) => {


addNotification({
message: `${likerName} liked your story`,
timestamp: Date.now()
});
});

socket.on('story-viewed', ({ storyId, viewerId, viewerName }) => {


addNotification({
message: `${viewerName} viewed your story`,
timestamp: Date.now()
});
});

socket.on('friend-request', ({ senderId, senderName }) => {


addNotification({
message: `New friend request from ${senderName}`,
timestamp: Date.now()
});
});
}

// Keep the rest of your existing JavaScript code


// ... (Keep all previous JavaScript functions) ...

let currentUserId = '';


let currentFriendId = '';
let socket = null;

function toggleAuth() {
const isLogin = document.getElementById('auth-title').textContent ===
'Login';
document.getElementById('auth-title').textContent = isLogin ?
'Register' : 'Login';
document.getElementById('username').style.display = isLogin ? 'block' :
'none';
}

async function handleAuth() {


const userId = document.getElementById('userId').value;
const password = document.getElementById('password').value;
const username = document.getElementById('username').value;
const isLogin = document.getElementById('auth-title').textContent ===
'Login';

const endpoint = isLogin ? '/login' : '/register';


const data = isLogin ? { userId, password } : { userId, password,
username };

try {
const response = await fetch(endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});

const result = await response.json();


if (result.success) {
if (isLogin) {
currentUserId = userId;
document.getElementById('user-display').textContent =
result.username;
document.getElementById('auth-container').style.display =
'none';
document.querySelector('.container').style.display =
'block';
initializeSocket(userId);
loadFriends(result.friends);
} else {
alert('Registration successful! Please login.');
toggleAuth();
}
} else {
alert(result.message);
}
} catch (error) {
alert('Error during authentication');
}
}

function initializeSocket(userId) {
socket = io({
auth: {
userId
}
});

socket.on('private-message', ({ senderId, message, senderName }) => {


if (senderId === currentFriendId) {
appendMessage(message, false);
}
});
}

async function addFriend() {


const friendId = document.getElementById('friend-id').value;
try {
const response = await fetch('/add-friend', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ userId: currentUserId, friendId })
});

const result = await response.json();


if (result.success) {
addFriendToList(result.friendData);
document.getElementById('friend-id').value = '';
} else {
alert(result.message);
}
} catch (error) {
alert('Error adding friend');
}
}

function loadFriends(friends) {
const container = document.getElementById('friends-container');
container.innerHTML = '';
friends.forEach(friend => addFriendToList({ userId: friend }));
}

function addFriendToList(friendData) {
const container = document.getElementById('friends-container');
const friendElement = document.createElement('div');
friendElement.className = 'friend-item';
friendElement.textContent = friendData.userId;
friendElement.onclick = () => selectFriend(friendData.userId);
container.appendChild(friendElement);
}

function selectFriend(friendId) {
currentFriendId = friendId;
document.querySelectorAll('.friend-item').forEach(el =>
el.classList.remove('active'));
document.querySelector(`[onclick="selectFriend('$
{friendId}')"]`).classList.add('active');
document.getElementById('chat-container').innerHTML = '';

// Load chat history


socket.emit('get-chat-history', { friendId }, (messages) => {
messages.forEach(msg => {
appendMessage(msg.message, msg.senderId === currentUserId);
});
});
}

function appendMessage(message, isSent) {


const messageElement = document.createElement('div');
messageElement.classList.add('message');
messageElement.classList.add(isSent ? 'sent' : 'received');
messageElement.textContent = message;
document.getElementById('chat-container').appendChild(messageElement);
messageElement.scrollIntoView({ behavior: 'smooth' });
}

document.getElementById('message-form').addEventListener('submit', (e) => {


e.preventDefault();
const message = document.getElementById('message-input').value.trim();
if (message && currentFriendId) {
socket.emit('private-message', {
recipientId: currentFriendId,
message
});
appendMessage(message, true);
document.getElementById('message-input').value = '';
}
});

function logout() {
currentUserId = '';
currentFriendId = '';
if (socket) socket.disconnect();
document.getElementById('auth-container').style.display = 'flex';
document.querySelector('.container').style.display = 'none';
}
</script>
</body>
</html>

You might also like