-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
104 lines (82 loc) · 3.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="CSS/universal.css">
<link rel="stylesheet" href="CSS/index.css">
<script src="https://kit.fontawesome.com/5c7edfd842.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Frontend Mentor | [Challenge Name Here]</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="app">
<div class="mobile-container">
<div class="mobile-container--inner-container">
<div class="mobile-header">
<div class="mobile-header--elements-container">
<i class="fas fa-chevron-left arrow"></i>
<div class="mobile-header--element-profile">
<img src="images/avatar.jpg" alt="" class="mobile-header--user-photo">
<div class="element-profile-container">
<h2 class="element-profile-user-name">
Samuel Green
</h2>
<span class="element-profile-user-actual-status">Avaliable to Walk</span>
</div>
</div>
<i class="fas fa-ellipsis-v options-button"></i>
</div>
</div>
<div class="mobile-body-container">
<div class="mobile-message-container">
<div class="mobile-msg-container" v-for="message in messages"
:class="{'other-user' : message.mine == false, 'my-user' : message.mine == true, 'img-container' : message.photos != undefined,
promo : message.promo == true }">
<p v-if="message.text != 'undefined' && message.promo == false" class="mobile-msg-text">
{{message.text}}
</p>
<img v-if="message.photos != 'undefined'" v-for="photo in message.photos" :src="photo"
class="image-element" alt="photo">
<input v-if="message.promo == true" type="checkbox" class="mobile-input-radio">
<p v-if="message.promo == true" class="mobile-msg-text">
{{message.text}}
</p>
<h2 v-if="message.promo == true" class="mobile-h2-price">${{message.price}}</h2>
</div>
</div>
<div class="mobile-input-container">
<input type="text" v-model="message" class="mobile-input" @change.enter.trim ="addNewNormalMessage" placeholder="Type a message…">
<button class="mobile-send-button">
<i class="fas fa-chevron-right arrow"></i>
</button>
</div>
</div>
</div>
</div>
<div class="content-container">
<h1 class="content-container--title">
Simple booking
</h1>
<p class="content-container--text">
Stay in touch with our dog walkers through the chat interface. This makes it easy to
discuss arrangements and make bookings. Once the walk has been completed you can rate
your walker and book again all through the chat.
</p>
</div>
</div>
<script src="./JS/index.js"></script>
</body>
</html>