mirror of
https://github.com/outbackdingo/step-ca-webui.git
synced 2026-01-27 10:20:25 +00:00
refactor: extract common/base parts to base.html and rewrite topbar to use html nav
This commit is contained in:
28
front/html/base.html
Normal file
28
front/html/base.html
Normal 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>
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user