Skip to content

Commit

Permalink
Merge pull request anuragverma108#2735 from Dilpreet0501/update
Browse files Browse the repository at this point in the history 
Optimised the chat box
  • Loading branch information
@huamanraj
huamanraj authored Aug 3, 2024
2 parents 31797d0 + 8bcfb00 commit 1102aef
Show file tree
Hide file tree
Showing 5 changed files with 484 additions and 295 deletions.
168 changes: 121 additions & 47 deletions chat.css
View file
Original file line number Diff line number Diff line change
@@ -1,79 +1,153 @@
/* Basic Styles */
body {
background: #ffb2a8;
margin: 0;
font-family: Arial, sans-serif;

}

.mainbox {
/* margin-top: 45rem; */
margin: 250px auto;
width: 800px;
background-color: white;
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
padding-top: 70px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Main Container */
#chat-container {
max-width: 90%;
margin: 80px auto 20px auto; /* Margin for top (avoiding fixed header) and bottom */
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background: white;
flex: 1;
overflow: hidden;
margin-top: 40vh;
background-color: var(--white);
display: flex;
flex-direction: column;
height: 100%;
}

/* User Input and Message Input */
#user-input, #message-input {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
width: 100%; /* Ensure full width usage */
box-sizing: border-box;
padding: 15px;
background-color: #f5f5f5;
}
#user-input input, #message-input input {
width: 80%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;

#username, #message {
flex-grow: 1;
border: none;
border-radius: 20px;
padding: 10px 15px;
font-size: 14px;
outline: none;
}
#user-input button, #message-input button {
width: 15%;
padding: 10px;
background-color: rgb(117, 48, 48);

#start-chat, #send-message, #gift-button {
background-color: #ff9b9b;
color: white;
border: none;
border-radius: 5px;
border-radius: 20px;
padding: 10px 15px;
margin-left: 10px;
cursor: pointer;
box-sizing: border-box;
font-size: 14px;
}

#chat-box {
flex-grow: 1;
display: flex;
flex-direction: column;
}

/* Messages Display */
#messages {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
max-height: 300px;
flex-grow: 1;
overflow-y: auto;
margin-bottom: 10px;
background:var(--white)
padding: 15px;
border: none;
}

.message {
margin-bottom: 5px;
padding: 5px;
border-bottom: 1px solid #eee;
margin-bottom: 15px;
max-width: 80%;
padding: 10px 15px;
border-radius: 18px;
}

.message:nth-child(odd) {
background-color: #fae5e5;
border-radius: 18px 18px 0 18px;
align-self: flex-end;
}

.message:nth-child(even) {
background-color: #f5f5f5;
border-radius: 18px 18px 18px 0;
align-self: flex-start;
}

.username {
font-weight: bold;
margin-bottom: 5px;
}

.timestamp {
font-size: 0.8em;
color: #888;
margin-top: 5px;
}

#gift-button img {
width: 20px;
height: 20px;
}

#backbutton {
background-color: #ff9b9b;
color: white;
border: none;
border-radius: 20px;
padding: 5px 10px;
margin-right: 10px;
cursor: pointer;
font-size: 12px;
text-decoration: none;
}

#backbutton a {
color: white;
text-decoration: none;
}

/*
.dropdown-menu {
display: none;
position: absolute;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 10px;
border-radius: 5px;
z-index: 1000;
}
.dropdown-menu.active {
display: block;
}
.navbar-item {
position: relative;
}
.dropdown-menu-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.dropdown-menu-item {
margin-top: 5px;
}
.dropdown-menu-item a {
color: black;
text-decoration: none;
} */

/* Header */
.navbar {
display: flex;
Expand Down Expand Up @@ -128,7 +202,7 @@ a {
}

/* Back Button */
#backbutton {
/* #backbutton {
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -139,7 +213,7 @@ a {
border: none;
border-radius: 5px;
cursor: pointer;
}
} */

/* Footer */
footer {
Expand All @@ -148,8 +222,8 @@ footer {
align-items: flex-start;
background-color: #ff9b9b;
font-family: sans-serif;
padding: 20px 0;
margin-top: 300px;
padding: 20px 0;
margin-top: -200px;
flex-wrap: wrap;
}

Expand Down
53 changes: 36 additions & 17 deletions chat.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -352,7 +352,7 @@

<ul class="navbar-list nav">
<a href="../../index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
<img src="../images/final.png" class="logopic" style=" width: 150px;">
<img src="./assets/images/final.png" class="logopic" style=" width: 150px;">
</a>
<li class="navbar-item">
<a href="../../index.html" onclick="lenis.scrollTo('#home')" class="navbar-link" data-nav-link><i
Expand Down Expand Up @@ -384,10 +384,10 @@
</li>

<li class="navbar-item">
<a href="../../index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>
<a href="./assets/html/index.html#rateus" onclick="openRateUsModal(); return false;" class="navbar-link">Rate Us</a></li>

<li class="navbar-item" id="login-signup-link">
<a href="../html/login.html" class="navbar-link">Login/Signup</a>
<a href="./assets/html/login.html" class="navbar-link">Login/Signup</a>
</li>


Expand All @@ -407,56 +407,56 @@
</li>

<li class="dropdown-menu-item">
<a href="../html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
<a href="./assets/html/pricing.html" onclick="lenis.scrollTo('#pricing')" class="navbar-link" data-nav-link><i
class="ri-price-tag-3-fill"></i> Pricing</a>
</li>
<li class="dropdown-menu-item">
<a href="../html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
<a href="./assets/html/booklistswap.html" class="navbar-link">Booklist for Swapping</a>
</li>
<li class="dropdown-menu-item">
<a href="../html/book_recommend.html" class="navbar-link" data-nav-link>
<a href="./assets/html/book_recommend.html" class="navbar-link" data-nav-link>
<i class="ri-customer-service-2-fill"></i> Book Recommendation
</a>
</li>
<li class="dropdown-menu-item">
<a href="../html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
<a href="./assets/html/freeBooks.html" onclick="lenis.scrollTo('#E-books')" class="navbar-link"
data-nav-link><i class="ri-price-tag-3-fill"></i>Free E-books</a>
</li>
<li class="dropdown-menu-item">
<a href="../html/read_later.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Read Later</a>
<a href="./assets/html/read_later.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Read Later</a>
</li>
<li class="dropdown-menu-item">
<a href=".../html/ConnReader.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Reader Connection</a>
<a href="./assets/html/ConnReader.html" class="navbar-link" data-nav-link><i class="ri-price-tag-3-fill"></i>Reader Connection</a>
</li>
<li class="dropdown-menu-item">
<a href="../html/about.html" class="navbar-link">About</a>
<a href="./assets/html/about.html" class="navbar-link">About</a>
</li>
</ul>
</div>
</li>
<li>
<div class="action">
<div class="profile" onclick="menuToggle();">
<img id="profile-avatar" src="../images/avatar1.jpg" />
<img id="profile-avatar" src="./assets/images/avatar1.jpg" />
</div>
<div class="menu">
<h3>XYZ<br /><span>Book Lover</span></h3>
<ul>
<li>
<img src="../images/user.jpg" /><a href="../../profile.html">My profile</a>
<img src="./assets/images/user.jpg" /><a href="../../profile.html">My profile</a>
</li>
<li>
<img src="../images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
<img src="./assets/images/edit profile.jpg" /><a href="../html/profileedit.html">Edit profile</a>
</li>
<li>
<img src="../images/inbox.png" /><a href="#">Inbox</a>
<img src="./assets/images/inbox.png" /><a href="#">Inbox</a>
</li>
<li>
<img src="../images/settings.png" /><a href="#">Settings</a>
<img src="./assets/images/settings.png" /><a href="#">Settings</a>
</li>
<li><img src="../images/help.png" /><a href="#">Help</a></li>
<li><img src="./assets/images/help.png" /><a href="#">Help</a></li>
<li>
<img src="../images/logout.png" /><a href="#">Logout</a>
<img src="./assets/images/logout.png" /><a href="#">Logout</a>
</li>
</ul>
</li>
Expand All @@ -470,6 +470,23 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
document.getElementById("profile-avatar").src = `./assets/images/${savedAvatar}`;
}
});
document.addEventListener('DOMContentLoaded', function () {
const moreLink = document.getElementById('more-link');
const dropdownMenu = document.getElementById('dropdown-menu');

moreLink.addEventListener('click', function (event) {
event.preventDefault();
dropdownMenu.classList.toggle('active');
});

// Optional: Close dropdown when clicking outside
document.addEventListener('click', function (event) {
if (!moreLink.contains(event.target) && !dropdownMenu.contains(event.target)) {
dropdownMenu.classList.remove('active');
}
});
});



function menuToggle() {
Expand Down Expand Up @@ -580,6 +597,7 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
</header>

<body>
<div class="box">
<div class="mainbox">
<div id="chat-container">
<div id="user-input">
Expand All @@ -598,6 +616,7 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
<button id="send-message">Send</button>
</div>
</div>
</div>
</div>
</div>
<script src="chat.js" type="module"></script>
Expand Down
Loading

0 comments on commit 1102aef

Please sign in to comment.