Инициализация проекта
Стабильный рабочий проект.
This commit is contained in:
Falknat
21
Backend/admin/embed.go
Normal file
21
Backend/admin/embed.go
Normal file
@@ -0,0 +1,21 @@
|
||||
package admin
|
||||
|
||||
import (
|
||||
"embed"
|
||||
"io/fs"
|
||||
"os"
|
||||
)
|
||||
|
||||
//go:embed html
|
||||
var AdminHTML embed.FS
|
||||
|
||||
// Флаг для переключения между embed и файловой системой
|
||||
var UseEmbedded bool = true
|
||||
|
||||
// Получает файловую систему в зависимости от флага
|
||||
func GetFileSystem() fs.FS {
|
||||
if UseEmbedded {
|
||||
return AdminHTML
|
||||
}
|
||||
return os.DirFS("Backend/admin/")
|
||||
}
|
||||
46
Backend/admin/go/admin_server.go
Normal file
46
Backend/admin/go/admin_server.go
Normal file
@@ -0,0 +1,46 @@
|
||||
package admin
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
command "vServer/Backend/admin/go/command"
|
||||
config "vServer/Backend/config"
|
||||
tools "vServer/Backend/tools"
|
||||
)
|
||||
|
||||
var adminServer *http.Server
|
||||
|
||||
// Запуск Admin сервера
|
||||
func StartAdmin() {
|
||||
|
||||
// Получаем значения из конфига во время выполнения
|
||||
port_admin := config.ConfigData.Soft_Settings.Admin_port
|
||||
host_admin := config.ConfigData.Soft_Settings.Admin_host
|
||||
|
||||
if tools.Port_check("ADMIN", host_admin, port_admin) {
|
||||
return
|
||||
}
|
||||
|
||||
// Создаем оптимизированный мультиплексор для админ сервера
|
||||
mux := http.NewServeMux()
|
||||
|
||||
// Регистрируем специализированные обработчики (быстрая маршрутизация)
|
||||
mux.HandleFunc("/api/", command.ApiHandler) // API эндпоинты
|
||||
mux.HandleFunc("/json/", command.JsonHandler) // JSON данные
|
||||
mux.HandleFunc("/service/", command.ServiceHandler) // Сервисные команды POST
|
||||
mux.HandleFunc("/", command.StaticHandler) // Статические файлы
|
||||
|
||||
// Создаем Admin сервер (только localhost для безопасности)
|
||||
adminServer = &http.Server{
|
||||
Addr: host_admin + ":" + port_admin,
|
||||
Handler: mux,
|
||||
}
|
||||
|
||||
tools.Logs_file(0, "ADMIN", "🛠️ Admin панель запущена на порту "+port_admin, "logs_http.log", true)
|
||||
|
||||
if err := adminServer.ListenAndServe(); err != nil {
|
||||
// Игнорируем нормальную ошибку при остановке сервера
|
||||
if err.Error() != "http: Server closed" {
|
||||
tools.Logs_file(1, "ADMIN", "❌ Ошибка запуска админ сервера: "+err.Error(), "logs_http.log", true)
|
||||
}
|
||||
}
|
||||
}
|
||||
122
Backend/admin/go/command/commands.go
Normal file
122
Backend/admin/go/command/commands.go
Normal file
@@ -0,0 +1,122 @@
|
||||
package command
|
||||
|
||||
import (
|
||||
"io/fs"
|
||||
"net/http"
|
||||
"path/filepath"
|
||||
"strings"
|
||||
webserver "vServer/Backend/WebServer"
|
||||
admin "vServer/Backend/admin"
|
||||
json "vServer/Backend/admin/go/json"
|
||||
)
|
||||
|
||||
func SecurePost(w http.ResponseWriter, r *http.Request) bool {
|
||||
// Проверяем, что запрос POST (не GET из браузера)
|
||||
|
||||
if webserver.Secure_post {
|
||||
|
||||
if r.Method != "POST" {
|
||||
http.Error(w, "Метод не разрешен. Используйте POST", http.StatusMethodNotAllowed)
|
||||
return false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
// API обработчик для /api/*
|
||||
func ApiHandler(w http.ResponseWriter, r *http.Request) {
|
||||
path := r.URL.Path
|
||||
|
||||
switch path {
|
||||
case "/api/metrics":
|
||||
json.GetAllMetrics(w)
|
||||
default:
|
||||
http.NotFound(w, r)
|
||||
}
|
||||
}
|
||||
|
||||
// JSON обработчик для /json/*
|
||||
func JsonHandler(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
path := r.URL.Path
|
||||
|
||||
switch path {
|
||||
case "/json/server_status.json":
|
||||
w.Write(json.GetServerStatusJSON())
|
||||
case "/json/menu.json":
|
||||
w.Write(json.GetMenuJSON())
|
||||
default:
|
||||
http.NotFound(w, r)
|
||||
}
|
||||
}
|
||||
|
||||
// Обработчик сервисных команд для /service/*
|
||||
func ServiceHandler(w http.ResponseWriter, r *http.Request) {
|
||||
path := r.URL.Path
|
||||
|
||||
if !SecurePost(w, r) {
|
||||
return
|
||||
}
|
||||
|
||||
if SiteList(w, r, path) {
|
||||
return
|
||||
}
|
||||
|
||||
if site_add(w, path) {
|
||||
return
|
||||
}
|
||||
|
||||
if Service_Run(w, r, path) {
|
||||
return
|
||||
}
|
||||
http.NotFound(w, r)
|
||||
}
|
||||
|
||||
// Обработчик статических файлов из embed
|
||||
func StaticHandler(w http.ResponseWriter, r *http.Request) {
|
||||
path := r.URL.Path
|
||||
|
||||
// Убираем ведущий слэш
|
||||
path = strings.TrimPrefix(path, "/")
|
||||
|
||||
// Если пустой путь, показываем index.html
|
||||
if path == "" {
|
||||
path = "html/index.html"
|
||||
} else {
|
||||
path = "html/" + path
|
||||
}
|
||||
|
||||
// Читаем файл из файловой системы (embed или диск)
|
||||
fileSystem := admin.GetFileSystem()
|
||||
content, err := fs.ReadFile(fileSystem, path)
|
||||
if err != nil {
|
||||
http.NotFound(w, r)
|
||||
return
|
||||
}
|
||||
|
||||
// Устанавливаем правильный Content-Type
|
||||
ext := filepath.Ext(path)
|
||||
switch ext {
|
||||
case ".css":
|
||||
w.Header().Set("Content-Type", "text/css")
|
||||
case ".js":
|
||||
w.Header().Set("Content-Type", "application/javascript")
|
||||
case ".json":
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
case ".html":
|
||||
w.Header().Set("Content-Type", "text/html")
|
||||
}
|
||||
|
||||
// Предотвращаем кеширование в режиме разработки (когда UseEmbedded = false)
|
||||
if !admin.UseEmbedded {
|
||||
w.Header().Set("Cache-Control", "no-cache, no-store, must-revalidate")
|
||||
w.Header().Set("Pragma", "no-cache")
|
||||
w.Header().Set("Expires", "0")
|
||||
}
|
||||
|
||||
// Отдаем файл
|
||||
w.Write(content)
|
||||
|
||||
}
|
||||
57
Backend/admin/go/command/service_run.go
Normal file
57
Backend/admin/go/command/service_run.go
Normal file
@@ -0,0 +1,57 @@
|
||||
package command
|
||||
|
||||
import (
|
||||
"net/http"
|
||||
webserver "vServer/Backend/WebServer"
|
||||
json "vServer/Backend/admin/go/json"
|
||||
)
|
||||
|
||||
// Обработчик команд управления серверами
|
||||
func Service_Run(w http.ResponseWriter, r *http.Request, path string) bool {
|
||||
|
||||
switch path {
|
||||
case "/service/MySql_Stop":
|
||||
webserver.StopMySQLServer()
|
||||
json.UpdateServerStatus("MySQL Server", "stopped")
|
||||
return true
|
||||
|
||||
case "/service/MySql_Start":
|
||||
webserver.StartMySQLServer(false)
|
||||
json.UpdateServerStatus("MySQL Server", "running")
|
||||
return true
|
||||
|
||||
case "/service/Http_Stop":
|
||||
webserver.StopHTTPServer()
|
||||
json.UpdateServerStatus("HTTP Server", "stopped")
|
||||
return true
|
||||
|
||||
case "/service/Http_Start":
|
||||
go webserver.StartHTTP()
|
||||
json.UpdateServerStatus("HTTP Server", "running")
|
||||
return true
|
||||
|
||||
case "/service/Https_Stop":
|
||||
webserver.StopHTTPSServer()
|
||||
json.UpdateServerStatus("HTTPS Server", "stopped")
|
||||
return true
|
||||
|
||||
case "/service/Https_Start":
|
||||
go webserver.StartHTTPS()
|
||||
json.UpdateServerStatus("HTTPS Server", "running")
|
||||
return true
|
||||
|
||||
case "/service/Php_Start":
|
||||
webserver.PHP_Start()
|
||||
json.UpdateServerStatus("PHP Server", "running")
|
||||
return true
|
||||
|
||||
case "/service/Php_Stop":
|
||||
webserver.PHP_Stop()
|
||||
json.UpdateServerStatus("PHP Server", "stopped")
|
||||
return true
|
||||
|
||||
default:
|
||||
http.NotFound(w, r)
|
||||
return false // Команда не найдена
|
||||
}
|
||||
}
|
||||
269
Backend/admin/go/command/site_list.go
Normal file
269
Backend/admin/go/command/site_list.go
Normal file
@@ -0,0 +1,269 @@
|
||||
package command
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"net/http"
|
||||
"os"
|
||||
"regexp"
|
||||
"strings"
|
||||
"vServer/Backend/config"
|
||||
"vServer/Backend/tools"
|
||||
)
|
||||
|
||||
var entries []os.DirEntry
|
||||
|
||||
func path_www() {
|
||||
|
||||
wwwPath, err := tools.AbsPath("WebServer/www")
|
||||
tools.Error_check(err, "Ошибка получения пути")
|
||||
|
||||
entries, err = os.ReadDir(wwwPath)
|
||||
tools.Error_check(err, "Ошибка чтения директории")
|
||||
|
||||
}
|
||||
|
||||
func site_type(entry os.DirEntry) string {
|
||||
|
||||
certPath, err := tools.AbsPath("WebServer/cert/" + entry.Name())
|
||||
if err == nil {
|
||||
if _, err := os.Stat(certPath); err == nil {
|
||||
return "https"
|
||||
}
|
||||
}
|
||||
return "http"
|
||||
}
|
||||
|
||||
func site_alliace(siteName string) []string {
|
||||
// Получаем абсолютный путь к config.json
|
||||
configPath, err := tools.AbsPath("WebServer/config.json")
|
||||
tools.Error_check(err, "Ошибка получения пути к config.json")
|
||||
|
||||
// Читаем содержимое config.json
|
||||
configData, err := os.ReadFile(configPath)
|
||||
tools.Error_check(err, "Ошибка чтения config.json")
|
||||
|
||||
// Структура для парсинга Site_www
|
||||
type SiteConfig struct {
|
||||
Name string `json:"name"`
|
||||
Host string `json:"host"`
|
||||
Alias []string `json:"alias"`
|
||||
Status string `json:"status"`
|
||||
}
|
||||
type Config struct {
|
||||
SiteWWW []SiteConfig `json:"Site_www"`
|
||||
}
|
||||
|
||||
var config Config
|
||||
err = json.Unmarshal(configData, &config)
|
||||
tools.Error_check(err, "Ошибка парсинга config.json")
|
||||
|
||||
// Ищем алиасы для конкретного сайта
|
||||
for _, site := range config.SiteWWW {
|
||||
if site.Host == siteName {
|
||||
return site.Alias
|
||||
}
|
||||
}
|
||||
|
||||
// Возвращаем пустой массив если сайт не найден
|
||||
return []string{}
|
||||
}
|
||||
|
||||
func site_status(siteName string) string {
|
||||
configPath := "WebServer/config.json"
|
||||
|
||||
// Читаем конфигурационный файл
|
||||
data, err := os.ReadFile(configPath)
|
||||
if err != nil {
|
||||
return "error"
|
||||
}
|
||||
|
||||
// Парсим JSON
|
||||
var config map[string]interface{}
|
||||
if err := json.Unmarshal(data, &config); err != nil {
|
||||
return "error"
|
||||
}
|
||||
|
||||
// Получаем список сайтов
|
||||
siteWww, ok := config["Site_www"].([]interface{})
|
||||
if !ok {
|
||||
return "error"
|
||||
}
|
||||
|
||||
// Ищем сайт по host
|
||||
for _, siteInterface := range siteWww {
|
||||
site, ok := siteInterface.(map[string]interface{})
|
||||
if !ok {
|
||||
continue
|
||||
}
|
||||
|
||||
// Проверяем только по host (имя папки)
|
||||
if host, ok := site["host"].(string); ok && host == siteName {
|
||||
if status, ok := site["status"].(string); ok {
|
||||
return status
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return "inactive"
|
||||
}
|
||||
|
||||
func SiteList(w http.ResponseWriter, r *http.Request, path string) bool {
|
||||
|
||||
switch path {
|
||||
|
||||
case "/service/Site_List":
|
||||
sites := []map[string]interface{}{}
|
||||
|
||||
path_www()
|
||||
|
||||
for _, entry := range entries {
|
||||
if entry.IsDir() {
|
||||
site := map[string]interface{}{
|
||||
"host": entry.Name(),
|
||||
"type": site_type(entry),
|
||||
"aliases": site_alliace(entry.Name()),
|
||||
"status": site_status(entry.Name()),
|
||||
}
|
||||
sites = append(sites, site)
|
||||
}
|
||||
}
|
||||
|
||||
metrics := map[string]interface{}{
|
||||
"sites": sites,
|
||||
}
|
||||
|
||||
data, _ := json.MarshalIndent(metrics, "", " ")
|
||||
w.Write(data)
|
||||
|
||||
return true
|
||||
|
||||
}
|
||||
|
||||
return false
|
||||
|
||||
}
|
||||
|
||||
func addSiteToConfig(siteName string) error {
|
||||
// Получаем абсолютный путь к config.json
|
||||
configPath, err := tools.AbsPath("WebServer/config.json")
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
// Читаем содержимое config.json
|
||||
configData, err := os.ReadFile(configPath)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
// Парсим как общий JSON объект
|
||||
var config map[string]interface{}
|
||||
err = json.Unmarshal(configData, &config)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
// Получаем массив сайтов
|
||||
siteWWW, ok := config["Site_www"].([]interface{})
|
||||
if !ok {
|
||||
siteWWW = []interface{}{}
|
||||
}
|
||||
|
||||
// Создаем новый сайт в том же формате что уже есть
|
||||
newSite := map[string]interface{}{
|
||||
"name": siteName,
|
||||
"host": siteName,
|
||||
"alias": []string{""},
|
||||
"status": "active",
|
||||
}
|
||||
|
||||
// Добавляем новый сайт в массив
|
||||
config["Site_www"] = append(siteWWW, newSite)
|
||||
|
||||
// Сохраняем обновленный конфиг
|
||||
updatedData, err := json.MarshalIndent(config, "", " ")
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
// Делаем массивы алиасов в одну строку
|
||||
re := regexp.MustCompile(`"alias": \[\s+"([^"]*?)"\s+\]`)
|
||||
compactData := re.ReplaceAll(updatedData, []byte(`"alias": ["$1"]`))
|
||||
|
||||
// Исправляем отступы после Site_www
|
||||
dataStr := string(compactData)
|
||||
dataStr = strings.ReplaceAll(dataStr, ` ],
|
||||
"Soft_Settings"`, ` ],
|
||||
|
||||
"Soft_Settings"`)
|
||||
compactData = []byte(dataStr)
|
||||
|
||||
err = os.WriteFile(configPath, compactData, 0644)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
return nil
|
||||
}
|
||||
|
||||
func site_add(w http.ResponseWriter, path string) bool {
|
||||
|
||||
// URL параметры: /service/Site_Add/sitename
|
||||
if strings.HasPrefix(path, "/service/Site_Add/") {
|
||||
siteName := strings.TrimPrefix(path, "/service/Site_Add/")
|
||||
|
||||
if siteName == "" {
|
||||
w.WriteHeader(400)
|
||||
w.Write([]byte(`{"status":"error","message":"Не указано имя сайта в URL"}`))
|
||||
return true
|
||||
}
|
||||
|
||||
wwwPath := "WebServer/www/" + siteName
|
||||
|
||||
// Проверяем существует ли уже такой сайт
|
||||
if _, err := os.Stat(wwwPath); err == nil {
|
||||
w.WriteHeader(409) // Conflict
|
||||
w.Write([]byte(`{"status":"error","message":"Сайт ` + siteName + ` уже существует"}`))
|
||||
return true
|
||||
}
|
||||
|
||||
err := os.MkdirAll(wwwPath, 0755)
|
||||
if err != nil {
|
||||
w.WriteHeader(500)
|
||||
w.Write([]byte(`{"status":"error","message":"Ошибка создания папки сайта"}`))
|
||||
return true
|
||||
}
|
||||
|
||||
// Добавляем сайт в config.json
|
||||
err = addSiteToConfig(siteName)
|
||||
if err != nil {
|
||||
w.WriteHeader(500)
|
||||
w.Write([]byte(`{"status":"error","message":"Ошибка добавления в конфигурацию: ` + err.Error() + `"}`))
|
||||
return true
|
||||
}
|
||||
|
||||
// Создаем папку public_www
|
||||
publicWwwPath := wwwPath + "/public_www"
|
||||
err = os.MkdirAll(publicWwwPath, 0755)
|
||||
if err != nil {
|
||||
w.WriteHeader(500)
|
||||
w.Write([]byte(`{"status":"error","message":"Ошибка создания папки public_www"}`))
|
||||
return true
|
||||
}
|
||||
|
||||
indexFilePath := wwwPath + "/public_www/index.html"
|
||||
indexContent := "Привет друг! Твой сайт создан!"
|
||||
err = os.WriteFile(indexFilePath, []byte(indexContent), 0644)
|
||||
if err != nil {
|
||||
w.WriteHeader(500)
|
||||
w.Write([]byte(`{"status":"error","message":"Ошибка создания index.html: ` + err.Error() + `"}`))
|
||||
return true
|
||||
}
|
||||
|
||||
w.Write([]byte(`{"status":"ok","message":"Сайт ` + siteName + ` успешно создан и добавлен в конфигурацию"}`))
|
||||
config.LoadConfig()
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
45
Backend/admin/go/json/json.go
Normal file
45
Backend/admin/go/json/json.go
Normal file
@@ -0,0 +1,45 @@
|
||||
package json
|
||||
|
||||
import "encoding/json"
|
||||
|
||||
// Данные серверов
|
||||
var ServerStatus = []map[string]interface{}{
|
||||
{"NameService": "HTTP Server", "Port": 80, "Status": "stopped"},
|
||||
{"NameService": "HTTPS Server", "Port": 443, "Status": "stopped"},
|
||||
{"NameService": "PHP Server", "Port": 9000, "Status": "stopped"},
|
||||
{"NameService": "MySQL Server", "Port": 3306, "Status": "stopped"},
|
||||
}
|
||||
|
||||
// Данные меню
|
||||
var MenuData = []map[string]interface{}{
|
||||
{"name": "Dashboard", "icon": "🏠", "url": "#dashboard", "active": true},
|
||||
{"name": "Серверы", "icon": "🖥️", "url": "#servers", "active": false},
|
||||
{"name": "Сайты", "icon": "🌐", "url": "#sites", "active": false},
|
||||
{"name": "SSL Сертификаты", "icon": "🔒", "url": "#certificates", "active": false},
|
||||
{"name": "Файловый менеджер", "icon": "📁", "url": "#files", "active": false},
|
||||
{"name": "Базы данных", "icon": "🗄️", "url": "#databases", "active": false},
|
||||
{"name": "Логи", "icon": "📋", "url": "#logs", "active": false},
|
||||
{"name": "Настройки", "icon": "⚙️", "url": "#settings", "active": false},
|
||||
}
|
||||
|
||||
// Функция обновления статуса сервера
|
||||
func UpdateServerStatus(serviceName, status string) {
|
||||
for i := range ServerStatus {
|
||||
if ServerStatus[i]["NameService"] == serviceName {
|
||||
ServerStatus[i]["Status"] = status
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Получить JSON серверов
|
||||
func GetServerStatusJSON() []byte {
|
||||
data, _ := json.Marshal(ServerStatus)
|
||||
return data
|
||||
}
|
||||
|
||||
// Получить JSON меню
|
||||
func GetMenuJSON() []byte {
|
||||
data, _ := json.Marshal(MenuData)
|
||||
return data
|
||||
}
|
||||
130
Backend/admin/go/json/metrics.go
Normal file
130
Backend/admin/go/json/metrics.go
Normal file
@@ -0,0 +1,130 @@
|
||||
package json
|
||||
|
||||
import (
|
||||
"encoding/json"
|
||||
"net/http"
|
||||
"strings"
|
||||
"time"
|
||||
"vServer/Backend/tools"
|
||||
)
|
||||
|
||||
var CPU_NAME string
|
||||
var CPU_GHz string
|
||||
var CPU_Cores string
|
||||
var CPU_Using string
|
||||
var Disk_Size string
|
||||
var Disk_Free string
|
||||
var Disk_Used string
|
||||
var Disk_Name string
|
||||
var RAM_Using string
|
||||
var RAM_Total string
|
||||
|
||||
// Инициализация при запуске пакета
|
||||
func init() {
|
||||
// Загружаем статичные данные один раз при старте
|
||||
UpdateMetrics()
|
||||
// Загружаем динамические данные в фоне
|
||||
go updateMetricsBackground()
|
||||
}
|
||||
|
||||
func UpdateMetrics() {
|
||||
commands := []string{
|
||||
`$name = (Get-WmiObject Win32_DiskDrive | Where-Object { $_.Index -eq (Get-WmiObject Win32_DiskPartition | Where-Object { $_.DeviceID -eq ((Get-WmiObject Win32_LogicalDiskToPartition | Where-Object { $_.Dependent -match "C:" }).Antecedent -split '"')[1] }).DiskIndex }).Model`,
|
||||
`$size = "{0} GB" -f [math]::Round(((Get-PSDrive -Name C).Used + (Get-PSDrive -Name C).Free) / 1GB)`,
|
||||
"$cpuInfo = Get-CimInstance Win32_Processor",
|
||||
"$cpuCores = $cpuInfo.NumberOfCores",
|
||||
"$cpuName = $cpuInfo.Name",
|
||||
`$ram_total = [math]::Round((Get-CimInstance Win32_ComputerSystem).TotalPhysicalMemory / 1GB, 2)`,
|
||||
"Write-Output \"$cpuName|$cpuCores|$name|$size|$ram_total\"",
|
||||
}
|
||||
|
||||
// Выполняем команды и получаем результат
|
||||
result := tools.RunPersistentScript(commands)
|
||||
|
||||
// Парсим результат для статичных данных
|
||||
parts := strings.Split(result, "|")
|
||||
if len(parts) >= 4 {
|
||||
cpuName := strings.TrimSpace(parts[0])
|
||||
cpuCores := strings.TrimSpace(parts[1])
|
||||
diskName := strings.TrimSpace(parts[2])
|
||||
diskSize := strings.TrimSpace(parts[3])
|
||||
ramTotal := strings.TrimSpace(parts[4])
|
||||
|
||||
// Обновляем глобальные переменные
|
||||
CPU_NAME = cpuName
|
||||
CPU_Cores = cpuCores
|
||||
Disk_Name = diskName
|
||||
Disk_Size = diskSize
|
||||
RAM_Total = ramTotal
|
||||
}
|
||||
}
|
||||
|
||||
// Фоновое обновление динамических метрик (внутреннее)
|
||||
func updateMetricsBackground() {
|
||||
|
||||
updateDynamicMetrics := func() {
|
||||
commands := []string{
|
||||
"$cpuInfo = Get-CimInstance Win32_Processor",
|
||||
"$cpuGHz = $cpuInfo.MaxClockSpeed",
|
||||
"$cpuUsage = $cpuInfo.LoadPercentage",
|
||||
`$used = "{0} GB" -f [math]::Round(((Get-PSDrive -Name C).Used / 1GB))`,
|
||||
`$free = "{0} GB" -f [math]::Round(((Get-PSDrive -Name C).Free / 1GB))`,
|
||||
`$ram_using = [math]::Round((Get-CimInstance Win32_OperatingSystem | % {($_.TotalVisibleMemorySize - $_.FreePhysicalMemory) / 1MB}), 2)`,
|
||||
"Write-Output \"$cpuGHz|$cpuUsage|$used|$free|$ram_using\"",
|
||||
}
|
||||
|
||||
// Один запуск PowerShell для динамических команд!
|
||||
result := tools.RunPersistentScript(commands)
|
||||
|
||||
// Парсим результат для динамических данных
|
||||
parts := strings.Split(result, "|")
|
||||
if len(parts) >= 4 {
|
||||
cpuGHz := strings.TrimSpace(parts[0])
|
||||
cpuUsage := strings.TrimSpace(parts[1])
|
||||
diskUsed := strings.TrimSpace(parts[2])
|
||||
diskFree := strings.TrimSpace(parts[3])
|
||||
ramUsing := strings.TrimSpace(parts[4])
|
||||
// Обновляем глобальные переменные
|
||||
CPU_GHz = cpuGHz
|
||||
CPU_Using = cpuUsage
|
||||
Disk_Used = diskUsed
|
||||
Disk_Free = diskFree
|
||||
RAM_Using = ramUsing
|
||||
}
|
||||
}
|
||||
|
||||
// Выполняем сразу при запуске
|
||||
updateDynamicMetrics()
|
||||
|
||||
// Затем каждые 5 секунд
|
||||
for range time.NewTicker(5 * time.Second).C {
|
||||
updateDynamicMetrics()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Получить JSON системных метрик
|
||||
func GetAllMetrics(w http.ResponseWriter) {
|
||||
w.Header().Set("Content-Type", "application/json")
|
||||
w.Write(GetMetricsJSON())
|
||||
}
|
||||
|
||||
// Получить JSON метрик
|
||||
func GetMetricsJSON() []byte {
|
||||
metrics := map[string]interface{}{
|
||||
"cpu_name": CPU_NAME,
|
||||
"cpu_ghz": CPU_GHz,
|
||||
"cpu_cores": CPU_Cores,
|
||||
"cpu_usage": CPU_Using,
|
||||
"disk_name": Disk_Name,
|
||||
"disk_size": Disk_Size,
|
||||
"disk_used": Disk_Used,
|
||||
"disk_free": Disk_Free,
|
||||
"ram_using": RAM_Using,
|
||||
"ram_total": RAM_Total,
|
||||
"server_uptime": tools.ServerUptime("get"),
|
||||
}
|
||||
|
||||
data, _ := json.Marshal(metrics)
|
||||
return data
|
||||
}
|
||||
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();
|
||||
225
Backend/admin/html/index.html
Normal file
225
Backend/admin/html/index.html
Normal file
@@ -0,0 +1,225 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>vServer - Админ панель</title>
|
||||
|
||||
<!-- CSS файлы -->
|
||||
<link rel="stylesheet" href="assets/css/main.css">
|
||||
<link rel="stylesheet" href="assets/css/navigation.css">
|
||||
<link rel="stylesheet" href="assets/css/dashboard.css">
|
||||
<link rel="stylesheet" href="assets/css/system-metrics.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Фоновые частицы -->
|
||||
<div class="floating-particles">
|
||||
<div class="particle" style="width: 18px; height: 18px; top: 15%; left: 10%; animation-delay: 0s;"></div>
|
||||
<div class="particle" style="width: 14px; height: 14px; top: 65%; left: 85%; animation-delay: 3s;"></div>
|
||||
<div class="particle" style="width: 10px; height: 10px; top: 85%; left: 20%; animation-delay: 6s;"></div>
|
||||
<div class="particle" style="width: 22px; height: 22px; top: 25%; left: 75%; animation-delay: 2s;"></div>
|
||||
<div class="particle" style="width: 12px; height: 12px; top: 75%; left: 50%; animation-delay: 4s;"></div>
|
||||
<div class="particle" style="width: 16px; height: 16px; top: 40%; left: 15%; animation-delay: 1s;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Основной контейнер -->
|
||||
<div class="admin-container">
|
||||
<!-- Навигация -->
|
||||
<nav class="admin-nav">
|
||||
<div class="nav-header">
|
||||
<div class="logo">vServer</div>
|
||||
<div class="logo-subtitle">Админ панель</div>
|
||||
</div>
|
||||
|
||||
<ul class="nav-menu">
|
||||
<!-- Меню загружается из JSON -->
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Основной контент -->
|
||||
<main class="admin-main">
|
||||
|
||||
<header class="section-header">
|
||||
<h1 class="section-title">Панель Управления</h1>
|
||||
<div class="status-indicator">
|
||||
<div class="status-dot"></div>
|
||||
<span class="status-text">Сервер работает </span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Системная панель метрик -->
|
||||
<div class="system-panel">
|
||||
<div class="system-panel-header">
|
||||
<h2 class="system-title">
|
||||
<span class="system-icon">⚡</span>
|
||||
Системные ресурсы
|
||||
</h2>
|
||||
<div class="system-uptime">
|
||||
<div class="uptime-label">Время работы</div>
|
||||
<div class="uptime-value"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metrics-grid">
|
||||
<!-- Метрики загружаются динамически через JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
|
||||
<!-- Статус серверов -->
|
||||
<div class="dashboard-card full-width">
|
||||
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="card-icon">🖥️</span>
|
||||
Статус серверов
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-content">
|
||||
<div class="servers-grid">
|
||||
<!-- Здесь будут статусы серверов -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Сайты -->
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="card-icon">🌐</span>
|
||||
Сайты
|
||||
</h2>
|
||||
<button class="btn-primary" id="add-site-btn">
|
||||
<span class="btn-plus">+</span>Новый сайт
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="stats-row">
|
||||
<!-- Статистика генерируется через JavaScript -->
|
||||
</div>
|
||||
|
||||
<div class="sites-preview">
|
||||
<div class="preview-header">
|
||||
<span class="preview-title">Последние сайты</span>
|
||||
</div>
|
||||
<div class="sites-list">
|
||||
<!-- Автоматически загружается из JS -->
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#sites" class="btn-link show-all-btn">
|
||||
Показать все сайты (7) →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Сертификаты -->
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">
|
||||
<span class="card-icon">🔒</span>
|
||||
Сертификаты
|
||||
</h2>
|
||||
<button class="btn-primary" id="add-cert-btn">
|
||||
<span class="btn-plus">+</span>Новый SSL
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="stats-row">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">5</div>
|
||||
<div class="stat-label">Всего сертификатов</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number valid-stat">3</div>
|
||||
<div class="stat-label">Действующих</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number warning-stat">2</div>
|
||||
<div class="stat-label">Истекающих</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="certs-preview">
|
||||
<div class="preview-header">
|
||||
<span class="preview-title">Состояние сертификатов</span>
|
||||
</div>
|
||||
<div class="certs-list">
|
||||
<div class="cert-item">
|
||||
<div class="cert-status valid"></div>
|
||||
<div class="cert-info">
|
||||
<span class="cert-name">*.voxsel.ru</span>
|
||||
<span class="cert-details">Wildcard • Let's Encrypt</span>
|
||||
</div>
|
||||
<div class="cert-expires">
|
||||
<span class="expires-date">До 30.12.2024</span>
|
||||
<span class="expires-days">89 дней</span>
|
||||
</div>
|
||||
<div class="cert-actions">
|
||||
<button class="btn-icon" title="Обновить">🔄</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-item">
|
||||
<div class="cert-status warning"></div>
|
||||
<div class="cert-info">
|
||||
<span class="cert-name">example.com</span>
|
||||
<span class="cert-details">Standard • Cloudflare</span>
|
||||
</div>
|
||||
<div class="cert-expires warning">
|
||||
<span class="expires-date">До 15.01.2024</span>
|
||||
<span class="expires-days">21 день</span>
|
||||
</div>
|
||||
<div class="cert-actions">
|
||||
<button class="btn-icon warning" title="Обновить срочно">⚠️</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cert-item">
|
||||
<div class="cert-status valid"></div>
|
||||
<div class="cert-info">
|
||||
<span class="cert-name">api.voxsel.ru</span>
|
||||
<span class="cert-details">Standard • Let's Encrypt</span>
|
||||
</div>
|
||||
<div class="cert-expires">
|
||||
<span class="expires-date">До 05.03.2024</span>
|
||||
<span class="expires-days">72 дня</span>
|
||||
</div>
|
||||
<div class="cert-actions">
|
||||
<button class="btn-icon" title="Обновить">🔄</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#certificates" class="btn-link show-all-btn">
|
||||
Показать все сертификаты (5) →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Копирайт -->
|
||||
<footer class="admin-footer">
|
||||
<div class="footer-content">
|
||||
Powered by vServer | Сайт разработчика: <a href="https://voxsel.ru" target="_blank">voxsel.ru</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript файлы -->
|
||||
<script src="assets/js/tools.js"></script>
|
||||
<script src="assets/js/dashboard.js"></script>
|
||||
<script src="assets/js/json_loader.js"></script>
|
||||
<script src="assets/js/menu_loader.js"></script>
|
||||
<script src="assets/js/server_status.js"></script>
|
||||
<script src="assets/js/metrics_loader.js"></script>
|
||||
<script src="assets/js/site_list.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user