diff --git a/alphabetizer-lab.html b/alphabetizer-lab.html index bff9a40..03a31cc 100644 --- a/alphabetizer-lab.html +++ b/alphabetizer-lab.html @@ -17,15 +17,19 @@
-

Text Word Arranger

+

Alphabetizer Lab

+
📄

Upload Text File

-

Select a .txt file to analyze and rearrange its words

+
-
+ @@ -124,7 +128,8 @@

Display Options

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 @@

Display Options

if (originalText) processText(); }); + preserveLineBreaks.addEventListener('change', () => { + if (originalText) processText(); + }); + // Advanced pattern listeners Object.values(patternCheckboxes).forEach(checkbox => { checkbox.addEventListener('change', () => { @@ -195,11 +204,17 @@

Display Options

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) => { diff --git a/line-break-lab.html b/line-break-lab.html index 1bbee28..f8dc1cb 100644 --- a/line-break-lab.html +++ b/line-break-lab.html @@ -17,7 +17,7 @@
-

Line Break Laboratory

+

Line Break Lab

Experiment with adding and removing line breaks in your text

diff --git a/markov-mashup-lab.html b/markov-mashup-lab.html index 45a8ce8..09942cc 100644 --- a/markov-mashup-lab.html +++ b/markov-mashup-lab.html @@ -18,7 +18,7 @@
-

🎭 Markov Text Generator

+

Markov Mashup Lab

Upload your text files and generate creative content using Markov chains

diff --git a/styles.css b/styles.css index c0e9ef1..26c4421 100644 --- a/styles.css +++ b/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,6 +132,20 @@ 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; @@ -78,6 +153,18 @@ h2 { 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; diff --git a/text-reverse-lab.html b/text-reverse-lab.html index 99d9233..3176d42 100644 --- a/text-reverse-lab.html +++ b/text-reverse-lab.html @@ -17,7 +17,7 @@
-

Text Reversal Playground

+

Text Reversal Lab

Upload a .txt file and experiment with reversing words and sentences