-
Notifications
You must be signed in to change notification settings - Fork 0
/
WhatsAppStyle.html
231 lines (218 loc) · 11.8 KB
/
WhatsAppStyle.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/Bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/NewDesignStyle.css">
<link rel="stylesheet" href="css/CommonStyles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<title>Love Live! chat creator</title>
</head>
<body>
<!-- HEADER -->
<header class="header">
<nav class="container-fluid">
<div class="row align-items-center">
<div class="col-12 HeaderTitle">Love Live! chat creator</div>
</div>
</nav>
</header>
<!-- FORMULARIO -->
<!-- MESSAGE FORM -->
<div class="container-fluid text-center mb-5 mt-5" id="MessageFormContainer">
<div class="row justify-content-center">
<form action="javascript:void(0);" class="col-lg-4 col-sm-8 col-md-6 MessageForm" id="FormMessageContainer">
<div class="row justify-content-center margin mb-4">
<div class="col-lg-12 FormMessageTitle">Create message</div>
</div>
<div class="row align-items-end justify-content-center margin mb-1">
<img src="img/Hanamaru.png" class="col-2 col-lg-2 FormImgPersonaje" id="FormImgPersonaje"/>
<select name="SelectPersonaje" id="SelectP" class="col-6 col-lg-6 ml-1 FormSelectPersonaje" data-toggle="modal" data-target="#CharacterSelector">
<!-- Aqui van los personajes -->
</select>
</div>
<div class="row justify-content-center mb-1">
<input type="text" placeholder="Message" id="Message" class="col-8 col-lg-8 FormMessageText">
</div>
<div class="row justify-content-center">
<button id="BtnAddMessage" class="col-lg-5 col-5 FormAddMessageBtn">Send</button>
</div>
</form>
</div>
</div>
<!-- FORMULARIO -->
<!-- CONTENEDOR DEL CHAT -->
<div class="mb-4 container-fluid">
<div class="row justify-content-center"> <!-- Nuevo row -->
<div class="col-12 col-md-9 col-lg-6" id="ChatScreen"> <!-- Nuevo col -->
<!-- TITULO DEL CHAT -->
<div class="row justify-content-center" id="ChatContainerTitle">
<div class="col-12 TituloChat">
<div class="row align-items-center">
<div class="col-1 px-0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-30 -20 242 232" width="55" height="55">
<path fill="#DFE5E7" class="background" d="M105.946.25C164.318.25 211.64
47.596 211.64 106s-47.322 105.75-105.695 105.75C47.571 211.75.25 164.404.25
106S47.571.25 105.946.25z">
</path>
<path fill="#FFF" class="primary" d="M61.543 100.988c8.073 0 14.246-6.174
14.246-14.246s-6.173-14.246-14.246-14.246-14.246 6.173-14.246 14.246 6.174
14.246 14.246 14.246zm8.159 17.541a48.192 48.192 0 0 1 8.545-6.062c-4.174-2.217-9.641-3.859-16.704-3.859-21.844
0-28.492 15.67-28.492 15.67v8.073h26.181l.105-.248c.303-.713 3.164-7.151 10.365-13.574zm80.755-9.921c-6.854
0-12.21 1.543-16.336 3.661a48.223 48.223 0 0 1 8.903 6.26c7.201 6.422 10.061 12.861 10.364
13.574l.105.248h25.456v-8.073c-.001 0-6.649-15.67-28.492-15.67zm0-7.62c8.073 0 14.246-6.174
14.246-14.246s-6.173-14.246-14.246-14.246-14.246 6.173-14.246 14.246 6.173 14.246 14.246 14.246zm-44.093
3.21a23.21 23.21 0 0 0 4.464-.428c.717-.14 1.419-.315 2.106-.521 1.03-.309 2.023-.69 2.976-1.138a21.099
21.099 0 0 0 3.574-2.133 20.872 20.872 0 0 0 5.515-6.091 21.283 21.283 0 0 0 2.121-4.823 22.16 22.16 0 0 0
.706-3.193c.16-1.097.242-2.224.242-3.377s-.083-2.281-.242-3.377a22.778 22.778 0 0 0-.706-3.193 21.283
21.283 0 0 0-3.272-6.55 20.848 20.848 0 0 0-4.364-4.364 21.099 21.099 0 0 0-3.574-2.133 21.488 21.488 0 0
0-2.976-1.138 22.33 22.33 0 0 0-2.106-.521 23.202 23.202 0 0 0-4.464-.428c-12.299 0-21.705 9.405-21.705
21.704 0 12.299 9.406 21.704 21.705 21.704zM145.629 131a36.739 36.739 0 0 0-1.2-1.718 39.804 39.804 0 0
0-3.367-3.967 41.481 41.481 0 0 0-3.442-3.179 42.078 42.078 0 0 0-5.931-4.083 43.725 43.725 0 0
0-3.476-1.776c-.036-.016-.069-.034-.104-.05-5.692-2.581-12.849-4.376-21.746-4.376-8.898 0-16.055
1.795-21.746 4.376-.196.089-.379.185-.572.276a43.316 43.316 0 0 0-3.62 1.917 42.32 42.32 0 0 0-5.318
3.716 41.501 41.501 0 0 0-3.443 3.179 40.632 40.632 0 0 0-3.366 3.967c-.452.61-.851 1.186-1.2
1.718-.324.493-.6.943-.841 1.351l-.061.101a27.96 27.96 0 0
0-.622 1.119c-.325.621-.475.975-.475.975v11.692h82.53v-11.692s-.36-.842-1.158-2.195a35.417 35.417 0 0
0-.842-1.351z">
</path>
</svg>
</div>
<div class="col-8 ChatTitleContainer">
<!-- Este es el titulo del chat -->
<div id="ChatTitle" class="ChatTitle" contenteditable="true">
Click here to change the title
</div>
<div class="ChatMembers" id="ChatMembers">
Maki Nishikino, Hanamaru Kunikida, Honoka Kousaka, Umi Sonoda, Dia Kurosawa
</div>
</div>
<div class="col-1 px-0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -4 24 24" width="24" height="24"
style="color:white;">
<path fill="currentColor" d="M15.9 14.3H15l-.3-.3c1-1.1 1.6-2.7 1.6-4.3 0-3.7-3-6.7-6.7-6.7S3
6 3 9.7s3 6.7 6.7 6.7c1.6 0 3.2-.6 4.3-1.6l.3.3v.8l5.1 5.1 1.5-1.5-5-5.2zm-6.2
0c-2.6 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2 4.6-4.6 4.6z">
</path>
</svg>
</div>
<div class="col-1 px-0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -4 24 24" width="24" height="24"
style="color:white;">
<path fill="currentColor" d="M1.816 15.556v.002c0 1.502.584 2.912 1.646 3.972s2.472
1.647 3.974 1.647a5.58 5.58 0 0 0 3.972-1.645l9.547-9.548c.769-.768 1.147-1.767
1.058-2.817-.079-.968-.548-1.927-1.319-2.698-1.594-1.592-4.068-1.711-5.517-.262l-7.916
7.915c-.881.881-.792 2.25.214 3.261.959.958 2.423 1.053
3.263.215l5.511-5.512c.28-.28.267-.722.053-.936l-.244-.244c-.191-.191-.567-.349-.957.04l-5.506
5.506c-.18.18-.635.127-.976-.214-.098-.097-.576-.613-.213-.973l7.915-7.917c.818-.817 2.267-.699
3.23.262.5.501.802 1.1.849 1.685.051.573-.156 1.111-.589 1.543l-9.547 9.549a3.97 3.97 0 0 1-2.829 1.171
3.975 3.975 0 0 1-2.83-1.173 3.973 3.973 0 0 1-1.172-2.828c0-1.071.415-2.076
1.172-2.83l7.209-7.211c.157-.157.264-.579.028-.814L11.5 4.36a.572.572 0 0 0-.834.018l-7.205
7.207a5.577 5.577 0 0 0-1.645 3.971z">
</path>
</svg>
</div>
<div class="col-1 px-0">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -4 24 24" width="24" height="24"
style="color:white;">
<path fill="currentColor" d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1
0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z">
</path>
</svg>
</div>
</div>
</div>
</div>
<!-- MENSAJES DEL CHAT -->
<div class="row justify-content-center">
<div class="col-12 ChatContainer pt-3">
<!-- Aqui van los mensajes del chat -->
<div id="ChatContainer">
</div>
<!-- CAJA DE TEXTO MANDAR MENSAJES -->
<div class="row justify-content-center mb-1">
<div class="col-12 px-0">
<div class="row mx-0" style="max-width:100%;">
<div class="col-1 px-0">
<div class="CajaTextoEmoji">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 24 29" width="24" height="29">
<path opacity=".45" fill="#263238" d="M9.153 11.603c.795 0 1.439-.879
1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439
1.962zm-3.204 1.362c-.026-.307-.131 5.218 6.063 5.551 6.066-.25 6.066-5.551
6.066-5.551-6.078 1.416-12.129 0-12.129 0zm11.363 1.108s-.669 1.959-5.051
1.959c-3.505 0-5.388-1.164-5.607-1.959 0 0 5.912 1.055 10.658 0zM11.804
1.011C5.609 1.011.978 6.033.978 12.228s4.826 10.761 11.021 10.761S23.02
18.423 23.02 12.228c.001-6.195-5.021-11.217-11.216-11.217zM12 21.354c-5.273
0-9.381-3.886-9.381-9.159s3.942-9.548 9.215-9.548 9.548 4.275 9.548 9.548c-.001
5.272-4.109 9.159-9.382 9.159zm3.108-9.751c.795 0 1.439-.879
1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962z">
</path>
</svg>
</div>
</div>
<div class="col-10 px-0">
<input type="text" name="" value="" placeholder="Type a message" class="CajaTexto">
</div>
<div class="col-1 px-0">
<div class="CajaTextoEnviar">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-11 -8 34 29" width="28" height="25">
<path fill="white" d="M1.101 21.757L23.8 12.028 1.101 2.3l.011 7.912 13.623
1.816-13.623 1.817-.011 7.912z">
</path>
</svg>
</div>
</div>
</div>
</div>
</div>
<!-- FIN CAJA DE TEXTO MANDAR MENSAJES -->
</div>
</div>
</div><!-- Nuevo col -->
</div> <!-- Nuevo row -->
</div>
<!-- FIN CONTENEDOR DEL CHAT -->
<button id="BtnSaveAsImage" class="BtnGuardarComoImagen">
Save chat as image
</button>
<button id="BtnExportChat" class="BtnGuardarComoImagen">
Export chat
</button>
<div id="Chat-Style" data-style="WhatsApp"></div>
<!-- Character selector -->
<div class="modal" tabindex="-1" role="dialog" id="CharacterSelector">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title FormM">Select a character</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="BtnCloseCharSelector">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<!-- Imagenes de los personajes -->
<div class="row" id="CharacterSelectorImages">
<!-- Aqui van las imagenes de los personajes -->
</div>
<!-- Fin imagenes de los personajes -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Fin character selector -->
<script src="js/Bootstrap/jquery-3.2.1.slim.min.js"></script>
<script src="js/Bootstrap/popper.min.js"></script>
<script src="js/Bootstrap/bootstrap.min.js"></script>
<script src="js/html2canvas.js"></script>
<script type="module" src="js/App.js"></script>
<script src="js/SaveAsImage.js"></script>
</body>
</html>