-
Notifications
You must be signed in to change notification settings - Fork 3
/
page_src.html
143 lines (136 loc) · 7.77 KB
/
page_src.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="theme-color" content="#0073AE">
<meta name="Description" content="Pirate Poster Generator">
<title>Pirate Poster Generator | PPAU-Graphics</title>
<link rel="icon" type="image/png" href="favicon.png">
<base target="_blank">
<style media="screen" type="text/css">
body {font-family: "Open Sans", sans-serif;
width: 90vw; margin:auto;}
img {max-height:400px; max-width: 400px;
border: 2px solid #ddd; border-radius: 6px;
}
.form-popup {position:relative; margin: 0 auto; min-width: 500px; max-width: 50vw; top: 10vh;}
#dlpreview {width: 15vw; object-fit: scale-down; order:1; margin-right:2vw;}
#actualForm {order: 2; float:right; width:calc(100% - 20vw);}
#dlprinter {width: 100%;}
#buttons {position:absolute; right: 6px; bottom:6px; justify-content:right;}
@media (max-width: 500px) { /* smaller screen support */
img {max-height: 80vh; max-width: 80vw;}
.form-popup {width: 100vw; margin: 10vh 0;}
#dlpreview {width: 80vw; object-fit: scale-down; order:2; margin: 1vh 5vw;}
#dlprinter {width: 90vw;}
#actualForm {order: 1; width:100vw;}
#buttons {position:relative; display:flex; justify-content:center;}
}
.caption {font-size : small; font-weight: bolder;}
#postersGoHere, #pamphletsGoHere, #onlinesGoHere {text-align:center; flex-wrap:wrap; display:flex;}
#postersGoHere > div, #pamphletsGoHere > div, #onlinesGoHere > div {margin-bottom: 5vw; margin-right: 2vw;}
hr {color: #0073AE; background-color: #0073AE; border: solid; height: 1vh}
a {color: #0073AE;}
h1, h2 {color: #fff; background-color: #0073AE; border-radius: 6px; padding: 1vw; text-align:center}
.jump {text-align:center}
.footer {display: flex; justify-content: space-between; color: #888}
::selection {color: #fff; background-color: #0073AE;}
.modal {display:none; position:fixed; top: 0; left: 0; z-index: 1;
width:100vw; height:100vh; background-color: rgba(0,0,0,0.5); }
.form-popup {display: none; color: #000; background-color:#fff; padding: 1vw; border-radius: 6px; flex-wrap:wrap;}
.btn {font-size: 1em; border: none; border-radius: 6px; margin-right: 6px; padding: 6px 12px; background-color: #eee;}
.btn-primary {color: #fff; background-color: #0073AE;}
.btn:active {color: #fff; background-color:#005683;}
input {font-size: 0.9em;}
</style>
</head>
<body>
<h1>Click on an image to add a printing tag and get a PDF!</h1>
<p class="jump"><b>Posters</b> • <a href="#pamphlets" target="_self">Pamphlets</a> • <a href="#onlines" target="_self">Pictures</a> • <a href="SITE_ROOTLogos/index.html" target="_self">Logos</a></p>
<p>Under Australian electoral law, <a href="https://pirateparty.org.au/wiki/Authorisation_processes#Printed_materials.2C_videos_and_paid_Internet_advertisements">almost all printed political material</a> must identify the printer, as well as identifiying the authorising person. This page serves as a mechanism to keep authorisation tags current, and to easily insert printing tags.</p>
<p>To download a PDF with the printing tag, simply click on an image and insert the name and full street address of the printer (that's the legal person or company, not the device) when prompted.</p>
<p>Example: <em>P. Sherman Printing, 42 Wallaby Way, Sydney NSW 2003</em></p>
<p>If you want an image to share online, just click the caption to save it as a PNG from this page — the correct authorisation tag is already in place!</p>
<p><a href="SITE_ROOTLogos/index.html">There are logos too!</a></p>
<h2 id="posters">Posters</h2>
<div id="postersGoHere" onclick="clickHandler(event)">
PPAU_POSTERS_HERE
</div>
<h2 id="pamphlets">Pamphlets</h2>
<p class="jump"><a href="#posters" target="_self">Posters</a> • <b>Pamphlets</b> • <a href="#onlines" target="_self">Pictures</a> • <a href="SITE_ROOTLogos/index.html" target="_self">Logos</a></p>
<p><em>(And other multi-page documents...)</em></p>
<div id="pamphletsGoHere" onclick="clickHandler(event)">
PPAU_PAMPHLETS_HERE
</div>
<h1 id="onlines">The below images are just for online...</h1>
<p class="jump"><a href="#posters" target="_self">Posters</a> • <a href="#pamphlets" target="_self">Pamphlets</a> • <b>Pictures</b> • <a href="SITE_ROOTLogos/index.html" target="_self">Logos</a></p>
<p>Click the image (or caption) to download the PNG — the correct authorisation tag is already in place!</p>
<div id="onlinesGoHere"> <!--- No onClick for this one --->
PPAU_ONLINES_HERE
</div>
<hr>
<div class="footer">
<p><a style="color:#888;" href="https://github.com/ppau/ppau-graphics/archive/master.zip">Click here to download the entire repository as a ZIP from GitHub.</a></p>
<p>AUTH_TAG_BASIC</p>
<p>Generated on META_TIMESTAMP from <a style="color:#888;" href="https://github.com/ppau/ppau-graphics/commit/GIT_HASH">GIT_HASH</a></p>
</div>
<div class="footer">
<p>Artwork and text created by members of Pirate Party Australia is released under the <a style="color:#888;" href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International license (CC-BY 4.0),</a> unless otherwise specified.</p>
</div>
<div id="myModal" class="modal">
<div class="form-popup" id="myForm">
<img id="dlpreview" src=""/>
<div id="actualForm">
<form method="get" target="_blank" action="WSGI_URL" id="dlForm" onsubmit="return validateForm()">
<label for="address">Printer's legal name and street address: <span style="color:#f00;">*</span></label><br/>
<input id="dlprinter" type="text" placeholder="P. Sherman Printing, 42 Wallaby Way, Sydney NSW 2003" name="printer" required">
<br/> <br/>
<label for="bleed"><a href="https://en.wikipedia.org/wiki/Bleed_(printing)">Bleed</a> (optional):</label>
<input type="number" min="0" max="10" step="1" placeholder="0" name="bleed" optional> mm
<br/> <br/> <br/>
<input type="hidden" name="name" value="" id=dlname> <input type="hidden" name="format" value="pdf">
<div id="buttons" width="100%;">
<button type="button" class="btn" onclick="closeForm()">Cancel</button>
<button type="submit" class="btn btn-primary">Download PDF</button>
</div>
</form>
</div>
</div>
</div>
<script>
function clickHandler(event){
name = event.target.alt;
console.log(event)
if(event.target.tagName != "IMG"){
return;
}
if(name==""){
return;
}
document.getElementById("dlpreview").setAttribute("src", event.target.src);
document.getElementById("dlname").setAttribute("value", name);
document.getElementById("myForm").style.display = "flex";
document.getElementById("myModal").style.display = "block";
}
function validateForm(){
let printer = document.forms["dlForm"]["dlprinter"];
if (printer.value == ""){
console.log(printer);
printer.focus();
return false;
}
else {
closeForm();
return true;
}
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("myModal").style.display = "none";
}
</script>
</body>
</html>