CorrectMe.Web/index.html at master · fabiojbg/CorrectMe.Web · 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
<!DOCTYPE html>
<html lang="en"> <!-- Default lang, will be updated by JS -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Cache Control Meta Tags -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title data-i18n="appTitle">CorrectMe Web</title>
    <link rel="stylesheet" href="style.css?v=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">

</head>
<body data-theme="light"> <!-- Default theme, managed by JS -->
    <div id="floating-languages-container"></div> <!-- Container for floating languages -->
    <header class="topo">
        <h1>CORRECT ME!</h1>
        <!-- Placeholder for settings/language switch -->
         <div class="settings-area">
             <button id="settings-button" data-i18n="settingsButton">Settings</button>
             <div class="language-switcher">
                 <button id="lang-en">EN</button> | <button id="lang-pt-br">PT-BR</button>
             </div>
             <button id="theme-toggle-button" aria-label="Toggle theme">🌙</button> <!-- Theme Toggle Button -->
         </div>
     </header>

    <main>
        <!-- Tabs (optional, could start with just correction) -->
        <div class="tabs">
            <button class="tab-button active" data-tab="correction" data-i18n="correctionTab">Correction</button>
            <button class="tab-button" data-tab="translation" data-i18n="translationTab">Translation</button>
        </div>

        <!-- Correction Section -->
        <section id="correction" class="tab-content active">
            <!-- <h2 data-i18n="correctionTitle">Text Correction</h2> -->
            <div class="correction-container">
                <div class="text-area-container">
                    <label for="user-input" data-i18n="yourTextLabel" style="padding-top: 20px;">Your Text:</label>
                    <textarea id="user-input" rows="10" data-i18n-placeholder="userTextPlaceholder" placeholder="Enter text to correct..."></textarea>
                </div>
                <div class="button-container">
                    <button id="correct-button" data-i18n="correctButtonLabel">Correct →</button>
                    <div id="status-message" class="status"></div>
                </div>
                <div class="text-area-container">
                    <label for="ai-response" data-i18n="correctedTextLabel">Corrected Text & Explanation:</label>
                    <div><img id="model-badge" alt="Selected Model" style="display: none; margin-bottom: 5px;"></div> <!-- Added Model Badge -->
                    <textarea id="ai-response" rows="10" readonly data-i18n-placeholder="correctedTextPlaceholder" placeholder="Correction will appear here..."></textarea>
                </div>
            </div>
            <div class="diff-container">
                <label data-i18n="diffTitle">Correction Differences:</label>
                <div id="diff-output" class="diff-output">
                    <!-- Diff HTML will be inserted here -->
                </div>
            </div>
        </section>

        <!-- Translation Section (Initially Hidden) -->
        <section id="translation" class="tab-content">
            <!-- <h2 data-i18n="translationTitle">Text Translation</h2> -->
            <div class="translation-container">
                <div class="text-area-container">
                    <label for="translate-input" data-i18n="translateInputLabel">Text to Translate:</label> <div><img id="model-badge2" alt="Selected Model" style="display: none; margin-bottom: 5px;"></div> <!-- Added Model Badge -->
                    <textarea id="translate-input" rows="8" data-i18n-placeholder="translateInputPlaceholder" placeholder="Enter text to translate..."></textarea>
                </div>
                 <div class="controls-container">
                    <label for="target-language" data-i18n="translateToLabel">Translate to:</label>
                    <select id="target-language">
                        <!-- Languages will be populated by JS -->
                        <option value="">Loading...</option>
                    </select>
                    <button id="translate-button" data-i18n="translateButtonLabel">Translate</button>
                     <div id="translate-status-message" class="status"></div>
                </div>
                <div class="text-area-container">
                    <label for="translate-output" data-i18n="translateOutputLabel">Translated Text:</label>
                    <textarea id="translate-output" rows="8" readonly data-i18n-placeholder="translateOutputPlaceholder" placeholder="Translation will appear here..."></textarea>
                </div>
            </div>
        </section>

        <!-- Settings Modal (Initially Hidden) -->
        <div id="settings-modal" class="modal">
            <div class="modal-content">
                <span class="close-button">&times;</span>
                <h2 data-i18n="settingsModalTitle">Settings</h2>
                <p class="subHeader" data-i18n="settingsSubHeader">To use this app and its available you need an API key from OpenRouter. You can get a free API key at https://openrouter.ai.</p>
                <label for="api-key" data-i18n="apiKeyLabel">LLM API Key:</label>
                <input type="password" id="api-key" data-i18n-placeholder="apiKeyPlaceholder" placeholder="Enter your API Key" autocomplete="new-password">
                <label for="model-search-input" data-i18n="modelSelectLabel">Select Model:</label>
                <div class="model-select-container">
                    <input type="text" id="model-search-input" data-i18n-placeholder="modelSearchPlaceholder" placeholder="Search models..." autocomplete="off">
                    <div id="model-options-container" class="model-options-container">
                        <!-- Models will be populated by JS -->
                    </div>
                </div>
                <div class="modal-buttons">
                    <button id="save-settings-button" data-i18n="saveSettingsButtonLabel">Save Settings</button>
                    <a href="https://www.paypal.com/donate/?business=G47L9N4UW8C2C&no_recurring=1&item_name=Thank+you+%21%21%21&currency_code=USD" target="_blank" class="donate-button-link">
                        <img src="images/btn_donate.png" alt="Donate Button" class="donate-button-img">
                    </a>
                </div>
                <p class="privacy-note" data-i18n="privacyNote">Your API key is stored locally in your browser and is only sent directly to the LLM provider.</p>
            </div>
        </div>
    </main>

    <footer style="display: none;">
        <!-- Footer content -->
     </footer>

      <!-- Load htmldiff-js library from CDN -->
    <script src="htmldiff.js?v=1.0"></script>
    <script src="script.js?v=1.0"></script>

    <!-- GitHub Project Link -->
    <a href="https://github.com/fabiojbg/CorrectMe.Web" target="_blank" class="github-corner-link">
        <img src="images/github-mascot.png" alt="GitHub Project Link">
    </a>
</body>
</html>