{% 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>

<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">
  <!-- The decentralized social bridge -->
  <em class="front-form-text">
    Bridging the new <br class="visible-xs-inline"> social internet
  </em>
</div>

<div class="row">
  <table id="front-table">
    <tr class="th-top">
      <th colspan="2"></th>
      <th colspan="4">I want to follow...</th>
    </tr>
    <tr class="th-top">
      <th colspan="2"></th>
      <th>Web: example.com</th>
      <th>Fediverse: @user@instance.com</th>
      <th>Bluesky: @example.com</th>
      <th>Nostr: npubxyz</th>
    </tr>
    <tr>
      <th rowspan="4" class="th-left">I'm on...</th>
      <th class="th-left">Web</th>
      <td>-</td>
      <td colspan="3">
        Enter your web site:
        <form method="post" action="/web-site">
          <input required type="url" name="url" id="url" placeholder="snarfed.org" />
          <input type="submit" class="btn btn-default" value="Go" />
        </form>
      </td>
    </tr>
    <tr>
      <th class="th-left">Fediverse</th>
      <td>@example.com@web.brid.gy</td>
      <td>-</td>
      <td>@example.com@atp.brid.gy</td>
      <td>@npubxyz@nostr.brid.gy</td>
    </tr>
    <tr>
      <th class="th-left">Bluesky</th>
      <td>example.com.web.brid.gy</td>
      <td>example.com.atp.brid.gy</td>
      <td>-</td>
      <td>npubxyz.nostr.brid.gy</td>
    </tr>
    <tr>
      <th class="th-left">Nostr</th>
      <td>@example.com@web.brid.gy</td>
      <td>@example.com@ap.brid.gy</td>
      <td>@example.com@atp.brid.gy</td>
      <td>-</td>
    </tr>
  </table>
</div>

</div>
</div> <!-- front-form -->

<div class="row big front-light">
<p>Bridgy Fed connects many popular decentralized social networks. You can use it from one network to follow people on another, see their posts, and reply and like and repost like normal. All interactions work in both directions. <a href="/docs">See the docs for more info.</a></p>
</div>

<!-- <p>Blocks, mutes, and other native moderation features work automatically. You can opt out of Bridgy Fed by adding <em>#nobridge</em> or <em>#nobots</em> to your bio or <a href="mailto:opt-out@brid.gy">by private email request</a>.</p> -->

<div class="row big front-dark">
<p>Bridgy Fed currently supports web sites and blogs and the <a href="https://enwp.org/fediverse">fediverse</a> via <a href="https://activitypub.rocks/">ActivityPub</a>. More networks like <a href="https://blueskyweb.xyz/">Bluesky</a>/<a href="https://atproto.com/">AT Protocol</a> and <a href="https://en.wikipedia.org/wiki/Nostr">Nostr</a> are coming soon!</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="mailto:feedback@brid.gy">Feedback</a> and <a href="https://github.com/snarfed/bridgy-fed/issues">bug reports</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 %}