fix(templates): sync bundled index.html copies with master template

These files are not read by the build pipeline (which always generates
from index-master.html), but keeping them in sync avoids confusion.

Co-Authored-By: Claude Opus 4.6 <[email protected]>
This commit is contained in:
thePR0M3TH3ANandClaude Opus 4.6 committed 2026-03-16 21:33:47 -04:00
1 parent 91391b1dd7
commit fc628fb9a0
2 files changed
+189 -68

No files matched your search

+62 -58
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=850">
<title id="site-title">Vox Vera Printable Flyers</title>
<title id="site-title">{{name}}</title>
<style>
body {
font-family: 'Courier New', Courier, 'Nimbus Mono L', 'Liberation Mono', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans Devanagari', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans Arabic UI', monospace;
@@ -169,20 +169,21 @@
.content {
width: calc(8.5in - 3.75in);
padding: 20px;
padding: 15px 20px;
text-align: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: flex-start;
page-break-inside: avoid;
overflow-wrap: break-word;
}
h1 {
margin: 0;
margin-bottom: 10px;
padding: 0;
font-size: 24px;
line-height: 1.2;
letter-spacing: 2px;
white-space: nowrap;
overflow: hidden;
@@ -192,7 +193,10 @@
.distribute {
font-size: 18px;
line-height: 1.2;
letter-spacing: 6px;
margin: 2px 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -204,8 +208,8 @@
}
.message {
height: 6in; /* Fixed height to prevent footer push-out */
margin-top: 10px;
flex: 1;
margin-top: 4px;
font-size: 14px;
line-height: 1.4;
text-align: left;
@@ -265,7 +269,7 @@
border: none;
border-top: 1px solid #000;
width: 100%;
margin: 10px 0;
margin: 4px 0;
}
.footer {
@@ -378,7 +382,7 @@
</style>
<script>
// VoxVera Multi-Language Engine
const locales = {"ar": {"meta": {"language_name": "\u0627\u0644\u0639\u0631\u0628\u064a\u0629", "flag": "\ud83c\uddf8\ud83c\udde6", "direction": "rtl"}, "web": {"tear_off_tor_browser": "\u0627\u0633\u062a\u062e\u062f\u0645 \u0645\u062a\u0635\u0641\u062d Tor", "tear_off_desc": "\u0644\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0641\u064a \u0646\u0634\u0631 \u0647\u0630\u0647 \u0627\u0644\u0631\u0633\u0627\u0644\u0629\u060c \u0627\u0646\u062a\u0642\u0644 \u0625\u0644\u0649", "tear_off_footer": "\u0627\u0646\u0642\u0631 \u0641\u0648\u0642 \u0627\u0644\u0632\u0631 \u0623\u062f\u0646\u0627\u0647 \u0644\u0644\u0637\u0628\u0627\u0639\u0629", "built_with": "\u0628\u0646\u064a \u0628\u0648\u0627\u0633\u0637\u0629", "print_button": "\u0627\u0637\u0628\u0639 \u0627\u0644\u0645\u0646\u0634\u0648\u0631", "download_button": "\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0623\u062f\u0627\u0629 \u0648\u0627\u0644\u0643\u0648\u062f", "download_attachment": "Download Attachment"}, "landing": {"title": "\u0633\u0631\u064a \u0644\u0644\u063a\u0627\u064a\u0629", "subtitle": "~~\u0644\u0627~~ \u0644\u0644\u0646\u0634\u0631", "headline": "\u0639\u0645\u0644\u064a\u0629 VOX VERA", "content": "\u062a\u062d\u0631\u0631 \u0645\u0646 \u0627\u0644\u0631\u0642\u0627\u0628\u0629 \u0645\u0639 VoxVera. \u0623\u062f\u0627\u0629 \u062a\u0633\u0648\u064a\u0642 \u0639\u0635\u0627\u0628\u0627\u062a \u0645\u062c\u0647\u0648\u0644\u0629 \u0648\u0646\u0634\u0631 \u0631\u0633\u0627\u0626\u0644. \u0633\u0648\u0627\u0621 \u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a \u0623\u0648 \u0641\u064a \u0627\u0644\u0639\u0627\u0644\u0645 \u0627\u0644\u0645\u0627\u062f\u064a\u060c \u064a\u0645\u0643\u0646\u0647\u0627 \u062a\u0645\u0643\u064a\u0646\u0643 \u0645\u0646 \u0646\u0634\u0631 \u0623\u0641\u0643\u0627\u0631\u0643 \u0628\u062c\u0631\u0623\u0629\u060c \u0645\u062d\u0645\u064a\u0629 \u0628\u0625\u062e\u0641\u0627\u0621 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0643\u0627\u0645\u0644 (\u0625\u0630\u0627 \u0643\u0646\u062a \u062a\u0633\u062a\u0636\u064a\u0641 \u0639\u0628\u0631 Tor). \u0642\u0645 \u0628\u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0643\u0648\u062f\u060c \u0648\u0635\u0645\u0645 \u0645\u0648\u0642\u0639 \u0645\u0646\u0634\u0648\u0631\u060c \u0648\u0627\u0633\u062a\u0636\u064a\u0641\u0647 \u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a \u0648\u0642\u0645 \u0628\u062a\u0636\u062e\u064a\u0645 \u0631\u0633\u0627\u0644\u062a\u0643.<br><br>\u0627\u0633\u062a\u062e\u062f\u0645 \u0627\u0644\u0642\u0648\u0629 \u0627\u0644\u0645\u064a\u0645\u064a\u0629 \u0644\u0645\u0634\u0627\u0631\u0643\u0629 \u0623\u0641\u0643\u0627\u0631\u0643 \u0641\u064a \u0645\u062f\u0631\u0633\u062a\u0643\u060c \u0623\u0648 \u0645\u0643\u0627\u0646 \u0639\u0645\u0644\u0643\u060c \u0623\u0648 \u0645\u062c\u062a\u0645\u0639\u0627\u062a\u0643 \u0639\u0628\u0631 \u0627\u0644\u0625\u0646\u062a\u0631\u0646\u062a\u060c \u0623\u0648 \u062d\u062a\u0649 \u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0639\u0627\u0644\u0645. \u062a\u0636\u0645\u0646 VoxVera \u062a\u0631\u062f\u062f \u0635\u062f\u0649 \u0631\u0633\u0627\u0644\u062a\u0643 \u0628\u0639\u064a\u062f\u0627\u064b \u0648\u0639\u0644\u0649 \u0646\u0637\u0627\u0642 \u0648\u0627\u0633\u0639\u060c \u0645\u0639 \u0623\u0642\u0633\u0627\u0645 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u0646\u0632\u0639 \u062a\u062a\u0645\u064a\u0632 \u0628\u0631\u0648\u0627\u0628\u0637 \u0641\u0631\u064a\u062f\u0629 \u0648\u0623\u0643\u0648\u0627\u062f QR \u0644\u0633\u0647\u0648\u0644\u0629 \u0625\u0639\u0627\u062f\u0629 \u0627\u0644\u0637\u0628\u0627\u0639\u0629.<br><br>\u064a\u0645\u0643\u0646 \u0627\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u062e\u0635\u0648\u0635\u064a\u0629. \u064a\u0645\u0643\u0646 \u0645\u0634\u0627\u0631\u0643\u0629 \u0627\u0644\u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0639\u0628\u0631 \u0634\u0628\u0643\u0629 Tor\u060c \u0645\u0645\u0627 \u064a\u062d\u0645\u064a \u0627\u0644\u0645\u0636\u064a\u0641 \u0648\u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u064a\u0646 \u0645\u0646 \u0627\u0644\u0631\u0642\u0627\u0628\u0629.<br><br>\u0627\u0646\u0636\u0645 \u0625\u0644\u064a\u0646\u0627 \u0641\u064a \u062b\u0648\u0631\u0629 \u062a\u0642\u062f\u0631 \u0627\u0644\u062d\u0642\u064a\u0642\u0629 \u0648\u0627\u0644\u0634\u0641\u0627\u0641\u064a\u0629. \u0645\u0639\u0627\u064b\u060c \u064a\u0645\u0643\u0646\u0646\u0627 \u0628\u0646\u0627\u0621 \u0634\u0628\u0643\u0629 \u0645\u0646 \u0627\u0644\u0645\u0648\u0627\u0637\u0646\u064a\u0646 \u0627\u0644\u0645\u0633\u062a\u0646\u064a\u0631\u064a\u0646 \u0627\u0644\u0630\u064a\u0646 \u0644\u0627 \u064a\u062e\u0634\u0648\u0646 \u0627\u0644\u062a\u062d\u062f\u062b.", "url_message": "\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 VoxVera \u0648\u0627\u0628\u062f\u0623 \u0628\u0646\u0634\u0631 \u0631\u0633\u0627\u0644\u062a\u0643.", "name": "\u0645\u0646\u0634\u0648\u0631\u0627\u062a Vox Vera \u0627\u0644Line truncated
const locales = {{locales}}; // Injected at build time
function t(path, lang) {
const parts = path.split('.');
@@ -441,10 +445,10 @@
<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>
<span data-i18n="web.tear_off_tor_browser">{{t_web_tear_off_tor_browser}}</span><br><br>
<span data-i18n="web.tear_off_desc">{{t_web_tear_off_desc}}</span><br>
<a class="tear-off-link" href="{{tear_off_link}}" target="_blank">{{tear_off_link}}</a><br>
<span data-i18n="web.tear_off_footer">{{t_web_tear_off_footer}}</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
@@ -453,10 +457,10 @@
<!-- 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>
<span data-i18n="web.tear_off_tor_browser">{{t_web_tear_off_tor_browser}}</span><br><br>
<span data-i18n="web.tear_off_desc">{{t_web_tear_off_desc}}</span><br>
<a class="tear-off-link" href="{{tear_off_link}}" target="_blank">{{tear_off_link}}</a><br>
<span data-i18n="web.tear_off_footer">{{t_web_tear_off_footer}}</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
@@ -464,10 +468,10 @@
</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>
<span data-i18n="web.tear_off_tor_browser">{{t_web_tear_off_tor_browser}}</span><br><br>
<span data-i18n="web.tear_off_desc">{{t_web_tear_off_desc}}</span><br>
<a class="tear-off-link" href="{{tear_off_link}}" target="_blank">{{tear_off_link}}</a><br>
<span data-i18n="web.tear_off_footer">{{t_web_tear_off_footer}}</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
@@ -475,10 +479,10 @@
</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>
<span data-i18n="web.tear_off_tor_browser">{{t_web_tear_off_tor_browser}}</span><br><br>
<span data-i18n="web.tear_off_desc">{{t_web_tear_off_desc}}</span><br>
<a class="tear-off-link" href="{{tear_off_link}}" target="_blank">{{tear_off_link}}</a><br>
<span data-i18n="web.tear_off_footer">{{t_web_tear_off_footer}}</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
@@ -486,10 +490,10 @@
</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>
<span data-i18n="web.tear_off_tor_browser">{{t_web_tear_off_tor_browser}}</span><br><br>
<span data-i18n="web.tear_off_desc">{{t_web_tear_off_desc}}</span><br>
<a class="tear-off-link" href="{{tear_off_link}}" target="_blank">{{tear_off_link}}</a><br>
<span data-i18n="web.tear_off_footer">{{t_web_tear_off_footer}}</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
@@ -497,10 +501,10 @@
</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>
<span data-i18n="web.tear_off_tor_browser">{{t_web_tear_off_tor_browser}}</span><br><br>
<span data-i18n="web.tear_off_desc">{{t_web_tear_off_desc}}</span><br>
<a class="tear-off-link" href="{{tear_off_link}}" target="_blank">{{tear_off_link}}</a><br>
<span data-i18n="web.tear_off_footer">{{t_web_tear_off_footer}}</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
@@ -508,10 +512,10 @@
</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>
<span data-i18n="web.tear_off_tor_browser">{{t_web_tear_off_tor_browser}}</span><br><br>
<span data-i18n="web.tear_off_desc">{{t_web_tear_off_desc}}</span><br>
<a class="tear-off-link" href="{{tear_off_link}}" target="_blank">{{tear_off_link}}</a><br>
<span data-i18n="web.tear_off_footer">{{t_web_tear_off_footer}}</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
@@ -519,10 +523,10 @@
</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>
<span data-i18n="web.tear_off_tor_browser">{{t_web_tear_off_tor_browser}}</span><br><br>
<span data-i18n="web.tear_off_desc">{{t_web_tear_off_desc}}</span><br>
<a class="tear-off-link" href="{{tear_off_link}}" target="_blank">{{tear_off_link}}</a><br>
<span data-i18n="web.tear_off_footer">{{t_web_tear_off_footer}}</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
@@ -530,10 +534,10 @@
</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>
<span data-i18n="web.tear_off_tor_browser">{{t_web_tear_off_tor_browser}}</span><br><br>
<span data-i18n="web.tear_off_desc">{{t_web_tear_off_desc}}</span><br>
<a class="tear-off-link" href="{{tear_off_link}}" target="_blank">{{tear_off_link}}</a><br>
<span data-i18n="web.tear_off_footer">{{t_web_tear_off_footer}}</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
@@ -541,10 +545,10 @@
</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>
<span data-i18n="web.tear_off_tor_browser">{{t_web_tear_off_tor_browser}}</span><br><br>
<span data-i18n="web.tear_off_desc">{{t_web_tear_off_desc}}</span><br>
<a class="tear-off-link" href="{{tear_off_link}}" target="_blank">{{tear_off_link}}</a><br>
<span data-i18n="web.tear_off_footer">{{t_web_tear_off_footer}}</span>
</div>
<div class="qr-code">
<img src="qrcode-tear-offs.png" alt="QR Code">
@@ -552,32 +556,32 @@
</div>
</div>
<div class="content">
<h1 id="top-secret-title" data-i18n="landing.title">TOP SECRET</h1>
<div class="distribute" id="do-not-distribute" data-i18n="landing.subtitle">DO <span class="redacted">NOT</span> DISTRIBUTE</div>
<h1 id="operation-title-2" data-i18n="landing.headline">OPERATION VOX VERA</h1>
<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">Break free from censorship with VoxVera. An anonymous guerrilla marketing and message-spreading tool. Whether online or in the physical world, it can empower you to spread your ideas boldly, shielded by complete anonymity (if you host over Tor). Download the code, design a flyer site, host it online and amplify your message.<br><br>Use memetic power to share your ideas in your school, workplace, online communities, or even globally. VoxVera ensures your message resonates far and wide, with tear-off sections featuring unique URLs and QR codes for easy reprinting.<br><br>Privacy can be maintained. Flyers can be shared via the Tor network, protecting hoster and users from censorship.<br><br>Join us in a revolution that values truth and transparency. Together, we can build a network of informed citizens who are unafraid to speak out.</div>
<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">Get VoxVera and start spreading your message.</span><br><br>
<a id="qr-link-2" href="https://github.com/PR0M3TH3AN/VoxVera" target="_blank">https://github.com/PR0M3TH3AN/VoxVera</a>
<span class="url-message" data-i18n="landing.url_message">{{t_landing_url_message}}</span><br><br>
<a id="qr-link-2" href="{{url}}" target="_blank">{{url}}</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>
<p class="credit"><span data-i18n="web.built_with">{{t_web_built_with}}</span> <a href="https://github.com/PR0M3TH3AN/VoxVera">voxvera</a></p>
<p class="binary" id="binary-message">{{binary_message}}</p>
</div>
</div>
</div>
<div class="button-bar">
<button class="print-button" onclick="window.print()" data-i18n="web.print_button">Print this page</button>
<button class="print-button" onclick="window.print()" data-i18n="web.print_button">{{t_web_print_button}}</button>
<a id="download-link" href="download/voxvera-source.zip" download>
<button class="download-button" data-i18n="web.download_button">Download Source Code</button>
<button class="download-button" data-i18n="web.download_button">{{t_web_download_button}}</button>
</a>
<select class="lang-select" id="lang-selector" onchange="setLanguage(this.value)"></select>
</div>
+127 -10
View File
@@ -7,7 +7,7 @@
<title id="site-title">{{name}}</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
font-family: 'Courier New', Courier, 'Nimbus Mono L', 'Liberation Mono', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans Devanagari', 'Noto Sans JP', 'Noto Sans SC', 'Noto Sans Arabic UI', monospace;
margin: 0;
padding: 20px 0;
display: flex;
@@ -19,6 +19,45 @@
background-color: #ffffff;
}
/* RTL Layout Overrides */
[dir="rtl"] .container {
flex-direction: row-reverse;
}
[dir="rtl"] .left-tear-offs {
border-right: none;
border-left: 1px dashed #000;
}
[dir="rtl"] .tear-off {
flex-direction: row-reverse;
}
[dir="rtl"] .qr-code {
margin-left: 0;
margin-right: 10px;
}
[dir="rtl"] .qr-code-body {
flex-direction: row-reverse;
}
[dir="rtl"] .qr-code-url {
text-align: right;
margin-right: 0;
margin-left: 10px;
}
[dir="rtl"] .message {
text-align: right;
}
[dir="rtl"] .text-container {
text-align: right;
}
/* ... existing styles ... */
a {
color: #b80000;
text-decoration: none;
@@ -87,12 +126,14 @@
.tear-off {
display: flex;
height: 1in; /* Fixed height for consistency */
padding: 5px;
border: 1px dashed #000;
font-size: 10px;
box-sizing: border-box;
page-break-inside: avoid;
align-items: flex-start;
overflow: hidden;
}
.tear-off-text {
@@ -128,26 +169,38 @@
.content {
width: calc(8.5in - 3.75in);
padding: 20px;
padding: 15px 20px;
text-align: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
justify-content: flex-start;
page-break-inside: avoid;
overflow-wrap: break-word;
}
h1 {
margin: 0;
margin-bottom: 10px;
padding: 0;
font-size: 24px;
line-height: 1.2;
letter-spacing: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.distribute {
font-size: 18px;
line-height: 1.2;
letter-spacing: 6px;
margin: 2px 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}
.redacted {
@@ -156,14 +209,14 @@
.message {
flex: 1;
margin-top: 10px;
margin-top: 4px;
font-size: 14px;
line-height: 1.4;
text-align: left;
overflow-wrap: break-word;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-end;
justify-content: flex-start;
white-space: pre-wrap;
box-sizing: border-box;
position: relative;
@@ -216,7 +269,7 @@
border: none;
border-top: 1px solid #000;
width: 100%;
margin: 10px 0;
margin: 4px 0;
}
.footer {
@@ -281,6 +334,51 @@
padding: 20px 0 30px;
}
/* Dropdown styles */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
bottom: 100%;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border: 1px solid #000;
margin-bottom: 5px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: 'Courier New', Courier, monospace;
font-size: 14px;
border-bottom: 1px solid #eee;
}
.dropdown-content a:last-child {
border-bottom: none;
}
.dropdown-content a:hover {
background-color: #eee;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .download-button {
background-color: #333;
color: #fff;
}
</style>
<script>
// VoxVera Multi-Language Engine
@@ -299,9 +397,25 @@
function setLanguage(lang) {
if (!locales[lang]) lang = 'en';
localStorage.setItem('voxvera_lang', lang);
// Set text direction
const direction = locales[lang].meta.direction || 'ltr';
document.documentElement.dir = direction;
document.documentElement.lang = lang;
document.querySelectorAll('[data-i18n]').forEach(el => {
const path = el.getAttribute('data-i18n');
el.innerText = t(path, lang);
let translation = t(path, lang);
if (translation) {
// Support Markdown-style redaction ~~text~~ -> <span class="redacted">text</span>
translation = translation.replace(/~~(.*?)~~/g, '<span class="redacted">$1</span>');
if (path.startsWith('landing.') || path.includes('subtitle') || path.includes('content')) {
el.innerHTML = translation;
} else {
el.innerText = translation;
}
}
});
document.getElementById('lang-selector').value = lang;
document.documentElement.lang = lang;
@@ -449,6 +563,7 @@
<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="{{url}}" target="_blank">{{url}}</a>
@@ -465,7 +580,9 @@
</div>
<div class="button-bar">
<button class="print-button" onclick="window.print()" data-i18n="web.print_button">{{t_web_print_button}}</button>
<a class="download-button" href="download/download.zip" download data-i18n="web.download_button">{{t_web_download_button}}</a>
<a id="download-link" href="download/voxvera-source.zip" download>
<button class="download-button" data-i18n="web.download_button">{{t_web_download_button}}</button>
</a>
<select class="lang-select" id="lang-selector" onchange="setLanguage(this.value)"></select>
</div>
</body>