Инициализация проекта
Стабильный рабочий проект.
This commit is contained in:
Falknat
652
Backend/admin/html/assets/css/dashboard.css
Normal file
652
Backend/admin/html/assets/css/dashboard.css
Normal file
@@ -0,0 +1,652 @@
|
||||
/* Стили дашборда админ-панели */
|
||||
|
||||
.dashboard-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 2rem;
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Карточки дашборда */
|
||||
.dashboard-card {
|
||||
background: linear-gradient(135deg, rgba(26, 37, 47, 0.95), rgba(20, 30, 40, 0.9));
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(52, 152, 219, 0.25);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
0 0 0 1px rgba(52, 152, 219, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dashboard-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #3498db, #2ecc71, #9b59b6);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientFlow 6s ease-in-out infinite;
|
||||
box-shadow: 0 2px 10px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
@keyframes gradientFlow {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
25% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 200% 50%;
|
||||
}
|
||||
75% {
|
||||
background-position: 300% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.dashboard-card.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
/* Заголовки карточек */
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.2rem 1.5rem;
|
||||
border-bottom: 1px solid rgba(52, 152, 219, 0.15);
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.08), rgba(46, 204, 113, 0.05));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(52, 152, 219, 0.3), transparent);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #ecf0f1;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/* Содержимое карточек */
|
||||
.card-content {
|
||||
padding: 1.5rem 2rem 2rem 2rem;
|
||||
}
|
||||
|
||||
/* Статистика */
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid rgba(52, 152, 219, 0.1);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #3498db, #2ecc71);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.3rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-number.active-stat {
|
||||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.stat-number.inactive-stat {
|
||||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.stat-number.valid-stat {
|
||||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.stat-number.warning-stat {
|
||||
background: linear-gradient(135deg, #f39c12, #e67e22);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #95a5a6;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Превью секции */
|
||||
.sites-preview, .certs-preview {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
color: #bdc3c7;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Списки сайтов */
|
||||
.sites-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.site-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: rgba(52, 152, 219, 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(52, 152, 219, 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.site-item:hover {
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
transform: translateX(4px);
|
||||
border-color: rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
|
||||
.site-status {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.site-status.active {
|
||||
background: #2ecc71;
|
||||
box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
|
||||
}
|
||||
|
||||
.site-status.inactive {
|
||||
background: #e74c3c;
|
||||
box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
|
||||
}
|
||||
|
||||
.site-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.site-name {
|
||||
color: #ecf0f1;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.site-details {
|
||||
color: #95a5a6;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.site-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Списки сертификатов */
|
||||
.certs-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.cert-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: rgba(52, 152, 219, 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(52, 152, 219, 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.cert-item:hover {
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
transform: translateX(4px);
|
||||
border-color: rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
|
||||
.cert-status {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cert-status.valid {
|
||||
background: #2ecc71;
|
||||
box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
|
||||
}
|
||||
|
||||
.cert-status.warning {
|
||||
background: #f39c12;
|
||||
box-shadow: 0 0 8px rgba(243, 156, 18, 0.5);
|
||||
}
|
||||
|
||||
.cert-status.expired {
|
||||
background: #e74c3c;
|
||||
box-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
|
||||
}
|
||||
|
||||
.cert-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.cert-name {
|
||||
color: #ecf0f1;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.cert-details {
|
||||
color: #95a5a6;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.cert-expires {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.1rem;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.expires-date {
|
||||
color: #bdc3c7;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.expires-days {
|
||||
color: #95a5a6;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.cert-expires.warning .expires-date {
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
.cert-expires.warning .expires-days {
|
||||
color: #e67e22;
|
||||
}
|
||||
|
||||
.cert-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Серверы */
|
||||
.servers-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.server-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
background: rgba(52, 152, 219, 0.05);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(52, 152, 219, 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.server-item:hover {
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.server-status {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin-right: 1rem;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.server-status.running {
|
||||
background: #2ecc71;
|
||||
box-shadow: 0 0 12px rgba(46, 204, 113, 0.5);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.server-status.stopped {
|
||||
background: #e74c3c;
|
||||
box-shadow: 0 0 12px rgba(231, 76, 60, 0.5);
|
||||
}
|
||||
|
||||
.server-status.starting {
|
||||
background: #f39c12;
|
||||
box-shadow: 0 0 12px rgba(243, 156, 18, 0.5);
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.server-status.stopping {
|
||||
background: #f39c12;
|
||||
box-shadow: 0 0 12px rgba(243, 156, 18, 0.5);
|
||||
animation: pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.server-status.warning {
|
||||
background: #f39c12;
|
||||
box-shadow: 0 0 12px rgba(243, 156, 18, 0.5);
|
||||
}
|
||||
|
||||
.server-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.server-name {
|
||||
color: #ecf0f1;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.server-details {
|
||||
color: #95a5a6;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* Кнопки действий */
|
||||
.btn-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
padding: 0.3rem;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
opacity: 1;
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.btn-icon.disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-icon.disabled:hover {
|
||||
opacity: 0.4;
|
||||
background: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn-icon.warning {
|
||||
color: #f39c12;
|
||||
}
|
||||
|
||||
.btn-icon.warning:hover {
|
||||
background: rgba(243, 156, 18, 0.1);
|
||||
}
|
||||
|
||||
/* Кнопки - новый дизайн */
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.4rem 1rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.25);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, #2980b9, #3498db);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 8px rgba(52, 152, 219, 0.25);
|
||||
}
|
||||
|
||||
/* Иконка плюса */
|
||||
.btn-primary .btn-plus {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
border-radius: 50%;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
margin-right: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Специальные стили для кнопки добавления сайта */
|
||||
#add-site-btn {
|
||||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||||
box-shadow: 0 2px 8px rgba(46, 204, 113, 0.25);
|
||||
}
|
||||
|
||||
#add-site-btn:hover {
|
||||
background: linear-gradient(135deg, #27ae60, #2ecc71);
|
||||
box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
|
||||
}
|
||||
|
||||
#add-site-btn:active {
|
||||
box-shadow: 0 2px 8px rgba(46, 204, 113, 0.25);
|
||||
}
|
||||
|
||||
/* Специальные стили для кнопки добавления SSL */
|
||||
#add-cert-btn {
|
||||
background: linear-gradient(135deg, #f39c12, #e67e22);
|
||||
box-shadow: 0 2px 8px rgba(243, 156, 18, 0.25);
|
||||
}
|
||||
|
||||
#add-cert-btn:hover {
|
||||
background: linear-gradient(135deg, #e67e22, #f39c12);
|
||||
box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
|
||||
}
|
||||
|
||||
#add-cert-btn:active {
|
||||
box-shadow: 0 2px 8px rgba(243, 156, 18, 0.25);
|
||||
}
|
||||
|
||||
/* Футер карточек */
|
||||
.card-footer {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid rgba(52, 152, 219, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #3498db;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
background: rgba(52, 152, 219, 0.1);
|
||||
color: #2ecc71;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.show-all-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Адаптивность дашборда */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
align-items: stretch;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.servers-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.site-item, .cert-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.site-info, .cert-info {
|
||||
order: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.site-actions, .cert-actions {
|
||||
order: 3;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.cert-expires {
|
||||
order: 2;
|
||||
align-self: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.stat-number {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.server-item {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
}
|
||||
228
Backend/admin/html/assets/css/main.css
Normal file
228
Backend/admin/html/assets/css/main.css
Normal file
@@ -0,0 +1,228 @@
|
||||
/* Основные стили админ-панели vServer */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #1a252f 0%, #2c3e50 50%, #34495e 100%);
|
||||
min-height: 100vh;
|
||||
color: #ffffff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Фоновые частицы */
|
||||
.floating-particles {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
background: rgba(52, 152, 219, 0.15);
|
||||
border-radius: 50%;
|
||||
animation: float 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Основной контейнер */
|
||||
.admin-container {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Основной контент */
|
||||
.admin-main {
|
||||
flex: 1;
|
||||
padding: 2rem;
|
||||
margin-left: 280px;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Заголовки секций */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(52, 152, 219, 0.2);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #3498db, #2ecc71);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Индикатор статуса */
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(39, 174, 96, 0.25));
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(46, 204, 113, 0.4);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #2ecc71;
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s infinite;
|
||||
box-shadow: 0 0 8px rgba(46, 204, 113, 0.5);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7), 0 0 8px rgba(46, 204, 113, 0.5);
|
||||
}
|
||||
70% {
|
||||
box-shadow: 0 0 0 8px rgba(46, 204, 113, 0), 0 0 8px rgba(46, 204, 113, 0.5);
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(46, 204, 113, 0), 0 0 8px rgba(46, 204, 113, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: #ecf0f1;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Кнопки */
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px 24px;
|
||||
border-radius: 10px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 16px rgba(52, 152, 219, 0.25);
|
||||
font-size: 0.95rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: linear-gradient(135deg, #2980b9, #3498db);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 25px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 16px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary span {
|
||||
margin-right: 10px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Копирайт */
|
||||
.admin-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 280px;
|
||||
right: 0;
|
||||
background: rgba(26, 37, 47, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: 1px solid rgba(52, 152, 219, 0.2);
|
||||
padding: 1rem 2rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
font-size: 0.85rem;
|
||||
color: #95a5a6;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-content a {
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.footer-content a:hover {
|
||||
color: #2ecc71;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
@media (max-width: 1024px) {
|
||||
.admin-main {
|
||||
margin-left: 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.admin-footer {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.admin-main {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
203
Backend/admin/html/assets/css/navigation.css
Normal file
203
Backend/admin/html/assets/css/navigation.css
Normal file
@@ -0,0 +1,203 @@
|
||||
/* Стили навигации админ-панели */
|
||||
|
||||
.admin-nav {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 280px;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, rgba(26, 37, 47, 0.95), rgba(20, 30, 40, 0.9));
|
||||
backdrop-filter: blur(20px);
|
||||
border-right: 1px solid rgba(52, 152, 219, 0.3);
|
||||
box-shadow:
|
||||
8px 0 32px rgba(0, 0, 0, 0.4),
|
||||
0 0 0 1px rgba(52, 152, 219, 0.1),
|
||||
inset -1px 0 0 rgba(255, 255, 255, 0.1);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* Заголовок навигации */
|
||||
.nav-header {
|
||||
padding: 2rem 1.5rem;
|
||||
border-bottom: 1px solid rgba(52, 152, 219, 0.25);
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.08), rgba(46, 204, 113, 0.05));
|
||||
position: relative;
|
||||
box-shadow:
|
||||
0 4px 15px rgba(0, 0, 0, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.nav-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #3498db, #2ecc71, #e74c3c, #f39c12);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 4s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #3498db, #2ecc71);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: 2px;
|
||||
margin-bottom: 0.5rem;
|
||||
filter: drop-shadow(0 2px 8px rgba(52, 152, 219, 0.4));
|
||||
}
|
||||
|
||||
.logo-subtitle {
|
||||
font-size: 0.9rem;
|
||||
color: #95a5a6;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Меню навигации */
|
||||
.nav-menu {
|
||||
list-style: none;
|
||||
padding: 1rem 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
color: #bdc3c7;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
position: relative;
|
||||
border-radius: 0 25px 25px 0;
|
||||
margin-right: 1rem;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.nav-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
background: transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.12), rgba(46, 204, 113, 0.06));
|
||||
color: #3498db;
|
||||
transform: translateX(0);
|
||||
margin-right: 0.5rem;
|
||||
border-radius: 0 12px 12px 0;
|
||||
box-shadow: inset 2px 0 8px rgba(52, 152, 219, 0.15);
|
||||
}
|
||||
|
||||
.nav-link:hover::before {
|
||||
background: linear-gradient(135deg, #3498db, #2ecc71);
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link {
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(46, 204, 113, 0.1));
|
||||
color: #3498db;
|
||||
font-weight: 600;
|
||||
transform: translateX(0);
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: inset 3px 0 12px rgba(52, 152, 219, 0.25);
|
||||
}
|
||||
|
||||
.nav-item.active .nav-link::before {
|
||||
background: linear-gradient(135deg, #3498db, #2ecc71);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 1.3rem;
|
||||
margin-right: 1rem;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link:hover .nav-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Мобильная адаптивность */
|
||||
@media (max-width: 1024px) {
|
||||
.admin-nav {
|
||||
transform: translateX(-100%);
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.admin-nav.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
/* Кнопка меню (будет добавлена в JS) */
|
||||
.nav-toggle {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
z-index: 1001;
|
||||
background: rgba(26, 37, 47, 0.9);
|
||||
border: 1px solid rgba(52, 152, 219, 0.3);
|
||||
color: #3498db;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(10px);
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-toggle:hover {
|
||||
background: rgba(52, 152, 219, 0.2);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.admin-nav {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 1.2rem 1.5rem;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Анимация появления меню - убрано для избежания проблем с ресайзом */
|
||||
440
Backend/admin/html/assets/css/system-metrics.css
Normal file
440
Backend/admin/html/assets/css/system-metrics.css
Normal file
@@ -0,0 +1,440 @@
|
||||
/* Стили системной панели метрик */
|
||||
|
||||
.system-panel {
|
||||
background: linear-gradient(135deg, rgba(26, 37, 47, 0.95), rgba(20, 30, 40, 0.9));
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(52, 152, 219, 0.3);
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.4),
|
||||
0 0 0 1px rgba(52, 152, 219, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
margin-bottom: 2rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.system-panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, #3498db, #2ecc71, #f39c12, #e74c3c, #9b59b6);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientFlow 8s ease-in-out infinite;
|
||||
box-shadow: 0 3px 15px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
@keyframes gradientFlow {
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
25% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 200% 50%;
|
||||
}
|
||||
75% {
|
||||
background-position: 300% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Заголовок панели */
|
||||
.system-panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 1.5rem;
|
||||
border-bottom: 1px solid rgba(52, 152, 219, 0.15);
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.05), rgba(46, 204, 113, 0.03));
|
||||
}
|
||||
|
||||
.system-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: #ecf0f1;
|
||||
margin: 0;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.system-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-right: 0.8rem;
|
||||
filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.4));
|
||||
}
|
||||
|
||||
/* Uptime информация */
|
||||
.system-uptime {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.uptime-label {
|
||||
color: #95a5a6;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.uptime-value {
|
||||
color: #2ecc71;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #2ecc71, #27ae60);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
font-family: 'Courier New', monospace;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Сетка метрик */
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem;
|
||||
}
|
||||
|
||||
/* Карточки метрик */
|
||||
.metric-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(52, 152, 219, 0.08),
|
||||
rgba(52, 152, 219, 0.03));
|
||||
border: 1px solid rgba(52, 152, 219, 0.15);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 4px 15px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.metric-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #3498db, #2ecc71);
|
||||
transition: all 0.4s ease;
|
||||
box-shadow: 0 0 10px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
.metric-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.02),
|
||||
transparent,
|
||||
rgba(52, 152, 219, 0.02));
|
||||
pointer-events: none;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.metric-card:hover {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(52, 152, 219, 0.12),
|
||||
rgba(52, 152, 219, 0.06));
|
||||
border-color: rgba(52, 152, 219, 0.25);
|
||||
transform: translateY(-3px) scale(1.02);
|
||||
box-shadow:
|
||||
0 8px 25px rgba(0, 0, 0, 0.2),
|
||||
0 0 20px rgba(52, 152, 219, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.metric-card:hover::before {
|
||||
width: 6px;
|
||||
box-shadow: 0 0 15px rgba(52, 152, 219, 0.6);
|
||||
}
|
||||
|
||||
.metric-card:hover::after {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.05),
|
||||
transparent,
|
||||
rgba(52, 152, 219, 0.05));
|
||||
}
|
||||
|
||||
/* Специальные цвета для разных метрик */
|
||||
.metric-card.cpu::before {
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
box-shadow: 0 0 10px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
.metric-card.cpu:hover::before {
|
||||
box-shadow: 0 0 15px rgba(52, 152, 219, 0.6);
|
||||
}
|
||||
|
||||
.metric-card.ram::before {
|
||||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||||
box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
|
||||
}
|
||||
|
||||
.metric-card.ram:hover::before {
|
||||
box-shadow: 0 0 15px rgba(231, 76, 60, 0.6);
|
||||
}
|
||||
|
||||
.metric-card.disk::before {
|
||||
background: linear-gradient(135deg, #9b59b6, #8e44ad);
|
||||
box-shadow: 0 0 10px rgba(155, 89, 182, 0.4);
|
||||
}
|
||||
|
||||
.metric-card.disk:hover::before {
|
||||
box-shadow: 0 0 15px rgba(155, 89, 182, 0.6);
|
||||
}
|
||||
|
||||
/* Иконки метрик */
|
||||
.metric-icon-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(52, 152, 219, 0.08));
|
||||
border-radius: 10px;
|
||||
margin-right: 0.8rem;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.4s ease;
|
||||
box-shadow:
|
||||
0 3px 10px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.metric-card:hover .metric-icon-wrapper {
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(52, 152, 219, 0.12));
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
box-shadow:
|
||||
0 5px 15px rgba(0, 0, 0, 0.15),
|
||||
0 0 20px rgba(52, 152, 219, 0.2),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.metric-icon {
|
||||
font-size: 1.3rem;
|
||||
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
/* Содержимое метрик */
|
||||
.metric-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.metric-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.metric-name {
|
||||
color: #ecf0f1;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
background: linear-gradient(135deg, #3498db, #2ecc71);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
flex-shrink: 0;
|
||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
/* Специальные цвета значений */
|
||||
.metric-card.cpu .metric-value {
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.metric-card.ram .metric-value {
|
||||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.metric-card.disk .metric-value {
|
||||
background: linear-gradient(135deg, #9b59b6, #8e44ad);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Прогресс-бары */
|
||||
.metric-progress-bar {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.05));
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.5rem;
|
||||
position: relative;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.metric-progress {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.2),
|
||||
0 0 10px rgba(52, 152, 219, 0.3);
|
||||
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
.metric-progress::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
animation: shimmer 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
left: -100%;
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Цвета прогресс-баров */
|
||||
.cpu-progress {
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.2),
|
||||
0 0 10px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
.ram-progress {
|
||||
background: linear-gradient(135deg, #e74c3c, #c0392b);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.2),
|
||||
0 0 10px rgba(231, 76, 60, 0.4);
|
||||
}
|
||||
|
||||
.disk-progress {
|
||||
background: linear-gradient(135deg, #9b59b6, #8e44ad);
|
||||
box-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.2),
|
||||
0 0 10px rgba(155, 89, 182, 0.4);
|
||||
}
|
||||
|
||||
/* Детали метрик */
|
||||
.metric-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.metric-info {
|
||||
color: #bdc3c7;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.metric-frequency,
|
||||
.metric-type,
|
||||
.metric-range,
|
||||
.metric-speed {
|
||||
color: #95a5a6;
|
||||
font-size: 0.65rem;
|
||||
flex-shrink: 0;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Адаптивность */
|
||||
@media (max-width: 1200px) {
|
||||
.metrics-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.metrics-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.system-panel-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: stretch;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.metric-icon-wrapper {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.metric-details {
|
||||
flex-direction: column;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.system-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.metric-name {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
11
Backend/admin/html/assets/js/dashboard.js
Normal file
11
Backend/admin/html/assets/js/dashboard.js
Normal file
@@ -0,0 +1,11 @@
|
||||
/**
|
||||
* Дашборд админ-панели vServer
|
||||
*/
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Каждая кнопка отдельно с возможностью настройки
|
||||
messageUp.send('#add-site-btn', '🌐 Страница добавления нового сайта в разработке', 'warning');
|
||||
messageUp.send('#add-cert-btn', '🔒 Страница добавления SSL-сертификата в разработке', 'warning');
|
||||
messageUp.send('.btn-icon', '⚙️ Функция настроек в разработке', 'warning');
|
||||
messageUp.send('.show-all-btn', '📋 Полный список в разработке', 'warning');
|
||||
});
|
||||
90
Backend/admin/html/assets/js/json_loader.js
Normal file
90
Backend/admin/html/assets/js/json_loader.js
Normal file
@@ -0,0 +1,90 @@
|
||||
// Универсальный класс для загрузки JSON данных
|
||||
class JSONLoader {
|
||||
constructor(config) {
|
||||
this.url = config.url;
|
||||
this.container = config.container;
|
||||
this.requiredFields = config.requiredFields || [];
|
||||
this.displayTemplate = config.displayTemplate;
|
||||
this.errorMessage = config.errorMessage || 'Ошибка загрузки данных';
|
||||
}
|
||||
|
||||
// Загрузка данных
|
||||
async load() {
|
||||
try {
|
||||
const response = await fetch(this.url);
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Проверяем структуру данных
|
||||
if (!this.validateData(data)) {
|
||||
throw new Error('Неверная структура данных');
|
||||
}
|
||||
|
||||
this.display(data);
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки:', error);
|
||||
this.displayError();
|
||||
}
|
||||
}
|
||||
|
||||
// Простая проверка обязательных полей
|
||||
validateData(data) {
|
||||
if (!Array.isArray(data)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (let item of data) {
|
||||
for (let field of this.requiredFields) {
|
||||
if (!item.hasOwnProperty(field)) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// Отображение данных по шаблону
|
||||
display(data) {
|
||||
const container = document.querySelector(this.container);
|
||||
container.innerHTML = '';
|
||||
|
||||
data.forEach(item => {
|
||||
let html;
|
||||
|
||||
// Если шаблон - функция, вызываем её
|
||||
if (typeof this.displayTemplate === 'function') {
|
||||
html = this.displayTemplate(item);
|
||||
} else {
|
||||
// Иначе используем строковый шаблон с заменой
|
||||
html = this.displayTemplate;
|
||||
for (let key in item) {
|
||||
const value = item[key];
|
||||
html = html.replace(new RegExp(`{{${key}}}`, 'g'), value);
|
||||
}
|
||||
}
|
||||
|
||||
container.innerHTML += html;
|
||||
});
|
||||
}
|
||||
|
||||
// Отображение ошибки
|
||||
displayError() {
|
||||
const container = document.querySelector(this.container);
|
||||
if (container) {
|
||||
container.innerHTML = `
|
||||
<div style="text-align: center; padding: 2rem; color: #ff6b6b;">
|
||||
⚠️ ${this.errorMessage}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Перезагрузка данных
|
||||
reload() {
|
||||
this.load();
|
||||
}
|
||||
}
|
||||
27
Backend/admin/html/assets/js/menu_loader.js
Normal file
27
Backend/admin/html/assets/js/menu_loader.js
Normal file
@@ -0,0 +1,27 @@
|
||||
// Функция для создания HTML пункта меню
|
||||
function getMenuTemplate(item) {
|
||||
const isActive = item.active ? 'active' : '';
|
||||
|
||||
return `
|
||||
<li class="nav-item ${isActive}">
|
||||
<a href="${item.url}" class="nav-link">
|
||||
<span class="nav-icon">${item.icon}</span>
|
||||
<span class="nav-text">${item.name}</span>
|
||||
</a>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
|
||||
// Создаем загрузчик меню
|
||||
const menuLoader = new JSONLoader({
|
||||
url: '/json/menu.json',
|
||||
container: '.nav-menu',
|
||||
requiredFields: ['name', 'icon', 'url', 'active'],
|
||||
displayTemplate: getMenuTemplate,
|
||||
errorMessage: 'Ошибка загрузки меню'
|
||||
});
|
||||
|
||||
// Запуск при загрузке страницы
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
menuLoader.load();
|
||||
});
|
||||
153
Backend/admin/html/assets/js/metrics_loader.js
Normal file
153
Backend/admin/html/assets/js/metrics_loader.js
Normal file
@@ -0,0 +1,153 @@
|
||||
// Функция для создания HTML карточки метрики
|
||||
function createMetricCard(type, icon, name, data) {
|
||||
// Используем уже вычисленный процент для всех типов
|
||||
let value = Math.round(data.usage || data.usage_percent || 0);
|
||||
const progressClass = type === 'cpu' ? 'cpu-progress' :
|
||||
type === 'ram' ? 'ram-progress' : 'disk-progress';
|
||||
|
||||
// Определяем детали для каждого типа
|
||||
let details = '';
|
||||
if (type === 'cpu') {
|
||||
details = `
|
||||
<span class="metric-info">${data.model_name || 'CPU'}</span>
|
||||
<span class="metric-frequency">${data.frequency || ''} MHz</span>
|
||||
`;
|
||||
} else if (type === 'ram') {
|
||||
const usedGb = parseFloat(data.used_gb) || 0;
|
||||
details = `
|
||||
<span class="metric-info">${usedGb.toFixed(1)} GB из ${data.total_gb || 0} GB</span>
|
||||
<span class="metric-type">${data.type || 'RAM'}</span>
|
||||
`;
|
||||
} else if (type === 'disk') {
|
||||
const usedGb = parseFloat(data.used_gb) || 0;
|
||||
const freeGb = parseFloat(data.free_gb) || 0;
|
||||
details = `
|
||||
<span class="metric-info">Занято: ${usedGb.toFixed(0)} GB : Свободно: ${freeGb.toFixed(0)} GB</span>
|
||||
<span class="metric-speed">Размер: ${data.total_gb || 0}</span>
|
||||
`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="metric-card ${type}">
|
||||
<div class="metric-icon-wrapper">
|
||||
<span class="metric-icon">${icon}</span>
|
||||
</div>
|
||||
<div class="metric-content">
|
||||
<div class="metric-header">
|
||||
<span class="metric-name">${name}</span>
|
||||
<span class="metric-value">${value}%</span>
|
||||
</div>
|
||||
<div class="metric-progress-bar">
|
||||
<div class="metric-progress ${progressClass}" style="width: ${value}%"></div>
|
||||
</div>
|
||||
<div class="metric-details">
|
||||
${details}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Функция для создания всех метрик
|
||||
function renderMetrics(data) {
|
||||
const container = document.querySelector('.metrics-grid');
|
||||
if (!container) return;
|
||||
|
||||
const html = [
|
||||
createMetricCard('cpu', '🖥️', 'Процессор', data.cpu || {}),
|
||||
createMetricCard('ram', '💾', 'Оперативная память', data.memory || {}),
|
||||
createMetricCard('disk', '💿', data.disk.type, data.disk || {})
|
||||
].join('');
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
// Данные по умолчанию (будут заменены данными из API)
|
||||
const staticData = {
|
||||
cpu: {
|
||||
usage: 0,
|
||||
model_name: 'Загрузка...',
|
||||
frequency: '0',
|
||||
cores: '0'
|
||||
},
|
||||
memory: {
|
||||
usage_percent: 0,
|
||||
used_gb: 0,
|
||||
total_gb: 0,
|
||||
type: 'Загрузка...'
|
||||
},
|
||||
disk: {
|
||||
usage_percent: 0,
|
||||
used_gb: 0,
|
||||
free_gb: 0,
|
||||
total_gb: '0',
|
||||
type: 'Загрузка...',
|
||||
read_speed: '520 MB/s'
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
// Функция обновления метрик
|
||||
async function updateMetrics() {
|
||||
try {
|
||||
const response = await fetch('/api/metrics');
|
||||
const data = await response.json();
|
||||
|
||||
// Обновляем все данные из API
|
||||
if (data.cpu_name) staticData.cpu.model_name = data.cpu_name;
|
||||
if (data.cpu_ghz) staticData.cpu.frequency = data.cpu_ghz;
|
||||
if (data.cpu_cores) staticData.cpu.cores = data.cpu_cores;
|
||||
if (data.cpu_usage) staticData.cpu.usage = parseInt(data.cpu_usage);
|
||||
|
||||
if (data.disk_name) staticData.disk.type = data.disk_name;
|
||||
if (data.disk_size) staticData.disk.total_gb = data.disk_size;
|
||||
if (data.disk_used) staticData.disk.used_gb = parseFloat(data.disk_used);
|
||||
if (data.disk_free) staticData.disk.free_gb = parseFloat(data.disk_free);
|
||||
|
||||
if (data.ram_using) staticData.memory.used_gb = parseFloat(data.ram_using);
|
||||
if (data.ram_total) staticData.memory.total_gb = parseFloat(data.ram_total);
|
||||
|
||||
// Вычисляем процент использования памяти
|
||||
if (staticData.memory.used_gb && staticData.memory.total_gb) {
|
||||
staticData.memory.usage_percent = Math.round((staticData.memory.used_gb / staticData.memory.total_gb) * 100);
|
||||
}
|
||||
|
||||
// Вычисляем процент использования диска
|
||||
if (staticData.disk.used_gb && staticData.disk.total_gb) {
|
||||
const used = parseFloat(staticData.disk.used_gb.toString().replace(' GB', '')) || 0;
|
||||
const total = parseFloat(staticData.disk.total_gb.toString().replace(' GB', '')) || 1;
|
||||
staticData.disk.usage_percent = Math.round((used / total) * 100);
|
||||
}
|
||||
|
||||
// Обновляем uptime
|
||||
if (data.server_uptime) {
|
||||
const uptimeElement = document.querySelector('.uptime-value');
|
||||
if (uptimeElement) {
|
||||
uptimeElement.textContent = data.server_uptime;
|
||||
}
|
||||
}
|
||||
|
||||
// Перерисовываем только метрики
|
||||
renderMetrics(staticData);
|
||||
} catch (error) {
|
||||
console.error('Ошибка обновления метрик:', error);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Показываем статические данные когда DOM загружен
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
renderMetrics(staticData);
|
||||
|
||||
// Сразу загружаем актуальные данные
|
||||
updateMetrics();
|
||||
|
||||
// Обновляем метрики каждые 5 секунд
|
||||
setInterval(updateMetrics, 5000);
|
||||
});
|
||||
|
||||
|
||||
|
||||
180
Backend/admin/html/assets/js/server_status.js
Normal file
180
Backend/admin/html/assets/js/server_status.js
Normal file
@@ -0,0 +1,180 @@
|
||||
// Функция для получения HTML шаблона сервера
|
||||
var patch_json = '/json/server_status.json';
|
||||
|
||||
function getServerTemplate(server) {
|
||||
// Определяем класс и текст статуса
|
||||
let statusClass, statusText;
|
||||
switch(server.Status.toLowerCase()) {
|
||||
case 'running':
|
||||
statusClass = 'running';
|
||||
statusText = 'Работает';
|
||||
break;
|
||||
case 'stopped':
|
||||
statusClass = 'stopped';
|
||||
statusText = 'Остановлен';
|
||||
break;
|
||||
case 'starting':
|
||||
statusClass = 'starting';
|
||||
statusText = 'Запускается';
|
||||
break;
|
||||
case 'stopping':
|
||||
statusClass = 'stopping';
|
||||
statusText = 'Завершается';
|
||||
break;
|
||||
default:
|
||||
statusClass = 'stopped';
|
||||
statusText = `Неизвестно (${server.Status})`;
|
||||
}
|
||||
|
||||
// Определяем иконку и состояние кнопки
|
||||
let buttonIcon, buttonDisabled, buttonClass;
|
||||
|
||||
if (statusClass === 'starting' || statusClass === 'stopping') {
|
||||
buttonIcon = '⏳';
|
||||
buttonDisabled = 'disabled';
|
||||
buttonClass = 'btn-icon disabled';
|
||||
} else if (statusClass === 'running') {
|
||||
buttonIcon = '⏹️';
|
||||
buttonDisabled = '';
|
||||
buttonClass = 'btn-icon';
|
||||
} else {
|
||||
buttonIcon = '▶️';
|
||||
buttonDisabled = '';
|
||||
buttonClass = 'btn-icon';
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="server-item">
|
||||
<div class="server-status ${statusClass}"></div>
|
||||
<div class="server-info">
|
||||
<div class="server-name">${server.NameService}</div>
|
||||
<div class="server-details">Port ${server.Port} - ${statusText}</div>
|
||||
</div>
|
||||
<div class="server-actions">
|
||||
<button class="${buttonClass}" onclick="toggleServer('${server.NameService}')" ${buttonDisabled}>
|
||||
${buttonIcon}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Создаем загрузчик серверов
|
||||
const serversLoader = new JSONLoader({
|
||||
url: patch_json,
|
||||
container: '.servers-grid',
|
||||
requiredFields: ['NameService', 'Port', 'Status'],
|
||||
displayTemplate: getServerTemplate,
|
||||
errorMessage: 'Ошибка загрузки статуса серверов'
|
||||
});
|
||||
|
||||
// Функция для показа временного статуса
|
||||
function showTempStatus(serviceName, tempStatus) {
|
||||
// Ищем элемент этого сервера на странице
|
||||
const serverElements = document.querySelectorAll('.server-item');
|
||||
serverElements.forEach(element => {
|
||||
const nameElement = element.querySelector('.server-name');
|
||||
if (nameElement && nameElement.textContent === serviceName) {
|
||||
// Создаем временный объект сервера с новым статусом
|
||||
fetch(patch_json)
|
||||
.then(response => response.json())
|
||||
.then(servers => {
|
||||
const server = servers.find(s => s.NameService === serviceName);
|
||||
if (server) {
|
||||
const tempServer = {...server, Status: tempStatus};
|
||||
// Заменяем только этот элемент
|
||||
element.outerHTML = getServerTemplate(tempServer);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Функция обновления одного сервера
|
||||
function updateSingleServer(serviceName) {
|
||||
fetch(patch_json)
|
||||
.then(response => response.json())
|
||||
.then(servers => {
|
||||
const server = servers.find(s => s.NameService === serviceName);
|
||||
if (server) {
|
||||
// Ищем элемент этого сервера на странице
|
||||
const serverElements = document.querySelectorAll('.server-item');
|
||||
serverElements.forEach(element => {
|
||||
const nameElement = element.querySelector('.server-name');
|
||||
if (nameElement && nameElement.textContent === serviceName) {
|
||||
// Заменяем только этот элемент
|
||||
element.outerHTML = getServerTemplate(server);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Универсальная функция управления сервером
|
||||
function serverAction(serviceName, startEndpoint, stopEndpoint, updateDelayMs) {
|
||||
// Получаем текущий статус сервера из JSON
|
||||
fetch(patch_json)
|
||||
.then(response => response.json())
|
||||
.then(servers => {
|
||||
const server = servers.find(s => s.NameService === serviceName);
|
||||
|
||||
// Блокируем действие если сервер в процессе изменения
|
||||
if (server.Status === 'starting' || server.Status === 'stopping') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (server.Status === 'running') {
|
||||
// Сервер запущен - останавливаем
|
||||
showTempStatus(serviceName, 'stopping');
|
||||
fetch(stopEndpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(() => {
|
||||
setTimeout(() => {
|
||||
updateSingleServer(serviceName); // Обновляем только этот сервер
|
||||
}, updateDelayMs);
|
||||
});
|
||||
} else {
|
||||
// Сервер остановлен - запускаем
|
||||
showTempStatus(serviceName, 'starting');
|
||||
fetch(startEndpoint, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
}).then(() => {
|
||||
setTimeout(() => {
|
||||
updateSingleServer(serviceName); // Обновляем только этот сервер
|
||||
}, updateDelayMs);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Функция для переключения сервера
|
||||
function toggleServer(serviceName) {
|
||||
|
||||
if (serviceName === 'MySQL Server') {
|
||||
serverAction('MySQL Server', '/service/MySql_Start', '/service/MySql_Stop', 2000);
|
||||
}
|
||||
|
||||
if (serviceName === 'HTTP Server') {
|
||||
serverAction('HTTP Server', '/service/Http_Start', '/service/Http_Stop', 2000);
|
||||
}
|
||||
|
||||
if (serviceName === 'HTTPS Server') {
|
||||
serverAction('HTTPS Server', '/service/Https_Start', '/service/Https_Stop', 2000);
|
||||
}
|
||||
|
||||
if (serviceName === 'PHP Server') {
|
||||
serverAction('PHP Server', '/service/Php_Start', '/service/Php_Stop', 2000);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Запуск при загрузке страницы
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
serversLoader.load();
|
||||
});
|
||||
55
Backend/admin/html/assets/js/site_list.js
Normal file
55
Backend/admin/html/assets/js/site_list.js
Normal file
@@ -0,0 +1,55 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const sitesList = document.querySelector('.sites-list');
|
||||
if (sitesList) {
|
||||
fetch('/service/Site_List')
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
const sites = data.sites || [];
|
||||
|
||||
// Генерируем статистику
|
||||
updateSiteStats(sites);
|
||||
|
||||
// Отображаем список сайтов
|
||||
sitesList.innerHTML = sites.map(site => `
|
||||
<div class="site-item">
|
||||
<div class="site-status ${site.status === 'active' ? 'active' : 'inactive'}"></div>
|
||||
<div class="site-info">
|
||||
<span class="site-name">${site.host}</span>
|
||||
<span class="site-details">${site.type.toUpperCase()} • Протокол</span>
|
||||
</div>
|
||||
<div class="site-actions">
|
||||
<button class="btn-icon" title="Настройки">⚙️</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function updateSiteStats(sites) {
|
||||
const totalSites = sites.length;
|
||||
const activeSites = sites.filter(site => site.status === 'active').length;
|
||||
const inactiveSites = totalSites - activeSites;
|
||||
|
||||
// Находим контейнер статистики
|
||||
const statsRow = document.querySelector('.stats-row');
|
||||
|
||||
// Создаём всю статистику через JavaScript
|
||||
statsRow.innerHTML = `
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">${totalSites}</div>
|
||||
<div class="stat-label">Всего сайтов</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number active-stat">${activeSites}</div>
|
||||
<div class="stat-label">Активных</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number inactive-stat">${inactiveSites}</div>
|
||||
<div class="stat-label">Неактивных</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
201
Backend/admin/html/assets/js/tools.js
Normal file
201
Backend/admin/html/assets/js/tools.js
Normal file
@@ -0,0 +1,201 @@
|
||||
/* Класс для показа уведомлений */
|
||||
class MessageUp {
|
||||
// Время автозакрытия уведомлений (в миллисекундах)
|
||||
static autoCloseTime = 3000;
|
||||
|
||||
// Типы уведомлений (легко редактировать тут)
|
||||
static TYPES = {
|
||||
info: {
|
||||
borderColor: 'rgb(52, 152, 219)',
|
||||
background: 'linear-gradient(135deg, rgb(30, 50, 70), rgb(35, 55, 75))'
|
||||
},
|
||||
success: {
|
||||
borderColor: 'rgb(46, 204, 113)',
|
||||
background: 'linear-gradient(135deg, rgb(25, 55, 35), rgb(30, 60, 40))'
|
||||
},
|
||||
warning: {
|
||||
borderColor: 'rgb(243, 156, 18)',
|
||||
background: 'linear-gradient(135deg, rgb(60, 45, 20), rgb(65, 50, 25))'
|
||||
},
|
||||
error: {
|
||||
borderColor: 'rgb(231, 76, 60)',
|
||||
background: 'linear-gradient(135deg, rgb(60, 25, 25), rgb(65, 30, 30))'
|
||||
}
|
||||
};
|
||||
|
||||
constructor() {
|
||||
this.addStyles();
|
||||
}
|
||||
|
||||
/* Показать уведомление */
|
||||
show(message, type = 'info') {
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `message-up message-up-${type}`;
|
||||
|
||||
notification.innerHTML = `
|
||||
<div class="message-content">
|
||||
<span class="message-text">${message}</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Вычисляем позицию для нового уведомления
|
||||
const existingNotifications = document.querySelectorAll('.message-up');
|
||||
let topPosition = 2; // начальная позиция в rem
|
||||
|
||||
existingNotifications.forEach(existing => {
|
||||
const rect = existing.getBoundingClientRect();
|
||||
const currentTop = parseFloat(existing.style.top) || 2;
|
||||
const height = rect.height / 16; // переводим px в rem (примерно)
|
||||
topPosition = Math.max(topPosition, currentTop + height + 1); // добавляем отступ
|
||||
});
|
||||
|
||||
notification.style.top = `${topPosition}rem`;
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Показываем с анимацией
|
||||
setTimeout(() => {
|
||||
notification.classList.add('message-up-show');
|
||||
}, 10);
|
||||
|
||||
// Автоматическое закрытие и удаление
|
||||
if (MessageUp.autoCloseTime > 0) {
|
||||
setTimeout(() => {
|
||||
if (notification && notification.parentNode) {
|
||||
notification.classList.remove('message-up-show');
|
||||
notification.classList.add('message-up-hide');
|
||||
|
||||
setTimeout(() => {
|
||||
if (notification.parentNode) {
|
||||
notification.remove();
|
||||
// Пересчитываем позиции оставшихся уведомлений
|
||||
this.repositionNotifications();
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
}, MessageUp.autoCloseTime);
|
||||
}
|
||||
}
|
||||
|
||||
/* Пересчитать позиции всех уведомлений */
|
||||
repositionNotifications() {
|
||||
const notifications = document.querySelectorAll('.message-up');
|
||||
let currentTop = 2; // начальная позиция
|
||||
|
||||
notifications.forEach(notification => {
|
||||
notification.style.transition = 'all 0.3s ease';
|
||||
notification.style.top = `${currentTop}rem`;
|
||||
|
||||
const rect = notification.getBoundingClientRect();
|
||||
const height = rect.height / 16; // переводим px в rem
|
||||
currentTop += height + 1; // добавляем отступ
|
||||
});
|
||||
}
|
||||
|
||||
/* Показать сообщение напрямую или привязать к элементам */
|
||||
send(messageOrSelector, typeOrMessage = 'info', type = 'info') {
|
||||
// Если первый параметр строка и нет других элементов на странице с таким селектором
|
||||
// то показываем сообщение напрямую
|
||||
if (typeof messageOrSelector === 'string' &&
|
||||
document.querySelectorAll(messageOrSelector).length === 0) {
|
||||
// Показываем сообщение напрямую
|
||||
this.show(messageOrSelector, typeOrMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
// Иначе привязываем к элементам (старый способ)
|
||||
this.bindToElements(messageOrSelector, typeOrMessage, type);
|
||||
}
|
||||
|
||||
/* Привязать уведомления к элементам */
|
||||
bindToElements(selector, message = 'Страница в разработке', type = 'info') {
|
||||
document.querySelectorAll(selector).forEach(element => {
|
||||
element.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// Вызываем нужный тип уведомления
|
||||
window.messageUp.show(message, type);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* Добавить стили для уведомлений */
|
||||
addStyles() {
|
||||
if (document.querySelector('#message-up-styles')) return;
|
||||
|
||||
const cfg = MessageUp.TYPES;
|
||||
|
||||
// Генерируем стили для типов уведомлений
|
||||
const typeStyles = Object.entries(cfg).map(([type, style]) => `
|
||||
.message-up-${type} {
|
||||
border-color: ${style.borderColor};
|
||||
background: ${style.background};
|
||||
}
|
||||
`).join('');
|
||||
|
||||
const style = document.createElement('style');
|
||||
style.id = 'message-up-styles';
|
||||
style.textContent = `
|
||||
.message-up {
|
||||
position: fixed;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
background: rgb(26, 37, 47);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
color: #ecf0f1;
|
||||
font-size: 0.9rem;
|
||||
border: 2px solid;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
font-family: 'Segoe UI', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.message-up-show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.message-up-hide {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
${typeStyles}
|
||||
|
||||
.message-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
flex: 1;
|
||||
line-height: 1.4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.message-up {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
left: 1rem;
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Создаем глобальный экземпляр
|
||||
window.messageUp = new MessageUp();
|
||||
Reference in New Issue
Block a user