Spaces:

coders813
/

django-chat-application

Running

devnamdev2003

up3

727a40a about 2 months ago

14.2 kB

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Home - Chat App</title>
	<style>
	:root {
	--theme-color: #8f91ea;
	--timestamp-color: #b5b5b5;
	--status-online: #28a745;
	--status-offline: #888888;
	--bg-gradient: linear-gradient(135deg, #121212, #1c1c1c);
	--bg-color: #121212;
	--text-color: #f5f5f5;
	--menu-bg: #1c1c1c;
	--menu-text-color: #8f91ea;
	--shadow-color: rgba(0, 0, 0, 0.5);
	--icon-color: invert(100%);
	--highlight-color: #8f91ea;
	--friend-item-hover: #2b2b2b;
	--btn-text-color: #ffffff;
	--btn-bg: linear-gradient(135deg, #6a75c9, #5a67c8);
	--btn-bg-hover: linear-gradient(135deg, #5a67c8, #4854c8);
	--btn-bg-danger: linear-gradient(135deg, #e57373, #c0392b);
	--btn-bg-danger-hover: linear-gradient(135deg, #c0392b, #96281b);
	--scrollbar-thumb: #444444;
	--scrollbar-track: #1c1c1c;
	--bg-slider-color: rgba(143, 145, 234, 0.1);
	--switch-slider: #555555;
	--switch-slider-before: #ffffff;
	--switch-slider-checked: #8f91ea;
	}

	[data-theme="light"] {
	--theme-color: #8f91ea;
	--timestamp-color: #6c757d;
	--status-online: #28a745;
	--status-offline: #adb5bd;
	--bg-gradient: linear-gradient(135deg, #ffffff, #f4f4f4);
	--bg-color: #ffffff;
	--text-color: #212529;
	--menu-bg: #e9ecef;
	--menu-text-color: #8f91ea;
	--shadow-color: rgba(0, 0, 0, 0.1);
	--icon-color: none;
	--highlight-color: #8f91ea;
	--friend-item-hover: #f1f3f5;
	--btn-text-color: #ffffff;
	--btn-bg: linear-gradient(135deg, #6a75c9, #5a67c8);
	--btn-bg-hover: linear-gradient(135deg, #5a67c8, #4854c8);
	--btn-bg-danger: linear-gradient(135deg, #e57373, #c0392b);
	--btn-bg-danger-hover: linear-gradient(135deg, #c0392b, #96281b);
	--scrollbar-thumb: #cccccc;
	--scrollbar-track: #f7f7f7;
	--bg-slider-color: rgba(143, 145, 234, 0.1);
	--switch-slider: #cccccc;
	--switch-slider-before: #ffffff;
	--switch-slider-checked: #8f91ea;
	}

	::-webkit-scrollbar {
	width: 5px;
	}

	::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb);
	border-radius: 50px;
	}

	::-webkit-scrollbar-track {
	background-color: var(--scrollbar-track);
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	}

	body {
	font-family: 'Roboto', sans-serif;
	background: var(--bg-gradient);
	color: var(--text-color);
	height: 100vh;
	}

	.main_box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	}

	.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 450px;
	background-color: var(--menu-bg);
	padding: 15px;
	box-shadow: 0 2px 8px var(--shadow-color);
	position: relative;
	}

	.header h1 {
	color: var(--text-color);
	font-size: 18px;
	text-align: center;
	flex: 1;
	margin: 0;
	}

	.header button {
	background: transparent;
	border: none;
	color: var(--text-color);
	cursor: pointer;
	}

	.header button img {
	width: 24px;
	height: 24px;
	filter: var(--icon-color);
	}

	.menu {
	position: relative;
	}

	.menu button {
	background: transparent;
	border: none;
	cursor: pointer;
	}

	.dropdown-content {
	display: none;
	position: absolute;
	right: 0;
	top: 40px;
	background-color: var(--menu-bg);
	min-width: 160px;
	box-shadow: 0 8px 16px var(--shadow-color);
	z-index: 1;
	border-radius: 5px;
	opacity: 0;
	transition: opacity 0.3s ease;
	}

	.dropdown-content a {
	color: var(--text-color);
	padding: 10px 15px;
	text-decoration: none;
	border-radius: 5px;
	display: block;
	font-size: 16px;
	}

	.dropdown-content a:hover {
	background-color: var(--highlight-color);
	border-radius: 5px;
	color: var(--bg-color);
	}

	.dropdown-content.show {
	display: block;
	border-radius: 5px;
	opacity: 1;
	}

	.btn {
	background: var(--btn-bg);
	color: var(--btn-text-color);
	padding: 6px 15px;
	border: none;
	border-radius: 20px;
	cursor: pointer;
	font-size: 14px;
	transition: background 0.3s ease, transform 0.2s ease;
	}

	.btn:hover {
	background: var(--btn-bg-hover);
	transform: scale(1.02);
	}

	.home_box {
	background: var(--bg-color);
	border-radius: 20px;
	width: 100%;
	max-width: 450px;
	max-height: 900px;
	display: flex;
	height: 100vh;
	flex-direction: column;
	box-shadow: 0 8px 16px var(--shadow-color);
	}

	.friends-list {
	flex: 1;
	background-color: var(--bg-color);
	margin-top: 1px;
	overflow-y: auto;

	}

	.friend-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px;
	border-bottom: 1px solid var(--shadow-color);
	cursor: pointer;
	transition: background-color 0.3s ease;
	}

	.friend-item:hover {
	background-color: var(--friend-item-hover);
	}

	.friend-item .left {
	display: flex;
	align-items: center;
	}

	.friend-item img {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	margin-right: 15px;
	}

	.friend-item .details {
	display: flex;
	flex-direction: column;
	}

	.friend-item .details p {
	margin: 2px 0;
	color: var(--text-color);
	}

	.friend-item .details .name {
	font-weight: bold;
	font-size: 16px;
	}

	.friend-item .details .last-message {
	font-size: 14px;
	color: var(--menu-text-color);
	}

	.friend-item .right {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	}

	.status {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	}

	.status.online {
	background-color: var(--status-online);
	}

	.status.offline {
	background-color: var(--status-offline);
	}

	.bottom-nav {
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: var(--menu-bg);
	padding: 15px;
	box-shadow: 0 -4px 8px var(--shadow-color);
	position: relative;
	}

	.bottom-nav .slider {
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: var(--bg-slider-color);
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	transition: all 0.3s ease;
	}

	.bottom-nav button {
	background: transparent;
	border: none;
	cursor: pointer;
	z-index: 1;
	position: relative;
	}

	.bottom-nav img {
	width: 30px;
	height: 30px;
	filter: var(--icon-color);
	}
	</style>
	</head>

	<body>
	<div class="main_box">
	<div class="home_box">
	<!-- Header Section -->
	<div class="header">
	<h1>Devnoms</h1>
	<div class="menu">
	<button onclick="toggleMenu()">
	<img src="./img/icon/icons8-menu-vertical-50.png" alt="Menu">
	</button>
	<div class="dropdown-content" id="dropdown">
	<a href="/edit-profile">Edit Profile</a>
	<a href="/settings">Settings</a>
	<a href="/logout">Logout</a>
	<a href="#" class="dark-mode-toggle">Light Mode</a>
	</div>
	</div>
	</div>

	<!-- Friends List Section -->
	<div class="friends-list">
	<div class="friend-item">
	<div class="left">
	<img src="./img/avatar/icons8-user-male-120.png" alt="Friend 1">
	<div class="details">
	<p class="name">John Doe</p>
	<p class="last-message">Hey, let's catch up soon!</p>
	</div>
	</div>
	<div class="right">
	<div class="status online"></div>
	</div>
	</div>
	<div class="friend-item">
	<div class="left">
	<img src="./img/avatar/icons8-user-male-120.png" alt="Friend 2">
	<div class="details">
	<p class="name">Jane Smith</p>
	<p class="last-message">Are you free tomorrow?</p>
	</div>
	</div>
	<div class="right">
	<div class="status offline"></div>
	</div>
	</div>
	<div class="friend-item">
	<div class="left">
	<img src="./img/avatar/icons8-female-user-120.png" alt="Friend 3">
	<div class="details">
	<p class="name">Emily Johnson</p>
	<p class="last-message">Let's meet for coffee!</p>
	</div>
	</div>
	<div class="right">
	<div class="status online"></div>
	</div>
	</div>
	</div>

	<!-- Bottom Navigation -->
	<div class="bottom-nav">
	<button class="active">
	<img src="./img/icon/icons8-user-groups-48.png" alt="Friends">
	</button>
	<button>
	<img src="./img/icon/icons8-find-50.png" alt="Search">
	</button>
	<button>
	<img src="./img/icon/icons8-notification-48.png" alt="Notifications">
	</button>
	</div>

	</div>
	</div>
	<script>
	// Back button functionality
	function goBack() {
	window.history.back();
	}

	// Toggle menu for three dots (Edit Profile, Settings, Logout)
	function toggleMenu() {
	const dropdown = document.getElementById("dropdown");
	dropdown.classList.toggle("show");
	}

	// Close dropdown menu when clicking outside
	document.addEventListener("click", (event) => {
	const dropdown = document.getElementById("dropdown");
	if (!dropdown.contains(event.target) && !event.target.closest(".menu")) {
	dropdown.classList.remove("show");
	}
	});
	// Toggle dark mode
	const darkModeToggle = document.querySelector(".dark-mode-toggle");
	darkModeToggle.addEventListener("click", () => {
	const theme = document.documentElement.getAttribute("data-theme");
	if (theme === "light") {
	darkModeToggle.innerHTML = "Light Mode";
	document.documentElement.setAttribute("data-theme", "dark");
	} else {
	darkModeToggle.innerHTML = "Dark Mode";
	document.documentElement.setAttribute("data-theme", "light");
	}
	});
	const navButtons = document.querySelectorAll(".bottom-nav button");
	const slider = document.createElement("div");
	slider.className = "slider";
	document.querySelector(".bottom-nav").appendChild(slider);

	// Initialize the slider position to the first active button
	function setSliderPosition(button) {
	const buttonRect = button.getBoundingClientRect();
	const navRect = document.querySelector(".bottom-nav").getBoundingClientRect();
	const leftPosition =
	buttonRect.left -
	navRect.left +
	buttonRect.width / 2 -
	slider.offsetWidth / 2;
	slider.style.left = `${leftPosition}px`;
	}

	navButtons.forEach((button) => {
	button.addEventListener("click", () => {
	navButtons.forEach((btn) => btn.classList.remove("active"));
	button.classList.add("active");
	setSliderPosition(button);
	});
	});

	// Set initial position of the slider
	setSliderPosition(document.querySelector(".bottom-nav .active"));

	</script>
	</body>

	</html>