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

Artesanias al azar

Emmanuel 4 years ago
parent
5da114af06
commit
d5d63d5dee
18 changed files with 1188 additions and 166 deletions
Unified View Show Diff Stats
  1. 479
    0
      www/Oldindex.html
  2. BIN
      www/img/0.png
  3. BIN
      www/img/1.png
  4. BIN
      www/img/10.png
  5. BIN
      www/img/2.png
  6. BIN
      www/img/3.png
  7. BIN
      www/img/4.png
  8. BIN
      www/img/5.png
  9. BIN
      www/img/6.png
  10. BIN
      www/img/7.png
  11. BIN
      www/img/8.png
  12. BIN
      www/img/9.png
  13. 267
    161
      www/index.html
  14. 29
    0
      www/js/azar.js
  15. 28
    0
      www/js/oldrenglones.js
  16. 13
    5
      www/js/renglones.js
  17. 1
    0
      www/json/azar.json
  18. 371
    0
      www/newerIndex.html

+ 479
- 0
www/Oldindex.html View File

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 
+
21 
+<html>
22 
+    <head>
23 
+        <!--
24 
+        Customize this policy to fit your own app's needs. For more guidance, see:
25 
+            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
26 
+        Some notes:
27 
+            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
28 
+            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
29 
+            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
30 
+                * Enable inline JS: add 'unsafe-inline' to default-src
31 
+        -->
32 
+        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *; img-src 'self' data: content:;">
33 
+        <!--these three for the calendar-->
34 
+        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
35 
+        <link rel="stylesheet" href="calendar_files/css/demo.css"/>
36 
+        <link rel="stylesheet" href="calendar_files/css/theme1.css"/>
37 
+        <!--this is for the search bar-->
38 
+        <link rel = "stylesheet" href = "css/searchbar1.css">
39 
+
40 
+        <meta name="format-detection" content="telephone=no">
41 
+        <meta name="msapplication-tap-highlight" content="no">
42 
+        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
43 
+        <link rel="stylesheet" type="text/css" href="css/index.css">
44 
+        <link rel="stylesheet" href="lib/OnsenUI/css/onsenui.css">
45 
+        <link rel="stylesheet" href="lib/OnsenUI/css/onsen-css-components.min.css">
46 
+        <script src="lib/OnsenUI/js/onsenui.min.js"></script>
47 
+        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
48 
+
49 
+    </head>
50 
+    <body>
51 
+
52 
+        <ons-navigator swipeable animation="slide" id="myNavigator">
53 
+           <ons-page>
54 
+            <ons-toolbar>
55 
+                <div class="center">Instituto de Cultura</div>
56 
+            </ons-toolbar>
57 
+            <ons-tabbar swipeable position="bottom">
58 
+                <ons-tab page="home.html" label="Hogar"></ons-tab>
59 
+                <ons-tab page="renglones.html" label="Artesanías"active></ons-tab>
60 
+                <ons-tab page="ferias.html" label="Ferias"></ons-tab>
61 
+                <ons-tab page="instituto.html" label="ICP"></ons-tab>
62 
+            </ons-tabbar>
63 
+        </ons-page>
64 
+        </ons-navigator>
65 
+
66 
+	<template id="artesanias.html">
67 
+	  <ons-page id="artesanias">
68 
+
69 
+	    <ons-toolbar>
70 
+	      <div class="left"><ons-back-button>Atrás</ons-back-button></div>
71 
+	      <div class="center"></div>
72 
+	    </ons-toolbar>
73 
+
74 
+    <ons-pull-hook id="pull-hook" threshold-height="120px">
75 
+      <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
76 
+    </ons-pull-hook>
77 
+
78 
+    <ons-list id="artesania-list">
79 
+      <ons-list-header>Pull to refresh</ons-list-header>
80 
+    </ons-list>
81 
+
82 
+        <script>
83 
+      ons.getScriptPage().onInit = function () {
84 
+        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
85 
+        var pullHook = document.getElementById('pull-hook');
86 
+        var icon = document.getElementById('pull-hook-icon');
87 
+        pullHook.addEventListener('changestate', function (event) {
88 
+          switch (event.state) {
89 
+            case 'initial':
90 
+              icon.setAttribute('icon', 'fa-arrow-down');
91 
+              icon.removeAttribute('rotate');
92 
+              icon.removeAttribute('spin');
93 
+              break;
94 
+            case 'preaction':
95 
+              icon.setAttribute('icon', 'fa-arrow-down');
96 
+              icon.setAttribute('rotate', '180');
97 
+              icon.removeAttribute('spin');
98 
+              break;
99 
+            case 'action':
100 
+              icon.setAttribute('icon', 'fa-spinner');
101 
+              icon.removeAttribute('rotate');
102 
+              icon.setAttribute('spin', true);
103 
+              break;
104 
+          }
105 
+        });
106 
+
107 
+        var getArtesania = function (num) {
108 
+          const names = ['Palo', 'Cara', 'Guitarra', 'Pilon', 'Raqueta', 'Envase', 'Vasija', 'Caparazon', 'Libros', 'Persona'];
109 
+          return {
110 
+            name: names[num]
111 
+          };
112 
+        };
113 
+        var getData = function () {
114 
+          const data = [];
115 
+          for (var i = 0; i < 10; i++) {
116 
+            data.push(getArtesania(i));
117 
+          }
118 
+          return data;
119 
+        };
120 
+        var createArtesania = function (Artesania) {
121 
+          return ons.createElement(`
122 
+              <ons-list-item expandable tappable>
123 
+                <div class="center" >${Artesania.name}</div>
124 
+      	        <div class="expandable-content"> -Artesanos que trabajan con ${Artesania.name}- <br><br> Luis Lao | Naguabo
125 
+							<br> <a id='home.html'>Jorge Rivera | Naguabo</a> </div>
126 
+              </ons-list-item>
127 
+            `
128 
+          );
129 
+        };
130 
+        var Artesanias = getData();
131 
+        for (Art of Artesanias) {
132 
+          var Artesania = createArtesania(Art);
133 
+          document.getElementById('artesania-list').appendChild(Artesania);
134 
+        };
135 
+        pullHook.onAction = function (done) {
136 
+          setTimeout(function() {
137 
+            document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
138 
+            done();
139 
+          }, 400);
140 
+        }
141 
+      };
142 
+        </script>
143 
+
144 
+        <style>
145 
+          .pull-hook-content {
146 
+            color: #333;
147 
+            transition: transform .25s ease-in-out;
148 
+          }
149 
+        </style>
150 
+      </ons-page>
151 
+    </template>
152 
+
153 
+        <template id="home.html">
154 
+
155 
+	      <ons-page id="home">
156 
+
157 
+                <p style="text-align: center;">
158 
+					Aqui los datos :
159 
+                </p>
160 
+
161 
+              <ons-button modifier="large"><a href="madera.html">Madera</a></ons-button>
162 
+
163 
+            </ons-page>
164 
+
165 
+
166 
+        </template>
167 
+
168 
+        <template id="renglones.html">
169 
+
170 
+            <ons-page id="renglones">
171 
+
172 
+	    <!--ons-card id="renglones-list" onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Madera'})">
173 
+		<p> Aqui los renglones </p>
174 
+	    </ons-card-->
175 
+
176 
+                <div class="search-bar">
177 
+                     <p style="text-align: center; margin-top: 10px;">
178 
+                        <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)" style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
179 
+                    </p>
180 
+                </div>
181 
+
182 
+                <ons-list id="list">
183 
+                <script type="text/javascript" src="js/renglones.js"></script>
184 
+                </ons-list>
185 
+
186 
+
187 
+                <!--<ons-list>
188 
+                    <ons-list-header>Renglones</ons-list-header>
189 
+
190 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Madera'})">
191 
+                        <div class="center">Madera</div>
192 
+                        <div class="right"><img class="list-item__thumbnail" src="img/madera.png"></div>
193 
+                    </ons-list-item>
194 
+
195 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Labores en aguja'})">
196 
+                        <div class="center">Labores en aguja</div>
197 
+                        <div class="right"><img class="list-item__thumbnail" src="img/agujas.png"></div>
198 
+                    </ons-list-item>
199 
+
200 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Textiles'})">
201 
+                        <div class="center">Textiles</div>
202 
+                        <div class="right"><img class="list-item__thumbnail" src="img/textiles.png"></div>
203 
+                    </ons-list-item>
204 
+
205 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Barro'})">
206 
+                        <div class="center">Barro</div>
207 
+                        <div class="right"><img class="list-item__thumbnail" src="img/barro.png"></div>
208 
+                    </ons-list-item>
209 
+
210 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Instrumentos Típicos'})">
211 
+                        <div class="center">Instrumentos Típicos</div>
212 
+                        <div class="right"><img class="list-item__thumbnail" src="img/instrumentos.png"></div>
213 
+                    </ons-list-item>
214 
+
215 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Juguetes tradicionales'})">
216 
+                        <div class="center">Juguetes tradicionales</div>
217 
+                        <div class="right"><img class="list-item__thumbnail" src="img/juguetes.png"></div>
218 
+                    </ons-list-item>
219 
+
220 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Fibras'})">
221 
+                        <div class="center">Fibras</div>
222 
+                        <div class="right"><img class="list-item__thumbnail" src="img/fibras.png"></div>
223 
+                    </ons-list-item>
224 
+
225 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Caretas'})">
226 
+                        <div class="center">Caretas</div>
227 
+                        <div class="right"><img class="list-item__thumbnail" src="img/caretas.png"></div>
228 
+                    </ons-list-item>
229 
+
230 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Cuero'})">
231 
+                        <div class="center">Cuero</div>
232 
+                        <div class="right"><img class="list-item__thumbnail" src="img/cuero.png"></div>
233 
+                    </ons-list-item>
234 
+
235 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Metal'})">
236 
+                        <div class="center">Metal</div>
237 
+                        <div class="right"><img class="list-item__thumbnail" src="img/metal.png"></div>
238 
+                    </ons-list-item>
239 
+
240 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Piedras'})">
241 
+                        <div class="center">Piedras</div>
242 
+                        <div class="right"><img class="list-item__thumbnail" src="img/piedras.png"></div>
243 
+                    </ons-list-item>
244 
+
245 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Papel'})">
246 
+                        <div class="center">Papel</div>
247 
+                        <div class="right"><img class="list-item__thumbnail" src="img/papel.png"></div>
248 
+                    </ons-list-item>
249 
+
250 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Bambú'})">
251 
+                        <div class="center">Bambú</div>
252 
+                        <div class="right"><img class="list-item__thumbnail" src="img/bambu.png"></div>
253 
+                    </ons-list-item>
254 
+
255 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Cristal'})">
256 
+                        <div class="center">Cristal</div>
257 
+                        <div class="right"><img class="list-item__thumbnail" src="img/cristal.png"></div>
258 
+                    </ons-list-item>
259 
+
260 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Higüera'})">
261 
+                        <div class="center">Higüera</div>
262 
+                        <div class="right"><img class="list-item__thumbnail" src="img/higuera.png"></div>
263 
+                    </ons-list-item>
264 
+
265 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Desechos Marinos'})">
266 
+                        <div class="center">Desechos Marinos</div>
267 
+                        <div class="right"><img class="list-item__thumbnail" src="img/desechos.png"></div>
268 
+                    </ons-list-item>
269 
+
270 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Porcelanicrón'})">
271 
+                        <div class="center">Porcelanicrón</div>
272 
+                        <div class="right"><img class="list-item__thumbnail" src="img/porcelanicron.png"></div>
273 
+                    </ons-list-item>
274 
+
275 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Tabacos'})">
276 
+                        <div class="center">Tabacos</div>
277 
+                        <div class="right"><img class="list-item__thumbnail" src="img/tabacos.png"></div>
278 
+                    </ons-list-item>
279 
+
280 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Semillas'})">
281 
+                        <div class="center">Semillas</div>
282 
+                        <div class="right"><img class="list-item__thumbnail" src="img/semillas.png"></div>
283 
+                    </ons-list-item>
284 
+
285 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Aromatización'})">
286 
+                        <div class="center">Aromatización</div>
287 
+                        <div class="right"><img class="list-item__thumbnail" src="img/aromatizacion.png"></div>
288 
+                    </ons-list-item>
289 
+
290 
+                    <ons-list-item onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Dulces Típicos'})">
291 
+                        <div class="center">Dulces Típicos</div>
292 
+                        <div class="right"><img class="list-item__thumbnail" src="img/dulces.png"></div>
293 
+                    </ons-list-item>
294 
+
295 
+                    </ons-list>-->
296 
+
297 
+
298 
+   		<!--<ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Madera'})">
299 
+	          <div class="title">Madera</div>
300 
+                <div class="right"><img class="list-item__thumbnail" src="img/madera.png"></div>
301 
+	        </ons-card>
302 
+
303 
+
304 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Labores en aguja'})">
305 
+	          <div class="title">Labores en aguja</div>
306 
+	        </ons-card>
307 
+
308 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Textiles'})">
309 
+	          <div class="title">Textiles</div>
310 
+	        </ons-card>
311 
+
312 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Barro'})">
313 
+	          <div class="title">Barro</div>
314 
+	        </ons-card>
315 
+
316 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Instrumentos Típicos'})">
317 
+	          <div class="title">Instrumentos Típicos</div>
318 
+	        </ons-card>
319 
+
320 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Juguetes tradicionales'})">
321 
+	          <div class="title">Juguetes tradicionales</div>
322 
+	        </ons-card>
323 
+
324 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Fibras'})">
325 
+	          <div class="title">Fibras</div>
326 
+	        </ons-card>
327 
+
328 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Caretas'})">
329 
+	          <div class="title">Caretas</div>
330 
+	        </ons-card>
331 
+
332 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Cuero'})">
333 
+	          <div class="title">Cuero</div>
334 
+	        </ons-card>
335 
+
336 
+	        <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Metal'})">
337 
+	          <div class="title">Metal</div>
338 
+	        </ons-card>
339 
+
340 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Piedras'})">
341 
+	          <div class="title">Piedras</div>
342 
+	        </ons-card>
343 
+
344 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Papel'})">
345 
+	          <div class="title">Papel</div>
346 
+	        </ons-card>
347 
+
348 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Bambú'})">
349 
+	          <div class="title">Bambú</div>
350 
+	        </ons-card>
351 
+
352 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Cristal'})">
353 
+	          <div class="title">Cristal</div>
354 
+	        </ons-card>
355 
+
356 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Higüera'})">
357 
+	          <div class="title">Higüera</div>
358 
+	        </ons-card>
359 
+
360 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Desechos Marinos'})">
361 
+	          <div class="title">Desechos Marinos</div>
362 
+	        </ons-card>
363 
+
364 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Porcelanicrón'})">
365 
+	          <div class="title">Porcelanicrón</div>
366 
+	        </ons-card>
367 
+
368 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Tabacos'})">
369 
+	          <div class="title">Tabacos</div>
370 
+	        </ons-card>
371 
+
372 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Semillas'})">
373 
+	          <div class="title">Semillas</div>
374 
+	        </ons-card>
375 
+
376 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Aromatización'})">
377 
+	          <div class="title">Aromatización</div>
378 
+	        </ons-card>
379 
+
380 
+            <ons-card onclick="fn.pushPage({'id': 'artesanias.html', 'title': 'Dulces Típicos'})">
381 
+	          <div class="title">Dulces Típicos</div>
382 
+	        </ons-card>
383 
+
384 
+	        <style>
385 
+	          .intro {
386 
+		    text-align: center;
387 
+		    padding: 20px;
388 
+		    margin-top: 30px;
389 
+	          }
390 
+
391 
+	          ons-card {
392 
+		    cursor: pointer;
393 
+		    color: #333;
394 
+	          }
395 
+
396 
+	          .card__title,
397 
+	          .card--material__title {
398 
+		    font-size: 15px;
399 
+	          }
400 
+	        </style>-->
401 
+	    </ons-page>
402 
+
403 
+	<!--script>
404 
+	ons.getScriptPage().onInit = function () {
405 
+        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
406 
+        var createArtesania = function (Artesania) {
407 
+          return ons.createElement(`
408 
+              <ons-list-item expandable tappable>
409 
+                <div class="center" >${Artesania.name}</div>
410 
+      	        <div class="expandable-content"> -Artesanos que trabajan con ${Artesania.name}- <br><br> Luis Lao | Naguabo
411 
+							<br> <a id='home.html'>Jorge Rivera | Naguabo</a> </div>
412 
+              </ons-list-item>
413 
+            `
414 
+          );
415 
+         document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
416 
+	};
417 
+	</script-->
418 
+
419 
+
420 
+        </template>
421 
+
422 
+        <template id="ferias.html">
423 
+            <ons-page id="ferias">
424 
+
425 
+                <div id = "caleandar" class = "calendar" style="margin-top: 50px;">
426 
+                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
427 
+                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
428 
+                </div>
429 
+            </ons-page>
430 
+        </template>
431 
+
432 
+        <template id="instituto.html">
433 
+            <ons-page id="instituto">
434 
+                <p style="text-align: center;">
435 
+
436 
+		    <!--<ons-toolbar>
437 
+		      <div class="left"><ons-back-button>Pagejjn 3</ons-back-button></div>
438 
+		      <div class="center"></div>
439 
+		    </ons-toolbar>-->
440 
+
441 
+
442 
+		<h1>Instituto de Cultura Puertorriqueña</h1>
443 
+		<h3>Ven, descubre lo que nuestra riqueza cultural puertorriqueña tiene para tí.<br> Disfrútala, es tu identidad.
444 
+		</h3>
445 
+
446 
+		<body>
447 
+		<br>
448 
+		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.
449 
+		<br><br>
450 
+		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.
451 
+		<br><br>
452 
+		Prof. Carlos R. Ruiz Cortés<br>
453 
+		Director Ejecutivo<br>
454 
+		Instituto de Cultura Puertorriqueña<br>
455 
+		<br><br>
456 
+        </body>
457 
+
458 
+
459 
+		Visita nuestra <a href="https://www.icp.pr.gov/">Página Web</a> o síguenos en nuestras redes sociales: <br>
460 
+		<a href="https://twitter.com/icppr"><img src="img/twitter.png" alt="Twitter" style="width:35px;height:35px;border:0;">
461 
+		</a>
462 
+		<a href="https://facebook.com/icppr"><img src="img/facebook.png" alt="Facebook" style="width:35px;height:35px;border:0;">
463 
+		</a>
464 
+		<a href="https://youtube.com/user/icppr"><img src="img/youtube.png" alt="Youtube" style="width:35px;height:35px;border:0;">
465 
+		</a>
466 
+		<a href="https://instagram.com/icppr"><img src="img/instagram.png" alt="Instagram" style="width:35px;height:35px;border:0;">
467 
+		</a>
468 
+
469 
+                </p>
470 
+            </ons-page>
471 
+        </template>
472 
+
473 
+	<script src="js/load.js"></script>
474 
+	<script src="js/demo.js"></script>
475 
+
476 
+        <script type="text/javascript" src="cordova.js"></script>
477 
+        <script type="text/javascript" src="js/index.js"></script>
478 
+    </body>
479 
+</html>

BIN
www/img/0.png View File


BIN
www/img/1.png View File


BIN
www/img/10.png View File


BIN
www/img/2.png View File


BIN
www/img/3.png View File


BIN
www/img/4.png View File


BIN
www/img/5.png View File


BIN
www/img/6.png View File


BIN
www/img/7.png View File


BIN
www/img/8.png View File


BIN
www/img/9.png View File


+ 267
- 161
www/index.html View File

58 
             <ons-toolbar>
 58 
             <ons-toolbar>
59 
                 <div class="center">Instituto de Cultura</div>
 59 
                 <div class="center">Instituto de Cultura</div>
60 
             </ons-toolbar>
 60 
             </ons-toolbar>
61 
-            <ons-tabbar swipeable position="auto">
61 
+            <ons-tabbar swipeable position="bottom">
62 
                 <ons-tab page="home.html" label="Hogar"></ons-tab>
 62 
                 <ons-tab page="home.html" label="Hogar"></ons-tab>
63 
-                <ons-tab page="renglones.html" label="Artesanias"active></ons-tab>
63 
+                <ons-tab page="renglones.html" label="Artesanias" active></ons-tab>
64 
                 <ons-tab page="ferias.html" label="Ferias"></ons-tab>
 64 
                 <ons-tab page="ferias.html" label="Ferias"></ons-tab>
65 
-                <ons-tab page="instituto.html" label="Instituto"></ons-tab>
65 
+                <ons-tab page="instituto.html" label="ICP"></ons-tab>
66 
             </ons-tabbar>
 66 
             </ons-tabbar>
67 
         </ons-page>
 67 
         </ons-page>
68 
         </ons-navigator>
 68 
         </ons-navigator>
70
70
71
71
72
72
73 
+        <template id="home.html">
74 
+
75 
+            <ons-page id="home">
76 
+
77 
+                <ons-card id="azar">
78 
+
79 
+                    <div class="title" id="Title"></div>
80 
+                    <div id="image"></div><br>
81 
+                    <div class="content" id="Content"></div>
82 
+
83 
+                    <script type="text/javascript" src="js/azar.js"> </script>
84 
+
85 
+
86 
+                </ons-card>
87 
+
88 
+
89 
+            </ons-page>
90 
+
91 
+        </template>
73
92
74
93
94 
+        <template id="artesanias.html">
95 
+            <ons-page id="artesanias">
75
96
97 
+                <ons-toolbar>
98 
+                    <div class="left"><ons-back-button>Atrás</ons-back-button></div>
99 
+                    <div class="center"></div>
100 
+                </ons-toolbar>
76
101
102 
+                <ons-pull-hook id="pull-hook" threshold-height="120px">
103 
+                    <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
104 
+                </ons-pull-hook>
77
105
106 
+                <ons-list id="artesania-list" src="">
107 
+                    <ons-list-header>Artesanias</ons-list-header>
108 
+                </ons-list>
78
109
79 
-
80 
-
81 
-
82 
-
83 
-
84 
-
85 
-
86 
-
87 
-
88 
-
89 
-
90 
-
91 
-
92 
-
93 
-
94 
-
95 
-
96 
-
97 
-
98 
-
99 
-  <template id="artesanias.html">
100 
-    <ons-page id="artesanias">
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="artesania-list" src="">
112 
-      <ons-list-header>Artesanias</ons-list-header>
113 
-    </ons-list>
114 
-
115 
-    <ons-list id="artesanos-list" src="">
110 
+                <!--<ons-list id="artesanos-list" src="">
116 
       <ons-list-header>Artesanos</ons-list-header>
 111 
       <ons-list-header>Artesanos</ons-list-header>
117 
-    </ons-list>
118 
-
119 
-    <script>
120 
-
121 
-      ons.getScriptPage().onInit = function () {
122 
-        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
123 
-
124 
-    //var File = this.data.title.toUpperCase() + '.json' ;
125 
-    var Esp = this.data.esp.split(', ');
126 
-    var artesanos_json = this.data.json;
127 
-
128 
-    //Convertir en mayuscula primera letra del string.
129 
-    for(var i=0; i<Esp.length; i++) {
130 
-      Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
131 
-    };
132 
-
133 
-    var pullHook = document.getElementById('pull-hook');
134 
-    var icon = document.getElementById('pull-hook-icon');
135 
-    pullHook.addEventListener('changestate', function (event) {
136 
-      switch (event.state) {
137 
-        case 'initial':
138 
-          icon.setAttribute('icon', 'fa-arrow-down');
139 
-          icon.removeAttribute('rotate');
140 
-          icon.removeAttribute('spin');
141 
-          break;
142 
-        case 'preaction':
143 
-          icon.setAttribute('icon', 'fa-arrow-down');
144 
-          icon.setAttribute('rotate', '180');
145 
-          icon.removeAttribute('spin');
146 
-          break;
147 
-        case 'action':
148 
-          icon.setAttribute('icon', 'fa-spinner');
149 
-          icon.removeAttribute('rotate');
150 
-          icon.setAttribute('spin', true);
151 
-          break;
152 
-      }
153 
-    });
154 
-
155 
-    var getArtesania = function (num) {
156 
-
157 
-          var Artesanos = ``;
158 
-
159 
-          console.log('Filtrado de ',Esp[num])
160 
-
161 
-          var results = [];
162 
-          var searchVal = "my Name";
163 
-          for (var i=0 ; i < artesanos_json.length ; i++)
164 
-          {
165 
-              if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
166 
-                  results.push(artesanos_json[i]);
167 
-              }
168 
-          }
169 
-
170 
-          /*var arr1=artesanos_json.filter(function(item){
171 
-              return item.Nombre=="Ana";
172 
-          });*/
173 
-
174 
-          for(var i=0; i<results.length; i++) {
175 
-
176 
-            //if(Esp[num] in artesanos_json.) {}
177 
-            Artesanos=Artesanos+`<a id='home.html'>${results[i].Nombre} | ${results[i].Municipio}<br>`
178 
-            //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
179 
-          }
180 
-
181 
-
182 
-          return {
183 
-            name: Esp[num],
184 
-            artesan: Artesanos
185 
-          };
186 
-        };
187 
-
188 
-        var getData = function () {
189 
-          const data = [];
190 
-          for (var i = 0; i < Esp.length; i++) {
191 
-            data.push(getArtesania(i));
192 
-          }
193 
-          return data;
194 
-        };
195 
-        var createArtesania = function (Artesania) {
196 
-
197 
-        //console.log('Devuelto elemento')
198 
-
199 
-            return ons.createElement(`
112 
+    </ons-list>-->
113 
+
114 
+                <script>
115 
+
116 
+                    ons.getScriptPage().onInit = function () {
117 
+                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
118 
+
119 
+                        //var File = this.data.title.toUpperCase() + '.json' ;
120 
+                        var Esp = this.data.esp.split(', ');
121 
+                        var artesanos_json = this.data.json;
122 
+
123 
+                        //Convertir en mayuscula primera letra del string.
124 
+                        for(var i=0; i<Esp.length; i++) {
125 
+                            Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
126 
+                        };
127 
+
128 
+                        var pullHook = document.getElementById('pull-hook');
129 
+                        var icon = document.getElementById('pull-hook-icon');
130 
+                        pullHook.addEventListener('changestate', function (event) {
131 
+                            switch (event.state) {
132 
+                                case 'initial':
133 
+                                    icon.setAttribute('icon', 'fa-arrow-down');
134 
+                                    icon.removeAttribute('rotate');
135 
+                                    icon.removeAttribute('spin');
136 
+                                    break;
137 
+                                case 'preaction':
138 
+                                    icon.setAttribute('icon', 'fa-arrow-down');
139 
+                                    icon.setAttribute('rotate', '180');
140 
+                                    icon.removeAttribute('spin');
141 
+                                    break;
142 
+                                case 'action':
143 
+                                    icon.setAttribute('icon', 'fa-spinner');
144 
+                                    icon.removeAttribute('rotate');
145 
+                                    icon.setAttribute('spin', true);
146 
+                                    break;
147 
+                            }
148 
+                        });
149 
+
150 
+                        var getArtesania = function (num) {
151 
+
152 
+                            var Artesanos = ``;
153 
+
154 
+                            console.log('Filtrado de ',Esp[num])
155 
+
156 
+                            var results = [];
157 
+                            var searchVal = "my Name";
158 
+                            for (var i=0 ; i < artesanos_json.length ; i++)
159 
+                            {
160 
+                                if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
161 
+                                    results.push(artesanos_json[i]);
162 
+                                }
163 
+                            }
164 
+
165 
+                            /*var arr1=artesanos_json.filter(function(item){
166 
+                            return item.Nombre=="Ana";
167 
+                            });*/
168 
+
169 
+                            for(var i=0; i<results.length; i++) {
170 
+
171 
+                                //if(Esp[num] in artesanos_json.) {}
172 
+                                Artesanos=Artesanos+`<a id='home.html'>${results[i].Nombre} | ${results[i].Municipio}<br>`
173 
+                                //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
174 
+                            }
175 
+
176 
+
177 
+                            return {
178 
+                                name: Esp[num],
179 
+                                artesan: Artesanos
180 
+                            };
181 
+                        };
182 
+
183 
+                        var getData = function () {
184 
+                            const data = [];
185 
+                            for (var i = 0; i < Esp.length; i++) {
186 
+                                data.push(getArtesania(i));
187 
+                            }
188 
+                            return data;
189 
+                        };
190 
+                        var createArtesania = function (Artesania) {
191 
+
192 
+                            //console.log('Devuelto elemento')
193 
+
194 
+                            return ons.createElement(`
200 
               <ons-list-item expandable tappable>
 195 
               <ons-list-item expandable tappable>
201 
                 <div class="center" >${Artesania.name}</div>
 196 
                 <div class="center" >${Artesania.name}</div>
202 
                 <div class="expandable-content"> Artesanos que trabajan con ${Artesania.name}:<br><br>${Artesania.artesan}</div>
 197 
                 <div class="expandable-content"> Artesanos que trabajan con ${Artesania.name}:<br><br>${Artesania.artesan}</div>
203 
                 </ons-list-item>`
198 
                 </ons-list-item>`
204 
-          );
205 
-        };
199 
+                                                    );
200 
+                        };
206
201
207 
-        var Artesanias = getData();
202 
+                        var Artesanias = getData();
208
203
209 
-        for (Art of Artesanias) {
204 
+                        for (Art of Artesanias) {
210
205
211 
-          var Artesania = createArtesania(Art);
212 
-          document.getElementById('artesania-list').appendChild(Artesania);
213 
-        };
214 
-        pullHook.onAction = function (done) {
206 
+                            var Artesania = createArtesania(Art);
207 
+                            document.getElementById('artesania-list').appendChild(Artesania);
208 
+                        };
209 
+                        pullHook.onAction = function (done) {
215
210
216 
-        setTimeout(function() {
217 
-            document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
218 
-            done();
219 
-          }, 400);
220 
-        }
211 
+                            setTimeout(function() {
212 
+                                document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
213 
+                                done();
214 
+                            }, 400);
215 
+                        }
221
216
222
217
223
218
229
224
230
225
231
226
232 
-        var createArtesano = function (Artesano) {
227 
+                        /*  var createArtesano = function (Artesano) {
233
228
234 
             return ons.createElement(`
 229 
             return ons.createElement(`
235 
               <ons-list-item expandable tappable>
 230 
               <ons-list-item expandable tappable>
250
245
251 
           var Artesano = createArtesano(arte);
 246 
           var Artesano = createArtesano(arte);
252 
           document.getElementById('artesanos-list').appendChild(Artesano);
 247 
           document.getElementById('artesanos-list').appendChild(Artesano);
253 
-        };
248 
+        };*/
254
249
255 
-      };
256 
-     </script>
257 
-
258 
-        <style>
259 
-          .pull-hook-content {
260 
-            color: #333;
261 
-            transition: transform .25s ease-in-out;
262 
-          }
263 
-        </style>
264 
-      </ons-page>
265 
-    </template>
250 
+                    };
251 
+                </script>
252 
+
253 
+                <style>
254 
+                    .pull-hook-content {
255 
+                        color: #333;
256 
+                        transition: transform .25s ease-in-out;
257 
+                    }
258 
+                </style>
259 
+            </ons-page>
260 
+        </template>
266
261
267
262
268
263
270
265
271
266
272
267
268 
+        <template id="artesanos.html">
269 
+            <ons-page id="artesanos">
270 
+
271 
+                <ons-toolbar>
272 
+                    <div class="left"><ons-back-button>Atrás</ons-back-button></div>
273 
+                    <div class="center"></div>
274 
+                </ons-toolbar>
275 
+
276 
+                <ons-pull-hook id="pull-hook" threshold-height="120px">
277 
+                    <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
278 
+                </ons-pull-hook>
279 
+
280 
+                <ons-list id="artesanos-list" src="">
281 
+                    <ons-list-header>Artesanos</ons-list-header>
282 
+                </ons-list>
283 
+
284 
+                <script>
285 
+
286 
+                    ons.getScriptPage().onInit = function () {
287 
+                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
288 
+
289 
+                        //var File = this.data.title.toUpperCase() + '.json' ;
290 
+                        var Esp = this.data.esp.split(', ');
291 
+                        var artesanos_json = this.data.json;
292 
+
293 
+                        //Convertir en mayuscula primera letra del string.
294 
+                        for(var i=0; i<Esp.length; i++) {
295 
+                            Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
296 
+                        };
297 
+
298 
+                        var pullHook = document.getElementById('pull-hook');
299 
+                        var icon = document.getElementById('pull-hook-icon');
300 
+                        pullHook.addEventListener('changestate', function (event) {
301 
+                            switch (event.state) {
302 
+                                case 'initial':
303 
+                                    icon.setAttribute('icon', 'fa-arrow-down');
304 
+                                    icon.removeAttribute('rotate');
305 
+                                    icon.removeAttribute('spin');
306 
+                                    break;
307 
+                                case 'preaction':
308 
+                                    icon.setAttribute('icon', 'fa-arrow-down');
309 
+                                    icon.setAttribute('rotate', '180');
310 
+                                    icon.removeAttribute('spin');
311 
+                                    break;
312 
+                                case 'action':
313 
+                                    icon.setAttribute('icon', 'fa-spinner');
314 
+                                    icon.removeAttribute('rotate');
315 
+                                    icon.setAttribute('spin', true);
316 
+                                    break;
317 
+                            }
318 
+                        });
319 
+
320 
+                        var getArtesania = function (num) {
321 
+
322 
+                            var Artesanos = ``;
323 
+
324 
+                            console.log('Filtrado de ',Esp[num])
325 
+
326 
+                            var results = [];
327 
+                            var searchVal = "my Name";
328 
+                            for (var i=0 ; i < artesanos_json.length ; i++)
329 
+                            {
330 
+                                if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
331 
+                                    results.push(artesanos_json[i]);
332 
+                                }
333 
+                            }
273
334
335 
+          /*var arr1=artesanos_json.filter(function(item){
336 
+              return item.Nombre=="Ana";
337 
+          });*/
274
338
339 
+                            for(var i=0; i<results.length; i++) {
275
340
341 
+                                //if(Esp[num] in artesanos_json.) {}
342 
+                                Artesanos=Artesanos+`<a id='home.html'>${results[i].Nombre} | ${results[i].Municipio}<br>`
343 
+                                //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
344 
+                            }
276
345
277
346
347 
+                            return {
348 
+                                name: Esp[num],
349 
+                                artesan: Artesanos
350 
+                            };
351 
+                        };
278
352
353 
+                        var getData = function () {
354 
+                            const data = [];
355 
+                            for (var i = 0; i < Esp.length; i++) {
356 
+                                data.push(getArtesania(i));
357 
+                            }
358 
+                            return data;
359 
+                        };
360 
+
361 
+
362 
+                        var createArtesano = function (Artesano) {
279
363
364 
+                            return ons.createElement(`
365 
+              <ons-list-item expandable tappable>
366 
+                <div class="center" >${Artesano.Nombre}</div>
367 
+                <div class="expandable-content"> Municipio: ${Artesano.Municipio}<br>
368 
+                                                 Tel\u00e9fono: ${Artesano["Tel\u00e9fono 1"]}<br>
369 
+                                                 Correo Electr\u00f3nico: ${Artesano["E-mail"]}<br>
370 
+                                                 Trabaja con: ${Artesano.Especificaciones}<br>
371 
+                                                 </div>
372 
+              </ons-list-item>`
373 
+                                                    );
374 
+                        };
280
375
376 
+                        //var Artesanias = getData();
377 
+                        //artesanos_json
378 
+
379 
+                        for (arte of artesanos_json) {
380 
+
381 
+                            var Artesano = createArtesano(arte);
382 
+                            document.getElementById('artesanos-list').appendChild(Artesano);
383 
+                        };
384 
+
385 
+                    };
386 
+                </script>
387 
+
388 
+                <style>
389 
+                    .pull-hook-content {
390 
+                        color: #333;
391 
+                        transition: transform .25s ease-in-out;
392 
+                    }
393 
+                </style>
394 
+
395 
+            </ons-page>
396 
+
397 
+        </template>
281
398
282
399
283
400
285
402
286
403
287
404
288 
-        <template id="home.html">
289 
-        <ons-page id="home">
290 
-                <p style="text-align: center;">
291 
-          Pagina Principal
292 
-                </p>
293 
-            </ons-page>
294 
-        </template>
295
405
296
406
297
407
358 
             <ons-page id="instituto">
 468 
             <ons-page id="instituto">
359 
                 <p style="text-align: center;">
 469 
                 <p style="text-align: center;">
360
470
361 
-        <ons-toolbar>
362 
-          <div class="left"><ons-back-button>Pagejjn 3</ons-back-button></div>
363 
-          <div class="center"></div>
364 
-        </ons-toolbar>
365 
-
471 
+
366
472
367 
     <h1>Instituto de Cultura Puertorriqueña</h1>
473 
     <h1>Instituto de Cultura Puertorriqueña</h1>
368 
     <h3>Ven, descubre lo que nuestra riqueza cultural puertorriqueña tiene para tí.<br> Disfrútala, es tu identidad.
 474 
     <h3>Ven, descubre lo que nuestra riqueza cultural puertorriqueña tiene para tí.<br> Disfrútala, es tu identidad.

+ 29
- 0
www/js/azar.js View File

1 
+var request = new XMLHttpRequest()
2 
+
3 
+                        request.open('GET', 'json/azar.json', true)
4 
+
5 
+                        request.onload = function() {
6 
+                            // begin accessing JSON data here
7 
+                            var data = JSON.parse(this.response)
8 
+
9 
+                        /*var page = document.getElementById("home");
10 
+                            page.addEventListener("show", function(event){
11 
+                                var aleatorio = Math.floor(Math.random()*10);
12 
+                                document.getElementById("Title").innerHTML = "Tab " + Math.floor(Math.random() * 10);
13 
+                                document.getElementById("Content").innerHTML = "Number" + Math.floor(Math.random() * 10);
14 
+                            });*/
15 
+
16 
+                            var page = document.getElementById("home");
17 
+                            page.addEventListener("show", function(event){
18 
+                                var aleatorio = Math.floor(Math.random()*11);
19 
+                                //var azar = document.getElementById("azar");
20 
+                                //var img = ons.createElement(`<img src="img/${aleatorio}.png">`);
21 
+                                document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.png" width="100%" height="300">`;
22 
+                                document.getElementById("Title").innerHTML = data[aleatorio].Artesanias;
23 
+                                document.getElementById("Content").innerHTML = data[aleatorio].Info;
24 
+                                //azar.appendChild(img);
25 
+                            });
26 
+
27 
+                            }
28 
+
29 
+request.send()

+ 28
- 0
www/js/oldrenglones.js View File

1 
+var request = new XMLHttpRequest()
2 
+
3 
+request.open('GET', 'json/renglones.json', true)
4 
+
5 
+request.onload = function() {
6 
+  // begin accessing JSON data here
7 
+  var info = JSON.parse(this.response)
8 
+
9 
+  var list = document.getElementById("list");
10 
+
11 
+    for (var i = 0; i < info.length; i++) {
12 
+
13 
+            var item = ons.createElement(`<ons-list-item expandable onclick="fn.pushPage({'id': 'artesanias.html', 'title': '${info[i].Renglones}')">
14 
+                        <div class="center">${info[i].Renglones}</div>
15 
+                        <div class="right"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.png"></div>
16 
+                        <div class="expandable-content">
17 
+                        <ons-list>
18 
+                        <ons-list-item>Artesanos</ons-list-item>
19 
+                        <ons-list-item>Especificaciones</ons-list-item>
20 
+                        </ons-list></div>
21 
+                    </ons-list-item>`);
22 
+            list.appendChild(item);
23 
+            }
24 
+        }
25 
+
26 
+
27 
+
28 
+request.send()

+ 13
- 5
www/js/renglones.js View File

10
10
11 
     for (var i = 0; i < info.length; i++) {
 11 
     for (var i = 0; i < info.length; i++) {
12
12
13 
-            var item = ons.createElement(`<ons-card onclick="fn.pushPage({'id':'artesanias.html','title':'${info[i].Renglones}','esp': '${info[i].Especificaciones}'})">
14 
-                        <div class="title">${info[i].Renglones}</div>
15 
-                        <div class="content"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.png"></div>
16 
-                    </ons-card>`);
13 
+            var item = ons.createElement(`<ons-list-item expandable>
14 
+                        <div class="center">${info[i].Renglones}</div>
15 
+                        <div class="right"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.png"></div>
16 
+                        <div class="expandable-content">
17 
+                        <ons-list>
18 
+                        <ons-list-item onclick="fn.pushPage({'id':'artesanos.html','title':'${info[i].Renglones}','esp': '${info[i].Especificaciones}'})">Artesanos</ons-list-item>
19 
+                        <ons-list-item onclick="fn.pushPage({'id':'artesanias.html','title':'${info[i].Renglones}','esp': '${info[i].Especificaciones}'})">Especificaciones</ons-list-item>
20 
+                        </ons-list></div>
21 
+                    </ons-list-item>`);
17 
             list.appendChild(item);
 22 
             list.appendChild(item);
18 
             }
 23 
             }
19 
         }
 24 
         }
20
25
21 
-request.send()
26 
+request.send()  /*`<ons-card onclick="fn.pushPage({'id':'artesanias.html','title':'${info[i].Renglones}','esp': '${info[i].Especificaciones}'})">
27 
+                        <div class="title">${info[i].Renglones}</div>
28 
+                        <div class="content"><img class="list-item__thumbnail" src="img/${info[i].Renglones}.png"></div>
29 
+                    </ons-card>`*/

+ 1
- 0
www/json/azar.json View File

1 
+[{"Artesanias":"Carlos Corrada","Info":"Oye mira, es el profe.","id":0},{"Artesanias":"Amapola","Info":"Que linda la amapola.","id":1},{"Artesanias":"Torre UPRRP","Info":"La torre de la UPR si que suena.","id":2},{"Artesanias":"Gracklegoof","Info":"It's Gracklegoof. They do art. Check them out","id":3},{"Artesanias":"Gato","Info":"Adorable.","id":4},{"Artesanias":"Manzana","Info":"Verde sabe buena.","id":5},{"Artesanias":"Dados","Info":"Mejores dados del planeta.","id":6}, {"Artesanias":"Pato","Info":"Hola.","id":7},{"Artesanias":"Spongebob","Info":"Le das azco..","id":8},{"Artesanias":"Kazoo","Info":"Appropriate.","id":9},{"Artesanias":"Ave","Info":"Te mira directo al alma.","id":10}]

+ 371
- 0
www/newerIndex.html View File

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 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *; img-src 'self' data: content:;">
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, 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 
+        <ons-navigator swipeable animation="slide" id="myNavigator">
55 
+           <ons-page>
56 
+            <ons-toolbar>
57 
+                <div class="center">Instituto de Cultura</div>
58 
+            </ons-toolbar>
59 
+            <ons-tabbar swipeable position="auto">
60 
+                <ons-tab page="home.html" label="Hogar"></ons-tab>
61 
+                <ons-tab page="renglones.html" label="Artesanias"active></ons-tab>
62 
+                <ons-tab page="ferias.html" label="Ferias"></ons-tab>
63 
+                <ons-tab page="instituto.html" label="Instituto"></ons-tab>
64 
+            </ons-tabbar>
65 
+        </ons-page>
66 
+        </ons-navigator>
67 
+
68 
+
69 
+
70 
+        <template id="home.html">
71 
+
72 
+            <ons-page id="home">
73 
+
74 
+                <ons-card id="azar">
75 
+
76 
+                    <div class="title" id="Title"></div>
77 
+                    <div id="image"></div><br>
78 
+                    <div class="content" id="Content"></div>
79 
+
80 
+                    <script type="text/javascript" src="js/azar.js"> </script>
81 
+
82 
+
83 
+                </ons-card>
84 
+
85 
+
86 
+            </ons-page>
87 
+
88 
+        </template>
89 
+
90 
+
91 
+
92 
+
93 
+  <template id="artesanias.html">
94 
+    <ons-page id="artesanias">
95 
+
96 
+      <ons-toolbar>
97 
+        <div class="left"><ons-back-button>Atrás</ons-back-button></div>
98 
+        <div class="center"></div>
99 
+      </ons-toolbar>
100 
+
101 
+    <ons-pull-hook id="pull-hook" threshold-height="120px">
102 
+      <ons-icon id="pull-hook-icon" size="22px" class="pull-hook-content" icon="fa-arrow-down"></ons-icon>
103 
+    </ons-pull-hook>
104 
+
105 
+    <ons-list id="artesania-list" src="">
106 
+      <ons-list-header>Artesanias</ons-list-header>
107 
+    </ons-list>
108 
+
109 
+    <ons-list id="artesanos-list" src="">
110 
+      <ons-list-header>Artesanos</ons-list-header>
111 
+    </ons-list>
112 
+
113 
+    <script>
114 
+
115 
+      ons.getScriptPage().onInit = function () {
116 
+        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
117 
+
118 
+    //var File = this.data.title.toUpperCase() + '.json' ;
119 
+    var Esp = this.data.esp.split(', ');
120 
+    var artesanos_json = this.data.json;
121 
+
122 
+    //Convertir en mayuscula primera letra del string.
123 
+    for(var i=0; i<Esp.length; i++) {
124 
+      Esp[i] = Esp[i].charAt(0).toUpperCase() + Esp[i].slice(1);
125 
+    };
126 
+
127 
+    var pullHook = document.getElementById('pull-hook');
128 
+    var icon = document.getElementById('pull-hook-icon');
129 
+    pullHook.addEventListener('changestate', function (event) {
130 
+      switch (event.state) {
131 
+        case 'initial':
132 
+          icon.setAttribute('icon', 'fa-arrow-down');
133 
+          icon.removeAttribute('rotate');
134 
+          icon.removeAttribute('spin');
135 
+          break;
136 
+        case 'preaction':
137 
+          icon.setAttribute('icon', 'fa-arrow-down');
138 
+          icon.setAttribute('rotate', '180');
139 
+          icon.removeAttribute('spin');
140 
+          break;
141 
+        case 'action':
142 
+          icon.setAttribute('icon', 'fa-spinner');
143 
+          icon.removeAttribute('rotate');
144 
+          icon.setAttribute('spin', true);
145 
+          break;
146 
+      }
147 
+    });
148 
+
149 
+    var getArtesania = function (num) {
150 
+
151 
+          var Artesanos = ``;
152 
+
153 
+          console.log('Filtrado de ',Esp[num])
154 
+
155 
+          var results = [];
156 
+          var searchVal = "my Name";
157 
+          for (var i=0 ; i < artesanos_json.length ; i++)
158 
+          {
159 
+              if (artesanos_json[i].Especificaciones.includes(Esp[num])) {
160 
+                  results.push(artesanos_json[i]);
161 
+              }
162 
+          }
163 
+
164 
+          /*var arr1=artesanos_json.filter(function(item){
165 
+              return item.Nombre=="Ana";
166 
+          });*/
167 
+
168 
+          for(var i=0; i<results.length; i++) {
169 
+
170 
+            //if(Esp[num] in artesanos_json.) {}
171 
+            Artesanos=Artesanos+`<a id='home.html'>${results[i].Nombre} | ${results[i].Municipio}<br>`
172 
+            //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
173 
+          }
174 
+
175 
+
176 
+          return {
177 
+            name: Esp[num],
178 
+            artesan: Artesanos
179 
+          };
180 
+        };
181 
+
182 
+        var getData = function () {
183 
+          const data = [];
184 
+          for (var i = 0; i < Esp.length; i++) {
185 
+            data.push(getArtesania(i));
186 
+          }
187 
+          return data;
188 
+        };
189 
+        var createArtesania = function (Artesania) {
190 
+
191 
+        //console.log('Devuelto elemento')
192 
+
193 
+            return ons.createElement(`
194 
+              <ons-list-item expandable tappable>
195 
+                <div class="center" >${Artesania.name}</div>
196 
+                <div class="expandable-content"> Artesanos que trabajan con ${Artesania.name}:<br><br>${Artesania.artesan}</div>
197 
+                </ons-list-item>`
198 
+          );
199 
+        };
200 
+
201 
+        var Artesanias = getData();
202 
+
203 
+        for (Art of Artesanias) {
204 
+
205 
+          var Artesania = createArtesania(Art);
206 
+          document.getElementById('artesania-list').appendChild(Artesania);
207 
+        };
208 
+        pullHook.onAction = function (done) {
209 
+
210 
+        setTimeout(function() {
211 
+            document.getElementById('artesania-list').appendChild(createArtesania(getArtesania()));
212 
+            done();
213 
+          }, 400);
214 
+        }
215 
+
216 
+
217 
+
218 
+
219 
+
220 
+
221 
+
222 
+
223 
+
224 
+
225 
+
226 
+        var createArtesano = function (Artesano) {
227 
+
228 
+            return ons.createElement(`
229 
+              <ons-list-item expandable tappable>
230 
+                <div class="center" >${Artesano.Nombre}</div>
231 
+                <div class="expandable-content"> Municipio: ${Artesano.Municipio}<br>
232 
+                                                 Tel\u00e9fono: ${Artesano["Tel\u00e9fono 1"]}<br>
233 
+                                                 Correo Electr\u00f3nico: ${Artesano["E-mail"]}<br>
234 
+                                                 Trabaja con: ${Artesano.Especificaciones}<br>
235 
+                                                 </div>
236 
+              </ons-list-item>`
237 
+          );
238 
+        };
239 
+
240 
+        //var Artesanias = getData();
241 
+        //artesanos_json
242 
+
243 
+        for (arte of artesanos_json) {
244 
+
245 
+          var Artesano = createArtesano(arte);
246 
+          document.getElementById('artesanos-list').appendChild(Artesano);
247 
+        };
248 
+
249 
+      };
250 
+     </script>
251 
+
252 
+        <style>
253 
+          .pull-hook-content {
254 
+            color: #333;
255 
+            transition: transform .25s ease-in-out;
256 
+          }
257 
+        </style>
258 
+      </ons-page>
259 
+    </template>
260 
+
261 
+
262 
+
263 
+
264 
+
265 
+
266 
+
267 
+
268 
+
269 
+
270 
+
271 
+        <template id="renglones.html">
272 
+            <ons-page id="renglones">
273 
+
274 
+            <!--div class="search-bar">
275 
+                 <p style="text-align: center; margin-top: 10px;">
276 
+                    <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"
277 
+           style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
278 
+                </p>
279 
+            </div-->
280 
+
281 
+            <ons-card id="list">
282 
+              <script type="text/javascript" src="js/renglones.js"></script>
283 
+            </ons-card>
284 
+
285 
+          <style>
286 
+            .intro {
287 
+        text-align: center;
288 
+        padding: 20px;
289 
+        margin-top: 30px;
290 
+            }
291 
+
292 
+            ons-card {
293 
+        cursor: pointer;
294 
+        color: #333;
295 
+            }
296 
+
297 
+            .card__title,
298 
+            .card--material__title {
299 
+        font-size: 15px;
300 
+            }
301 
+          </style>
302 
+      </ons-page>
303 
+
304 
+    <!--script>
305 
+    ons.getScriptPage().onInit = function () {
306 
+    this.querySelector('ons-toolbar div.center').textContent = this.data.title;
307 
+    var createArtesania = function (Artesania) {
308 
+      return ons.createElement(`
309 
+        <ons-list-item expandable tappable>
310 
+        <div class="center" >${Artesania.name}</div>
311 
+        <div class="expandable-content"> -Artesanos que trabajan con ${Artesania.name}- <br><br> Luis Lao | Naguabo
312 
+              <br> <a id='home.html'>Jorge Rivera | Naguabo</a> </div>
313 
+        </ons-list-item>` );
314 
+     document.getElementById('artesania-list').appendChild(createArtesania(getArtesania())); };
315 
+    </script-->
316 
+
317 
+
318 
+        </template>
319 
+
320 
+        <template id="ferias.html">
321 
+            <ons-page id="ferias">
322 
+
323 
+                <div id = "caleandar" class = "calendar" style="margin-top: 50px;">
324 
+                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
325 
+                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
326 
+                </div>
327 
+            </ons-page>
328 
+        </template>
329 
+
330 
+        <template id="instituto.html">
331 
+            <ons-page id="instituto">
332 
+                <p style="text-align: center;">
333 
+
334 
+
335 
+    <h1>Instituto de Cultura Puertorriqueña</h1>
336 
+    <h3>Ven, descubre lo que nuestra riqueza cultural puertorriqueña tiene para tí.<br> Disfrútala, es tu identidad.
337 
+    </h3>
338 
+
339 
+    <body>
340 
+    <br>
341 
+    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.
342 
+    <br><br>
343 
+    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.
344 
+    <br><br>
345 
+    Prof. Carlos R. Ruiz Cortés<br>
346 
+    Director Ejecutivo<br>
347 
+    Instituto de Cultura Puertorriqueña<br>
348 
+    <br><br>
349 
+        </body>
350 
+
351 
+
352 
+    Visita nuestra <a href="https://www.icp.pr.gov/">Página Web</a> o síguenos en nuestras redes sociales: <br>
353 
+    <a href="https://twitter.com/icppr"><img src="img/twitter.png" alt="Twitter" style="width:35px;height:35px;border:0;">
354 
+    </a>
355 
+    <a href="https://facebook.com/icppr"><img src="img/facebook.png" alt="Facebook" style="width:35px;height:35px;border:0;">
356 
+    </a>
357 
+    <a href="https://youtube.com/user/icppr"><img src="img/youtube.png" alt="Youtube" style="width:35px;height:35px;border:0;">
358 
+    </a>
359 
+    <a href="https://instagram.com/icppr"><img src="img/instagram.png" alt="Instagram" style="width:35px;height:35px;border:0;">
360 
+    </a>
361 
+
362 
+                </p>
363 
+            </ons-page>
364 
+        </template>
365 
+
366 
+  <script src="js/load.js"></script>
367 
+
368 
+        <script type="text/javascript" src="cordova.js"></script>
369 
+        <script type="text/javascript" src="js/index.js"></script>
370 
+    </body>
371 
+</html>