├── README.md ├── bonus ├── README.md ├── css │ └── style.css ├── img │ ├── avatar_1.jpg │ ├── avatar_2.jpg │ ├── avatar_3.jpg │ ├── avatar_4.jpg │ ├── avatar_5.jpg │ ├── avatar_6.jpg │ ├── avatar_7.jpg │ ├── avatar_8.jpg │ ├── avatar_io.jpg │ ├── avatar_new.jpg │ ├── blank-chat.png │ ├── blank-chatdark.png │ ├── loading.png │ ├── logo.png │ ├── mine.jpg │ ├── minedark.jpg │ ├── moon.png │ ├── project.png │ └── sun.png ├── index.html └── js │ └── myscript.js ├── css └── style.css ├── img ├── avatar_1.jpg ├── avatar_2.jpg ├── avatar_3.jpg ├── avatar_4.jpg ├── avatar_5.jpg ├── avatar_6.jpg ├── avatar_7.jpg ├── avatar_8.jpg ├── avatar_io.jpg └── mine.jpg ├── index.html ├── js └── myscript.js ├── test.js ├── test2.js └── test3.js /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | Logo 4 | 5 |

BoolzApp Web

6 |

(For the full versione use the bonus version)

7 |
8 | 9 |
10 | Table of Contents 11 |
    12 |
  1. 13 | About The Project 14 | 17 |
    2. 18 |
  2. 19 | Getting Started 20 | 24 |
    3. 25 |
  3. Roadmap
    4. 26 |
  4. Contact
    5. 27 |
28 |
29 | 30 | 31 | ## About The Project 32 | Project picture 33 | 34 | BoolzApp Web App, an amazing imitation of a webapp of a instant messaging service, where you'll be able to text with your friends, see their msg, swap chats, get reply and many more! 35 |

(back to top)

36 | 37 | 38 | ### Built With: 39 |
40 | 41 | * ![Vue.Js](https://img.shields.io/badge/Vue.js-4FC08D.svg?style=for-the-badge&labelColor=black&logo=vuedotjs&logoColor=4FC08D) 42 | * ![Bootstrap](https://img.shields.io/badge/Bootstrap-7952B3.svg?style=for-the-badge&labelColor=black&logo=Bootstrap&logoColor=7952B3) 43 | * ![OpenAI](https://img.shields.io/badge/OpenAI-412991.svg?style=for-the-badge&labelColor=black&logo=OpenAI&logoColor=white) 44 |

(back to top)

45 | 46 | 47 | ## Getting Started 48 |
49 | 50 | ### Prerequisites 51 |
52 | 53 | Working browser like chrome,firefox,safari with a 1080p display at least for proper visualization, not ment to be seen on mobile 54 |
55 | 56 | ### Usage 57 |
58 | 59 | To view the project and experience it, download the repository, unzip it and open the index.html 60 | 61 | As soon as you open it, you'll get a prompt asking you for a Key of Openai. 62 | 63 | This will allow you to use the site with the Gpt3.5-Turbo AI replying to your msg feature, but in case you don't have one you still can use the site, just press 'OK' and the site will load 64 | 65 | In case you want to get a Key the procedure to get it the following: 66 | 1. Go to: https://platform.openai.com/docs/quickstart/build-your-application 67 | 2. Create an account or login 68 | 3. Click on "+ Create new secret key" 69 | 4. Copy it and paste it on the prompt that open everytime you refresh the index.html in your browser 70 | 71 | You're ready to enjoy the BoolzApp Web! 72 |

(back to top)

73 | 74 | 75 | ## Roadmap 76 |
77 | 78 | - [x] Add response to the sent message made with Gpt3.5-turbo 79 | - [x] Add improved request to AI so it reply as the person you're sending the message to would 80 | - [x] Add if an empty message or just spaces get sended it will not be sent 81 | - [x] Add if there is text in the send message bar, a paper plane will show up close to the bar and can be clicked to ssend the msg 82 | - [x] Add reply of the message sent in case the Key to access to openai service will not work are randomized 83 | - [x] Add blank page before any chat get selected 84 | - [x] Add loading screen that last 1s with animation 85 | - [x] Add scroll down after one message get sent 86 | - [x] Add darkmode button and function 87 | - [x] Add possibility to create a new chat 88 | - [x] Add button to delete all the messages from one chat 89 | - [x] Add button to delete an entire contact with relative chat/messages 90 | - [x] Add emoji list when smiley face get clicked 91 |

(back to top)

92 | 93 | 94 | ## 📧 Contact me: 95 |
96 | 97 | [![Gmail](https://img.shields.io/badge/Gmail-EA4335.svg?style=plastic&logo=Gmail&logoColor=white)](mailto:gabriele.majocchi@gmail.com) 98 | [![Linkedin](https://img.shields.io/badge/LinkedIn-0A66C2.svg?style=plastic&logo=LinkedIn&logoColor=white)](https://www.linkedin.com/in/gabriele-majocchi-64185127a/) 99 |
100 | Project Link: [Boolzapp Web](https://github.com/GabrieleMajocchi/vue-boolzapp/tree/main/bonus) 101 |

(back to top)

102 | -------------------------------------------------------------------------------- /bonus/README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | Logo 4 | 5 |

BoolzApp Web

6 |
7 | 8 |
9 | Table of Contents 10 |
    11 |
  1. 12 | About The Project 13 | 16 |
    2. 17 |
  2. 18 | Getting Started 19 | 23 |
    3. 24 |
  3. Roadmap
    4. 25 |
  4. Contact
    5. 26 |
27 |
28 | 29 | 30 | ## About The Project 31 | Project picture 32 | 33 | BoolzApp Web App, an amazing imitation of a webapp of a instant messaging service, where you'll be able to text with your friends, see their msg, swap chats, get reply and many more! 34 |

(back to top)

35 | 36 | 37 | ### Built With: 38 |
39 | 40 | * ![Vue.Js](https://img.shields.io/badge/Vue.js-4FC08D.svg?style=for-the-badge&labelColor=black&logo=vuedotjs&logoColor=4FC08D) 41 | * ![Bootstrap](https://img.shields.io/badge/Bootstrap-7952B3.svg?style=for-the-badge&labelColor=black&logo=Bootstrap&logoColor=7952B3) 42 | * ![OpenAI](https://img.shields.io/badge/OpenAI-412991.svg?style=for-the-badge&labelColor=black&logo=OpenAI&logoColor=white) 43 |

(back to top)

44 | 45 | 46 | ## Getting Started 47 |
48 | 49 | ### Prerequisites 50 |
51 | 52 | Working browser like chrome,firefox,safari with a 1080p display at least for proper visualization, not ment to be seen on mobile 53 |
54 | 55 | ### Usage 56 |
57 | 58 | To view the project and experience it, download the repository, unzip it and open the index.html 59 | 60 | As soon as you open it, you'll get a prompt asking you for a Key of Openai. 61 | 62 | This will allow you to use the site with the Gpt3.5-Turbo AI replying to your msg feature, but in case you don't have one you still can use the site, just press 'OK' and the site will load 63 | 64 | In case you want to get a Key the procedure to get it the following: 65 | 1. Go to: https://platform.openai.com/docs/quickstart/build-your-application 66 | 2. Create an account or login 67 | 3. Click on "+ Create new secret key" 68 | 4. Copy it and paste it on the prompt that open everytime you refresh the index.html in your browser 69 | 70 | You're ready to enjoy the BoolzApp Web! 71 |

(back to top)

72 | 73 | 74 | ## Roadmap 75 |
76 | 77 | - [x] Add response to the sent message made with Gpt3.5-turbo 78 | - [x] Add improved request to AI so it reply as the person you're sending the message to would 79 | - [x] Add if an empty message or just spaces get sended it will not be sent 80 | - [x] Add if there is text in the send message bar, a paper plane will show up close to the bar and can be clicked to ssend the msg 81 | - [x] Add reply of the message sent in case the Key to access to openai service will not work are randomized 82 | - [x] Add blank page before any chat get selected 83 | - [x] Add loading screen that last 1s with animation 84 | - [x] Add scroll down after one message get sent 85 | - [x] Add darkmode button and function 86 | - [x] Add possibility to create a new chat 87 | - [x] Add button to delete all the messages from one chat 88 | - [x] Add button to delete an entire contact with relative chat/messages 89 | - [x] Add emoji list when smiley face get clicked 90 |

(back to top)

91 | 92 | 93 | ## 📧 Contact me: 94 |
95 | 96 | [![Gmail](https://img.shields.io/badge/Gmail-EA4335.svg?style=plastic&logo=Gmail&logoColor=white)](mailto:gabriele.majocchi@gmail.com) 97 | [![Linkedin](https://img.shields.io/badge/LinkedIn-0A66C2.svg?style=plastic&logo=LinkedIn&logoColor=white)](https://www.linkedin.com/in/gabriele-majocchi-64185127a/) 98 |
99 | Project Link: [Boolzapp Web](https://github.com/GabrieleMajocchi/vue-boolzapp/tree/main/bonus) 100 |

(back to top)

101 | -------------------------------------------------------------------------------- /bonus/css/style.css: -------------------------------------------------------------------------------- 1 | /* ---General class--- */ 2 | :root, 3 | :root.light{ 4 | --color-textcolor: #000000; 5 | --color-input: #000000; 6 | --color-bg-gr: #eaeaea; 7 | --color-grad-dark: #009688; 8 | --color-grad-light: #d9dbd2; 9 | --color-bg: #ffffff; 10 | --bs-border-color: #dee2e6; 11 | --color-bg-notify: #8edafc; 12 | --color-bg-notifyicon: #ffffff; 13 | --color-sendtext: #f3eeea; 14 | --color-search: #fafafa; 15 | --color-sent: #d5f9ba; 16 | --color-received: #ffffff; 17 | --color-active-user: #e9ebeb; 18 | --color-icons: #b1b1b1; 19 | --color-iconschat: #6b7275; 20 | --chat-url: url('../img/mine.jpg'); 21 | --char-blank-url: url(../img/blank-chat.png); 22 | } 23 | 24 | :root.dark{ 25 | --color-textcolor: #ffffff; 26 | --color-input: #ffffff; 27 | --color-bg-gr: #202c33; 28 | --color-grad-dark: #111b21; 29 | --color-grad-light: #111b21; 30 | --color-bg: #111b21; 31 | --bs-border-color: #6b7275; 32 | --color-bg-notify: #182229; 33 | --color-bg-notifyicon: #00a884; 34 | --color-sendtext: #2a3942; 35 | --color-search: #202c33; 36 | --color-sent: #005c4b; 37 | --color-received: #202c33; 38 | --color-active-user: #2a3942; 39 | --color-icons: #aebac1; 40 | --color-iconschat: #8696a0; 41 | --chat-url: url('../img/minedark.jpg'); 42 | --char-blank-url: url(../img/blank-chatdark.png); 43 | } 44 | 45 | ::placeholder{ 46 | color: var(--color-textcolor); 47 | } 48 | 49 | input{ 50 | color: var(--color-input); 51 | } 52 | 53 | .my-bg-grey{ 54 | background-color: var(--color-bg-gr); 55 | } 56 | 57 | body{ 58 | background: linear-gradient(180deg, var(--color-grad-dark) 15%, var(--color-grad-light) 15%); 59 | height: 100vh; 60 | color: var(--color-textcolor); 61 | } 62 | 63 | #app{ 64 | width: 80vw; 65 | height: 95vh; 66 | background-color: var(--color-bg); 67 | } 68 | 69 | .br{ 70 | border: 1px solid var(--color-border); 71 | } 72 | 73 | .leftsection, .rightsection{ 74 | height: 95vh; 75 | } 76 | 77 | .leftsection{ 78 | min-width: 350px; 79 | } 80 | 81 | .rightsection{ 82 | min-width: 550px; 83 | } 84 | 85 | .row{ 86 | flex-wrap: nowrap; 87 | } 88 | 89 | .profile, .userchat, .sendtext{ 90 | height: 72px; 91 | } 92 | 93 | .getnotify{ 94 | height: 87px; 95 | background-color: var(--color-bg-notify); 96 | } 97 | 98 | .chats{ 99 | height: 100%; 100 | } 101 | 102 | .chat{ 103 | height: 100%; 104 | background-image: var(--chat-url); 105 | } 106 | 107 | .avatar{ 108 | border-radius: 50%; 109 | height: 55px; 110 | aspect-ratio: 1; 111 | margin: 0.6rem; 112 | } 113 | 114 | .rightsection{ 115 | position: relative; 116 | } 117 | 118 | .loader{ 119 | background-image: url(../img/loading.png); 120 | background-size: cover; 121 | background-position: center; 122 | background-repeat: no-repeat; 123 | position: fixed; 124 | width: 100vw; 125 | height: 100vh; 126 | z-index: 2; 127 | top: 0; 128 | left: 0; 129 | display: flex; 130 | justify-content: center; 131 | } 132 | 133 | /* ---Animation of loader--- */ 134 | .animation{ 135 | border: 16px solid #f3f3f3; /* Light grey */ 136 | border-top: 16px solid black; /* Blue */ 137 | border-radius: 50%; 138 | width: 120px; 139 | height: 120px; 140 | animation: spin 1s linear infinite; 141 | margin-top: 35vh; 142 | } 143 | 144 | @keyframes spin { 145 | 0% { transform: rotate(0deg); } 146 | 100% { transform: rotate(360deg); } 147 | } 148 | 149 | .blank-chat{ 150 | background-image: var(--char-blank-url); 151 | background-size: cover; 152 | background-position: center; 153 | background-repeat: no-repeat; 154 | position: absolute; 155 | width: 100%; 156 | height: 100%; 157 | z-index: 1; 158 | } 159 | 160 | i{ 161 | font-size: 25px; 162 | color: var(--color-icons); 163 | margin: 10px; 164 | cursor: pointer; 165 | } 166 | 167 | i.fa-comment-medical:hover, i.dropdown-toggle:hover, i.fa-paper-plane:hover, i.fa-xmark:hover, i.fa-face-smile.my-auto:hover{ 168 | color: #00a884; 169 | } 170 | 171 | .bell{ 172 | background-color: var(--color-bg-notifyicon); 173 | border-radius: 50%; 174 | height: 55px; 175 | aspect-ratio: 1; 176 | margin: 1rem; 177 | } 178 | 179 | i.fa-bell-slash{ 180 | color: var(--color-bg-notify); 181 | } 182 | 183 | .notification{ 184 | font-size: 0.9rem; 185 | text-decoration: underline; 186 | } 187 | 188 | .sendtext{ 189 | background-color: var(--color-sendtext); 190 | } 191 | 192 | i.fa-microphone, i.fa-face-smile, i.fa-paper-plane, i.fa-xmark{ 193 | color: var(--color-iconschat); 194 | font-size: 30px; 195 | } 196 | 197 | i.fa-paper-plane, i.deactive{ 198 | display: none; 199 | } 200 | 201 | i.active{ 202 | display: block; 203 | } 204 | 205 | .sendtext input{ 206 | background-color: var(--color-bg); 207 | width: 100%; 208 | border: none; 209 | padding: 15px; 210 | height: 45px; 211 | } 212 | 213 | .searchchat{ 214 | background-color: var(--color-search); 215 | } 216 | .searchchat input{ 217 | background-color: var(--color-bg); 218 | width: 100%; 219 | border: none; 220 | font-size: 15px; 221 | padding-left: 5px; 222 | } 223 | 224 | .searchchat i{ 225 | background-color: var(--color-bg); 226 | font-size: 15px; 227 | padding: 10px 30px; 228 | } 229 | 230 | p.time{ 231 | font-size: 0.8rem; 232 | } 233 | 234 | 235 | .chat div div{ 236 | width: 300px; 237 | padding: 12px 15px; 238 | margin: 10px 100px; 239 | border-radius: 10px; 240 | background-color: var(--color-bg-notify); 241 | position: relative; 242 | } 243 | 244 | .chat .sent{ 245 | background-color: var(--color-sent); 246 | align-self: end; 247 | } 248 | 249 | .chat .received{ 250 | background-color: var(--color-received); 251 | align-self: start; 252 | } 253 | 254 | .msgtime{ 255 | position: absolute; 256 | font-size: 10px; 257 | bottom: 5px; 258 | right: 10px; 259 | } 260 | 261 | div.activeuser{ 262 | cursor: pointer; 263 | } 264 | 265 | .contact-tab{ 266 | display: none; 267 | } 268 | 269 | .contact-tab.visible{ 270 | display: block; 271 | } 272 | 273 | .activeuser.active{ 274 | background-color: var(--color-active-user); 275 | } 276 | 277 | .activeuser p{ 278 | font-size: 0.8rem; 279 | } 280 | 281 | .chat i{ 282 | position: absolute; 283 | top: 5px; 284 | right: 7px; 285 | display: none; 286 | } 287 | 288 | .chat div div:hover i{ 289 | display: block; 290 | } 291 | 292 | .chat i::after{ 293 | content: none; 294 | } 295 | 296 | .rightuser i::after{ 297 | content: none; 298 | } 299 | 300 | i.fa-face-smile{ 301 | position: relative; 302 | } 303 | 304 | .emojisearch{ 305 | font-family: sans-serif; 306 | font-size: initial; 307 | height: 25px; 308 | } 309 | 310 | div.emojibox{ 311 | position: absolute; 312 | height: 350px; 313 | width: 330px; 314 | background-color: var(--color-sendtext); 315 | bottom: 47px; 316 | left: -167px; 317 | padding: 1rem; 318 | } 319 | 320 | .emojisection{ 321 | width: 100%; 322 | margin: 16px 0 5px; 323 | font-size: 16px; 324 | font-family: 'Courier New', Courier, monospace; 325 | } 326 | 327 | span.emoji{ 328 | height: 23px; 329 | width: calc(100% / 10); 330 | font-size: 20px; 331 | display: none; 332 | margin-top: 7px; 333 | color: var(--color-iconschat); 334 | } 335 | 336 | span.emoji.visible{ 337 | display: block; 338 | } 339 | 340 | i.fa-xmark{ 341 | padding-top: 5px; 342 | } 343 | 344 | /* ---Darkmode switch--- */ 345 | label#dark-label { 346 | width:50px; 347 | height:25px; 348 | position: relative; 349 | display: block; 350 | background: #ebebeb; 351 | border-radius: 25px; 352 | box-shadow: inset 0px 5px 15px rgba(0,0,0,0.4), inset 0px -5px 15px rgba(255,255,255,0.4); 353 | cursor: pointer; 354 | transition: 0.3s; 355 | margin: -3px; 356 | } 357 | label#dark-label:after { 358 | content: ""; 359 | width:18px; 360 | height: 18px; 361 | position: absolute; 362 | top:4px; 363 | left:4px; 364 | background: linear-gradient(180deg,#005c4b,#00a884); 365 | border-radius: 18px; 366 | box-shadow: 0px 5px 10px rgba(0,0,0,0.2); 367 | transition: 0.3s; 368 | } 369 | input#darkmode-toggle { 370 | width: 0; 371 | height: 0; 372 | visibility: hidden; 373 | } 374 | input#darkmode-toggle:checked + label#dark-label { 375 | background: #242424; 376 | } 377 | input#darkmode-toggle:checked + label#dark-label:after { 378 | left:60px; 379 | transform: translateX(-178%); 380 | background: linear-gradient(180deg,#00a884,#d5f9ba); 381 | } 382 | label#dark-label:active:after{ 383 | width: 30px; 384 | } 385 | 386 | input#darkmode-toggle:checked + label#dark-label + .background { 387 | background:#242424; 388 | } 389 | label#dark-label img { 390 | position: absolute; 391 | width: 14px; 392 | top: 6px; 393 | z-index: 1; 394 | } 395 | label#dark-label img.sun { 396 | left:6px; 397 | fill:#000; 398 | transition: 0.3s; 399 | } 400 | label#dark-label img.moon { 401 | left:30px; 402 | fill:#7e7e7e; 403 | transition: 0.3s; 404 | } -------------------------------------------------------------------------------- /bonus/img/avatar_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/avatar_1.jpg -------------------------------------------------------------------------------- /bonus/img/avatar_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/avatar_2.jpg -------------------------------------------------------------------------------- /bonus/img/avatar_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/avatar_3.jpg -------------------------------------------------------------------------------- /bonus/img/avatar_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/avatar_4.jpg -------------------------------------------------------------------------------- /bonus/img/avatar_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/avatar_5.jpg -------------------------------------------------------------------------------- /bonus/img/avatar_6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/avatar_6.jpg -------------------------------------------------------------------------------- /bonus/img/avatar_7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/avatar_7.jpg -------------------------------------------------------------------------------- /bonus/img/avatar_8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/avatar_8.jpg -------------------------------------------------------------------------------- /bonus/img/avatar_io.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/avatar_io.jpg -------------------------------------------------------------------------------- /bonus/img/avatar_new.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/avatar_new.jpg -------------------------------------------------------------------------------- /bonus/img/blank-chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/blank-chat.png -------------------------------------------------------------------------------- /bonus/img/blank-chatdark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/blank-chatdark.png -------------------------------------------------------------------------------- /bonus/img/loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/loading.png -------------------------------------------------------------------------------- /bonus/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/logo.png -------------------------------------------------------------------------------- /bonus/img/mine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/mine.jpg -------------------------------------------------------------------------------- /bonus/img/minedark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/minedark.jpg -------------------------------------------------------------------------------- /bonus/img/moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/moon.png -------------------------------------------------------------------------------- /bonus/img/project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/project.png -------------------------------------------------------------------------------- /bonus/img/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/bonus/img/sun.png -------------------------------------------------------------------------------- /bonus/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Boolzapp 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
{{loader()}} 27 |
28 |
29 |
30 | 31 |
32 | 33 |
34 |
35 | 36 |
Sofia
37 |
38 |
39 | 40 | 41 | 45 | 46 | 47 | 48 | 49 |
50 |
51 | 52 |
53 |
54 | 55 |
56 |
57 |

Ricevi notifiche di nuovi messaggi

58 |

Attiva notifiche desktop

59 |
60 |
61 | 62 |
63 | 64 |
65 | 66 | 67 |
68 | 69 | 70 |
71 |
72 |
73 | chat.name 74 |
75 |
{{chat.name}}
76 |

Ultimo messaggio: {{chat.messages[chat.messages.length - 1].message}}

77 |
78 |
79 |

{{whatTime(chat.messages[chat.messages.length - 1].date)}}

80 |
81 |
82 | 83 |
84 |
85 | 86 | 87 |
88 |
89 | 90 |
91 |
92 | 93 |
94 |
{{contacts[activeChat].name}}
95 |

Ultimo accesso oggi alle {{whatTime(contacts[activeChat].messages[contacts[activeChat].messages.length - 1].date)}}

96 |
97 |
98 |
99 | 100 | 101 | 102 | 106 |
107 |
108 | 109 |
110 | 111 |
112 |
113 | {{message.message}} 114 | {{whatTime(message.date)}} 115 | 116 | 120 |
121 |
122 |
123 | 124 |
125 | 126 | 127 |
128 | 129 |
Faccine e persone
130 | {{emoji.emoji}} 131 |
Animali e Natura
132 | {{emoji.emoji}} 133 |
Cibo e Bevande
134 | {{emoji.emoji}} 135 |
Attività
136 | {{emoji.emoji}} 137 |
Viaggi e Luoghi
138 | {{emoji.emoji}} 139 |
Oggetti
140 | {{emoji.emoji}} 141 |
Simboli
142 | {{emoji.emoji}} 143 |
Bandiere
144 | {{emoji.emoji}} 145 |
146 | 147 | 148 | 149 | 150 |
151 |
152 |
153 |
154 | 155 | 156 | -------------------------------------------------------------------------------- /bonus/js/myscript.js: -------------------------------------------------------------------------------- 1 | // ---Vue app--- 2 | const {createApp} = Vue 3 | createApp ({ 4 | data () { 5 | return{ 6 | 7 | // ---Variables--- 8 | key: prompt(`Scrivi la tua Key per poter accedere al servizio di openai per ricevere risposte ai messaggi mandati. 9 | 10 | Per ricevere la tua key, vai su https://platform.openai.com/docs/quickstart/build-your-application registrati e clicca su "+ Create new secret key". 11 | 12 | Nel caso non ti importasse premi il pulsante 'OK' per proseguire col normale funzionamento della web app.`), 13 | activeChat: 0, 14 | search: '', 15 | blank: true, 16 | timedLoader: '', 17 | isdark: false, 18 | newMsg: '', 19 | searchEmojiInput: '', 20 | emojivisible: false, 21 | 22 | // ---Contacts array start--- 23 | contacts: [ 24 | {name: 'Michele', 25 | avatar: './img/avatar_1.jpg', 26 | visible: true, 27 | messages: [ 28 | {date: '10/01/2020 15:30:55', 29 | message: 'Hai portato a spasso il cane?', 30 | status: 'sent'}, 31 | {date: '10/01/2020 15:50:00', 32 | message: 'Ricordati di stendere i panni', 33 | status: 'sent'}, 34 | {date: '10/01/2020 16:15:22', 35 | message: 'Tutto fatto!', 36 | status: 'received'} 37 | ], 38 | }, 39 | {name: 'Fabio', 40 | avatar: './img/avatar_2.jpg', 41 | visible: true, 42 | messages: [ 43 | {date: '20/03/2020 16:30:00', 44 | message: 'Ciao come stai?', 45 | status: 'sent'}, 46 | {date: '20/03/2020 16:30:55', 47 | message: 'Bene grazie! Stasera ci vediamo?', 48 | status: 'received'}, 49 | {date: '20/03/2020 16:35:00', 50 | message: 'Mi piacerebbe ma devo andare a fare la spesa.', 51 | status: 'sent'} 52 | ], 53 | }, 54 | {name: 'Samuele', 55 | avatar: './img/avatar_3.jpg', 56 | visible: true, 57 | messages: [ 58 | {date: '28/03/2020 10:10:40', 59 | message: 'La Marianna va in campagna', 60 | status: 'received'}, 61 | {date: '28/03/2020 10:20:10', 62 | message: 'Sicuro di non aver sbagliato chat?', 63 | status: 'sent'}, 64 | {date: '28/03/2020 16:15:22', 65 | message: 'Ah scusa!', 66 | status: 'received'} 67 | ], 68 | }, 69 | {name: 'Alessandro B.', 70 | avatar: './img/avatar_4.jpg', 71 | visible: true, 72 | messages: [ 73 | {date: '10/01/2020 15:30:55', 74 | message: 'Lo sai che ha aperto una nuova pizzeria?', 75 | status: 'sent'}, 76 | {date: '10/01/2020 15:50:00', 77 | message: 'Si, ma preferirei andare al cinema', 78 | status: 'received'} 79 | ] 80 | }, 81 | {name: 'Alessandro L.', 82 | avatar: './img/avatar_5.jpg', 83 | visible: true, 84 | messages: [ 85 | {date: '10/01/2020 15:30:55', 86 | message: 'Ricordati di chiamare la nonna', 87 | status: 'sent'}, 88 | {date: '10/01/2020 15:50:00', 89 | message: 'Va bene, stasera la sento', 90 | status: 'received'} 91 | ], 92 | }, 93 | {name: 'Claudia', 94 | avatar: './img/avatar_6.jpg', 95 | visible: true, 96 | messages: [ 97 | {date: '10/01/2020 15:30:55', 98 | message: 'Ciao Claudia, hai novità?', 99 | status: 'sent'}, 100 | {date: '10/01/2020 15:50:00', 101 | message: 'Non ancora', 102 | status: 'received'}, 103 | {date: '10/01/2020 15:51:00', 104 | message: 'Okay, fammi sapere appena ci sono novità!', 105 | status: 'sent'} 106 | ], 107 | }, 108 | {name: 'Federico', 109 | avatar: './img/avatar_7.jpg', 110 | visible: true, 111 | messages: [ 112 | {date: '10/01/2020 15:30:55', 113 | message: 'Fai gli auguri a Martina che è il suo compleanno!', 114 | status: 'sent'}, 115 | {date: '10/01/2020 15:50:00', 116 | message: 'Grazie per avermelo ricordato, le scrivo subito!', 117 | status: 'received'} 118 | ], 119 | }, 120 | {name: 'Davide', 121 | avatar: './img/avatar_8.jpg', 122 | visible: true, 123 | messages: [ 124 | {date: '10/01/2020 15:30:55', 125 | message: 'Ciao, andiamo a mangiare la pizza stasera?', 126 | status: 'received'}, 127 | {date: '10/01/2020 15:50:00', 128 | message: 'No, l\'ho già mangiata ieri, ordiniamo sushi!', 129 | status: 'sent'}, 130 | {date: '10/01/2020 15:51:00', 131 | message: 'OK!!', 132 | status: 'received'} 133 | ], 134 | }, 135 | ], 136 | // ---Contacts array end--- 137 | 138 | // ---Emoji array start--- 139 | emojis: { 140 | smilyAndPeople: [ 141 | {emoji:'😀', name:'grinning face', visible: true}, {emoji:'😃', name:'grinning face with big eyes', visible: true}, {emoji:'😆', name:'grinning squinting face', visible: true}, {emoji:'😄', name:'grinning face with smiling eyes', visible: true}, {emoji:'🙂', name:'slightly smiling face', visible: true}, {emoji:'🤣', name:'rolling on the floor laughing', visible: true}, {emoji:'😊', name:'smiling face with smiling eyes', visible: true}, {emoji:'😁', name:'beaming face with smiling eyes', visible: true}, {emoji:'😅', name:'grinning face with sweat', visible: true}, {emoji:'😂', name:'face with tears of joy', visible: true}, {emoji:'😉', name:'winking face', visible: true}, {emoji:'☺️', name:'smiling face', visible: true}, {emoji:'😇', name:'smiling face with halo', visible: true}, {emoji:'😍', name:'smiling face with heart-eyes', visible: true}, {emoji:'😗', name:'kissing face', visible: true}, {emoji:'🙃', name:'upside-down face', visible: true}, {emoji:'😌', name:'relieved face', visible: true}, {emoji:'😘', name:'face blowing a kiss', visible: true}, {emoji:'😙', name:'kissing face with smiling eyes', visible: true}, {emoji:'😎', name:'smiling face with sunglasses', visible: true}, {emoji:'😋', name:'face savoring food', visible: true}, {emoji:'😛', name:'face with tongue', visible: true}, {emoji:'😜', name:'winking face with tongue', visible: true}, {emoji:'🤗', name:'hugging face', visible: true}, {emoji:'😏', name:'smirking face', visible: true}, {emoji:'😚', name:'kissing face with closed eyes', visible: true}, {emoji:'🤡', name:'clown face', visible: true}, {emoji:'🤓', name:'nerd face', visible: true}, {emoji:'😝', name:'squinting face with tongue', visible: true}, {emoji:'🤑', name:'money-mouth face', visible: true}, {emoji:'🙁', name:'slightly frowning face', visible: true}, {emoji:'😟', name:'worried face', visible: true}, {emoji:'😞', name:'disappointed face', visible: true}, {emoji:'☹️', name:'frowning face', visible: true}, {emoji:'😒', name:'unamused face', visible: true}, {emoji:'😕', name:'confused face', visible: true}, {emoji:'🤠', name:'cowboy hat face', visible: true}, {emoji:'😔', name:'pensive face', visible: true}, {emoji:'😩', name:'weary face', visible: true}, {emoji:'😤', name:'face with steam from nose', visible: true}, {emoji:'😫', name:'tired face', visible: true}, {emoji:'😣', name:'persevering face', visible: true}, {emoji:'😖', name:'confounded face', visible: true}, {emoji:'😱', name:'face screaming in fear', visible: true}, {emoji:'😯', name:'hushed face', visible: true}, {emoji:'😥', name:'sad but relieved face', visible: true}, {emoji:'🤢', name:'nauseated face', visible: true}, {emoji:'💀', name:'skull', visible: true}, {emoji:'🤔', name:'thinking face', visible: true}, {emoji:'😪', name:'sleepy face', visible: true}, {emoji:'😶', name:'face without mouth', visible: true}, {emoji:'🤖', name:'robot', visible: true}, {emoji:'😬', name:'grimacing face', visible: true}, {emoji:'😡', name:'pouting face', visible: true}, {emoji:'🎃', name:'jack-o-lantern', visible: true}, {emoji:'💩', name:'pile of poo', visible: true}, {emoji:'😭', name:'loudly crying face', visible: true}, {emoji:'😺', name:'grinning cat', visible: true}, {emoji:'😹', name:'cat with tears of joy', visible: true}, {emoji:'😽', name:'kissing cat', visible: true}, {emoji:'😓', name:'downcast face with sweat', visible: true}, {emoji:'🙀', name:'weary cat', visible: true}, {emoji:'😮', name:'face with open mouth', visible: true}, {emoji:'😾', name:'pouting cat', visible: true}, {emoji:'😿', name:'crying cat', visible: true}, {emoji:'🤤', name:'drooling face', visible: true}, {emoji:'😲', name:'astonished face', visible: true}, {emoji:'😠', name:'angry face', visible: true}, {emoji:'👍', name:'thumbs up', visible: true}, {emoji:'🤐', name:'zipper-mouth face', visible: true}, {emoji:'🤥', name:'lying face', visible: true}, {emoji:'🙄', name:'face with rolling eyes', visible: true}, {emoji:'🙏', name:'folded hands', visible: true}, {emoji:'😴', name:'sleeping face', visible: true}, {emoji:'😦', name:'frowning face with open mouth', visible: true}, {emoji:'👎', name:'thumbs down', visible: true}, {emoji:'🤧', name:'sneezing face', visible: true}, {emoji:'😵', name:'dizzy face', visible: true}, {emoji:'🤞', name:'crossed fingers', visible: true}, {emoji:'😧', name:'anguished face', visible: true}, {emoji:'☝️', name:'index pointing up', visible: true}, {emoji:'🙌', name:'raising hands', visible: true}, {emoji:'🤒', name:'face with thermometer', visible: true}, {emoji:'✌️', name:'victory hand', visible: true}, {emoji:'😷', name:'face with medical mask', visible: true}, {emoji:'👆', name:'backhand index pointing up', visible: true}, {emoji:'✋', name:'raised hand', visible: true}, {emoji:'👇', name:'backhand index pointing down', visible: true}, {emoji:'👉', name:'backhand index pointing right', visible: true}, {emoji:'💪', name:'flexed biceps', visible: true}, {emoji:'💍', name:'ring', visible: true}, {emoji:'😳', name:'flushed face', visible: true}, {emoji:'😢', name:'crying face', visible: true}, {emoji:'🖖', name:'vulcan salute', visible: true}, {emoji:'🤕', name:'face with head-bandage', visible: true}, {emoji:'👤', name:'bust in silhouette', visible: true}, {emoji:'😰', name:'anxious face with sweat', visible: true}, {emoji:'👲', name:'person with skullcap', visible: true}, {emoji:'😈', name:'smiling face with horns', visible: true}, {emoji:'👦', name:'boy', visible: true}, {emoji:'😨', name:'fearful face', visible: true}, {emoji:'🧠', name:'brain', visible: true}, {emoji:'👋', name:'waving hand', visible: true}, {emoji:'👨', name:'man', visible: true}, {emoji:'👳', name:'person wearing turban', visible: true}, {emoji:'👿', name:'angry face with horns', visible: true}, {emoji:'👹', name:'ogre', visible: true}, {emoji:'😑', name:'expressionless face', visible: true}, {emoji:'✍️', name:'writing hand', visible: true}, {emoji:'💅', name:'nail polish', visible: true}, {emoji:'👺', name:'goblin', visible: true}, {emoji:'👮', name:'police officer', visible: true}, {emoji:'🖕', name:'middle finger', visible: true}, {emoji:'👵', name:'old woman', visible: true}, {emoji:'🤳', name:'selfie', visible: true}, {emoji:'👃', name:'nose', visible: true}, {emoji:'👂', name:'ear', visible: true}, {emoji:'😸', name:'grinning cat with smiling eyes', visible: true}, {emoji:'🤛', name:'left-facing fist', visible: true}, {emoji:'😐', name:'neutral face', visible: true}, {emoji:'👐', name:'open hands', visible: true}, {emoji:'😼', name:'cat with wry smile', visible: true}, {emoji:'👽', name:'alien', visible: true}, {emoji:'☠️', name:'skull and crossbones', visible: true}, {emoji:'👀', name:'eyes', visible: true}, {emoji:'👻', name:'ghost', visible: true}, {emoji:'👣', name:'footprints', visible: true}, {emoji:'👩', name:'woman', visible: true}, {emoji:'😻', name:'smiling cat with heart-eyes', visible: true}, {emoji:'👾', name:'alien monster', visible: true}, {emoji:'👨‍💻', name:'man technologist', visible: true}, {emoji:'👩‍💻', name:'woman technologist', visible: true}, {emoji:'🤶', name:'Mrs. Claus', visible: true}, {emoji:'👸', name:'princess', visible: true}, {emoji:'👩‍🔬', name:'woman scientist', visible: true}, {emoji:'👥', name:'busts in silhouette', visible: true}, {emoji:'✊', name:'raised fist', visible: true}, {emoji:'👊', name:'oncoming fist', visible: true}, {emoji:'🤵', name:'person in tuxedo', visible: true}, {emoji:'👨‍🏭', name:'man factory worker', visible: true}, {emoji:'🤜', name:'right-facing fist', visible: true}, {emoji:'👨‍🎓', name:'man student', visible: true}, {emoji:'👩‍🎨', name:'woman artist', visible: true}, {emoji:'👌', name:'OK hand', visible: true}, {emoji:'👨‍🔬', name:'man scientist', visible: true}, {emoji:'🤚', name:'raised back of hand', visible: true}, {emoji:'👈', name:'backhand index pointing left', visible: true}, {emoji:'👏', name:'clapping hands', visible: true}, {emoji:'👩‍🎓', name:'woman student', visible: true}, {emoji:'🤝', name:'handshake', visible: true}, {emoji:'👱', name:'person: blond hair', visible: true}, {emoji:'👴', name:'old man', visible: true}, {emoji:'👧', name:'girl', visible: true}, {emoji:'👶', name:'baby', visible: true}, {emoji:'🤘', name:'sign of the horns', visible: true}, {emoji:'💆', name:'person getting massage', visible: true}, {emoji:'👯', name:'people with bunny ears', visible: true}, {emoji:'💃', name:'woman dancing', visible: true}, {emoji:'👩‍❤️‍👩', name:'couple with heart: woman, woman', visible: true}, {emoji:'👨‍👩‍👧', name:'family: man, woman, girl', visible: true}, {emoji:'👩‍❤️‍💋‍👩', name:'kiss: woman, woman', visible: true}, {emoji:'👪', name:'family', visible: true}, {emoji:'👫', name:'woman and man holding hands', visible: true}, {emoji:'💂', name:'guard', visible: true}, {emoji:'👖', name:'jeans', visible: true}, {emoji:'🤙', name:'call me hand', visible: true}, {emoji:'👕', name:'t-shirt', visible: true}, {emoji:'👬', name:'men holding hands', visible: true}, {emoji:'👔', name:'necktie', visible: true}, {emoji:'💄', name:'lipstick', visible: true}, {emoji:'👩‍🏫', name:'woman teacher', visible: true}, {emoji:'👨‍❤️‍💋‍👨', name:'kiss: man, man', visible: true}, {emoji:'👄', name:'mouth', visible: true}, {emoji:'👭', name:'women holding hands', visible: true}, {emoji:'👨‍🚀', name:'man astronaut', visible: true}, {emoji:'💋', name:'kiss mark', visible: true}, {emoji:'🚶', name:'person walking', visible: true}, {emoji:'👗', name:'dress', visible: true}, {emoji:'👨‍🍳', name:'man cook', visible: true}, {emoji:'👨‍🌾', name:'man farmer', visible: true}, {emoji:'🕵️‍♀️', name:'woman detective', visible: true}, {emoji:'👷', name:'construction worker', visible: true}, {emoji:'👅', name:'tongue', visible: true}, {emoji:'👩‍🔧', name:'woman mechanic', visible: true}, {emoji:'🤴', name:'prince', visible: true}, {emoji:'🏃', name:'person running', visible: true}, {emoji:'🎅', name:'Santa Claus', visible: true}, {emoji:'🕺', name:'man dancing', visible: true}, {emoji:'👨‍🔧', name:'man mechanic', visible: true}, {emoji:'👰', name:'person with veil', visible: true}, {emoji:'👨‍❤️‍👨', name:'couple with heart: man, man', visible: true}, {emoji:'💏', name:'kiss', visible: true}, {emoji:'👨‍🎤', name:'man singer', visible: true}, {emoji:'👩‍🌾', name:'woman farmer', visible: true}, {emoji:'💁', name:'person tipping hand', visible: true}, {emoji:'👩‍🏭', name:'woman factory worker', visible: true}, {emoji:'👨‍👨‍👧', name:'family: man, man, girl', visible: true}, {emoji:'👩‍🎤', name:'woman singer', visible: true}, {emoji:'👨‍🏫', name:'man teacher', visible: true}, {emoji:'💑', name:'couple with heart', visible: true}, {emoji:'👩‍🚀', name:'woman astronaut', visible: true}, {emoji:'👼', name:'baby angel', visible: true}, {emoji:'👨‍🎨', name:'man artist', visible: true}, {emoji:'👩‍🚒', name:'woman firefighter', visible: true}, {emoji:'👨‍💼', name:'man office worker', visible: true}, {emoji:'👩‍💼', name:'woman office worker', visible: true}, {emoji:'👨‍👩‍👦‍👦', name:'family: man, woman, boy, boy', visible: true}, {emoji:'👩‍🍳', name:'woman cook', visible: true}, {emoji:'👨‍🚒', name:'man firefighter', visible: true}, {emoji:'👨‍👩‍👧‍👦', name:'family: man, woman, girl, boy', visible: true}, {emoji:'🤰', name:'pregnant woman', visible: true}, {emoji:'👨‍👨‍👦‍👦', name:'family: man, man, boy, boy', visible: true}, {emoji:'👩‍👩‍👦', name:'family: woman, woman, boy', visible: true}, {emoji:'👩‍👦', name:'family: woman, boy', visible: true}, {emoji:'👨‍👩‍👧‍👧', name:'family: man, woman, girl, girl', visible: true}, {emoji:'👩‍👦‍👦', name:'family: woman, boy, boy', visible: true}, {emoji:'🙋', name:'person raising hand', visible: true}, {emoji:'👨‍👨‍👧‍👦', name:'family: man, man, girl, boy', visible: true}, {emoji:'👩‍👧', name:'family: woman, girl', visible: true}, {emoji:'🙇', name:'person bowing', visible: true}, {emoji:'🙆', name:'person gesturing OK', visible: true}, {emoji:'🙅', name:'person gesturing NO', visible: true}, {emoji:'👨‍👨‍👧‍👧', name:'family: man, man, girl, girl', visible: true}, {emoji:'👨‍👦', name:'family: man, boy', visible: true}, {emoji:'👨‍👧', name:'family: man, girl', visible: true}, {emoji:'🙍', name:'person frowning', visible: true}, {emoji:'👩‍👩‍👧‍👦', name:'family: woman, woman, girl, boy', visible: true}, {emoji:'🙎', name:'person pouting', visible: true}, {emoji:'👩‍👧‍👧', name:'family: woman, girl, girl', visible: true}, {emoji:'👠', name:'high-heeled shoe', visible: true}, {emoji:'👩‍👩‍👧', name:'family: woman, woman, girl', visible: true}, {emoji:'👩‍👩‍👧‍👧', name:'family: woman, woman, girl, girl', visible: true}, {emoji:'👩‍👩‍👦‍👦', name:'family: woman, woman, boy, boy', visible: true}, {emoji:'👘', name:'kimono', visible: true}, {emoji:'👢', name:'woman’s boot', visible: true}, {emoji:'👟', name:'running shoe', visible: true}, {emoji:'👡', name:'woman’s sandal', visible: true}, {emoji:'👓', name:'glasses', visible: true}, {emoji:'👨‍👨‍👦', name:'family: man, man, boy', visible: true}, {emoji:'👝', name:'clutch bag', visible: true}, {emoji:'🧢', name:'billed cap', visible: true}, {emoji:'👛', name:'purse', visible: true}, {emoji:'💇', name:'person getting haircut', visible: true}, {emoji:'🎩', name:'top hat', visible: true}, {emoji:'👨‍👧‍👦', name:'family: man, girl, boy', visible: true}, {emoji:'🧣', name:'scarf', visible: true}, {emoji:'🌂', name:'closed umbrella', visible: true}, {emoji:'👙', name:'bikini', visible: true}, {emoji:'🎓', name:'graduation cap', visible: true}, {emoji:'👒', name:'woman’s hat', visible: true}, {emoji:'☂️', name:'umbrella', visible: true}, {emoji:'🎒', name:'backpack', visible: true}, {emoji:'🧤', name:'gloves', visible: true}, {emoji:'🧥', name:'coat', visible: true}, {emoji:'👨‍👧‍👧', name:'family: man, girl, girl', visible: true}, {emoji:'👩‍👧‍👦', name:'family: woman, girl, boy', visible: true}, {emoji:'👞', name:'man’s shoe', visible: true}, {emoji:'👜', name:'handbag', visible: true}, {emoji:'👑', name:'crown', visible: true}, {emoji:'💼', name:'briefcase', visible: true}, {emoji:'👚', name:'woman’s clothes', visible: true}, {emoji:'👨‍👦‍👦', name:'family: man, boy, boy', visible: true}, {emoji:'🧦', name:'socks', visible: true} 142 | ], 143 | animalsAndNature: [{emoji:'🐶', name:'dog face', visible: true, visible: true}, {emoji:'🐵', name:'monkey face', visible: true, visible: true}, {emoji:'🐥', name:'front-facing baby chick', visible: true, visible: true}, {emoji:'🐷', name:'pig face', visible: true, visible: true}, {emoji:'🐱', name:'cat face', visible: true, visible: true}, {emoji:'🐣', name:'hatching chick', visible: true, visible: true}, {emoji:'🦉', name:'owl', visible: true}, {emoji:'🐧', name:'penguin', visible: true}, {emoji:'🐼', name:'panda', visible: true}, {emoji:'🐨', name:'koala', visible: true}, {emoji:'🐮', name:'cow face', visible: true}, {emoji:'🐌', name:'snail', visible: true}, {emoji:'🐺', name:'wolf', visible: true}, {emoji:'🦄', name:'unicorn', visible: true}, {emoji:'🙉', name:'hear-no-evil monkey', visible: true}, {emoji:'🦇', name:'bat', visible: true}, {emoji:'🦊', name:'fox', visible: true}, {emoji:'🐞', name:'lady beetle', visible: true}, {emoji:'🐚', name:'spiral shell', visible: true}, {emoji:'🌝', name:'full moon face', visible: true}, {emoji:'🐴', name:'horse face', visible: true}, {emoji:'☁️', name:'cloud', visible: true}, {emoji:'🦂', name:'scorpion', visible: true}, {emoji:'🐢', name:'turtle', visible: true}, {emoji:'🦋', name:'butterfly', visible: true}, {emoji:'🐸', name:'frog', visible: true}, {emoji:'🦎', name:'lizard', visible: true}, {emoji:'🐠', name:'tropical fish', visible: true}, {emoji:'🐒', name:'monkey', visible: true}, {emoji:'🐹', name:'hamster', visible: true}, {emoji:'🌙', name:'crescent moon', visible: true}, {emoji:'🐄', name:'cow', visible: true}, {emoji:'🐛', name:'bug', visible: true}, {emoji:'🐦', name:'bird', visible: true}, {emoji:'🐍', name:'snake', visible: true}, {emoji:'🐜', name:'ant', visible: true}, {emoji:'🐗', name:'boar', visible: true}, {emoji:'🐽', name:'pig nose', visible: true}, {emoji:'🌎', name:'globe showing Americas', visible: true}, {emoji:'🐓', name:'rooster', visible: true}, {emoji:'🦑', name:'squid', visible: true}, {emoji:'🐫', name:'two-hump camel', visible: true}, {emoji:'🐋', name:'whale', visible: true}, {emoji:'🦌', name:'deer', visible: true}, {emoji:'🦅', name:'eagle', visible: true}, {emoji:'🐬', name:'dolphin', visible: true}, {emoji:'🐔', name:'chicken', visible: true}, {emoji:'🐐', name:'goat', visible: true}, {emoji:'🐃', name:'water buffalo', visible: true}, {emoji:'🐪', name:'camel', visible: true}, {emoji:'🐘', name:'elephant', visible: true}, {emoji:'🦀', name:'crab', visible: true}, {emoji:'☀️', name:'sun', visible: true}, {emoji:'🌾', name:'sheaf of rice', visible: true}, {emoji:'🐝', name:'honeybee', visible: true}, {emoji:'🐕', name:'dog', visible: true}, {emoji:'🐀', name:'rat', visible: true}, {emoji:'🦖', name:'T-Rex', visible: true}, {emoji:'🦏', name:'rhinoceros', visible: true}, {emoji:'🦐', name:'shrimp', visible: true}, {emoji:'🐟', name:'fish', visible: true}, {emoji:'🌵', name:'cactus', visible: true}, {emoji:'🐾', name:'paw prints', visible: true}, {emoji:'🐊', name:'crocodile', visible: true}, {emoji:'🥀', name:'wilted flower', visible: true}, {emoji:'🐤', name:'baby chick', visible: true}, {emoji:'🐖', name:'pig', visible: true}, {emoji:'🐯', name:'tiger face', visible: true}, {emoji:'🦁', name:'lion', visible: true}, {emoji:'🙈', name:'see-no-evil monkey', visible: true}, {emoji:'🐡', name:'blowfish', visible: true}, {emoji:'🦈', name:'shark', visible: true}, {emoji:'🐭', name:'mouse face', visible: true}, {emoji:'🐰', name:'rabbit face', visible: true}, {emoji:'🐆', name:'leopard', visible: true}, {emoji:'🐎', name:'horse', visible: true}, {emoji:'🌺', name:'hibiscus', visible: true}, {emoji:'🍂', name:'fallen leaf', visible: true}, {emoji:'🐅', name:'tiger', visible: true}, {emoji:'🐙', name:'octopus', visible: true}, {emoji:'💧', name:'droplet', visible: true}, {emoji:'🙊', name:'speak-no-evil monkey', visible: true}, {emoji:'🐏', name:'ram', visible: true}, {emoji:'🌻', name:'sunflower', visible: true}, {emoji:'🌴', name:'palm tree', visible: true}, {emoji:'🌘', name:'waning crescent moon', visible: true}, {emoji:'🐩', name:'poodle', visible: true}, {emoji:'🌸', name:'cherry blossom', visible: true}, {emoji:'🦓', name:'zebra', visible: true}, {emoji:'🐻', name:'bear', visible: true}, {emoji:'🦃', name:'turkey', visible: true}, {emoji:'🦕', name:'sauropod', visible: true}, {emoji:'💦', name:'sweat droplets', visible: true}, {emoji:'🐈', name:'cat', visible: true}, {emoji:'🌈', name:'rainbow', visible: true}, {emoji:'🐳', name:'spouting whale', visible: true}, {emoji:'☃️', name:'snowman', visible: true}, {emoji:'❄️', name:'snowflake', visible: true}, {emoji:'🍄', name:'mushroom', visible: true}, {emoji:'🦆', name:'duck', visible: true}, {emoji:'🌑', name:'new moon', visible: true}, {emoji:'🌖', name:'waning gibbous moon', visible: true}, {emoji:'💫', name:'dizzy', visible: true}, {emoji:'🐂', name:'ox', visible: true}, {emoji:'🌊', name:'water wave', visible: true}, {emoji:'🌿', name:'herb', visible: true}, {emoji:'🐉', name:'dragon', visible: true}, {emoji:'🌗', name:'last quarter moon', visible: true}, {emoji:'🌏', name:'globe showing Asia-Australia', visible: true}, {emoji:'🍀', name:'four leaf clover', visible: true}, {emoji:'🎄', name:'Christmas tree', visible: true}, {emoji:'🎋', name:'tanabata tree', visible: true}, {emoji:'🌜', name:'last quarter moon face', visible: true}, {emoji:'🌞', name:'sun with face', visible: true}, {emoji:'☘️', name:'shamrock', visible: true}, {emoji:'🐇', name:'rabbit', visible: true}, {emoji:'🎍', name:'pine decoration', visible: true}, {emoji:'🍃', name:'leaf fluttering in wind', visible: true}, {emoji:'🌔', name:'waxing gibbous moon', visible: true}, {emoji:'🌚', name:'new moon face', visible: true}, {emoji:'🦒', name:'giraffe', visible: true}, {emoji:'💐', name:'bouquet', visible: true}, {emoji:'🌟', name:'glowing star', visible: true}, {emoji:'🦔', name:'hedgehog', visible: true}, {emoji:'🐑', name:'ewe', visible: true}, {emoji:'🌱', name:'seedling', visible: true}, {emoji:'🌳', name:'deciduous tree', visible: true}, {emoji:'🌲', name:'evergreen tree', visible: true}, {emoji:'✨', name:'sparkles', visible: true}, {emoji:'🐲', name:'dragon face', visible: true}, {emoji:'🌹', name:'rose', visible: true}, {emoji:'🐁', name:'mouse', visible: true}, {emoji:'🌓', name:'first quarter moon', visible: true}, {emoji:'💥', name:'collision', visible: true}, {emoji:'🔥', name:'fire', visible: true}, {emoji:'🌍', name:'globe showing Europe-Africa', visible: true}, {emoji:'🌼', name:'blossom', visible: true}, {emoji:'🦍', name:'gorilla', visible: true}, {emoji:'🌛', name:'first quarter moon face', visible: true}, {emoji:'🌷', name:'tulip', visible: true}, {emoji:'💨', name:'dashing away', visible: true}, {emoji:'🌒', name:'waxing crescent moon', visible: true}, {emoji:'🌕', name:'full moon', visible: true}, {emoji:'🍁', name:'maple leaf', visible: true} 144 | ], 145 | foodAndDrink: [{emoji:'🍌', name:'banana', visible: true}, {emoji:'🍑', name:'peach', visible: true}, {emoji:'🥑', name:'avocado', visible: true}, {emoji:'🥜', name:'peanuts', visible: true}, {emoji:'🌰', name:'chestnut', visible: true}, {emoji:'🍖', name:'meat on bone', visible: true}, {emoji:'🍜', name:'steaming bowl', visible: true}, {emoji:'🍇', name:'grapes', visible: true}, {emoji:'🍈', name:'melon', visible: true}, {emoji:'🥫', name:'canned food', visible: true}, {emoji:'🥚', name:'egg', visible: true}, {emoji:'🌭', name:'hot dog', visible: true}, {emoji:'🍛', name:'curry rice', visible: true}, {emoji:'🍲', name:'pot of food', visible: true}, {emoji:'🍭', name:'lollipop', visible: true}, {emoji:'🥐', name:'croissant', visible: true}, {emoji:'🥛', name:'glass of milk', visible: true}, {emoji:'🍘', name:'rice cracker', visible: true}, {emoji:'🍹', name:'tropical drink', visible: true}, {emoji:'🍝', name:'spaghetti', visible: true}, {emoji:'🍯', name:'honey pot', visible: true}, {emoji:'🍟', name:'french fries', visible: true}, {emoji:'🍻', name:'clinking beer mugs', visible: true}, {emoji:'🍉', name:'watermelon', visible: true}, {emoji:'🥒', name:'cucumber', visible: true}, {emoji:'🍱', name:'bento box', visible: true}, {emoji:'🥣', name:'bowl with spoon', visible: true}, {emoji:'🥔', name:'potato', visible: true}, {emoji:'🥤', name:'cup with straw', visible: true}, {emoji:'🌯', name:'burrito', visible: true}, {emoji:'🍡', name:'dango', visible: true}, {emoji:'🥄', name:'spoon', visible: true}, {emoji:'🍙', name:'rice ball', visible: true}, {emoji:'🍫', name:'chocolate bar', visible: true}, {emoji:'🍼', name:'baby bottle', visible: true}, {emoji:'🥝', name:'kiwi fruit', visible: true}, {emoji:'🍧', name:'shaved ice', visible: true}, {emoji:'🍎', name:'red apple', visible: true}, {emoji:'🥖', name:'baguette bread', visible: true}, {emoji:'🌽', name:'ear of corn', visible: true}, {emoji:'🍆', name:'eggplant', visible: true}, {emoji:'🥃', name:'tumbler glass', visible: true}, {emoji:'🥕', name:'carrot', visible: true}, {emoji:'🍪', name:'cookie', visible: true}, {emoji:'🥙', name:'stuffed flatbread', visible: true}, {emoji:'🍣', name:'sushi', visible: true}, {emoji:'🍚', name:'cooked rice', visible: true}, {emoji:'🍴', name:'fork and knife', visible: true}, {emoji:'🥦', name:'broccoli', visible: true}, {emoji:'🥗', name:'green salad', visible: true}, {emoji:'🍺', name:'beer mug', visible: true}, {emoji:'🍸', name:'cocktail glass', visible: true}, {emoji:'🍐', name:'pear', visible: true}, {emoji:'🍢', name:'oden', visible: true}, {emoji:'🥩', name:'cut of meat', visible: true}, {emoji:'🥘', name:'shallow pan of food', visible: true}, {emoji:'🍕', name:'pizza', visible: true}, {emoji:'🍿', name:'popcorn', visible: true}, {emoji:'🍾', name:'bottle with popping cork', visible: true}, {emoji:'🌮', name:'taco', visible: true}, {emoji:'🍰', name:'shortcake', visible: true}, {emoji:'🥢', name:'chopsticks', visible: true}, {emoji:'🍞', name:'bread', visible: true}, {emoji:'🥥', name:'coconut', visible: true}, {emoji:'🍏', name:'green apple', visible: true}, {emoji:'🥞', name:'pancakes', visible: true}, {emoji:'🍗', name:'poultry leg', visible: true}, {emoji:'🍤', name:'fried shrimp', visible: true}, {emoji:'🥡', name:'takeout box', visible: true}, {emoji:'🍳', name:'cooking', visible: true}, {emoji:'🍋', name:'lemon', visible: true}, {emoji:'🥨', name:'pretzel', visible: true}, {emoji:'🍬', name:'candy', visible: true}, {emoji:'🍵', name:'teacup without handle', visible: true}, {emoji:'🥓', name:'bacon', visible: true}, {emoji:'🎂', name:'birthday cake', visible: true}, {emoji:'🍮', name:'custard', visible: true}, {emoji:'🍶', name:'sake', visible: true}, {emoji:'🥟', name:'dumpling', visible: true}, {emoji:'🥪', name:'sandwich', visible: true}, {emoji:'🧀', name:'cheese wedge', visible: true}, {emoji:'🥧', name:'pie', visible: true}, {emoji:'🍅', name:'tomato', visible: true}, {emoji:'🍩', name:'doughnut', visible: true}, {emoji:'🥠', name:'fortune cookie', visible: true}, {emoji:'🍠', name:'roasted sweet potato', visible: true}, {emoji:'🍥', name:'fish cake with swirl', visible: true}, {emoji:'🍔', name:'hamburger', visible: true}, {emoji:'🍷', name:'wine glass', visible: true}, {emoji:'🍒', name:'cherries', visible: true}, {emoji:'🍦', name:'soft ice cream', visible: true}, {emoji:'🍨', name:'ice cream', visible: true}, {emoji:'🍓', name:'strawberry', visible: true}, {emoji:'🍊', name:'tangerine', visible: true}, {emoji:'🍍', name:'pineapple', visible: true}, {emoji:'🥂', name:'clinking glasses', visible: true} 146 | ], 147 | objects: [{emoji:'🍓', name:'strawberry', visible: true}, {emoji:'🍞', name:'bread', visible: true}, {emoji:'🍏', name:'green apple', visible: true}, {emoji:'🍒', name:'cherries', visible: true}, {emoji:'🍅', name:'tomato', visible: true}, {emoji:'🍐', name:'pear', visible: true}, {emoji:'🍥', name:'fish cake with swirl', visible: true}, {emoji:'🌰', name:'chestnut', visible: true}, {emoji:'🥞', name:'pancakes', visible: true}, {emoji:'🥝', name:'kiwi fruit', visible: true}, {emoji:'🥓', name:'bacon', visible: true}, {emoji:'🍛', name:'curry rice', visible: true}, {emoji:'🍑', name:'peach', visible: true}, {emoji:'🍝', name:'spaghetti', visible: true}, {emoji:'🥑', name:'avocado', visible: true}, {emoji:'🥖', name:'baguette bread', visible: true}, {emoji:'🍊', name:'tangerine', visible: true}, {emoji:'🍈', name:'melon', visible: true}, {emoji:'🥐', name:'croissant', visible: true}, {emoji:'🍍', name:'pineapple', visible: true}, {emoji:'🍠', name:'roasted sweet potato', visible: true}, {emoji:'🍇', name:'grapes', visible: true}, {emoji:'🍙', name:'rice ball', visible: true}, {emoji:'🥔', name:'potato', visible: true}, {emoji:'🍾', name:'bottle with popping cork', visible: true}, {emoji:'🍯', name:'honey pot', visible: true}, {emoji:'🍧', name:'shaved ice', visible: true}, {emoji:'🍸', name:'cocktail glass', visible: true}, {emoji:'🍗', name:'poultry leg', visible: true}, {emoji:'🥄', name:'spoon', visible: true}, {emoji:'🥒', name:'cucumber', visible: true}, {emoji:'🍪', name:'cookie', visible: true}, {emoji:'🌯', name:'burrito', visible: true}, {emoji:'🥧', name:'pie', visible: true}, {emoji:'🧀', name:'cheese wedge', visible: true}, {emoji:'🍲', name:'pot of food', visible: true}, {emoji:'🥜', name:'peanuts', visible: true}, {emoji:'🥥', name:'coconut', visible: true}, {emoji:'🍺', name:'beer mug', visible: true}, {emoji:'🍹', name:'tropical drink', visible: true}, {emoji:'🥙', name:'stuffed flatbread', visible: true}, {emoji:'🍱', name:'bento box', visible: true}, {emoji:'🍣', name:'sushi', visible: true}, {emoji:'🍫', name:'chocolate bar', visible: true}, {emoji:'🥗', name:'green salad', visible: true}, {emoji:'🍚', name:'cooked rice', visible: true}, {emoji:'🌽', name:'ear of corn', visible: true}, {emoji:'🍤', name:'fried shrimp', visible: true}, {emoji:'🍆', name:'eggplant', visible: true}, {emoji:'🥢', name:'chopsticks', visible: true}, {emoji:'🍉', name:'watermelon', visible: true}, {emoji:'🌭', name:'hot dog', visible: true}, {emoji:'🥨', name:'pretzel', visible: true}, {emoji:'🍳', name:'cooking', visible: true}, {emoji:'🍎', name:'red apple', visible: true}, {emoji:'🍰', name:'shortcake', visible: true}, {emoji:'🍔', name:'hamburger', visible: true}, {emoji:'🥛', name:'glass of milk', visible: true}, {emoji:'🍜', name:'steaming bowl', visible: true}, {emoji:'🍖', name:'meat on bone', visible: true}, {emoji:'🥚', name:'egg', visible: true}, {emoji:'🍌', name:'banana', visible: true}, {emoji:'🍋', name:'lemon', visible: true}, {emoji:'🍼', name:'baby bottle', visible: true}, {emoji:'🥕', name:'carrot', visible: true}, {emoji:'🍨', name:'ice cream', visible: true}, {emoji:'🥪', name:'sandwich', visible: true}, {emoji:'🍘', name:'rice cracker', visible: true}, {emoji:'🍡', name:'dango', visible: true}, {emoji:'🍻', name:'clinking beer mugs', visible: true}, {emoji:'🍕', name:'pizza', visible: true}, {emoji:'🌮', name:'taco', visible: true}, {emoji:'🍦', name:'soft ice cream', visible: true}, {emoji:'🥣', name:'bowl with spoon', visible: true}, {emoji:'🥠', name:'fortune cookie', visible: true}, {emoji:'🥟', name:'dumpling', visible: true}, {emoji:'🥫', name:'canned food', visible: true}, {emoji:'🥩', name:'cut of meat', visible: true}, {emoji:'🍭', name:'lollipop', visible: true}, {emoji:'🍩', name:'doughnut', visible: true}, {emoji:'🍷', name:'wine glass', visible: true}, {emoji:'🥦', name:'broccoli', visible: true}, {emoji:'🥘', name:'shallow pan of food', visible: true}, {emoji:'🍟', name:'french fries', visible: true}, {emoji:'🍿', name:'popcorn', visible: true}, {emoji:'🍢', name:'oden', visible: true}, {emoji:'🍮', name:'custard', visible: true}, {emoji:'🎂', name:'birthday cake', visible: true}, {emoji:'🥤', name:'cup with straw', visible: true}, {emoji:'🍶', name:'sake', visible: true}, {emoji:'🍬', name:'candy', visible: true}, {emoji:'🍵', name:'teacup without handle', visible: true}, {emoji:'🥂', name:'clinking glasses', visible: true}, {emoji:'🥡', name:'takeout box', visible: true}, {emoji:'🍴', name:'fork and knife', visible: true}, {emoji:'🥃', name:'tumbler glass', visible: true} 148 | ], 149 | flags: [{emoji:'🏳️', name:'white flag', visible: true}, {emoji:'🏴', name:'black flag', visible: true}, {emoji:'🏁', name:'chequered flag', visible: true}, {emoji:'🇦🇫', name:'flag: Afghanistan', visible: true}, {emoji:'🇦🇱', name:'flag: Albania', visible: true}, {emoji:'🚩', name:'triangular flag', visible: true}, {emoji:'🇦🇩', name:'flag: Andorra', visible: true}, {emoji:'🏳️‍🌈', name:'rainbow flag', visible: true}, {emoji:'🇦🇷', name:'flag: Argentina', visible: true}, {emoji:'🇦🇸', name:'flag: American Samoa', visible: true}, {emoji:'🇦🇶', name:'flag: Antarctica', visible: true}, {emoji:'🇩🇿', name:'flag: Algeria', visible: true}, {emoji:'🇦🇲', name:'flag: Armenia', visible: true}, {emoji:'🇦🇴', name:'flag: Angola', visible: true}, {emoji:'🇦🇬', name:'flag: Antigua & Barbuda', visible: true}, {emoji:'🇦🇼', name:'flag: Aruba', visible: true}, {emoji:'🇦🇺', name:'flag: Australia', visible: true}, {emoji:'🇦🇿', name:'flag: Azerbaijan', visible: true}, {emoji:'🇧🇸', name:'flag: Bahamas', visible: true}, {emoji:'🇦🇮', name:'flag: Anguilla', visible: true}, {emoji:'🇧🇬', name:'flag: Bulgaria', visible: true}, {emoji:'🇧🇾', name:'flag: Belarus', visible: true}, {emoji:'🇦🇽', name:'flag: Åland Islands', visible: true}, {emoji:'🇧🇩', name:'flag: Bangladesh', visible: true}, {emoji:'🇧🇴', name:'flag: Bolivia', visible: true}, {emoji:'🇮🇴', name:'flag: British Indian Ocean Territory', visible: true}, {emoji:'🇧🇳', name:'flag: Brunei', visible: true}, {emoji:'🇧🇫', name:'flag: Burkina Faso', visible: true}, {emoji:'🇧🇮', name:'flag: Burundi', visible: true}, {emoji:'🇧🇭', name:'flag: Bahrain', visible: true}, {emoji:'🇧🇪', name:'flag: Belgium', visible: true}, {emoji:'🇨🇲', name:'flag: Cameroon', visible: true}, {emoji:'🇨🇨', name:'flag: Cocos (Keeling) Islands', visible: true}, {emoji:'🇧🇲', name:'flag: Bermuda', visible: true}, {emoji:'🇨🇫', name:'flag: Central African Republic', visible: true}, {emoji:'🇧🇹', name:'flag: Bhutan', visible: true}, {emoji:'🇨🇳', name:'flag: China', visible: true}, {emoji:'🇨🇬', name:'flag: Congo - Brazzaville', visible: true}, {emoji:'🇧🇧', name:'flag: Barbados', visible: true}, {emoji:'🇨🇾', name:'flag: Cyprus', visible: true}, {emoji:'🇹🇫', name:'flag: French Southern Territories', visible: true}, {emoji:'🇦🇹', name:'flag: Austria', visible: true}, {emoji:'🇨🇩', name:'flag: Congo - Kinshasa', visible: true}, {emoji:'🇬🇫', name:'flag: French Guiana', visible: true}, {emoji:'🇨🇿', name:'flag: Czechia', visible: true}, {emoji:'🇧🇦', name:'flag: Bosnia & Herzegovina', visible: true}, {emoji:'🇪🇺', name:'flag: European Union', visible: true}, {emoji:'🇫🇮', name:'flag: Finland', visible: true}, {emoji:'🇨🇽', name:'flag: Christmas Island', visible: true}, {emoji:'🇬🇪', name:'flag: Georgia', visible: true}, {emoji:'🇬🇲', name:'flag: Gambia', visible: true}, {emoji:'🇨🇺', name:'flag: Cuba', visible: true}, {emoji:'🇬🇺', name:'flag: Guam', visible: true}, {emoji:'🇵🇫', name:'flag: French Polynesia', visible: true}, {emoji:'🇬🇹', name:'flag: Guatemala', visible: true}, {emoji:'🇨🇷', name:'flag: Costa Rica', visible: true}, {emoji:'🇧🇶', name:'flag: Caribbean Netherlands', visible: true}, {emoji:'🇧🇷', name:'flag: Brazil', visible: true}, {emoji:'🇧🇼', name:'flag: Botswana', visible: true}, {emoji:'🇬🇶', name:'flag: Equatorial Guinea', visible: true}, {emoji:'🇬🇦', name:'flag: Gabon', visible: true}, {emoji:'🇬🇷', name:'flag: Greece', visible: true}, {emoji:'🇨🇼', name:'flag: Curaçao', visible: true}, {emoji:'🇬🇵', name:'flag: Guadeloupe', visible: true}, {emoji:'🇪🇨', name:'flag: Ecuador', visible: true}, {emoji:'🇩🇴', name:'flag: Dominican Republic', visible: true}, {emoji:'🇩🇰', name:'flag: Denmark', visible: true}, {emoji:'🇬🇮', name:'flag: Gibraltar', visible: true}, {emoji:'🇧🇯', name:'flag: Benin', visible: true}, {emoji:'🇪🇷', name:'flag: Eritrea', visible: true}, {emoji:'🇰🇭', name:'flag: Cambodia', visible: true}, {emoji:'🇫🇰', name:'flag: Falkland Islands', visible: true}, {emoji:'🇮🇲', name:'flag: Isle of Man', visible: true}, {emoji:'🇫🇷', name:'flag: France', visible: true}, {emoji:'🇨🇦', name:'flag: Canada', visible: true}, {emoji:'🇩🇪', name:'flag: Germany', visible: true}, {emoji:'🇭🇰', name:'flag: Hong Kong SAR China', visible: true}, {emoji:'🇪🇪', name:'flag: Estonia', visible: true}, {emoji:'🇨🇻', name:'flag: Cape Verde', visible: true}, {emoji:'🇸🇻', name:'flag: El Salvador', visible: true}, {emoji:'🇰🇾', name:'flag: Cayman Islands', visible: true}, {emoji:'🇬🇬', name:'flag: Guernsey', visible: true}, {emoji:'🇮🇶', name:'flag: Iraq', visible: true}, {emoji:'🇪🇬', name:'flag: Egypt', visible: true}, {emoji:'🇩🇲', name:'flag: Dominica', visible: true}, {emoji:'🇻🇬', name:'flag: British Virgin Islands', visible: true}, {emoji:'🇬🇱', name:'flag: Greenland', visible: true}, {emoji:'🇧🇿', name:'flag: Belize', visible: true}, {emoji:'🇿🇦', name:'flag: South Africa', visible: true}, {emoji:'🇬🇩', name:'flag: Grenada', visible: true}, {emoji:'🇩🇯', name:'flag: Djibouti', visible: true}, {emoji:'🇭🇹', name:'flag: Haiti', visible: true}, {emoji:'🇮🇪', name:'flag: Ireland', visible: true}, {emoji:'🇬🇾', name:'flag: Guyana', visible: true}, {emoji:'🇹🇩', name:'flag: Chad', visible: true}, {emoji:'🇬🇳', name:'flag: Guinea', visible: true}, {emoji:'🇰🇲', name:'flag: Comoros', visible: true}, {emoji:'🇬🇼', name:'flag: Guinea-Bissau', visible: true}, {emoji:'🇨🇱', name:'flag: Chile', visible: true}, {emoji:'🇯🇴', name:'flag: Jordan', visible: true}, {emoji:'🇲🇵', name:'flag: Northern Mariana Islands', visible: true}, {emoji:'🇨🇰', name:'flag: Cook Islands', visible: true}, {emoji:'🇪🇹', name:'flag: Ethiopia', visible: true}, {emoji:'🇬🇭', name:'flag: Ghana', visible: true}, {emoji:'🇭🇺', name:'flag: Hungary', visible: true}, {emoji:'🎌', name:'crossed flags', visible: true}, {emoji:'🇭🇳', name:'flag: Honduras', visible: true}, {emoji:'🇨🇮', name:'flag: Côte d’Ivoire', visible: true}, {emoji:'🇯🇵', name:'flag: Japan', visible: true}, {emoji:'🇸🇳', name:'flag: Senegal', visible: true}, {emoji:'🇳🇪', name:'flag: Niger', visible: true}, {emoji:'🇵🇹', name:'flag: Portugal', visible: true}, {emoji:'🇱🇧', name:'flag: Lebanon', visible: true}, {emoji:'🇱🇰', name:'flag: Sri Lanka', visible: true}, {emoji:'🇨🇭', name:'flag: Switzerland', visible: true}, {emoji:'🇸🇬', name:'flag: Singapore', visible: true}, {emoji:'🇫🇴', name:'flag: Faroe Islands', visible: true}, {emoji:'🇱🇻', name:'flag: Latvia', visible: true}, {emoji:'🇮🇨', name:'flag: Canary Islands', visible: true}, {emoji:'🇰🇿', name:'flag: Kazakhstan', visible: true}, {emoji:'🇭🇷', name:'flag: Croatia', visible: true}, {emoji:'🇵🇾', name:'flag: Paraguay', visible: true}, {emoji:'🇮🇳', name:'flag: India', visible: true}, {emoji:'🇸🇦', name:'flag: Saudi Arabia', visible: true}, {emoji:'🇰🇼', name:'flag: Kuwait', visible: true}, {emoji:'🇰🇬', name:'flag: Kyrgyzstan', visible: true}, {emoji:'🇮🇸', name:'flag: Iceland', visible: true}, {emoji:'🇨🇴', name:'flag: Colombia', visible: true}, {emoji:'🇰🇮', name:'flag: Kiribati', visible: true}, {emoji:'🇲🇷', name:'flag: Mauritania', visible: true}, {emoji:'🇵🇱', name:'flag: Poland', visible: true}, {emoji:'🇻🇳', name:'flag: Vietnam', visible: true}, {emoji:'🇺🇿', name:'flag: Uzbekistan', visible: true}, {emoji:'🇷🇪', name:'flag: Réunion', visible: true}, {emoji:'🇫🇲', name:'flag: Micronesia', visible: true}, {emoji:'🇲🇲', name:'flag: Myanmar (Burma)', visible: true}, {emoji:'🇲🇩', name:'flag: Moldova', visible: true}, {emoji:'🇶🇦', name:'flag: Qatar', visible: true}, {emoji:'🇫🇯', name:'flag: Fiji', visible: true}, {emoji:'🇲🇸', name:'flag: Montserrat', visible: true}, {emoji:'🇮🇷', name:'flag: Iran', visible: true}, {emoji:'🇺🇾', name:'flag: Uruguay', visible: true}, {emoji:'🇵🇲', name:'flag: St. Pierre & Miquelon', visible: true}, {emoji:'🇲🇰', name:'flag: North Macedonia', visible: true}, {emoji:'🇵🇷', name:'flag: Puerto Rico', visible: true}, {emoji:'🇷🇺', name:'flag: Russia', visible: true}, {emoji:'🇸🇲', name:'flag: San Marino', visible: true}, {emoji:'🇲🇨', name:'flag: Monaco', visible: true}, {emoji:'🇲🇬', name:'flag: Madagascar', visible: true}, {emoji:'🇱🇺', name:'flag: Luxembourg', visible: true}, {emoji:'🇲🇺', name:'flag: Mauritius', visible: true}, {emoji:'🇹🇳', name:'flag: Tunisia', visible: true}, {emoji:'🇲🇶', name:'flag: Martinique', visible: true}, {emoji:'🇱🇸', name:'flag: Lesotho', visible: true}, {emoji:'🇳🇴', name:'flag: Norway', visible: true}, {emoji:'🇷🇼', name:'flag: Rwanda', visible: true}, {emoji:'🇱🇦', name:'flag: Laos', visible: true}, {emoji:'🇽🇰', name:'flag: Kosovo', visible: true}, {emoji:'🇯🇪', name:'flag: Jersey', visible: true}, {emoji:'🇲🇼', name:'flag: Malawi', visible: true}, {emoji:'🇵🇳', name:'flag: Pitcairn Islands', visible: true}, {emoji:'🇲🇦', name:'flag: Morocco', visible: true}, {emoji:'🇲🇾', name:'flag: Malaysia', visible: true}, {emoji:'🇲🇪', name:'flag: Montenegro', visible: true}, {emoji:'🇲🇹', name:'flag: Malta', visible: true}, {emoji:'🇳🇬', name:'flag: Nigeria', visible: true}, {emoji:'🇳🇵', name:'flag: Nepal', visible: true}, {emoji:'🇱🇮', name:'flag: Liechtenstein', visible: true}, {emoji:'🇮🇹', name:'flag: Italy', visible: true}, {emoji:'🇵🇼', name:'flag: Palau', visible: true}, {emoji:'🇲🇭', name:'flag: Marshall Islands', visible: true}, {emoji:'🇳🇷', name:'flag: Nauru', visible: true}, {emoji:'🇰🇪', name:'flag: Kenya', visible: true}, {emoji:'🇸🇴', name:'flag: Somalia', visible: true}, {emoji:'🇲🇱', name:'flag: Mali', visible: true}, {emoji:'🇹🇲', name:'flag: Turkmenistan', visible: true}, {emoji:'🏴󠁧󠁢󠁥󠁮󠁧󠁿', name:'flag: England', visible: true}, {emoji:'🇳🇮', name:'flag: Nicaragua', visible: true}, {emoji:'🇲🇳', name:'flag: Mongolia', visible: true}, {emoji:'🇿🇼', name:'flag: Zimbabwe', visible: true}, {emoji:'🇳🇺', name:'flag: Niue', visible: true}, {emoji:'🇵🇦', name:'flag: Panama', visible: true}, {emoji:'🇻🇺', name:'flag: Vanuatu', visible: true}, {emoji:'🇲🇽', name:'flag: Mexico', visible: true}, {emoji:'🇯🇲', name:'flag: Jamaica', visible: true}, {emoji:'🇵🇰', name:'flag: Pakistan', visible: true}, {emoji:'🇻🇦', name:'flag: Vatican City', visible: true}, {emoji:'🇾🇪', name:'flag: Yemen', visible: true}, {emoji:'🇪🇭', name:'flag: Western Sahara', visible: true}, {emoji:'🇱🇾', name:'flag: Libya', visible: true}, {emoji:'🇧🇱', name:'flag: St. Barthélemy', visible: true}, {emoji:'🇲🇿', name:'flag: Mozambique', visible: true}, {emoji:'🇱🇷', name:'flag: Liberia', visible: true}, {emoji:'🇳🇦', name:'flag: Namibia', visible: true}, {emoji:'🇹🇼', name:'flag: Taiwan', visible: true}, {emoji:'🇸🇱', name:'flag: Sierra Leone', visible: true}, {emoji:'🇸🇧', name:'flag: Solomon Islands', visible: true}, {emoji:'🇮🇩', name:'flag: Indonesia', visible: true}, {emoji:'🇲🇴', name:'flag: Macao SAR China', visible: true}, {emoji:'🇳🇫', name:'flag: Norfolk Island', visible: true}, {emoji:'🇳🇱', name:'flag: Netherlands', visible: true}, {emoji:'🏴󠁧󠁢󠁷󠁬󠁳󠁿', name:'flag: Wales', visible: true}, {emoji:'🏴󠁧󠁢󠁳󠁣󠁴󠁿', name:'flag: Scotland', visible: true}, {emoji:'🇾🇹', name:'flag: Mayotte', visible: true}, {emoji:'🇵🇭', name:'flag: Philippines', visible: true}, {emoji:'🇼🇫', name:'flag: Wallis & Futuna', visible: true}, {emoji:'🇬🇧', name:'flag: United Kingdom', visible: true}, {emoji:'🇸🇨', name:'flag: Seychelles', visible: true}, {emoji:'🇻🇪', name:'flag: Venezuela', visible: true}, {emoji:'🇹🇯', name:'flag: Tajikistan', visible: true}, {emoji:'🇱🇹', name:'flag: Lithuania', visible: true}, {emoji:'🇸🇩', name:'flag: Sudan', visible: true}, {emoji:'🇼🇸', name:'flag: Samoa', visible: true}, {emoji:'🇴🇲', name:'flag: Oman', visible: true}, {emoji:'🇸🇭', name:'flag: St. Helena', visible: true}, {emoji:'🇳🇿', name:'flag: New Zealand', visible: true}, {emoji:'🇷🇸', name:'flag: Serbia', visible: true}, {emoji:'🇲🇻', name:'flag: Maldives', visible: true}, {emoji:'🇹🇴', name:'flag: Tonga', visible: true}, {emoji:'🇹🇿', name:'flag: Tanzania', visible: true}, {emoji:'🇹🇻', name:'flag: Tuvalu', visible: true}, {emoji:'🇰🇳', name:'flag: St. Kitts & Nevis', visible: true}, {emoji:'🇹🇨', name:'flag: Turks & Caicos Islands', visible: true}, {emoji:'🇵🇪', name:'flag: Peru', visible: true}, {emoji:'🇳🇨', name:'flag: New Caledonia', visible: true}, {emoji:'🇵🇬', name:'flag: Papua New Guinea', visible: true}, {emoji:'🇱🇨', name:'flag: St. Lucia', visible: true}, {emoji:'🇸🇸', name:'flag: South Sudan', visible: true}, {emoji:'🇺🇬', name:'flag: Uganda', visible: true}, {emoji:'🇬🇸', name:'flag: South Georgia & South Sandwich Islands', visible: true}, {emoji:'🇸🇹', name:'flag: São Tomé & Príncipe', visible: true}, {emoji:'🇸🇽', name:'flag: Sint Maarten', visible: true}, {emoji:'🇸🇪', name:'flag: Sweden', visible: true}, {emoji:'🇻🇨', name:'flag: St. Vincent & Grenadines', visible: true}, {emoji:'🇹🇬', name:'flag: Togo', visible: true}, {emoji:'🇸🇷', name:'flag: Suriname', visible: true}, {emoji:'🇺🇸', name:'flag: United States', visible: true}, {emoji:'🇻🇮', name:'flag: U.S. Virgin Islands', visible: true}, {emoji:'🇹🇹', name:'flag: Trinidad & Tobago', visible: true}, {emoji:'🇸🇮', name:'flag: Slovenia', visible: true}, {emoji:'🇸🇾', name:'flag: Syria', visible: true}, {emoji:'🇸🇿', name:'flag: Eswatini', visible: true}, {emoji:'🇦🇪', name:'flag: United Arab Emirates', visible: true}, {emoji:'🇹🇭', name:'flag: Thailand', visible: true}, {emoji:'🇵🇸', name:'flag: Palestinian Territories', visible: true}, {emoji:'🇺🇦', name:'flag: Ukraine', visible: true}, {emoji:'🇰🇷', name:'flag: South Korea', visible: true}, {emoji:'🇸🇰', name:'flag: Slovakia', visible: true}, {emoji:'🇪🇸', name:'flag: Spain', visible: true}, {emoji:'🇹🇱', name:'flag: Timor-Leste', visible: true}, {emoji:'🇷🇴', name:'flag: Romania', visible: true}, {emoji:'🇹🇷', name:'flag: Turkey', visible: true}, {emoji:'🇹🇰', name:'flag: Tokelau', visible: true}, {emoji:'🇿🇲', name:'flag: Zambia', visible: true}, {emoji:'🇰🇵', name:'flag: North Korea', visible: true} 150 | ], 151 | symbols: [{emoji:'🖤', name:'black heart', visible: true}, {emoji:'💕', name:'two hearts', visible: true}, {emoji:'💛', name:'yellow heart', visible: true}, {emoji:'💗', name:'growing heart', visible: true}, {emoji:'💟', name:'heart decoration', visible: true}, {emoji:'☮️', name:'peace symbol', visible: true}, {emoji:'❣️', name:'heart exclamation', visible: true}, {emoji:'☸️', name:'wheel of dharma', visible: true}, {emoji:'❤️', name:'red heart', visible: true}, {emoji:'💞', name:'revolving hearts', visible: true}, {emoji:'💔', name:'broken heart', visible: true}, {emoji:'💜', name:'purple heart', visible: true}, {emoji:'⛎', name:'Ophiuchus', visible: true}, {emoji:'🆔', name:'ID button', visible: true}, {emoji:'🉑', name:'Japanese “acceptable” button', visible: true}, {emoji:'💚', name:'green heart', visible: true}, {emoji:'🔛', name:'ON! arrow', visible: true}, {emoji:'☯️', name:'yin yang', visible: true}, {emoji:'💖', name:'sparkling heart', visible: true}, {emoji:'🈶', name:'Japanese “not free of charge” button', visible: true}, {emoji:'🔴', name:'red circle', visible: true}, {emoji:'✡️', name:'star of David', visible: true}, {emoji:'☪️', name:'star and crescent', visible: true}, {emoji:'💯', name:'hundred points', visible: true}, {emoji:'🈸', name:'Japanese “application” button', visible: true}, {emoji:'🅱️', name:'B button (blood type)', visible: true}, {emoji:'🚳', name:'no bicycles', visible: true}, {emoji:'⁉️', name:'exclamation question mark', visible: true}, {emoji:'🔯', name:'dotted six-pointed star', visible: true}, {emoji:'♠️', name:'spade suit', visible: true}, {emoji:'🈵', name:'Japanese “no vacancy” button', visible: true}, {emoji:'🚭', name:'no smoking', visible: true}, {emoji:'🕟', name:'four-thirty', visible: true}, {emoji:'🕠', name:'five-thirty', visible: true}, {emoji:'〰️', name:'wavy dash', visible: true}, {emoji:'💙', name:'blue heart', visible: true}, {emoji:'🔰', name:'Japanese symbol for beginner', visible: true}, {emoji:'🚯', name:'no littering', visible: true}, {emoji:'🕎', name:'menorah', visible: true}, {emoji:'✝️', name:'latin cross', visible: true}, {emoji:'🕥', name:'ten-thirty', visible: true}, {emoji:'🔱', name:'trident emblem', visible: true}, {emoji:'💭', name:'thought balloon', visible: true}, {emoji:'🅿️', name:'P button', visible: true}, {emoji:'🚺', name:'women’s room', visible: true}, {emoji:'❔', name:'white question mark', visible: true}, {emoji:'☦️', name:'orthodox cross', visible: true}, {emoji:'🛐', name:'place of worship', visible: true}, {emoji:'💝', name:'heart with ribbon', visible: true}, {emoji:'💓', name:'beating heart', visible: true}, {emoji:'🔠', name:'input latin uppercase', visible: true}, {emoji:'💘', name:'heart with arrow', visible: true}, {emoji:'☢️', name:'radioactive', visible: true}, {emoji:'🕤', name:'nine-thirty', visible: true}, {emoji:'🏧', name:'ATM sign', visible: true}, {emoji:'💮', name:'white flower', visible: true}, {emoji:'💤', name:'zzz', visible: true}, {emoji:'♻️', name:'recycling symbol', visible: true}, {emoji:'🕛', name:'twelve o’clock', visible: true}, {emoji:'🔀', name:'shuffle tracks button', visible: true}, {emoji:'♨️', name:'hot springs', visible: true}, {emoji:'▶️', name:'play button', visible: true}, {emoji:'⚛️', name:'atom symbol', visible: true}, {emoji:'⬆️', name:'up arrow', visible: true}, {emoji:'🈲', name:'Japanese “prohibited” button', visible: true}, {emoji:'❎', name:'cross mark button', visible: true}, {emoji:'🕦', name:'eleven-thirty', visible: true}, {emoji:'🛄', name:'baggage claim', visible: true}, {emoji:'🕝', name:'two-thirty', visible: true}, {emoji:'🌀', name:'cyclone', visible: true}, {emoji:'☣️', name:'biohazard', visible: true}, {emoji:'🔣', name:'input symbols', visible: true}, {emoji:'◀️', name:'reverse button', visible: true}, {emoji:'✅', name:'check mark button', visible: true}, {emoji:'❕', name:'white exclamation mark', visible: true}, {emoji:'🕜', name:'one-thirty', visible: true}, {emoji:'🛃', name:'customs', visible: true}, {emoji:'🔄', name:'counterclockwise arrows button', visible: true}, {emoji:'🕚', name:'eleven o’clock', visible: true}, {emoji:'🕡', name:'six-thirty', visible: true}, {emoji:'🕙', name:'ten o’clock', visible: true}, {emoji:'🆖', name:'NG button', visible: true}, {emoji:'🆕', name:'NEW button', visible: true}, {emoji:'🚹', name:'men’s room', visible: true}, {emoji:'🔺', name:'red triangle pointed up', visible: true}, {emoji:'🛅', name:'left luggage', visible: true}, {emoji:'🕧', name:'twelve-thirty', visible: true}, {emoji:'🔷', name:'large blue diamond', visible: true}, {emoji:'📣', name:'megaphone', visible: true}, {emoji:'〽️', name:'part alternation mark', visible: true}, {emoji:'🔇', name:'muted speaker', visible: true}, {emoji:'➰', name:'curly loop', visible: true}, {emoji:'🚱', name:'non-potable water', visible: true}, {emoji:'🚸', name:'children crossing', visible: true}, {emoji:'🕞', name:'three-thirty', visible: true}, {emoji:'🔲', name:'black square button', visible: true}, {emoji:'🆘', name:'SOS button', visible: true}, {emoji:'🕓', name:'four o’clock', visible: true}, {emoji:'©️', name:'copyright', visible: true}, {emoji:'🔚', name:'END arrow', visible: true}, {emoji:'✔️', name:'check mark', visible: true}, {emoji:'🔞', name:'no one under eighteen', visible: true}, {emoji:'🕔', name:'five o’clock', visible: true}, {emoji:'♣️', name:'club suit', visible: true}, {emoji:'💢', name:'anger symbol', visible: true}, {emoji:'🕢', name:'seven-thirty', visible: true}, {emoji:'🅰️', name:'A button (blood type)', visible: true}, {emoji:'💬', name:'speech balloon', visible: true}, {emoji:'♦️', name:'diamond suit', visible: true}, {emoji:'📳', name:'vibration mode', visible: true}, {emoji:'🚷', name:'no pedestrians', visible: true}, {emoji:'🕑', name:'two o’clock', visible: true}, {emoji:'🛂', name:'passport control', visible: true}, {emoji:'🆎', name:'AB button (blood type)', visible: true}, {emoji:'🚫', name:'prohibited', visible: true}, {emoji:'🆚', name:'VS button', visible: true}, {emoji:'✖️', name:'multiply', visible: true}, {emoji:'🃏', name:'joker', visible: true}, {emoji:'🕘', name:'nine o’clock', visible: true}, {emoji:'🎴', name:'flower playing cards', visible: true}, {emoji:'🕗', name:'eight o’clock', visible: true}, {emoji:'🔅', name:'dim button', visible: true}, {emoji:'🅾️', name:'O button (blood type)', visible: true}, {emoji:'1️⃣', name:'keycap: 1', visible: true}, {emoji:'㊙️', name:'Japanese “secret” button', visible: true}, {emoji:'🔊', name:'speaker high volume', visible: true}, {emoji:'🈷️', name:'Japanese “monthly amount” button', visible: true}, {emoji:'✳️', name:'eight-spoked asterisk', visible: true}, {emoji:'🛑', name:'stop sign', visible: true}, {emoji:'🔂', name:'repeat single button', visible: true}, {emoji:'🕐', name:'one o’clock', visible: true}, {emoji:'‼️', name:'double exclamation mark', visible: true}, {emoji:'®️', name:'registered', visible: true}, {emoji:'↔️', name:'left-right arrow', visible: true}, {emoji:'🉐', name:'Japanese “bargain” button', visible: true}, {emoji:'↗️', name:'up-right arrow', visible: true}, {emoji:'▫️', name:'white small square', visible: true}, {emoji:'♥️', name:'heart suit', visible: true}, {emoji:'🔹', name:'small blue diamond', visible: true}, {emoji:'🈴', name:'Japanese “passing grade” button', visible: true}, {emoji:'📴', name:'mobile phone off', visible: true}, {emoji:'🕕', name:'six o’clock', visible: true}, {emoji:'❇️', name:'sparkle', visible: true}, {emoji:'🔵', name:'blue circle', visible: true}, {emoji:'💱', name:'currency exchange', visible: true}, {emoji:'❌', name:'cross mark', visible: true}, {emoji:'◼️', name:'black medium square', visible: true}, {emoji:'🕒', name:'three o’clock', visible: true}, {emoji:'🔟', name:'keycap: 10', visible: true}, {emoji:'🆒', name:'COOL button', visible: true}, {emoji:'🕖', name:'seven o’clock', visible: true}, {emoji:'🔉', name:'speaker medium volume', visible: true}, {emoji:'🕣', name:'eight-thirty', visible: true}, {emoji:'🆑', name:'CL button', visible: true}, {emoji:'▪️', name:'black small square', visible: true}, {emoji:'🔸', name:'small orange diamond', visible: true}, {emoji:'✴️', name:'eight-pointed star', visible: true}, {emoji:'❓', name:'question mark', visible: true}, {emoji:'⏩', name:'fast-forward button', visible: true}, {emoji:'💠', name:'diamond with a dot', visible: true}, {emoji:'🚮', name:'litter in bin sign', visible: true}, {emoji:'➖', name:'minus', visible: true}, {emoji:'🔻', name:'red triangle pointed down', visible: true}, {emoji:'↩️', name:'right arrow curving left', visible: true}, {emoji:'📵', name:'no mobile phones', visible: true}, {emoji:'🎶', name:'musical notes', visible: true}, {emoji:'🈺', name:'Japanese “open for business” button', visible: true}, {emoji:'⚜️', name:'fleur-de-lis', visible: true}, {emoji:'📛', name:'name badge', visible: true}, {emoji:'➕', name:'plus', visible: true}, {emoji:'🈂️', name:'Japanese “service charge” button', visible: true}, {emoji:'🈳', name:'Japanese “vacancy” button', visible: true}, {emoji:'📢', name:'loudspeaker', visible: true}, {emoji:'◻️', name:'white medium square', visible: true}, {emoji:'☑️', name:'check box with check', visible: true}, {emoji:'🔃', name:'clockwise vertical arrows', visible: true}, {emoji:'🆙', name:'UP! button', visible: true}, {emoji:'🔘', name:'radio button', visible: true}, {emoji:'🔡', name:'input latin lowercase', visible: true}, {emoji:'🚾', name:'water closet', visible: true}, {emoji:'🔈', name:'speaker low volume', visible: true}, {emoji:'🎦', name:'cinema', visible: true}, {emoji:'↖️', name:'up-left arrow', visible: true}, {emoji:'🈹', name:'Japanese “discount” button', visible: true}, {emoji:'🌐', name:'globe with meridians', visible: true}, {emoji:'㊗️', name:'Japanese “congratulations” button', visible: true}, {emoji:'⤴️', name:'right arrow curving up', visible: true}, {emoji:'↕️', name:'up-down arrow', visible: true}, {emoji:'🈁', name:'Japanese “here” button', visible: true}, {emoji:'➗', name:'divide', visible: true}, {emoji:'™️', name:'trade mark', visible: true}, {emoji:'⏪', name:'fast reverse button', visible: true}, {emoji:'3️⃣', name:'keycap: 3', visible: true}, {emoji:'7️⃣', name:'keycap: 7', visible: true}, {emoji:'6️⃣', name:'keycap: 6', visible: true}, {emoji:'🔙', name:'BACK arrow', visible: true}, {emoji:'↘️', name:'down-right arrow', visible: true}, {emoji:'🚼', name:'baby symbol', visible: true}, {emoji:'9️⃣', name:'keycap: 9', visible: true}, {emoji:'⬇️', name:'down arrow', visible: true}, {emoji:'↙️', name:'down-left arrow', visible: true}, {emoji:'⏫', name:'fast up button', visible: true}, {emoji:'💲', name:'heavy dollar sign', visible: true}, {emoji:'➡️', name:'right arrow', visible: true}, {emoji:'⤵️', name:'right arrow curving down', visible: true}, {emoji:'ℹ️', name:'information', visible: true}, {emoji:'⏬', name:'fast down button', visible: true}, {emoji:'🔼', name:'upwards button', visible: true}, {emoji:'🔁', name:'repeat button', visible: true}, {emoji:'🎵', name:'musical note', visible: true}, {emoji:'2️⃣', name:'keycap: 2', visible: true}, {emoji:'5️⃣', name:'keycap: 5', visible: true}, {emoji:'🆗', name:'OK button', visible: true}, {emoji:'🔤', name:'input latin letters', visible: true}, {emoji:'🔆', name:'bright button', visible: true}, {emoji:'0️⃣', name:'keycap: 0', visible: true}, {emoji:'💹', name:'chart increasing with yen', visible: true}, {emoji:'🔢', name:'input numbers', visible: true}, {emoji:'⚠️', name:'warning', visible: true}, {emoji:'📶', name:'antenna bars', visible: true}, {emoji:'🆓', name:'FREE button', visible: true}, {emoji:'4️⃣', name:'keycap: 4', visible: true}, {emoji:'*️⃣', name:'keycap: *', visible: true}, {emoji:'⬅️', name:'left arrow', visible: true}, {emoji:'🚻', name:'restroom', visible: true}, {emoji:'8️⃣', name:'keycap: 8', visible: true}, {emoji:'↪️', name:'left arrow curving right', visible: true}, {emoji:'🔜', name:'SOON arrow', visible: true}, {emoji:'🔶', name:'large orange diamond', visible: true}, {emoji:'🔽', name:'downwards button', visible: true}, {emoji:'➿', name:'double curly loop', visible: true}, {emoji:'🔳', name:'white square button', visible: true}, {emoji:'🔝', name:'TOP arrow', visible: true}, {emoji:'Ⓜ️', name:'circled M', visible: true} 152 | ], 153 | travelAndPlaces: [{emoji:'🚌', name:'bus', visible: true}, {emoji:'🛴', name:'kick scooter', visible: true}, {emoji:'🚗', name:'automobile', visible: true}, {emoji:'🚕', name:'taxi', visible: true}, {emoji:'🚟', name:'suspension railway', visible: true}, {emoji:'🛫', name:'airplane departure', visible: true}, {emoji:'🚙', name:'sport utility vehicle', visible: true}, {emoji:'🚉', name:'station', visible: true}, {emoji:'🛬', name:'airplane arrival', visible: true}, {emoji:'🛶', name:'canoe', visible: true}, {emoji:'🚜', name:'tractor', visible: true}, {emoji:'🚒', name:'fire engine', visible: true}, {emoji:'🚲', name:'bicycle', visible: true}, {emoji:'💺', name:'seat', visible: true}, {emoji:'🚛', name:'articulated lorry', visible: true}, {emoji:'🦗', name:'cricket', visible: true}, {emoji:'🎠', name:'carousel horse', visible: true}, {emoji:'🚇', name:'metro', visible: true}, {emoji:'🚚', name:'delivery truck', visible: true}, {emoji:'🚑', name:'ambulance', visible: true}, {emoji:'🚐', name:'minibus', visible: true}, {emoji:'🚈', name:'light rail', visible: true}, {emoji:'🏬', name:'department store', visible: true}, {emoji:'🕍', name:'synagogue', visible: true}, {emoji:'🚓', name:'police car', visible: true}, {emoji:'🛷', name:'sled', visible: true}, {emoji:'🚥', name:'horizontal traffic light', visible: true}, {emoji:'🚋', name:'tram car', visible: true}, {emoji:'🏩', name:'love hotel', visible: true}, {emoji:'🚂', name:'locomotive', visible: true}, {emoji:'🗼', name:'Tokyo tower', visible: true}, {emoji:'🏯', name:'Japanese castle', visible: true}, {emoji:'🌋', name:'volcano', visible: true}, {emoji:'✈️', name:'airplane', visible: true}, {emoji:'🚊', name:'tram', visible: true}, {emoji:'🚎', name:'trolleybus', visible: true}, {emoji:'🚆', name:'train', visible: true}, {emoji:'🗾', name:'map of Japan', visible: true}, {emoji:'🌅', name:'sunrise', visible: true}, {emoji:'🏦', name:'bank', visible: true}, {emoji:'🚀', name:'rocket', visible: true}, {emoji:'🌆', name:'cityscape at dusk', visible: true}, {emoji:'🚅', name:'bullet train', visible: true}, {emoji:'🚘', name:'oncoming automobile', visible: true}, {emoji:'🛸', name:'flying saucer', visible: true}, {emoji:'🎇', name:'sparkler', visible: true}, {emoji:'🎑', name:'moon viewing ceremony', visible: true}, {emoji:'🎆', name:'fireworks', visible: true}, {emoji:'🚢', name:'ship', visible: true}, {emoji:'🏢', name:'office building', visible: true}, {emoji:'🎡', name:'ferris wheel', visible: true}, {emoji:'🚤', name:'speedboat', visible: true}, {emoji:'💒', name:'wedding', visible: true}, {emoji:'🏪', name:'convenience store', visible: true}, {emoji:'🛵', name:'motor scooter', visible: true}, {emoji:'🚃', name:'railway car', visible: true}, {emoji:'🚡', name:'aerial tramway', visible: true}, {emoji:'🏥', name:'hospital', visible: true}, {emoji:'🏫', name:'school', visible: true}, {emoji:'🚔', name:'oncoming police car', visible: true}, {emoji:'🚠', name:'mountain cableway', visible: true}, {emoji:'🚧', name:'construction', visible: true}, {emoji:'🚞', name:'mountain railway', visible: true}, {emoji:'🌃', name:'night with stars', visible: true}, {emoji:'🚏', name:'bus stop', visible: true}, {emoji:'🌄', name:'sunrise over mountains', visible: true}, {emoji:'🌁', name:'foggy', visible: true}, {emoji:'🕋', name:'kaaba', visible: true}, {emoji:'🚖', name:'oncoming taxi', visible: true}, {emoji:'🗿', name:'moai', visible: true}, {emoji:'🚍', name:'oncoming bus', visible: true}, {emoji:'🏭', name:'factory', visible: true}, {emoji:'🚝', name:'monorail', visible: true}, {emoji:'🕌', name:'mosque', visible: true}, {emoji:'🏡', name:'house with garden', visible: true}, {emoji:'🎢', name:'roller coaster', visible: true}, {emoji:'🏰', name:'castle', visible: true}, {emoji:'🗻', name:'mount fuji', visible: true}, {emoji:'🏠', name:'house', visible: true}, {emoji:'🗽', name:'Statue of Liberty', visible: true}, {emoji:'🏤', name:'post office', visible: true}, {emoji:'🌠', name:'shooting star', visible: true}, {emoji:'🚦', name:'vertical traffic light', visible: true}, {emoji:'🥌', name:'curling stone', visible: true}, {emoji:'🚄', name:'high-speed train', visible: true}, {emoji:'🏣', name:'Japanese post office', visible: true}, {emoji:'🌉', name:'bridge at night', visible: true}, {emoji:'🏨', name:'hotel', visible: true}, {emoji:'🚁', name:'helicopter', visible: true}, {emoji:'🌇', name:'sunset', visible: true}, {emoji:'🌌', name:'milky way', visible: true}, {emoji:'🚨', name:'police car light', visible: true} 154 | ], 155 | activity: [{emoji:'🎣', name:'fishing pole', visible: true}, {emoji:'🥅', name:'goal net', visible: true}, {emoji:'🏓', name:'ping pong', visible: true}, {emoji:'🏹', name:'bow and arrow', visible: true}, {emoji:'🎸', name:'guitar', visible: true}, {emoji:'🏂', name:'snowboarder', visible: true}, {emoji:'🎿', name:'skis', visible: true}, {emoji:'🏄', name:'person surfing', visible: true}, {emoji:'🥊', name:'boxing glove', visible: true}, {emoji:'🎲', name:'game die', visible: true}, {emoji:'🎤', name:'microphone', visible: true}, {emoji:'🎪', name:'circus tent', visible: true}, {emoji:'🎳', name:'bowling', visible: true}, {emoji:'🤺', name:'person fencing', visible: true}, {emoji:'🎰', name:'slot machine', visible: true}, {emoji:'🎻', name:'violin', visible: true}, {emoji:'🏑', name:'field hockey', visible: true}, {emoji:'🏉', name:'rugby football', visible: true}, {emoji:'🏈', name:'american football', visible: true}, {emoji:'🏅', name:'sports medal', visible: true}, {emoji:'🎼', name:'musical score', visible: true}, {emoji:'🎧', name:'headphone', visible: true}, {emoji:'🏇', name:'horse racing', visible: true}, {emoji:'🥉', name:'3rd place medal', visible: true}, {emoji:'🎯', name:'direct hit', visible: true}, {emoji:'🥁', name:'drum', visible: true}, {emoji:'🎱', name:'pool 8 ball', visible: true}, {emoji:'🚣', name:'person rowing boat', visible: true}, {emoji:'🚵', name:'person mountain biking', visible: true}, {emoji:'🏌️‍♀️', name:'woman golfing', visible: true}, {emoji:'🏊', name:'person swimming', visible: true}, {emoji:'🏸', name:'badminton', visible: true}, {emoji:'🏒', name:'ice hockey', visible: true}, {emoji:'🏆', name:'trophy', visible: true}, {emoji:'🏋️‍♀️', name:'woman lifting weights', visible: true}, {emoji:'⛹️‍♀️', name:'woman bouncing ball', visible: true}, {emoji:'🏐', name:'volleyball', visible: true}, {emoji:'🏀', name:'basketball', visible: true}, {emoji:'🚴', name:'person biking', visible: true}, {emoji:'🎽', name:'running shirt', visible: true}, {emoji:'🎮', name:'video game', visible: true}, {emoji:'🎹', name:'musical keyboard', visible: true}, {emoji:'🥇', name:'1st place medal', visible: true}, {emoji:'🥋', name:'martial arts uniform', visible: true}, {emoji:'🎾', name:'tennis', visible: true}, {emoji:'🎷', name:'saxophone', visible: true}, {emoji:'🏏', name:'cricket game', visible: true}, {emoji:'🎭', name:'performing arts', visible: true}, {emoji:'🎺', name:'trumpet', visible: true}, {emoji:'🎬', name:'clapper board', visible: true}, {emoji:'🥈', name:'2nd place medal', visible: true}, {emoji:'🎫', name:'ticket', visible: true}, {emoji:'🎨', name:'artist palette', visible: true} 156 | ], 157 | }, 158 | // ---Emoji array end--- 159 | } 160 | }, 161 | 162 | methods: { 163 | 164 | // ---Function to activate the clicked chat--- 165 | showChat(index){ 166 | this.activeChat = index; 167 | }, 168 | 169 | // ---Function to get hours and minute from the full date in the array--- 170 | whatTime(date){ 171 | const dateTimeParts = date.split(' '); 172 | const timePart = dateTimeParts[1]; 173 | const timeParts = timePart.split(':'); 174 | const hours = timeParts[0]; 175 | const minutes = timeParts[1]; 176 | const result = hours + ':' + minutes; 177 | return result; 178 | }, 179 | 180 | // ---Function to search by name in the chat list--- 181 | searchChat(){ 182 | for(let i = 0; i < this.contacts.length; i++){ 183 | if(this.contacts[i].name.toLowerCase().includes(this.search.toLowerCase())){ 184 | this.contacts[i].visible = true; 185 | } else{ 186 | this.contacts[i].visible = false; 187 | } 188 | } 189 | }, 190 | 191 | // ---Function to search emoji by name--- 192 | searchEmoji(){ 193 | for(let i = 0; i < this.emojis.smilyAndPeople.length; i++){ 194 | if(this.emojis.smilyAndPeople[i].name.toLowerCase().includes(this.searchEmojiInput.toLowerCase())){ 195 | this.emojis.smilyAndPeople[i].visible = true; 196 | } else{ 197 | this.emojis.smilyAndPeople[i].visible = false; 198 | } 199 | } 200 | for(let i = 0; i < this.emojis.animalsAndNature.length; i++){ 201 | if(this.emojis.animalsAndNature[i].name.toLowerCase().includes(this.searchEmojiInput.toLowerCase())){ 202 | this.emojis.animalsAndNature[i].visible = true; 203 | } else{ 204 | this.emojis.animalsAndNature[i].visible = false; 205 | } 206 | } 207 | for(let i = 0; i < this.emojis.foodAndDrink.length; i++){ 208 | if(this.emojis.foodAndDrink[i].name.toLowerCase().includes(this.searchEmojiInput.toLowerCase())){ 209 | this.emojis.foodAndDrink[i].visible = true; 210 | } else{ 211 | this.emojis.foodAndDrink[i].visible = false; 212 | } 213 | } 214 | for(let i = 0; i < this.emojis.activity.length; i++){ 215 | if(this.emojis.activity[i].name.toLowerCase().includes(this.searchEmojiInput.toLowerCase())){ 216 | this.emojis.activity[i].visible = true; 217 | } else{ 218 | this.emojis.activity[i].visible = false; 219 | } 220 | } 221 | for(let i = 0; i < this.emojis.travelAndPlaces.length; i++){ 222 | if(this.emojis.travelAndPlaces[i].name.toLowerCase().includes(this.searchEmojiInput.toLowerCase())){ 223 | this.emojis.travelAndPlaces[i].visible = true; 224 | } else{ 225 | this.emojis.travelAndPlaces[i].visible = false; 226 | } 227 | } 228 | for(let i = 0; i < this.emojis.objects.length; i++){ 229 | if(this.emojis.objects[i].name.toLowerCase().includes(this.searchEmojiInput.toLowerCase())){ 230 | this.emojis.objects[i].visible = true; 231 | } else{ 232 | this.emojis.objects[i].visible = false; 233 | } 234 | } 235 | for(let i = 0; i < this.emojis.symbols.length; i++){ 236 | if(this.emojis.symbols[i].name.toLowerCase().includes(this.searchEmojiInput.toLowerCase())){ 237 | this.emojis.symbols[i].visible = true; 238 | } else{ 239 | this.emojis.symbols[i].visible = false; 240 | } 241 | } 242 | for(let i = 0; i < this.emojis.flags.length; i++){ 243 | if(this.emojis.flags[i].name.toLowerCase().includes(this.searchEmojiInput.toLowerCase())){ 244 | this.emojis.flags[i].visible = true; 245 | } else{ 246 | this.emojis.flags[i].visible = false; 247 | } 248 | } 249 | }, 250 | 251 | // ---Function to delete the message--- 252 | deleteMsg(msg){ 253 | const messageIndex = this.contacts[this.activeChat].messages.indexOf(msg); 254 | this.contacts[this.activeChat].messages.splice(messageIndex, 1); 255 | }, 256 | 257 | // ---Gpt3.5 AI message response to our message--- 258 | async answerAI(msg, showedchat){ 259 | if(msg === undefined || msg === '' || (!msg.replace(/\s/g, '').length)){ 260 | // ---Does nothing in case there is no text or in case there is only spaces--- 261 | }else{ 262 | console.log('Elaboro una risposta..'); 263 | this.contacts[showedchat].messages.push({date: this.currentDate(), message: msg, status: 'sent'}); 264 | const chatbox = document.querySelector('.chat'); 265 | chatbox.scrollTop = chatbox.scrollHeight; 266 | const microphone = document.querySelector('.fa-microphone'); 267 | const send = document.querySelector('.fa-paper-plane'); 268 | microphone.classList.remove('deactive'); 269 | send.classList.remove('active'); 270 | this.newMsg = ''; 271 | this.emojivisible = false; 272 | const whoistexting = this.contacts[showedchat].name; 273 | const API_URL = "https://api.openai.com/v1/chat/completions"; 274 | const API_KEY = this.key; 275 | const MODEL = "gpt-3.5-turbo"; 276 | const temperature = 1; 277 | 278 | const response = await fetch(API_URL, { 279 | method: "POST", 280 | headers: { 281 | "Content-Type": "application/json", 282 | "Authorization": `Bearer ${API_KEY}` 283 | }, 284 | body: JSON.stringify({ 285 | model: MODEL, 286 | messages: [ 287 | { 288 | role:"user", 289 | content: `Rispondi al messaggio: ${msg}, mettendoti nei panni di ${whoistexting}, un amico della persona cha ha fatto la domanda. La risposta dev'essere di massimo 200 caratteri`, 290 | } 291 | ], 292 | temperature: temperature, 293 | // ---Maximum token reply, longer = more words, shorter = less words--- 294 | max_tokens: 200, 295 | }), 296 | }); 297 | const data = await response.json(); 298 | if(data.choices === undefined){ 299 | console.log(`La tua key non è valida/corretta. Openai non è in grado di generare una risposta al tuo messaggio. Verrà data la risposta standard`); 300 | setTimeout(()=>{this.contacts[showedchat].messages.push({date: this.currentDate(), message: this.randomReply(), status: 'received'})}, 1000); 301 | setTimeout(()=>{chatbox.scrollTop = chatbox.scrollHeight;}, 1000); 302 | }else{ 303 | const chatResponse = data.choices[0].message.content; 304 | console.log(chatResponse) 305 | this.contacts[showedchat].messages.push({date: this.currentDate(), message: chatResponse, status: 'received'}); 306 | chatbox.scrollTop = chatbox.scrollHeight; 307 | } 308 | }}, 309 | 310 | // ---Function to show the send button after there is some written text--- 311 | sendButton(msg){ 312 | const microphone = document.querySelector('.fa-microphone'); 313 | const send = document.querySelector('.fa-paper-plane'); 314 | if(msg.length >= 1){ 315 | microphone.classList.add('deactive'); 316 | send.classList.add('active'); 317 | }else{ 318 | microphone.classList.remove('deactive'); 319 | send.classList.remove('active'); 320 | } 321 | }, 322 | 323 | // ---Get a random response--- 324 | randomReply(){ 325 | const reply = ['Ok', 'Tutto bene tu?', 'Non mi ricordo chi sei, ci conosciamo?', 'Sto guidando, ti rispondo dopo', 'Ho il telefono che sta morendo, chiamami', 'Ciao', 'Concordo']; 326 | const randomNum = Math.floor(Math.random() * reply.length); 327 | const answer = reply[randomNum]; 328 | return answer 329 | }, 330 | 331 | // ---Function to delete the a whole chat--- 332 | deleteChat(){ 333 | this.contacts.splice(this.activeChat, 1); 334 | this.blank = true; 335 | if(this.activeChat == (this.contacts.length)){ 336 | this.activeChat = 0; 337 | } 338 | }, 339 | 340 | // ---Function to delete all the messages from chat--- 341 | deleteMessages(){ 342 | let howmany = this.contacts[this.activeChat].messages.length; 343 | this.contacts[this.activeChat].messages.splice(0, howmany); 344 | }, 345 | 346 | // ---Function to show a loader for 1s when page is loaded--- 347 | loader(){ 348 | setTimeout(()=>{this.timedLoader = 'd-none'}, 1000); 349 | }, 350 | 351 | // ---Function to toggle darkmode--- 352 | darkMode(){ 353 | this.isdark = !this.isdark; 354 | if (this.isdark === true) { 355 | document.documentElement.classList.remove("light") 356 | document.documentElement.classList.add("dark") 357 | window.localStorage.setItem('mode', 'dark'); 358 | } else { 359 | document.documentElement.classList.remove("dark") 360 | document.documentElement.classList.add("light") 361 | window.localStorage.setItem('mode', 'light'); 362 | } 363 | }, 364 | 365 | // ---Function to get the current date--- 366 | currentDate(){ 367 | let currentdate = new Date(); 368 | // ---Write the date in the same form as the array--- 369 | currentdate = currentdate.getDate()+'/'+currentdate.getMonth()+'/'+currentdate.getFullYear()+' '+(('0'+currentdate.getHours()).slice(-2))+':'+(('0'+currentdate.getMinutes()).slice(-2))+':'+currentdate.getSeconds() 370 | return currentdate 371 | }, 372 | 373 | // ---Function to add a new chat--- 374 | newChat(){ 375 | const newchatuser = prompt('A chi vuoi scrivere?') 376 | this.contacts.push({name: newchatuser, 377 | avatar: './img/avatar_new.jpg', 378 | visible: true, 379 | messages: [ 380 | ]}); 381 | this.activeChat = this.contacts.length - 1; 382 | this.blank = false; 383 | }, 384 | 385 | // ---Function to check if the active chat have messages in it--- 386 | checkArray(){ 387 | let isthere; 388 | if(( this.contacts[this.activeChat].messages.length) === 0){ 389 | isthere = false; 390 | }else{ 391 | isthere = true; 392 | } 393 | return isthere; 394 | }, 395 | 396 | // ---Function to check if the chat have messages in it--- 397 | checkArraySingle(index){ 398 | let isthere; 399 | if(( this.contacts[index].messages.length) === 0){ 400 | isthere = false; 401 | }else{ 402 | isthere = true; 403 | } 404 | return isthere; 405 | }, 406 | 407 | // ---Function to add selected emoji to the text input--- 408 | addEmoji(emoji){ 409 | this.newMsg += emoji; 410 | }, 411 | 412 | // ---Focus on the input to send messages--- 413 | focusMsg(){ 414 | let focus = document.getElementById('inputmsg') 415 | focus.focus() 416 | }, 417 | }, 418 | }).mount ("#app") 419 | 420 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* ---General class--- */ 2 | .my-bg-grey{ 3 | background-color: #eaeaea; 4 | } 5 | 6 | body{ 7 | background: linear-gradient(180deg, #009688 15%, #d9dbd2 15%); 8 | height: 100vh; 9 | } 10 | 11 | #app{ 12 | width: 80vw; 13 | height: 95vh; 14 | background-color: white; 15 | } 16 | 17 | .br{ 18 | border: 1px solid black; 19 | } 20 | 21 | .leftsection, .rightsection{ 22 | height: 95vh; 23 | } 24 | 25 | .profile, .userchat, .sendtext{ 26 | height: 8%; 27 | } 28 | 29 | .getnotify{ 30 | height: 9%; 31 | background-color: #8edafc; 32 | } 33 | 34 | .chats{ 35 | height: 83%; 36 | } 37 | 38 | .chat{ 39 | height: 84%; 40 | background-image: url('../img/mine.jpg'); 41 | } 42 | 43 | .avatar{ 44 | border-radius: 50%; 45 | height: 55px; 46 | aspect-ratio: 1; 47 | margin: 0.6rem; 48 | } 49 | 50 | i{ 51 | font-size: 25px; 52 | color: #b1b1b1; 53 | margin: 10px; 54 | cursor: pointer; 55 | } 56 | 57 | .bell{ 58 | background-color: white; 59 | border-radius: 50%; 60 | height: 55px; 61 | aspect-ratio: 1; 62 | margin: 1rem; 63 | } 64 | 65 | i.fa-bell-slash{ 66 | color: #8edafc; 67 | } 68 | 69 | .notification{ 70 | font-size: 0.9rem; 71 | text-decoration: underline; 72 | } 73 | 74 | .sendtext{ 75 | background-color: #f3eeea; 76 | } 77 | 78 | i.fa-microphone, i.fa-face-smile{ 79 | color: #6b7275; 80 | font-size: 30px; 81 | } 82 | 83 | .sendtext input{ 84 | background-color: white; 85 | width: 100%; 86 | border: none; 87 | padding: 15px; 88 | } 89 | 90 | .searchchat{ 91 | background-color: #fafafa; 92 | } 93 | .searchchat input{ 94 | background-color: white; 95 | width: 100%; 96 | border: none; 97 | font-size: 15px; 98 | padding-left: 5px; 99 | } 100 | 101 | .searchchat i{ 102 | background-color: white; 103 | font-size: 15px; 104 | padding: 10px 30px; 105 | } 106 | 107 | p.time{ 108 | font-size: 0.8rem; 109 | } 110 | 111 | 112 | .chat div{ 113 | width: 300px; 114 | padding: 12px 15px; 115 | margin: 10px 100px; 116 | border-radius: 10px; 117 | background-color: #8edafc; 118 | position: relative; 119 | } 120 | 121 | .chat .sent{ 122 | background-color: #d5f9ba; 123 | align-self: end; 124 | } 125 | 126 | .chat .received{ 127 | background-color: #ffffff; 128 | align-self: start; 129 | } 130 | 131 | .msgtime{ 132 | position: absolute; 133 | font-size: 10px; 134 | bottom: 5px; 135 | right: 10px; 136 | } 137 | 138 | div.activeuser{ 139 | cursor: pointer; 140 | } 141 | 142 | .contact-tab{ 143 | display: none; 144 | } 145 | 146 | .contact-tab.visible{ 147 | display: block; 148 | } 149 | 150 | .activeuser.active{ 151 | background-color: #e9ebeb; 152 | } 153 | 154 | .activeuser p{ 155 | font-size: 0.8rem; 156 | } 157 | 158 | .chat i{ 159 | position: absolute; 160 | top: 5px; 161 | right: 7px; 162 | display: none; 163 | } 164 | 165 | .chat div:hover i{ 166 | display: block; 167 | } 168 | 169 | .chat i::after{ 170 | content: none; 171 | } -------------------------------------------------------------------------------- /img/avatar_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/img/avatar_1.jpg -------------------------------------------------------------------------------- /img/avatar_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/img/avatar_2.jpg -------------------------------------------------------------------------------- /img/avatar_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/img/avatar_3.jpg -------------------------------------------------------------------------------- /img/avatar_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/img/avatar_4.jpg -------------------------------------------------------------------------------- /img/avatar_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/img/avatar_5.jpg -------------------------------------------------------------------------------- /img/avatar_6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/img/avatar_6.jpg -------------------------------------------------------------------------------- /img/avatar_7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/img/avatar_7.jpg -------------------------------------------------------------------------------- /img/avatar_8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/img/avatar_8.jpg -------------------------------------------------------------------------------- /img/avatar_io.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/img/avatar_io.jpg -------------------------------------------------------------------------------- /img/mine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GabrieleMajocchi/vue-boolzapp/d2c37c41c0b14fa149a78de135af1563493a5fa3/img/mine.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Boolzapp 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 |
Sofia
34 |
35 |
36 | 37 | 38 | 39 |
40 |
41 | 42 |
43 |
44 | 45 |
46 |
47 |

Ricevi notifiche di nuovi messaggi

48 |

Attiva notifiche desktop

49 |
50 |
51 | 52 |
53 | 54 |
55 | 56 | 57 |
58 | 59 | 60 |
61 |
62 |
63 | chat.name 64 |
65 |
{{chat.name}}
66 |

Ultimo messaggio: {{chat.messages[chat.messages.length - 1].message}}

67 |
68 |
69 |

{{whatTime(chat.messages[chat.messages.length - 1].date)}}

70 |
71 |
72 | 73 |
74 |
75 | 76 | 77 |
78 | 79 |
80 |
81 | 82 |
83 |
{{contacts[activeChat].name}}
84 |

Ultimo accesso oggi alle {{whatTime(contacts[activeChat].messages[contacts[activeChat].messages.length - 1].date)}}

85 |
86 |
87 |
88 | 89 | 90 | 91 |
92 |
93 | 94 |
95 | 96 |
97 | {{message.message}} 98 | {{whatTime(message.date)}} 99 | 100 | 104 |
105 |
106 | 107 |
108 | 109 | 110 | 111 |
112 |
113 |
114 |
115 | 116 | 117 | -------------------------------------------------------------------------------- /js/myscript.js: -------------------------------------------------------------------------------- 1 | // ---Vue app--- 2 | const {createApp} = Vue 3 | createApp ({ 4 | data () { 5 | return{ 6 | // ---Variables--- 7 | activeChat: 0, 8 | search: '', 9 | // ---Contacts array start--- 10 | contacts: [ 11 | {name: 'Michele', 12 | avatar: './img/avatar_1.jpg', 13 | visible: true, 14 | messages: [ 15 | {date: '10/01/2020 15:30:55', 16 | message: 'Hai portato a spasso il cane?', 17 | status: 'sent'}, 18 | {date: '10/01/2020 15:50:00', 19 | message: 'Ricordati di stendere i panni', 20 | status: 'sent'}, 21 | {date: '10/01/2020 16:15:22', 22 | message: 'Tutto fatto!', 23 | status: 'received'} 24 | ], 25 | }, 26 | {name: 'Fabio', 27 | avatar: './img/avatar_2.jpg', 28 | visible: true, 29 | messages: [ 30 | {date: '20/03/2020 16:30:00', 31 | message: 'Ciao come stai?', 32 | status: 'sent'}, 33 | {date: '20/03/2020 16:30:55', 34 | message: 'Bene grazie! Stasera ci vediamo?', 35 | status: 'received'}, 36 | {date: '20/03/2020 16:35:00', 37 | message: 'Mi piacerebbe ma devo andare a fare la spesa.', 38 | status: 'sent'} 39 | ], 40 | }, 41 | {name: 'Samuele', 42 | avatar: './img/avatar_3.jpg', 43 | visible: true, 44 | messages: [ 45 | {date: '28/03/2020 10:10:40', 46 | message: 'La Marianna va in campagna', 47 | status: 'received'}, 48 | {date: '28/03/2020 10:20:10', 49 | message: 'Sicuro di non aver sbagliato chat?', 50 | status: 'sent'}, 51 | {date: '28/03/2020 16:15:22', 52 | message: 'Ah scusa!', 53 | status: 'received'} 54 | ], 55 | }, 56 | {name: 'Alessandro B.', 57 | avatar: './img/avatar_4.jpg', 58 | visible: true, 59 | messages: [ 60 | {date: '10/01/2020 15:30:55', 61 | message: 'Lo sai che ha aperto una nuova pizzeria?', 62 | status: 'sent'}, 63 | {date: '10/01/2020 15:50:00', 64 | message: 'Si, ma preferirei andare al cinema', 65 | status: 'received'} 66 | ], 67 | }, 68 | {name: 'Alessandro L.', 69 | avatar: './img/avatar_5.jpg', 70 | visible: true, 71 | messages: [ 72 | {date: '10/01/2020 15:30:55', 73 | message: 'Ricordati di chiamare la nonna', 74 | status: 'sent'}, 75 | {date: '10/01/2020 15:50:00', 76 | message: 'Va bene, stasera la sento', 77 | status: 'received'} 78 | ], 79 | }, 80 | {name: 'Claudia', 81 | avatar: './img/avatar_6.jpg', 82 | visible: true, 83 | messages: [ 84 | {date: '10/01/2020 15:30:55', 85 | message: 'Ciao Claudia, hai novità?', 86 | status: 'sent'}, 87 | {date: '10/01/2020 15:50:00', 88 | message: 'Non ancora', 89 | status: 'received'}, 90 | {date: '10/01/2020 15:51:00', 91 | message: 'Nessuna nuova, buona nuova', 92 | status: 'sent'} 93 | ], 94 | }, 95 | {name: 'Federico', 96 | avatar: './img/avatar_7.jpg', 97 | visible: true, 98 | messages: [ 99 | {date: '10/01/2020 15:30:55', 100 | message: 'Fai gli auguri a Martina che è il suo compleanno!', 101 | status: 'sent'}, 102 | {date: '10/01/2020 15:50:00', 103 | message: 'Grazie per avermelo ricordato, le scrivo subito!', 104 | status: 'received'} 105 | ], 106 | }, 107 | {name: 'Davide', 108 | avatar: './img/avatar_8.jpg', 109 | visible: true, 110 | messages: [ 111 | {date: '10/01/2020 15:30:55', 112 | message: 'Ciao, andiamo a mangiare la pizza stasera?', 113 | status: 'received'}, 114 | {date: '10/01/2020 15:50:00', 115 | message: 'No, l\'ho già mangiata ieri, ordiniamo sushi!', 116 | status: 'sent'}, 117 | {date: '10/01/2020 15:51:00', 118 | message: 'OK!!', 119 | status: 'received'} 120 | ], 121 | }, 122 | ], 123 | // ---Contacts array end--- 124 | 125 | } 126 | }, 127 | 128 | methods: { 129 | // ---Function to activate the clicked chat--- 130 | showChat(index){ 131 | this.activeChat = index; 132 | }, 133 | // ---Function to get hours and minute from the full date in the array--- 134 | whatTime(date){ 135 | const dateTimeParts = date.split(' '); 136 | const timePart = dateTimeParts[1]; 137 | const timeParts = timePart.split(':'); 138 | const hours = timeParts[0]; 139 | const minutes = timeParts[1]; 140 | const result = hours + ':' + minutes; 141 | return result; 142 | }, 143 | // ---Function to send the message that user wrote in the chat, will also write a reply--- 144 | addMsg(msg, showedchat){ 145 | if(msg === undefined || msg === ''){ 146 | // ---Does nothing in case there is no text--- 147 | }else{ 148 | let currentdate = new Date(); 149 | // ---Write the date in the same form as the array--- 150 | currentdate = currentdate.getDate()+'/'+currentdate.getMonth()+'/'+currentdate.getFullYear()+' '+(('0'+currentdate.getHours()).slice(-2))+':'+(('0'+currentdate.getMinutes()).slice(-2))+':'+currentdate.getSeconds(); 151 | this.contacts[showedchat].messages.push({date: currentdate, message: msg, status: 'sent'}); 152 | // ---Write the reply after 1000ms--- 153 | setTimeout(()=>{this.contacts[showedchat].messages.push({date: currentdate, message: 'Ok', status: 'received'})}, 1000); 154 | this.newMsg = ''; 155 | } 156 | }, 157 | // ---Function to search by name in the chat list--- 158 | searchChat(){ 159 | for(let i = 0; i < this.contacts.length; i++){ 160 | if(this.contacts[i].name.toLowerCase().includes(this.search.toLowerCase())){ 161 | this.contacts[i].visible = true; 162 | } else{ 163 | this.contacts[i].visible = false; 164 | } 165 | } 166 | }, 167 | // ---Function to delete the message--- 168 | deleteMsg(msg){ 169 | const messageIndex = this.contacts[this.activeChat].messages.indexOf(msg); 170 | this.contacts[this.activeChat].messages.splice(messageIndex, 1); 171 | } 172 | }, 173 | }).mount ("#app") 174 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | console.log('test'); 2 | -------------------------------------------------------------------------------- /test2.js: -------------------------------------------------------------------------------- 1 | console.log('test 2'); 2 | -------------------------------------------------------------------------------- /test3.js: -------------------------------------------------------------------------------- 1 | console.log('Yolo'); 2 | --------------------------------------------------------------------------------