-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (111 loc) · 4.46 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="css/style.css">
<title>Boolzapp</title>
</head>
<body>
<div id="app" class="container flex">
<!-- sidebar -->
<nav class="sidebar">
<section class="sidebar-top">
<!-- sezione profilo utente -->
<div class="header-profile-info flex">
<div class="box-profile flex">
<div class="image-profile">
<img class="inner-img-profile" src="images/avatar_io.jpg" alt="">
</div>
<span>Piera</span>
</div>
<div class="box-icons flex">
<i class="inner-icons-profile fas fa-circle-notch"></i>
<i class="inner-icons-profile fas fa-comment-alt"></i>
<i class="inner-icons-profile fa fa-ellipsis-v"></i>
</div>
</div>
<!-- /sezione profilo utente -->
<!-- sezione silenzia notifiche -->
<div class="notification flex">
<div class="bell bg-white flex">
<i class="fa fa-bell-slash"></i>
</div>
<ul class="active-notification">
<li>Ricevi notifiche di nuovi messaggi</li>
<li>
<small><a href="#">Attiva notifiche desktop</a></small>
</li>
</ul>
</div>
<!-- /sezione silenzia notifiche -->
<!-- cerca contatti -->
<div class="search-contact">
<div class="input-box bg-white flex">
<i class="fa fa-search" aria-hidden="true"></i>
<input v-model="searchContact" @keyup="searchContactFunction" placeholder="Cerca o inizia una nuova chat">
</div>
</div>
<!-- /cerca contatti -->
</section>
<section class="sidebar-bottom bg-white">
<ul class="contacts-list">
<li :class="selectedContact(index)" @click="changeContact(index)" v-for="(element, index) in contacts" v-if="element.visible">
<div class="image-profile">
<img class="inner-img-profile" :src="imageContact(index)" alt="">
</div>
<div class="contact-name">{{element.name}}</div>
</li>
</ul>
</section>
</nav>
<!-- /sidebar -->
<main class="main-box">
<section class="header-profile-info flex">
<div class="box-profile flex">
<div class="image-profile">
<img class="inner-img-profile" :src="imageContact(contactIDX)" alt="">
</div>
<div class="">
<div>{{contacts[contactIDX].name}}</div>
<small>Ultimo accesso il {{lastAccess(contactIDX)}}</small>
</div>
</div>
<div class="box-icons flex">
<i class="inner-icons-profile fa fa-search" aria-hidden="true"></i>
<i class="inner-icons-profile fa fa-paperclip" aria-hidden="true"></i>
<i class="inner-icons-profile fa fa-ellipsis-v" aria-hidden="true"></i>
</div>
</section>
<!-- sezione messaggi -->
<section class="main-box-text">
<ul class="messages-container">
<li v-for="(element, index) in contacts[contactIDX].messages" :class="statusMessageClass(index)">
{{element.text}}
<span class="options-button" @click="changeMessage(index)">
<i class="fas fa-angle-down"></i>
</span>
<ul v-if="toggleModal && index === messageIDX" class="options-container bg-white">
<li>Message info</li>
<li>Delete Message</li>
</ul>
</li>
</ul>
</section>
<!-- /sezione messaggi -->
<!-- barra di input messaggio -->
<section class="main-box-footer">
<div class="input-bar flex">
<i class="far fa-smile"></i>
<input v-model="inputMessages" @keyup.enter='submitMessage' placeholder="Scrivi un messaggio">
<i class="fa fa-microphone"></i>
</div>
</section>
<!-- /barra di input messaggio -->
</main>
</div>
<script src="js/script.js" charset="utf-8"></script>
</body>
</html>