| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FlowEdit | Review, Revise, Update</title> |
| |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| |
| <style> |
| :root { |
| |
| --primary: #4F46E5; |
| --primary-hover: #4338ca; |
| --secondary: #ec4899; |
| --success: #10b981; |
| --warning: #f59e0b; |
| --danger: #ef4444; |
| --background: #f3f4f6; |
| --surface: #ffffff; |
| --text-main: #1f2937; |
| --text-muted: #6b7280; |
| --border: #e5e7eb; |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| --radius: 12px; |
| --transition: all 0.3s ease; |
| } |
| |
| |
| [data-theme="dark"] { |
| --background: #111827; |
| --surface: #1f2937; |
| --text-main: #f9fafb; |
| --text-muted: #9ca3af; |
| --border: #374151; |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: var(--background); |
| color: var(--text-main); |
| height: 100vh; |
| display: flex; |
| flex-direction: column; |
| transition: background-color 0.3s ease, color 0.3s ease; |
| overflow: hidden; |
| } |
| |
| |
| header { |
| background-color: var(--surface); |
| border-bottom: 1px solid var(--border); |
| padding: 0.75rem 1.5rem; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| z-index: 10; |
| } |
| |
| .logo { |
| font-weight: 700; |
| font-size: 1.25rem; |
| color: var(--primary); |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .header-actions { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
| |
| .anycoder-link { |
| font-size: 0.85rem; |
| color: var(--text-muted); |
| text-decoration: none; |
| transition: color 0.2s; |
| } |
| .anycoder-link:hover { |
| color: var(--primary); |
| } |
| |
| .btn-icon { |
| background: none; |
| border: none; |
| color: var(--text-main); |
| font-size: 1.1rem; |
| cursor: pointer; |
| padding: 0.5rem; |
| border-radius: 50%; |
| transition: var(--transition); |
| } |
| .btn-icon:hover { |
| background-color: var(--background); |
| color: var(--primary); |
| } |
| |
| |
| main { |
| display: flex; |
| flex: 1; |
| overflow: hidden; |
| } |
| |
| |
| aside { |
| width: 280px; |
| background-color: var(--surface); |
| border-right: 1px solid var(--border); |
| display: flex; |
| flex-direction: column; |
| transition: transform 0.3s ease; |
| } |
| |
| .sidebar-header { |
| padding: 1rem; |
| border-bottom: 1px solid var(--border); |
| font-weight: 600; |
| color: var(--text-muted); |
| font-size: 0.85rem; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .history-list { |
| flex: 1; |
| overflow-y: auto; |
| padding: 0.5rem; |
| } |
| |
| .history-item { |
| padding: 0.75rem; |
| margin-bottom: 0.5rem; |
| background-color: var(--background); |
| border-radius: 8px; |
| cursor: pointer; |
| transition: var(--transition); |
| border: 1px solid transparent; |
| } |
| |
| .history-item:hover, .history-item.active { |
| border-color: var(--primary); |
| background-color: var(--surface); |
| box-shadow: var(--shadow); |
| } |
| |
| .history-item h4 { |
| font-size: 0.9rem; |
| margin-bottom: 0.25rem; |
| color: var(--text-main); |
| } |
| |
| .history-item p { |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .status-badge { |
| display: inline-block; |
| font-size: 0.7rem; |
| padding: 2px 6px; |
| border-radius: 4px; |
| margin-top: 4px; |
| font-weight: 500; |
| } |
| .status-draft { background: #e5e7eb; color: #374151; } |
| .status-reviewed { background: #dbeafe; color: #1e40af; } |
| .status-updated { background: #d1fae5; color: #065f46; } |
| |
| |
| .workspace { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| padding: 1.5rem; |
| gap: 1.5rem; |
| overflow-y: auto; |
| position: relative; |
| } |
| |
| |
| .workflow-steps { |
| display: flex; |
| justify-content: center; |
| margin-bottom: 1rem; |
| } |
| |
| .step { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| color: var(--text-muted); |
| font-size: 0.9rem; |
| position: relative; |
| } |
| |
| .step.active { |
| color: var(--primary); |
| font-weight: 600; |
| } |
| |
| .step::after { |
| content: ''; |
| display: block; |
| width: 50px; |
| height: 2px; |
| background: var(--border); |
| margin-left: 0.5rem; |
| } |
| .step:last-child::after { display: none; } |
| .step.active::after { background: var(--primary); } |
| |
| |
| .editor-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 1.5rem; |
| flex: 1; |
| min-height: 0; |
| } |
| |
| .panel { |
| background-color: var(--surface); |
| border-radius: var(--radius); |
| border: 1px solid var(--border); |
| box-shadow: var(--shadow); |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
| |
| .panel-header { |
| padding: 1rem; |
| border-bottom: 1px solid var(--border); |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| background: rgba(255,255,255,0.02); |
| } |
| |
| .panel-title { |
| font-weight: 600; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .panel-tools button { |
| background: none; |
| border: 1px solid var(--border); |
| padding: 4px 8px; |
| border-radius: 6px; |
| cursor: pointer; |
| color: var(--text-muted); |
| font-size: 0.8rem; |
| transition: var(--transition); |
| } |
| .panel-tools button:hover { |
| border-color: var(--primary); |
| color: var(--primary); |
| } |
| |
| .textarea-container { |
| flex: 1; |
| position: relative; |
| } |
| |
| textarea { |
| width: 100%; |
| height: 100%; |
| border: none; |
| resize: none; |
| padding: 1rem; |
| font-family: 'Inter', monospace; |
| font-size: 0.95rem; |
| line-height: 1.6; |
| background-color: transparent; |
| color: var(--text-main); |
| outline: none; |
| } |
| |
| |
| .stats-bar { |
| padding: 0.5rem 1rem; |
| background-color: var(--background); |
| border-top: 1px solid var(--border); |
| font-size: 0.75rem; |
| color: var(--text-muted); |
| display: flex; |
| justify-content: space-between; |
| } |
| |
| |
| .action-bar { |
| display: flex; |
| justify-content: flex-end; |
| gap: 1rem; |
| padding-top: 0.5rem; |
| } |
| |
| .btn { |
| padding: 0.75rem 1.5rem; |
| border-radius: 8px; |
| border: none; |
| font-weight: 500; |
| cursor: pointer; |
| transition: var(--transition); |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .btn-primary { |
| background-color: var(--primary); |
| color: white; |
| } |
| .btn-primary:hover { |
| background-color: var(--primary-hover); |
| transform: translateY(-1px); |
| } |
| |
| .btn-secondary { |
| background-color: var(--surface); |
| border: 1px solid var(--border); |
| color: var(--text-main); |
| } |
| .btn-secondary:hover { |
| background-color: var(--background); |
| border-color: var(--text-muted); |
| } |
| |
| .btn-success { |
| background-color: var(--success); |
| color: white; |
| } |
| .btn-success:hover { |
| background-color: #059669; |
| } |
| |
| |
| .loading-overlay { |
| position: absolute; |
| top: 0; left: 0; right: 0; bottom: 0; |
| background: rgba(255,255,255,0.8); |
| backdrop-filter: blur(2px); |
| display: flex; |
| flex-direction: column; |
| justify-content: center; |
| align-items: center; |
| z-index: 5; |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity 0.3s; |
| } |
| [data-theme="dark"] .loading-overlay { |
| background: rgba(31, 41, 55, 0.8); |
| } |
| .loading-overlay.active { |
| opacity: 1; |
| pointer-events: all; |
| } |
| |
| .spinner { |
| width: 40px; |
| height: 40px; |
| border: 4px solid var(--border); |
| border-top-color: var(--primary); |
| border-radius: 50%; |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { to { transform: rotate(360deg); } } |
| |
| |
| .toast-container { |
| position: fixed; |
| bottom: 2rem; |
| right: 2rem; |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| z-index: 100; |
| } |
| |
| .toast { |
| background-color: var(--surface); |
| color: var(--text-main); |
| padding: 1rem; |
| border-radius: 8px; |
| box-shadow: var(--shadow); |
| border-left: 4px solid var(--primary); |
| min-width: 300px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| animation: slideIn 0.3s ease forwards; |
| } |
| |
| @keyframes slideIn { |
| from { transform: translateX(100%); opacity: 0; } |
| to { transform: translateX(0); opacity: 1; } |
| } |
| |
| |
| @media (max-width: 900px) { |
| .editor-grid { |
| grid-template-columns: 1fr; |
| } |
| aside { |
| display: none; |
| } |
| .workspace { |
| padding: 1rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <header> |
| <div class="logo"> |
| <i class="fa-solid fa-layer-group"></i> FlowEdit |
| </div> |
| <div class="header-actions"> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> |
| Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em;"></i> |
| </a> |
| <button class="btn-icon" id="themeToggle" title="Toggle Theme"> |
| <i class="fa-solid fa-moon"></i> |
| </button> |
| <button class="btn-icon" title="Settings"> |
| <i class="fa-solid fa-gear"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <main> |
| |
| <aside> |
| <div class="sidebar-header"> |
| <span>History</span> |
| <button class="btn-icon" style="font-size: 0.8rem; padding: 2px;" onclick="clearHistory()"> |
| <i class="fa-solid fa-trash"></i> |
| </button> |
| </div> |
| <div class="history-list" id="historyList"> |
| |
| <div style="padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem;"> |
| No history yet. |
| </div> |
| </div> |
| </aside> |
|
|
| |
| <section class="workspace"> |
| |
| |
| <div class="workflow-steps"> |
| <div class="step active" id="step1"> |
| <i class="fa-solid fa-pen-nib"></i> Input |
| </div> |
| <div class="step" id="step2"> |
| <i class="fa-solid fa-magnifying-glass-chart"></i> Review |
| </div> |
| <div class="step" id="step3"> |
| <i class="fa-solid fa-rotate"></i> Update |
| </div> |
| </div> |
|
|
| |
| <div class="editor-grid"> |
| |
| |
| <div class="panel"> |
| <div class="panel-header"> |
| <div class="panel-title"> |
| <i class="fa-regular fa-file-lines"></i> Original Content |
| </div> |
| <div class="panel-tools"> |
| <button onclick="pasteContent()" title="Paste from Clipboard"><i class="fa-solid fa-paste"></i></button> |
| <button onclick="clearContent('source')" title="Clear"><i class="fa-solid fa-eraser"></i></button> |
| </div> |
| </div> |
| <div class="textarea-container"> |
| <textarea id="sourceText" placeholder="Paste your text or code here to begin the review process..."></textarea> |
| </div> |
| <div class="stats-bar"> |
| <span id="sourceWords">0 words</span> |
| <span id="sourceChars">0 chars</span> |
| </div> |
| </div> |
|
|
| |
| <div class="panel"> |
| <div class="panel-header"> |
| <div class="panel-title"> |
| <i class="fa-solid fa-wand-magic-sparkles"></i> Revised Version |
| </div> |
| <div class="panel-tools"> |
| <button onclick="copySourceToRevised()" title="Copy Source to Revised"><i class="fa-solid fa-arrow-right"></i></button> |
| <button onclick="clearContent('revised')" title="Clear"><i class="fa-solid fa-eraser"></i></button> |
| </div> |
| </div> |
| <div class="textarea-container"> |
| |
| <div class="loading-overlay" id="loadingOverlay"> |
| <div class="spinner"></div> |
| <p style="margin-top: 10px; font-weight: 500;">Analyzing text...</p> |
| </div> |
| <textarea id="revisedText" placeholder="Review and edit the content here..."></textarea> |
| </div> |
| <div class="stats-bar"> |
| <span id="revisedWords">0 words</span> |
| <span id="revisedChars">0 chars</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="action-bar"> |
| <button class="btn btn-secondary" id="analyzeBtn" onclick="analyzeContent()"> |
| <i class="fa-solid fa-magnifying-glass"></i> Analyze & Review |
| </button> |
| <button class="btn btn-primary" id="updateBtn" onclick="saveUpdate()" disabled> |
| <i class="fa-solid fa-floppy-disk"></i> Save Update |
| </button> |
| </div> |
|
|
| </section> |
| </main> |
|
|
| |
| <div class="toast-container" id="toastContainer"></div> |
|
|
| <script> |
| |
| const state = { |
| history: [], |
| currentId: null, |
| status: 'draft' |
| }; |
| |
| |
| const sourceText = document.getElementById('sourceText'); |
| const revisedText = document.getElementById('revisedText'); |
| const sourceWords = document.getElementById('sourceWords'); |
| const sourceChars = document.getElementById('sourceChars'); |
| const revisedWords = document.getElementById('revisedWords'); |
| const revisedChars = document.getElementById('revisedChars'); |
| const historyList = document.getElementById('historyList'); |
| const loadingOverlay = document.getElementById('loadingOverlay'); |
| const updateBtn = document.getElementById('updateBtn'); |
| const analyzeBtn = document.getElementById('analyzeBtn'); |
| const themeToggle = document.getElementById('themeToggle'); |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| loadHistory(); |
| setupEventListeners(); |
| checkTheme(); |
| }); |
| |
| function setupEventListeners() { |
| |
| sourceText.addEventListener('input', () => updateStats(sourceText, sourceWords, sourceChars)); |
| revisedText.addEventListener('input', () => { |
| updateStats(revisedText, revisedWords, revisedChars); |
| |
| updateBtn.disabled = revisedText.value.trim().length === 0; |
| }); |
| |
| |
| themeToggle.addEventListener('click', toggleTheme); |
| } |
| |
| |
| |
| function updateStats(textarea, wordEl, charEl) { |
| const text = textarea.value; |
| charEl.innerText = `${text.length} chars`; |
| const words = text.trim() === '' ? 0 : text.trim().split(/\s+/).length; |
| wordEl.innerText = `${words} words`; |
| } |
| |
| function copySourceToRevised() { |
| revisedText.value = sourceText.value; |
| updateStats(revisedText, revisedWords, revisedChars); |
| updateBtn.disabled = revisedText.value.trim().length === 0; |
| showToast('Content copied to revision panel', 'info'); |
| } |
| |
| function clearContent(type) { |
| if(type === 'source') { |
| sourceText.value = ''; |
| updateStats(sourceText, sourceWords, sourceChars); |
| } else { |
| revisedText.value = ''; |
| updateStats(revisedText, revisedWords, revisedChars); |
| updateBtn.disabled = true; |
| } |
| } |
| |
| async function pasteContent() { |
| try { |
| const text = await navigator.clipboard.readText(); |
| sourceText.value = text; |
| updateStats(sourceText, sourceWords, sourceChars); |
| showToast('Pasted from clipboard', 'success'); |
| } catch (err) { |
| showToast('Failed to read clipboard', 'error'); |
| } |
| } |
| |
| |
| function analyzeContent() { |
| if (!sourceText.value.trim()) { |
| showToast('Please enter content to analyze first.', 'error'); |
| return; |
| } |
| |
| |
| loadingOverlay.classList.add('active'); |
| analyzeBtn.disabled = true; |
| |
| |
| setTimeout(() => { |
| loadingOverlay.classList.remove('active'); |
| analyzeBtn.disabled = false; |
| |
| |
| |
| revisedText.value = sourceText.value; |
| updateStats(revisedText, revisedWords, revisedChars); |
| updateBtn.disabled = false; |
| |
| |
| document.getElementById('step1').classList.remove('active'); |
| document.getElementById('step2').classList.add('active'); |
| |
| showToast('Analysis complete. Content ready for revision.', 'success'); |
| scrollToBottom(); |
| }, 1500); |
| } |
| |
| |
| function saveUpdate() { |
| if (!revisedText.value.trim()) return; |
| |
| const newEntry = { |
| id: Date.now(), |
| date: new Date().toLocaleString(), |
| original: sourceText.value, |
| revised: revisedText.value, |
| status: 'Updated', |
| preview: revisedText.value.substring(0, 50) + '...' |
| }; |
| |
| state.history.unshift(newEntry); |
| localStorage.setItem('flowEditHistory', JSON.stringify(state.history)); |
| |
| renderHistory(); |
| |
| |
| sourceText.value = ''; |
| revisedText.value = ''; |
| updateStats(sourceText, sourceWords, sourceChars); |
| updateStats(revisedText, revisedWords, revisedChars); |
| updateBtn.disabled = true; |
| |
| |
| document.getElementById('step2').classList.remove('active'); |
| document.getElementById('step3').classList.add('active'); |
| setTimeout(() => { |
| document.getElementById('step3').classList.remove('active'); |
| document.getElementById('step1').classList.add('active'); |
| }, 2000); |
| |
| showToast('Update saved successfully!', 'success'); |
| } |
| |
| |
| function loadHistory() { |
| const saved = localStorage.getItem('flowEditHistory'); |
| if (saved) { |
| state.history = JSON.parse(saved); |
| renderHistory(); |
| } |
| } |
| |
| function renderHistory() { |
| historyList.innerHTML = ''; |
| |
| if (state.history.length === 0) { |
| historyList.innerHTML = '<div style="padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem;">No history yet.</div>'; |
| return; |
| } |
| |
| state.history.forEach(item => { |
| const div = document.createElement('div'); |
| div.className = 'history-item'; |
| div.innerHTML = ` |
| <h4>${item.date}</h4> |
| <p>${item.preview}</p> |
| <span class="status-badge status-updated">${item.status}</span> |
| `; |
| div.onclick = () => loadHistoryItem(item); |
| historyList.appendChild(div); |
| }); |
| } |
| |
| function loadHistoryItem(item) { |
| |
| if(confirm('Load this item back into the editor?')) { |
| sourceText.value = item.original; |
| revisedText.value = item.revised; |
| updateStats(sourceText, sourceWords, sourceChars); |
| updateStats(revisedText, revisedWords, revisedChars); |
| updateBtn.disabled = false; |
| showToast('Item loaded', 'info'); |
| } |
| } |
| |
| function clearHistory() { |
| if(confirm('Are you sure you want to clear all history?')) { |
| state.history = []; |
| localStorage.removeItem('flowEditHistory'); |
| renderHistory(); |
| showToast('History cleared', 'info'); |
| } |
| } |
| |
| |
| function showToast(message, type = 'info') { |
| const toast = document.createElement('div'); |
| toast.className = 'toast'; |
| |
| let icon = 'fa-info-circle'; |
| let color = 'var(--primary)'; |
| |
| if (type === 'success') { icon = 'fa-check-circle'; color = 'var(--success)'; } |
| if (type === 'error') { icon = 'fa-exclamation-circle'; color = 'var(--danger)'; } |
| |
| toast.style.borderLeftColor = color; |
| toast.innerHTML = ` |
| <div style="display:flex; align-items:center; gap:10px;"> |
| <i class="fa-solid ${icon}" style="color:${color}"></i> |
| <span>${message}</span> |
| </div> |
| <i class="fa-solid fa-xmark" style="cursor:pointer; opacity:0.6;" onclick="this.parentElement.remove()"></i> |
| `; |
| |
| document.getElementById('toastContainer').appendChild(toast); |
| |
| |
| setTimeout(() => { |
| toast.style.opacity = '0'; |
| toast.style.transform = 'translateX(100%)'; |
| setTimeout(() => toast.remove(), 300); |
| }, 3000); |
| } |
| |
| function toggleTheme() { |
| const body = document.body; |
| const icon = themeToggle.querySelector('i'); |
| |
| if (body.getAttribute('data-theme') === 'dark') { |
| body.removeAttribute('data-theme'); |
| icon.className = 'fa-solid fa-moon'; |
| } else { |
| body.setAttribute('data-theme', 'dark'); |
| icon.className = 'fa-solid fa-sun'; |
| } |
| } |
| |
| function checkTheme() { |
| if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { |
| toggleTheme(); |
| } |
| } |
| |
| function scrollToBottom() { |
| const textarea = document.querySelector('.editor-grid'); |
| textarea.scrollIntoView({ behavior: 'smooth' }); |
| } |
| </script> |
| </body> |
| </html> |
