-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
573 lines (553 loc) · 35.9 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
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
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
<!DOCTYPE html>
<html lang="es-ES">
<head>
<title>Plazamar book store</title>
<meta charset='utf-8'>
<meta name="description" content="online book store">
<meta name="author" content="Raúl Plaza Marcos">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- google sign in -->
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="474530029771-43fpuc6nsqnqv8ckulacomfbm6kt4von.apps.googleusercontent.com">
<!-- icon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- css frameworks-->
<link rel="stylesheet" type="text/css" href="css/vendor/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/vendor/pure-min.css" media="screen"/>
<!-- custom css-->
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<link rel="stylesheet" type="text/css" href="css/cssTransforms.css"/>
<!-- js frameworks-->
<script type="text/javascript" src="js/vendor/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/vendor/underscore-min.js"></script>
<script type="text/javascript" src="js/vendor/backbone-min.js"></script>
<!-- Google+ and glogin and g+1 button -->
<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</head>
<body>
<div id="fb-root"></div>
<!-- contenido común a todas las vistas -->
<header class='pure-g'>
<section id='seccion-logo' class="pure-u-1">
<div id="logo">
<a href="" class="rotation"><img src="img/logo_tienda.png" alt="logo plazamar" width="100"></a>
<h1 id="name">plazamar</h1>
<p id="phrase">selected books</p>
</div>
</section>
<section id='seccion-buscador' class="pure-u-1">
<h1 id="store-title">Catálogo de libros</h1>
</section>
<section id='seccion-acceso' class="pure-u-1">
<div id="icons">
<ul>
<li><a href="#"><img src="img/facebook.png" alt="link facebook" width="35" height="35" ></a></li>
<li><a href="#"><img src="img/twitter.png" alt="link twitter" width="35" height="35" ></a></li>
<li><a href="#"><img src="img/googleplus.png" alt="link googleplus" width="35" height="35" ></a></li>
<li><a href="#"><img src="img/rss.png" alt="link rss" width="35" height="35" ></a></li>
</ul>
</div>
<nav id='icono-menu'><a href="#"><img src="img/menu.png" alt="menu" width="50" height="50" ></a></nav>
<nav id="little-box" class="borde">
<ul>
<li id='sesion'><a href="#formAcceso">acceder</a></li>
<li id='perfil'><a href="#perfil">perfil</a></li>
<li><a href="#carrito">carrito</a></li>
<li><a href="#ayuda/1">ayuda</a></li>
</ul>
</nav>
</section>
</header>
<div class="pure-g" id="titular">
<h1>¡ Bienvenido ! estos son algunos productos de nuestro catálogo</h1>
</div>
<div class="pure-g containerNormal" id="container">
<div class='pure-u-1' id='menu_categorias'><ul class='centrado borde' id='categorias'></ul></div>
<div class='pure-u-1' id='contenido'><ul id='productos'></ul></div>
<div class='pure-u-1' id='carrito'>
<div id='botonDonarPaypal' class="centrado">
Esta es una app sin animo de lucro pero si quieres donar para mantener el sitio pulsa en el botón
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/es_ES/ES/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal. La forma rápida y segura de pagar en Internet.">
<img alt="" border="0" src="https://www.paypalobjects.com/es_ES/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
<div class='pure-u-1 oculto' id='infoPortada'></div>
</div>
<footer id='footer' class="pure-g">
<section class="pure-u-1 ancho-1-3"><a href="#quienesSomos">quienes somos</a></section>
<section class="pure-u-1 ancho-1-3"><a href='#atencionAlCliente'>atención al cliente</a></section>
<section class="pure-u-1 ancho-1-3"><a href='#legal/1'>aspectos legales</a></section>
</footer>
<!-- Plantilla (template) del menú de categorías -->
<script type="text/template" id="listado_categorias">
<li><a href="#categoria/<%= nombre %>"><%= nombre %></a></li>
</script>
<!-- Plantilla con los productos de la página de inicio -->
<script type="text/template" id="listado_productos">
<li><a href="#catalogo/<%= _id.$id %>"><img class='item' id="<%= isbn %>" src="<%= imagen %>" alt="<%= titulo %>" width="110" height="110" data-isbn="<%= isbn %>"/></a></li>
</script>
<!-- Plantilla de detalle de producto -->
<script type="text/template" id="detalle_de_producto">
<div id='detalleProducto'>
<img class="detalle" src="<%= imagen %>" alt="<%= titulo %>" width="220" height="220">
<h2 id="titulo_detalle"><%= titulo %></h2>
<h3 class="subtitulo_detalle">Autor: <%= autor %></h3>
<h3 class="subtitulo_detalle">Editorial: <%= editorial %></h3>
<h3 class="subtitulo_detalle" id='precio'>Precio: <%= precio %> € </h3>
<button class="button margen_izq" id='comprar'>comprar</button>
<br><br><br><br><br><br>
<div class="g-plusone" data-size="medium"></div>
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
<h3 class="resenya">Reseña:</h3>
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu dui,
pulvinar rutrum fringilla elementum, sodales id tellus.
Duis pellentesque dolor in neque volutpat mattis.
Fusce tempus metus non quam pellentesque, vitae porta mauris malesuada.
Nullam mi lorem, sagittis vitae nulla quis, cursus tincidunt erat.
Aenean a mi sed nulla vehicula cursus. Nullam vitae hendrerit metus,
lobortis commodo est. Etiam eleifend eleifend orci at malesuada.
</p>
</div>
</script>
<!-- Plantillas con el contenido de la ayuda -->
<script type="text/template" id='ayuda_1'>
<div class="cuadro_texto">
<h3 class="little_title_gen">Cuestión 1</h3>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu dui, pulvinar rutrum fringilla elementum, sodales id tellus. Duis pellentesque dolor in neque volutpat mattis. Fusce tempus metus non quam pellentesque, vitae porta mauris malesuada. Nullam mi lorem, sagittis vitae nulla quis, cursus tincidunt erat. Aenean a mi sed nulla vehicula cursus. Nullam vitae hendrerit metus, lobortis commodo est. Etiam eleifend eleifend orci at malesuada.</p>
<h3 class="little_title_gen">Cuestión 2</h3>
<p class="paragraph">Donec quis orci ultrices tortor volutpat eleifend nec vel felis. Donec id quam vel lectus tristique laoreet non vitae ex. Proin auctor justo a convallis convallis. Etiam semper laoreet odio et mollis. Ut a sem tempor, consectetur orci faucibus, ultricies tellus. Duis in tortor libero. Duis ut erat vulputate ligula sodales consectetur. Vivamus auctor, leo et viverra ultricies, elit massa efficitur mi, vel efficitur dolor urna a ex. Nunc ac pulvinar felis. Vestibulum vehicula auctor faucibus.</p>
</div>
<div id='menu_pag_cuadro_texto'>
<ul>
<li><a href='#ayuda/1'>1</a></li>
<li><a href='#ayuda/2'>2</a></li>
<li><a href='#ayuda/3'>3</a></li>
</ul>
</div>
</script>
<script type="text/template" id='ayuda_2'>
<div class="cuadro_texto">
<h3 class="little_title_gen">Cuestión 3</h3>
<p class="paragraph">Quisque vulputate massa a iaculis ornare. Nam at odio nec tortor mollis volutpat. Aenean sit amet lectus eget eros malesuada sollicitudin sed ac ex. Etiam fringilla ultrices ligula sed efficitur. Etiam eget porttitor massa, at eleifend massa. Suspendisse massa nulla, porta in turpis vel, lobortis egestas odio. Aenean lorem ex, blandit non est vitae, blandit molestie purus. Duis viverra justo ut quam hendrerit, quis blandit metus dignissim. Pellentesque consectetur rutrum lorem ac aliquam. Duis rhoncus lacus quis felis pretium, ac bibendum dolor faucibus. Ut mollis nunc vitae dapibus dictum. Aliquam metus sem, aliquet ac augue nec, scelerisque tristique ipsum. Aliquam in nulla diam. Pellentesque vel libero sit amet mi dapibus rhoncus. Sed libero diam, blandit sit amet felis sit amet, ornare aliquam lectus. Aenean et diam volutpat, tristique diam euismod, tincidunt quam.</p>
</div>
<div id='menu_pag_cuadro_texto'>
<ul>
<li><a href='#ayuda/1'>1</a></li>
<li><a href='#ayuda/2'>2</a></li>
<li><a href='#ayuda/3'>3</a></li>
</ul>
</div>
</script>
<script type="text/template" id='ayuda_3'>
<div class="cuadro_texto">
<h3 class="little_title_gen">Cuestión 4</h3>
<p class="paragraph">Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nunc sed metus eu sapien molestie pharetra. Sed accumsan pulvinar lacus eu cursus. Nunc in cursus ante, nec elementum felis. Integer mauris ipsum, scelerisque nec erat facilisis, ultricies eleifend magna. Nullam tristique, ante vitae vulputate interdum, mi dolor iaculis metus, eu volutpat arcu neque eget massa. Cras in magna at nisi accumsan facilisis non et erat. Quisque sit amet dui in turpis varius consequat. Nam sodales, purus sit amet sollicitudin volutpat, elit mauris placerat magna, ac blandit risus tortor non lorem. Praesent vel risus hendrerit, tincidunt libero a, facilisis felis. Aliquam nec felis at nulla tempus eleifend sit amet eget dolor. Aenean auctor magna sit amet finibus maximus.</p>
</div>
<div id='menu_pag_cuadro_texto'>
<ul>
<li><a href='#ayuda/1'>1</a></li>
<li><a href='#ayuda/2'>2</a></li>
<li><a href='#ayuda/3'>3</a></li>
</ul>
</div>
</script>
<!-- Plantilla para 'quienes somos' -->
<script type="text/template" id='quienesSomos'>
<div>
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu dui,
pulvinar rutrum fringilla elementum, sodales id tellus.
Duis pellentesque dolor in neque volutpat mattis.
Fusce tempus metus non quam pellentesque, vitae porta mauris malesuada.
Nullam mi lorem, sagittis vitae nulla quis, cursus tincidunt erat.
Aenean a mi sed nulla vehicula cursus. Nullam vitae hendrerit metus,
lobortis commodo est. Etiam eleifend eleifend orci at malesuada.
</p>
</div>
</script>
<!-- Plantilla para 'atención al cliente' -->
<script type="text/template" id='atencionAlCliente'>
<div>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu dui, pulvinar rutrum fringilla elementum, sodales id tellus. Duis pellentesque dolor in neque volutpat mattis. Fusce tempus metus non quam pellentesque, vitae porta mauris malesuada. Nullam mi lorem, sagittis vitae nulla quis, cursus tincidunt erat. Aenean a mi sed nulla vehicula cursus. Nullam vitae hendrerit metus, lobortis commodo est. Etiam eleifend eleifend orci at malesuada.</p>
<p class="paragraph">Donec quis orci ultrices tortor volutpat eleifend nec vel felis. Donec id quam vel lectus tristique laoreet non vitae ex. Proin auctor justo a convallis convallis. Etiam semper laoreet odio et mollis. Ut a sem tempor, consectetur orci faucibus, ultricies tellus. Duis in tortor libero. Duis ut erat vulputate ligula sodales consectetur. Vivamus auctor, leo et viverra ultricies, elit massa efficitur mi, vel efficitur dolor urna a ex. Nunc ac pulvinar felis. Vestibulum vehicula auctor faucibus.</p>
</div>
</script>
<!-- Plantillas con el contenido de los aspectos legales -->
<script type="text/template" id='legal_1'>
<div class="cuadro_texto">
<h3 class="little_title_gen">Cuestión 1</h3>
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In arcu dui, pulvinar rutrum fringilla elementum, sodales id tellus. Duis pellentesque dolor in neque volutpat mattis. Fusce tempus metus non quam pellentesque, vitae porta mauris malesuada. Nullam mi lorem, sagittis vitae nulla quis, cursus tincidunt erat. Aenean a mi sed nulla vehicula cursus. Nullam vitae hendrerit metus, lobortis commodo est. Etiam eleifend eleifend orci at malesuada.</p>
<h3 class="little_title_gen">Cuestión 2</h3>
<p class="paragraph">Donec quis orci ultrices tortor volutpat eleifend nec vel felis. Donec id quam vel lectus tristique laoreet non vitae ex. Proin auctor justo a convallis convallis. Etiam semper laoreet odio et mollis. Ut a sem tempor, consectetur orci faucibus, ultricies tellus. Duis in tortor libero. Duis ut erat vulputate ligula sodales consectetur. Vivamus auctor, leo et viverra ultricies, elit massa efficitur mi, vel efficitur dolor urna a ex. Nunc ac pulvinar felis. Vestibulum vehicula auctor faucibus.</p>
</div>
<div id='menu_pag_cuadro_texto'>
<ul>
<li><a href='#legal/1'>1</a></li>
<li><a href='#legal/2'>2</a></li>
<li><a href='#legal/3'>3</a></li>
</ul>
</div>
</script>
<script type="text/template" id='legal_2'>
<div class="cuadro_texto">
<h3 class="little_title_gen">Cuestión 3</h3>
<p class="paragraph">Quisque vulputate massa a iaculis ornare. Nam at odio nec tortor mollis volutpat. Aenean sit amet lectus eget eros malesuada sollicitudin sed ac ex. Etiam fringilla ultrices ligula sed efficitur. Etiam eget porttitor massa, at eleifend massa. Suspendisse massa nulla, porta in turpis vel, lobortis egestas odio. Aenean lorem ex, blandit non est vitae, blandit molestie purus. Duis viverra justo ut quam hendrerit, quis blandit metus dignissim. Pellentesque consectetur rutrum lorem ac aliquam. Duis rhoncus lacus quis felis pretium, ac bibendum dolor faucibus. Ut mollis nunc vitae dapibus dictum. Aliquam metus sem, aliquet ac augue nec, scelerisque tristique ipsum. Aliquam in nulla diam. Pellentesque vel libero sit amet mi dapibus rhoncus. Sed libero diam, blandit sit amet felis sit amet, ornare aliquam lectus. Aenean et diam volutpat, tristique diam euismod, tincidunt quam.</p>
</div>
<div id='menu_pag_cuadro_texto'>
<ul>
<li><a href='#legal/1'>1</a></li>
<li><a href='#legal/2'>2</a></li>
<li><a href='#legal/3'>3</a></li>
</ul>
</div>
</script>
<script type="text/template" id='legal_3'>
<div class="cuadro_texto">
<h3 class="little_title_gen">Cuestión 4</h3>
<p class="paragraph">Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nunc sed metus eu sapien molestie pharetra. Sed accumsan pulvinar lacus eu cursus. Nunc in cursus ante, nec elementum felis. Integer mauris ipsum, scelerisque nec erat facilisis, ultricies eleifend magna. Nullam tristique, ante vitae vulputate interdum, mi dolor iaculis metus, eu volutpat arcu neque eget massa. Cras in magna at nisi accumsan facilisis non et erat. Quisque sit amet dui in turpis varius consequat. Nam sodales, purus sit amet sollicitudin volutpat, elit mauris placerat magna, ac blandit risus tortor non lorem. Praesent vel risus hendrerit, tincidunt libero a, facilisis felis. Aliquam nec felis at nulla tempus eleifend sit amet eget dolor. Aenean auctor magna sit amet finibus maximus.</p>
</div>
<div id='menu_pag_cuadro_texto'>
<ul>
<li><a href='#legal/1'>1</a></li>
<li><a href='#legal/2'>2</a></li>
<li><a href='#legal/3'>3</a></li>
</ul>
</div>
</script>
<!-- Plantilla con el formulario de acceso -->
<script type="text/template" id='formularioDeAcceso'>
<div>
<form id='login' name='log-in'>
<div class='centrado'>
<label class='etiqueta' for='usuario'>usuario</label>
<br><br>
<input class='cuadro-texto' type='text' id='usuario' name='usuario' size='20'>
<br><br>
<label class='etiqueta' for='password'>password</label>
<br><br>
<input class='cuadro-texto' type='password' id='password' name='password' size='20'>
<br><br>
<input type="submit" class="button" id="acceder" name="acceder" value="acceder">
</div>
</form>
<form id='registro' name='accesoARegistro' action='#formRegistro' method='POST'>
<div class='centrado'>
<br><br>
<label class='etiqueta' for='registrar'>¿aún no estás registrado?</label>
<br><br>
<button type="button" class="button" id="registrar">registrarse</button>
</div>
</form>
</div>
<div id='login_terceros' class='margenSuperior'>o accede con tu cuenta de google o facebook
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
</fb:login-button>
</div>
</script>
<!-- Plantilla con el formulario de registro (INCLUYE VALIDACIÓN HTML5)-->
<script type="text/template" id='formularioDeRegistro'>
<div id='contenedorFormRegistro' class='cuadro_texto margenSuperior'>
<form id='formRegistro' name='formRegistro' action='#registro' method='POST'>
<div class='centrado'>
<label class='etiqueta' for='usuario'>usuario</label>
<br><br>
<input class='cuadro-texto' type='text' id='usuario' name='usuario' size='20' minlength=4 maxlength=20 autofocus required>
<br><br>
<label class='etiqueta' for='email'>email</label>
<br><br>
<input class='cuadro-texto' type='email' id='email' name='email' size='20' maxlength=50 required>
<br><br>
<label class='etiqueta' for='password'>password</label>
<br><br>
<input class='cuadro-texto' type='password' id='password' name='password' size='20' minlength=4 maxlength=20 required>
<br><br>
<input type="submit" class="button" id="registrarUsuario" name="registrar" value="registrar">
</div>
</form>
<h3 id='infoError' class='centrado naranja'></h3>
</div>
</script>
<!-- Plantilla con la pagina de error de acceso -->
<script type='text/template' id='errorAcceso'>
<div class='cuadro_texto margenSuperior'>
<h3 class="little_title_gen centrado">credenciales incorrectas</h3>
</div>
</script>
<!-- Plantilla con la pagina de info de registro -->
<script type='text/template' id='infoRegistro'>
<div class='cuadro_texto margenSuperior'>
<h3 id='inforeg' class="little_title_gen centrado"></h3>
</div>
</script>
<!-- Plantilla con el formulario de perfil de usuario (INCLUYE VALIDACIÓN HTML5)-->
<script type="text/template" id='formularioPerfilUsuario'>
<div>obten tus datos directamente de tu perfil de google+</div>
<div id="gConnect" class="button">
<button class="g-signin"
data-scope="email"
data-clientid="474530029771-43fpuc6nsqnqv8ckulacomfbm6kt4von.apps.googleusercontent.com"
data-callback="onSignInCallback"
data-theme="dark"
data-cookiepolicy="single_host_origin">
</button>
</div>
<div id='contenedorFormRegistro' class='cuadro_perfil margenSuperior'>
<form id='formPerfilUsuario' name='formPerfilUsuario'>
<div class='centrado'>
<label class='etiqueta' for='nombre'>nombre</label>
<br><br>
<input class='cuadro-texto' type='text' id='nombre' name='nombre' size='20' maxlength=20 autofocus>
<br><br>
<label class='etiqueta' for='apellidos'>apellidos</label>
<br><br>
<input class='cuadro-texto' type='text' id='apellidos' name='apellidos' size='20' maxlength=40>
<br><br>
<label class='etiqueta' for='email'>email</label>
<br><br>
<input class='cuadro-texto' type='email' id='email' name='email' size='20' maxlength=50 required>
<br><br>
<label class='etiqueta' for='direccion'>dirección</label>
<br><br>
<input class='cuadro-texto' type='text' id='direccion' name='direccion' size='20' maxlength=50>
<br><br>
<label class='etiqueta' for='localidad'>localidad</label>
<br><br>
<input class='cuadro-texto' type='text' id='localidad' name='localidad' size='20' maxlength=50>
<br><br>
<label class='etiqueta' for='provincia'>provincia</label>
<br><br>
<input class='cuadro-texto' type='text' id='provincia' name='provincia' size='20' maxlength=50>
<br><br>
<label class='etiqueta' for='password'>password</label>
<br><br>
<input class='cuadro-texto' type='password' id='password' name='password' size='20' minlength=4 maxlength=20 required>
<br><br>
<input type="submit" class="button" id="registrarUsuario" name="registrar" value="registrar">
</div>
</form>
<h3 id='infoError' class='centrado naranja'></h3>
</div>
</script>
<!-- Plantilla con la pagina de info del perfil de usuario -->
<script type='text/template' id='informacionPerfil'>
<div class='cuadro_texto margenSuperior'>
<h3 id='infoPerfil' class="little_title_gen centrado"></h3>
</div>
</script>
<!-- Plantilla con el panel primario de administrador -->
<script type='text/template' id='panelAdministracion'>
<div class="pure-g">
<div id="botonesGestion" class="pure-u-1">
<form class="pure-form">
<legend>gestionar: </legend>
<button id="botonCategorias" class="pure-button">categorías</button>
<button id="botonProductos" class="pure-button">productos</button>
</form>
</div>
<div id="subpaneles" class="pure-u-1">
</div>
</div>
</script>
<!-- Plantilla con el subpanel de categorias para el administrador-->
<script type='text/template' id='subPanelCategorias'>
<form class="pure-form">
<fieldset>
<legend>categorías</legend>
<div>
<label for="nuevaCategoria">nueva categoría</label>
<input id="nombreNuevaCategoria" class="black" type="text" placeholder="nombre">
<input id="descripcionNuevaCategoria" class="black" type="text" placeholder="descripción">
<button id='botonNuevaCategoria' class="pure-button pure-button-primary">ok</button>
</div>
<div class="margen-sup">
<label for="modificarCategoria">modificar categoría</label>
<select id="modificarCategoria" class="black">
</select>
<input id="nuevoNombreCategoriaModif" class="black" type="text" placeholder="nuevo nombre">
<input id="nuevaDescripcionCategoriaModif" class="black" type="text" placeholder="nueva descripción">
<button id='botonModificarNombreCategoria' class="pure-button pure-button-primary">ok</button>
</div>
<div class="margen-sup">
<label for="borrarCategoria">borrar categoría</label>
<select id="borrarCategoria" class="black">
</select>
<button id='botonBorrarCategoria' class="pure-button pure-button-primary">borrar</button>
<span>(cuidado: la categoría se borrará junto con todos sus productos)</span>
</div>
<div id='mensajeCategorias'>
</div>
</fieldset>
</form>
</script>
<!-- Plantilla con el subpanel de productos para el administrador-->
<script type='text/template' id='subPanelProductos'>
<form class="pure-form">
<fieldset>
<legend>productos</legend>
<div class='pure-g'>
<div class="pure-u-1-8">
<button id="botonAltaProducto" class="pure-button">nuevo</button>
<button id="botonModificacionProducto" class="pure-button margen-sup">modificar</button>
<button id="botonBorrarProducto" class="pure-button margen-sup">borrar</button>
</div>
<div id="subsubpanel" class='pure-u-7-8'>
</div>
</div>
</fieldset>
</form>
</script>
<!--Plantilla con el subpanel de alta de producto para el administrador -->
<script type='text/template' id='subPanelAltaProducto'>
<form class="pure-form" method='POST' action='api.php/producto' enctype='multipart/form-data'>
<div class='pure-u-3-8'>
<fieldset class="pure-group">
<input id='titulo' type="text" class="pure-input-1 black" placeholder="título">
<input id='autor' type="text" class="pure-input-1 black" placeholder="autor">
<input id='editorial' type="text" class="pure-input-1 black" placeholder="editorial">
<input id='isbn' type="text" class="pure-input-1 black" placeholder="isbn">
<input id='precio' type="text" class="pure-input-1 black" placeholder="precio">
</fieldset>
</div>
<div class='pure-u-3-8'>
<fieldset class="pure-group">
<label for="categoria">categoria</label>
<select id="categoria" class="black">
</select>
</br>
<label for="tieneDescuento">¿tiene descuento?</label>
<select id="tieneDescuento" class="black">
<option>false</option>
<option>true</option>
</select>
<input id='descuento' type="text" class="pure-input-1 black" placeholder="descuento: porcentaje">
<input type="hidden" name="MAX_FILE_SIZE" value="200000" />
<input id='file' name='file' type='file' formenctype='multipart/form-data' class="pure-input-1" accept=".png">
</fieldset>
<input type='submit' id="altaProducto" class="button-large pure-button pure-button-primary" value='dar de alta el producto'>
</div>
<div id='mensajeProducto'>
</div>
</form>
<div id='info'>
</div>
</script>
<!--Plantilla con el subpanel de modificación de producto para el administrador -->
<script type='text/template' id='subPanelModificacionProducto'>
<form class="pure-form pure-form-stacked">
<fieldset>
<legend>localizar producto</legend>
<div id='seleccionDeCategorias' class='pure-u-1-4'>
<label for="categoria">seleccionar categoría</label>
<select id="categoria" class="black">
</select>
<button id='buscarProductos' class="pure-button pure-button-primary">seleccionar</button>
</div>
<div id="subpanelProductos" class='pure-u-3-4'>
</div>
<div id='mensajeProducto'>
</div>
</fieldset>
</form>
</script>
<!-- plantilla con el subpanel de detalle de producto seleccionado por el admin en la modificacion o borrado de productos -->
<script type='text/template' id='subPanelDetalleProducto'>
<div>
<form class="pure-form pure-form-stacked">
<fieldset>
<label for="id">id</label>
<input id='id' type="text" class="pure-input-2-3 black" placeholder="id" value='<%= _id.$id %>' disabled>
<label for="titulo">titulo</label>
<input id='titulo' type="text" class="pure-input-2-3 black" placeholder="título" value='<%= titulo %>'>
<label for="autor">autor</label>
<input id='autor' type="text" class="pure-input-2-3 black" placeholder="autor" value='<%= autor %>'>
<label for="editorial">editorial</label>
<input id='editorial' type="text" class="pure-input-2-3 black" placeholder="editorial" value='<%= editorial %>'>
<label for="isbn">isbn</label>
<input id='isbn' type="text" class="pure-input-2-3 black" placeholder="isbn" value='<%= isbn %>'>
<label for="precio">precio</label>
<input id='precio' type="text" class="pure-input-2-3 black" placeholder="precio" value='<%= precio %>'>
<label for="categorias">categoria</label>
<div id='seleccionar'>
<select id="categorias" class="black izq">
</select>
</div>
<label for="tieneDescuento">¿tiene descuento?</label>
<select id="tieneDescuento" class="black" value='<%= tieneDescuento %>'>
<option>false</option>
<option>true</option>
</select>
<label for="descuento">descuento</label>
<input id='descuento' type="text" class="pure-input-2-3 black" placeholder="descuento: porcentaje" value='<%= descuento %>'>
<label for="file">imagen</label>
<input id='file' type='file' class="pure-input-2-3" accept=".png">
<button id="modificarProducto" class="button-large pure-button pure-button-primary">modificar</button>
<button id="borrarProducto" class="button-large pure-button pure-button-primary">borrar</button>
</fieldset>
</form>
</div>
</script>
<!-- plantilla con los divs genéricos del container -->
<script type='text/template' id='divsContainer'>
<div class='pure-u-1-4' id='menu_categorias'><ul class='centrado borde' id='categorias'></ul></div>
<div class='pure-u-1-2' id='contenido'><ul id='productos'></ul></div>
<div class='pure-u-1-4' id='carrito'></div>
</script>
<!-- Plantilla de la lista de la compra -->
<script type="text/template" id="listaDeLaCompra">
<li><a href="#catalogo/<%= _id.$id %>"><img class='item' id="<%= isbn %>" src="<%= imagen %>" alt="<%= titulo %>" width="110" height="110" data-isbn="<%= isbn %>"/></a></li>
</script>
<!-- scripts con la lógica de la página -->
<script type="text/javascript" src="js/Modelos/CarroCompra.js"></script>
<script type="text/javascript" src="js/Modelos/Categoria.js"></script>
<script type="text/javascript" src="js/Modelos/Perfil.js"></script>
<script type="text/javascript" src="js/Modelos/Producto.js"></script>
<script type="text/javascript" src="js/Modelos/Sesion.js"></script>
<script type="text/javascript" src="js/Modelos/Usuario.js"></script>
<script type="text/javascript" src="js/Colecciones/Categorias.js"></script>
<script type="text/javascript" src="js/Colecciones/Perfiles.js"></script>
<script type="text/javascript" src="js/Colecciones/Productos.js"></script>
<script type="text/javascript" src="js/Colecciones/Usuarios.js"></script>
<script type="text/javascript" src="js/Vistas/vistaAtencionCliente.js"></script>
<script type="text/javascript" src="js/Vistas/vistaAyuda.js"></script>
<script type="text/javascript" src="js/Vistas/vistaCategoria.js"></script>
<script type="text/javascript" src="js/Vistas/vistaCategoria.js"></script>
<script type="text/javascript" src="js/Vistas/vistaDetalleProducto.js"></script>
<script type="text/javascript" src="js/Vistas/vistaDivsContainer.js"></script>
<script type="text/javascript" src="js/Vistas/vistaErrorAcceso.js"></script>
<script type="text/javascript" src="js/Vistas/vistaFormAcceso.js"></script>
<script type="text/javascript" src="js/Vistas/vistaFormRegistro.js"></script>
<script type="text/javascript" src="js/Vistas/vistaInfoLegal.js"></script>
<script type="text/javascript" src="js/Vistas/vistaInfoPerfil.js"></script>
<script type="text/javascript" src="js/Vistas/vistaInfoRegistro.js"></script>
<script type="text/javascript" src="js/Vistas/vistaListaProductos.js"></script>
<script type="text/javascript" src="js/Vistas/vistaMenuCategorias.js"></script>
<script type="text/javascript" src="js/Vistas/vistaPanelAdministracion.js"></script>
<script type="text/javascript" src="js/Vistas/vistaPerfilUsuario.js"></script>
<script type="text/javascript" src="js/Vistas/vistaProducto.js"></script>
<script type="text/javascript" src="js/Vistas/vistaProductoParaComprar.js"></script>
<script type="text/javascript" src="js/Vistas/vistaQuienesSomos.js"></script>
<script type="text/javascript" src="js/Vistas/vistaSubpanelAdminAltaProducto.js"></script>
<script type="text/javascript" src="js/Vistas/vistaSubpanelAdminCategorias.js"></script>
<script type="text/javascript" src="js/Vistas/vistaSubpanelAdminDetalleProducto.js"></script>
<script type="text/javascript" src="js/Vistas/vistaSubpanelAdminModificacionProducto.js"></script>
<script type="text/javascript" src="js/Vistas/vistaSubpanelAdminProductos.js"></script>
<script type="text/javascript" src="js/facebook.js"></script>
<script type="text/javascript" src="js/google.js"></script>
<script type="text/javascript" src="js/vendor/frameworkCookies.js"></script>
<script type="text/javascript" src="js/funcionesRouter.js"></script>
<script type="text/javascript" src="js/Router.js"></script>
<script type="text/javascript" src="js/App.js"></script>
</body>
</html>