VoxVera/voxvera/src/index-master.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=850">
    <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;
            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;
        }

        /* 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;
        }

        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;
            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 {
            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;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }

        .distribute {
            font-size: 18px;
            letter-spacing: 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }

        .redacted {
            text-decoration: line-through;
        }

        .message {
            height: 6in; /* Fixed height to prevent footer push-out */
            margin-top: 10px;
            font-size: 14px;
            line-height: 1.4;
            text-align: left;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            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 = {{locales}}; // 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);
            
            // 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');
                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;
        }

        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">{{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">
                </div>
            </div>
            <!-- Repeat for other tear-offs -->
            <div class="tear-off">
                <div class="tear-off-text">
                    <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">
                </div>
            </div> 
            <div class="tear-off">
                <div class="tear-off-text">
                    <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">
                </div>
            </div> 
            <div class="tear-off">
                <div class="tear-off-text">
                    <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">
                </div>
            </div> 
            <div class="tear-off">
                <div class="tear-off-text">
                    <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">
                </div>
            </div> 
            <div class="tear-off">
                <div class="tear-off-text">
                    <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">
                </div>
            </div> 
            <div class="tear-off">
                <div class="tear-off-text">
                    <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">
                </div>
            </div> 
            <div class="tear-off">
                <div class="tear-off-text">
                    <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">
                </div>
            </div> 
            <div class="tear-off">
                <div class="tear-off-text">
                    <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">
                </div>
            </div> 
            <div class="tear-off">
                <div class="tear-off-text">
                    <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">
                </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="{{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">{{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">{{t_web_print_button}}</button>
        <a class="download-button" href="download/download.zip" download data-i18n="web.download_button">{{t_web_download_button}}</a>
        <select class="lang-select" id="lang-selector" onchange="setLanguage(this.value)"></select>
    </div>
</body>
</html>