forked from CWAD/circlewithadot.net
191 lines
5.0 KiB
HTML
191 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>ActivityPub Relay — circlewithadot.net</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link href="../style.css?v=20250831" rel="stylesheet" />
|
||
<style>
|
||
/* Relay-only CSS */
|
||
.relay-wrap {
|
||
max-width: 860px;
|
||
margin: 0 auto 60px;
|
||
padding: 0 16px;
|
||
text-align: left;
|
||
}
|
||
|
||
.relay-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
margin: 16px 0 10px;
|
||
}
|
||
.relay-header h1 {
|
||
font-size: 44px;
|
||
margin: 0 0 4px;
|
||
}
|
||
.relay-sub {
|
||
color: #9aa0a6;
|
||
margin: 0 0 18px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
/* logo next to header */
|
||
.relay-logo {
|
||
display: block;
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 12px;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.relay-card {
|
||
background: #121214;
|
||
border: 1px solid #1d1f21;
|
||
border-radius: 14px;
|
||
padding: 22px;
|
||
box-shadow: 0 14px 40px rgba(0,0,0,.45);
|
||
text-align: left;
|
||
}
|
||
|
||
.copy-list {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 12px;
|
||
margin: 10px 0 4px;
|
||
}
|
||
.copyable {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: #0f0f10;
|
||
border: 1px solid #26282a;
|
||
border-radius: 12px;
|
||
padding: 12px 14px;
|
||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||
font-size: 15px;
|
||
cursor: pointer;
|
||
user-select: all;
|
||
word-break: break-all;
|
||
}
|
||
.copyable:hover {
|
||
border-color: #34373a;
|
||
}
|
||
.copyable:focus-visible {
|
||
outline: 2px solid #e53935;
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.note {
|
||
color: #9aa0a6;
|
||
font-size: 14px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.stats {
|
||
margin-top: 14px;
|
||
color: #9aa0a6;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|
||
<script src="aprelay.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<header class="site-header">
|
||
<a class="brand" href="../index.html">
|
||
<img class="brand-logo" src="../images/cwad_logo.png" alt="Circle With A Dot logo" />
|
||
<span class="brand-name">CIRCLE WITH A DOT</span>
|
||
</a>
|
||
</header>
|
||
<main class="relay-wrap">
|
||
<header class="relay-header">
|
||
<img class="relay-logo" src="../images/aprelay_logo.png" alt="ActivityPub Relay logo" width="80" height="80">
|
||
<div>
|
||
<h1>ActivityPub Relay</h1>
|
||
<p class="relay-sub">Location: US East</p>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="relay-card">
|
||
<p><strong>Mastodon & Misskey users</strong></p>
|
||
<div class="copy-list">
|
||
<span
|
||
class="copyable"
|
||
role="button"
|
||
tabindex="0"
|
||
data-copy="https://relay-us-east.circlewithadot.net/inbox"
|
||
>
|
||
https://relay-us-east.circlewithadot.net/inbox
|
||
</span>
|
||
</div>
|
||
|
||
<p style="margin-top:14px;"><strong>Pleroma users</strong></p>
|
||
<div class="copy-list">
|
||
<span
|
||
class="copyable"
|
||
role="button"
|
||
tabindex="0"
|
||
data-copy="https://relay-us-east.circlewithadot.net/actor"
|
||
>
|
||
https://relay-us-east.circlewithadot.net/actor
|
||
</span>
|
||
</div>
|
||
|
||
<p class="note">Click any box to copy to your clipboard.</p>
|
||
|
||
<div id="relay-stats" class="stats" aria-live="polite">
|
||
Connected instances: <span id="instances">–</span><br />
|
||
Jobs (last five minutes): <span id="jobs">–</span><br />
|
||
Last update: <span id="updated">–</span><br />
|
||
<br />
|
||
Built using <a href="https://github.com/yukimochi/Activity-Relay" target="blank">Activity-Relay</a><br />
|
||
<br >
|
||
Only the above mentioned services are *officially* supported. Friendica and other instances may or may not work.
|
||
</div>
|
||
|
||
<noscript>
|
||
<p class="stats">
|
||
JavaScript is disabled. Copy the relay URLs above. Live stats require
|
||
JavaScript.
|
||
</p>
|
||
</noscript>
|
||
</section>
|
||
|
||
<footer class="site-footer" role="contentinfo">
|
||
<div class="footer-inner">
|
||
<div class="footer-left">
|
||
<a
|
||
href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="footer-text"
|
||
>
|
||
BY-NC-SA 4.0
|
||
</a>
|
||
</div>
|
||
|
||
<div class="footer-center">
|
||
<a
|
||
href="https://en.wikipedia.org/wiki/Copyleft"
|
||
target="_blank"
|
||
rel="noopener"
|
||
class="footer-icon"
|
||
aria-label="Copyleft (learn more)"
|
||
>
|
||
<img src="../images/cl.png" alt="Copyleft" />
|
||
</a>
|
||
</div>
|
||
|
||
<div class="footer-right footer-links">
|
||
<a href="../LICENSE">License</a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
|
||
<a rel="me" href="https://mastodon.circlewithadot.net/@incentive" hidden>
|
||
Mastodon</a>
|
||
</body>
|
||
</html>
|
||
|