front page redesign: misc

* follow instructions and code * vertical center buttons * more content
2023-12-11 16:17:05 -08:00 · 2023-12-11 16:17:05 -08:00 · e8b79a0c0a
commit e8b79a0c0a
--- a/static/index.js
+++ b/static/index.js
@ -0,0 +1,21 @@
+/**
+ * Code for the home page protocol picker.
+ */
+
+function update() {
+  // show matching instructions
+  // console.log($('.instruction'))
+  for (instr of $('.instruction')) {
+    let parts = instr.id.split('-')
+    let me = parts[1]
+    let them = parts[2]
+    // console.log(me, them, $(`#me-${me}`)[0].checked, $(`#them-${them}`)[0].checked)
+    instr.style.display =
+      ($(`#me-${me}`)[0].checked && $(`#them-${them}`)[0].checked)
+      ? 'block' : 'none'
+  }
+}
+
+addEventListener('DOMContentLoaded', () => {
+  $('input').on('change', update)
+})
--- a/static/nostr_logo.png
+++ b/static/nostr_logo.png
--- a/static/style.css
+++ b/static/style.css
@ -9,6 +9,7 @@
  margin: 0;
  margin-bottom: 2em;
  padding: 1em;
+  padding-bottom: 0.5em;
  background-color: #FFFFFF80;
  /* TODO: box-shadow alpha to blend into topology */
 }
@ -45,6 +46,10 @@ pre .value, code .value, code.value {
  color: chocolate;
 }

+.handle {
+  font-family: monospace;
+}
+
 .row {
  text-align: center;
  margin-bottom: 1em;
@ -63,6 +68,21 @@ pre .value, code .value, code.value {
 .front {
  text-align: left;
  margin-left: 2em;
+  display: flex;
+  align-items: center;
+}
+
+#front-tagline {
+  margin-top: 1.5em;
+  margin-bottom: 1.5em;
+}
+
+.front > span {
+  text-align: right;
+}
+
+.front label {
+  font-size: 1em;
 }

 .front label img {
@ -70,6 +90,48 @@ pre .value, code .value, code.value {
  margin-top: -.2em;
 }

+.nostr img {
+  height: 1.4em !important;
+}
+
+.front-instructions {
+  margin: 1em;
+  margin-left: 2em;
+  margin-right: 2em;
+  min-height: 4em;
+}
+
+.instruction {
+  display: none;
+}
+
+.front .btn-group > .btn {
+  float: none;  /* separate buttons */
+  border-radius: .2em !important;
+}
+
+.btn.web {
+  background-color: #47c986;
+}
+
+.btn.fediverse {
+  background-color: #c94786;
+}
+
+.btn.atproto {
+  background-color: #4786c9;
+}
+
+.btn.nostr {
+  background-color: #5E287D;
+}
+
+/* #logo-img-bottom { */
+/*   text-align: center; */
+/*   /\* margin-left: auto; *\/ */
+/*   /\* margin-right: auto; *\/ */
+/* } */
+
 #listen-signups input, #webmention-signups input {
  margin: .5em;
 }
@ -398,7 +460,6 @@ input[type="submit"] {
 }

 #footer {
-  margin-top: 2em;
  margin-bottom: 1em;
  margin-right: 1em;
  text-align: right;
--- a/templates/base.html
+++ b/templates/base.html
@ -43,9 +43,10 @@
  </div>

 <div id="header" class="col-xs-4 col-xs-offset-3">
-  <a href="/docs">Docs</a>
-  | <a href="https://snarfed.org/?s=%22bridgy+fed%22">News</a>
-  | <a href="https://github.com/snarfed/bridgy-fed">Open source</a>
+  <a href="/docs">Docs</a> &nbsp;
+  <a href="https://snarfed.org/?s=%22bridgy+fed%22">News</a> &nbsp;
+  <a href="mailto:feedback@brid.gy">Feedback</a> &nbsp;
+  <a href="https://github.com/snarfed/bridgy-fed">Source</a>
 </div>
 </div>

@ -53,12 +54,10 @@
 {% endblock %}

 <div id="footer">
-  <a href="/docs">Docs</a>
-  | <a href="https://snarfed.org/?s=%22bridgy+fed%22">News</a>
-  | <a href="https://github.com/snarfed/bridgy-fed/issues">Bug?</a>
-  | <a href="https://github.com/snarfed/bridgy-fed">Open source</a>
-  | <a href="https://indieweb.org/">#IndieWeb</a>
-  | <a href="https://brid.gy/">Bridgy</a>
+  <a href="/docs">Docs</a> &nbsp;
+  <a href="https://snarfed.org/?s=%22bridgy+fed%22">News</a> &nbsp;
+  <a href="mailto:feedback@brid.gy">Feedback</a> &nbsp;
+  <a href="https://github.com/snarfed/bridgy-fed">Source</a>
 </div>

 </div>
--- a/templates/docs.html
+++ b/templates/docs.html
@ -204,7 +204,7 @@ Your site's fediverse profile comes from the <a href="https://microformats.org/w

 <li id="opt-out" class="question">I hate this! How do I opt out?</li>
 <li class="answer">
-<p>Sorry to hear it! Just put the text <code>#nobridge</code> or <code>#nobot</code> in your profile bio, refresh your profile on your Bridgy Fed user page, and it will stop bridging your account.</p>
+<p>Sorry to hear it! Just put the text <code>#nobridge</code> or <code>#nobot</code> in your profile bio, refresh your profile on your Bridgy Fed user page, and it will stop bridging your account. Or feel free to <a href="mailto:opt-out@brid.gy">contact us privately.</a></p>
 </li>


--- a/templates/index.html
+++ b/templates/index.html
@ -3,63 +3,124 @@
 {% 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="topology" style="position: fixed; top: 0; left: 0"></div>
+<div id="topology" style="position: absolute; top: 0; left: 0"></div>
+
+<!--
+nostr purple
+web blue? green? globe
+fediverse pink?
+bluesky light blue
+ -->
+<!-- <div id="front-form"></div> -->
+<div id="front-tagline" class="row bigger">
+  <!-- The decentralized social bridge -->
+  <em>Bridging the new social internet</em>
+</div>

 <div id="front-me" class="row front">
 <span class="col-sm-4 bigger">I'm on</span>
-<div class="col-sm-8 bigger">
+<div class="col-sm-8 big">
  <div class="btn-group" role="group" data-toggle="buttons" aria-label="I'm on">
-  <label for="me-web" class="btn btn-primary">
+  <label for="me-web" class="btn btn-primary web">
    <input name="me" id="me-web" type="radio">
    🌐 <!-- globe_with_meridians -->
    <!-- 🌏 globe_showing_asia-australia -->
    Web
  </label>
-  <label for="me-web" class="btn btn-primary">
-    <input name="me" id="me-web" type="radio">
+  <label for="me-fediverse" class="btn btn-primary fediverse">
+    <input name="me" id="me-fediverse" type="radio">
    <img src="/static/fediverse_logo.svg">
    Fediverse
  </label>
-  <label for="me-web" class="btn btn-primary">
-    <input name="me" id="me-web" type="radio">
+  <label for="me-atproto" class="btn btn-primary atproto disabled"
+         title="Coming soon">
+    <input name="me" id="me-atproto" type="radio">
    <img src="/static/atproto_logo.png">
    Bluesky
  </label>
-
-  <!-- <button type="button" class="btn btn-default big" id="me-bluesky"> -->
-  <!--   <img src="/static/atproto_logo.png"> -->
-  <!--   Bluesky -->
-  <!-- </button> -->
+  <label for="me-nostr" class="btn btn-primary nostr disabled"
+         title="Coming soon">
+    <input name="me" id="me-nostr" type="radio">
+    <img src="/static/nostr_logo.png">
+    Nostr
+  </label>
 </div>
 </div>
 </div>

 <div id="front-them" class="row front">
 <span class="col-sm-4 bigger">I want to follow someone on</span>
-<div class="col-sm-8 bigger">
+<div class="col-sm-8 big">
 <div class="btn-group" role="group" data-toggle="buttons"
     aria-label="...and I want to follow someone on">
-  <label for="them-web" class="btn btn-primary">
+  <label for="them-web" class="btn btn-primary web">
    <input name="them" id="them-web" type="radio">
-    🌐 <!-- globe_with_meridians -->
-    <!-- 🌏 globe_showing_asia-australia -->
-    Web
+    🌐 Web
  </label>
-  <label for="them-web" class="btn btn-primary">
-    <input name="them" id="them-web" type="radio">
+  <label for="them-fediverse" class="btn btn-primary fediverse">
+    <input name="them" id="them-fediverse" type="radio">
    <img src="/static/fediverse_logo.svg">
    Fediverse
  </label>
-  <label for="them-web" class="btn btn-primary">
-    <input name="them" id="them-web" type="radio">
+  <label for="them-atproto" class="btn btn-primary atproto disabled"
+         title="Coming soon">
+    <input name="them" id="them-atproto" type="radio">
    <img src="/static/atproto_logo.png">
    Bluesky
  </label>
+  <label for="them-nostr" class="btn btn-primary nostr disabled"
+         title="Coming soon">
+    <input name="them" id="them-nostr" type="radio">
+    <img src="/static/nostr_logo.png">
+    Nostr
+  </label>
 </div>
 </div>
 </div>

+<div class="row big front-instructions">
+
+<p id="front-web-web" class="instruction">
+<a href="https://indieweb.org/reader">Use a feed reader!</a>
+</p>
+
+<div id="front-web-fediverse" class="instruction">
+<p>Enter your web site:</p>
+<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="OK" />
+</form>
+</div>
+
+<p id="front-fediverse-web" class="instruction">
+To follow the web site <span class="handle">example.com</span>, search for <span class="handle">@example.com@web.brid.gy</span> on your fediverse instance.
+</p>
+
+<p id="front-fediverse-fediverse" class="instruction">
+<a href="https://docs.joinmastodon.org/user/network/#follow">Search for them on your instance.</a>
+</p>
+</div>
+<!-- </div> <\!-- front-form -\-> -->
+
+<div class="row big">
+<p>Bridgy Fed connects many popular decentralized social networks. You can use it from one network to follow people on others, 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 information.</a></p>
+
+<!-- <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> -->
+
+<br>
+<p>Bridgy Fed is a free, non-commercial, open source service. <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>
+<br>
+</div>
+
+<!-- <div class="row big"> -->
+<div 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>