Add font size slider to Line Break Lab and Text Reversal Lab

Added adjustable font size control (12-32px) to match Eraser Lab:

1. Line Break Lab:
   - Added font size slider in toggle bar
   - Range: 12px to 32px (default 16px)
   - Updates text display in real-time

2. Text Reversal Lab:
   - Added font size slider in toggle bar
   - Same range and behavior as Line Break Lab
   - Consistent UI across all text display tools

3. CSS styling:
   - Created .font-size-control class
   - Positioned in toggle bar with margin-left: auto
   - Responsive: stacks to full width on mobile
   - Styled to match site design (white bg, dark border)
   - Slider width: 120px desktop, 150px mobile

All three text manipulation labs now have consistent font size controls.

Author: claude

line-break-lab.html

@@ -95,11 +95,15 @@ <h3>Remove All Line Breaks</h3>
             </div>
 
         </div>
-        
+
         <div class="text-display" id="textDisplay" style="display: none;">
             <div class="toggle-bar">
                 <button class="view-toggle active" id="showOriginalBtn">Original Text</button>
                 <button class="view-toggle" id="showModifiedBtn">Modified Text</button>
+                <div class="font-size-control">
+                    <label for="fontSizeSlider">Font Size: <span id="fontSizeValue">16px</span></label>
+                    <input type="range" class="slider" id="fontSizeSlider" min="12" max="32" value="16">
+                </div>
             </div>
             <div class="text-box">
                 <div class="text-content" id="displayText"></div>
@@ -143,6 +147,10 @@ <h3>Remove All Line Breaks</h3>
 const removeAllBtn = document.getElementById('removeAllBtn');
 const resetBtn = document.getElementById('resetBtn');
 
+// Font size control
+const fontSizeSlider = document.getElementById('fontSizeSlider');
+const fontSizeValue = document.getElementById('fontSizeValue');
+
 // Upload handlers
 uploadZone.addEventListener('click', () => fileInput.click());
 
@@ -191,15 +199,22 @@ <h3>Remove All Line Breaks</h3>
     displayText.textContent = showingOriginal ? originalText : currentText;
 }
 
+// Font size slider handler
+fontSizeSlider.addEventListener('input', () => {
+    const size = fontSizeSlider.value + 'px';
+    fontSizeValue.textContent = size;
+    displayText.style.fontSize = size;
+});
+
 // Toggle buttons handler
 document.querySelectorAll('.toggle-btn').forEach(btn => {
     btn.addEventListener('click', function() {
         const tool = this.dataset.tool;
         const action = this.dataset.action;
-        
+
         // Update state
         toolStates[tool] = action;
-        
+
         // Update UI
         const siblings = this.parentElement.querySelectorAll('.toggle-btn');
         siblings.forEach(s => s.classList.remove('active'));

styles.css

@@ -623,6 +623,44 @@ input[type="file"],
     padding: 10px;
     border-radius: 0;
     border: 2px solid #4a4a4a;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.font-size-control {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-left: auto;
+    padding: 8px 15px;
+    background: #ffffff;
+    border: 2px solid #4a4a4a;
+}
+
+.font-size-control label {
+    font-size: 0.9em;
+    font-weight: 600;
+    color: #1a1a1a;
+    white-space: nowrap;
+    margin: 0;
+}
+
+.font-size-control .slider {
+    width: 120px;
+    height: 6px;
+    margin: 0;
+}
+
+@media (max-width: 768px) {
+    .font-size-control {
+        margin-left: 0;
+        width: 100%;
+        justify-content: space-between;
+    }
+
+    .font-size-control .slider {
+        width: 150px;
+    }
 }
 
 .toggle-btn,

text-reverse-lab.html

@@ -46,6 +46,10 @@ <h3>Insert Line Breaks</h3>
             <div class="toggle-bar">
                 <button class="toggle-btn active" id="showOriginalBtn">Original Text</button>
                 <button class="toggle-btn" id="showModifiedBtn">Modified Text</button>
+                <div class="font-size-control">
+                    <label for="fontSizeSlider">Font Size: <span id="fontSizeValue">16px</span></label>
+                    <input type="range" class="slider" id="fontSizeSlider" min="12" max="32" value="16">
+                </div>
             </div>
             <div class="text-box">
                 <div class="text-content" id="displayText"></div>
@@ -72,6 +76,10 @@ <h3>Insert Line Breaks</h3>
 const showOriginalBtn = document.getElementById('showOriginalBtn');
 const showModifiedBtn = document.getElementById('showModifiedBtn');
 
+// Font size control
+const fontSizeSlider = document.getElementById('fontSizeSlider');
+const fontSizeValue = document.getElementById('fontSizeValue');
+
 uploadZone.addEventListener('click', () => fileInput.click());
 
 uploadZone.addEventListener('dragover', (e) => {
@@ -127,6 +135,13 @@ <h3>Insert Line Breaks</h3>
     addBreaksBtn.disabled = false;
 }
 
+// Font size slider handler
+fontSizeSlider.addEventListener('input', () => {
+    const size = fontSizeSlider.value + 'px';
+    fontSizeValue.textContent = size;
+    displayText.style.fontSize = size;
+});
+
 reverseWordsBtn.addEventListener('click', () => {
     const words = currentText.split(/\s+/);
     currentText = words.reverse().join(' ');