mirror of
https://github.com/usmannasir/cyberpanel.git
synced 2026-07-19 22:21:02 +02:00
Add better plugin description + new example plugin
Add better plugin description + new example plugin
This commit is contained in:
Master3395
1356
testPlugin/templates/testPlugin/plugin_docs.html
Normal file
1356
testPlugin/templates/testPlugin/plugin_docs.html
Normal file
File diff suppressed because it is too large
Load Diff
566
testPlugin/templates/testPlugin/plugin_home.html
Normal file
566
testPlugin/templates/testPlugin/plugin_home.html
Normal file
@@ -0,0 +1,566 @@
|
||||
{% extends "baseTemplate/index.html" %}
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{% trans "Test Plugin - CyberPanel" %}{% endblock %}
|
||||
|
||||
{% block header_scripts %}
|
||||
<style>
|
||||
/* Test Plugin Specific Styles */
|
||||
.test-plugin-wrapper {
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.test-plugin-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Page Header */
|
||||
.plugin-header {
|
||||
background: var(--bg-primary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-primary, #e8e9ff);
|
||||
}
|
||||
|
||||
.plugin-header h1 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin: 0 0 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.plugin-header .icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #5856d6;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
box-shadow: 0 4px 12px rgba(88,86,214,0.3);
|
||||
}
|
||||
|
||||
.plugin-header p {
|
||||
font-size: 15px;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Control Panel */
|
||||
.control-panel {
|
||||
background: var(--bg-primary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-primary, #e8e9ff);
|
||||
}
|
||||
|
||||
.control-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #5856d6;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
.btn-test {
|
||||
background: linear-gradient(135deg, #5856d6, #4a90e2);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-test:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(88,86,214,0.3);
|
||||
}
|
||||
|
||||
.btn-test:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #5a6268;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Stats Cards */
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--bg-primary, white);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-primary, #e8e9ff);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #5856d6;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary, #64748b);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Recent Logs */
|
||||
.logs-section {
|
||||
background: var(--bg-primary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-primary, #e8e9ff);
|
||||
}
|
||||
|
||||
.logs-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.log-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border-primary, #e8e9ff);
|
||||
}
|
||||
|
||||
.log-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.log-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.log-icon.info {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.log-icon.success {
|
||||
background: #e8f5e8;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.log-icon.warning {
|
||||
background: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
.log-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.log-action {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.log-message {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.log-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary, #9ca3af);
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* Popup Message Styles */
|
||||
.popup-message {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||
border-left: 4px solid #10b981;
|
||||
z-index: 9999;
|
||||
max-width: 400px;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.popup-message.show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.popup-message.error {
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
|
||||
.popup-message.warning {
|
||||
border-left-color: #f59e0b;
|
||||
}
|
||||
|
||||
.popup-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.popup-content {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary, #64748b);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.popup-time {
|
||||
font-size: 12px;
|
||||
color: var(--text-tertiary, #9ca3af);
|
||||
}
|
||||
|
||||
.popup-close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
color: var(--text-tertiary, #9ca3af);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.test-plugin-wrapper {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.control-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.popup-message {
|
||||
right: 10px;
|
||||
left: 10px;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="test-plugin-wrapper">
|
||||
<div class="test-plugin-container">
|
||||
<!-- Plugin Header -->
|
||||
<div class="plugin-header">
|
||||
<h1>
|
||||
<div class="icon">
|
||||
<i class="fas fa-vial"></i>
|
||||
</div>
|
||||
{% trans "Test Plugin" %}
|
||||
</h1>
|
||||
<p>{% trans "A comprehensive test plugin with enable/disable functionality, test button, and popup messages" %}</p>
|
||||
</div>
|
||||
|
||||
<!-- Control Panel -->
|
||||
<div class="control-panel">
|
||||
<div class="control-row">
|
||||
<div class="control-group">
|
||||
<label for="plugin-toggle" style="font-weight: 600; color: var(--text-primary, #2f3640);">
|
||||
{% trans "Enable Plugin" %}
|
||||
</label>
|
||||
<label class="toggle-switch">
|
||||
<input type="checkbox" id="plugin-toggle" {% if plugin_enabled %}checked{% endif %}>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<button class="btn-test" id="test-button" {% if not plugin_enabled %}disabled{% endif %}>
|
||||
<i class="fas fa-play"></i>
|
||||
{% trans "Test Button" %}
|
||||
</button>
|
||||
|
||||
<a href="{% url 'testPlugin:plugin_settings' %}" class="btn-secondary">
|
||||
<i class="fas fa-cog"></i>
|
||||
{% trans "Settings" %}
|
||||
</a>
|
||||
|
||||
<a href="{% url 'testPlugin:plugin_logs' %}" class="btn-secondary">
|
||||
<i class="fas fa-list"></i>
|
||||
{% trans "Logs" %}
|
||||
</a>
|
||||
|
||||
<a href="{% url 'testPlugin:plugin_docs' %}" class="btn-secondary">
|
||||
<i class="fas fa-book"></i>
|
||||
{% trans "Documentation" %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="test-count">{{ settings.test_count|default:0 }}</div>
|
||||
<div class="stat-label">{% trans "Test Clicks" %}</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">
|
||||
{% if plugin_enabled %}
|
||||
<i class="fas fa-check-circle" style="color: #10b981;"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-times-circle" style="color: #ef4444;"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="stat-label">{% trans "Plugin Status" %}</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">{{ recent_logs|length }}</div>
|
||||
<div class="stat-label">{% trans "Recent Activities" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Logs -->
|
||||
<div class="logs-section">
|
||||
<h3 style="margin-bottom: 20px; color: var(--text-primary, #2f3640);">
|
||||
<i class="fas fa-history" style="margin-right: 8px; color: #5856d6;"></i>
|
||||
{% trans "Recent Activity" %}
|
||||
</h3>
|
||||
|
||||
<div class="logs-list">
|
||||
{% for log in recent_logs %}
|
||||
<div class="log-item">
|
||||
<div class="log-icon {% if 'error' in log.action %}warning{% elif 'success' in log.action or 'click' in log.action %}success{% else %}info{% endif %}">
|
||||
{% if 'click' in log.action %}
|
||||
<i class="fas fa-mouse-pointer"></i>
|
||||
{% elif 'toggle' in log.action %}
|
||||
<i class="fas fa-toggle-on"></i>
|
||||
{% elif 'settings' in log.action %}
|
||||
<i class="fas fa-cog"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-info-circle"></i>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="log-content">
|
||||
<div class="log-action">{{ log.action|title }}</div>
|
||||
<div class="log-message">{{ log.message }}</div>
|
||||
</div>
|
||||
<div class="log-time">{{ log.timestamp|date:"M d, H:i" }}</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div style="text-align: center; padding: 40px; color: var(--text-secondary, #64748b);">
|
||||
<i class="fas fa-inbox" style="font-size: 48px; margin-bottom: 16px; opacity: 0.5;"></i>
|
||||
<p>{% trans "No recent activity" %}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Popup Message Container -->
|
||||
<div id="popup-container"></div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const toggleSwitch = document.getElementById('plugin-toggle');
|
||||
const testButton = document.getElementById('test-button');
|
||||
const testCountElement = document.getElementById('test-count');
|
||||
|
||||
// Toggle switch functionality
|
||||
toggleSwitch.addEventListener('change', function() {
|
||||
fetch('{% url "testPlugin:toggle_plugin" %}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token }}'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status === 1) {
|
||||
testButton.disabled = !data.enabled;
|
||||
showPopup('success', 'Plugin Toggle', data.message);
|
||||
location.reload(); // Refresh to update UI
|
||||
} else {
|
||||
showPopup('error', 'Error', data.error_message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showPopup('error', 'Error', 'Failed to toggle plugin');
|
||||
});
|
||||
});
|
||||
|
||||
// Test button functionality
|
||||
testButton.addEventListener('click', function() {
|
||||
if (testButton.disabled) return;
|
||||
|
||||
testButton.disabled = true;
|
||||
testButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing...';
|
||||
|
||||
fetch('{% url "testPlugin:test_button" %}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token }}'
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status === 1) {
|
||||
testCountElement.textContent = data.test_count;
|
||||
showPopup(data.popup_message.type, data.popup_message.title, data.popup_message.message);
|
||||
} else {
|
||||
showPopup('error', 'Error', data.error_message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showPopup('error', 'Error', 'Failed to execute test');
|
||||
})
|
||||
.finally(() => {
|
||||
testButton.disabled = false;
|
||||
testButton.innerHTML = '<i class="fas fa-play"></i> Test Button';
|
||||
});
|
||||
});
|
||||
|
||||
// Popup message function
|
||||
function showPopup(type, title, message) {
|
||||
const popupContainer = document.getElementById('popup-container');
|
||||
const popup = document.createElement('div');
|
||||
popup.className = `popup-message ${type}`;
|
||||
|
||||
popup.innerHTML = `
|
||||
<button class="popup-close" onclick="this.parentElement.remove()">×</button>
|
||||
<div class="popup-title">${title}</div>
|
||||
<div class="popup-content">${message}</div>
|
||||
<div class="popup-time">${new Date().toLocaleTimeString()}</div>
|
||||
`;
|
||||
|
||||
popupContainer.appendChild(popup);
|
||||
|
||||
// Show popup
|
||||
setTimeout(() => popup.classList.add('show'), 100);
|
||||
|
||||
// Auto remove after 5 seconds
|
||||
setTimeout(() => {
|
||||
popup.classList.remove('show');
|
||||
setTimeout(() => popup.remove(), 300);
|
||||
}, 5000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
286
testPlugin/templates/testPlugin/plugin_logs.html
Normal file
286
testPlugin/templates/testPlugin/plugin_logs.html
Normal file
@@ -0,0 +1,286 @@
|
||||
{% extends "baseTemplate/index.html" %}
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{% trans "Test Plugin Logs - CyberPanel" %}{% endblock %}
|
||||
|
||||
{% block header_scripts %}
|
||||
<style>
|
||||
.logs-wrapper {
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.logs-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logs-header {
|
||||
background: var(--bg-primary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-primary, #e8e9ff);
|
||||
}
|
||||
|
||||
.logs-content {
|
||||
background: var(--bg-primary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-primary, #e8e9ff);
|
||||
}
|
||||
|
||||
.logs-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.logs-table th,
|
||||
.logs-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border-primary, #e8e9ff);
|
||||
}
|
||||
|
||||
.logs-table th {
|
||||
background: var(--bg-secondary, #f8f9ff);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #2f3640);
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.logs-table td {
|
||||
font-size: 14px;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.log-action {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #2f3640);
|
||||
}
|
||||
|
||||
.log-timestamp {
|
||||
color: var(--text-tertiary, #9ca3af);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.log-icon {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
font-size: 12px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.log-icon.info {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.log-icon.success {
|
||||
background: #e8f5e8;
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
.log-icon.warning {
|
||||
background: #fff3e0;
|
||||
color: #f57c00;
|
||||
}
|
||||
|
||||
.log-icon.error {
|
||||
background: #ffebee;
|
||||
color: #d32f2f;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #5a6268;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: var(--text-secondary, #64748b);
|
||||
}
|
||||
|
||||
.empty-state i {
|
||||
font-size: 64px;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: var(--text-primary, #2f3640);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border-primary, #e8e9ff);
|
||||
border-radius: 6px;
|
||||
background: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: #5856d6;
|
||||
box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.logs-table {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.logs-table th,
|
||||
.logs-table td {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.filter-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="logs-wrapper">
|
||||
<div class="logs-container">
|
||||
<!-- Logs Header -->
|
||||
<div class="logs-header">
|
||||
<h1>
|
||||
<i class="fas fa-list" style="margin-right: 12px; color: #5856d6;"></i>
|
||||
{% trans "Test Plugin Logs" %}
|
||||
</h1>
|
||||
<p>{% trans "View detailed activity logs for the test plugin" %}</p>
|
||||
</div>
|
||||
|
||||
<!-- Logs Content -->
|
||||
<div class="logs-content">
|
||||
<div class="filter-controls">
|
||||
<select class="filter-select" id="action-filter" title="{% trans 'Filter logs by action type' %}">
|
||||
<option value="">{% trans "All Actions" %}</option>
|
||||
<option value="test_button_click">{% trans "Test Button Clicks" %}</option>
|
||||
<option value="plugin_toggle">{% trans "Plugin Toggle" %}</option>
|
||||
<option value="settings_update">{% trans "Settings Update" %}</option>
|
||||
<option value="page_visit">{% trans "Page Visits" %}</option>
|
||||
</select>
|
||||
|
||||
<a href="{% url 'testPlugin:plugin_home' %}" class="btn-secondary">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
{% trans "Back to Plugin" %}
|
||||
</a>
|
||||
|
||||
<a href="{% url 'testPlugin:plugin_docs' %}" class="btn-secondary">
|
||||
<i class="fas fa-book"></i>
|
||||
{% trans "Documentation" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if logs %}
|
||||
<table class="logs-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "Action" %}</th>
|
||||
<th>{% trans "Message" %}</th>
|
||||
<th>{% trans "Timestamp" %}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for log in logs %}
|
||||
<tr class="log-row" data-action="{{ log.action }}">
|
||||
<td>
|
||||
<span class="log-icon {% if 'error' in log.action %}error{% elif 'success' in log.action or 'click' in log.action %}success{% elif 'warning' in log.action %}warning{% else %}info{% endif %}">
|
||||
{% if 'click' in log.action %}
|
||||
<i class="fas fa-mouse-pointer"></i>
|
||||
{% elif 'toggle' in log.action %}
|
||||
<i class="fas fa-toggle-on"></i>
|
||||
{% elif 'settings' in log.action %}
|
||||
<i class="fas fa-cog"></i>
|
||||
{% elif 'visit' in log.action %}
|
||||
<i class="fas fa-eye"></i>
|
||||
{% else %}
|
||||
<i class="fas fa-info-circle"></i>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="log-action">{{ log.action|title|replace:"_":" " }}</span>
|
||||
</td>
|
||||
<td>{{ log.message }}</td>
|
||||
<td class="log-timestamp">{{ log.timestamp|date:"M d, Y H:i:s" }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
{% else %}
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-inbox"></i>
|
||||
<h3>{% trans "No Logs Found" %}</h3>
|
||||
<p>{% trans "No activity logs available yet. Start using the plugin to see logs here." %}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const actionFilter = document.getElementById('action-filter');
|
||||
const logRows = document.querySelectorAll('.log-row');
|
||||
|
||||
actionFilter.addEventListener('change', function() {
|
||||
const selectedAction = this.value;
|
||||
|
||||
logRows.forEach(row => {
|
||||
if (selectedAction === '' || row.dataset.action === selectedAction) {
|
||||
row.style.display = '';
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
259
testPlugin/templates/testPlugin/plugin_settings.html
Normal file
259
testPlugin/templates/testPlugin/plugin_settings.html
Normal file
@@ -0,0 +1,259 @@
|
||||
{% extends "baseTemplate/index.html" %}
|
||||
{% load i18n %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{% trans "Test Plugin Settings - CyberPanel" %}{% endblock %}
|
||||
|
||||
{% block header_scripts %}
|
||||
<style>
|
||||
.settings-wrapper {
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
background: var(--bg-primary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
margin-bottom: 25px;
|
||||
box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-primary, #e8e9ff);
|
||||
}
|
||||
|
||||
.settings-form {
|
||||
background: var(--bg-primary, white);
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
|
||||
border: 1px solid var(--border-primary, #e8e9ff);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #2f3640);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border-primary, #e8e9ff);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: #5856d6;
|
||||
box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #5856d6, #4a90e2);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(88,86,214,0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #5a6268;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="settings-wrapper">
|
||||
<div class="settings-container">
|
||||
<!-- Settings Header -->
|
||||
<div class="settings-header">
|
||||
<h1>
|
||||
<i class="fas fa-cog" style="margin-right: 12px; color: #5856d6;"></i>
|
||||
{% trans "Test Plugin Settings" %}
|
||||
</h1>
|
||||
<p>{% trans "Configure your test plugin settings and preferences" %}</p>
|
||||
</div>
|
||||
|
||||
<!-- Settings Form -->
|
||||
<div class="settings-form">
|
||||
<form id="settings-form">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="form-group">
|
||||
<label for="custom_message" class="form-label">
|
||||
{% trans "Custom Test Message" %}
|
||||
</label>
|
||||
<textarea
|
||||
id="custom_message"
|
||||
name="custom_message"
|
||||
class="form-control"
|
||||
rows="3"
|
||||
placeholder="Enter your custom message for the test button popup..."
|
||||
>{{ settings.custom_message }}</textarea>
|
||||
<small style="color: var(--text-secondary, #64748b); margin-top: 5px; display: block;">
|
||||
{% trans "This message will be displayed when you click the test button" %}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
{% trans "Plugin Status" %}
|
||||
</label>
|
||||
<div style="padding: 12px; background: var(--bg-secondary, #f8f9ff); border-radius: 8px; border: 1px solid var(--border-primary, #e8e9ff);">
|
||||
<strong style="color: {% if settings.plugin_enabled %}#10b981{% else %}#ef4444{% endif %};">
|
||||
{% if settings.plugin_enabled %}
|
||||
<i class="fas fa-check-circle"></i> {% trans "Enabled" %}
|
||||
{% else %}
|
||||
<i class="fas fa-times-circle"></i> {% trans "Disabled" %}
|
||||
{% endif %}
|
||||
</strong>
|
||||
<p style="margin: 8px 0 0 0; color: var(--text-secondary, #64748b); font-size: 14px;">
|
||||
{% trans "Use the toggle switch on the main page to enable/disable the plugin" %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
{% trans "Test Statistics" %}
|
||||
</label>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
|
||||
<div style="padding: 12px; background: var(--bg-secondary, #f8f9ff); border-radius: 8px; text-align: center;">
|
||||
<div style="font-size: 24px; font-weight: 700; color: #5856d6;">{{ settings.test_count }}</div>
|
||||
<div style="font-size: 14px; color: var(--text-secondary, #64748b);">{% trans "Total Tests" %}</div>
|
||||
</div>
|
||||
<div style="padding: 12px; background: var(--bg-secondary, #f8f9ff); border-radius: 8px; text-align: center;">
|
||||
<div style="font-size: 24px; font-weight: 700; color: #5856d6;">{{ settings.last_test_time|date:"M d" }}</div>
|
||||
<div style="font-size: 14px; color: var(--text-secondary, #64748b);">{% trans "Last Test" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-primary, #e8e9ff);">
|
||||
<button type="submit" class="btn-primary">
|
||||
<i class="fas fa-save"></i>
|
||||
{% trans "Save Settings" %}
|
||||
</button>
|
||||
|
||||
<a href="{% url 'testPlugin:plugin_home' %}" class="btn-secondary">
|
||||
<i class="fas fa-arrow-left"></i>
|
||||
{% trans "Back to Plugin" %}
|
||||
</a>
|
||||
|
||||
<a href="{% url 'testPlugin:plugin_docs' %}" class="btn-secondary">
|
||||
<i class="fas fa-book"></i>
|
||||
{% trans "Documentation" %}
|
||||
</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.getElementById('settings-form');
|
||||
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(form);
|
||||
const data = {
|
||||
custom_message: formData.get('custom_message')
|
||||
};
|
||||
|
||||
fetch('{% url "testPlugin:update_settings" %}', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': '{{ csrf_token }}'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status === 1) {
|
||||
showNotification('success', 'Settings Updated', data.message);
|
||||
} else {
|
||||
showNotification('error', 'Error', data.error_message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
showNotification('error', 'Error', 'Failed to update settings');
|
||||
});
|
||||
});
|
||||
|
||||
function showNotification(type, title, message) {
|
||||
// Create notification element
|
||||
const notification = document.createElement('div');
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
||||
border-left: 4px solid ${type === 'success' ? '#10b981' : '#ef4444'};
|
||||
z-index: 9999;
|
||||
max-width: 400px;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease;
|
||||
`;
|
||||
|
||||
notification.innerHTML = `
|
||||
<div style="font-weight: 600; color: var(--text-primary, #2f3640); margin-bottom: 4px;">${title}</div>
|
||||
<div style="font-size: 14px; color: var(--text-secondary, #64748b);">${message}</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Show notification
|
||||
setTimeout(() => notification.style.transform = 'translateX(0)', 100);
|
||||
|
||||
// Auto remove after 3 seconds
|
||||
setTimeout(() => {
|
||||
notification.style.transform = 'translateX(100%)';
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user