refactor: extract common/base parts to base.html and rewrite topbar to use html nav

This commit is contained in:
stone-24tch3r (aider)
2024-09-27 00:21:29 +05:00
parent a9f8a44920
commit c5e8c48295
3 changed files with 55 additions and 50 deletions

28
front/html/base.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}SSH Certificate Management{% endblock %}</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="topbar">
<div class="topbar-logo">SSH Cert Manager</div>
<ul class="topbar-nav-container">
<li><a href="dashboard.html" class="topbar-nav-button">Dashboard</a></li>
<li><a href="logs.html" class="topbar-nav-button">Logs</a></li>
<li><a href="#" class="topbar-nav-button">Menu</a></li>
</ul>
</nav>
<div class="main-container">
<h1 class="main-header">{% block header %}{% endblock %}</h1>
<div class="main-container-content">
{% block content %}{% endblock %}
</div>
{% block bottom_button %}{% endblock %}
</div>
{% block extra_content %}{% endblock %}
{% block scripts %}{% endblock %}
</body>
</html>

View File

@@ -1,24 +1,10 @@
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSH Certificate Management - Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="topbar">
<div class="topbar-logo">SSH Cert Manager</div>
<div class="topbar-nav-container">
<button class="topbar-nav-button">Dashboard</button>
<button class="topbar-nav-button">Logs</button>
<button class="topbar-nav-button">Menu</button>
</div>
</div>
<div class="main-container">
<h1 class="main-header">Certificate Management</h1>
<div class="main-container-content">
{% extends "base.html" %}
{% block title %}SSH Certificate Management - Dashboard{% endblock %}
{% block header %}Certificate Management{% endblock %}
{% block content %}
<table class="certs-table">
<thead class="certs-table-header">
<tr>
@@ -88,10 +74,13 @@
</tr>
</tbody>
</table>
</div>
<button id="generateCertBtn" class="main-bottom-button">Generate New Certificate</button>
</div>
{% endblock %}
{% block bottom_button %}
<button id="generateCertBtn" class="main-bottom-button">Generate New Certificate</button>
{% endblock %}
{% block extra_content %}
<!-- Modal -->
<div id="generateCertModal" class="modal">
<div class="modal-content">
@@ -128,8 +117,8 @@
<div id="logContent"></div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="script.js"></script>
</body>
</html>
{% endblock %}

View File

@@ -1,23 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSH Certificate Management - Logs</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="topbar">
<div class="topbar-logo">SSH Cert Manager</div>
<div>
<button class="topbar-nav-button">Dashboard</button>
<button class="topbar-nav-button">Logs</button>
<button class="topbar-nav-button">Menu</button>
</div>
</div>
<div class="main-container">
<h1 class="main-header">Logs and Command History</h1>
<div class="main-container-content">
{% extends "base.html" %}
{% block title %}SSH Certificate Management - Logs{% endblock %}
{% block header %}Logs and Command History{% endblock %}
{% block content %}
<div class="logs-filters-container">
<label class="logs-filters-item">Commands only:
<select>
@@ -99,7 +86,8 @@
</tbody>
</table>
</div>
{% endblock %}
{% block bottom_button %}
<button class="main-bottom-button">Load More</button>
</div>
</body>
</html>
{% endblock %}