Skip to content
Snippets Groups Projects
Commit 0fa9c37d authored by Suriya Ravichandran's avatar Suriya Ravichandran
Browse files

frontend design complete

parent 86295f9e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
assets/images/profile.jpg 0 → 100644
+ 0
− 0
View file @ 0fa9c37d
assets/images/profile.jpg

1.12 KiB

chat.html 0 → 100644
+ 73
− 0
View file @ 0fa9c37d
<!DOCTYPE <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gochat</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/chat.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<section class="chat-area">
<!--header section-->
<header>
<a href="" class="back-icon"><i class="fas fa-arrow-left"></i></a>
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<span>Suriya</span>
<p>Active Now</p>
</div>
</header>
<div class="chatbox">
<div class="chat-outgoing">
<div class="details">
<p>hello suriya</p>
</div>
</div>
<div class="chat-incoming">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<p>hello suriya</p>
</div>
</div>
<div class="chat-outgoing">
<div class="details">
<p>hello suriya</p>
</div>
</div>
<div class="chat-incoming">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<p>hello suriya</p>
</div>
</div>
<div class="chat-outgoing">
<div class="details">
<p>hello suriya</p>
</div>
</div>
<div class="chat-incoming">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<p>hello suriya</p>
</div>
</div>
</div>
<form action="#" class="typing-area">
<input type="text" placeholder="type a message here....">
<button><i class="fas fa-paper-plane"></i></button>
</form>
</section>
</div>
</div>
<script src="" async defer></script>
</body>
</html>
\ No newline at end of file
style/chat.css 0 → 100644
+ 143
− 0
View file @ 0fa9c37d
/* Reset some default styling */
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
}
/* Center the content on the page */
.wrapper {
background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url("../assets/images/background.png");
display: flex;
align-items: flex-start;
justify-content: center;
height: 100vh;
padding-top: 20px; /* Adjust the top padding as needed */
}
/* Style the chat area */
.chat-area {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
overflow: hidden;
}
/* Style the header section */
header {
background-color: #007bff;
color: #fff;
padding: 15px;
display: flex;
align-items: center;
}
/* Style the back icon */
.back-icon {
color: #fff;
text-decoration: none;
margin-right: 10px;
}
/* Style the content within the header */
header img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
header .details {
display: flex;
flex-direction: column;
}
header .details span {
font-weight: bold;
}
header .details p {
font-size: 12px;
}
/* Style the chatbox */
.chatbox {
max-height: 400px;
overflow-y: auto;
padding: 15px;
scrollbar-width: thin; /* For Firefox */
scrollbar-color: transparent transparent; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.chatbox::-webkit-scrollbar {
width: 0; /* For Chrome, Safari, and Opera */
}
/* Style outgoing messages */
.chat-outgoing {
display: flex;
margin-bottom: 10px;
}
.chat-outgoing .details {
max-width: 70%;
}
.chat-outgoing p {
padding: 10px;
background-color: #4CAF50;
color: #fff;
border-radius: 8px;
}
/* Style incoming messages */
.chat-incoming {
display: flex;
margin-bottom: 10px;
}
.chat-incoming .details {
max-width: 70%;
}
.chat-incoming p {
padding: 10px;
background-color: #3498db; /* Change this color for incoming messages */
color: #fff;
border-radius: 8px;
}
.chat-incoming img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
/* Style the typing area */
.typing-area {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
background-color: #fff;
}
.typing-area input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.typing-area button {
background-color:#007bff;
color: #fff;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
style/user.css 0 → 100644
+ 163
− 0
View file @ 0fa9c37d
/* Reset some default styling */
body {
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
}
/* Center the content on the page */
.wrapper {
background-image: linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url("../assets/images/background.png");
display: flex;
align-items: flex-start;
justify-content: center;
height: 100vh;
padding-top: 20px; /* Adjust the top padding as needed */
}
/* Style the users section */
.users {
background-color:#EB984E;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 400px;
overflow: hidden;
}
/* Style the header section */
.users header {
background-color: #007bff;
color: #fff;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.users header img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.users header .content {
display: flex;
align-items: center;
}
.users header .details {
display: flex;
flex-direction: column;
}
.users header .details span {
font-weight: bold;
}
.users header .details p {
font-size: 12px;
}
.users header .logout {
color: #fff;
text-decoration: none;
font-size: 14px;
}
/* Style the search bar */
.search {
position: relative;
padding: 15px;
border-bottom: 1px solid #ddd;
}
.search .text {
font-size: 14px;
color: #888;
}
.search input {
width: calc(100% - 40px);
padding: 10px;
margin-top: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
.search button {
position: absolute;
top: 40px;
right: 15px;
background-color: #007bff;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
border-radius: 4px;
}
/* Style font-awesome icons */
.fa {
font-size: 16px;
}
/* Style the user list */
.users-list {
overflow-y: auto;
max-height: 400px;
scrollbar-width: thin; /* For Firefox */
scrollbar-color: transparent transparent; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.users-list::-webkit-scrollbar {
width: 0; /* For Chrome, Safari, and Opera */
}
.users-list a {
text-decoration: none;
color: #000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
border-bottom: 1px solid #ddd;
}
.users-list img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.users-list .content {
display: flex;
align-items: center;
}
.users-list .details {
display: flex;
flex-direction: column;
}
.users-list .details span {
font-weight: bold;
}
.users-list .details p {
font-size: 12px;
}
.users-list .status-dot {
margin-left: auto;
}
.status-dot i {
font-size: 10px;
color: #28a745; /* Green for active status */
}
users.html
+ 57
− 3
View file @ 0fa9c37d
......@@ -7,15 +7,16 @@
<title>Gochat</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/login.css">
<link rel="stylesheet" href="style/user.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<section class="users">
<!--header section-->
<header>
<div class="content">
<img src="" alt="">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<span>Suriya</span>
<p>Active Now</p>
......@@ -29,8 +30,61 @@
<input type="text" placeholder="Enter name to search...">
<button ><i class="fa fa-search"></i></button>
</div>
<!--user list section-->
<div class="users-list">
<a href="#">
<div class="content">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<span>Karthi</span>
<p>this is test message</p>
</div>
</div>
<div class="status-dot"><i class="fa fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<span>Madhan</span>
<p>this is test message</p>
</div>
</div>
<div class="status-dot"><i class="fa fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<span>Jhon</span>
<p>this is test message</p>
</div>
</div>
<div class="status-dot"><i class="fa fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<span>Hari</span>
<p>this is test message</p>
</div>
</div>
<div class="status-dot"><i class="fa fa-circle"></i></div>
</a>
<a href="#">
<div class="content">
<img src="assets/images/profile.jpg" alt="">
<div class="details">
<span>Smith</span>
<p>this is test message</p>
</div>
</div>
<div class="status-dot"><i class="fa fa-circle"></i></div>
</a>
</div>
</section>
</div>
</div>
<script src="" async defer></script>
</body>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment