Spaces:

navpan2
/

check2

Paused

App Files Files Community

check2 / templates /admin.html

navpan2

Create admin.html

b748560 verified 10 months ago

raw

history blame contribute delete

8.88 kB

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