Merge pull request #4 from pdedgar1/claude/init-project-011CUsp2T43mKf1iMRqQUD2b

Claude/init project 011 c usp2 t43m kf1i m rq qud2b

Author: pdedgar1

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

@@ -406,26 +406,39 @@ input[type="file"],
 }
 
 /* Controls */
-.controls,
+.controls {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
 .erasure-controls {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 15px;
-    margin-bottom: 20px;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+}
+
+@media (max-width: 768px) {
+    .erasure-controls {
+        grid-template-columns: 1fr;
+    }
 }
 
 .control-group,
 .option-group {
     background: #ffffff;
-    padding: 20px;
+    padding: 25px;
     border-radius: 0;
     border: 2px solid #4a4a4a;
-    margin-bottom: 15px;
 }
 
 .control-group h3 {
-    margin-bottom: 15px;
+    margin-bottom: 18px;
+    margin-top: 0;
     color: #1a1a1a;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #e8e8e8;
 }
 
 .control-group label,
@@ -448,6 +461,12 @@ input[type="file"],
     transition: all 0.3s ease;
     background: #ffffff;
     width: 100%;
+    box-sizing: border-box;
+}
+
+.control-group input[type="checkbox"] {
+    width: auto;
+    padding: 0;
 }
 
 .control-group input:focus,
@@ -604,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,
@@ -877,33 +934,45 @@ input[type="file"],
 .checkbox-container {
     display: flex;
     align-items: center;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
+    padding: 8px 0;
 }
 
 .checkbox-container input[type="checkbox"] {
-    margin-right: 10px;
-    transform: scale(1.2);
+    width: auto;
+    margin-right: 12px;
+    transform: scale(1.3);
     accent-color: #c41e3a;
     cursor: pointer;
+    flex-shrink: 0;
+}
+
+.checkbox-container label {
+    cursor: pointer;
+    margin: 0;
+    font-size: 0.95em;
+    text-transform: none;
+    letter-spacing: normal;
 }
 
 /* Sliders */
 .slider-container {
-    margin-bottom: 15px;
+    margin-bottom: 20px;
 }
 
 .slider-label {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 8px;
-    font-weight: 500;
+    margin-bottom: 10px;
+    font-weight: 600;
     color: #1a1a1a;
+    font-size: 0.95em;
 }
 
 .slider {
     width: 100%;
-    height: 6px;
+    height: 8px;
     border-radius: 0;
     background: #e8e8e8;
     outline: none;
@@ -1033,8 +1102,6 @@ input[type="file"],
         padding: 20px;
     }
 
-    .controls,
-    .erasure-controls,
     .tools-section {
         grid-template-columns: 1fr;
     }

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(' ');