yeni
This commit is contained in:
ilkeral
506
templates/ssh_manager/base.html
Normal file
506
templates/ssh_manager/base.html
Normal file
@ -0,0 +1,506 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="tr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}Hosting Yönetim Paneli{% endblock %}</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
|
||||
<style>
|
||||
body {
|
||||
background: #181a1b;
|
||||
color: #f0f0f0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #1a1d23 0%, #23272b 100%);
|
||||
border-right: 1px solid #333;
|
||||
z-index: 1000;
|
||||
box-shadow: 2px 0 10px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
padding: 2rem 1.5rem 1.5rem;
|
||||
border-bottom: 1px solid #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #4fc3f7;
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-subtitle {
|
||||
font-size: 0.9rem;
|
||||
color: #c0c0c0;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
color: #e8e8e8;
|
||||
text-decoration: none;
|
||||
border-left: 3px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(79, 195, 247, 0.1);
|
||||
color: #ffffff;
|
||||
border-left-color: #4fc3f7;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: rgba(79, 195, 247, 0.2);
|
||||
color: #ffffff;
|
||||
border-left-color: #4fc3f7;
|
||||
}
|
||||
|
||||
.nav-item i {
|
||||
width: 20px;
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
/* Dropdown menu styles */
|
||||
.nav-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
background: #1a1d23;
|
||||
border-left: 3px solid #4fc3f7;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nav-dropdown.active .nav-dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-dropdown-item {
|
||||
display: block;
|
||||
padding: 0.5rem 1.5rem 0.5rem 3rem;
|
||||
color: #e0e0e0;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.3s ease;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.nav-dropdown-item:hover {
|
||||
background: rgba(79, 195, 247, 0.1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-dropdown-item.active {
|
||||
background: rgba(79, 195, 247, 0.2);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.nav-dropdown-toggle::after {
|
||||
content: '\F282';
|
||||
font-family: 'bootstrap-icons';
|
||||
float: right;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-dropdown.active .nav-dropdown-toggle::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
.main-content {
|
||||
margin-left: 280px;
|
||||
padding: 2rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.table-dark th, .table-dark td { color: #f0f0f0; }
|
||||
.table-dark { background: #23272b; }
|
||||
.modal-content { background: #23272b; color: #f0f0f0; }
|
||||
.form-control, .form-select { background: #181a1b; color: #f0f0f0; border: 1px solid #444; }
|
||||
.form-label { color: #f0f0f0; }
|
||||
.actions { min-width: 140px; }
|
||||
.btn { padding: 0.25rem 0.5rem; }
|
||||
.btn i { font-size: 1.1rem; }
|
||||
.action-icon {
|
||||
color: #8c8c8c;
|
||||
font-size: 1.2rem;
|
||||
margin: 0 0.3rem;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
.action-icon:hover { color: #4fc3f7; }
|
||||
.action-icon.edit:hover { color: #17a2b8; }
|
||||
.action-icon.delete:hover { color: #dc3545; }
|
||||
.action-icon.backup:hover { color: #ffc107; }
|
||||
.action-icon.logs:hover { color: #6c757d; }
|
||||
.action-icon.site:hover { color: #28a745; }
|
||||
.action-icon.meta:hover { color: #007bff; }
|
||||
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #23272b; }
|
||||
.table-striped > tbody > tr:nth-of-type(even) { background-color: #181a1b; }
|
||||
.badge.bg-success, .badge.bg-danger { font-size: 0.9em; }
|
||||
.form-control.editing:focus { background:rgb(108, 106, 106) !important; color:rgb(176, 181, 185) !important; border-color: #bdbdbd !important; }
|
||||
#projectSearch::placeholder { color: #bbb; }
|
||||
#mainToast .toast-body { color: #ffffff; font-weight: bold; }
|
||||
|
||||
.log-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.log-row:hover {
|
||||
background-color: rgba(79, 195, 247, 0.1) !important;
|
||||
}
|
||||
|
||||
.log-status-success {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.log-status-error {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.log-type-backup {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.log-type-command {
|
||||
color: #17a2b8;
|
||||
}
|
||||
|
||||
/* Main content text improvements */
|
||||
.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.main-content p, .main-content span, .main-content div {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.main-content .text-muted {
|
||||
color: #b0b0b0 !important;
|
||||
}
|
||||
|
||||
/* Form controls and inputs */
|
||||
.form-control::placeholder {
|
||||
color: #bbb !important;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: #2a2d31 !important;
|
||||
color: #ffffff !important;
|
||||
border-color: #4fc3f7 !important;
|
||||
box-shadow: 0 0 0 0.2rem rgba(79, 195, 247, 0.25) !important;
|
||||
}
|
||||
|
||||
/* Button text improvements */
|
||||
.btn-primary {
|
||||
background-color: #4fc3f7;
|
||||
border-color: #4fc3f7;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6c757d;
|
||||
border-color: #6c757d;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
/* Table improvements */
|
||||
.table th {
|
||||
color: #ffffff !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table td {
|
||||
color: #f0f0f0 !important;
|
||||
}
|
||||
|
||||
/* Modal improvements */
|
||||
.modal-header {
|
||||
border-bottom: 1px solid #444;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid #444;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Toast improvements */
|
||||
#mainToastBody {
|
||||
color: #ffffff !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Customer Form Improvements */
|
||||
.modal-lg {
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.modal-body h6 {
|
||||
color: #4fc3f7;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid rgba(79, 195, 247, 0.3);
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: #4fc3f7;
|
||||
border-color: #4fc3f7;
|
||||
}
|
||||
|
||||
.row.g-3 {
|
||||
--bs-gutter-x: 1.5rem;
|
||||
--bs-gutter-y: 1rem;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #4fc3f7;
|
||||
box-shadow: 0 0 0 0.2rem rgba(79, 195, 247, 0.25);
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #b0b0b0 !important;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
}
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="sidebar-logo">
|
||||
<i class="bi bi-server"></i>
|
||||
HostPanel
|
||||
</div>
|
||||
<div class="sidebar-subtitle">Hosting Yönetim Sistemi</div>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<a href="{% url 'dashboard' %}" class="nav-item {% if request.resolver_match.url_name == 'project_list' or request.resolver_match.url_name == 'dashboard' %}active{% endif %}">
|
||||
<i class="bi bi-speedometer2"></i>
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="{% url 'musteriler' %}" class="nav-item {% if request.resolver_match.url_name == 'musteriler' %}active{% endif %}">
|
||||
<i class="bi bi-people"></i>
|
||||
Müşteriler
|
||||
</a>
|
||||
<a href="{% url 'host_yonetimi' %}" class="nav-item {% if request.resolver_match.url_name == 'host_yonetimi' %}active{% endif %}">
|
||||
<i class="bi bi-hdd-network"></i>
|
||||
Host Yönetimi
|
||||
</a>
|
||||
<a href="{% url 'projeler' %}" class="nav-item {% if request.resolver_match.url_name == 'projeler' %}active{% endif %}">
|
||||
<i class="bi bi-folder-fill"></i>
|
||||
Projeler
|
||||
</a>
|
||||
<a href="{% url 'yedeklemeler' %}" class="nav-item {% if request.resolver_match.url_name == 'yedeklemeler' %}active{% endif %}">
|
||||
<i class="bi bi-cloud-arrow-up"></i>
|
||||
Yedeklemeler
|
||||
</a>
|
||||
<a href="{% url 'islem_gecmisi' %}" class="nav-item {% if request.resolver_match.url_name == 'islem_gecmisi' %}active{% endif %}">
|
||||
<i class="bi bi-clock-history"></i>
|
||||
İşlem Geçmişi
|
||||
</a>
|
||||
<a href="{% url 'ayarlar' %}" class="nav-item {% if request.resolver_match.url_name == 'ayarlar' %}active{% endif %}">
|
||||
<i class="bi bi-gear"></i>
|
||||
Ayarlar
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Toast Container -->
|
||||
<div class="position-fixed top-0 end-0 p-3" style="z-index: 1100">
|
||||
<div id="mainToast" class="toast align-items-center text-bg-dark border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="4000">
|
||||
<div class="d-flex">
|
||||
<div class="toast-body" id="mainToastBody">
|
||||
Mesaj
|
||||
</div>
|
||||
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Kapat"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="progressToast" class="toast align-items-center text-bg-info border-0" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
|
||||
<div class="toast-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<span id="progressMessage">İşlem devam ediyor...</span>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Kapat"></button>
|
||||
</div>
|
||||
<div class="progress" style="height: 6px;">
|
||||
<div class="progress-bar progress-bar-striped progress-bar-animated" id="progressBar" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
<small class="text-muted" id="progressDetail">Başlatılıyor...</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
<h1 class="mb-4" style="color: #ffffff;">{% block page_title %}{{ page_title|default:"Dashboard" }}{% endblock %}</h1>
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
function getCookie(name) {
|
||||
let cookieValue = null;
|
||||
if (document.cookie && document.cookie !== '') {
|
||||
const cookies = document.cookie.split(';');
|
||||
for (let i = 0; i < cookies.length; i++) {
|
||||
const cookie = cookies[i].trim();
|
||||
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return cookieValue;
|
||||
}
|
||||
|
||||
function showToast(message, type = 'info') {
|
||||
const toast = document.getElementById('mainToast');
|
||||
const toastBody = document.getElementById('mainToastBody');
|
||||
|
||||
toastBody.textContent = message;
|
||||
|
||||
// Remove existing classes
|
||||
toast.classList.remove('text-bg-dark', 'text-bg-success', 'text-bg-danger', 'text-bg-warning', 'text-bg-info');
|
||||
|
||||
// Add appropriate class based on type
|
||||
switch(type) {
|
||||
case 'success':
|
||||
toast.classList.add('text-bg-success');
|
||||
break;
|
||||
case 'error':
|
||||
toast.classList.add('text-bg-danger');
|
||||
break;
|
||||
case 'warning':
|
||||
toast.classList.add('text-bg-warning');
|
||||
break;
|
||||
default:
|
||||
toast.classList.add('text-bg-info');
|
||||
}
|
||||
|
||||
const bsToast = new bootstrap.Toast(toast);
|
||||
bsToast.show();
|
||||
}
|
||||
|
||||
// Dropdown toggle fonksiyonu
|
||||
function toggleDropdown(element) {
|
||||
const dropdown = element.closest('.nav-dropdown');
|
||||
const allDropdowns = document.querySelectorAll('.nav-dropdown');
|
||||
|
||||
// Diğer dropdown'ları kapat
|
||||
allDropdowns.forEach(dd => {
|
||||
if (dd !== dropdown) {
|
||||
dd.classList.remove('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Bu dropdown'ı aç/kapat
|
||||
dropdown.classList.toggle('active');
|
||||
}
|
||||
|
||||
// Yeni müşteri modal'ını aç
|
||||
function openNewCustomerModal(type) {
|
||||
// Eğer müşteri sayfasındaysak modal'ı doğrudan aç
|
||||
if (window.location.pathname.includes('/musteriler/')) {
|
||||
if (typeof resetCustomerForm === 'function') {
|
||||
resetCustomerForm();
|
||||
if (type === 'corporate') {
|
||||
document.getElementById('typeCorporate').checked = true;
|
||||
document.getElementById('corporateFields').style.display = 'block';
|
||||
document.getElementById('individualFields').style.display = 'none';
|
||||
document.getElementById('surname').required = false;
|
||||
document.getElementById('company_name').required = true;
|
||||
} else {
|
||||
document.getElementById('typeIndividual').checked = true;
|
||||
document.getElementById('individualFields').style.display = 'block';
|
||||
document.getElementById('corporateFields').style.display = 'none';
|
||||
document.getElementById('surname').required = true;
|
||||
document.getElementById('company_name').required = false;
|
||||
}
|
||||
const modal = new bootstrap.Modal(document.getElementById('customerModal'));
|
||||
modal.show();
|
||||
}
|
||||
} else {
|
||||
// Müşteri sayfasına yönlendir
|
||||
window.location.href = '/musteriler/?new=' + type;
|
||||
}
|
||||
}
|
||||
|
||||
// Sayfa dışına tıklanırsa dropdown'ları kapat
|
||||
document.addEventListener('click', function(event) {
|
||||
if (!event.target.closest('.nav-dropdown')) {
|
||||
document.querySelectorAll('.nav-dropdown').forEach(dd => {
|
||||
dd.classList.remove('active');
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user