translation-widget/index.html at main · JigsawStack/translation-widget · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
        body {
            font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
            background: #f7f9fb;
            color: #222;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            line-height: 1.6;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
        }

        main {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 1rem;
        }

        h1,
        h2,
        h3 {
            color: #1a237e;
            margin-top: 0;
        }

        a {
            color: #2563eb;
            text-decoration: none;
            transition: color 0.2s;
        }

        a:hover {
            color: #1d4ed8;
            text-decoration: underline;
        }

        ul {
            padding-left: 1.5rem;
        }

        section {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
            margin-bottom: 2rem;
            padding: 2rem;
        }

        footer {
            text-align: center;
            color: #888;
            font-size: 0.95rem;
            margin: 2rem 0 1rem 0;
        }
    </style>
</head>

<body>
    <header class="tw-header">
        <nav class="tw-nav">
            <p> hello there i m vineet</p>
            <a href="#home">Home</a>
            <a href="#products">Product</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section class="article-grid">
            <article class="article">
                <h2>Latest News</h2>
                <p>
                    We're excited to announce the launch of our new product
                    line. Our team has been working tirelessly to bring you
                    the best possible experience.
                </p>
                <button class="tw-button">Read More</button>
            </article>

            <article class="article">
                <h2>Company Updates</h2>
                <p>
                    Our company has expanded to three new locations this
                    year. We're now serving customers in over 50 countries
                    worldwide.
                </p>
                <button class="tw-button">Learn More</button>
            </article>

            <article class="article">
                <h2>Customer Stories</h2>
                <p>
                    Hear from our satisfied customers about how our products
                    have transformed their businesses and improved
                    efficiency.
                </p>
            </article>
        </section>

        <section>
            <h2>Font Size Scaling Test</h2>
            <p style="font-size: 32px;">Hi</p>
            <p style="font-size: 32px;">We're excited to announce the launch of our new product line. Our team has been
                working tirelessly to bring you the best possible experience with our cutting-edge solutions.</p>
        </section>

        <button onclick="window.translate('hi', (res)=>{
            console.log(res);
        }, (err)=>{
            console.log(err);
        })" class="tw-button notranslate">Translate to hindi</button>

        <button onclick="window.resetTranslation('en', (res)=>{
            console.log(res);
        })">Reset Translation</button>
        <button onclick="window.clearCache([])" class="button button-secondary">Clear Cache</button>


    </main>
    <script defer src="http://localhost:5173/dist/index.min.js"></script>
    <script defer type="module">
        TranslationWidget(import.meta.env.VITE_TRANSLATION_WIDGET_PUBLIC_KEY, {
            pageLanguage: "en",
            showUI: true,
            adjustFontSize: false,
        })
    </script>
</body>

</html>