197 lines
14 KiB
HTML
197 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Реестр объектов ВОЛС | Kazakhtelecom Business</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Inter', sans-serif; background: #F5F3F8; color: #241934; }
|
|
.font-manrope { font-family: 'Manrope', sans-serif; }
|
|
|
|
/* Colors */
|
|
.bg-violet-soft { background: #EFE7F6; }
|
|
.bg-violet { background: #4B1D6B; }
|
|
.bg-violet-deep { background: #331149; }
|
|
.text-violet { color: #4B1D6B; }
|
|
.text-lime { color: #8DC63F; }
|
|
.border-lime { border-color: #8DC63F; }
|
|
.bg-lime { background: #8DC63F; }
|
|
|
|
/* Start Screen */
|
|
.start-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; position: relative; overflow: hidden; background: radial-gradient(1200px 600px at 50% -10%, #EFE7F6, #F5F3F8); }
|
|
.fiber-trace { position: absolute; inset: 0; opacity: 0.4; pointer-events: none; }
|
|
.start-content { position: relative; z: 10; text-align: center; max-width: 500px; }
|
|
.kt-logo { width: 48px; height: 48px; object-fit: contain; }
|
|
.start-title { font-size: 1.5rem; font-weight: 800; margin-top: 1.5rem; line-height: 1.3; }
|
|
.device-grid, .mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.5rem; width: 100%; }
|
|
.device-btn, .mode-btn { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.25rem; border-radius: 1rem; border: 2px solid transparent; background: rgba(255,255,255,0.7); transition: all 0.2s; }
|
|
.device-btn.selected, .mode-btn.selected { border-color: #4B1D6B; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
|
|
.device-btn svg, .mode-btn svg { width: 24px; height: 24px; }
|
|
.device-btn span, .mode-btn span { font-size: 0.875rem; font-weight: 500; }
|
|
.continue-btn { width: 100%; padding: 0.875rem; margin-top: 1.5rem; border-radius: 0.75rem; font-weight: 600; color: white; background: linear-gradient(90deg, #4B1D6B, #331149); font-family: 'Manrope', sans-serif; opacity: 0.4; pointer-events: none; }
|
|
.continue-btn.active { opacity: 1; pointer-events: auto; }
|
|
|
|
/* Auth Screen */
|
|
.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
|
|
.auth-card { width: 100%; max-width: 448px; background: white; border-radius: 1rem; border: 1px solid #E6E1ED; padding: 1.75rem; }
|
|
.auth-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; font-family: 'Manrope', sans-serif; }
|
|
.auth-subtitle { font-size: 0.75rem; color: #6B6478; margin-bottom: 1.5rem; }
|
|
.demo-section, .register-section { margin-bottom: 1.5rem; }
|
|
.section-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6B6478; margin-bottom: 0.5rem; }
|
|
.user-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.625rem 0.75rem; border-radius: 0.75rem; border: 1px solid #E6E1ED; text-align: left; transition: border-color 0.2s; margin-bottom: 0.5rem; }
|
|
.user-btn:hover { border-color: #A78BCA; }
|
|
.user-info div:first-child { font-size: 0.875rem; font-weight: 500; }
|
|
.user-info div:last-child { font-size: 0.6875rem; color: #6B6478; }
|
|
.role-tag { font-size: 0.625rem; font-weight: 600; padding: 0.25rem 0.5rem; border-radius: 9999px; }
|
|
.role-admin { color: #4B1D6B; background: rgba(75,29,107,0.09); }
|
|
.role-editor { color: #3B7DD8; background: rgba(59,125,216,0.09); }
|
|
.role-view { color: #8B8594; background: rgba(139,133,148,0.09); }
|
|
.register-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem; }
|
|
.input-field { width: 100%; font-size: 0.875rem; border: 1px solid #E6E1ED; border-radius: 0.5rem; padding: 0.5rem 0.75rem; }
|
|
.input-full { grid-column: span 2; }
|
|
.register-btn { width: 100%; padding: 0.625rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; color: white; background: #4B1D6B; margin-top: 0.5rem; }
|
|
.back-link { font-size: 0.75rem; color: #6B6478; margin-bottom: 1rem; display: inline-block; }
|
|
|
|
/* Main App */
|
|
.app-layout { min-height: 100vh; display: flex; }
|
|
.sidebar { width: 15rem; background: #331149; display: none; }
|
|
.sidebar.open { display: flex; }
|
|
.sidebar-header { display: flex; align-items: center; gap: 0.625rem; padding: 1.25rem; margin-bottom: 2rem; }
|
|
.sidebar-logo { width: 28px; height: 28px; }
|
|
.sidebar-brand { color: white; font-size: 0.875rem; font-weight: 700; line-height: 1.2; font-family: 'Manrope', sans-serif; }
|
|
.nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; margin: 0 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; color: rgba(255,255,255,0.65); transition: all 0.2s; width: calc(100% - 1.5rem); text-align: left; }
|
|
.nav-item.active { background: rgba(255,255,255,0.12); color: white; }
|
|
.sidebar-footer { border-top: 1px solid rgba(255,255,255,0.12); margin: 0 0.75rem; padding-top: 1rem; }
|
|
.user-name { color: white; font-size: 0.75rem; font-weight: 500; }
|
|
.user-meta { color: rgba(255,255,255,0.6); font-size: 0.6875rem; }
|
|
.logout-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; font-size: 0.75rem; color: rgba(255,255,255,0.65); margin-top: 0.25rem; }
|
|
|
|
.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
|
|
.top-bar { position: sticky; top: 0; z: 20; background: white; border-bottom: 1px solid #E6E1ED; padding: 0.75rem 1rem; }
|
|
.top-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
|
|
.mobile-menu-btn { display: block; }
|
|
.desktop-menu-btn { display: none; }
|
|
.page-title { font-size: 1.125rem; font-weight: 700; font-family: 'Manrope', sans-serif; }
|
|
.saved-badge { font-size: 0.6875rem; color: #059669; display: flex; align-items: center; gap: 0.25rem; }
|
|
.action-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
|
|
.search-box { position: relative; flex: 1; min-width: 160px; }
|
|
.search-input { width: 100%; font-size: 0.875rem; padding: 0.5rem 0.75rem; padding-left: 2rem; border: 1px solid #E6E1ED; border-radius: 0.5rem; }
|
|
.search-icon { position: absolute; left: 0.625rem; top: 0.625rem; width: 14px; height: 14px; color: #6B6478; }
|
|
.filter-select { font-size: 0.75rem; padding: 0.5rem 0.625rem; border: 1px solid #E6E1ED; border-radius: 0.5rem; background: white; max-width: 160px; }
|
|
.action-btn { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; font-weight: 500; padding: 0.5rem 0.75rem; border-radius: 0.5rem; border: 1px solid #E6E1ED; }
|
|
.primary-btn { background: #4B1D6B; color: white; border: none; font-weight: 600; }
|
|
.reset-btn { font-size: 0.75rem; color: #4B1D6B; padding: 0.5rem 0.75rem; }
|
|
|
|
.content-area { padding: 1rem; flex: 1; }
|
|
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
|
|
.kpi-card { background: white; border: 1px solid #E6E1ED; border-radius: 1rem; padding: 1rem; }
|
|
.kpi-value { font-size: 1.5rem; font-weight: 800; color: #4B1D6B; font-family: 'Manrope', sans-serif; }
|
|
.kpi-label { font-size: 0.6875rem; color: #6B6478; margin-top: 0.125rem; }
|
|
|
|
/* Desktop Table */
|
|
.table-container { background: white; border: 1px solid #E6E1ED; border-radius: 1rem; overflow: hidden; }
|
|
.table-scroll { overflow: auto; max-height: 62vh; }
|
|
.data-table { width: 100%; font-size: 0.875rem; }
|
|
.data-table thead { position: sticky; top: 0; z: 10; background: #EFE7F6; }
|
|
.data-table th { padding: 0.625rem 0.75rem; text-align: left; font-weight: 600; font-size: 0.6875rem; color: #4B1D6B; white-space: nowrap; cursor: pointer; user-select: none; }
|
|
.data-table td { padding: 0.5rem 0.75rem; border-top: 1px solid #E6E1ED; white-space: nowrap; font-size: 0.75rem; }
|
|
.data-table tr:hover { background: #F8F7FA; }
|
|
.data-table tr.overdue { background: #FDF1F2; }
|
|
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 500; border: 1px solid; }
|
|
.badge-green { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
|
|
.badge-yellow { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
|
|
.badge-blue { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
|
|
.badge-red { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
|
|
.badge-gray { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }
|
|
.action-cell { white-space: nowrap !important; }
|
|
.edit-btn, .delete-btn { padding: 0.375rem; border-radius: 0.5rem; margin-right: 0.25rem; }
|
|
.edit-btn:hover { background: #F1F5F9; }
|
|
.delete-btn:hover { background: #FEF2F2; }
|
|
|
|
/* Mobile Cards */
|
|
.mobile-cards { display: flex; flex-direction: column; gap: 0.75rem; }
|
|
.mobile-card { background: white; border: 1px solid #E6E1ED; border-radius: 1rem; padding: 1rem; text-align: left; }
|
|
.mobile-card.overdue { border-color: #F3B4BC; }
|
|
.mobile-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 0.25rem; }
|
|
.mobile-card-title { font-size: 0.875rem; font-weight: 600; }
|
|
.mobile-card-meta { font-size: 0.6875rem; color: #6B6478; margin-bottom: 0.5rem; }
|
|
.mobile-card-badges { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem; }
|
|
.mobile-card-badge { font-size: 0.625rem; padding: 0.125rem 0.5rem; border-radius: 9999px; border: 1px solid #E6E1ED; color: #6B6478; }
|
|
.mobile-card-arpu { font-size: 0.6875rem; font-weight: 500; color: #4B1D6B; margin-top: 0.5rem; }
|
|
|
|
/* Modal */
|
|
.modal-overlay { position: fixed; inset: 0; z: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
|
|
.modal-overlay::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.4); }
|
|
.modal-content { position: relative; background: white; border-radius: 1rem; width: 100%; max-width: 42rem; max-height: 88vh; overflow: auto; padding: 1.5rem; }
|
|
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
|
|
.modal-title { font-size: 1.125rem; font-weight: 700; font-family: 'Manrope', sans-serif; }
|
|
.close-btn { padding: 0.25rem; }
|
|
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
|
|
.form-field { display: flex; flex-direction: column; }
|
|
.form-field.full { grid-column: span 2; }
|
|
.form-label { font-size: 0.6875rem; font-weight: 500; color: #6B6478; margin-bottom: 0.25rem; }
|
|
.form-input, .form-select { font-size: 0.875rem; border: 1px solid #E6E1ED; border-radius: 0.5rem; padding: 0.5rem 0.625rem; }
|
|
.form-input:disabled, .form-select:disabled { background: #F8FAFC; color: #94A3B8; }
|
|
.modal-actions { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
|
|
.modal-actions button { flex: 1; padding: 0.625rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; }
|
|
.modal-actions .cancel-btn { border: 1px solid #E6E1ED; color: #241934; }
|
|
.modal-actions .save-btn { background: #4B1D6B; color: white; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.375rem; }
|
|
|
|
/* Confirm Dialog */
|
|
.confirm-dialog { max-width: 24rem; text-align: center; }
|
|
.confirm-icon { margin: 0 auto 0.75rem; }
|
|
.confirm-text { font-size: 0.875rem; margin-bottom: 1.25rem; }
|
|
.confirm-actions { display: flex; gap: 0.5rem; }
|
|
.confirm-actions button { flex: 1; padding: 0.625rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; }
|
|
.confirm-actions .cancel-btn { border: 1px solid #E6E1ED; }
|
|
.confirm-actions .confirm-btn { background: #DC2626; color: white; font-weight: 600; }
|
|
|
|
/* Mobile Detail */
|
|
.mobile-detail { width: 100%; max-width: 28rem; max-height: 85vh; overflow: auto; }
|
|
.mobile-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
|
|
.mobile-detail-title { font-size: 1rem; font-weight: 700; font-family: 'Manrope', sans-serif; }
|
|
.detail-row { display: flex; justify-content: space-between; font-size: 0.75rem; gap: 0.75rem; margin-bottom: 0.625rem; }
|
|
.detail-label { color: #6B6478; }
|
|
.detail-value { font-weight: 500; text-align: right; }
|
|
.mobile-detail-edit { width: 100%; padding: 0.625rem; margin-top: 1.25rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 600; color: white; background: #4B1D6B; }
|
|
|
|
/* Dashboard */
|
|
.dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; }
|
|
.dash-card { background: white; border: 1px solid #E6E1ED; border-radius: 1rem; padding: 1rem; }
|
|
.dash-value { font-size: 1.25rem; font-weight: 800; color: #4B1D6B; font-family: 'Manrope', sans-serif; }
|
|
.dash-label { font-size: 0.6875rem; color: #6B6478; margin-top: 0.125rem; }
|
|
.chart-container { background: white; border: 1px solid #E6E1ED; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
|
|
.chart-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem; }
|
|
.chart-wrapper { height: 280px; }
|
|
.summary-box { background: white; border: 1px solid #E6E1ED; border-radius: 1rem; padding: 1rem; font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: 1.5rem; }
|
|
.summary-item span:first-child { color: #6B6478; }
|
|
.summary-item b { color: #4B1D6B; }
|
|
|
|
/* Admin info popup */
|
|
.admin-popup-btn { position: fixed; top: 1.25rem; right: 1.25rem; z: 30; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: white; border: 1px solid #E6E1ED; box-shadow: 0 1px 3px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; }
|
|
.admin-popup { position: absolute; right: 0; top: 2.875rem; z: 30; width: 16rem; background: white; border-radius: 1rem; border: 1px solid #E6E1ED; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 1rem; }
|
|
.admin-popup-label { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6B6478; margin-bottom: 0.375rem; }
|
|
.admin-popup-name { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; }
|
|
.admin-popup-phone { font-size: 0.6875rem; color: #4B1D6B; display: flex; align-items: center; gap: 0.25rem; }
|
|
|
|
/* Responsive */
|
|
@media (min-width: 768px) {
|
|
.sidebar { display: flex; }
|
|
.mobile-menu-btn { display: none; }
|
|
.kpi-grid { grid-template-columns: repeat(5, 1fr); }
|
|
.dashboard-grid { grid-template-columns: repeat(4, 1fr); }
|
|
.content-area { padding: 1.5rem; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script src="app.js" type="module"></script>
|
|
</body>
|
|
</html>
|