Can you add a starting template to this just put some text in the starting block<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Text Stitcher</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px 15px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 30px;
color: white;
}
.header h1 {
font-size: 2rem;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.header p {
opacity: 0.9;
font-size: 1.1rem;
}
.controls {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 30px;
justify-content: center;
}
.btn {
background: rgba(255,255,255,0.9);
border: none;
padding: 12px 24px;
border-radius: 25px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn:hover {
background: white;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.btn-primary {
background: #4CAF50;
color: white;
}
.btn-primary:hover {
background: #45a049;
}
.btn-secondary {
background: #2196F3;
color: white;
}
.btn-secondary:hover {
background: #1976D2;
}
.text-section {
background: white;
border-radius: 15px;
margin-bottom: 20px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.text-section.collapsed .section-content {
display: none;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
cursor: pointer;
border-bottom: 1px solid #e0e0e0;
}
.section-header:hover {
background: linear-gradient(135deg, #e8ebf0 0%, #b8c6db 100%);
}
.section-title {
font-weight: 600;
color: #333;
flex-grow: 1;
margin-right: 15px;
}
.section-controls {
display: flex;
gap: 10px;
align-items: center;
}
.toggle-btn {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
color: #666;
transition: transform 0.3s ease;
padding: 5px;
}
.toggle-btn:hover {
color: #333;
}
.collapsed .toggle-btn {
transform: rotate(-90deg);
}
.remove-btn {
background: #ff4444;
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.remove-btn:hover {
background: #cc0000;
transform: scale(1.1);
}
.section-content {
padding: 20px;
}
.section-textarea {
width: 100%;
min-height: 150px;
border: 2px solid #e0e0e0;
border-radius: 10px;
padding: 15px;
font-size: 16px;
font-family: inherit;
resize: vertical;
transition: border-color 0.3s ease;
}
.section-textarea:focus {
outline: none;
border-color: #4CAF50;
box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
}
.copy-feedback {
position: fixed;
top: 20px;
right: 20px;
background: #4CAF50;
color: white;
padding: 10px 20px;
border-radius: 25px;
font-weight: 600;
transform: translateX(300px);
transition: transform 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
z-index: 1000;
}
.copy-feedback.show {
transform: translateX(0);
}
.empty-state {
text-align: center;
padding: 60px 20px;
color: #666;
}
.empty-state h3 {
margin-bottom: 10px;
font-size: 1.5rem;
}
.empty-state p {
font-size: 1.1rem;
opacity: 0.8;
}
@media (max-width: 768px) {
body {
padding: 15px 10px;
}
.header h1 {
font-size: 1.5rem;
}
.header p {
font-size: 1rem;
}
.controls {
gap: 10px;
}
.btn {
padding: 10px 16px;
font-size: 13px;
}
.section-header {
padding: 15px;
}
.section-content {
padding: 15px;
}
.section-textarea {
min-height: 120px;
font-size: 16px; /* Prevents zoom on iOS */
}
}
@media (max-width: 480px) {
.controls {
flex-direction: column;
align-items: stretch;
}
.btn {
text-align: center;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.section-controls {
width: 100%;
justify-content: space-between;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>✨ Text Stitcher</h1>
<p>Organize and combine your text content</p>
</div>
<div class="controls">
<button class="btn btn-primary" onclick="addSection()">+ Add Section</button>
<button class="btn btn-secondary" onclick="copyAllText()">📋 Copy All Text</button>
</div>
<div id="sections-container">
<div class="empty-state">
<h3>No sections yet</h3>
<p>Click "Add Section" to get started</p>
</div>
</div>
</div>
<div id="copy-feedback" class="copy-feedback">
Copied to clipboard! ✓
</div>
<script>
let sectionCounter = 0;
function addSection() {
sectionCounter++;
const container = document.getElementById('sections-container');
// Remove empty state if it exists
const emptyState = container.querySelector('.empty-state');
if (emptyState) {
emptyState.remove();
}
const sectionId = 'section-' + sectionCounter;
const sectionHtml = `
<div class="text-section" id="${sectionId}">
<div class="section-header" onclick="toggleSection('${sectionId}')">
<div class="section-title">Section ${sectionCounter}</div>
<div class="section-controls">
<button class="toggle-btn">▼</button>
<button class="remove-btn" onclick="removeSection('${sectionId}', event)">×</button>
</div>
</div>
<div class="section-content">
<textarea class="section-textarea" placeholder="Enter your text here..."></textarea>
</div>
</div>
`;
container.insertAdjacentHTML('beforeend', sectionHtml);
// Focus on the new textarea
const newSection = document.getElementById(sectionId);
const textarea = newSection.querySelector('textarea');
textarea.focus();
}
function removeSection(sectionId, event) {
event.stopPropagation(); // Prevent toggle when clicking remove
const section = document.getElementById(sectionId);
const container = document.getElementById('sections-container');
section.style.transform = 'translateX(-100%)';
section.style.opacity = '0';
setTimeout(() => {
section.remove();
// Show empty state if no sections left
if (container.children.length === 0) {
container.innerHTML = `
<div class="empty-state">
<h3>No sections yet</h3>
<p>Click "Add Section" to get started</p>
</div>
`;
}
}, 300);
}
function toggleSection(sectionId) {
const section = document.getElementById(sectionId);
section.classList.toggle('collapsed');
}
function copyAllText() {
const sections = document.querySelectorAll('.text-section textarea');
let allText = '';
sections.forEach((textarea, index) => {
if (textarea.value.trim()) {
if (allText) allText += '\n\n---\n\n';
allText += textarea.value.trim();
}
});
if (allText) {
navigator.clipboard.writeText(allText).then(() => {
showCopyFeedback();
}).catch(() => {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = allText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showCopyFeedback();
});
} else {
showCopyFeedback('No text to copy!');
}
}
function showCopyFeedback(message = 'Copied to clipboard! ✓') {
const feedback = document.getElementById('copy-feedback');
feedback.textContent = message;
feedback.classList.add('show');
setTimeout(() => {
feedback.classList.remove('show');
}, 2000);
}
// Add first section on load
window.onload = function() {
addSection();
};
</script>
</body>
</html>