github-personal/step-ca-webui
1
0
Fork 0
mirror of https://github.com/outbackdingo/step-ca-webui.git synced 2026-01-27 10:20:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

html wip

Browse Source
This commit is contained in:
stone-24tch3r
2024-09-24 20:50:59 +05:00
parent 1d83a1ecb4
commit 19ed1ac29e
4 changed files with 106 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
front/header.html
View File

@@ -1,18 +0,0 @@
<!-- header.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</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="topbar">
<div class="logo">SSH Cert Manager</div>
<div>
<button class="nav-button">Dashboard</button>
<button class="nav-button">Logs</button>
<button class="nav-button">Menu</button>
</div>
</div>

2
front/logs.html
View File

@@ -16,7 +16,7 @@
<button class="nav-button">Menu</button>
</div>
</div>
<div class="container">
<div class="main-container">
<h1>Logs and Command History</h1>
<div class="filters">
<label>Severity:

51
front/main.html
View File

@@ -10,16 +10,16 @@
<body>
<div class="topbar">
<div class="logo">SSH Cert Manager</div>
<div>
<div class="nav-buttons-container">
<button class="nav-button">Dashboard</button>
<button class="nav-button">Logs</button>
<button class="nav-button">Menu</button>
</div>
</div>
<div class="container">
<h1>Certificate Management</h1>
<table>
<thead>
<div class="main-container">
<h1 class="main-container-header">Certificate Management</h1>
<table class="certs-table">
<thead class="certs-table-header">
<tr>
<th>Cert Name</th>
<th>Status</th>
@@ -30,15 +30,52 @@
<tr>
<td>Cert 1</td>
<td>Active</td>
<td>
<td class="actions-container-td">
<button class="action-button">Renew</button>
<button class="action-button">Revoke</button>
<button class="action-button">View</button>
<button class="action-button">Do smth else</button>
</td>
</tr>
<tr>
<td>Cert 2</td>
<td>Expired</td>
<td>
<td class="actions-container-td">
<button class="action-button">Delete</button>
</td>
</tr>
<tr>
<td>Cert 3</td>
<td>Test</td>
<td class="actions-container-td">
<button class="action-button">Delete</button>
</td>
</tr>
<tr>
<td>Cert 4</td>
<td>Test</td>
<td class="actions-container-td">
<button class="action-button">Delete</button>
</td>
</tr>
<tr>
<td>Cert 5</td>
<td>Test</td>
<td class="actions-container-td">
<button class="action-button">Delete</button>
</td>
</tr>
<tr>
<td>Cert 6</td>
<td>Test</td>
<td class="actions-container-td">
<button class="action-button">Delete</button>
</td>
</tr>
<tr>
<td>Cert 7</td>
<td>Test</td>
<td class="actions-container-td">
<button class="action-button">Delete</button>
</td>
</tr>

67
front/styles.css
View File

@@ -2,10 +2,16 @@
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
body {
display: flex;
flex-direction: column;
}
.topbar {
background-color: #cc0000;
color: white;
@@ -20,6 +26,16 @@ body, html {
font-size: 18px;
}
@media screen and (max-width: 450px) {
.nav-buttons-container {
display: flex;
align-items: stretch;
flex-direction: column;
gap: 4px;
}
}
.nav-button {
background-color: #aa0000;
color: white;
@@ -29,23 +45,38 @@ body, html {
cursor: pointer;
}
.container {
.main-container {
max-width: 1000px;
margin: 20px auto;
margin-block: 20px;
margin-inline: 20px;
background-color: white;
border: 2px solid #cc0000;
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}
h1 {
@media screen and (max-width: 450px) {
.main-container {
margin-block: 5px;
margin-inline: 5px;
}
}
.main-container-header {
color: #cc0000;
margin-top: 0;
}
table {
.certs-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
flex: 1;
overflow-y: auto;
padding: 10px;
}
th, td {
@@ -58,6 +89,31 @@ th {
background-color: #f2f2f2;
}
.actions-container-td {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 5px;
}
@media screen and (max-width: 450px) {
.actions-container-td:has(button:nth-child(2)) {
flex-direction: column;
align-items: stretch;
}
}
@media screen and (min-width: 451px) and (max-width: 600px) {
.actions-container-td:has(button:nth-child(3)) {
flex-direction: column;
align-items: center;
}
.actions-container-td button {
width: 70%;
}
}
.action-button, .filter-button {
background-color: #cc0000;
color: white;
@@ -73,7 +129,6 @@ th {
border: none;
padding: 10px 20px;
font-size: 16px;
margin-top: 20px;
cursor: pointer;
display: block;
width: 100%;
@@ -108,7 +163,7 @@ th {
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {