├── README.md
├── package.json
├── php
    ├── search.php
    ├── images
    │   ├── 1675943352audio.jpeg
    │   ├── 1675943465audio.jpeg
    │   ├── 1675943508dental.jpeg
    │   ├── 1681895023Screenshot 2023-03-27 231211.png
    │   ├── 1681895058Screenshot 2023-03-13 133407.png
    │   └── 1681895141Screenshot 2023-03-13 133407.png
    ├── config.php
    ├── users.php
    ├── insert-chat.php
    ├── login.php
    ├── data.php
    ├── get-chat.php
    └── signup.php
├── passwordShow.js
├── header.php
├── users.js
├── sign.js
├── login.js
├── ChatappLogin.php
├── chat.js
├── ChatappUser.php
├── ChatappArea.php
├── index.php
└── Chatapp.css


/README.md:
--------------------------------------------------------------------------------
1 | # chatBot


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |     
3 | }
4 | 


--------------------------------------------------------------------------------
/php/search.php:
--------------------------------------------------------------------------------
1 | <?php
2 |     echo "Yeah";
3 | ?>


--------------------------------------------------------------------------------
/php/images/1675943352audio.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cielo-b/chatBot/HEAD/php/images/1675943352audio.jpeg


--------------------------------------------------------------------------------
/php/images/1675943465audio.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cielo-b/chatBot/HEAD/php/images/1675943465audio.jpeg


--------------------------------------------------------------------------------
/php/images/1675943508dental.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cielo-b/chatBot/HEAD/php/images/1675943508dental.jpeg


--------------------------------------------------------------------------------
/passwordShow.js:
--------------------------------------------------------------------------------
1 | let name = ["christian", "regis", "benoitte"];
2 | //name[0] = "Divin";
3 | name.sort();
4 | name.reverse();
5 | 
6 | console.log(name);


--------------------------------------------------------------------------------
/php/images/1681895023Screenshot 2023-03-27 231211.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cielo-b/chatBot/HEAD/php/images/1681895023Screenshot 2023-03-27 231211.png


--------------------------------------------------------------------------------
/php/images/1681895058Screenshot 2023-03-13 133407.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cielo-b/chatBot/HEAD/php/images/1681895058Screenshot 2023-03-13 133407.png


--------------------------------------------------------------------------------
/php/images/1681895141Screenshot 2023-03-13 133407.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cielo-b/chatBot/HEAD/php/images/1681895141Screenshot 2023-03-13 133407.png


--------------------------------------------------------------------------------
/php/config.php:
--------------------------------------------------------------------------------
1 | <?php
2 |     // $conn = mysqli_connect("sql206.epizy.com","epiz_33398343","yfua8SOFRa8W","epiz_33398343_chat");
3 |     $conn = mysqli_connect('localhost', 'root', '', 'chat');
4 |     if(!$conn){
5 |         echo "Not Connected!" . mysqli_connect_error();
6 |     }
7 | 
8 | ?>


--------------------------------------------------------------------------------
/php/users.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 | include_once "config.php";
 4 | $outgoing_id = $_SESSION['unique_id'];
 5 | // echo $outgoing_id;
 6 | $sql = mysqli_query( $conn, "SELECT * FROM users WHERE NOT unique_id = {$outgoing_id}" );
 7 | $output = "";
 8 | if ( mysqli_num_rows( $sql ) == 1 ) {
 9 |     $output .= "No users available!";
10 | } elseif ( mysqli_num_rows( $sql ) > 0 ) {
11 |    include_once "data.php";
12 |     
13 | }
14 | echo $output;
15 | ?>


--------------------------------------------------------------------------------
/header.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>UsersList</title>
 9 |     <link rel="stylesheet" href="Chatapp.css">
10 |     <link rel="shortcut icon" href="./download.png" type="image/x-icon">
11 |     <link rel="shortcut icon" href="./php/images/images.jpg" type="image/x-icon">
12 | </head>


--------------------------------------------------------------------------------
/php/insert-chat.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 | if ( isset( $_SESSION[ 'unique_id' ] ) ) {
 4 |     include_once 'config.php';
 5 |     $outgoing_id = $_POST[ 'outgoing_id' ];
 6 |     $incoming_id = $_POST[ 'incoming_id' ];
 7 |     $message = $_POST[ 'message' ];
 8 | 
 9 |     if ( !empty( $message ) ) {
10 |         $sql = mysqli_query( $conn, "INSERT INTO messages (incoming_msg_id, outgoing_msg_id, msg) VALUES ({$incoming_id}, {$outgoing_id}, '{$message}') " );
11 |     }
12 | 
13 | } else {
14 |     header( '..ChatappLogin.php' );
15 | }
16 | 
17 | ?>


--------------------------------------------------------------------------------
/users.js:
--------------------------------------------------------------------------------
 1 | const searchBar = document.querySelector(".users .search input"),
 2 | searchBtn = document.querySelector(".users .search button"),
 3 | usersList = document.querySelector(".users .users-list");
 4 | 
 5 | setInterval(()=>{
 6 |     let xhr = new XMLHttpRequest();
 7 |     xhr.open("GET", "php/users.php", true);
 8 |     xhr.onload = () => {
 9 |         if (xhr.readyState === XMLHttpRequest.DONE) {
10 |             if (xhr.status === 200) {
11 |                 let data = xhr.response;
12 |                 usersList.innerHTML = data;
13 |                
14 |             }
15 |         }
16 |     }
17 |     xhr.send();
18 | }, 500);
19 | 


--------------------------------------------------------------------------------
/php/login.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 | include_once 'config.php';
 4 | $email = mysqli_real_escape_string( $conn, $_POST[ 'email' ] );
 5 | $password = mysqli_real_escape_string( $conn, $_POST[ 'password' ] );
 6 | if ( !empty( $email ) && !empty( $password ) ) {
 7 |     $sql = mysqli_query( $conn, "SELECT * FROM users WHERE email = '{$email}' AND password = '{$password}'" );
 8 |     if ( mysqli_num_rows( $sql ) > 0 ) {
 9 | 
10 |         $row = mysqli_fetch_assoc( $sql );
11 |         $_SESSION[ 'unique_id' ] = $row[ 'unique_id' ];
12 |         echo 'Success!';
13 |     } else {
14 |         echo 'Email or password is incorrect!';
15 |     }
16 | } else {
17 |     echo 'All inputs are required!';
18 | }
19 | ?>


--------------------------------------------------------------------------------
/sign.js:
--------------------------------------------------------------------------------
 1 | const form = document.querySelector(".signup form"),
 2 |     continueBtn = form.querySelector(".button input"),
 3 |     errorText = form.querySelector(".error-txt");
 4 | 
 5 | form.onsubmit = (e) => {
 6 |     e.preventDefault();
 7 | }
 8 | 
 9 | continueBtn.onclick = () => {
10 |     //Start of Ajax
11 |     let xhr = new XMLHttpRequest();
12 |     xhr.open("POST", "php/signup.php", true);
13 |     xhr.onload = () => {
14 |         if (xhr.readyState === XMLHttpRequest.DONE) {
15 |             if (xhr.status === 200) {
16 |                 let data = xhr.response;
17 |                 if (data == "Success!") {
18 |                     location.href = "ChatappUser.php";
19 |                 } else {
20 |                     errorText.textContent = data;
21 |                     errorText.style.display = "block";
22 |                 }
23 |             }
24 |         }
25 |     }
26 |     let formData = new FormData(form);
27 |     xhr.send(formData);
28 | }


--------------------------------------------------------------------------------
/login.js:
--------------------------------------------------------------------------------
 1 | const form = document.querySelector(".login form"),
 2 |     continueBtn = form.querySelector(".button input"),
 3 |     errorText = form.querySelector(".error-txt");
 4 | 
 5 | form.onsubmit = (e) => {
 6 |     e.preventDefault();
 7 | }
 8 | 
 9 | continueBtn.onclick = () => {
10 |     //Start of Ajax
11 |     let xhr = new XMLHttpRequest();
12 |     xhr.open("POST", "php/login.php", true);
13 |     xhr.onload = () => {
14 |         if (xhr.readyState === XMLHttpRequest.DONE) {
15 |             if (xhr.status === 200) {
16 |                 let data = xhr.response;
17 |                 
18 |                 if (data == "Success!") {
19 |                     location.href = "ChatappUser.php";
20 |                 } else {
21 |                     errorText.textContent = data;
22 |                     errorText.style.display = "block";
23 |                 }
24 |             }
25 |         }
26 |     }
27 |     let formData = new FormData(form);
28 |     xhr.send(formData);
29 | }


--------------------------------------------------------------------------------
/ChatappLogin.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     include_once "header.php";
 3 | ?>
 4 | 
 5 | <body>
 6 |     <div class="super">
 7 |         <section class="form login">
 8 |             <header>InstMessage</header>
 9 |             <form action="#">
10 |                 <div class="error-txt"></div>
11 |                 <div class="field  input">
12 |                     <label for="email">Email Address</label>
13 |                     <input type="email" placeholder="Enter your email " required name="email">
14 |                 </div>
15 |                 <div class="field  input">
16 |                     <label for="password">Password</label>
17 |                     <input type="password" placeholder="Enter your password" required name="password">
18 |                     <i class="fas fa-eye"></i>
19 |                 </div>
20 |                 <div class="field button">
21 |                     <input type="submit" value="Continue to Chat">
22 |                 </div>
23 | 
24 |             </form>
25 |             <div class="link">Not yet signed up? <a href="./index.php">SignUp now</a></div>
26 |         </section>
27 |     </div>
28 |     <script src="login.js"></script>
29 | </body>
30 | 
31 | </html>


--------------------------------------------------------------------------------
/php/data.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | while( $row = mysqli_fetch_assoc( $sql ) ) {
 3 |     // $sql2 = "SELECT * FROM messages WHERE (incoming_msg_id = {$row['unique_id']}
 4 |     //     OR outgoing_msg_id = {$row['unique_id']}) AND (outgoing_msg_id = {$outgoing_id}
 5 |     //     OR outgoing_msg_id = {$outgoing_id}) ORDER BY msg_id DESC LIMIT 1 ";
 6 | 
 7 |     // $query2 = mysqli_query( $conn, $sql2 );
 8 |     // $row2 = mysqli_fetch_assoc( $query2 );
 9 |     // if ( mysqli_num_rows( $query2 ) > 0 ) {
10 |     //     $result = $row2[ 'msg' ];
11 |     // } else {
12 |     //     $result = 'No message available!';
13 |     // }
14 | 
15 |     // ( strlen( $result ) > 28 ) ? $msg = substr( $result, 0, 10 ). '...' : $msg = $result;
16 |     // ( $outgoing_id == $row2[ 'outgoing_msg_id' ] ) ? $you = 'You: ' : $you = '';
17 | 
18 |     $output .= '<a href="ChatappArea.php?user_id='.$row[ 'unique_id' ].'">
19 |                     <div class="content">
20 |                         <img src="php/images/'. $row[ 'image' ] .'" alt="">
21 |                         <div class="details">
22 | 
23 |                             <span>'. $row[ 'fname' ] .' '. $row[ 'lname' ] .'</span>
24 |                             <p style="color:green;font-size:12px;">Click to chat</p>
25 |                         </div>
26 | 
27 |                     </div>
28 |                     </a>';
29 | }
30 | 
31 | ?>


--------------------------------------------------------------------------------
/php/get-chat.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 | if ( isset( $_SESSION[ 'unique_id' ] ) ) {
 4 |     include_once 'config.php';
 5 |     $outgoing_id = $_POST[ 'outgoing_id' ];
 6 |     $incoming_id = $_POST[ 'incoming_id' ];
 7 |     $output = "";
 8 | 
 9 |     $sql = "SELECT * FROM messages LEFT JOIN users ON users.unique_id = messages.outgoing_msg_id WHERE (outgoing_msg_id = {$outgoing_id} AND incoming_msg_id = {$incoming_id}) OR (outgoing_msg_id = {$incoming_id} AND incoming_msg_id = {$outgoing_id}) ORDER BY msg_id";
10 |     $query = mysqli_query($conn, $sql);
11 |     if(mysqli_num_rows($query) > 0){
12 |         while($row = mysqli_fetch_assoc($query)){
13 |             if($row['outgoing_msg_id'] === $outgoing_id ){
14 |                 $output = '<div class="msg outgoing">
15 |                                 <div class="details">
16 |                                     <p>'. $row['msg'] .'</p>
17 |                                 </div>
18 |                             </div>';
19 |             }else{
20 |                 $output = ' <div class="msg incoming">
21 |                             <img src="php/images/'. $row['image'] .'" alt="">
22 |                                 <div class="details">
23 |                                     <p>'. $row['msg'] .'</p>
24 |                                 </div>
25 |                             </div>';
26 |             }
27 |             echo $output;
28 |         }
29 |     }
30 |     
31 | 
32 | } else {
33 |     header( '../ChatappLogin.php' );
34 | }
35 | 
36 | ?>


--------------------------------------------------------------------------------
/chat.js:
--------------------------------------------------------------------------------
 1 | let form = document.querySelector(".typing-area"),
 2 |     inputField = form.querySelector('.inputField'),
 3 |     sendBtn = form.querySelector('button'),
 4 |     chatBox = document.querySelector(".chat-box");
 5 | 
 6 | form.onsubmit = (e) => {
 7 |     e.preventDefault();
 8 | }
 9 | 
10 | sendBtn.onclick = () => {
11 |     //Start of Ajax
12 |     let xhr = new XMLHttpRequest();
13 |     xhr.open("POST", "php/insert-chat.php", true);
14 |     xhr.onload = () => {
15 |         if (xhr.readyState === XMLHttpRequest.DONE) {
16 |             if (xhr.status === 200) {
17 |                 inputField.value = "";
18 |                 scrollToBottom();
19 |             }
20 |         }
21 |     }
22 |     let formData = new FormData(form);
23 |     xhr.send(formData);
24 | }
25 | 
26 | chatBox.onmouseenter = ()=>{
27 |     chatBox.classList.add("active")
28 | }
29 | chatBox.onmouseleave = ()=>{
30 |     chatBox.classList.remove("active")
31 | }
32 | 
33 | 
34 | 
35 | setInterval(() => {
36 |     let xhr = new XMLHttpRequest();
37 |     xhr.open("POST", "php/get-chat.php", true);
38 |     xhr.onload = () => {
39 |         if (xhr.readyState === XMLHttpRequest.DONE) {
40 |             if (xhr.status === 200) {
41 |                 let data = xhr.response;
42 |                 chatBox.innerHTML = data;
43 |                 if(!chatBox.classList.contains("active")){
44 |                     scrollToBottom();
45 |                 }
46 |             }
47 |         }
48 |     }
49 |     let formData = new FormData(form);
50 |     xhr.send(formData);
51 |     // xhr.send();
52 | }, 500);
53 | 
54 | const scrollToBottom = ()=>{
55 |     chatBox.scrollTop= chatBox.scrollHeight;
56 | }


--------------------------------------------------------------------------------
/ChatappUser.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 | if ( !isset( $_SESSION[ 'unique_id' ] ) ) {
 4 |     header( "location: ChatappLogin.php ");
 5 | }
 6 | ?>
 7 | <?php
 8 | include_once 'header.php';
 9 | ?>
10 | 
11 | <body>
12 |     <div class='super'>
13 |         <section class='users'>
14 |             <header>
15 |                 <?php
16 |                     include_once "php/config.php";
17 |                     // $user_id = $row['unique_id'];
18 |                    $sql = mysqli_query($conn,"SELECT * FROM users WHERE unique_id = {$_SESSION['unique_id']}");
19 |                    if(mysqli_num_rows($sql) > 0){
20 |                     $row = mysqli_fetch_assoc($sql);
21 |                    }
22 |                 ?>
23 |                 <div class='content'>
24 |                     <img src='php/images/<?php echo $row['image']?>' alt=''>
25 |                     <div class='details'>
26 | 
27 |                         <span><?php echo $row['fname'] .' '. $row['lname']?></span>
28 |                         <p><?php echo $row['status']?></p>
29 |                     </div>
30 |                 </div>
31 |                 <a href='./ChatappLogin.php?logout_id:<?php echo $row['unique_id']?>' class='logout'>Logout</a>
32 |             </header>
33 |             <!-- <div class='search' hidden>
34 |                 <span class='text'>Select a user to chat</span>
35 |                 <input type='text' placeholder='Enter name to search...'>
36 |                 <button><i class='fas fa-search'>Search</i></button>
37 |             </div> -->
38 |             <div class='users-list'>
39 |                 
40 |                 
41 |             </div>
42 | 
43 |         </section>
44 |     </div>
45 |     <script src="users.js"></script>
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/ChatappArea.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | session_start();
 3 | if ( !isset( $_SESSION[ 'unique_id' ] ) ) {
 4 |     header( "location: ChatappLogin.php ");
 5 | }
 6 | ?>
 7 | <?php include_once "header.php"; ?>
 8 | 
 9 | <body>
10 |     <div class="super">
11 |         <section class="chat-area">
12 |             <header>
13 |         <?php
14 |             include_once "php/config.php";
15 |             $user_id = mysqli_real_escape_string($conn, $_GET['user_id']);
16 |             // $userId = $_GET["user_id"];
17 |             $sql = mysqli_query($conn,"SELECT * FROM users WHERE unique_id = {$user_id}");
18 |             if(mysqli_num_rows($sql) > 0){
19 |                 $row = mysqli_fetch_assoc($sql);
20 |                 
21 |             }
22 |         
23 |         ?>
24 |                 <div class="content">
25 |                     <img src="php/images/<?php echo $row['image']?>" alt="">
26 |                     <div class="details">
27 | 
28 |                         <span><?php echo $row['fname'] .' '. $row['lname']?></span>
29 |                         <p><?php echo $row['status']?></p>
30 |                     </div>
31 |                 </div>
32 |                 
33 |             </header>
34 |             <div class="chat-box">
35 |                 
36 |                 
37 |             </div>
38 |             <form action="#" autocomplete="off" method="POST" class="typing-area">
39 |                 <input type="text" name="outgoing_id" value="<?php echo $_SESSION['unique_id'];?>" hidden>
40 |                 <input type="text" name="incoming_id" value="<?php echo $user_id;?>" hidden>
41 |                 <input class="inputField" name="message" type="text" placeholder="Type your message here ...">
42 |                 <button type="submit">Send</button>
43 |             </form>
44 | 
45 |         </section>
46 |     </div>
47 |     <script src="chat.js"></script>
48 | </body>
49 | 
50 | </html>


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     include_once "header.php";
 3 | ?>
 4 | 
 5 | <body>
 6 |     <div class="super">
 7 |         <section class="form signup">
 8 |             <header>InstMessage</header>
 9 |             <form action="#" enctype="multipart/form-data" autocomplete="off">
10 |                 <div class="error-txt"></div>
11 |                 <div class="name-details">
12 |                     <div class="field input">
13 |                         <label for="first name">First Name</label>
14 |                         <input type="text" placeholder="First Name" name="fname" required>
15 |                     </div>
16 |                     <div class="field  input">
17 |                         <label for="last name">Last Name</label>
18 |                         <input type="text" placeholder="Last Name" name="lname" required>
19 |                     </div>
20 |                 </div>
21 |                 <div class="field  input">
22 |                     <label for="email">Email Address</label>
23 |                     <input type="email" placeholder="Enter your email " name="email" required>
24 |                 </div>
25 |                 <div class="field  input">
26 |                     <label for="password">Password</label>
27 |                     <input type="password" placeholder="Enter your new password" name="password" required>
28 |                 </div>
29 |                 <div class="field image">
30 |                     <label for="file">Select image</label>
31 |                     <input type="file" name="image" required>
32 |                 </div>
33 |                 <div class="field button">
34 |                     <input type="submit" value="Continue to Chat">
35 |                 </div>
36 | 
37 |             </form>
38 |             <div class="link">Already signed up? <a href="./ChatappLogin.php">Login now</a></div>
39 |         </section>
40 |     </div>
41 |     <!-- <script src="./passwordShow.js"></script> -->
42 |     <script src="./sign.js"></script>
43 | </body>
44 | 
45 | </html>


--------------------------------------------------------------------------------
/php/signup.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | //start the session
 3 | 
 4 | session_start();
 5 | 
 6 | //connection
 7 | 
 8 | include_once 'config.php';
 9 | 
10 | //get user credentials from the form
11 | 
12 | $fname = mysqli_real_escape_string( $conn, $_POST[ 'fname' ] );
13 | $lname = mysqli_real_escape_string( $conn, $_POST[ 'lname' ] );
14 | $email = mysqli_real_escape_string( $conn, $_POST[ 'email' ] );
15 | $password = mysqli_real_escape_string( $conn, $_POST[ 'password' ] );
16 | 
17 | 
18 | //check if they are empty
19 | 
20 | 
21 | if ( !empty( $fname ) && !empty( $lname ) && !empty( $email ) && !empty( $password ) ) {
22 |     //check the email
23 |     if ( filter_var( $email, FILTER_VALIDATE_EMAIL ) ) {
24 |         //check if the email already exists
25 |         $sql = mysqli_query( $conn, "SELECT email FROM users WHERE email = '{$email}'" );
26 |         if ( mysqli_num_rows( $sql ) > 0 ) {
27 |             echo $email . 'already taken!';
28 |             
29 |             //if it isn't taken, check the image
30 |         } else {
31 |             if ( isset( $_FILES[ 'image' ] ) ) {
32 |                 $image_name = $_FILES[ 'image' ][ 'name' ];
33 |                 $image_type = $_FILES[ 'image' ][ 'type' ];
34 |                 $tmp_name = $_FILES[ 'image' ][ 'tmp_name' ];
35 |                 //get the extension of the image
36 |                 $img_explode = explode( '.', $image_name );
37 |                 $img_ext = end( $img_explode );
38 |                 //allowed extensions 
39 |                 $extensions = [ 'png', 'jpg', 'jpeg' ];
40 |                 if ( in_array( $img_ext, $extensions ) === true ) {
41 |                     $time = time();
42 |                     //rename the image by adding the time it is uploaded to differentiate it from others evenif they are the same
43 |                     $new_img_name = $time . $image_name;
44 |                     //save the image in a folder not the database
45 |                     if ( move_uploaded_file( $tmp_name, 'images/' . $new_img_name ) ) {
46 |                         $status = 'Active now';
47 |                         $random_id = rand( time(), 10000000 );
48 |                         //$newPass = password_hash( $password, PASSWORD_DEFAULT );
49 |                         //save the user's credentials in the database
50 |                         // $user_id = $_SESSION[ 'unique_id' ];
51 |                         $sql2 = mysqli_query( $conn, "INSERT INTO users (unique_id,fname,lname,email,password,image,status) 
52 |                                                       VALUES({$random_id},'{$fname}','{$lname}','{$email}','{$password}','{$new_img_name}','{$status}')" );
53 |                         if ( $sql2 ) {
54 |                             $sql3 = mysqli_query( $conn, "SELECT * FROM users WHERE email = '{$email}'" );
55 |                             if ( mysqli_num_rows( $sql3 ) > 0 ) {
56 |                                 $row = mysqli_fetch_assoc( $sql3 );
57 |                                 $_SESSION[ 'unique_id' ] = $row[ 'unique_id' ];
58 |                                 
59 |                                 echo 'Success!';
60 |                             }
61 |                         } else {
62 |                             echo 'SOmething went wrong!';
63 |                         }
64 |                     }
65 | 
66 |                 } else {
67 |                     echo 'The image is not supported!';
68 |                 }
69 |             }
70 |         }
71 | 
72 |     } else {
73 |         echo "$email is invalid! ";
74 |     }
75 | } else {
76 |     echo 'All inputs are required!';
77 | }
78 | ?>


--------------------------------------------------------------------------------
/Chatapp.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     margin: 0;
  4 |     box-sizing: border-box;
  5 |     text-decoration: none;
  6 |     font-family: 'poppins'sans-serif;
  7 | }
  8 | 
  9 | body {
 10 |     display: flex;
 11 |     align-items: center;
 12 |     justify-content: center;
 13 |     min-height: 100vh;
 14 |     background-color: #f7f7f7;
 15 | }
 16 | 
 17 | .super {
 18 |     background-color: #fff;
 19 |     width: 450px;
 20 |     border-radius: 16px;
 21 |     box-shadow: 0 0 128px rgba(0, 0, 0, 0.1),
 22 |         0 32px 64px -48px rgba(0, 0, 0, 0.5);
 23 | 
 24 | }
 25 | 
 26 | .form {
 27 |     padding: 25px 30px;
 28 | }
 29 | 
 30 | .form header {
 31 |     font-size: 25px;
 32 |     font-weight: 600;
 33 |     padding-bottom: 10px;
 34 |     border-bottom: 1px solid #e6e6e6;
 35 |     text-align: center;
 36 | }
 37 | 
 38 | .form form {
 39 |     margin: 20px 0;
 40 | }
 41 | 
 42 | .form form .error-txt {
 43 |     color: #721c24;
 44 |     background: #f8d7da;
 45 |     padding: 8px 10px;
 46 |     text-align: center;
 47 |     border-radius: 5px;
 48 |     margin-bottom: 10px;
 49 |     border: 1px solid #f8d7da;
 50 |     display: none;
 51 | }
 52 | 
 53 | .form form .field {
 54 |     display: flex;
 55 |     flex-direction: column;
 56 | }
 57 | 
 58 | .form form .field input {
 59 |     outline: none;
 60 | }
 61 | 
 62 | .form form .input input {
 63 |     height: 40px;
 64 |     width: 100%;
 65 |     font-size: 16px;
 66 |     padding: 0 10px;
 67 |     border: 1px solid #ccc;
 68 |     border-radius: 5px;
 69 | }
 70 | 
 71 | .form form .name-details {
 72 |     display: flex;
 73 | }
 74 | 
 75 | .form form .name-details .field:first-child {
 76 |     margin-right: 10px;
 77 | }
 78 | 
 79 | .form form .name-details .field:last-child {
 80 |     margin-left: 10px;
 81 | }
 82 | 
 83 | .form form .field label {
 84 |     margin-bottom: 2px;
 85 | }
 86 | 
 87 | .form form .image input {
 88 |     font: 17px;
 89 | }
 90 | 
 91 | .form form .button input {
 92 |     margin-top: 13px;
 93 |     height: 45px;
 94 |     border: none;
 95 |     font: 17px;
 96 |     font-weight: 500;
 97 |     background: #333;
 98 |     color: white;
 99 |     cursor: pointer;
100 |     border-radius: 5px;
101 | }
102 | 
103 | .form .link {
104 |     text-align: center;
105 |     margin: 10px 0;
106 |     font-size: 17px;
107 | }
108 | 
109 | .form .link a {
110 |     color: #333;
111 | }
112 | 
113 | .form .link a:hover {
114 |     text-decoration: underline;
115 | }
116 | 
117 | .users {
118 |     padding: 25px 30px;
119 | }
120 | 
121 | .users header {
122 |     display: flex;
123 |     align-items: center;
124 |     padding-bottom: 20px;
125 |     justify-content: space-between;
126 |     border-bottom: 1px solid #e6e6e6;
127 | }
128 | 
129 | .super img {
130 |     object-fit: cover;
131 |     border-radius: 50%;
132 | }
133 | 
134 | .users header .content {
135 |     display: flex;
136 | }
137 | 
138 | .users header .content img {
139 |     width: 50px;
140 |     height: 50px;
141 | 
142 | }
143 | 
144 | .users header .details {
145 |     margin-left: 10px;
146 | }
147 | 
148 | .users header .details span {
149 |     font-weight: bolder;
150 |     font-size: 18px;
151 | }
152 | 
153 | .users header .logout {
154 |     background-color: #333;
155 |     color: #fff;
156 |     padding: 7px 15px;
157 |     border-radius: 5px;
158 | }
159 | 
160 | .users .search {
161 |     margin: 0px 20px;
162 |     display: flex;
163 |     align-items: center;
164 |     justify-content: space-between;
165 |     position: relative;
166 |     margin-top: 10px;
167 | }
168 | 
169 | .users .search input {
170 |     position: absolute;
171 |     height: 42px;
172 |     width: calc(100% - 50px);
173 |     border: 1px solid #ccc;
174 |     border-radius: 5px 0px 0px 5px;
175 |     font-size: 17px;
176 |     padding: 0px 13px;
177 |     outline: none;
178 | }
179 | 
180 | .users .search button {
181 |     width: 47px;
182 |     height: 42px;
183 |     border: none;
184 |     outline: none;
185 |     color: #fff;
186 |     background: #333;
187 |     border-radius: 0px 5px 5px 0px;
188 |     cursor: pointer;
189 | }
190 | 
191 | .users-list {
192 |     margin-top: 20px;
193 |     max-height: 350px;
194 |     overflow-y: auto;
195 | }
196 | 
197 | .users-list::-webkit-scrollbar {
198 |     width: 0px;
199 | }
200 | 
201 | .users-list a {
202 |     display: flex;
203 |     align-items: center;
204 |     padding-bottom: 20px;
205 |     justify-content: space-between;
206 |     border-bottom: 1px solid #e6e6e6;
207 |     padding-right: 10px;
208 |     margin-bottom: 10px;
209 |     page-break-after: 10px;
210 |     border-bottom-color: #f1f1f1;
211 | }
212 | 
213 | .users-list a:last-child {
214 |     border: none;
215 |     margin-bottom: 0px;
216 | }
217 | 
218 | .users-list a .content img {
219 |     height: 40px;
220 |     width: 40px;
221 | }
222 | 
223 | .users-list a .content {
224 |     display: flex;
225 |     align-items: center;
226 |     padding-bottom: 20px;
227 |     justify-content: space-between;
228 | 
229 | }
230 | 
231 | .users-list a .content .details {
232 |     margin-left: 17px;
233 |     color: black;
234 | }
235 | 
236 | .users-list a .content .details span {
237 |     font-weight: bolder;
238 | }
239 | 
240 | .users .content p {
241 |     color: #67676a;
242 | }
243 | 
244 | .chat-area header {
245 |     padding: 18px 30px;
246 |     align-items: center;
247 |     display: flex;
248 | }
249 | 
250 | .chat-area header img {
251 |     width: 45px;
252 |     height: 45px;
253 | 
254 | }
255 | 
256 | .content {
257 |     display: flex;
258 | }
259 | 
260 | .content .details {
261 |     margin-left: 15px;
262 | }
263 | 
264 | .content span {
265 |     font-size: 17px;
266 |     font-weight: bolder;
267 | }
268 | 
269 | .chat-box {
270 |     height: 500px;
271 |     background: #f7f7f7;
272 |     padding: 10px 30px 20px 30px;
273 |     box-shadow: inset 0 32px 32px -32px rgb(0 0 0 /5%),
274 |         inset 0 -32px 32px -32px rgb(0 0 0 /5%);
275 |     overflow-y: auto;
276 | }
277 | 
278 | .chat-box::-webkit-scrollbar {
279 |     width: 0px;
280 | }
281 | 
282 | .chat-box .msg p {
283 |     word-wrap: break-word;
284 |     padding: 8px 16px;
285 |     box-shadow: 0 0 32px rgb(0 0 0 / 8%),
286 |         0 16px 16px -16px rgb(0 0 0 / 10%);
287 | }
288 | 
289 | .chat-box .outgoing {
290 |     display: flex;
291 | }
292 | 
293 | .outgoing .details p {
294 |     background: #333;
295 |     color: #fff;
296 |     padding: 8px 16px;
297 |     border-radius: 18px 18px 0px 18px;
298 | }
299 | 
300 | .outgoing .details {
301 |     max-width: calc(100% - 130px);
302 |     margin-left: auto;
303 | }
304 | 
305 | .chat-box .incoming {
306 |     display: flex;
307 |     align-items: flex-end;
308 | }
309 | 
310 | .chat-box .incoming img {
311 |     height: 35px;
312 |     width: 35px;
313 | }
314 | 
315 | .incoming .details p {
316 |     background: #fff;
317 |     color: #333;
318 |     border-radius: 18px 18px 18px 0;
319 |     padding: 8px 16px;
320 |     margin-right: auto;
321 | }
322 | 
323 | .incoming .details {
324 |     margin-left: 10px;
325 |     max-width: calc(100% - 130px);
326 | }
327 | 
328 | .chat-box .msg {
329 |     margin: 15px 0;
330 | }
331 | 
332 | .chat-area .typing-area {
333 |     padding: 18px 30px;
334 |     display: flex;
335 |     justify-content: space-between;
336 | }
337 | 
338 | .typing-area input {
339 |     height: 45px;
340 |     width: calc(100% - 58px);
341 |     border: 1px solid #ccc;
342 |     padding: 0 13px;
343 |     outline: none;
344 |     border-radius: 5px 5px 5px 5px;
345 | }
346 | 
347 | .typing-area button {
348 |     outline: none;
349 |     background: #333;
350 |     color: #fff;
351 |     border-radius: 5px;
352 |     width: 55px;
353 |     cursor: pointer;
354 | }
355 | 
356 | .btn {
357 |     margin-top: 10px;
358 |     outline: none;
359 | 
360 | }


--------------------------------------------------------------------------------