templates/admin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin Panel - Code Snippets</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: white;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        .snippet-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: 25px;
        }
        .snippet-card {
            background: rgba(255, 255, 255, 0.15);
            padding: 25px;
            border-radius: 12px;
            border: 2px solid rgba(255, 255, 255, 0.2);
        }
        .snippet-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .endpoint-name {
            font-size: 1.3em;
            font-weight: bold;
            color: #fff;
            background: rgba(255, 255, 255, 0.2);
            padding: 8px 15px;
            border-radius: 20px;
        }
        .test-link {
            color: #fff;
            text-decoration: none;
            background: rgba(0, 255, 0, 0.3);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.9em;
            transition: background 0.3s ease;
        }
        .test-link:hover {
            background: rgba(0, 255, 0, 0.5);
        }
        textarea {
            width: 100%;
            height: 150px;
            background: rgba(0, 0, 0, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 8px;
            padding: 15px;
            color: white;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 14px;
            resize: vertical;
            box-sizing: border-box;
            line-height: 1.4;
            tab-size: 4;
            white-space: pre;
            overflow-wrap: break-word;
        }
        textarea:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.6);
            background: rgba(0, 0, 0, 0.4);
        }
        .update-btn {
            background: linear-gradient(45deg, #28a745, #20c997);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
            margin-top: 15px;
            width: 100%;
        }
        .update-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(40, 167, 69, 0.4);
        }
        .back-btn {
            display: inline-block;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            padding: 12px 25px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 25px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            margin-bottom: 30px;
        }
        .back-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
        }
        .success-message {
            background: rgba(40, 167, 69, 0.3);
            border: 2px solid rgba(40, 167, 69, 0.5);
            color: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <a href="/" class="back-btn">← Back to Home</a>
        
        <h1>🛠️ Admin Panel</h1>
        
        <div class="snippet-grid">
            {% for snippet in snippets %}
            <div class="snippet-card">
                <div class="snippet-header">
                    <span class="endpoint-name">/{{ snippet.endpoint }}</span>
                    <a href="/{{ snippet.endpoint }}" target="_blank" class="test-link">Test</a>
                </div>
                
                <form method="POST" action="/update_snippet">
                    <input type="hidden" name="endpoint" value="{{ snippet.endpoint }}">
                    <textarea name="text" placeholder="Enter your code snippet here...">{{ snippet.text }}</textarea>
                    <button type="submit" class="update-btn">Update {{ snippet.endpoint }}</button>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>

    <script>
        // Auto-resize textareas and handle Tab key for proper indentation
        document.querySelectorAll('textarea').forEach(textarea => {
            // Auto-resize functionality
            textarea.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = Math.max(150, this.scrollHeight) + 'px';
            });
            
            // Handle Tab key for indentation
            textarea.addEventListener('keydown', function(e) {
                if (e.key === 'Tab') {
                    e.preventDefault();
                    
                    const start = this.selectionStart;
                    const end = this.selectionEnd;
                    const value = this.value;
                    
                    if (e.shiftKey) {
                        // Shift+Tab: Remove indentation
                        const lineStart = value.lastIndexOf('\n', start - 1) + 1;
                        const lineText = value.substring(lineStart, value.indexOf('\n', lineStart));
                        
                        if (lineText.startsWith('    ')) {
                            this.value = value.substring(0, lineStart) + 
                                        lineText.substring(4) + 
                                        value.substring(lineStart + lineText.length);
                            this.selectionStart = this.selectionEnd = start - 4;
                        }
                    } else {
                        // Tab: Add indentation (4 spaces)
                        this.value = value.substring(0, start) + '    ' + value.substring(end);
                        this.selectionStart = this.selectionEnd = start + 4;
                    }
                }
                
                // Auto-indent on Enter with language-aware indentation
                if (e.key === 'Enter') {
                    const start = this.selectionStart;
                    const value = this.value;
                    const lineStart = value.lastIndexOf('\n', start - 1) + 1;
                    const currentLine = value.substring(lineStart, start);
                    const indent = currentLine.match(/^(\s*)/)[1];
                    
                    // Language-aware auto-indentation
                    let extraIndent = '';
                    const trimmedLine = currentLine.trim();
                    
                    // Add extra indent for various language constructs
                    if (trimmedLine.endsWith(':') ||           // Python
                        trimmedLine.endsWith('{') ||           // C++, Java, JavaScript
                        trimmedLine.includes('if') && trimmedLine.endsWith(')') ||  // C++ if without {
                        trimmedLine.includes('for') && trimmedLine.endsWith(')') || // C++ for without {
                        trimmedLine.includes('while') && trimmedLine.endsWith(')') // C++ while without {
                    ) {
                        extraIndent = '    ';
                    }
                    
                    setTimeout(() => {
                        const newStart = this.selectionStart;
                        this.value = this.value.substring(0, newStart) + 
                                   indent + extraIndent + 
                                   this.value.substring(newStart);
                        this.selectionStart = this.selectionEnd = newStart + indent.length + extraIndent.length;
                    }, 0);
                }
            });
            
            // Set initial height
            textarea.style.height = Math.max(150, textarea.scrollHeight) + 'px';
        });
    </script>
</body>
</html>