-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
117 lines (106 loc) · 6.27 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="es">
<head>
<title>Actividades propuestas</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<script src="config.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/es_LA/sdk.js#xfbml=1&version=v4.0"></script>
<h1 class="acenter">Actividades propuestas</h1>
<p class="acenter intro">
A continuación puedes ver un listado de actividades que se han propuesto.
Tu ayuda es muy importante, por eso <strong>te pedimos que indiques qué actividades te interesan con un "Me gusta" y que nos
ayudes compartiendo aquellas que creas que les pueden interesar a tus conocidos</strong>. Y por supuesto, si quieres
también puedes <a href="https://docs.google.com/forms/d/e/1FAIpQLSfVVcG87y4tkRDAELX8nZq276o9oL0_BkOxc2497rv4arPbYg/viewform">envíar tú una propuesta</a>.
</p>
<div class="acenter">
<p>Ver por temática:</p>
<ul id="categoryFilter">
<li data-category="all" class="active">Todas</li>
<li data-category="programming" class="tooltip" data-tooltip="Herramientas y lenguajes: Wordpress, Github, AWS, JS, .Net, Java, BBDDs, clean code,...">Programación</li>
<li data-category="future" class="tooltip" data-tooltip="Inteligencia artificial, Big Data, Blockchain, VR, AR/XR, Bots, ...">Tendencias</li>
<li data-category="robotics" class="tooltip" data-tooltip="Robótica, electrónica, drones, impresión 3D, IoT, domótica, ...">Robótica</li>
<li data-category="post-it" class="tooltip" data-tooltip="Herramientas y técnicas: Trello, GTD, Pomodoro, Scrum, G Suite, ...">Productividad</li>
<li data-category="marketing" class="tooltip" data-tooltip="Marketing online: SEO, SEM, Growth hacking, analítica web, ...">Marketing</li>
<li data-category="design" class="tooltip" data-tooltip="Diseño gráfico, usabilidad, experiencia de usuario, ...">Diseño</li>
<li data-category="business" class="tooltip" data-tooltip="Financiación, lean startup, técnicas de negociación, ...">Emprendimiento</li>
<li data-category="cyber-security" class="tooltip" data-tooltip="Seguridad, privacidad, acoso virtual, cyberbullying, ...">Buenas prácticas</li>
</ul>
</div>
<ul id="talks"></ul>
<script id="talkTmpl" type="text/x-jsrender">
{{for talks}}
<li
data-length = "{{:length}}"
data-speakers = "{{:speakers}}"
data-categories = "{{:categories}}"
data-level = "{{:level}}"
data-comments = "{{:comments}}"
data-tags = "{{:tags}}"
>
<div class = "container">
{{if thumbnail}}
<div class="img" width="300" height="200" onclick="showModal({{:index}})" style="background-image:url('{{:thumbnail}}')"></div>
{{else}}
<div class="img" width="300" height="200" onclick="showModal({{:index}})" style="background-image:url('https://source.unsplash.com/300x200/?{{:tags}}')"></div>
{{/if}}
<p class="talk-title" style="background-color: {{:titleColor}}" onclick="showModal({{:index}})">{{:title}}</p>
<p class="talk-description" onclick="showModal({{:index}})">{{:description}}</p>
<div class="fb-buttons">
<div class="fb-like" data-href="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Ftomellosotech.org%2Fcharla%2F{{:title}}" data-width="" data-layout="box_count" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
</div>
</div>
</li>
{{/for}}
</script>
<!------------ START MODAL WINDOW ----------->
<div class="modal micromodal-slide" id="modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<header class="modal__header">
<h2 class="modal__title" id="modal-title">
Micromodal
</h2>
<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
</header>
<main class="modal__content" id="modal-content">
<div>
<strong>Descripción:</strong><br>
<div id="modal-description"></div>
</div>
<div>
<strong>Nivel de dificultad:</strong> <span id="modal-level"></span>
</div>
<div>
<strong>Duración:</strong> <span id="modal-length"></span>
</div>
<div>
<strong>Ponentes(s):</strong><br>
<div id="modal-speakers"></div>
</div>
<div>
<strong>Categoría(s):</strong><br>
<div id="modal-categories"></div>
</div>
<div>
<strong>Otros comentarios:</strong><br>
<div id="modal-comments"></div>
</div>
</main>
<footer class="modal__footer">
<button class="modal__btn" data-micromodal-close aria-label="Close this dialog window">Cerrar</button>
</footer>
</div>
</div>
</div>
<!------------ EMD MODAL WINDOW ----------->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsrender/1.0.4/jsrender.min.js" integrity="sha256-s+wXPcRhQXvh1VlUAEpAIwi8DaDCxbNpB4QsJ6Kwdro=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/micromodal/dist/micromodal.min.js"></script>
<script src="main.js"></script>
</body>
</html>