feat: add enhanced example presets with difficulty levels and categories

- Added 10 categorized examples (beginner/intermediate/advanced)
- Includes emoji indicators and detailed descriptions
- Enhanced UX with example filtering and better organization
- Documented implementation in ENHANCEMENTS.md

Author: mj

ENHANCEMENTS.md

@@ -0,0 +1,347 @@
+# curl-to-code Enhancement Implementation
+
+## Changes Made
+
+### 1. Enhanced Example Presets
+**Before:** 6 basic examples with generic labels
+**After:** 10 categorized examples with emoji, difficulty levels, and descriptions
+
+```javascript
+const examples = {
+  // Beginner
+  simple: {
+    label: '🟢 Simple GET',
+    description: 'Basic API request',
+    curl: `curl https://api.github.com/zen`
+  },
+  
+  // Intermediate
+  postJson: {
+    label: '🟡 POST with JSON',
+    description: 'Create a user',
+    curl: `curl -X POST https://api.example.com/users \\
+  -H 'Content-Type: application/json' \\
+  -d '{"name":"John","email":"john@example.com","role":"developer"}'`
+  },
+  
+  bearer: {
+    label: '🟡 Bearer Auth',
+    description: 'GitHub API with token',
+    curl: `curl https://api.github.com/user/repos \\
+  -H 'Authorization: Bearer ghp_xxxxxxxxxxxx' \\
+  -H 'Accept: application/vnd.github.v3+json'`
+  },
+  
+  // Advanced
+  stripe: {
+    label: '🔴 Stripe Payment',
+    description: 'Real-world API (Stripe)',
+    curl: `curl https://api.stripe.com/v1/charges \\
+  -u sk_test_xxxxxxxxxxxx: \\
+  -d amount=2000 \\
+  -d currency=usd \\
+  -d source=tok_visa \\
+  -d description="Test charge"`
+  },
+  
+  multipart: {
+    label: '🔴 File Upload',
+    description: 'Multipart form with file',
+    curl: `curl -X POST https://api.example.com/upload \\
+  -F 'file=@document.pdf' \\
+  -F 'title=Important Document' \\
+  -F 'category=reports'`
+  },
+  
+  // More examples...
+};
+```
+
+### 2. Toast Notification System
+Added elegant, non-intrusive feedback for user actions:
+
+```javascript
+function showToast(message, type = 'success') {
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type}`;
+  toast.textContent = message;
+  
+  // Auto-position and animate
+  document.body.appendChild(toast);
+  setTimeout(() => toast.classList.add('show'), 10);
+  
+  setTimeout(() => {
+    toast.classList.remove('show');
+    setTimeout(() => toast.remove(), 300);
+  }, 3000);
+}
+
+// Usage:
+showToast('✓ Code copied to clipboard!', 'success');
+showToast('⚠ Invalid cURL command', 'error');
+showToast('ℹ Example loaded', 'info');
+```
+
+### 3. Better Error Handling
+**Enhanced error messages with actionable suggestions:**
+
+```javascript
+// Before:
+throw new Error('Could not parse URL');
+
+// After:
+function handleConversionError(error) {
+  let userMessage = error.message;
+  let suggestions = [];
+  
+  if (error.message.includes('URL')) {
+    suggestions.push('Make sure your cURL starts with http:// or https://');
+    suggestions.push('Try one of the examples below to see the correct format');
+  }
+  
+  if (error.message.includes('syntax')) {
+    suggestions.push('Check for unmatched quotes or brackets');
+    suggestions.push('Remove backslashes (\\) if copying from terminal');
+  }
+  
+  displayError(userMessage, suggestions);
+}
+```
+
+### 4. Loading States
+Subtle visual feedback during conversion:
+
+```javascript
+function convertCurl() {
+  const outputEl = document.getElementById('output');
+  
+  // Show loading state
+  outputEl.classList.add('converting');
+  outputEl.innerHTML = '<div class="loader">Converting...</div>';
+  
+  // Use setTimeout to allow UI update
+  setTimeout(() => {
+    try {
+      // Actual conversion logic
+      const result = converter.convert(input);
+      outputEl.classList.remove('converting');
+      outputEl.innerHTML = result;
+      showToast('✓ Converted successfully', 'success');
+    } catch (error) {
+      outputEl.classList.remove('converting');
+      handleConversionError(error);
+    }
+  }, 50);
+}
+```
+
+### 5. Mobile Responsiveness Improvements
+
+```css
+@media (max-width: 768px) {
+  .main-content {
+    grid-template-columns: 1fr;
+  }
+  
+  .panel-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .language-selector {
+    width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  .lang-btn {
+    min-width: 80px; /* Touch-friendly */
+    white-space: nowrap;
+  }
+  
+  textarea, .output-code {
+    font-size: 13px; /* Readable on mobile */
+    min-height: 250px; /* Shorter for mobile */
+  }
+  
+  .example-grid {
+    grid-template-columns: 1fr; /* Stack on mobile */
+  }
+}
+```
+
+### 6. Copy Feedback Enhancement
+
+```javascript
+copyBtn.addEventListener('click', async () => {
+  try {
+    await navigator.clipboard.writeText(output.textContent);
+    
+    // Visual feedback
+    copyBtn.textContent = '✓ Copied!';
+    copyBtn.style.background = 'var(--success)';
+    showToast('Code copied to clipboard!', 'success');
+    
+    setTimeout(() => {
+      copyBtn.textContent = 'Copy';
+      copyBtn.style.background = '';
+    }, 2000);
+  } catch (error) {
+    // Fallback for older browsers
+    selectAndCopy(output);
+    showToast('Code copied!', 'success');
+  }
+});
+```
+
+### 7. Keyboard Shortcuts Enhancement
+
+```javascript
+// Enhanced keyboard shortcuts with visual feedback
+const shortcuts = {
+  'Ctrl+Enter': convertCurl,
+  'Ctrl+K': () => document.getElementById('clearBtn').click(),
+  'Ctrl+/': () => showKeyboardHelp(),
+  'Escape': () => clearError()
+};
+
+document.addEventListener('keydown', (e) => {
+  const key = (e.ctrlKey || e.metaKey ? 'Ctrl+' : '') + 
+               (e.shiftKey ? 'Shift+' : '') + 
+               e.key;
+  
+  if (shortcuts[key]) {
+    e.preventDefault();
+    shortcuts[key]();
+    
+    // Visual feedback
+    flashElement(document.body);
+  }
+});
+```
+
+## CSS Enhancements
+
+### Toast Styles
+```css
+.toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  padding: 12px 20px;
+  border-radius: 8px;
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  transform: translateY(100px);
+  opacity: 0;
+  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  z-index: 10000;
+}
+
+.toast.show {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.toast-success { background: #3fb950; }
+.toast-error { background: #f85149; }
+.toast-info { background: #58a6ff; }
+.toast-warning { background: #d29922; }
+```
+
+### Loading Animation
+```css
+.converting {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--text-secondary);
+  padding: 40px;
+}
+
+.loader::before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--accent);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+```
+
+### Enhanced Error Display
+```css
+.error-container {
+  margin: 20px;
+  padding: 16px;
+  background: var(--error-bg);
+  border-left: 4px solid var(--error-text);
+  border-radius: 6px;
+}
+
+.error-message {
+  color: var(--error-text);
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.error-suggestions {
+  margin-top: 12px;
+  padding-left: 20px;
+}
+
+.error-suggestions li {
+  color: var(--text-secondary);
+  margin: 4px 0;
+  font-size: 14px;
+}
+```
+
+## Testing Checklist
+
+- [ ] All examples load correctly
+- [ ] Toast notifications appear and disappear properly
+- [ ] Error messages are helpful and actionable
+- [ ] Mobile layout stacks properly
+- [ ] Touch targets are at least 44px
+- [ ] Copy button works on mobile Safari
+- [ ] Keyboard shortcuts work (desktop)
+- [ ] Dark mode toggle persists
+- [ ] LocalStorage saves preferences
+- [ ] No horizontal scroll on mobile
+
+## Future Enhancements
+
+1. **Syntax highlighting improvements**
+   - Line numbers
+   - Keyword colors per language
+   - Copy individual lines
+
+2. **Export options**
+   - Download as .py, .js, etc.
+   - Generate test file with comments
+   - Export as Postman collection
+
+3. **Advanced features**
+   - cURL history (last 10 conversions)
+   - Compare two outputs side-by-side
+   - Batch convert multiple cURLs
+
+4. **AI-powered**
+   - Explain what the code does
+   - Suggest improvements
+   - Security warnings (exposed tokens, etc.)