2024-10-26 05:37:01 +09:00

107 lines
2.1 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="referrer" content="origin-when-cross-origin">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.blue.min.css">
<title>o.syui.ai | oauth service atproto</title>
</head>
<body>
<header>
<hgroup>
{% if g.user %}
{% endif %}
</hgroup>
<nav>
<ul>
<li><a href="/"><button class="secondary">o</button></a></li>
<li>live/video</li>
</ul>
<ul>
{% if g.user %}
<li><a href="{{ url_for('bsky_post') }}">post</a>
<li><a href="{{ url_for('oauth_refresh') }}">refresh</a>
<li><a href="{{ url_for('oauth_logout') }}"><button class="secondary">logout</button></a>
{% else %}
<li><a href="/about">about</a></li>
<!--
<button><a href="{{ url_for('oauth_login') }}">@</a>
-->
{% endif %}
<!--
<li><a href="https://github.com/bluesky-social/cookbook">Code</a>
-->
</ul>
</nav>
</header>
<main class="container">
<section class="content">
{% for message in get_flashed_messages() %}
<article>{{ message }}</article>
{% endfor %}
{% block content %}{% endblock %}
</section>
</main>
<style>
button a {
color: #fff;
}
iframe#livechat {
width: 100%;
height: 700px;
}
iframe#livestream {
width: 100%;
height: 700px;
}
button.oauth-login {
width: 100%;
}
footer {
text-align:center;
}
.container-1 {
display: flex;
.right-container {
position: sticky;
top: 0;
align-self: flex-start;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left:20px;
.content:first-of-type {
position: sticky;
bottom: 0;
}
}
}
.left-container {
width: 80%;
padding-bottom: 10px;
}
@media screen and (max-width: 959px) {
.left-container {
width: 100%;
}
iframe#livestream {
width: 100%;
min-height:300px;
height:100%;
}
.container-1 {
display: block;
}
}
</style>
<footer>©syui</footer>
</body>
</html>