Add download button to flyer

This commit is contained in:
thePR0M3TH3AN committed 2025-06-21 11:06:43 -04:00
1 parent 5f67f148a2
commit 27cca9ddde
3 files changed
+21 -2

No files matched your search

+19
View File
@@ -68,6 +68,20 @@
background-color: #444;
}
.download-button {
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
background-color: #000;
color: #fff;
border: none;
border-radius: 0px;
}
.download-button:hover {
background-color: #444;
}
.left-tear-offs {
width: 3.75in;
padding: 8px;
@@ -256,6 +270,10 @@
display: none;
}
.download-button {
display: none;
}
body {
transform: none;
}
@@ -425,6 +443,7 @@
</div>
</div>
<button class="print-button" onclick="window.print()">Print this page</button>
<a class="download-button" href="download/download.zip" download>Download</a>
<script>
// Fetch the configuration JSON file
+1 -1
View File
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=1024,initial-scale=1,maximum-scale=1,user-scalable=no"><title id="site-title">Vox Vera Printable Flyers</title><style>body{font-family:'Courier New',Courier,monospace;margin:0;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh;box-sizing:border-box;overflow:hidden;background-color:#fff}a{color:#b80000;text-decoration:none}a:hover{text-decoration:underline}.wrapper{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%;width:100%}.container{display:flex;flex-direction:row;height:11in;width:8.5in;border:1px solid #000;box-sizing:border-box;overflow:hidden;page-break-inside:avoid}.print-button-container{margin-top:20px}.print-button{padding:10px 20px;font-size:14px;cursor:pointer;background-color:#000;color:#fff;border:none;border-radius:0}.print-button:hover{background-color:#444}.left-tear-offs{width:3.75in;padding:8px;border-right:1px dashed #000;display:flex;flex-direction:column;justify-content:space-between;gap:5px;box-sizing:border-box}.tear-off{display:flex;padding:5px;border:1px dashed #000;font-size:10px;box-sizing:border-box;page-break-inside:avoid;align-items:flex-start}.tear-off-text{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;word-break:break-all}.tear-off a{color:#b80000;text-decoration:none}.tear-off a:hover{text-decoration:underline}.qr-code{width:80px;height:80px;border:0 solid #000;margin-left:10px;flex-shrink:0}.qr-code img{width:100%;height:100%;object-fit:contain}.content{width:calc(8.5in - 3.75in);padding:20px;text-align:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;page-break-inside:avoid;overflow-wrap:break-word}h1{margin:0;margin-bottom:10px;font-size:24px;letter-spacing:2px}.distribute{font-size:18px;letter-spacing:6px}.redacted{text-decoration:line-through}.message{flex:1;margin-top:10px;font-size:14px;line-height:1.4;text-align:left;overflow-wrap:break-word;display:flex;flex-direction:column;justify-content:flex-end;white-space:pre-wrap;box-sizing:border-box;position:relative}.text-container{flex:1;width:100%;height:100%;border:none;outline:0;font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1.4;overflow:hidden;box-sizing:border-box}.qr-code-body{width:100%;height:auto;display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:0;box-sizing:border-box}.qr-code-body img{width:80px;height:80px;object-fit:contain;flex-shrink:0}.qr-code-url{font-size:12px;text-align:left;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;flex-grow:1;margin-right:10px;max-width:60%}hr{border:none;border-top:1px solid #000;width:100%;margin:10px 0}.footer{font-size:10px;overflow-wrap:break-word;text-align:center;align-self:center;width:100%;padding:10px 0;box-sizing:border-box;border-top:1px solid #000}.footer p{margin:0;padding:0}.footer .binary{margin-bottom:5px;margin-top:20px}@media print{body,html{width:8.5in;height:11in;margin:0;padding:0}.container{box-shadow:none;border:none;page-break-inside:avoid;margin:0;padding:0;width:8.5in;height:11in}.print-button{display:none}body{transform:none}}.print-button{margin-top:20px;padding:10px 20px;font-size:14px;cursor:pointer;background-color:#000;color:#fff;border:none;border-radius:0}.print-button:hover{background-color:#444}</style></head><body><div class="container"><div class="left-tear-offs"><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<Line truncated
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=1024,initial-scale=1,maximum-scale=1,user-scalable=no"><title id="site-title">Vox Vera Printable Flyers</title><style>body{font-family:'Courier New',Courier,monospace;margin:0;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh;box-sizing:border-box;overflow:hidden;background-color:#fff}a{color:#b80000;text-decoration:none}a:hover{text-decoration:underline}.wrapper{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%;width:100%}.container{display:flex;flex-direction:row;height:11in;width:8.5in;border:1px solid #000;box-sizing:border-box;overflow:hidden;page-break-inside:avoid}.print-button-container{margin-top:20px}.print-button{padding:10px 20px;font-size:14px;cursor:pointer;background-color:#000;color:#fff;border:none;border-radius:0}.print-button:hover{background-color:#444}.download-button{padding:10px 20px;font-size:14px;cursor:pointer;background-color:#000;color:#fff;border:none;border-radius:0}.download-button:hover{background-color:#444}.left-tear-offs{width:3.75in;padding:8px;border-right:1px dashed #000;display:flex;flex-direction:column;justify-content:space-between;gap:5px;box-sizing:border-box}.tear-off{display:flex;padding:5px;border:1px dashed #000;font-size:10px;box-sizing:border-box;page-break-inside:avoid;align-items:flex-start}.tear-off-text{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;word-break:break-all}.tear-off a{color:#b80000;text-decoration:none}.tear-off a:hover{text-decoration:underline}.qr-code{width:80px;height:80px;border:0 solid #000;margin-left:10px;flex-shrink:0}.qr-code img{width:100%;height:100%;object-fit:contain}.content{width:calc(8.5in - 3.75in);padding:20px;text-align:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;page-break-inside:avoid;overflow-wrap:break-word}h1{margin:0;margin-bottom:10px;font-size:24px;letter-spacing:2px}.distribute{font-size:18px;letter-spacing:6px}.redacted{text-decoration:line-through}.message{flex:1;margin-top:10px;font-size:14px;line-height:1.4;text-align:left;overflow-wrap:break-word;display:flex;flex-direction:column;justify-content:flex-end;white-space:pre-wrap;box-sizing:border-box;position:relative}.text-container{flex:1;width:100%;height:100%;border:none;outline:0;font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1.4;white-space:pre-wrap;overflow:hidden;box-sizing:border-box}.qr-code-body{width:100%;height:auto;display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:0;box-sizing:border-box}.qr-code-body img{width:80px;height:80px;object-fit:contain;flex-shrink:0}.qr-code-url{font-size:12px;text-align:left;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;flex-grow:1;margin-right:10px;max-width:60%}hr{border:none;border-top:1px solid #000;width:100%;margin:10px 0}.footer{font-size:10px;overflow-wrap:break-word;text-align:center;align-self:center;width:100%;padding:10px 0;box-sizing:border-box;border-top:1px solid #000}.footer p{margin:0;padding:0}.footer .binary{margin-bottom:5px;margin-top:20px}@media print{body,html{width:8.5in;height:11in;margin:0;padding:0}.container{box-shadow:none;border:none;page-break-inside:avoid;margin:0;padding:0;width:8.5in;height:11in}.print-button{display:none}.download-button{display:none}body{transform:none}}.print-button{margin-top:20px;padding:10px 20px;font-size:14px;cursor:pointer;background-color:#000;color:#fff;border:none;border-radius:0}.print-button:hover{background-color:#444}</style></head><body><div class="container"><div class="left-tear-offs"><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>Line truncated
+1 -1
View File
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=1024,initial-scale=1,maximum-scale=1,user-scalable=no"><title id="site-title">Vox Vera Printable Flyers</title><style>body{font-family:'Courier New',Courier,monospace;margin:0;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh;box-sizing:border-box;overflow:hidden;background-color:#fff}a{color:#b80000;text-decoration:none}a:hover{text-decoration:underline}.wrapper{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%;width:100%}.container{display:flex;flex-direction:row;height:11in;width:8.5in;border:1px solid #000;box-sizing:border-box;overflow:hidden;page-break-inside:avoid}.print-button-container{margin-top:20px}.print-button{padding:10px 20px;font-size:14px;cursor:pointer;background-color:#000;color:#fff;border:none;border-radius:0}.print-button:hover{background-color:#444}.left-tear-offs{width:3.75in;padding:8px;border-right:1px dashed #000;display:flex;flex-direction:column;justify-content:space-between;gap:5px;box-sizing:border-box}.tear-off{display:flex;padding:5px;border:1px dashed #000;font-size:10px;box-sizing:border-box;page-break-inside:avoid;align-items:flex-start}.tear-off-text{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;word-break:break-all}.tear-off a{color:#b80000;text-decoration:none}.tear-off a:hover{text-decoration:underline}.qr-code{width:80px;height:80px;border:0 solid #000;margin-left:10px;flex-shrink:0}.qr-code img{width:100%;height:100%;object-fit:contain}.content{width:calc(8.5in - 3.75in);padding:20px;text-align:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;page-break-inside:avoid;overflow-wrap:break-word}h1{margin:0;margin-bottom:10px;font-size:24px;letter-spacing:2px}.distribute{font-size:18px;letter-spacing:6px}.redacted{text-decoration:line-through}.message{flex:1;margin-top:10px;font-size:14px;line-height:1.4;text-align:left;overflow-wrap:break-word;display:flex;flex-direction:column;justify-content:flex-end;white-space:pre-wrap;box-sizing:border-box;position:relative}.text-container{flex:1;width:100%;height:100%;border:none;outline:0;font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1.4;overflow:hidden;box-sizing:border-box}.qr-code-body{width:100%;height:auto;display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:0;box-sizing:border-box}.qr-code-body img{width:80px;height:80px;object-fit:contain;flex-shrink:0}.qr-code-url{font-size:12px;text-align:left;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;flex-grow:1;margin-right:10px;max-width:60%}hr{border:none;border-top:1px solid #000;width:100%;margin:10px 0}.footer{font-size:10px;overflow-wrap:break-word;text-align:center;align-self:center;width:100%;padding:10px 0;box-sizing:border-box;border-top:1px solid #000}.footer p{margin:0;padding:0}.footer .binary{margin-bottom:5px;margin-top:20px}@media print{body,html{width:8.5in;height:11in;margin:0;padding:0}.container{box-shadow:none;border:none;page-break-inside:avoid;margin:0;padding:0;width:8.5in;height:11in}.print-button{display:none}body{transform:none}}.print-button{margin-top:20px;padding:10px 20px;font-size:14px;cursor:pointer;background-color:#000;color:#fff;border:none;border-radius:0}.print-button:hover{background-color:#444}</style></head><body><div class="container"><div class="left-tear-offs"><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<Line truncated
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=1024,initial-scale=1,maximum-scale=1,user-scalable=no"><title id="site-title">Vox Vera Printable Flyers</title><style>body{font-family:'Courier New',Courier,monospace;margin:0;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:column;height:100vh;box-sizing:border-box;overflow:hidden;background-color:#fff}a{color:#b80000;text-decoration:none}a:hover{text-decoration:underline}.wrapper{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%;width:100%}.container{display:flex;flex-direction:row;height:11in;width:8.5in;border:1px solid #000;box-sizing:border-box;overflow:hidden;page-break-inside:avoid}.print-button-container{margin-top:20px}.print-button{padding:10px 20px;font-size:14px;cursor:pointer;background-color:#000;color:#fff;border:none;border-radius:0}.print-button:hover{background-color:#444}.download-button{padding:10px 20px;font-size:14px;cursor:pointer;background-color:#000;color:#fff;border:none;border-radius:0}.download-button:hover{background-color:#444}.left-tear-offs{width:3.75in;padding:8px;border-right:1px dashed #000;display:flex;flex-direction:column;justify-content:space-between;gap:5px;box-sizing:border-box}.tear-off{display:flex;padding:5px;border:1px dashed #000;font-size:10px;box-sizing:border-box;page-break-inside:avoid;align-items:flex-start}.tear-off-text{flex:1;min-width:0;word-wrap:break-word;overflow-wrap:break-word;word-break:break-all}.tear-off a{color:#b80000;text-decoration:none}.tear-off a:hover{text-decoration:underline}.qr-code{width:80px;height:80px;border:0 solid #000;margin-left:10px;flex-shrink:0}.qr-code img{width:100%;height:100%;object-fit:contain}.content{width:calc(8.5in - 3.75in);padding:20px;text-align:center;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;page-break-inside:avoid;overflow-wrap:break-word}h1{margin:0;margin-bottom:10px;font-size:24px;letter-spacing:2px}.distribute{font-size:18px;letter-spacing:6px}.redacted{text-decoration:line-through}.message{flex:1;margin-top:10px;font-size:14px;line-height:1.4;text-align:left;overflow-wrap:break-word;display:flex;flex-direction:column;justify-content:flex-end;white-space:pre-wrap;box-sizing:border-box;position:relative}.text-container{flex:1;width:100%;height:100%;border:none;outline:0;font-family:'Courier New',Courier,monospace;font-size:14px;line-height:1.4;white-space:pre-wrap;overflow:hidden;box-sizing:border-box}.qr-code-body{width:100%;height:auto;display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:0;box-sizing:border-box}.qr-code-body img{width:80px;height:80px;object-fit:contain;flex-shrink:0}.qr-code-url{font-size:12px;text-align:left;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;flex-grow:1;margin-right:10px;max-width:60%}hr{border:none;border-top:1px solid #000;width:100%;margin:10px 0}.footer{font-size:10px;overflow-wrap:break-word;text-align:center;align-self:center;width:100%;padding:10px 0;box-sizing:border-box;border-top:1px solid #000}.footer p{margin:0;padding:0}.footer .binary{margin-bottom:5px;margin-top:20px}@media print{body,html{width:8.5in;height:11in;margin:0;padding:0}.container{box-shadow:none;border:none;page-break-inside:avoid;margin:0;padding:0;width:8.5in;height:11in}.print-button{display:none}.download-button{display:none}body{transform:none}}.print-button{margin-top:20px;padding:10px 20px;font-size:14px;cursor:pointer;background-color:#000;color:#fff;border:none;border-radius:0}.print-button:hover{background-color:#444}</style></head><body><div class="container"><div class="left-tear-offs"><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>click the button below to print</div><div class="qr-code"><img src="qrcode-tear-offs.png" alt="QR Code"></div></div><div class="tear-off"><div class="tear-off-text">Use Tor Browser<br><br>to help spread this message go to<br><a class="tear-off-link" href="#">Loading...</a><br>Line truncated