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

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

Author: pdedgar1

alphabetizer-lab.html

@@ -20,12 +20,16 @@
         <h1>Alphabetizer Lab</h1>
 
         <div class="upload-section">
+            <div class="upload-icon">📄</div>
             <h2>Upload Text File</h2>
-            <input type="file" id="textFile" class="file-input" accept=".txt" />
             <p>Select a .txt file to analyze and rearrange its words</p>
+            <label class="file-input-wrapper">
+                Choose File
+                <input type="file" id="textFile" accept=".txt" />
+            </label>
         </div>
 
-        <div class="options-section" id="optionsSection">
+        <div class="options-section" id="optionsSection" style="display: none;">
             <div class="option-group">
                 <label>Display Arrangement:</label>
                 <div class="radio-group">

eraser-lab.html

@@ -18,7 +18,7 @@
     <!-- Tool content here -->
      <div class="container">
         <div class="header">
-            <h1>Interactive Poetry Eraser</h1>
+            <h1>Eraser Lab</h1>
             <p>Transform text through selective erasure • Create found poetry from any text</p>
         </div>
 
@@ -88,6 +88,10 @@ <h3>Display Options</h3>
                         <input type="checkbox" id="preserveSpacing" checked>
                         <label for="preserveSpacing">Preserve Original Spacing</label>
                     </div>
+                    <div class="checkbox-container">
+                        <input type="checkbox" id="preserveLineBreaks" checked>
+                        <label for="preserveLineBreaks">Preserve Line Breaks</label>
+                    </div>
                 </div>
             </div>
         </div>
@@ -124,7 +128,8 @@ <h3>Display Options</h3>
         const fontSizeSlider = document.getElementById('fontSizeSlider');
         const fontSizeValue = document.getElementById('fontSizeValue');
         const preserveSpacing = document.getElementById('preserveSpacing');
-        
+        const preserveLineBreaks = document.getElementById('preserveLineBreaks');
+
         // Advanced pattern checkboxes
         const patternCheckboxes = {
             2: document.getElementById('eraseEvery2nd'),
@@ -185,6 +190,10 @@ <h3>Display Options</h3>
             if (originalText) processText();
         });
 
+        preserveLineBreaks.addEventListener('change', () => {
+            if (originalText) processText();
+        });
+
         // Advanced pattern listeners
         Object.values(patternCheckboxes).forEach(checkbox => {
             checkbox.addEventListener('change', () => {
@@ -195,11 +204,17 @@ <h3>Display Options</h3>
         function processText() {
             if (!originalText) return;
 
+            // Handle line breaks if not preserving them
+            let textToProcess = originalText;
+            if (!preserveLineBreaks.checked) {
+                textToProcess = originalText.replace(/[\r\n]+/g, ' ');
+            }
+
             let elements;
             if (currentMode === 'word') {
-                elements = originalText.split(' ');
+                elements = textToProcess.split(' ');
             } else {
-                elements = originalText.split('');
+                elements = textToProcess.split('');
             }
 
             const processedElements = elements.map((element, index) => {

line-break-lab.html

@@ -17,7 +17,7 @@
 
     <!-- Tool content here -->
      <div class="container">
-        <h1>Line Break Laboratory</h1>
+        <h1>Line Break Lab</h1>
         <p class="subtitle">Experiment with adding and removing line breaks in your text</p>
 
         <div class="upload-zone" id="uploadZone">

styles.css

@@ -14,6 +14,18 @@ body {
     color: #1a1a1a;
 }
 
+@media (max-width: 768px) {
+    body {
+        padding: 10px;
+    }
+}
+
+@media (max-width: 480px) {
+    body {
+        padding: 5px;
+    }
+}
+
 /* Main Navigation */
 .main-nav {
     background: #1a1a1a;
@@ -25,6 +37,22 @@ body {
     border-bottom: 3px solid #c41e3a;
 }
 
+@media (max-width: 768px) {
+    .main-nav {
+        padding: 12px 20px;
+        margin: -30px -30px 20px -30px;
+        gap: 12px;
+    }
+}
+
+@media (max-width: 480px) {
+    .main-nav {
+        padding: 10px 15px;
+        margin: -20px -20px 15px -20px;
+        gap: 8px;
+    }
+}
+
 .main-nav a {
     color: #ffffff;
     text-decoration: none;
@@ -37,6 +65,21 @@ body {
     letter-spacing: 0.5px;
 }
 
+@media (max-width: 768px) {
+    .main-nav a {
+        padding: 6px 12px;
+        font-size: 0.85em;
+    }
+}
+
+@media (max-width: 480px) {
+    .main-nav a {
+        padding: 5px 10px;
+        font-size: 0.8em;
+        letter-spacing: 0.3px;
+    }
+}
+
 .main-nav a:hover {
     background: #c41e3a;
     color: #ffffff;
@@ -52,13 +95,31 @@ body {
     background: #ffffff;
     border-radius: 0;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-    max-width: 1200px;
+    max-width: 95vw;
     width: 100%;
     margin: 0 auto;
     padding: 40px;
     border: 1px solid #1a1a1a;
 }
 
+@media (min-width: 1600px) {
+    .container {
+        max-width: 1800px;
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 30px;
+    }
+}
+
+@media (max-width: 480px) {
+    .container {
+        padding: 20px;
+    }
+}
+
 /* Headers */
 h1 {
     color: #1a1a1a;
@@ -71,13 +132,39 @@ h1 {
     padding-bottom: 10px;
 }
 
+@media (max-width: 768px) {
+    h1 {
+        font-size: 2em;
+        letter-spacing: 1.5px;
+    }
+}
+
+@media (max-width: 480px) {
+    h1 {
+        font-size: 1.6em;
+        letter-spacing: 1px;
+    }
+}
+
 h2 {
     color: #1a1a1a;
     font-size: 1.8em;
     margin-bottom: 15px;
     font-weight: 600;
 }
 
+@media (max-width: 768px) {
+    h2 {
+        font-size: 1.5em;
+    }
+}
+
+@media (max-width: 480px) {
+    h2 {
+        font-size: 1.3em;
+    }
+}
+
 h3 {
     color: #4a4a4a;
     margin-bottom: 10px;
@@ -87,12 +174,38 @@ h3 {
     letter-spacing: 1px;
 }
 
+@media (max-width: 768px) {
+    h3 {
+        font-size: 1.1em;
+    }
+}
+
+@media (max-width: 480px) {
+    h3 {
+        font-size: 1em;
+        letter-spacing: 0.5px;
+    }
+}
+
 .subtitle {
     color: #4a4a4a;
     margin-bottom: 30px;
     font-size: 1.1em;
 }
 
+@media (max-width: 768px) {
+    .subtitle {
+        font-size: 1em;
+        margin-bottom: 20px;
+    }
+}
+
+@media (max-width: 480px) {
+    .subtitle {
+        font-size: 0.95em;
+    }
+}
+
 /* Tool List - Homepage Grid */
 .tool-list {
     display: grid;
@@ -101,6 +214,22 @@ h3 {
     margin-top: 40px;
 }
 
+@media (max-width: 768px) {
+    .tool-list {
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 15px;
+        margin-top: 30px;
+    }
+}
+
+@media (max-width: 480px) {
+    .tool-list {
+        grid-template-columns: 1fr;
+        gap: 12px;
+        margin-top: 20px;
+    }
+}
+
 .tool-list .tool-card {
     background: #ffffff;
     border: 2px solid #4a4a4a;
@@ -142,6 +271,20 @@ h3 {
     border-bottom: 3px solid #c41e3a;
 }
 
+@media (max-width: 768px) {
+    .header {
+        padding: 25px;
+        margin: -30px -30px 20px -30px;
+    }
+}
+
+@media (max-width: 480px) {
+    .header {
+        padding: 20px;
+        margin: -20px -20px 15px -20px;
+    }
+}
+
 .header h1 {
     color: #ffffff;
     border-bottom: none;

text-reverse-lab.html

@@ -17,7 +17,7 @@
 
     <!-- Tool content here -->
      <div class="container">
-        <h1>Text Reversal Playground</h1>
+        <h1>Text Reversal Lab</h1>
         <p class="subtitle">Upload a .txt file and experiment with reversing words and sentences</p>
 
         <div class="upload-zone" id="uploadZone">