-
Notifications
You must be signed in to change notification settings - Fork 0
/
documento-comentarios.php
401 lines (344 loc) · 20.9 KB
/
documento-comentarios.php
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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
<?php
$title = 'Documento con Comentarios';
?>
<?php include "inc/head.php"; ?>
<!-- Cabezal -->
<?php include "inc/header.php"; ?>
<!-- Breadcrumb -->
<div class="Breadcrumb">
<div class="Container">
<ul>
<li><a href="index.html">Inicio</a></li>
<li><a href="#">Institucional</a></li>
</ul>
</div>
</div>
<!-- Contenido -->
<div class="u-main" id="contenido">
<div class="Container">
<div class="Page Page--hasNav">
<div class="Grid Grid--noGutter">
<div class="Grid-item u-md-size1of4">
<?php include 'inc/nav-local.php' ?>
</div>
<div class="Grid-item u-md-size3of4">
<div class="Page-body">
<div class="Page-document">
<span class="Page-subtitle">Información adicional</span>
<h2 class="Page-title u-mb1">Estudiantes de UTU reflexionan y debaten sobre consumos problemáticos</h2>
<p class="u-mb4">Autor: <a href="#">Nombre Apellido</a></p>
<?php include "./inc/page-info.php"; ?>
<div class="Event">
<div class="Event-info">
<div class="Media">
<div class="Media-image">
<?php include "inc/moleculas/fecha.php"; ?>
</div>
<div class="Media-body">
<a href="#" class="Event-name">Nombre del evento</a>
<p class="Event-description">Lorem ipsum dolor sit.</p>
<ul class="Event-details">
<li>19:00 hs - Museo del Carnaval</li>
</ul>
</div>
</div>
</div>
<div class="Event-map">
<div class="FlexEmbed FlexEmbed--21by9">
<iframe src="https://peu.agesic.gub.uy/portaltipo18beta/portal/mapa-interactivo.html" allowfullscreen="" title="Mapa del evento"></iframe>
</div>
</div>
</div>
<p class="Page-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione pariatur, corporis. Aperiam laudantium possimus autem magni, perspiciatis sapiente reiciendis corrupti.</p>
<div class="Page-image">
<img src="img/uruguay.jpg" alt="Uruguay">
</div>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit</strong>. Nemo esse beatae, nihil doloribus dolor perferendis <em>quas voluptatem atque impedit</em> ab nulla omnis libero neque <a href="#">delectus veritatis laborum</a> consequatur repudiandae! Voluptatem?</p>
<p>Consectetur adipisicing elit. Iste quae, <strong>odit natus molestiae neque quam dolor eum</strong>, repellat ad id hic architecto rerum cum est suscipit <a href="#">laudantium quibusdam expedita tempore</a> recusandae optio dolorum, illo? <strong>Quas Lorem ipsum dolor sit amet</strong>, consectetur adipisicing elit. Beatae distinctio tempore, laborum hic doloribus? Dolores facilis eum, accusantium non eveniet!</p>
<ul>
<li>Lorem ipsum dolor.</li>
<li>Maxime, nostrum, eos!</li>
<li>Molestias itaque, vitae!</li>
<li>Ab, eum, beatae.</li>
<li>Quas quod, error.</li>
</ul>
<h3>Encabezado de segundo nivel</h3>
<a class="Download" href="#" title="Descargar: Formulario para inscripción (.pdf 354 KB)">
<div class="Media">
<div class="Media-image">
<span class="Download-icon">
<span class="Icon Icon--download"></span>
</span>
</div>
<div class="Media-body">
<div class="Download-title">Formulario para inscripción (.pdf 354 KB)</div>
<div class="Download-description">Lorem ipsum dolor sit amet consectetur</div>
</div>
</div>
</a>
<figure class="Image Image--left u-size1of4">
<img src="img/mural.jpg" alt="Mural">
<figcaption>Mural</figcaption>
</figure>
<p>Lorem ipsum dolor sit amet, <strong>consectetur adipisicing elit</strong>. Nemo esse beatae, nihil doloribus dolor perferendis <em>quas voluptatem atque impedit</em> ab nulla omnis libero neque <a href="#">delectus veritatis laborum</a> consequatur repudiandae! Voluptatem?</p>
<p>Consectetur adipisicing elit. Iste quae, <strong>odit natus molestiae neque quam dolor eum</strong>, repellat ad id hic architecto rerum cum est suscipit <a href="#">laudantium quibusdam expedita tempore</a> recusandae optio dolorum, illo? <strong>Quas Lorem ipsum dolor sit amet</strong>, consectetur adipisicing elit. Beatae distinctio tempore, laborum hic doloribus? Dolores facilis eum, accusantium non eveniet!</p>
<p>Lorem ipsum, <strong>consectetur adipisicing elit</strong>. Dolor perferendis <em>quas voluptatem atque impedit</em> ab nulla omnis libero neque consequatur repudiandae! Voluptatem?</p>
<blockquote class="Blockquote">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nostrum iure quae ratione delectus suscipit aperiam eius iste sequi quaerat.</blockquote>
<div class="Alert">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora sapiente inventore fugiat velit, ipsam nemo recusandae corporis labore optio quas.
</div>
<div class="Alert">
<h3>Encabezado H3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae eligendi asperiores assumenda atque impedit perferendis, quasi, ratione facere reprehenderit quia!</p>
<ul>
<li>Lorem ipsum dolor sit.</li>
<li>Praesentium voluptates quos, alias.</li>
<li>Architecto deserunt ipsam, quasi.</li>
<li>Fugit molestias ad excepturi?</li>
</ul>
</div>
<h3>Tabla</h3>
<table class="Table Table--responsive">
<thead>
<tr>
<th>Título Columna 1</th>
<th>Título Columna 2</th>
<th>Título Columna 3</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Título Columna 1">Fila 1 Columna 1</td>
<td data-title="Título Columna 2">Fila 1 Columna 2</td>
<td data-title="Título Columna 3">Fila 1 Columna 3</td>
</tr>
<tr>
<td data-title="Título Columna 1">Fila 2 Columna 1</td>
<td data-title="Título Columna 2">Fila 2 Columna 2</td>
<td data-title="Título Columna 3">Fila 2 Columna 3</td>
</tr>
<tr>
<td data-title="Título Columna 1">Fila 3 Columna 1</td>
<td data-title="Título Columna 2">Fila 3 Columna 2</td>
<td data-title="Título Columna 3">Fila 3 Columna 3</td>
</tr>
<tr>
<td data-title="Título Columna 1">Fila 4 Columna 1</td>
<td data-title="Título Columna 2">Fila 4 Columna 2</td>
<td data-title="Título Columna 3">Fila 4 Columna 3</td>
</tr>
</tbody>
</table>
<div class="Audio">
<div id="audioTitle1" class="Audio-title">Título del audio</div>
<audio aria-labelledby="audioTitle1" src="https://archive.org/download/testmp3testfile/mpthreetest.mp3" preload="none" controls="">
Su navegador no permite reproducir este archivo de audio.
</audio>
<a href="#audioTitle1Transcription" class="Audio-link collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="audioTitle1Transcription">
<span>Ver transcripción</span>
<span class="u-hideVisually"> de Título del audio</span>
</a>
<div class="collapse" id="audioTitle1Transcription">
<div class="u-p3">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque perspiciatis accusamus, officia possimus ea voluptatem adipisci a vel veritatis deserunt!</p>
<p>Lorem ipsum dolor sit, <strong>amet consectetur adipisicing</strong> elit. Reprehenderit animi nulla facere. Aliquam eius voluptate perspiciatis deserunt, corrupti placeat facere? Assumenda voluptate velit distinctio commodi dolor. Quae ea ab eligendi!</p>
<p>Lorem ipsum dolor sit amet <em>consectetur adipisicing elit</em>. Incidunt itaque atque optio unde delectus perferendis porro, animi quis, dolorem aspernatur saepe natus sint nostrum labore. Quibusdam vero saepe pariatur dolorum.</p>
</div>
</div>
</div>
<div class="Video">
<div class="FlexEmbed FlexEmbed--16by9">
<iframe class="FlexEmbed-item" src="https://www.youtube.com/embed/JYKje4jO-iY?rel=0" title="Video"></iframe>
</div>
</div>
<!-- Enlaces, Descargas y Etiquetas -->
<?php include "inc/relacionados.php"; ?>
</div>
</div>
</div>
</div>
</div>
<div class="Page Page--hasNav">
<div class="Grid Grid--noGutter">
<div class="Grid-item u-md-size1of4">
<!-- columna invisible -->
</div>
<div class="Grid-item u-md-size3of4">
<div class="Page-body">
<h3 class="u-mb5">Comentarios</h3>
<div class="Comments">
<div class="Comments-box">
<div class="Media">
<div class="Media-image u-mr2">
<div class="Comment-avatar u-bgColor2"><span>PR</span></div>
</div>
<div class="Media-body">
<textarea class="Comments-textarea" name="comentario" id="comentario" placeholder="Escribe su comentario"></textarea>
<div class="u-textRight u-mt1">
<button class="Button Button--primary" data-toggle="modal" data-target="#js-modal-comentar">Enviar</button>
</div>
</div>
</div>
<div id="js-modal-comentar" class="modal fade" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-body">
<h4 class="modal-title u-my3">Espacio de Intercambio</h4>
<h5>Objetivo</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae et ipsum ab porro nulla alias quas praesentium deserunt ea, suscipit animi voluptatum laborum voluptatibus, quam molestias esse eveniet, atque numquam?</p>
<h5>Perfil</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate adipisci optio neque magni est minima doloremque voluptatum ratione provident explicabo, doloribus labore iste, minus ad. Non eaque amet aliquam minima.</p>
<h5>Por qué me interesa participar *</h5>
<form action="./">
<textarea class="Comments-textarea" name="motivos" id="motivos" placeholder="Explique sus razones"></textarea>
<div class="u-textRight u-my3 u-cfx">
<button type="button" class="u-right u-ml4 Button Button--primary">Solicitar acceso</button>
<a href="#" class="u-right u-pt1" data-dismiss="modal">Cancelar</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<ul class="Comments-list">
<li class="Comment">
<div class="Comment-header">
<div class="Flag">
<div class="Flag-image">
<div class="Comment-avatar Comment-avatar--small u-bgColor1"><span>IM</span></div>
</div>
<div class="Flag-body">Nombre Usuario</div>
</div>
<div class="Comment-info">12/03/2019 - 21:53</div>
</div>
<div class="Comment-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem aliquam nemo obcaecati laudantium. Alias, quas accusantium. Iure, accusantium perspiciatis provident ipsa, repellendus qui, natus laborum accusamus nam vero veritatis?
</div>
<div class="Comment-actions">
<a href="#response-1" data-toggle="collapse">Responder</a>
<a href="#comments-1" data-toggle="collapse"><span class="Icon Icon--small Icon--reply"></span><span>2 respuestas</span></a>
</div>
<div class="collapse" id="response-1">
<div class="Media u-mt3">
<div class="Media-image u-mr2">
<div class="Comment-avatar Comment-avatar--small u-bgColor2"><span>PR</span></div>
</div>
<div class="Media-body">
<textarea class="Comments-textarea" name="comentario" id="comentario" placeholder="Escriba su respuesta"></textarea>
<div class="u-textRight u-mt1">
<button class="Button Button--primary" data-toggle="modal" data-target="#js-modal-comentar">Enviar</button>
</div>
</div>
</div>
</div>
<ul class="Comments-sublist collapse" id="comments-1">
<li class="Comment">
<div class="Comment-header">
<div class="Flag">
<div class="Flag-image">
<div class="Comment-avatar Comment-avatar--small u-bgColor4"><span>JL</span></div>
</div>
<div class="Flag-body">Nombre Usuario</div>
</div>
<div class="Comment-info">12/03/2019 - 21:53</div>
</div>
<div class="Comment-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem aliquam nemo obcaecati laudantium. Alias, quas accusantium. Iure, accusantium perspiciatis provident ipsa, repellendus qui, natus laborum accusamus nam vero veritatis?
</div>
<div class="Comment-actions">
<a href="#response-2" data-toggle="collapse">Responder</a>
<a href="#comments-2" data-toggle="collapse"><span class="Icon Icon--small Icon--reply"></span><span>1 respuestas</span></a>
</div>
<div class="collapse" id="response-2">
<div class="Media u-mt3">
<div class="Media-image u-mr2">
<div class="Comment-avatar Comment-avatar--small u-bgColor2"><span>PR</span></div>
</div>
<div class="Media-body">
<textarea class="Comments-textarea" name="comentario" id="comentario" placeholder="Escriba su respuesta"></textarea>
<div class="u-textRight u-mt1">
<button class="Button Button--primary" data-toggle="modal" data-target="#js-modal-comentar">Enviar</button>
</div>
</div>
</div>
</div>
<ul class="Comments-sublist collapse" id="comments-2">
<li class="Comment">
<div class="Comment-header">
<div class="Flag">
<div class="Flag-image">
<div class="Comment-avatar Comment-avatar--small u-bgColor3"><span>MC</span></div>
</div>
<div class="Flag-body">Nombre Usuario</div>
</div>
<div class="Comment-info">12/03/2019 - 21:53</div>
</div>
<div class="Comment-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem aliquam nemo obcaecati laudantium. Alias, quas accusantium. Iure, accusantium perspiciatis provident ipsa, repellendus qui, natus laborum accusamus nam vero veritatis?
</div>
<div class="Comment-actions">
<a href="#response-3" data-toggle="collapse">Responder</a>
</div>
<div class="collapse" id="response-3">
<div class="Media u-mt3">
<div class="Media-image u-mr2">
<div class="Comment-avatar Comment-avatar--small u-bgColor2"><span>PR</span></div>
</div>
<div class="Media-body">
<textarea class="Comments-textarea" name="comentario" id="comentario" placeholder="Escriba su respuesta"></textarea>
<div class="u-textRight u-mt1">
<button class="Button Button--primary" data-toggle="modal" data-target="#js-modal-comentar">Enviar</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="Comment">
<div class="Comment-header">
<div class="Flag">
<div class="Flag-image">
<div class="Comment-avatar Comment-avatar--small u-bgColor3"><span>AP</span></div>
</div>
<div class="Flag-body">Nombre Usuario</div>
</div>
<div class="Comment-info">12/03/2019 - 21:53</div>
</div>
<div class="Comment-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam rem aliquam nemo obcaecati laudantium. Alias, quas accusantium. Iure, accusantium perspiciatis provident ipsa, repellendus qui, natus laborum accusamus nam vero veritatis?
</div>
<div class="Comment-actions">
<a href="#response-4" data-toggle="collapse">Responder</a>
</div>
<div class="collapse" id="response-4">
<div class="Media u-mt3">
<div class="Media-image u-mr2">
<div class="Comment-avatar Comment-avatar--small u-bgColor2"><span>PR</span></div>
</div>
<div class="Media-body">
<textarea class="Comments-textarea" name="comentario" id="comentario" placeholder="Escriba su respuesta"></textarea>
<div class="u-textRight u-mt1">
<button class="Button Button--primary" data-toggle="modal" data-target="#js-modal-comentar">Enviar</button>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<?php include "inc/footer.php"; ?>
<script src="js/vendor/jquery.js"></script>
<script src="js/portal-unificado.js"></script>
</body>
</html>