bridgy-fed/templates/index.html

71 wiersze
4.3 KiB
HTML

{% set body_id = 'front' %}
{% extends "base.html" %}
{% block content %}
<script src="/static/jquery-3.7.1.slim.min.js"></script>
<script src="/static/bootstrap.min.js"></script>
<script src="/static/index.js"></script>
<!-- For Mastodon profile link verification
https://fed.brid.gy/docs#mastodon-link-verification
-->
<a rel="me" href="https://ap.brid.gy/"></a>
<a rel="me" href="https://bsky.brid.gy/"></a>
<a rel="me" href="https://fed.brid.gy/"></a>
<a rel="me" href="https://web.brid.gy/"></a>
<div id="front-form" class="row front-dark">
<div id="topology" style="position: absolute; top: 0; left: 0"></div>
<div id="front-tagline" class="row bigger">
<em class="front-form-text">
Bridging the new <br class="visible-xs-inline"> social internet
</em>
</div>
</div>
<div class="row big front-light">
<p>Bridgy Fed connects <a class="web" href="https://indieweb.org/">🌐 web sites</a>, the <a class="fediverse" href="https://enwp.org/fediverse"><img src="/static/fediverse_logo.svg"> fediverse</a>, and <a class="bluesky" href="https://bsky.social/"><img src="/oauth_dropins_static/bluesky.svg"> Bluesky</a>. You can use it to make your profile on one visible in another, follow people, see their posts, and reply and like and repost them. Interactions work in both directions as much as possible. <a href="/docs">See the docs for more info.</a></p>
</div>
<div class="row big front-dark">
<p>Got a <span class="web">🌐 web</span> site? Enter it here to use it on the <a class="fediverse" href="https://en.wikipedia.org/wiki/Fediverse"><img src="/static/fediverse_logo.svg"> fediverse</a>:
<form method="post" action="/web-site">
<input required type="url" name="url" id="url" placeholder="example.com" />
<input type="submit" class="btn btn-default" value="Go" />
</form>
</p>
</div>
<div class="row big front-light">
<p>⚠️ BETA ⚠️<br>
Got a <a class="fediverse" href="https://en.wikipedia.org/wiki/Fediverse"><img src="/static/fediverse_logo.svg"> fediverse</a> account? <a href="/docs#fediverse-get-started">Bridge it to <span class="bluesky"><img src="/oauth_dropins_static/bluesky.svg"> Bluesky</span></a> by following <span class="handle">@bsky.brid.gy@bsky.brid.gy<button class="btn btn-default btn-copy glyphicon glyphicon-duplicate" onclick="navigator.clipboard.writeText('@bsky.brid.gy@bsky.brid.gy')"></button></span>. <!-- <a href="/docs#fediverse-get-started">More details.</a> --></p>
<br>
<p>Or, <a href="/docs#fediverse-follow-web">follow a <span class="web">🌐 web</span> site</a> like <a class="handle" href="https://example.com/">example.com</a> by searching for <span class="handle">@example.com@web.brid.gy<button class="btn btn-default btn-copy glyphicon glyphicon-duplicate" onclick="navigator.clipboard.writeText('@example.com@web.brid.gy')"></button></span>. <!-- <a href="/docs#fediverse-follow-web">More details.</a> --></p>
</ul>
</div>
<div class="row big front-dark">
<p>⚠️ BETA ⚠️<br>
Got a <a class="bluesky" href="https://bsky.social/"><img src="/oauth_dropins_static/bluesky.svg"> Bluesky</a> account? <a href="/docs#bluesky-get-started">Bridge it to the <span class="fediverse"><img src="/static/fediverse_logo.svg"> fediverse</span></a> by following <a class="handle" href="https://bsky.app/profile/ap.brid.gy">@ap.brid.gy</a>. <!-- <a href="http://localhost:8080/docs#bluesky-get-started">More details.</a> --></p>
</ul>
</div>
<!-- <div class="row big front-light"> -->
<!-- <p><a href="https://en.wikipedia.org/wiki/Nostr">Nostr</a> and <a href="https://www.farcaster.xyz/">Farcaster</a> are under consideration for the future.</p> -->
<!-- </div> -->
<div class="row big front-light">
<p>Bridgy Fed is a free, non-commercial, <a href="https://github.com/snarfed/bridgy-fed">open source</a> service. <a href="https://snarfed.org/2023-11-27_re-introducing-bridgy-fed">More background here.</a> <a href="https://github.com/snarfed/bridgy-fed/issues">Bug reports, feature requests</a>, and <a href="mailto:feedback@brid.gy">other feedback</a> are welcome!</a></p>
</div>
<div id="front-logo-bottom" class="row">
<p id="logo-img-bottom" class="col-sm-4 col-xs-6 col-sm-offset-4 col-xs-offset-3">
<img src="/static/bridgy_logo_with_alpha.png" class="center-block img-responsive" />
</p>
</div>
<script src="static/q5.min.js"></script>
<script src="static/topology.js"></script>
{% endblock %}