Spaces:
Sleeping
Sleeping
| <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> |