└── whatsapp
    ├── .vscode
        └── settings.json
    ├── Screenshot (7).png
    ├── Screenshot (8).png
    ├── Screenshot (9).png
    ├── 8888-removebg-preview.png
    ├── 9999-removebg-preview.png
    ├── Black Geometric Depop Profile Picture.png
    ├── README.md
    ├── script.js
    ├── style.css
    └── index.html


/whatsapp/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "liveServer.settings.port": 5501
3 | }


--------------------------------------------------------------------------------
/whatsapp/Screenshot (7).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vinaykumarmahato/whatsapp-ui-clone-/HEAD/whatsapp/Screenshot (7).png


--------------------------------------------------------------------------------
/whatsapp/Screenshot (8).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vinaykumarmahato/whatsapp-ui-clone-/HEAD/whatsapp/Screenshot (8).png


--------------------------------------------------------------------------------
/whatsapp/Screenshot (9).png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vinaykumarmahato/whatsapp-ui-clone-/HEAD/whatsapp/Screenshot (9).png


--------------------------------------------------------------------------------
/whatsapp/8888-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vinaykumarmahato/whatsapp-ui-clone-/HEAD/whatsapp/8888-removebg-preview.png


--------------------------------------------------------------------------------
/whatsapp/9999-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vinaykumarmahato/whatsapp-ui-clone-/HEAD/whatsapp/9999-removebg-preview.png


--------------------------------------------------------------------------------
/whatsapp/Black Geometric Depop Profile Picture.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vinaykumarmahato/whatsapp-ui-clone-/HEAD/whatsapp/Black Geometric Depop Profile Picture.png


--------------------------------------------------------------------------------
/whatsapp/README.md:
--------------------------------------------------------------------------------
 1 | # WhatsApp UI Clone
 2 | 
 3 | This project is a clone of the WhatsApp user interface (UI). It replicates the design and layout of the WhatsApp mobile application.
 4 | 
 5 | ## Description
 6 | 
 7 | The WhatsApp UI clone is built using HTML, CSS, and JavaScript. It aims to mimic the look and feel of the official WhatsApp app, providing a similar user experience. The clone includes features such as a chat list, contact profiles, last chat times, and a menu bar with different tabs for chats, status, and calls.
 8 | 
 9 | ## Installation
10 | 
11 | To run this project locally, follow these steps:
12 | 
13 | 1. Clone the repository:
14 | git clone https://github.com/ADVindiancoder/whatsapp-ui-clone.git
15 | 
16 | ## Usage
17 | The WhatsApp UI clone can be used to explore and understand the layout and design of the WhatsApp mobile application. It can also serve as a starting point for building your own messaging application.
18 | 
19 | ## Contributing
20 | Contributions are welcome! If you have any suggestions or improvements for the project, please submit a pull request. Make sure to follow the contribution guidelines.
21 | 
22 | ## License
23 | This project is licensed under the MIT License.
24 | 


--------------------------------------------------------------------------------
/whatsapp/script.js:
--------------------------------------------------------------------------------
 1 | 
 2 | let menuBar;
 3 | let fixedMenu;
 4 | let statusBar;
 5 | let chartBar;
 6 | let active;
 7 | let callBar;
 8 | let chatCallStatus;
 9 | 
10 | window.onload = function () {
11 | 
12 |     setTimeout(() => {
13 |         document.querySelector('body').style.opacity = '1';
14 |     }, 500);
15 | 
16 |     menuBar = document.querySelector('.menu-bar');
17 |     fixedMenu = menuBar.offsetTop;
18 |     statusBar = document.querySelector('.status-container');
19 |     chartBar = document.querySelector('.chat-container');
20 |     active = document.getElementsByClassName('menu-bar__list-item');
21 |     callBar = document.querySelector('.call-container');
22 |     chatCallStatus = document.querySelector('.chat-status-call');
23 |     statusBar.remove();
24 |     callBar.remove();
25 |     changeTab(1);
26 | 
27 | 
28 |     window.onscroll = function () {
29 | 
30 |         if (window.pageYOffset >= fixedMenu) {
31 |             menuBar.classList.add("fixed-menu")
32 |         } else {
33 |             menuBar.classList.remove("fixed-menu");
34 |         }
35 |     }
36 | }
37 | 
38 | function changeTab(index) {
39 | 
40 |     for (var i = 0; i < 3; i++)
41 |         active[i].classList.remove('active-select-menu');
42 |     active[index - 1].classList.add('active-select-menu');
43 |     if (index == 1) {
44 |         statusBar.remove();
45 |         callBar.remove()
46 |         $(chatCallStatus).append(chartBar);
47 | 
48 |     }
49 |     else if (index == 2) {
50 |         chartBar.remove();
51 |         callBar.remove();
52 |         $(chatCallStatus).append(statusBar);
53 | 
54 |     }
55 | 
56 |     else if (index == 3) {
57 |         chartBar.remove();
58 |         statusBar.remove();
59 |         $(chatCallStatus).append(callBar);
60 |     }
61 | 
62 | }


--------------------------------------------------------------------------------
/whatsapp/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
  2 | 
  3 | *{
  4 |     margin: 0;
  5 |     padding: 0;
  6 | }
  7 | 
  8 | body{
  9 |     font-family: 'Roboto';
 10 |     opacity: 0;
 11 |     transition: all .6s;
 12 | }
 13 | 
 14 | .phone-status-bar{
 15 |     background-color: #128C7E;
 16 |     padding: 1rem;
 17 |     display: flex;
 18 |     justify-content: space-between;
 19 |     align-items: center;
 20 |     color: #fff;
 21 |     font-weight: 200;
 22 |     position: relative;
 23 | }
 24 | .phone-status-bar i{
 25 |    padding-right: 1rem;
 26 |    font-size: 1.3rem;
 27 |    cursor: pointer;
 28 | }
 29 | .heading-primary{
 30 |     font-family: 'Lato', sans-serif;
 31 |     font-size: 1.5rem;
 32 | }
 33 | 
 34 | .menu-bar{
 35 |     background-color: #128C7E;
 36 |     display: flex;
 37 |     justify-content: space-between;
 38 |     align-items: center;
 39 |     color: #fff;
 40 |     position: relative;
 41 |     z-index: 6;
 42 |     box-shadow: 0 2px 6px rgba(0,0,0,.2);
 43 |  }
 44 | 
 45 |  .fixed-menu {
 46 |     position: fixed;
 47 |     top: 0;
 48 |     width: 100%;
 49 |   }
 50 | 
 51 |  .menu-bar i{
 52 |      margin: 0 10px;
 53 |      opacity: .8;
 54 |  }
 55 | 
 56 | .menu-bar__list{
 57 |     width: 100%;
 58 |     text-transform: uppercase;
 59 |     font-weight: 800;
 60 |     list-style: none;
 61 |     display: flex;
 62 |     justify-content:space-between;
 63 | }
 64 | 
 65 | .menu-bar__list-item{
 66 |     opacity: .8;
 67 |     padding: .8rem 1rem;
 68 |     border-bottom: 2px solid transparent;
 69 |     transition: all .2s ease-in-out;
 70 | }
 71 | 
 72 | 
 73 | 
 74 | .active-select-menu ,.menu-bar__list-item:hover{
 75 |     opacity: 1;
 76 |     cursor: pointer;
 77 |     border-bottom: 3px solid #fff;
 78 | }
 79 | 
 80 | 
 81 | 
 82 | .chat-container{
 83 |     padding:.6rem 0;
 84 | }
 85 | 
 86 | .chat-list{
 87 |    display: flex;
 88 |    align-items: center;
 89 |    justify-content: space-between;
 90 |    padding: 6px 0;
 91 |    font-size: 62.5%;
 92 |    position: relative;
 93 | }
 94 | 
 95 | .chat-list::after{
 96 |     content: "";
 97 |     position: absolute;
 98 |     bottom: 0;
 99 |     right:1rem;
100 |     width: 76%;
101 |     height: 1px;
102 |     background: rgba(0,0,0,.2);
103 | }
104 | .person-chat{
105 |     font-size:20px;
106 | }
107 | .tick{
108 |     color:blue;
109 |     font-weight: bold;
110 | }
111 | .tick2{
112 |     color:blue;
113 |     margin-left:-10px;
114 |     font-weight:bold;
115 | }
116 | @media only screen and (max-width: 360px) {
117 |     .chat-list::after{
118 |         width: 64%;
119 |     }
120 |      
121 | }
122 | 
123 | @media only screen and (min-width: 540px) {
124 |     .chat-list::after{
125 |         width: 78%;
126 |     }
127 |      
128 | }
129 |   
130 | @media only screen and (min-width: 1100px) {
131 |     .chat-list::after{
132 |         width: 92%;
133 |     }
134 |      
135 | }
136 | 
137 |   
138 | 
139 | 
140 | .user-img{
141 |     width: 5rem;
142 |     height: 5rem;
143 |     border-radius: 50%;
144 |     margin: 0 1rem;
145 |    
146 | }
147 | 
148 | .person-profile{
149 |    display: flex;
150 |    align-items: center;
151 | }
152 | 
153 | .last-chat-time{
154 |     margin-right:2rem;
155 | }
156 | 
157 | 
158 | /* Status  */
159 | 
160 | .status-container{
161 |     padding: 1rem 0;
162 | }
163 | 
164 | 
165 | .person-profile-status{
166 | position: relative;
167 | border-bottom: 1px solid rgba(0,0,0,.2);
168 | padding-bottom: 1rem;
169 | }
170 | 
171 | .user-img-status{
172 |     border: 2px solid #25D366;
173 |     padding:2px;
174 | }
175 | 
176 | .recent-update{
177 |     font-size: 1rem;
178 |     background: #ECE5DD;
179 |     padding: 8px;
180 |     margin-bottom: 1rem;
181 | }
182 | 
183 | .add-icon{
184 |     position: absolute;
185 |     left: 4rem;
186 |     bottom: 20px;
187 |     color: #fff;
188 |     background:#25D366;
189 |     padding: 6px 7.5px;
190 |     border-radius: 50%;
191 | }
192 | 
193 | .call-icon{
194 |   font-size: 1.5rem !important;
195 |   color: #128C7E;
196 | }
197 | 
198 | 
199 | .status-list-fixed,.contact-list,.call-list{
200 |     width: 80px;
201 |     height: 80px;
202 |     position: fixed;
203 |     bottom: 4rem;
204 |     right: 5px;
205 |     z-index: 1;
206 | }
207 | 
208 | .status-list-fixed i,.contact-list i,.call-list i{
209 |     color: dimgrey;
210 |     background: #ECE5DD;
211 |     padding: 1rem 1.1rem;
212 |     border-radius: 50%;
213 |     margin-bottom: 5px;
214 | }
215 | 
216 | .contact-list,.call-list{
217 |   bottom: 5px;
218 | }
219 | 
220 | 
221 | 
222 | .call-list i{
223 |     background-color: #25D366;
224 |     color: #fff;
225 |     padding: 1rem 1.2rem;
226 | }
227 | 
228 | .contact-list i{
229 |     background-color: #25D366;
230 |     color: #fff;
231 |     padding: 1rem;
232 | }
233 | 
234 | .status-list-fixed i:last-child{
235 |     background-color: #25D366;
236 |     color: #fff;
237 | }


--------------------------------------------------------------------------------
/whatsapp/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>WhatsApp</title>
  8 |     <link rel="stylesheet" href="style.css">
  9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
 10 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 11 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 12 | 
 13 |     <script src="script.js"></script>
 14 | </head>
 15 | 
 16 | <body>
 17 | 
 18 |     <div class="phone-status-bar">
 19 |         <h1 class="heading-primary">WhatsApp</h1>
 20 |         <div class="phone-status-bar__right-icon">
 21 |             <i class="fa fa-search" aria-hidden="true"></i>
 22 |             <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
 23 |         </div>
 24 |     </div>
 25 | 
 26 |     <div class="menu-bar">
 27 |         <i class="fa fa-camera" aria-hidden="true"></i>
 28 |         <ul class="menu-bar__list">
 29 |             <li class="menu-bar__list-item" onclick="changeTab(1);">Chat</li>
 30 |             <li class="menu-bar__list-item" onclick="changeTab(2);">Status</li>
 31 |             <li class="menu-bar__list-item" onclick="changeTab(3);">Calls</li>
 32 |         </ul>
 33 |     </div>
 34 | 
 35 |     <div class="chat-status-call">
 36 |         <div class="chat-container">
 37 | 
 38 |             <div class="contact-list">
 39 |                 <i class="material-icons">
 40 |                     chat
 41 |                 </i>
 42 |             </div>
 43 | 
 44 |             <div class="chat-list">
 45 |                 <div class="person-profile">
 46 |                     <img src="8888-removebg-preview.png"
 47 |                         alt="" class="user-img">
 48 |                     <div class="person-name">
 49 |                         <h1 class="persion-name-heading">
 50 |                             Vinay software engineer
 51 |                         </h1>
 52 |                         <p class="person-chat">How are you brother</p>
 53 |                     </div>
 54 |                 </div>
 55 |                 <p class="last-chat-time">12:00 pm</p>
 56 |             </div>
 57 | 
 58 | 
 59 | 
 60 |             <div class="chat-list">
 61 |                 <div class="person-profile">
 62 |                     <img src="Black Geometric Depop Profile Picture.png" alt=""
 63 |                         class="user-img">
 64 |                     <div class="person-name">
 65 |                         <h1 class="persion-name-heading">
 66 |                             vinay personal
 67 |                         </h1>
 68 |                         <p class="person-chat">Answer my phone! I need your help... </p>
 69 |                     </div>
 70 |                 </div>
 71 |                 <p class="last-chat-time">2:30 am</p>
 72 |             </div>
 73 | 
 74 |             <div class="chat-list">
 75 |                 <div class="person-profile">
 76 |                     <img src="9999-removebg-preview.png" alt=""
 77 |                         class="user-img ">
 78 |                     <div class="person-name">
 79 |                         <h1 class="persion-name-heading">
 80 |                             ADV indian coder
 81 |                             
 82 |                         </h1>
 83 |                         <p class="person-chat">please create some new video sir</p>
 84 |                     </div>
 85 |                 </div>
 86 |                 <p class="last-chat-time"> 1:00 am</p>
 87 |             </div>
 88 | 
 89 | 
 90 |             <div class="chat-list">
 91 |                 <div class="person-profile">
 92 |                     <img src="https://www.gstatic.com/tv/thumb/persons/487130/487130_v9_ba.jpg" alt="" class="user-img">
 93 |                     <div class="person-name">
 94 |                         <h1 class="persion-name-heading">
 95 |                             Elon Musk
 96 |                         </h1>
 97 |                         <p class="person-chat">Bhai, Mars kab chale...</p>
 98 |                     </div>
 99 |                 </div>
100 |                 <p class="last-chat-time">2:00 am</p>
101 |             </div>
102 | 
103 |             <div class="chat-list">
104 |                 <div class="person-profile">
105 |                     <img src="https://images.tribuneindia.com/cms/gall_content/2019/5/2019_5$largeimg16_Thursday_2019_202625271.jpg"
106 |                         alt="" class="user-img">
107 |                     <div class="person-name">
108 |                         <h1 class="persion-name-heading">
109 |                             CarryMinati
110 |                         </h1>
111 |                         <p class="person-chat">Yalgaar Ho..<span class="tick">&#10003;</span><span
112 |                                 class="tick2">&#10003;</span></p>
113 |                         </p>
114 |                     </div>
115 |                 </div>
116 |                 <p class="last-chat-time">12:00 pm</p>
117 |             </div>
118 | 
119 | 
120 |             <div class="chat-list">
121 |                 <div class="person-profile">
122 |                     <img src="https://c.ndtvimg.com/2020-03/6qjpm0h8_narendra-modi-address-pti_625x300_19_March_20.jpg"
123 |                         alt="" class="user-img">
124 |                     <div class="person-name">
125 |                         <h1 class="persion-name-heading">
126 |                             Narendra Modi
127 |                         </h1>
128 |                         <p class="person-chat">Mere 20 lakh carore kab milenge...<span class="tick">&#10003;</span><span
129 |                                 class="tick2">&#10003;</span></p>
130 |                     </div>
131 |                 </div>
132 |                 <p class="last-chat-time">12:00 pm</p>
133 |             </div>
134 | 
135 | 
136 |             <div class="chat-list">
137 |                 <div class="person-profile">
138 |                     <img src="https://www.gstatic.com/tv/thumb/persons/614/614_v9_bc.jpg" alt="" class="user-img">
139 |                     <div class="person-name">
140 |                         <h1 class="persion-name-heading">
141 |                             Bill Gates
142 |                         </h1>
143 |                         <p class="person-chat">Nayi company banai toh main baat nahin karta..</p>
144 |                     </div>
145 |                 </div>
146 |                 <p class="last-chat-time">12:00 pm</p>
147 |             </div>
148 | 
149 |             <div class="chat-list">
150 |                 <div class="person-profile">
151 |                     <img src="data:image/jpeg;base64,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"
152 |                         alt="" class="user-img">
153 |                     <div class="person-name">
154 |                         <h1 class="persion-name-heading">
155 |                             Coffin Dancer
156 |                         </h1>
157 |                         <p class="person-chat">Ek Baar bahar to aake dekh...</p>
158 |                     </div>
159 |                 </div>
160 |                 <p class="last-chat-time">12:00 pm</p>
161 |             </div>
162 | 
163 |             <div class="chat-list">
164 |                 <div class="person-profile">
165 |                     <img src="https://img.etimg.com/thumb/width-640,height-480,imgsize-75490,resizemode-1,msid-75729632/coronavirus-us-president-donald-trump-to-look-into-legislation-proposing-to-sanctions-on-china.jpg"
166 |                         alt="" class="user-img">
167 |                     <div class="person-name">
168 |                         <h1 class="persion-name-heading">
169 |                             Donald Trump
170 |                         </h1>
171 |                         <p class="person-chat">Bhidu, China Pr Hamla Kab Karna Hai...</p>
172 |                     </div>
173 |                 </div>
174 |                 <p class="last-chat-time">12:00 pm</p>
175 |             </div>
176 |         </div>
177 | 
178 |         <div class="status-container">
179 | 
180 |             <div class="status-list-fixed">
181 |                 <i class="fa fa-pencil fa-2x" aria-hidden="true"></i>
182 |                 <i class="fa fa-camera-retro fa-2x" aria-hidden="true"></i>
183 |             </div>
184 | 
185 | 
186 |             <div class="person-profile person-profile-status">
187 |                 <i class="fa fa-plus add-icon" aria-hidden="true"></i>
188 |                 <img src="https://www.searchpng.com/wp-content/uploads/2019/02/Deafult-Profile-Pitcher.png" alt=""
189 |                     class="user-img">
190 |                 <div class="person-name">
191 |                     <h2 class="persion-name-heading"> My status </h2>
192 |                     <p class="person-chat">Tap to see add status upadte</p>
193 |                 </div>
194 |             </div>
195 |             <h2 class="recent-update">Recent updates
196 |             </h2>
197 | 
198 |             <div class="chat-list">
199 |                 <div class="person-profile">
200 |                     <img src="https://thumbor.forbes.com/thumbor/fit-in/416x416/filters%3Aformat%28jpg%29/https%3A%2F%2Fspecials-images.forbesimg.com%2Fimageserve%2F5c7d7829a7ea434b351ba0b6%2F0x0.jpg%3Fbackground%3D000000%26cropX1%3D206%26cropX2%3D2043%26cropY1%3D250%26cropY2%3D2089"
201 |                         alt="" class="user-img user-img-status">
202 |                     <div class="person-name">
203 |                         <h1 class="persion-name-heading">
204 |                             Mukesh Ambani
205 |                         </h1>
206 |                         <p class="person-chat">42 minutes ago</p>
207 |                     </div>
208 |                 </div>
209 |             </div>
210 | 
211 |         </div>
212 | 
213 |         <div class="call-container">
214 | 
215 |             <div class="call-list">
216 |                 <i class="fa fa-phone fa-2x" aria-hidden="true"></i>
217 |             </div>
218 |             <div class="chat-list">
219 |                 <div class="person-profile">
220 |                     <img src="https://img.etimg.com/thumb/width-640,height-480,imgsize-75490,resizemode-1,msid-75729632/coronavirus-us-president-donald-trump-to-look-into-legislation-proposing-to-sanctions-on-china.jpg"
221 |                         alt="" class="user-img">
222 |                     <div class="person-name">
223 |                         <h1 class="persion-name-heading">
224 |                             Donald Trump
225 |                         </h1>
226 |                         <p class="person-chat"> Today, 1:22am</p>
227 |                     </div>
228 |                 </div>
229 |                 <p class="last-chat-time"><i class="fa fa-phone fx-4x call-icon" aria-hidden="true"></i></p>
230 |             </div>
231 | 
232 |             <div class="chat-list">
233 |                 <div class="person-profile">
234 |                     <img src="https://c.ndtvimg.com/2020-03/6qjpm0h8_narendra-modi-address-pti_625x300_19_March_20.jpg"
235 |                         alt="" class="user-img" alt="" class="user-img">
236 |                     <div class="person-name">
237 |                         <h1 class="persion-name-heading">
238 |                             Narendra Modi
239 |                         </h1>
240 |                         <p class="person-chat"> Today, 2 :22am</p>
241 |                     </div>
242 |                 </div>
243 |                 <p class="last-chat-time"><i class="fa fa-video-camera call-icon" aria-hidden="true"></i></p>
244 |             </div>
245 |         </div>
246 | 
247 | 
248 |     </div>
249 | 
250 | 
251 | </body>
252 | 
253 | </html>


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