This commit is contained in:
Mateusz Gruszczyński
2025-11-01 21:37:56 +01:00
parent 4d3d431c1c
commit a040aeac8c
3 changed files with 67 additions and 17 deletions

View File

@@ -7,3 +7,45 @@ main.container{scroll-margin-top: 4rem;}
.form-progress{height:4px} .form-progress{height:4px}
.spinner-inline{display:inline-flex;align-items:center;gap:.5rem} .spinner-inline{display:inline-flex;align-items:center;gap:.5rem}
/* Modern dark theme */
:root{
--bg-elev: #111318;
--bg-header: linear-gradient(180deg, #0e1015 0%, #0b0d11 100%);
--accent: #4cc9f0;
--accent-2: #a78bfa;
--text: #e6e8ee;
--muted: #a3a6b0;
--link-bg: rgba(255,255,255,.06);
--link-bg-active: rgba(76,201,240,.18);
--border: rgba(255,255,255,.08);
}
*{font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif}
body{background-color:#0b0d11;color:var(--text)}
.header1{
background: var(--bg-header);
border-bottom: 1px solid var(--border);
position: sticky; top:0; z-index: 1030;
}
.header1 .logo{font-weight:700; letter-spacing:.2px}
.header1 .logo .fa-globe{color: var(--accent)}
.menu-link{
display:inline-flex; align-items:center; gap:.4rem;
color: var(--text); text-decoration:none;
padding:.5rem .8rem; border-radius:.7rem;
background: transparent; transition: all .18s ease;
border:1px solid transparent;
}
.menu-link:hover{background: var(--link-bg); color:#fff; border-color: var(--border)}
.menu-link.active{background: var(--link-bg-active); border-color: rgba(76,201,240,.35); box-shadow: 0 0 0 .15rem rgba(76,201,240,.12) inset}
.menu-link:focus-visible{outline: 2px solid var(--accent-2); outline-offset: 2px}
.menu .btn{border-radius:.7rem}
.card{background: var(--bg-elev); border-color: var(--border)}
.table{--bs-table-bg: transparent; color: var(--text)}
.badge{background: var(--link-bg); color: var(--text)}
a{color: var(--accent)} a:hover{color:#7dd3ff}

View File

@@ -9,25 +9,33 @@
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% block head %}{% endblock %} {% block head %}{% endblock %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
</head> </head>
<body class="bg-body"> <body class="bg-body">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom border-secondary sticky-top">
<div class="container-fluid">
<a class="navbar-brand fw-semibold" href="{{ url_for('main.index') }}">HAProxy Configurator</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample" aria-controls="navbarsExample" aria-expanded="false" aria-label="Przełącz nawigację"> <header class="header1" id="header1">
<span class="navbar-toggler-icon"></span> <div class="container d-flex align-items-center justify-content-between flex-wrap gap-2 py-2">
</button> <a href="{{ url_for('main.home') }}" class="d-flex align-items-center text-decoration-none logo text-reset">
<div class="collapse navbar-collapse" id="navbarsExample"> <h3 class="m-0 d-flex align-items-center gap-2">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <i class="fas fa-globe"></i><span>Haproxy Configurator</span>
<li class="nav-item"><a class="nav-link {% if active_page=='home' %}active{% endif %}" href="{{ url_for('main.home') }}">Pulpit</a></li> </h3>
<li class="nav-item"><a class="nav-link {% if active_page=='index' %}active{% endif %}" href="{{ url_for('main.index') }}">Konfiguracja</a></li> </a>
<li class="nav-item"><a class="nav-link" href="{{ url_for('display_haproxy_stats') }}">Statystyki</a></li> <nav class="menu d-flex align-items-center gap-2 flex-wrap">
<li class="nav-item"><a class="nav-link" href="{{ url_for('display_logs') }}">Logi</a></li> <a href="{{ url_for('main.home') }}" class="menu-link {{ 'active' if request.path.startswith('/home') else '' }}">Home</a>
<li class="nav-item"><a class="nav-link" href="{{ url_for('edit.edit_haproxy_config') }}">Edytor</a></li> <a href="{{ url_for('main.index') }}" class="menu-link {{ 'active' if request.path == '/' else '' }}">Add Frontend &amp; Backend</a>
</ul> <a href="{{ url_for('edit.edit_haproxy_config') }}" class="menu-link {{ 'active' if request.path.startswith('/edit') else '' }}">Edit HAProxy Config</a>
</div> <a href="{{ url_for('display_logs') }}" class="menu-link {{ 'active' if request.path.startswith('/logs') else '' }}">Security Events</a>
</div> <a href="{{ url_for('display_haproxy_stats') }}" class="menu-link {{ 'active' if request.path.startswith('/statistics') else '' }}">Statictics</a>
<a href="http://{{ request.host.split(':')[0] }}:8404/stats" class="menu-link" target="_blank" rel="noopener">HAProxy Stats</a>
</nav> </nav>
</div>
</header>
<main class="container py-4"> <main class="container py-4">
{% with messages = get_flashed_messages() %}{% if messages %}<div id="_flash_msgs" data-msgs="{{ messages|tojson }}"></div>{% endif %}{% endwith %} {% with messages = get_flashed_messages() %}{% if messages %}<div id="_flash_msgs" data-msgs="{{ messages|tojson }}"></div>{% endif %}{% endwith %}

View File

@@ -17,7 +17,7 @@
<a href="/edit" class="menu-link">Edit HAProxy Config</a> <a href="/edit" class="menu-link">Edit HAProxy Config</a>
<a href="/logs" class="menu-link">Security Events</a> <a href="/logs" class="menu-link">Security Events</a>
<a href="/statistics" class="menu-link active">Statistics</a> <a href="/statistics" class="menu-link active">Statistics</a>
<a href="http://{{ request.host.split(':')[0] }}:8484/stats" class="menu-link" target="_blank">HAProxy Stats</a> <a href="http://{{ request.host.split(':')[0] }}:8080/stats" class="menu-link" target="_blank">HAProxy Stats</a>
</header> </header>
<!-- Main Content --> <!-- Main Content -->