|
|
<!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> |
|
|
|
|
|
document.querySelectorAll('textarea').forEach(textarea => { |
|
|
|
|
|
textarea.addEventListener('input', function() { |
|
|
this.style.height = 'auto'; |
|
|
this.style.height = Math.max(150, this.scrollHeight) + 'px'; |
|
|
}); |
|
|
|
|
|
|
|
|
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) { |
|
|
|
|
|
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 { |
|
|
|
|
|
this.value = value.substring(0, start) + ' ' + value.substring(end); |
|
|
this.selectionStart = this.selectionEnd = start + 4; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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]; |
|
|
|
|
|
|
|
|
let extraIndent = ''; |
|
|
const trimmedLine = currentLine.trim(); |
|
|
|
|
|
|
|
|
if (trimmedLine.endsWith(':') || |
|
|
trimmedLine.endsWith('{') || |
|
|
trimmedLine.includes('if') && trimmedLine.endsWith(')') || |
|
|
trimmedLine.includes('for') && trimmedLine.endsWith(')') || |
|
|
trimmedLine.includes('while') && trimmedLine.endsWith(')') |
|
|
) { |
|
|
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); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
textarea.style.height = Math.max(150, textarea.scrollHeight) + 'px'; |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
