-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (124 loc) · 4.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Messenger</title>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="flex flex-col justify-center items-center mt-1 mb-40">
<form class="w-full max-w-lg">
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-12/12 px-3">
<img
class="w-full"
src="src/images/signature.png"
alt="Trebla Signature Image"
/>
</div>
<div class="w-full md:w-12/12 px-3 mb-10">
<h1
class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white"
>
Messenger
</h1>
</div>
<div class="w-full md:w-12/12 px-3 mb-6 md:mb-6">
<label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="platform"
>
Platform
</label>
<div class="relative">
<select
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="platform"
disabled
>
<option value="whatsapp">WhatsApp</option>
<option value="facebook">Facebook</option>
<option value="instagram">Instagram</option>
</select>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
>
<svg
class="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</div>
</div>
</div>
<div class="w-full md:w-12/12 px-3 mb-6 md:mb-0">
<label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="phone_number"
>
Phone Number
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
id="phone_number"
name="phone_number"
type="text"
placeholder="+55 31 99999999"
/>
<p
class="text-red-500 text-xs italic hidden"
id="phone_number_error"
>
Please fill out this field.
</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full px-3">
<label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="message"
>
Message
</label>
<textarea
id="message"
name="message"
rows="4"
minlength="0"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
placeholder="Write your thoughts here..."
></textarea>
<p class="text-gray-600 text-xs italic">
You can change the message on the selected platform if you want
to.
</p>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-2">
<div class="w-full px-3">
<button
type="button"
id="send_message"
class="appearance-none block w-full bg-blue-200 text-blue-700 border border-blue-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
onclick="sendMessage()"
>
Send message
</button>
</div>
</div>
</form>
</div>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="src/scripts/main.js"></script>
</body>
</html>