Ethan Dalool
da5c1ee008
Tags on photos can now have timestamps, so that if you are tagging a video or audio you can reference a specific moment with your tag. In the interface, this means the tag is clickable and seeks to that point in the media. For the user interface, I am finding I need to move away from jinja for the object cards because it is too much hassle to keep the code for jinja-based cards for static rendering and the js-based cards for dynamic rendering in sync. Rather than write the same cards in two languages I can dump the JSON into the script and render the cards on load. Which makes the static HTML worse but that's what the JSON API is for anyway.
93 lines
2.6 KiB
HTML
93 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html class="theme_{{theme}}">
|
|
<head>
|
|
<title>Etiquette</title>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<link rel="icon" href="/favicon.png" type="image/png"/>
|
|
<link rel="stylesheet" href="/static/css/common.css">
|
|
<link rel="stylesheet" href="/static/css/etiquette.css">
|
|
<script src="/static/js/common.js"></script>
|
|
<script src="/static/js/api.js"></script>
|
|
<script src="/static/js/http.js"></script>
|
|
|
|
<style>
|
|
body
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
}
|
|
body > #motd,
|
|
body > .link_group,
|
|
body > .nice_link
|
|
{
|
|
width: 90%;
|
|
max-width: 600px;
|
|
}
|
|
.link_group
|
|
{
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: 1fr;
|
|
grid-gap: 8px;
|
|
}
|
|
.nice_link
|
|
{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 40px;
|
|
background-color: var(--color_transparency);
|
|
}
|
|
.nice_link:hover
|
|
{
|
|
background-color: var(--color_secondary);
|
|
}
|
|
#motd
|
|
{
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<p id="motd">
|
|
{%- if motd is string -%}
|
|
{{motd}}
|
|
{%- elif motd[0] == "html" -%}
|
|
{{motd[1]|safe}}
|
|
{%- else -%}
|
|
{{motd[1]}}
|
|
{%- endif -%}
|
|
</p>
|
|
<a class="nice_link navigation_link" href="/search">Search</a>
|
|
<a class="nice_link navigation_link" href="/tags">Browse tags</a>
|
|
<a class="nice_link navigation_link" href="/albums">Browse albums</a>
|
|
<a class="nice_link navigation_link" href="/bookmarks">Bookmarks</a>
|
|
{% if request.session.user %}
|
|
<a class="nice_link navigation_link" href="/userid/{{request.session.user.id}}">{{request.session.user.display_name}}</a>
|
|
{% else %}
|
|
<a class="nice_link navigation_link" href="/login">Log in</a>
|
|
{% endif %}
|
|
{% if request.is_localhost %}
|
|
<a class="nice_link navigation_link" href="/admin">Admin</a>
|
|
{% endif %}
|
|
<div class="link_group">
|
|
<a class="nice_link navigation_link" href="/?theme=turquoise">Turquoise</a>
|
|
<a class="nice_link navigation_link" href="/?theme=slate">Slate</a>
|
|
<a class="nice_link navigation_link" href="/?theme=pearl">Pearl</a>
|
|
</div>
|
|
<div class="link_group">
|
|
<a class="nice_link navigation_link" href="https://www.github.com/voussoir/etiquette">GitHub</a>
|
|
<a class="nice_link navigation_link" href="https://www.gitlab.com/voussoir/etiquette">GitLab</a>
|
|
<a class="nice_link navigation_link" href="https://www.codeberg.org/voussoir/etiquette">Codeberg</a>
|
|
</div>
|
|
</body>
|
|
|
|
<script type="text/javascript">
|
|
</script>
|
|
</html>
|