152 lines
3.2 KiB
HTML
152 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>sbp forum notifications</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<style>
|
|
:root {
|
|
--sbp-orange: #f57c00;
|
|
--sbp-orange-dark: #c95f00;
|
|
--bg: #f6f6f6;
|
|
--card: #ffffff;
|
|
--text: #333333;
|
|
--muted: #777777;
|
|
--border: #e2e2e2;
|
|
--hint: #fff3e0;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Segoe UI", Arial, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
|
|
main {
|
|
max-width: 720px;
|
|
margin: 40px auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
padding: 28px;
|
|
}
|
|
|
|
.logo {
|
|
margin-bottom: 12px;
|
|
color: var(--sbp-orange);
|
|
font-size: 1.6rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
h1 {
|
|
margin: 0 0 12px;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
p {
|
|
margin: 0 0 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.hint {
|
|
margin-top: 18px;
|
|
padding: 16px;
|
|
background: var(--hint);
|
|
border-left: 4px solid var(--sbp-orange);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
margin-top: 14px;
|
|
padding: 10px 16px;
|
|
color: #ffffff;
|
|
background: var(--sbp-orange);
|
|
border-radius: 5px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.button:hover,
|
|
.button:focus {
|
|
background: var(--sbp-orange-dark);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.target-url {
|
|
display: block;
|
|
margin-top: 12px;
|
|
overflow-wrap: anywhere;
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
footer {
|
|
margin-top: 24px;
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<div class="card">
|
|
<div class="logo">sbp forum</div>
|
|
|
|
<h1>Forum activity notification</h1>
|
|
|
|
<p>
|
|
This Microsoft Teams app is a <strong>lightweight notifier</strong>.
|
|
It informs you about new activity in the sbp forum.
|
|
</p>
|
|
|
|
<div id="post-panel" class="hint" hidden>
|
|
<strong>Open the related forum post:</strong><br>
|
|
<a
|
|
id="forum-link"
|
|
class="button"
|
|
href="https://forum.sbp.de/notifications"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Open forum post</a>
|
|
<span id="target-url" class="target-url"></span>
|
|
</div>
|
|
|
|
<div id="fallback-panel" class="hint">
|
|
<strong>How to continue:</strong><br>
|
|
Please open the forum directly to view and manage your notifications:<br>
|
|
<a
|
|
class="button"
|
|
href="https://forum.sbp.de/notifications"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>Open forum notifications</a>
|
|
</div>
|
|
|
|
<footer>
|
|
Notifications are intentionally kept read-only in Microsoft Teams.
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="https://res.cdn.office.net/teams-js/2.19.0/js/MicrosoftTeams.min.js"></script>
|
|
<script src="/static/flarum-notify-v2.js" defer></script>
|
|
</body>
|
|
</html>
|
|
|