forked from iign/uynidades
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
261 lines (223 loc) · 13.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>UYnidades</title>
<script type="module">
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
<link rel="stylesheet" href="css/main.css">
<meta name="description"
content="UYnidades · ¡Ahora vos también podés dar pésimos ejemplos de cantidades como en la tele!">
<meta property="og:title" content="UYnidades">
<meta property="og:description"
content="UYnidades · ¡Ahora vos también podés dar pésimos ejemplos de cantidades como en la tele!">
<meta property="og:image" content="https://www.mywebsite.com/image.jpg">
<meta property="og:image:alt" content="Image description">
<meta property="og:locale" content="es_UY">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://www.mywebsite.com/page">
<link rel="canonical" href="https://www.mywebsite.com/page">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-config" content="/browserconfig.xml" />
<meta name="msapplication-TileColor" content="2C83C7">
<meta name="theme-color" content="2C83C7">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</head>
<body>
<header class="uy-header py-3">
<div class="container d-flex align-items-center">
<a href="/" class="mx-auto mx-md-0">
<img src="img/logo.svg" alt="UYnidades">
</a>
</div>
</header>
<div class="uy-hero">
<div class="uy-hero__overlay"></div>
<div class="container">
<div class="uy-hero__title">
¡Ahora vos también podés dar pésimos ejemplos de cantidades como en la tele!
</div>
<a href="#calcular" class="uy-hero__btn">
<span class="d-block">Comenzar</span>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 1L8 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M15 8L8 15L1 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>
</div>
<div id="calcular" class="uy-section-question uy-default-section">
<div class="container">
<div class="uy-question">
<span>¿A cuántos</span>
<span>
<select name="select-unit" id="select-unit" class="uy-select target">
</select>
</span>
<span class="uy-question-equals">equivalen</span>
<span>
<input type="number" name="input-money" id="input-money" placeholder="2.000.450" size="9" class="uy-number target"
step="1">
</span>
<span>
<select name="select-currency" id="select-currency" class="uy-select target">
<option value="44">dólares</option>
<option value="1">pesos</option>
</select> ?
</span>
</div>
</div>
</div>
<div class="uy-result uy-default-section">
<div class="container">
<div class="uy-card">
<img class="uy-card__loader" src="img/gif-math-lady.gif" alt="Cargando...">
<!-- <img class="uy-card__loader" src="img/gif-math-guy.gif" alt="Cargando..."> -->
<div class="uy-card__body">
<div id="origin" class="uy-card__number">850.750.000</div>
<div id="origin-unit" class="uy-card__currency mb-5">dólares</div>
<div class="uy-card__equals mb-5">equivalen a</div>
<div class="uy-card__img mb-5">
<svg width="187" height="90" viewBox="0 0 187 90" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M72.9214 87.216L0.973877 84.4347L5.72168 48.9329L127.339 8.35938L181.877 65.784L186.017 89.67L72.9214 87.216Z"
fill="#C4C4C4" />
<path
d="M6.3304 52.3684L3.65216 83.7802H0L3.65216 44.6791L133.5 0.669922L135.738 76.0909H122.591L121.373 20.1387L6.3304 52.3684Z"
fill="#3A3A3A" />
<path d="M135.617 76.0909L133.5 0.669922L184.069 62.839L185.895 89.5063L135.617 76.0909Z"
fill="#6A6A6A" />
</svg>
</div>
<div id="converted" class="uy-card__number">10,8050</div>
<div id="converted-unit" class="uy-card__currency">Antel Arena</div>
</div>
<div class="uy-card__footer">
<a href="whatsapp://send?text=https://uynidades.uy ¡Ahora vos también podés dar pésimos ejemplos de cantidades como en la tele!"
class="uy-card__btn-share">
<svg class="me-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.584473 24L2.22765 17.837C1.21369 16.033 0.680901 13.988 0.681875 11.891C0.684797 5.335 5.88123 0 12.266 0C15.3643 0.001 18.2728 1.24 20.4604 3.488C22.6471 5.736 23.851 8.724 23.8501 11.902C23.8471 18.459 18.6507 23.794 12.266 23.794C10.3277 23.793 8.41759 23.294 6.72571 22.346L0.584473 24ZM7.01012 20.193C8.64259 21.188 10.201 21.784 12.2621 21.785C17.5686 21.785 21.8913 17.351 21.8942 11.9C21.8962 6.438 17.5939 2.01 12.2699 2.008C6.95947 2.008 2.63967 6.442 2.63772 11.892C2.63675 14.117 3.27181 15.783 4.33837 17.526L3.36532 21.174L7.01012 20.193ZM18.1014 14.729C18.0293 14.605 17.8364 14.531 17.5462 14.382C17.2569 14.233 15.8338 13.514 15.5679 13.415C15.303 13.316 15.1101 13.266 14.9163 13.564C14.7234 13.861 14.1682 14.531 13.9997 14.729C13.8312 14.927 13.6617 14.952 13.3725 14.803C13.0832 14.654 12.1501 14.341 11.0445 13.328C10.1845 12.54 9.60298 11.567 9.43447 11.269C9.26597 10.972 9.41694 10.811 9.5611 10.663C9.69162 10.53 9.85038 10.316 9.99551 10.142C10.1426 9.97 10.1903 9.846 10.2877 9.647C10.3841 9.449 10.3364 9.275 10.2634 9.126C10.1903 8.978 9.61175 7.515 9.37116 6.92C9.13545 6.341 8.89681 6.419 8.71954 6.41L8.16434 6.4C7.97149 6.4 7.65785 6.474 7.39291 6.772C7.12798 7.07 6.37993 7.788 6.37993 9.251C6.37993 10.714 7.41726 12.127 7.56142 12.325C7.70655 12.523 9.60201 15.525 12.5056 16.812C13.1962 17.118 13.7358 17.301 14.1556 17.438C14.8491 17.664 15.4803 17.632 15.979 17.556C16.5351 17.471 17.6913 16.837 17.9329 16.143C18.1744 15.448 18.1744 14.853 18.1014 14.729Z"
fill="#505663" />
</svg>
<span>Compartir en WhatsApp</span>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://uynidades.uy/" class="uy-card__btn-share">
<svg class="me-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M22.6445 0H1.84906C1.13607 0 0.558472 0.593 0.558472 1.325V22.676C0.558472 23.407 1.13607 24 1.84906 24H13.0455V14.706H9.99873V11.084H13.0455V8.413C13.0455 5.313 14.8893 3.625 17.5835 3.625C18.8741 3.625 19.9825 3.724 20.3059 3.768V7.008L18.4377 7.009C16.9728 7.009 16.6893 7.724 16.6893 8.772V11.085H20.1831L19.7283 14.707H16.6893V24H22.6465C23.3575 24 23.9351 23.407 23.9351 22.675V1.325C23.9351 0.593 23.3575 0 22.6445 0V0Z"
fill="#505663" />
</svg>
<span>Compartir en Facebook</span>
</a>
<a href="https://twitter.com/intent/tweet?url=https://uynidades.uy&text=¡Ahora vos también podés dar pésimos ejemplos de cantidades como en la tele!"
class="uy-card__btn-share">
<svg class="me-2" width="26" height="20" viewBox="0 0 26 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M25.6753 2.309C24.7435 2.701 23.7421 2.965 22.6912 3.084C23.7643 2.475 24.5884 1.51 24.9757 0.360001C23.9722 0.924001 22.86 1.334 21.6761 1.555C20.7296 0.598001 19.3779 0 17.8837 0C14.5292 0 12.0643 2.966 12.8219 6.04501C8.50513 5.84001 4.67688 3.88001 2.11382 0.901001C0.752615 3.114 1.40789 6.00901 3.72088 7.47501C2.87039 7.44901 2.06844 7.22801 1.36885 6.85901C1.31187 9.14001 3.03711 11.274 5.53581 11.749C4.80456 11.937 4.00367 11.981 3.18906 11.833C3.84961 13.789 5.76796 15.212 8.04296 15.252C5.8587 16.875 3.10675 17.6 0.350586 17.292C2.64986 18.689 5.38175 19.504 8.3152 19.504C17.9618 19.504 23.4119 11.783 23.0826 4.85801C24.0977 4.16301 24.9788 3.296 25.6753 2.309Z"
fill="#505663" />
</svg>
<span>Compartir en Twitter</span>
</a>
</div>
</div>
<div class="text-center mt-5">
<button class="uy-btn-reload" onclick="random_unit(true)">
<svg class="me-2" width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.42847 1.83301V6.83301H6.29861" stroke="white" stroke-width="1.66667" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M3.46581 10.9922C3.9921 12.5259 4.98962 13.8424 6.30806 14.7434C7.6265 15.6444 9.19445 16.081 10.7756 15.9876C12.3568 15.8942 13.8656 15.2757 15.0747 14.2253C16.2837 13.175 17.1275 11.7497 17.479 10.1642C17.8304 8.57868 17.6704 6.91885 17.0231 5.43481C16.3758 3.95076 15.2763 2.72289 13.8902 1.9362C12.5041 1.1495 10.9065 0.846612 9.33811 1.07316C7.76975 1.2997 6.31557 2.04341 5.1947 3.19222L1.42847 6.82555"
stroke="white" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span>Otra unidad aleatoria</span>
</button>
</div>
</div>
</div>
<section class="uy-default-section">
<div class="container">
<div class="uy-data-logo text-center">
<div class="text-center mb-5">Un chiste (malo) de:</div>
<a href="https://data.org.uy/" class="d-inline-block mb-5">
<img src="img/data.svg" alt="DATA Uruguay">
</a>
<div class="text-center mb-5">
También hacemos cosas útiles:
</div>
</div>
<div class="row uy-project-row">
<div class="col-12 col-lg-4">
<div class="uy-project mb-5 mb-lg-0">
<a href="https://data.org.uy/portfolio/uruguay-leaks/" class="uy-project__img-link">
<img src="img/project-uruguay-leaks.jpg" alt="Uruguay Leaks">
</a>
<a class="uy-project__title" href="https://data.org.uy/portfolio/uruguay-leaks/">
Uruguay Leaks
</a>
<div class="uy-project__intro">
Plataforma para recepción de información de interés público de forma anónima por personas
informantes/alertadoras
(whistleblowers). Desarrollado en colaboración con la diaria y PODER, en base al software GlobaLeaks y
como parte de la alianza LatamLeaks.
La información recibida es verificada y eventualmente publicada por la diaria.
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="uy-project mb-5 mb-lg-0">
<a href="https://data.org.uy/portfolio/a-tu-servicio/" class="uy-project__img-link">
<img src="img/project-atuservicio.jpg" alt="A tu servicio">
</a>
<a class="uy-project__title" href="https://data.org.uy/portfolio/a-tu-servicio/">
A tu servicio
</a>
<div class="uy-project__intro">
A tu servicio es una herramienta que permiten obtener, visualizar y comparar datos de los diferentes
prestadores de salud de Uruguay, para promover la toma de decisiones informadas de
los/as usuarios/as y la transparencia del sistema.
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="uy-project mb-5 mb-lg-0">
<a href="https://data.org.uy/portfolio/elijo-estudiar/" class="uy-project__img-link">
<img src="img/project-elijo-estudiar.jpg" alt="Elijo estudiar">
</a>
<a class="uy-project__title" href="https://data.org.uy/portfolio/elijo-estudiar/">
Elijo estudiar
</a>
<div class="uy-project__intro">
Este proyecto, desarrollado junto a ANEP y con apoyo del fondo ALTEC, de Avina y Luminate, permite
consultar la oferta
educativa para toda la educación pública inicial, primaria, secundaria, técnica y parte de la terciaria
a través de una herramienta sencilla y atractiva.
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<a href="https://data.org.uy/inicio/proyectos/" class="uy-view-more">
Ver más proyectos
</a>
</div>
</div>
</section>
<footer class="uy-footer py-3 text-center">
<div class="container">
2021 · DATA Uruguay
</div>
</footer>
</body>
</html>