index.html

<!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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <title>BoolzApp</title>
</head>
<body>

    <!-- istanza Vue -->
    <div id="app">

        <div class="container">

            <!-- menu laterale di navigazione -->
            <aside>
                
                <!-- utente -->
                <div class="user">
                    <div class="user_info">

                        <!-- immmagine utente -->
                        <img class="avatar_pic" 
                            :src="user.avatar" 
                            :alt="user.name"
                        >

                        <!-- nome utente -->
                        <h4>
                            {{ user.name }}
                        </h4>
                    </div>
                    

                    <!-- icone navigazione utente -->
                    <nav>
                        <a href="#">
                            <i class="fas fa-circle-notch"></i>
                        </a>
                        <a href="#">
                            <i class="fas fa-comment-alt"></i>
                        </a>
                        <a href="#">
                            <i class="fas fa-ellipsis-v"></i>
                        </a>
                    </nav>
                </div>

                <!-- attiva notifiche -->
                <div class="alert_settings">
                    <i class="fas fa-bell-slash"></i>
                    <span>
                        <h5>
                            Ricevi notifiche di nuovi messaggi
                        </h5>
                        <h6>
                            <a href="#">
                                Attiva notifiche desktop
                            </a>
                        </h6>
                    </span>
                </div>
                
                <!-- barra di ricerca chat -->
                <div class="search">
                    <i class="fas fa-search"></i>
                    <input 
                        type="search" 
                        placeholder="Cerca o inizia una nuova chat"
                        v-model="searchContact"
                    >
                </div>

                <!-- lista chat -->
                <div class="chat_list scroll">

                    <ul>
                        <li 
                            v-for="contact, i in contacts" 
                            :key="i" 
                            @click="setActiveChat(i)"
                            :class="i === activeChat ? 'active' : null "
                            v-if="findContact(contact.name, searchContact)"
                        >

                            <!-- immagine contatto -->
                            <img class="avatar_pic" 
                                :src="contact.avatar" 
                                :alt="contact.name"
                            >
                            <div class="contact_text">

                                <!-- nome contatto -->
                                <h4>
                                    {{ contact.name }}
                                </h4>

                                <!-- ultimo messaggio della chat -->
                                <div class="last_message">
                                    {{ lastMsgText(contact.messages) }}
                                </div>
                            </div>

                            <!-- data e ora ultimo messaggio della chat -->
                            <div class="time_info">
                                {{ lastMsgTime(contact.messages) }}
                            </div>
                        </li>
                    </ul>
                </div>
            </aside>
            
            <!-- sezione chat attiva -->
            <section class="active_chat">
                
                <!-- parte superiore chat attiva, simile a utente e contatto -->
                <div class="chat_header">
                    <div class="chat_info">

                        <!-- immagine contatto -->
                        <img 
                            class="avatar_pic" 
                            :src="contacts[activeChat].avatar" 
                            :alt="contacts[activeChat].name"
                        >
                        <div>

                            <!-- nome contatto -->
                            <h4 class="name">
                                {{ contacts[activeChat].name }}
                            </h4>

                            <!-- ultimo accesso contatto, uso data e ora ultimo messaggio inciato dal contatto -->
                            <div class="time_info">
                                Ultimo accesso {{ lastAccess(contacts[activeChat].messages) }}
                            </div>
                        </div>
                    </div>

                    <!-- icone navigazione chat attiva -->
                    <nav class="nav_chat">
                        <a href="#">
                            <i class="fas fa-search"></i>
                        </a>
                        <a href="#">
                            <i class="fas fa-paperclip"></i>
                        </a>
                        <a href="#">
                            <i class="fas fa-ellipsis-v"></i>
                        </a>
                    </nav>
                </div>

                <!-- messaggi -->
                <div class="chat scroll">
                    
                    <div 
                        class="msg" 
                        :class="msg.status === 'sent' ? 'sent' : null" 
                        v-for="msg, i in contacts[activeChat].messages" 
                        :key="i"
                    >

                        <!-- testo messaggio -->
                        {{ msg.text }}

                        <!-- data e ora messaggio -->
                        <div class="time_info">
                            {{ msg.date }}
                        </div>

                        <!-- dropmenu messaggi -->
                        <i class="fas fa-chevron-down" @click="dropmenuToggle(i)"></i>
                        <div class="dropdown-content">
                            <a href="#">
                                Info
                            </a>
                            <a href="#" @click="deleteMsg(contacts[activeChat].messages, i), dropmenuToggle(i)">
                                Emlimina messaggio
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- input chat -->
                <div class="chat_inputs">
                    <a href="#">
                        <i class="far fa-smile"></i>
                    </a>

                    <!-- inserimento nuovo messaggio al rilascio di enter -->
                    <input 
                        class="new_msg" type="text" 
                        placeholder="Scrivi un messaggio"
                        v-model.trim="newMsgText"
                        @keyup.enter="newMsg(contacts[activeChat].messages)"
                    >
                    <a href="#">
                        <i class="fas fa-microphone"></i>
                    </a>
                </div>
            </section>
        </div>
    </div>

    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- dataTime library -->
    <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
    <!-- my Js -->
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>