Skip to content

Commit

Permalink
Add html and css from superkix
Browse files Browse the repository at this point in the history
  • Loading branch information
emilienlemaire committed Oct 1, 2024
1 parent bd62281 commit e1ce2c6
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 43 deletions.
Binary file not shown.
95 changes: 95 additions & 0 deletions superkix-server/static/resources/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
@font-face {
font-family: Departure;
src: url(/resources/DepartureMono-Regular.woff2);
}

:root {
background: rgb(9,9,121);
background: radial-gradient(circle, rgba(9,9,121,1) 0%, rgb(0, 70, 140) 100%);
/* color: hsl(214, 100%, 60%); */
color: hsl(214, 100%, 65%);
font-family: sans-serif;
font-size: 110%;
min-height: 100vh;
}

body {
display: grid;
justify-content: center;
gap: 0.3em;

grid-template-columns: fit-content(60em) fit-content(35em);
grid-template-rows: auto;
grid-template-areas:
"header header"
"sub-header sub-header"
"logs connections"
;
}

.widget {
background-color: #222222;
border-radius: 0.3rem;

box-shadow: 0pt 0pt 0.5rem 0.1rem rgba(47, 47, 47, 0.627);

h2 {
background-color: #333333;
color: hsl(214, 100%, 65%);
margin: 0pt;
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}

h2,
.widget-content {
padding: 0.5rem;
}

.widget-content {
font-family: Departure, monospace;
}
}

header {
grid-area: header;
justify-self: center;
color: #ffffff;
}

#logs {
grid-area: logs;
}

#last_config {
grid-area: sub-header;
}

.console {
white-space: pre-wrap;
word-wrap: break-word;
max-height: 30em;
overflow: scroll;
}

#connections {
grid-area: connections;
}

table {
width: 100%;
border-collapse: collapse;
}

table,
th,
td {
border: 1px solid hsla(214, 100%, 65%, 0.566);
;
}

th,
td {
padding: 8px;
text-align: left;
}
93 changes: 50 additions & 43 deletions superkix-server/static/templates/index.html
Original file line number Diff line number Diff line change
@@ -1,51 +1,58 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket Address and Timestamps</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<link rel="stylesheet" href="/resources/style.css">
<title>Superkix</title>
</head>
<body>
<p>Build log available <a href="/git_log">here</a></p>
<p>Last loaded config: {{ loaded_path }}</p>
<h1>Socket Address and Timestamps</h1>
<table>
<thead>
<tr>
<th>Socket Address</th>
<th>Timestamp (UTC)</th>
</tr>
</thead>
<tbody>
{# Iterate over the hashmap #}
{% for addr, timestamp in connections %}
<tr>
<td>{{ addr }}</td>
<td>{{ timestamp }}</td>
</tr>
{% else %}
<tr>
<td colspan="2">No data available</td>
</tr>
{% endfor %}
</tbody>
</table>

<body>
<header>
<h1>Superkix dashboard</h1>
</header>
<div id="logs" class="widget">
<h2>Build log</h2>
<div class="widget-content">
<div class="console">
{{- log_content }}
</div>
</div>
</div>
<!-- <p id="log_link">Build log available <a href="/git_log">here</a></p> -->
<div id="last_config" class="widget">
<h2>Last loaded config</h2>
<div class="widget-content">
{{ loaded_path }}
</div>
</div>
<div id="connections" class="widget">
<h2>Current connections</h1>
<div class="widget-content">
<table>
<thead>
<tr>
<th>Socket Address</th>
<th>Since</th>
</tr>
</thead>
<tbody>
{# Iterate over the hashmap #}
{% for addr, timestamp in connections %}
<tr>
<td>{{ addr }}</td>
<td><time datetime="{{ timestamp }}">{{ timestamp }}</time></td>
</tr>
{% else %}
<tr>
<td colspan="2">No data available</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</body>
</html>

</html>

0 comments on commit e1ce2c6

Please sign in to comment.