-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
147 lines (129 loc) · 8.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- remix icon -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- mine -->
<link rel="stylesheet" href="css/style.css">
<title>Whatsapp Clone</title>
</head>
<body>
<main id="app" class="bg__primary__light d-flex align-items-center">
<div class="app container w-75 rounded">
<section class="app__sides row rounded">
<!-- left -->
<div class="app__left border__right__primary__light col-4 px-0 bg__primary__dark">
<!-- header left -->
<nav class="app__header__left px-3 bg__primary__normal border__bottom__primary__light">
<div class="header__container row g-0 align-items-center">
<div class="col-9 d-flex align-items-center justify-content-start">
<img class="img-fluid rounded-circle me-2" width="50" height="50" v-bind:src="'img/avatar' + currentUser.avatar + '.jpg'" alt="">
<div class="app__text">
<h4 class="text-white fs-6 m-0">{{currentUser.name}}</h4>
</div>
</div>
<div class="header__icons col-3 d-flex align-items-center justify-content-end p-0">
<i class="ri-donut-chart-fill me-3 fs-5 text-white"></i>
<i class="ri-message-3-fill me-2 fs-5 text-white"></i>
<i class="ri-more-2-fill fs-5 text-white"></i>
</div>
</div>
</nav>
<!-- notification -->
<div class="app_notification row g-0 bg__secondary__normal">
<div class="col-12 d-flex align-items-center p-3">
<div class="notification__icon rounded-circle bg__secondary__dark me-2 cursor__pointer">
<i class="ri-notification-off-line text-white"></i>
</div>
<div class="app__text">
<h4 class="text-white fs-6 m-0">Ricevi notifiche di nuovi messaggi</h4>
<p class="mb-0 fw-light text-white text-decoration-underline">Attiva notifiche desktop</p>
</div>
</div>
</div>
<!-- search bar -->
<div class="app__search__bar row g-0 bg__primary__dark border__bottom__primary__light">
<div class="col-12 d-flex align-items-center p-2">
<div class="search__bar__icon bg__primary__normal rounded-start">
<i v-on:click="filterContacts" class="ri-search-line fs-6 text-white cursor__pointer"></i>
</div>
<input v-model="filterCriteria" class="search__bar__input form-control bg__primary__normal text-white border-0 rounded-0 rounded-end" type="text" placeholder="Search" aria-label="Search">
</div>
</div>
<!-- contacts -->
<div class="app__contacts row g-0">
<div v-for="(contact, i) in contacts" v-on:click="setActive(i), getCurrentContact(i)" v-bind:class="{contact__active: contact.isActive}" class="app__contact col-12 d-flex justify-content-between p-3 border__bottom__primary__light cursor__pointer">
<div class="contacts__info d-flex align-items-center">
<img class="img-fluid rounded-circle me-2" width="50" height="50" v-bind:src="'img/avatar' + contact.avatar + '.jpg' " alt="">
<div class="app__text">
<h4 class="text-white fs-6 m-0">{{contact.name}}</h4>
<p class="mb-0 fw-light text-white">Ultimo messaggio inviato</p>
</div>
</div>
<div class="contacts__info app__text">
<p class="text-white">12:00</p>
</div>
</div>
</div>
</div>
<!-- right -->
<div class="app__right col-8 px-0">
<!-- header rigth -->
<nav class="app__header__right px-3 bg__primary__normal border__bottom__primary__light">
<div class="header__container row g-0 ">
<div class="col-9 d-flex align-items-center justify-content-start">
<img class="img-fluid rounded-circle me-2" width="50" height="50" v-bind:src="'img/avatar' + contacts[currentContact].avatar + '.jpg'" alt="">
<div class="app__text">
<h4 class="text-white fs-6 m-0">{{contacts[currentContact].name}}</h4>
<p class="mb-0 fw-light text-white">Ultimo accesso oggi alle 12:00</p>
</div>
</div>
<div class="header__icons col-3 d-flex align-items-center justify-content-end p-0">
<i class="ri-search-line me-3 fs-5 text-white"></i>
<i class="ri-attachment-2 me-2 fs-5 text-white"></i>
<i class="ri-more-2-fill fs-5 text-white"></i>
</div>
</div>
</nav>
<!-- messages -->
<div class="app__messages position-relative row g-0">
<div class="overlay p-4 col-12">
<div v-for="(message, i) in contacts[currentContact].messages" v-bind:class="{message__sent: message.isSent, message__recived: message.isRecived}" class="app__message py-2 px-3 rounded app__text d-flex flex-column position-relative">
<p class="text-white fs-6 m-0 mb-2">{{message.content}}</p>
<p class="text-white ms-auto m-0">12:00</p>
<i v-on:click="showPopup(currentContact, i)" class="ri-arrow-drop-down-line text-white fs-3 position-absolute"></i>
<div v-bind:class="{hide__popup: message.isNotVisible}" class="message__popup position-absolute rounded bg__primary__light align-items-center justify-content-center">
<p v-on:click="deleteMessage(currentContact, i)" class="m-0 text-white text-decoration-underline cursor__pointer">Delete Message</p>
</div>
</div>
</div>
</div>
<!-- message input -->
<div class="app__message__input row g-0 bg__primary__dark">
<div class="col-12 d-flex align-items-center p-2">
<div class="search__bar__icon bg__primary__normal rounded-start">
<i class="ri-emotion-fill text-white cursor__pointer"></i>
</div>
<input @keyup.enter="addNewMessage(currentContact)" v-model="newMessage" class="message__input form-control bg__primary__normal text-white border-0 rounded-0" type="text" placeholder="Scrivi un messaggio" aria-label="Search">
<div class="search__bar__icon bg__primary__normal rounded-end">
<i class="ri-mic-fill text-white cursor__pointer"></i>
</div>
</div>
</div>
</div>
</section>
</div>
</main>
<!-- bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<!-- vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- mine -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>