-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
186 lines (162 loc) · 9.42 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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!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">
<!-- font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- my style -->
<link rel="stylesheet" href="css/style.css" />
<title>Boolzapp</title>
</head>
<body>
<div id="splash-page"><i class="fa-brands fa-whatsapp"></i> </div>
<div id="app" v-cloak>
<div id="app-container" class="d-flex">
<!-- LEFT PANEL -->
<aside id="left-container">
<!-- user -->
<div id="user" class="container d-flex align-items-center">
<img :src="user.avatar" alt="user img">
<h3 id="user-name" class="d-inline-block">{{user.name}}</h3>
<div class="btns to-right">
<button type="button" class="btn"><i class="fa-solid fa-circle-notch"></i></button>
<!-- add new contact button -->
<div class="newContactMenu position-rel d-inline-block">
<button type="button" class="btn" @click.stop="toggleDropdown('newContactMenu')"><i class="fa-solid fa-plus"></i></button>
<div class="menu-wrapper position-abs">
<ul class="menu d-none text-center" @mouseleave="toggleDropdown('newContactMenu','close')">
<li>
<label for="newContactName">Nome del contatto</label>
<br>
<input id="newContactName" type="text" placeholder="Scrivi il nome qui">
</li>
<li>
<label for="newContactLink">Link avatar contatto</label>
<br>
<input id="newContactLink" type="text" placeholder="Inserisci il link qui">
</li>
<li @click="clickOnAddContact()"> Aggiungi contatto </li>
</ul>
</div>
</div>
<button type="button" class="btn"><i class="fa-solid fa-message"></i></button>
<!-- user options button -->
<div class="userOptionsMenu position-rel d-inline-block">
<button type="button" class="btn" @click.stop="toggleDropdown('userOptionsMenu')"><i class="fa-solid fa-ellipsis-vertical"></i></button>
<div class="menu-wrapper position-abs">
<ul class="menu d-none" @mouseleave="toggleDropdown('userOptionsMenu','close')">
<li> Adjust chat font size
<button class="darker btn" type="button" @click="adjustFontSize('-')">-</button>
<button class="darker btn" type="button" @click="adjustFontSize('+')">+</button>
</li>
<li> Dark color mode check: <input type="checkbox" @click="toggleDarkMode()"> </li>
</ul>
</div>
</div>
</div>
</div>
<!-- notification -->
<div id="notification" class="container d-flex align-items-center">
<i id="notification-bell" class="fa-solid fa-bell-slash"></i>
<div>
<p>Ricevi notifiche di nuovi messaggi</p>
<small><a href="#">Attiva notifiche desktop</a></small>
</div>
</div>
<!-- search bar -->
<div id="contacts-search" class="container position-rel">
<label for="search-bar" class="position-abs"><i class="fa-solid fa-magnifying-glass"></i></label>
<input id="search-bar" class="d-grow" v-model="searchBarInput" type="text" placeholder="Cerca o inizia una nuova chat">
</div>
<!-- contacts list -->
<div id="contacts-list">
<div v-if="contacts.length" v-for="(contact,index) in filteredContacts" :class="selected == contact.position ? 'selected':''" class="contact container d-flex position-rel" @click.stop="clickOnContact(contact)">
<img :src="contact.avatar" :alt="contact.name + ' avatar'">
<div class="contact-text">
<h3 class="contact-name">{{contact.name}}</h3>
<div v-if="contact.messages.length" class="last-msg">{{getLastMsg(contact).message}}</div>
</div>
<span v-if="contact.messages.length" class="msg-time position-abs">{{getMsgDate(getLastMsg(contact))}}</span>
</div>
</div>
</aside>
<!-- /LEFT PANEL -->
<!-- RIGHT PANEL -->
<div id="right-container" class="mobile-d-none">
<!-- selected contact -->
<div v-if="contacts.length && selected != -1" id="selected-contact" class="container d-flex align-items-center">
<i class="darker btn fa-solid fa-arrow-left mobile-show" id="contact-arrow" @click="changePanel"></i>
<img :src="contacts[selected].avatar" :alt="contacts[selected].name + ' avatar'">
<div class="contact-text">
<h3 class="contact-name">{{contacts[selected].name}}</h3>
<div class="contact-last-access"> {{contacts[selected].lastAccess ? contacts[selected].lastAccess : setLastAccessTime()}} </div>
</div>
<div class="btns container to-right">
<button type="button" class="btn"><i class="fa-solid fa-magnifying-glass"></i></button>
<button type="button" class="btn"><i class="fa-solid fa-paperclip"></i></button>
<div class="contactOptionsMenu position-rel d-inline-block">
<button type="button" class="btn" @click.stop="toggleDropdown('contactOptionsMenu')"><i class="fa-solid fa-ellipsis-vertical"></i></button>
<div class="menu-wrapper position-abs">
<ul class="menu d-none" @mouseleave="toggleDropdown('contactOptionsMenu','close')">
<li @click="clickOnDeleteAllMessages()"> Delete messages </li>
<li @click="clickOnDeleteContact()"> Delete chat </li>
</ul>
</div>
</div>
</div>
</div>
<!-- messages container -->
<div id="messages-container" :class="(!contacts.length || selected == -1)? 'full-heigth':''" class="position-rel">
<!-- nessun contatto in lista -->
<div v-if="!contacts.length" class="text-center alert"><i class="fa-brands fa-whatsapp"></i><br> Non hai nessun contatto con cui chattare, aggiungi qualcuno!</div>
<!-- schermata di apertura -->
<div v-else-if="selected == -1" class="text-center alert"><i class="fa-brands fa-whatsapp"></i> <br> Seleziona un contatto per cominciare.</div>
<!-- nessun messaggio in messages -->
<div v-else-if="!contacts[selected].messages.length" class="text-center">Scrivi qualcosa a {{contacts[selected].name}} per cominciare.</div>
<div v-else v-for="(msg,index) in contacts[selected].messages" class="msg-wrapper d-flex flex-wrap">
<!-- primo messaggio del giorno, stampo la data -->
<div v-if="printDateLine(msg,index)" class="date-line text-center">{{printDate(msg)}}</div>
<div class="msg position-rel contains-menu-toggler" :class="msg.status" @mouseleave="toggleDropdown('messageMenu','close',index)" :style="'font-size: '+appFontSize+'rem'">
<p>{{msg.message}}</p>
<div class="msg-time position-abs">{{getMsgTime(msg)}}</div>
<!-- menu del messaggio -->
<div class="messageMenu menu-wrapper position-abs">
<p class="text-end menu-toggler d-none"><i class="fa-solid fa-chevron-down" @click="toggleDropdown('messageMenu','',index)"></i></p>
<ul class="menu d-none">
<li> Message info </li>
<li @click="clickOnDeleteMsg(index)"> Delete message </li>
</ul>
</div>
</div>
</div>
</div>
<!-- chat inputs -->
<div v-if="contacts.length && selected != -1 " id="chat-inputs" class="container d-flex align-items-center justify-content-center">
<div class="spaced text-center emojisMenu position-rel d-inline-block">
<button type="button" class="darker btn" @click.stop="toggleDropdown('emojisMenu')"><i class="fa-regular fa-face-smile"></i></button>
<div class="menu-wrapper dropup position-abs">
<ul class="menu d-none" @mouseleave="toggleDropdown('emojisMenu','close')">
<li v-for="emoji in emojis" @click="addEmoji(emoji);toggleDropdown('emojisMenu','close')"> {{String.fromCodePoint(emoji)}} </li>
</ul>
</div>
</div>
<input v-model="userMsg" id="msg-bar" class="d-grow" type="text" :placeholder="msgBarPlaceholder" @keyup.enter="sendMsg" >
<i v-if="!userMsg" class="spaced darker btn text-center fa-solid fa-microphone"></i>
<i v-else class="spaced darker btn text-center fa-solid fa-paper-plane" @click="sendMsg()"></i>
</div>
</div>
<!-- /RIGHT PANEL -->
</div>
</div>
<!-- data -->
<script type="text/javascript" src="js/data.js"></script>
<!-- luxon script -->
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js "></script>
<!-- vuejs script -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- my script -->
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>