diff --git a/static/index.js b/static/index.js new file mode 100644 index 0000000..e01c740 --- /dev/null +++ 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) +}) diff --git a/static/nostr_logo.png b/static/nostr_logo.png new file mode 100644 index 0000000..6436d87 Binary files /dev/null and b/static/nostr_logo.png differ diff --git a/static/style.css b/static/style.css index 41f6b2e..21e6aac 100644 --- 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; diff --git a/templates/base.html b/templates/base.html index 49653f7..115cd7a 100644 --- a/templates/base.html +++ b/templates/base.html @@ -43,9 +43,10 @@ @@ -53,12 +54,10 @@ {% endblock %} diff --git a/templates/docs.html b/templates/docs.html index e77ed4a..2f351da 100644 --- a/templates/docs.html +++ b/templates/docs.html @@ -204,7 +204,7 @@ Your site's fediverse profile comes from the I hate this! How do I opt out?
  • -

    Sorry to hear it! Just put the text #nobridge or #nobot in your profile bio, refresh your profile on your Bridgy Fed user page, and it will stop bridging your account.

    +

    Sorry to hear it! Just put the text #nobridge or #nobot in your profile bio, refresh your profile on your Bridgy Fed user page, and it will stop bridging your account. Or feel free to contact us privately.

    • diff --git a/templates/index.html b/templates/index.html index 6d641af..acab237 100644 --- a/templates/index.html +++ b/templates/index.html @@ -3,63 +3,124 @@ {% block content %} + -
    +
    + + + +
    + + Bridging the new social internet +
    I'm on -
    +
    -
    I want to follow someone on -
    +
    -
    +
    + +

    +Use a feed reader! +

    + +
    +

    Enter your web site:

    +
    + + +
    +
    + +

    +To follow the web site example.com, search for @example.com@web.brid.gy on your fediverse instance. +

    + +

    +Search for them on your instance. +

    +
    + + +
    +

    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. See the docs for more information.

    + + + +
    +

    Bridgy Fed is a free, non-commercial, open source service. Feedback and bug reports are welcome!

    +
    +
    + + +
    +

    + +

    +
    +