From 04626de15ba734ffc496f14593cf0490ea881427 Mon Sep 17 00:00:00 2001 From: hoshimach1 Date: Mon, 4 Aug 2025 21:03:46 +0000 Subject: [PATCH] Add main.html --- main.html | 459 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 459 insertions(+) create mode 100644 main.html diff --git a/main.html b/main.html new file mode 100644 index 0000000..23f11f4 --- /dev/null +++ b/main.html @@ -0,0 +1,459 @@ +/* Stellarisei Theme для Uptime Kuma */ +/* Вдохновлено космической эстетикой и Hoshimachi Suisei */ + +:root { + /* Stellarisei цветовая палитра */ + --stellar-deep-space: #000000; + --stellar-nebula: #0a0a0a; + --stellar-void: #050505; + --suisei-blue: #2d4fd9; + --suisei-light-blue: #4d7aff; + --suisei-cyan: #00b3cc; + --stellar-silver: #a0a0b0; + --stellar-gold: #ccaa00; + --comet-trail: rgba(77, 122, 255, 0.2); + --starlight: rgba(255, 255, 255, 0.1); + } + + /* Основной фон */ + body { + background: #000000; + background-attachment: fixed; + color: var(--stellar-silver); + font-family: 'Segoe UI', 'Roboto', sans-serif; + position: relative; + overflow-x: hidden; + } + + /* Основной слой звёзд */ + body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + /* Маленькие звёзды */ + radial-gradient(0.5px 0.5px at 15px 25px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 35px 65px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 85px 35px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 125px 75px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 155px 25px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 195px 115px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 245px 55px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 295px 145px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 45px 105px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 75px 15px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 175px 95px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 225px 135px, #ffffff, transparent), + /* Средние звёзды */ + radial-gradient(1px 1px at 55px 45px, #ffffff, transparent), + radial-gradient(1px 1px at 105px 125px, #ffffff, transparent), + radial-gradient(1px 1px at 185px 165px, #ffffff, transparent), + radial-gradient(1px 1px at 265px 85px, #ffffff, transparent), + radial-gradient(1px 1px at 315px 45px, #ffffff, transparent), + radial-gradient(1px 1px at 25px 155px, #ffffff, transparent), + /* Большие звёзды */ + radial-gradient(1.5px 1.5px at 145px 55px, #ffffff, transparent), + radial-gradient(1.5px 1.5px at 275px 165px, #ffffff, transparent), + radial-gradient(1.5px 1.5px at 65px 135px, #ffffff, transparent); + background-repeat: repeat; + background-size: 350px 180px; + opacity: 0.7; + z-index: -3; + animation: stellar-drift 25s linear infinite, star-twinkle-1 3s ease-in-out infinite; + } + + /* Цветные звёзды с мерцанием */ + body::after { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + /* Синие звёзды разного размера */ + radial-gradient(0.5px 0.5px at 75px 8px, #4d7aff, transparent), + radial-gradient(1px 1px at 175px 48px, #4d7aff, transparent), + radial-gradient(0.5px 0.5px at 315px 88px, #4d7aff, transparent), + radial-gradient(1.5px 1.5px at 115px 138px, #4d7aff, transparent), + radial-gradient(0.5px 0.5px at 235px 28px, #4d7aff, transparent), + radial-gradient(1px 1px at 45px 168px, #4d7aff, transparent), + /* Голубые звёзды */ + radial-gradient(0.5px 0.5px at 125px 18px, #00b3cc, transparent), + radial-gradient(1px 1px at 205px 158px, #00b3cc, transparent), + radial-gradient(1.5px 1.5px at 285px 78px, #00b3cc, transparent), + radial-gradient(0.5px 0.5px at 95px 98px, #00b3cc, transparent), + radial-gradient(1px 1px at 15px 118px, #00b3cc, transparent), + /* Редкие яркие звёзды */ + radial-gradient(2px 2px at 165px 128px, #ffffff, transparent), + radial-gradient(2px 2px at 255px 48px, #ffffff, transparent); + background-repeat: repeat; + background-size: 380px 180px; + opacity: 0.5; + z-index: -2; + animation: stellar-drift 40s linear infinite reverse, star-twinkle-2 4s ease-in-out infinite; + } + + /* Дополнительный слой мерцающих звёзд */ + .stellar-sparkles { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + radial-gradient(1px 1px at 30px 60px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 180px 20px, #ffffff, transparent), + radial-gradient(1.5px 1.5px at 290px 120px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 220px 180px, #ffffff, transparent), + radial-gradient(1px 1px at 80px 160px, #ffffff, transparent); + background-repeat: repeat; + background-size: 320px 200px; + opacity: 0; + z-index: -1; + animation: stellar-drift 30s linear infinite, sparkle-flash 6s ease-in-out infinite; + } + + /* Создаём дополнительный слой через псевдоэлемент контейнера */ + .container::before, .container-fluid::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + radial-gradient(1px 1px at 30px 60px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 180px 20px, #ffffff, transparent), + radial-gradient(1.5px 1.5px at 290px 120px, #ffffff, transparent), + radial-gradient(0.5px 0.5px at 220px 180px, #ffffff, transparent), + radial-gradient(1px 1px at 80px 160px, #ffffff, transparent); + background-repeat: repeat; + background-size: 320px 200px; + opacity: 0; + z-index: -10; + pointer-events: none; + animation: stellar-drift 30s linear infinite, sparkle-flash 6s ease-in-out infinite; + } + + /* Анимации звёзд */ + @keyframes stellar-drift { + 0% { transform: translateX(0px); } + 100% { transform: translateX(-380px); } + } + + @keyframes star-twinkle-1 { + 0%, 100% { opacity: 0.7; } + 25% { opacity: 0.4; } + 50% { opacity: 0.9; } + 75% { opacity: 0.5; } + } + + @keyframes star-twinkle-2 { + 0%, 100% { opacity: 0.5; } + 20% { opacity: 0.8; } + 40% { opacity: 0.3; } + 60% { opacity: 0.7; } + 80% { opacity: 0.2; } + } + + @keyframes sparkle-flash { + 0%, 90%, 100% { opacity: 0; } + 5%, 15% { opacity: 0.8; } + 10% { opacity: 1; } + } + + /* Основной контейнер */ + .container, .container-fluid { + background: rgba(5, 5, 5, 0.8); + backdrop-filter: blur(8px); + border-radius: 12px; + border: 1px solid var(--comet-trail); + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + margin: 20px auto; + position: relative; + } + + /* Заголовки */ + h1, h2, h3, h4, h5, h6 { + color: var(--suisei-light-blue); + text-shadow: 0 0 8px rgba(77, 122, 255, 0.4); + font-weight: 600; + } + + h1 { + background: linear-gradient(45deg, var(--suisei-blue), var(--suisei-light-blue)); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: subtle-glow 4s ease-in-out infinite alternate; + } + + @keyframes subtle-glow { + 0% { filter: brightness(1); } + 100% { filter: brightness(1.1); } + } + + /* Карточки сервисов */ + .card, .status-card { + background: linear-gradient(145deg, + rgba(10, 10, 10, 0.9), + rgba(5, 5, 5, 0.95)); + border: 1px solid var(--comet-trail); + border-radius: 10px; + box-shadow: + 0 2px 12px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.03); + transition: all 0.3s ease; + position: relative; + overflow: hidden; + } + + .card:hover, .status-card:hover { + transform: translateY(-3px); + box-shadow: + 0 4px 18px rgba(77, 122, 255, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.05); + border-color: var(--suisei-blue); + } + + /* Эффект кометы для карточек */ + .card::before, .status-card::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient(45deg, + transparent, + var(--comet-trail), + transparent); + transform: rotate(45deg); + transition: all 0.6s; + opacity: 0; + } + + .card:hover::before, .status-card:hover::before { + animation: comet-sweep 0.6s ease-out; + } + + @keyframes comet-sweep { + 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 1; } + 100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; } + } + + /* Статусы сервисов */ + .badge-success, .badge.bg-success, .status-up { + background: linear-gradient(45deg, #00ff88, #00cc66) !important; + color: #003311 !important; + box-shadow: 0 2px 8px rgba(0, 255, 136, 0.3); + border: none; + } + + .badge-danger, .badge.bg-danger, .status-down { + background: linear-gradient(45deg, #ff3366, #cc0033) !important; + color: white !important; + box-shadow: 0 2px 8px rgba(255, 51, 102, 0.3); + border: none; + } + + .badge-warning, .badge.bg-warning, .status-warning { + background: linear-gradient(45deg, var(--stellar-gold), #ffaa00) !important; + color: #331100 !important; + box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3); + border: none; + } + + /* Кнопки */ + .btn { + border-radius: 8px; + font-weight: 500; + transition: all 0.3s ease; + border: none; + position: relative; + overflow: hidden; + } + + .btn-primary { + background: linear-gradient(45deg, var(--suisei-blue), var(--suisei-light-blue)); + box-shadow: 0 4px 12px rgba(51, 102, 255, 0.3); + } + + .btn-primary:hover { + background: linear-gradient(45deg, var(--suisei-light-blue), var(--suisei-cyan)); + box-shadow: 0 6px 20px rgba(51, 102, 255, 0.4); + transform: translateY(-2px); + } + + /* Прогресс-бары */ + .progress { + background: rgba(20, 20, 40, 0.8); + border-radius: 10px; + overflow: hidden; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); + } + + .progress-bar { + background: linear-gradient(90deg, + var(--suisei-blue), + var(--suisei-light-blue), + var(--suisei-cyan)); + animation: stellar-pulse 2s ease-in-out infinite; + } + + @keyframes stellar-pulse { + 0%, 100% { box-shadow: 0 0 5px var(--suisei-blue); } + 50% { box-shadow: 0 0 15px var(--suisei-cyan); } + } + + /* Таблицы */ + .table { + background: rgba(5, 5, 5, 0.8); + border-radius: 8px; + overflow: hidden; + backdrop-filter: blur(5px); + } + + .table th { + background: rgba(10, 10, 10, 0.9); + color: var(--suisei-light-blue); + border: none; + font-weight: 600; + } + + .table td { + border-color: rgba(77, 122, 255, 0.15); + color: var(--stellar-silver); + } + + .table tbody tr:hover { + background: rgba(77, 122, 255, 0.08); + } + + /* Навигация */ + .navbar, .nav { + background: rgba(0, 0, 0, 0.95) !important; + backdrop-filter: blur(10px); + border-bottom: 1px solid var(--comet-trail); + } + + .navbar-brand, .nav-link { + color: var(--stellar-silver) !important; + transition: color 0.3s ease; + } + + .navbar-brand:hover, .nav-link:hover { + color: var(--suisei-light-blue) !important; + text-shadow: 0 0 6px rgba(77, 122, 255, 0.3); + } + + /* Модальные окна */ + .modal-content { + background: rgba(5, 5, 5, 0.98); + backdrop-filter: blur(15px); + border: 1px solid var(--comet-trail); + border-radius: 12px; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7); + } + + .modal-header { + border-bottom: 1px solid var(--comet-trail); + } + + .modal-footer { + border-top: 1px solid var(--comet-trail); + } + + /* Формы */ + .form-control, .form-select { + background: rgba(10, 10, 10, 0.9); + border: 1px solid var(--comet-trail); + border-radius: 6px; + color: var(--stellar-silver); + transition: all 0.3s ease; + } + + .form-control:focus, .form-select:focus { + background: rgba(15, 15, 15, 0.95); + border-color: var(--suisei-blue); + box-shadow: 0 0 0 0.15rem rgba(77, 122, 255, 0.2); + color: white; + } + + /* Tooltip и Popover */ + .tooltip-inner { + background: linear-gradient(45deg, var(--stellar-nebula), var(--stellar-void)); + border: 1px solid var(--comet-trail); + border-radius: 6px; + } + + /* Скроллбар */ + ::-webkit-scrollbar { + width: 8px; + } + + ::-webkit-scrollbar-track { + background: var(--stellar-void); + } + + ::-webkit-scrollbar-thumb { + background: linear-gradient(180deg, var(--suisei-blue), var(--suisei-light-blue)); + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb:hover { + background: linear-gradient(180deg, var(--suisei-light-blue), var(--suisei-cyan)); + } + + /* Анимация загрузки */ + .spinner-border { + border-color: var(--comet-trail); + border-top-color: var(--suisei-cyan); + animation: stellar-spin 1s linear infinite; + } + + @keyframes stellar-spin { + 0% { transform: rotate(0deg); filter: hue-rotate(0deg); } + 100% { transform: rotate(360deg); filter: hue-rotate(360deg); } + } + + /* Особые эффекты для страницы статуса */ + .status-page-header { + text-align: center; + padding: 40px 20px; + background: linear-gradient(135deg, + rgba(51, 102, 255, 0.1), + rgba(0, 255, 255, 0.05)); + border-radius: 15px; + margin-bottom: 30px; + position: relative; + } + + .status-page-header::after { + content: '✦'; + position: absolute; + top: 20px; + right: 30px; + color: var(--stellar-gold); + font-size: 24px; + animation: twinkle 2s infinite; + } + + /* Адаптивность */ + @media (max-width: 768px) { + .container, .container-fluid { + margin: 10px; + border-radius: 10px; + } + + .card, .status-card { + margin-bottom: 15px; + } + } \ No newline at end of file