Trans-In-Side/option.html at main · MegaMind-Solution/Trans-In-Side · 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
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="option.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header-title">
                <svg viewBox="0 0 24 24">
                    <path
                        d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" />
                </svg>
                Translator
            </div>
        </div>
        <div class="settings-maingr">
            <div class="settings-group">
                <span>Enable Quick Tooltip</span>
                <label class="toggle-switch" title="Enable Quick Tooltip">
                    <input type="checkbox" id="tooltipToggle">
                    <span class="slider"></span>
                </label>
            </div>
            <div class="settings-group">
                <span>Chnage Theme</span>
                <label class="toggle-switch" title="Chnage Theme">
                    <input type="checkbox" id="themeToggle" />
                    <span class="slider"></span>
                </label>
            </div>
        </div>

        <div class="form-group" style="margin-bottom: 12px;">
            <span class="label">Translation Engine</span>
            <div class="custom-select" id="providerSelect">
                <div class="select-button" data-val="google">Google Translate <span
                        style="font-size: 10px; color: var(--text-muted)">▼</span></div>
                <div class="select-dropdown">
                    <ul class="options-list"></ul>
                </div>
            </div>
        </div>

        <div class="form-group" style="margin-bottom: 6px">
            <span class="label">Translate From</span>
            <div class="custom-select" id="srcSelect">
                <div class="select-button" data-val="auto">Detect Language <span
                        style="font-size: 10px; color: var(--text-muted)">▼</span></div>
                <div class="select-dropdown">
                    <input type="text" class="search-box" placeholder="Search language..." />
                    <ul class="options-list"></ul>
                </div>
            </div>
        </div>

        <div class="swap-container">
            <button class="swap-btn" id="swapLang" title="Swap Languages">
                <svg viewBox="0 0 24 24">
                    <path d="M16 17.01V10h-2v7.01h-3L15 21l4-3.99h-3zM9 3L5 6.99h3V14h2V6.99h3L9 3z" />
                </svg>
            </button>
        </div>

        <div class="form-group" style="margin-top: 6px">
            <span class="label">Translate To</span>
            <div class="custom-select" id="targetSelect">
                <div class="select-button" data-val="en">English <span
                        style="font-size: 10px; color: var(--text-muted)">▼</span></div>
                <div class="select-dropdown alt">
                    <input type="text" class="search-box alt" placeholder="Search language..." />
                    <ul class="options-list"></ul>
                </div>
            </div>
        </div>
    </div>

    <div class="status-footer" id="statusMsg">
        <svg viewBox="0 0 24 24">
            <path
                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
        </svg>
        Settings Auto-Saved
    </div>
    </div>

    <script src="shared.js"></script>
    <script src="option.js"></script>
</body>

</html>