thePR0M3TH3AN/VoxVera
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/VoxVera.git synced 2026-11-05 22:20:50 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
b4d8852c3e6d41dfcc77c0ea68d04f5f39c5ef4e
VoxVera/site/index.html
T

472 lines
18 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=850">
<title id="site-title">Vox Vera Printable Flyers</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
margin: 0;
padding: 20px 0;
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
min-height: 100vh;
box-sizing: border-box;
background-color: #ffffff;
}
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, .download-button, .lang-select {
padding: 10px 20px;
font-size: 14px;
cursor: pointer;
background-color: #000;
color: #fff;
border: none;
border-radius: 0px;
font-family: 'Courier New', Courier, monospace;
}
.lang-select {
background-color: #f0f0f0;
color: #000;
border: 1px solid #000;
}
.print-button:hover, .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: 0px 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: none;
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;
}
.footer .credit {
font-size: 12px;
margin-top: 5px;
}
@media print {
body, html {
width: 8.5in;
height: 11in;
margin: 0;
padding: 0;
overflow: hidden;
display: block;
}
.container {
box-shadow: none;
border: none;
page-break-inside: avoid;
margin: 0;
padding: 0;
width: 8.5in;
height: 11in;
overflow: hidden;
}
.print-button, .download-button, .lang-select, .button-bar {
display: none !important;
}
body {
transform: none;
}
}
.button-bar {
display: flex;
gap: 10px;
padding: 20px 0 30px;
}
</style>
<script>
// VoxVera Multi-Language Engine
const locales = {"de": {"meta": {"language_name": "Deutsch", "flag": "\ud83c\udde9\ud83c\uddea"}, "web": {"tear_off_tor_browser": "Tor-Browser verwenden", "tear_off_desc": "um diese Nachricht zu verbreiten, gehen Sie zu", "tear_off_footer": "Klicken Sie auf die Schaltfl\u00e4che unten zum Drucken", "built_with": "erstellt mit", "print_button": "Flyer drucken", "download_button": "Tool & Quellcode herunterladen"}, "landing": {}}, "en": {"meta": {"language_name": "English", "flag": "\ud83c\uddfa\ud83c\uddf8"}, "web": {"tear_off_tor_browser": "Use Tor Browser", "tear_off_desc": "to help spread this message go to", "tear_off_footer": "click the button below to print", "built_with": "built with", "print_button": "Print this page", "download_button": "Download Tool & Source"}, "landing": {}}, "es": {"meta": {"language_name": "Espa\u00f1ol", "flag": "\ud83c\uddea\ud83c\uddf8"}, "web": {"tear_off_tor_browser": "Use el Navegador Tor", "tear_off_desc": "para ayudar a difundir este mensaje vaya a", "tear_off_footer": "haga clic en el bot\u00f3n de abajo para imprimir", "built_with": "construido con", "print_button": "Imprimir volante", "download_button": "Descargar Herramienta y C\u00f3digo"}, "landing": {}}}; // Injected at build time
function t(path, lang) {
const parts = path.split('.');
let val = locales[lang];
for (const part of parts) {
if (!val) return path;
val = val[part];
}
return val || path;
}
function setLanguage(lang) {
if (!locales[lang]) lang = 'en';
localStorage.setItem('voxvera_lang', lang);
document.querySelectorAll('[data-i18n]').forEach(el => {
const path = el.getAttribute('data-i18n');
el.innerText = t(path, lang);
});
document.getElementById('lang-selector').value = lang;
document.documentElement.lang = lang;
}
window.onload = () => {
const selector = document.getElementById('lang-selector');
// Populate selector
Object.keys(locales).forEach(code => {
const opt = document.createElement('option');
opt.value = code;
opt.innerText = `${locales[code].meta.flag} ${locales[code].meta.language_name}`;
selector.appendChild(opt);
});
const savedLang = localStorage.getItem('voxvera_lang');
const browserLang = navigator.language.split('-')[0];
const defaultLang = savedLang || (locales[browserLang] ? browserLang : 'en');
setLanguage(defaultLang);
};
</script>
</head>
<body>
<div class="container">
<div class="left-tear-offs">
<div class="tear-off">
<div class="tear-off-text">
<span data-i18n="web.tear_off_tor_browser">Use Tor Browser</span><br><br>
<span data-i18n="web.tear_off_desc">to help spread this message go to</span><br>
<a class="tear-off-link" href="https://voxvera.org/" target="_blank">https://voxvera.org/</a><br>
<span data-i18n="web.tear_off_footer">click the button below to print</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
</div>
</div>
<!-- Repeat for other tear-offs -->
<div class="tear-off">
<div class="tear-off-text">
<span data-i18n="web.tear_off_tor_browser">Use Tor Browser</span><br><br>
<span data-i18n="web.tear_off_desc">to help spread this message go to</span><br>
<a class="tear-off-link" href="https://voxvera.org/" target="_blank">https://voxvera.org/</a><br>
<span data-i18n="web.tear_off_footer">click the button below to print</span>
</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">
<span data-i18n="web.tear_off_tor_browser">Use Tor Browser</span><br><br>
<span data-i18n="web.tear_off_desc">to help spread this message go to</span><br>
<a class="tear-off-link" href="https://voxvera.org/" target="_blank">https://voxvera.org/</a><br>
<span data-i18n="web.tear_off_footer">click the button below to print</span>
</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">
<span data-i18n="web.tear_off_tor_browser">Use Tor Browser</span><br><br>
<span data-i18n="web.tear_off_desc">to help spread this message go to</span><br>
<a class="tear-off-link" href="https://voxvera.org/" target="_blank">https://voxvera.org/</a><br>
<span data-i18n="web.tear_off_footer">click the button below to print</span>
</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">
<span data-i18n="web.tear_off_tor_browser">Use Tor Browser</span><br><br>
<span data-i18n="web.tear_off_desc">to help spread this message go to</span><br>
<a class="tear-off-link" href="https://voxvera.org/" target="_blank">https://voxvera.org/</a><br>
<span data-i18n="web.tear_off_footer">click the button below to print</span>
</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">
<span data-i18n="web.tear_off_tor_browser">Use Tor Browser</span><br><br>
<span data-i18n="web.tear_off_desc">to help spread this message go to</span><br>
<a class="tear-off-link" href="https://voxvera.org/" target="_blank">https://voxvera.org/</a><br>
<span data-i18n="web.tear_off_footer">click the button below to print</span>
</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">
<span data-i18n="web.tear_off_tor_browser">Use Tor Browser</span><br><br>
<span data-i18n="web.tear_off_desc">to help spread this message go to</span><br>
<a class="tear-off-link" href="https://voxvera.org/" target="_blank">https://voxvera.org/</a><br>
<span data-i18n="web.tear_off_footer">click the button below to print</span>
</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">
<span data-i18n="web.tear_off_tor_browser">Use Tor Browser</span><br><br>
<span data-i18n="web.tear_off_desc">to help spread this message go to</span><br>
<a class="tear-off-link" href="https://voxvera.org/" target="_blank">https://voxvera.org/</a><br>
<span data-i18n="web.tear_off_footer">click the button below to print</span>
</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">
<span data-i18n="web.tear_off_tor_browser">Use Tor Browser</span><br><br>
<span data-i18n="web.tear_off_desc">to help spread this message go to</span><br>
<a class="tear-off-link" href="https://voxvera.org/" target="_blank">https://voxvera.org/</a><br>
<span data-i18n="web.tear_off_footer">click the button below to print</span>
</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">
<span data-i18n="web.tear_off_tor_browser">Use Tor Browser</span><br><br>
<span data-i18n="web.tear_off_desc">to help spread this message go to</span><br>
<a class="tear-off-link" href="https://voxvera.org/" target="_blank">https://voxvera.org/</a><br>
<span data-i18n="web.tear_off_footer">click the button below to print</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
</div>
</div>
</div>
<div class="content">
<h1 id="top-secret-title" data-i18n="landing.title">{{t_landing_title}}</h1>
<div class="distribute" id="do-not-distribute" data-i18n="landing.subtitle">{{t_landing_subtitle}}</div>
<h1 id="operation-title-2" data-i18n="landing.headline">{{t_landing_headline}}</h1>
<hr>
<div class="message">
<div class="text-container" id="main-content" contenteditable="false" data-i18n="landing.content">{{t_landing_content}}</div>
<div class="qr-code-body">
<div class="qr-code-url">
<span class="url-message" data-i18n="landing.url_message">{{t_landing_url_message}}</span><br><br>
<a id="qr-link-2" href="https://github.com/PR0M3TH3AN/VoxVera" target="_blank">https://github.com/PR0M3TH3AN/VoxVera</a>
</div>
<img src="qrcode-content.png" alt="QR Code">
</div>
</div>
<hr>
<div class="footer">
<p class="credit"><span data-i18n="web.built_with">built with</span> <a href="https://github.com/PR0M3TH3AN/VoxVera">voxvera</a></p>
<p class="binary" id="binary-message">0110010 0101011 0110010 0111101 0110100</p>
</div>
</div>
</div>
<div class="button-bar">
<button class="print-button" onclick="window.print()" data-i18n="web.print_button">Print this page</button>
<a class="download-button" href="download/voxvera-portable.zip" download data-i18n="web.download_button">Download Tool & Source</a>
<select class="lang-select" id="lang-selector" onchange="setLanguage(this.value)"></select>
</div>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink