Spaces:

navpan2
/

check2

Running

App Files Files Community

navpan2 commited on Jul 11

Commit

b748560

verified ·

1 Parent(s): 5d16355

Create admin.html

Browse files

Files changed (1) hide show

templates/admin.html +230 -0

templates/admin.html ADDED Viewed

	@@ -0,0 +1,230 @@

+<!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>