Refactor mode toggle and language selection UI interactions

static/css/styles.css

@@ -213,12 +213,8 @@ body {
 }
 
 #flashcards {
-  border: 1px solid #ddd;
-  padding: 10px;
   margin-top: 10px;
-  background-color: white;
-  border-radius: 3px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  width: 100%;
 }
 
 .flashcard {

templates/index.html

@@ -38,16 +38,16 @@
             <textarea id="system-prompt" placeholder="Enter system prompt for flashcard generation"></textarea>
             <textarea id="explain-prompt" placeholder="Enter system prompt for explanation" style="display: none;"></textarea>
             <textarea id="language-prompt" placeholder="Enter system prompt for language mode"></textarea>
+            <div id="language-buttons" style="display: none; margin-top: 10px;">
+                <button class="mode-btn" data-language="English">English</button>
+                <button class="mode-btn" data-language="French">French</button>
+            </div>
         </div>
         <div id="mode-toggle">
             <button class="mode-btn selected" data-mode="flashcard">Flashcard</button>
             <button class="mode-btn" data-mode="explain">Explain</button>
             <button class="mode-btn" data-mode="language">Language</button>
         </div>
-        <div id="language-buttons" style="display: none; margin-top: 10px;">
-            <button class="mode-btn" data-language="English">English</button>
-            <button class="mode-btn" data-language="French">French</button>
-        </div>
         <button id="submit-btn" style="display: block;">Generate</button>
         <div id="flashcards"></div>
         <div class="dropdown" id="collection-dropdown">
@@ -821,14 +821,10 @@
                 document.getElementById('explain-prompt').style.display = mode === 'explain' ? 'block' : 'none';
                 document.getElementById('language-prompt').style.display = mode === 'language' ? 'block' : 'none';
                 submitBtn.style.display = mode === 'language' ? 'none' : 'block';
-                submitBtn.textContent = mode === 'flashcard' ? 'Generate Flashcards' : 'Generate Explanation';
 
-                if (mode === 'language') {
-                    const savedLanguage = loadLanguageChoice();
-                    setLanguageButton(savedLanguage);
-                }
+                // The settings panel will not auto–open now. Users must open it manually via the settings icon.
 
-                // Update Add to Collection button and export button visibility
+                // Update the collection button text and export button visibility as before
                 updateAddToCollectionButtonText();
                 updateExportButtonVisibility();
             });