oda-framework/tools/localization/index.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<meta charset="utf-8">
<link rel="icon" href="data:image/svg+xml,
    <svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
        <text y=%22.9em%22 font-size=%2290%22>🇺🇳</text>
    </svg>">
<oda-localization-test></oda-localization-test>
<!-- <script type="module" src="./localization-fn.js" ></script> -->
<script type="module" >
        import "../../oda.js";
        import "./localization.js";

        ODA({
            is: 'oda-localization-test', imports: '@oda/icon', template: /*html*/ `
            <style>
                :host{ @apply --flex; min-height: 100%; @apply --horizontal; }
                iframe{ width: 100%; }
                .btn {margin:0 .5em; align-items: center; cursor: pointer; padding:3px 5px; }
                .btn:hover {background-color: rgba(0, 0, 0, 0.05);}
            </style>
            <div ~if='hash===""' class="flex vertical">
                <div class="no-flex">
                    <div class='horizontal no-flex'>
                        <div class='horizontal btn' ~for='navigator.languages' :focused="$for.item==lang" @tap="tap($for.item)">
                            <oda-icon style='margin-right:3px' :icon='ODA.getFlags($for.item)'></oda-icon>{{$for.item}}
                        </div>
                    </div>
                    <oda-translate-test></oda-translate-test>
                </div>

                <div class="flex horizontal"  style="position: relative">
                    <iframe class="flex" src="./index.html#first"></iframe>
                    <iframe class="flex" src="./index.html#second"></iframe> 
                    <!-- <iframe class="flex" src="./index.html#third"></iframe> -->
                </div>

            </div>
            <oda-translate-test ~if='hash!=""'></oda-translate-test>
            
            `,  
            tap(l) {
                ODA.language = l;
                this.lang = l
            },
            attached() { this.lang = ODA.language },
            $public: {
                test1: 'test Watchers',
                FAQ: 'FaQ',
                aLocale: '',
                watchers: 'Watchers',
                lang: ''
            },
            $pdp: {
                get hash() { return document.location.hash.substring(1); }
            },
        });

    ODA({
        is: 'oda-translate-test',
        template: /*html*/ `
            <style>
                :host{ @apply --vertical; padding: 16px;}
                .test {border:1px solid silver; padding:2px; margin:1px; background:#efe; }
                .no-translate { background:#eee;}    
            </style>

            <div class='test no-translate' no-translate :title="'title'">
                <div  >1. Просто текст (div):</div>
                <div bold>phrase for translate</div>
            </div>

            <div class='test'>
                <div>2. Просто текст (label):</div>
                <label bold>Phrase for translate</label>
            </div>

            <div class='test'>
                <div>3. binding:</div>
                <label bold>BINDING: {{text}}</label>
            </div>

            <div class='test'>
                <div>4. ~text:</div>
                <label bold ~text="text"></label>
            </div>

            <div class='test'>
                <div>5. ~html -> text:</div>
                <label bold ~html="text"></label>
            </div>
            <div class='test'>
                <div>6. ~html -> html:</div>
                <label bold ~html="html"></label>
            </div>
            <div class='test'>
                <div>7. ~text -> html:</div>
                <label bold ~text="html"></label>
            </div>
            <div class='test no-translate'>
                <div>8. ~html -> html: (div)</div>
                <div bold ~html="html"></div>
            </div>
            <div class='test'>
                <div>9. Ввод:</div>
                <input ::value > <label>{{value}}</label>
                <input :placeholder='"phrase"' >
                <input no-translate :placeholder='"ok"' >
            </div>
        `,
        get text() {
            return 'phrase for Translate ' + document.location.hash.substring(1);
        },
        get html() {
            return '<label>' + this.text + ' - <i>HTML</i> <i style="color:red">phrase</i></label>';
        },
        value: 'phrase'
    })
</script>