132 lines
3.9 KiB
Plaintext
132 lines
3.9 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>lykin</title>
|
|
<meta name="description" content="lykin: an SSB tutorial application">
|
|
<meta name="author" content="glyph">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<style>
|
|
.nav {
|
|
grid-area: nav;
|
|
border: 5px solid #19A974;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.peers {
|
|
grid-area: peers;
|
|
border: 5px solid #357EDD;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.posts {
|
|
grid-area: posts;
|
|
border: 5px solid #FF6300;
|
|
border-radius: 15px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.content {
|
|
border: 5px solid #FFD700;
|
|
border-radius: 15px;
|
|
grid-area: content;
|
|
}
|
|
|
|
.container {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.flex-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.grid-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: 1fr 200px 4fr;
|
|
grid-template-areas:
|
|
'nav nav nav nav nav'
|
|
'peers posts posts posts posts'
|
|
'peers content content content content';
|
|
grid-gap: 10px;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
padding-top: 5px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.grid-container > div {
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
/* text-align: center; */
|
|
padding: 20px 0;
|
|
/* font-size: 30px; */
|
|
}
|
|
|
|
.flex-container {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.flex-container > input {
|
|
margin: 5px;
|
|
}
|
|
|
|
a { text-decoration: none; color: black; }
|
|
</style>
|
|
</head>
|
|
<body class="container">
|
|
<a href="/"><h1 style="margin-left: 15px;">lykin</h1></a>
|
|
<div class="grid-container">
|
|
<div class="nav">
|
|
<div class="flex-container">
|
|
<a href="/" style="margin-left: 20px;"><img src="/icons/download.png" style="width: 55px;"></a>
|
|
<a href="/" style="margin-left: 20px;"><img src="/icons/read_post.png" style="width: 55px;"></a>
|
|
<a href="/" style="margin-left: 20px;"><img src="/icons/unread_post.png" style="width: 55px;"></a>
|
|
<a href="/" style="margin-left: 20px;"><img src="/icons/delete_post.png" style="width: 55px;"></a>
|
|
<form class="flex-container" style="margin-left: auto; margin-right: 10px;" action="/subscribe" method="post">
|
|
<label for="public_key">Public Key</label>
|
|
<input type="text" id="public_key" name="public_key" size=50 maxlength=53>
|
|
<input type="submit" value="Subscribe">
|
|
<input type="submit" value="Unsubscribe" formaction="/unsubscribe">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="peers" style="text-align: center;">
|
|
<ul style="padding-left: 0;">
|
|
{% for peer in peers -%}
|
|
<li style="list-style: none; font-size: 12px;">
|
|
<a href="/posts/{{ peer | replace(from="/", to="%2F") }}">
|
|
<code style="word-wrap: anywhere;{% if selected_peer and peer == selected_peer %} font-weight: bold;{% endif %}">{{ peer }}</code>
|
|
</a>
|
|
</li>
|
|
{%- endfor %}
|
|
</ul>
|
|
</div>
|
|
<div class="posts">
|
|
{% if posts %}
|
|
<ul style="padding-left: 25px;">
|
|
{% for post in posts -%}
|
|
<li class="flex" style="list-style: none; font-size: 12px;">
|
|
<a href="/posts/{{ selected_peer | replace(from="/", to="%2F") }}/{{ post.key | replace(from="/", to="%2F") }}">
|
|
<code style="word-wrap: anywhere;{% if selected_post and post.key == selected_post %} font-weight: bold;{% endif %}">{{ post.key }}</code>
|
|
| {{ post.date }}
|
|
</a>
|
|
</li>
|
|
{%- endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
</div>
|
|
<div class="content">
|
|
{% if post %}
|
|
{{ post.text }}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|