530 lines
17 KiB
HTML
530 lines
17 KiB
HTML
<!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">
|
||
{% block head_extras %}{% endblock %}
|
||
<style>
|
||
body {
|
||
background: #181a1b;
|
||
color: #f0f0f0;
|
||
margin: 0;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
}
|
||
|
||
/* Custom alert styles */
|
||
.alert.alert-success.alert-dismissible.fade.show {
|
||
background-color: #333333 !important;
|
||
color: #ffffff;
|
||
border-color: #28a745;
|
||
}
|
||
|
||
/* 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: relative;
|
||
width: 100%;
|
||
background: #1a1d23;
|
||
border-left: 3px solid #4fc3f7;
|
||
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(180deg);
|
||
}
|
||
|
||
.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>
|
||
<div class="nav-dropdown {% if request.resolver_match.url_name == 'musteriler' or request.resolver_match.url_name == 'faturalar' %}active{% endif %}">
|
||
<a href="#" class="nav-item nav-dropdown-toggle {% if request.resolver_match.url_name == 'musteriler' or request.resolver_match.url_name == 'faturalar' %}active{% endif %}" onclick="toggleDropdown(this); return false;">
|
||
<i class="bi bi-people"></i>
|
||
Müşteriler
|
||
</a>
|
||
<div class="nav-dropdown-content">
|
||
<a href="{% url 'musteriler' %}" class="nav-dropdown-item {% if request.resolver_match.url_name == 'musteriler' %}active{% endif %}">
|
||
<i class="bi bi-person-lines-fill"></i> Müşteri Listesi
|
||
</a>
|
||
<a href="{% url 'faturalar' %}" class="nav-dropdown-item {% if request.resolver_match.url_name == 'faturalar' %}active{% endif %}">
|
||
<i class="bi bi-receipt"></i> Faturalar
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<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.innerHTML = 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>
|
||
|
||
<!-- EXTRA SCRIPTS BLOCK -->
|
||
{% block scripts %}{% endblock %}
|
||
|
||
</body>
|
||
</html>
|