-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathhoja.html
70 lines (68 loc) · 3.76 KB
/
hoja.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
---
---
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
html, body { width:210mm; font-family: Arial; font-size: 18px; }
img { width: 70mm; margin-left: -35mm; margin-bottom: 50mm; -webkit-filter: grayscale(100%); filter: grayscale(100%); left: 50%; position: relative; }
input { font-size: 20px; display: inline-block; border-bottom: 1px solid #000; text-align: center; border-top: 0; border-left: 0; border-right: 0; }
p { text-align: justify; margin: 0 0 15mm 0; }
#instrucciones { margin: 5mm; border-radius: 2mm; border: 2px dashed darkorange; text-align: center; padding: 3mm; }
#instrucciones span { border: none; }
#instrucciones ul { text-align: left; }
button { border: 2px solid darkorange; background-color: white; color: darkorange; font-size: 20px; }
#llevo, #entrego { display: none; }
@page { size: auto; margin: 0mm; }
</style>
<style media="print">
#instrucciones { display: none; }
html { padding: 20mm; }
</style>
<script src="https://cdn.jsdelivr.net/npm/url-polyfill@1.0.13/url-polyfill.min.js"></script>
</head>
<body>
<div id="instrucciones">
<div>Imprime esta hoja, fírmala y <span id="llevo">llévala a alguno de los siguientes puntos para entregarla: {% include _ubicaciones.html %}</span><span id="entrego">coordina para entregarsela a alguien del Partido Digital que te contactará a la brevedad.</span></div>
<br>
<div>Puedes cambiar la información si lo necesitas, recuerda que debes poner el nombre completo (dos apellidos y dos nombres si tienes).</div>
<br>
<div>Recuerda que "adhesión" es el término que la Corte Electoral exige poner el las hojas firmadas. No implica nada más que hacer que el Partido Digital exista y que pueda presentarse en las próximas elecciones.</div>
<br>
<div>Y no te preocupes, esta sección no será impresa :)</div>
<br>
<button id="boton_imprimir" onclick="javascript: window.print();">Imprimir</button>
</div>
<div style="margin-top: 20mm; text-align: center;">
<div style="display: inline-block;text-align: left;">
<img src="https://recursos.partidodigital.org.uy/assets/img/logo_original.png">
<p>Por la presente, <input style="width: 159mm;" id="nombre_apellido">,</p>
<p>titular de la Credencial Cívica: <input style="width: 98mm;" id="credencial"> y con dirección</p>
<p>de email: <input style="width: 121mm;" id="email"> expreso mi adhesión al</p>
<p>Partido Digital y su programa de principios.</p>
</div>
<div style="display: inline-block; text-align: center; margin-top: 50mm;">
<p style="margin-bottom: 5mm">________________________________</p>
<p style="text-align: center;">Firma</p>
</div>
</div>
<script>
var url = new URL(document.location.href);
document.getElementById('nombre_apellido').value = url.searchParams.get("nombre") && url.searchParams.get("apellido") ? url.searchParams.get("nombre") + ' ' + url.searchParams.get("apellido") : '';
document.getElementById('credencial').value = url.searchParams.get("credencial") ? url.searchParams.get("credencial") : '';
document.getElementById('email').value = url.searchParams.get("email") ? url.searchParams.get("email").split(' ').join('+') : '';
if(url.searchParams.get('metodo') === "llevo") {
document.getElementById('llevo').style.display = 'inline';
} else if(url.searchParams.get('metodo') === "entrego") {
document.getElementById('entrego').style.display = 'inline';
} else {
document.getElementById('llevo').style.display = 'inline';
}
setInterval(function() {
var boton = document.getElementById('boton_imprimir');
boton.style.backgroundColor = boton.style.backgroundColor === '' ? 'darkorange' : '';
boton.style.color = boton.style.backgroundColor === '' ? 'darkorange' : 'white';
},1000);
</script>
</body>