-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
155 lines (152 loc) · 9.03 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
<!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">
<meta name="description" content="Invia e ricevi rapidamente messaggi BoolzApp direttamente dal tuo computer.">
<meta name="keywords" content="BoolzApp, messaggi, web" />
<meta name="author" content="Laura Bigoni">
<link rel="icon" href="img/favicon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugin/customParseFormat.js"></script>
<title>BoolzApp Web</title>
</head>
<body>
<main class="container">
<div id="root">
<div class="row render-app">
<div class="col-4 p-0 d-flex flex-column">
<!-- # SEZIONE UTENTE -->
<section id="user" class="d-flex justify-content-between align-items-center">
<div class="user-info">
<img class="img-fluid" :src="'img/avatar' + user.avatar + '.jpg'" :alt="user.name">
<span><strong>{{user.name}}</strong></span>
</div>
<div class="settings">
<i class="fas fa-circle-notch"></i>
<i class="fas fa-comment-alt"></i>
<i class="fas fa-ellipsis-v"></i>
</div>
</section>
<!-- # SEZIONE NOTIFICHE -->
<section id="notifications" class="d-flex justify-content-start align-items-center">
<i class="fas fa-bell-slash"></i>
<div>
<p class="mb-0"><strong>Ricevi notifiche di nuovi messaggi</strong></p>
<a href="#">Attiva notifiche desktop</a>
</div>
</section>
<!-- # SEZIONE RICERCA -->
<section id="search" class="position-relative">
<div class="input-group">
<i class="fas fa-search"></i>
<input type="text" class="form-control" placeholder="Cerca o inizia una nuova chat"
v-model="search" @keyup="filterContacts">
</div>
</section>
<!-- # SEZIONE CONTATTI -->
<section id="contacts" class="d-flex flex-column flex-grow-1">
<div v-if="contact.visible" v-for="(contact, index) in contacts"
:class="{active : index === currentIndex}"
class="user-info d-flex justify-content-between align-items-center"
@click="setActive(index)" role="button">
<div>
<img class="img-fluid" :src="'img/avatar' + contact.avatar + '.jpg'"
:alt="contact.name">
</div>
<div class="w-100 ms-4 d-flex flex-column">
<div class="d-flex justify-content-between">
<span><strong>{{contact.name}}</strong>
</span>
<span class="last-login">{{contact.messages[contact.messages.length -
1].date}}</span>
</div>
<div class="d-flex justify-content-between">
<span class="last-login">{{contact.messages[contact.messages.length -
1].text}}</span>
<i class="text-muted fas fa-thumbtack"></i>
</div>
</div>
</div>
</section>
</div>
<!-- # HEADER SEZIONE CHAT -->
<div class="col-8 p-0 d-flex flex-column">
<header class="active d-flex justify-content-between align-items-center">
<div class="contact-info">
<img class="img-fluid" :src="'img/avatar' + contacts[currentIndex].avatar + '.jpg'"
:alt="contacts.name">
</div>
<div class="align-items-center flex-grow-1 ps-4">
<p class="m-0"><strong>{{contacts[currentIndex].name}}</strong></p>
<span>Ultimo accesso ieri alle 13:42</span>
</div>
<div class="settings">
<i class="fas fa-circle-notch"></i>
<i class="fas fa-comment-alt"></i>
<i class="fas fa-ellipsis-v"></i>
</div>
</header>
<!-- # SEZIONE CHAT -->
<section id="show-chat" class="d-flex flex-column">
<div class="messages d-flex flex-column">
<div v-for="(message, index) in contacts[currentIndex].messages" :class="message.status"
class="message col-5 d-flex flex-column">
<!-- oppure
{sent : message.status === 'sent', received : message.status === 'received'}
o:
{message.status ==='sent' ? 'sent' : 'received',}-->
<div class="dropdown d-flex justify-content-between">
<p class="m-0">{{message.text}}</p>
<i class="dropdown-toggle" type="button" data-toggle="dropdown"></i>
<div class="dropdown-menu align-self-end">
<button class="dropdown-item" type="button">Info messaggio</button>
<button class="dropdown-item" type="button"
@click="deleteMessage(index)">Elimina
messaggio</button>
</div>
</div>
<span class="align-self-end">{{message.date}}</span>
</div>
<div v-if="contacts[currentIndex].messages.length === 0" class="text-center text-muted">
<p>Non hai ancora nessun messaggio in questa chat..</p>
</div>
</div>
</section>
<!-- # FOOTER SEZIONE CHAT -->
<footer id="write-message" class="d-flex align-items-center">
<i class="far fa-smile"></i>
<i class="fas fa-paperclip"></i>
<div class="input-group px-3">
<input type="text" class="form-control" placeholder="Scrivi un messaggio"
v-model="newMessage" @keyup.enter="addNewMessage">
</div>
<i class="fas fa-microphone"></i>
</footer>
</div>
</div>
</div>
</main>
<script src="js/script.js"></script>
</body>
</html>