CCOM4030
/
artesanias
Watch 5
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Saved

lyxaira.glass 4 years ago
parent
d710c8b2ff
commit
c739225bf5
1 changed files with 713 additions and 0 deletions
Split View Show Diff Stats
  1. 713
    0
      www/index.html

+ 713
- 0
www/index.html View File 

@@ -0,0 +1,713 @@
1 
+<!DOCTYPE html>
2 
+<!--
3 
+    Licensed to the Apache Software Foundation (ASF) under one
4 
+    or more contributor license agreements.  See the NOTICE file
5 
+    distributed with this work for additional information
6 
+    regarding copyright ownership.  The ASF licenses this file
7 
+    to you under the Apache License, Version 2.0 (the
8 
+    "License"); you may not use this file except in compliance
9 
+    with the License.  You may obtain a copy of the License at
10 
+
11 
+    http://www.apache.org/licenses/LICENSE-2.0
12 
+
13 
+    Unless required by applicable law or agreed to in writing,
14 
+    software distributed under the License is distributed on an
15 
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
16 
+     KIND, either express or implied.  See the License for the
17 
+    specific language governing permissions and limitations
18 
+    under the License.
19 
+-->
20 
+<html>
21 
+    <head>
22 
+        <!--
23 
+        Customize this policy to fit your own app's needs. For more guidance, see:
24 
+            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
25 
+        Some notes:
26 
+            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
27 
+            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
28 
+            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
29 
+                * Enable inline JS: add 'unsafe-inline' to default-src
30 
+        -->
31 
+        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />
32 
+        <!--these three for the calendar-->
33 
+        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
34 
+        <link href="css/robotocondensed.css" rel="stylesheet">
35 
+        <link rel="stylesheet" href="calendar_files/css/demo.css"/>
36 
+        <link rel="stylesheet" href="css/file.css"/>
37 
+        <link rel="stylesheet" href="calendar_files/css/theme1.css"/>
38 
+        <!--this is for the search bar-->
39 
+        <link rel = "stylesheet" href = "css/searchbar1.css">
40 
+
41 
+        <meta name="format-detection" content="telephone=no">
42 
+        <meta name="msapplication-tap-highlight" content="no">
43 
+        <meta name="viewport" content="initial-scale=1, width=device-width, height=device, heigth viewport-fit=cover">
44 
+        <link rel="stylesheet" type="text/css" href="css/index.css">
45 
+        <link rel="stylesheet" href="lib/OnsenUI/css/onsenui.css">
46 
+        <link rel="stylesheet" href="lib/OnsenUI/css/onsen-css-components.min.css">
47 
+        <script src="lib/OnsenUI/js/onsenui.min.js"></script>
48 
+        <script src="js/jquery_.js"></script>
49 
+
50 
+
51 
+    </head>
52 
+    <body>
53 
+
54 
+      <script type="text/javascript" src="js/saveLocal.js"></script>
55 
+
56 
+      <script> console.log(window.localStorage.getItem("MADERA")); </script>
57 
+
58 
+
59 
+        <ons-navigator swipeable animation="slide" id="myNavigator">
60 
+           <ons-page>
61 
+            <ons-toolbar>
62 
+                <div class="center">Directorio Artesanal</div>
63 
+                <div class="right"><img class="list-item__thumbnail" src="img/ICP.png"></div>
64 
+            </ons-toolbar>
65 
+            <ons-tabbar swipeable position="bottom" modifier="autogrow">
66 
+                <ons-tab page="home.html" label="Hogar" active></ons-tab>
67 
+                <ons-tab page="renglones.html" label="Artesanías"></ons-tab>
68 
+                <ons-tab page ="search.html" label="Buscar"> </ons-tab>
69 
+                <ons-tab page="ferias.html" label="Eventos"></ons-tab>
70 
+                <ons-tab page="instituto.html" label="ICP"></ons-tab>
71 
+            </ons-tabbar>
72 
+        </ons-page>
73 
+        </ons-navigator>
74 
+
75 
+
76 
+<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
77 
+
78 
+        <template id="home.html">
79 
+
80 
+            <ons-page id="home" class="red">
81 
+
82 
+                <ons-card id="azar">
83 
+
84 
+                    <!--<div class="title" id="Title"></div>-->
85 
+                    <div id="image"></div><br>
86 
+                    <div class="content" id="Content"></div>
87 
+
88 
+                    <script type="text/javascript" src="js/azar.js"> </script>
89 
+
90 
+                </ons-card>
91 
+
92 
+
93 
+            </ons-page>
94 
+
95 
+        </template>
96 
+
97 
+<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
98 
+
99 
+        <template id="artesanos.html">
100 
+            <ons-page id="artesanos">
101 
+
102 
+                <ons-toolbar>
103 
+                    <div class="left"><ons-back-button>Atrás</ons-back-button></div>
104 
+                    <div class="center"></div>
105 
+                </ons-toolbar>
106 
+
107 
+                <ons-pull-hook id="pull-hook" threshold-height="120px">
108 
+                    <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
109 
+                </ons-pull-hook>
110 
+
111 
+                <ons-list id="artesanos-list" src="">
112 
+                    <ons-list-header>Artesanos</ons-list-header>
113 
+                </ons-list>
114 
+
115 
+                <script>
116 
+
117 
+                    ons.getScriptPage().onInit = function () {
118 
+                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
119 
+
120 
+
121 
+                        //var File = this.data.title.toUpperCase() + '.json' ;
122 
+                        var Esp = this.data.esp.split(', ');
123 
+                        var artesanos_json = this.data.json;
124 
+
125 
+
126 
+                        //Convertir en mayuscula primera letra del string.
127 
+                        for(var i=0; i<Esp.length; i++) {
128 
+                            Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
129 
+                        };
130 
+
131 
+                        var pullHook = document.getElementById('pull-hook');
132 
+                        var icon = document.getElementById('pull-hook-icon');
133 
+                        pullHook.addEventListener('changestate', function (event) {
134 
+                            switch (event.state) {
135 
+                                case 'initial':
136 
+                                    icon.setAttribute('icon', 'fa-arrow-down');
137 
+                                    icon.removeAttribute('rotate');
138 
+                                    icon.removeAttribute('spin');
139 
+                                    break;
140 
+                                case 'preaction':
141 
+                                    icon.setAttribute('icon', 'fa-arrow-down');
142 
+                                    icon.setAttribute('rotate', '180');
143 
+                                    icon.removeAttribute('spin');
144 
+                                    break;
145 
+                                case 'action':
146 
+                                    icon.setAttribute('icon', 'fa-spinner');
147 
+                                    icon.removeAttribute('rotate');
148 
+                                    icon.setAttribute('spin', true);
149 
+                                    break;
150 
+                            }
151 
+                        });
152 
+
153 
+                        var getArtesania = function (num) {
154 
+
155 
+                            var Artesanos = ``;
156 
+
157 
+                            console.log('Filtrado de ',Esp[num])
158 
+
159 
+                            var results = [];
160 
+                            var searchVal = "my Name";
161 
+                            for (var i=0 ; i < artesanos_json.length ; i++)
162 
+                            {
163 
+                                if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
164 
+                                    results.push(artesanos_json[i]);
165 
+                                }
166 
+                            }
167 
+
168 
+          /*var arr1=artesanos_json.filter(function(item){
169 
+              return item.Nombre=="Ana";
170 
+          });*/
171 
+
172 
+                            for(var i=0; i<results.length; i++) {
173 
+
174 
+                                //if(Esp[num] in artesanos_json.) {}
175 
+                                Artesanos=Artesanos+`<a id='home.html'>${results[i].Nombre} | ${results[i].Municipio}<br>`
176 
+                                //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
177 
+                            }
178 
+
179 
+
180 
+                            return {
181 
+                                name: Esp[num],
182 
+                                artesan: Artesanos
183 
+                            };
184 
+                        };
185 
+
186 
+                        var getData = function () {
187 
+                            const data = [];
188 
+                            for (var i = 0; i < Esp.length; i++) {
189 
+                                data.push(getArtesania(i));
190 
+                            }
191 
+                            return data;
192 
+                        };
193 
+
194 
+
195 
+                        var createArtesano = function (Artesano) {
196 
+
197 
+                            return ons.createElement(`
198 
+              <ons-list-item expandable tappable>
199 
+                <div class="center" >${Artesano.Nombre}</div>
200 
+                <div class="expandable-content"> Municipio: ${Artesano.Municipio}<br>
201 
+                                                 Tel\u00e9fono: ${Artesano["Telefono 1"]}<br>
202 
+                                                 Correo Electr\u00f3nico: ${Artesano["E-mail"]}<br>
203 
+                                                 </div>
204 
+              </ons-list-item>`
205 
+                                                    );
206 
+                        };
207 
+
208 
+                        //var Artesanias = getData();
209 
+                        //artesanos_json
210 
+
211 
+                        for (Artesano of artesanos_json) {
212 
+
213 
+                            var cont = 0;
214 
+                            var lista = document.getElementById('artesanos-list');
215 
+
216 
+                            //Recopilar datos no vacios.
217 
+                            if (Artesano.Municipio.trim().length != 0) {
218 
+                                cont ++;
219 
+                            }
220 
+                            if (Artesano["Telefono 1"].trim().length != 0) {
221 
+                                cont ++;
222 
+                            }
223 
+                            if (Artesano["E-mail"].trim().length != 0) {
224 
+                                cont ++;
225 
+                            }
226 
+                            if (Artesano.Especificacion.trim().length != 0) {
227 
+                                cont ++;
228 
+                            }
229 
+
230 
+
231 
+                            //info a pasar
232 
+                            //'title':'${Artesano.Nombre}','esp': '${info}'
233 
+                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["E-mail"]}', esp: '${Artesano.Especificacion}' } })" tappable>
234 
+                        <div class="title">${Artesano.Nombre}</div>
235 
+                    </ons-list-item>`);
236 
+
237 
+
238 
+                            if(cont == 0){
239 
+                                console.log(Artesano.Nombre+' no tiene ningun tipo de informacion.');
240 
+                                //return ons.createElement(``);
241 
+                            }
242 
+                            else {
243 
+                                lista.appendChild(item);
244 
+                            }
245 
+
246 
+                        };
247 
+
248 
+                    };
249 
+                </script>
250 
+
251 
+                <style>
252 
+                    .pull-hook-content {
253 
+                        color: #333;
254 
+                        transition: transform .25s ease-in-out;
255 
+                    }
256 
+                </style>
257 
+
258 
+            </ons-page>
259 
+
260 
+        </template>
261 
+
262 
+<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
263 
+
264 
+         <template id="artesanias.html">
265 
+             <ons-page id="artesanias">
266 
+
267 
+                 <ons-toolbar>
268 
+                     <div class="left"><ons-back-button>Atrás</ons-back-button></div>
269 
+                     <div class="center"></div>
270 
+                 </ons-toolbar>
271 
+
272 
+                 <ons-pull-hook id="pull-hook" threshold-height="120px">
273 
+                     <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
274 
+                 </ons-pull-hook>
275 
+
276 
+                 <ons-list id="artesania-list" src="">
277 
+                     <ons-list-header>Artesanias</ons-list-header>
278 
+                 </ons-list>
279 
+
280 
+                 <script>
281 
+
282 
+                     ons.getScriptPage().onInit = function () {
283 
+                         this.querySelector('ons-toolbar div.center').textContent = this.data.title;
284 
+
285 
+                         //var File = this.data.title.toUpperCase() + '.json' ;
286 
+                         var Esp = this.data.esp.split(', ');
287 
+                         var artesanos_json = this.data.json;
288 
+
289 
+                         //Convertir en mayuscula primera letra del string.
290 
+                         for(var i=0; i<Esp.length; i++) {
291 
+                             Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
292 
+                         };
293 
+
294 
+                         var pullHook = document.getElementById('pull-hook');
295 
+                         var icon = document.getElementById('pull-hook-icon');
296 
+                         pullHook.addEventListener('changestate', function (event) {
297 
+                             switch (event.state) {
298 
+                                 case 'initial':
299 
+                                     icon.setAttribute('icon', 'fa-arrow-down');
300 
+                                     icon.removeAttribute('rotate');
301 
+                                     icon.removeAttribute('spin');
302 
+                                     break;
303 
+                                 case 'preaction':
304 
+                                     icon.setAttribute('icon', 'fa-arrow-down');
305 
+                                     icon.setAttribute('rotate', '180');
306 
+                                     icon.removeAttribute('spin');
307 
+                                     break;
308 
+                                 case 'action':
309 
+                                     icon.setAttribute('icon', 'fa-spinner');
310 
+                                     icon.removeAttribute('rotate');
311 
+                                     icon.setAttribute('spin', true);
312 
+                                     break;
313 
+                             }
314 
+                         });
315 
+
316 
+                         var getArtesania = function (num) {
317 
+
318 
+                             var Artesanos = ``,
319 
+                                 ArtesanosInfo = ``;
320 
+
321 
+                             //console.log('Filtrado de ',Esp[num])
322 
+
323 
+                             var results = [];
324 
+                             var searchVal = "my Name";
325 
+                             for (var i=0 ; i < artesanos_json.length ; i++)
326 
+                             {
327 
+                                 if (artesanos_json[i].Especificacion.includes(Esp[num])) {
328 
+                                     results.push(artesanos_json[i]);
329 
+                                 }
330 
+                             }
331 
+
332 
+                             /*var arr1=artesanos_json.filter(function(item){
333 
+                             return item.Nombre=="Ana";
334 
+                             });*/
335 
+
336 
+                             for(var i=0; i<results.length; i++) {
337 
+
338 
+                                 //if(Esp[num] in artesanos_json.) {}
339 
+                                 Artesanos+=`${results[i].Nombre}|`
340 
+                                 ArtesanosInfo+=`${results[i].Municipio}|${results[i]["Telefono 1"]}|${results[i]["E-mail"]}|${results[i].Especificacion}&&`
341 
+                                 //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
342 
+                             }
343 
+
344 
+                             return {
345 
+                                 name: Esp[num],
346 
+                                 artesan: Artesanos,
347 
+                                 info: ArtesanosInfo
348 
+                             };
349 
+                         };
350 
+
351 
+                         var getData = function () {
352 
+                             const data = [];
353 
+                             for (var i = 0; i < Esp.length; i++) {
354 
+                                 data.push(getArtesania(i));
355 
+                             }
356 
+                             return data;
357 
+                         };
358 
+                         var createArtesania = function (Artesania) {
359 
+
360 
+                             //console.log('Devuelto elemento')
361 
+                             var listaArt=``;
362 
+                             var arts = Artesania.artesan.split('|');
363 
+                             var artsInfo = Artesania.info.split('&&');
364 
+
365 
+                             for(var i=0; i<arts.length; i++) {
366 
+                                 var lot = artsInfo[i].split('|'),
367 
+                                     mun = lot[0],
368 
+                                     tel = lot[1],
369 
+                                     email = lot[2],
370 
+                                     esp = lot[3];
371 
+
372 
+                                 listaArt += `<ons-item tappable onclick="myNavigator.pushPage('artesano.html', {data: {title:'${arts[i]}', mun: '${mun}', tel: '${tel}', email: '${email}', esp: '${esp}'}} )" ><div class="center">`+ arts[i] +`</div></ons-item><br>`;
373 
+                             }
374 
+
375 
+
376 
+                             return ons.createElement(`
377 
+              <ons-list-item expandable tappable>
378 
+                <div class="center" >${Artesania.name}</div>
379 
+                <div class="expandable-content">Artesanos que trabajan con ${Artesania.name}
380 
+                <ons-card>${listaArt}</ons-card></div>
381 
+                </ons-list-item>`
382 
+                                                     );
383 
+                         };
384 
+
385 
+                         var Artesanias = getData();
386 
+
387 
+                         for (Art of Artesanias) {
388 
+
389 
+                             var Artesania = createArtesania(Art);
390 
+                             document.getElementById('artesania-list').appendChild(Artesania);
391 
+                         };
392 
+                         pullHook.onAction = function (done) {
393 
+
394 
+                             setTimeout(function() {
395 
+                                 document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
396 
+                                 done();
397 
+                             }, 400);
398 
+                         }
399 
+
400 
+                     };
401 
+                 </script>
402 
+
403 
+                 <style>
404 
+                     .pull-hook-content {
405 
+                         color: #333;
406 
+                         transition: transform .25s ease-in-out;
407 
+                     }
408 
+                 </style>
409 
+             </ons-page>
410 
+        </template>
411 
+
412 
+<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
413 
+
414 
+        <template id="artesano.html">
415 
+            <ons-page id="artesano">
416 
+                <ons-toolbar>
417 
+                    <div class="left"><ons-back-button>Atras</ons-back-button></div>
418 
+                    <div class="center"></div>
419 
+                </ons-toolbar>
420 
+                <body>
421 
+                    <ons-card id="all"></ons-card>
422 
+                </body>
423 
+                <script>
424 
+                    ons.getScriptPage().onInit = function () {
425 
+                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
426 
+
427 
+                        var info = ``,
428 
+                            mun = this.data.mun,
429 
+                            tel = this.data.tel,
430 
+                            email = this.data.email,
431 
+                            esp = this.data.esp;
432 
+
433 
+                        if(mun.trim() != '') {
434 
+                            info = info + `Municipio: ` + mun + `<br>`;
435 
+                        }
436 
+                        if(tel.trim() != '') {
437 
+                            info = info + `Tel\u00e9fono: <a href="tel:+1` + tel + `">` + tel + `</a><br>`;
438 
+                        }
439 
+                        if(email.trim() != '') {
440 
+                            info = info + `Correo Electr\u00f3nico: ` + email + `<br>`;
441 
+                        }
442 
+                        if(esp.trim() != '') {
443 
+                            info = info + `Trabaja con: ` + esp + `<br>`;
444 
+                        }
445 
+
446 
+                        document.getElementById("all").innerHTML = `${info}`;
447 
+
448 
+                    }
449 
+                </script>
450 
+
451 
+            </ons-page>
452 
+        </template>
453 
+
454 
+<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
455 
+
456 
+        <script>
457 
+            var Madera = JSON.parse(window.localStorage.getItem("TODOS"));
458 
+            function filter(){
459 
+
460 
+
461 
+                // var request = new XMLHttpRequest()
462 
+                // request.open('GET','json/MADERA.json',true)
463 
+                // request.onload = function(){
464 
+                //   var Madera = JSON.parse(this.response)
465 
+                // }
466 
+                // request.send()
467 
+                // var input = document.getElementById('searchbar').value
468 
+                // var firstwood = Madera[0].Nombre
469 
+                // ons.notification.alert('Searched for: ' + firstwood)
470 
+                var input = document.getElementById('searchbar').value
471 
+                var x = document.getElementsByClassName('artists');
472 
+                input = input.trim().toLowerCase();
473 
+                if (input.length == 0){
474 
+                    for (i = 0; Madera.length; i++){
475 
+                        x[i].style.display = "list-item";
476 
+                    }
477 
+                }
478 
+                else{
479 
+                    var foundesp = 0;
480 
+                    for (i = 0; i < Madera.length; i++){
481 
+                        console.log("damn")
482 
+                        //try checking the especificacion first
483 
+                        var especificaciones = Madera[i].Especificaciones1;
484 
+                        especificaciones = especificaciones.split(';');
485 
+                        for (var j = 0; j < especificaciones.length; j++){
486 
+                            var especificacion = especificaciones[j];
487 
+                            especificacion = especificacion.trim().toLowerCase();
488 
+                            if (input == especificacion){
489 
+                                x[i].style.display = "list-item";
490 
+                                foundesp = 1;
491 
+                                break;
492 
+                            }
493 
+                            else{
494 
+                                x[i].style.display = "none";
495 
+                            }
496 
+                        }
497 
+                    }
498 
+                    if (foundesp != 1){
499 
+                        input = input.trim().toLowerCase().split(' ')
500 
+                        //changing the input into something that can be searched
501 
+                        for (var i = 0; i < input.length; i++){
502 
+                            input[i] = input[i].charAt(0).toUpperCase() + input[i].slice(1);
503 
+                        }
504 
+                        console.log(input);
505 
+                        for(var i = 0; i < Madera.length; i++){
506 
+                            count = 0;
507 
+                            artist = Madera[i].Nombre.trim().split(' ');
508 
+                            for (k = 0; k < input.length; k++){
509 
+                                for (var l = 0; l < artist.length; l++){
510 
+                                    if(artist[l] == input[k]){
511 
+                                        x[i].style.display = "list-item";
512 
+                                        break;
513 
+                                    }
514 
+                                    else{
515 
+                                        x[i].style.display = "none";
516 
+                                    }
517 
+                                }
518 
+                            }
519 
+                        }
520 
+                    }
521 
+                }
522 
+            }
523 
+        </script>
524 
+
525 
+        <template id="search.html">
526 
+            <ons-page id="Buscar">
527 
+
528 
+                <p style="text-align: center; margin-top: 10px;">
529 
+                    <ons-search-input placeholder="Search" id = "searchbar"
530 
+                                      onchange = "filter()"
531 
+                                      ></ons-search-input>
532 
+                </p>
533 
+
534 
+                <ons-list id="results" src="">
535 
+                </ons-list>
536 
+
537 
+                <script>
538 
+                    for (i = 0; i < Madera.length;i++){
539 
+                        var artesano = ons.createElement(`<ons-list-item class = "artists"
540 
+                        onclick="myNavigator.pushPage('artesano.html', { data: {title: '${Madera[i].Nombre}', mun: '${Madera[i].Municipio}', tel: '${Madera[i]["Telefono1"]}', email: '${Madera[i]["E-mail1"]}', esp: '${Madera[i].Especificaciones1}' } })" tappable>
541 
+                        <div>${Madera[i].Nombre}</div>
542 
+                    </ons-list-item>`);
543 
+                        // var artesano = ons.createElement(`
544 
+                        //   <ons-list-item class = "artists">
545 
+                        //     <div class="center" >${Madera[i].Nombre}</div>
546 
+                        //   </ons-list-item>`
547 
+                        // );
548 
+                        document.getElementById('results').appendChild(artesano);
549 
+                    }
550 
+                </script>
551 
+
552 
+            </ons-page>
553 
+        </template>
554 
+
555 
+        <!-- ---------------------------------------------------------------------------------------------------------------------------------------- -->
556 
+
557 
+        <template id= "artesano.html">
558 
+            <ons-page id = "artesano">
559 
+                <ons-toolbar>
560 
+                    <div class = "left"> <ons-back-button> Atras </ons-back-button></div>
561 
+                    <div class = "center"></div>
562 
+                </ons-toolbar>
563 
+                <body>
564 
+                    <ons-card id="all"></ons-card>
565 
+                </body>
566 
+                <script>
567 
+                    ons.getScriptPage().onInit = function () {
568 
+                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
569 
+
570 
+                        var info = ``,
571 
+                            mun = this.data.mun,
572 
+                            tel = this.data.tel,
573 
+                            email = this.data.email,
574 
+                            esp = this.data.esp;
575 
+
576 
+                        if(mun.trim() != '') {
577 
+                            info = info + `Municipio: ` + mun + `<br>`;
578 
+                        }
579 
+                        if(tel.trim() != '') {
580 
+                            info = info + `Tel\u00e9fono: <a href="tel:+1` + tel + `">` + tel + `</a><br>`;
581 
+                        }
582 
+                        if(email.trim() != '') {
583 
+                            info = info + `Correo Electr\u00f3nico: ` + email + `<br>`;
584 
+                        }
585 
+                        if(esp.trim() != '') {
586 
+                            info = info + `Trabaja con: ` + esp + `<br>`;
587 
+                        }
588 
+
589 
+                        document.getElementById("all").innerHTML = `${info}`;
590 
+
591 
+                    }
592 
+                </script>
593 
+            </ons-page>
594 
+        </template>
595 
+
596 
+<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
597 
+
598 
+        <template id="renglones.html">
599 
+            <ons-page id="renglones">
600 
+
601 
+            <!--div class="search-bar">
602 
+                 <p style="text-align: center; margin-top: 10px;">
603 
+                    <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"
604 
+           style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
605 
+                </p>
606 
+            </div-->
607 
+
608 
+            <ons-card id="list">
609 
+              <script type="text/javascript" src="js/renglones.js"></script>
610 
+            </ons-card>
611 
+
612 
+                <!--Javascript function to hide other open expandables-->
613 
+                <script>
614 
+                    const hideAll = () => {
615 
+                        Array.from(document.querySelector('#list').children)
616 
+                            .forEach(item => {
617 
+                                if (item.expanded) {
618 
+                                    item.hideExpansion();
619 
+                                }
620 
+                            });
621 
+                        };
622 
+                </script>
623 
+
624 
+                <style>
625 
+                    .intro {
626 
+                        text-align: center;
627 
+                        padding: 20px;
628 
+                        margin-top: 30px;
629 
+                    }
630 
+
631 
+                    ons-card {
632 
+                        cursor: pointer;
633 
+                        color: #333;
634 
+                    }
635 
+
636 
+                    .card__title,
637 
+                    .card--material__title {
638 
+                        font-size: 15px;
639 
+                    }
640 
+                </style>
641 
+            </ons-page>
642 
+
643 
+
644 
+        </template>
645 
+
646 
+<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
647 
+
648 
+        <template id="ferias.html">
649 
+            <ons-page id="ferias">
650 
+                <!--<ons-card>
651 
+
652 
+                <div id = "caleandar" class = "calendar" style="margin-top: 20px;">
653 
+                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
654 
+                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
655 
+                </div>
656 
+
657 
+                </ons-card>-->
658 
+                <br><br><br>
659 
+                <button onclick="redirect()">Pasar a la pagina de eventos</button>
660 
+
661 
+              <script>
662 
+              function redirect() {
663 
+                location.replace("https://facebook.com/icppr")
664 
+              }
665 
+              </script>
666 
+            </ons-page>
667 
+        </template>
668 
+
669 
+<!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
670 
+
671 
+        <template id="instituto.html">
672 
+            <ons-page id="instituto">
673 
+                <ons-card>
674 
+
675 
+                    <h1>Instituto de Cultura Puertorriqueña</h1>
676 
+                    <h3>Ven, descubre lo que nuestra riqueza cultural puertorriqueña tiene para tí.<br> Disfrútala, es tu identidad.
677 
+                    </h3>
678 
+
679 
+                    <body>
680 
+                        <br>
681 
+                        El Instituto de Cultura Puertorriqueña (ICP) tiene como misión investigar, conservar, promover y divulgar la cultura puertorriqueña en su diversidad y complejidad. Con la memoria y la promesa de la cultura, los distintos niveles, sectores, edades e intereses de la comunidad crean el conjunto de modos de vida, costumbres y manifestaciones artísticas que nos identifica como país. El ICP existe para preservar y divulgar estos saberes, difundir internacionalmente nuestro talento y enriquecer el amor a lo propio.
682 
+                        <br><br>
683 
+                        Nuestras tradiciones no son rígidos objetos de museo, sino actividades vivas en constante renovación y reapropiación, según van también desarrollándose nuevas tradiciones. El respeto a la diversidad, a lo híbrido, a lo apropiado y a lo replanteado también son parte esencial de esta institución que busca activamente la colaboración de todos en un quehacer que debe ser siempre compartido de la mano con su ingente diversidad.
684 
+                        <br><br>
685 
+                        Prof. Carlos R. Ruiz Cortés<br>
686 
+                        Director Ejecutivo<br>
687 
+                        Instituto de Cultura Puertorriqueña<br>
688 
+                        Directorio Artesanal Cultural PR <img src="img/gobierno.png" style="width:35px;height:35px;border:0;">
689 
+                        <br><br>
690 
+                    </body>
691 
+
692 
+
693 
+                    Visita nuestra <a href="https://www.icp.pr.gov/">Página Web</a> o síguenos en nuestras redes sociales: <br>
694 
+                    <a href="https://twitter.com/icppr"><img src="img/twitter.png" alt="Twitter" style="width:35px;height:35px;border:0;">
695 
+                    </a>
696 
+                    <a href="https://facebook.com/icppr"><img src="img/facebook.png" alt="Facebook" style="width:35px;height:35px;border:0;">
697 
+                    </a>
698 
+                    <a href="https://youtube.com/user/icppr"><img src="img/youtube.png" alt="Youtube" style="width:35px;height:35px;border:0;">
699 
+                    </a>
700 
+                    <a href="https://instagram.com/icppr"><img src="img/instagram.png" alt="Instagram" style="width:35px;height:35px;border:0;">
701 
+                    </a>
702 
+                    <!--</div>
703 
+                <!--</p>-->
704 
+                </ons-card>
705 
+            </ons-page>
706 
+        </template>
707 
+
708 
+  <script src="js/load.js"></script>
709 
+
710 
+        <script type="text/javascript" src="cordova.js"></script>
711 
+        <script type="text/javascript" src="js/index.js"></script>
712 
+    </body>
713 
+</html>