[tor-commits] [bridgedb] 35/66: Refactor the support footer, make support questions expandable

gitolite role git at cupani.torproject.org
Wed Jul 27 18:32:40 UTC 2022


This is an automated email from the git hooks/post-receive script.

meskio pushed a commit to branch main
in repository bridgedb.

commit e8a373d11660b4d89919cd4a600d6568cbd48ad4
Author: kez <kez at torproject.org>
AuthorDate: Wed Jun 8 14:27:23 2022 -0700

    Refactor the support footer, make support questions expandable
---
 frontend/assets/scss/_bridges.scss                 | 14 +++-
 frontend/content/bridges/contents.lr               | 16 +---
 frontend/content/captcha/contents.lr               | 16 +---
 frontend/content/contents.lr                       | 13 ----
 frontend/content/howto/contents.lr                 | 16 +---
 frontend/content/options/contents.lr               |  4 +-
 frontend/templates/bridges.html                    | 85 ++++++++++++++++++++--
 .../templates/{hero-captcha.html => captcha.html}  |  2 +
 frontend/templates/hero-bridge-lines.html          | 81 ---------------------
 frontend/templates/home.html                       |  2 +
 frontend/templates/homepage.html                   |  5 --
 frontend/templates/{hero-howto.html => howto.html} |  2 +
 frontend/templates/options.html                    | 55 ++++++--------
 frontend/templates/support.jinja2                  | 27 +++++++
 14 files changed, 155 insertions(+), 183 deletions(-)

diff --git a/frontend/assets/scss/_bridges.scss b/frontend/assets/scss/_bridges.scss
index 4138fdc..8d41d78 100644
--- a/frontend/assets/scss/_bridges.scss
+++ b/frontend/assets/scss/_bridges.scss
@@ -12,8 +12,18 @@
     padding: 20px;
 }
 
-#bridgedb-support-body h3 {
-    color: #7D4698;
+#bridgedb-support-body {
+    h3 {
+        color: #7D4698;
+    }
+
+    summary {
+        list-style: none;
+
+        &:hover {
+            cursor: pointer;
+        }
+    }
 }
 
 .bg-dark {
diff --git a/frontend/content/bridges/contents.lr b/frontend/content/bridges/contents.lr
index e3b347e..a66b801 100644
--- a/frontend/content/bridges/contents.lr
+++ b/frontend/content/bridges/contents.lr
@@ -4,24 +4,12 @@ section_id: home
 ---
 color: primary
 ---
-_template: bridges.html
+_template: homepage.html
 ---
 title: BridgeDB
 ---
 path_bar: Get Bridges!
 ---
-html: hero-bridge-lines.html
+html: bridges.html
 ---
 body:
-
-### What are bridges?
-
-[Bridges](https://tb-manual.torproject.org/bridges/) are Tor relays that help you circumvent censorship.
-
-### I need an alternative way of getting bridges!
-
-Another way to get bridges is to send an email to [bridges at torproject.org](mailto:bridges at torproject.org). Leave the email subject empty and write "get transport obfs4" in the email's message body. Please note that you must send the email using an address from one of the following email providers: [Riseup](https://riseup.net/) or [Gmail](https://mail.google.com/).
-
-###My bridges don't work! I need help!
-
-If your Tor Browser cannot connect, please take a look at the [Tor Browser Manual](https://tb-manual.torproject.org/circumvention/) and our [Support Portal](https://support.torproject.org/#censorship).
diff --git a/frontend/content/captcha/contents.lr b/frontend/content/captcha/contents.lr
index 2fcfada..0c01b94 100644
--- a/frontend/content/captcha/contents.lr
+++ b/frontend/content/captcha/contents.lr
@@ -4,24 +4,12 @@ section_id: home
 ---
 color: primary
 ---
-_template: bridges.html
+_template: homepage.html
 ---
 title: BridgeDB
 ---
 path_bar: Get Bridges!
 ---
-html: hero-captcha.html
+html: captcha.html
 ---
 body:
-
-### What are bridges?
-
-[Bridges](https://tb-manual.torproject.org/bridges/) are Tor relays that help you circumvent censorship.
-
-### I need an alternative way of getting bridges!
-
-Another way to get bridges is to send an email to [bridges at torproject.org](mailto:bridges at torproject.org). Leave the email subject empty and write "get transport obfs4" in the email's message body. Please note that you must send the email using an address from one of the following email providers: [Riseup](https://riseup.net/) or [Gmail](https://mail.google.com/).
-
-### My bridges don't work! I need help!
-
-If your Tor Browser cannot connect, please take a look at the [Tor Browser Manual](https://tb-manual.torproject.org/circumvention/) and our [Support Portal](https://support.torproject.org/#censorship).
diff --git a/frontend/content/contents.lr b/frontend/content/contents.lr
index dfdc73c..89e953a 100644
--- a/frontend/content/contents.lr
+++ b/frontend/content/contents.lr
@@ -15,16 +15,3 @@ intro:
 ### BridgeDb can provide bridges with several types of Pluggable Transports, which can help obfuscate your connections to the Tor Network, making it more difficult for anyone watching your internet traffic to determine that you are using Tor.
 ---
 body:
-
-### What are bridges?
-
-[Bridges](https://tb-manual.torproject.org/bridges/) are Tor relays that help you circumvent censorship.
-
-### I need an alternative way of getting bridges!
-
-Another way to get bridges is to send an email to [bridges at torproject.org](mailto:bridges at torproject.org). Leave the email subject empty and write "get transport obfs4" in the email's message body. Please note that you must send the email using an address from one of the following email providers: [Riseup](https://riseup.net/) or [Gmail](https://mail.google.com/).
-
-### My bridges don't work! I need help!
-
-If your Tor Browser cannot connect, please take a look at the [Tor Browser Manual](https://tb-manual.torproject.org/circumvention/) and our [Support Portal](https://support.torproject.org/#censorship).
-
diff --git a/frontend/content/howto/contents.lr b/frontend/content/howto/contents.lr
index e2f6785..a62c8e1 100644
--- a/frontend/content/howto/contents.lr
+++ b/frontend/content/howto/contents.lr
@@ -4,24 +4,12 @@ section_id: home
 ---
 color: primary
 ---
-_template: bridges.html
+_template: homepage.html
 ---
 title: BridgeDB
 ---
 path_bar: Get Bridges!
 ---
-html: hero-howto.html
+html: howto.html
 ---
 body:
-
-### What are bridges?
-
-[Bridges](https://tb-manual.torproject.org/bridges/) are Tor relays that help you circumvent censorship.
-
-### I need an alternative way of getting bridges!
-
-Another way to get bridges is to send an email to [bridges at torproject.org](mailto:bridges at torproject.org). Leave the email subject empty and write "get transport obfs4" in the email's message body. Please note that you must send the email using an address from one of the following email providers: [Riseup](https://riseup.net/) or [Gmail](https://mail.google.com/).
-
-###My bridges don't work! I need help!
-
-If your Tor Browser cannot connect, please take a look at the [Tor Browser Manual](https://tb-manual.torproject.org/circumvention/) and our [Support Portal](https://support.torproject.org/#censorship).
diff --git a/frontend/content/options/contents.lr b/frontend/content/options/contents.lr
index b7ed9ed..e2f216a 100644
--- a/frontend/content/options/contents.lr
+++ b/frontend/content/options/contents.lr
@@ -4,13 +4,13 @@ section_id: home
 ---
 color: primary
 ---
-_template: options.html
+_template: homepage.html
 ---
 title: BridgeDB
 ---
 path_bar: Get Bridges!
 ---
-html:
+html: options.html
 ---
 body:
 
diff --git a/frontend/templates/bridges.html b/frontend/templates/bridges.html
index 04fab12..3106fdd 100644
--- a/frontend/templates/bridges.html
+++ b/frontend/templates/bridges.html
@@ -1,10 +1,83 @@
-{% extends'homepage.html' %}
+{% if envvars('ENV') == 'dev' %}
+<script src="{{ '/static/js/bridges.js' | asseturl }}"></script>
+{% elif envvars('ENV') == 'prod' %}
+<script src="/static/js/bridges.js"></script>
+{% else %}
+{# if you got here, it means you didn't set the LEKTOR_ENV variable to a correct value. set it to prod/dev and try again #}
+{{ 0/0 }}
+{% endif %}
 
-{% block body %}
+<div id="container-bridges">
+    <!-- this element exists so bridges.js runs. it checks for a `container-bridges` element but never uses it -->
+</div>
+<div class="container w-75">
+    <h1>Here are your bridge lines:</h1>
+    <div id="bridgelines" class="p-4 mb-3">
+        {% if envvars('ENV') == 'dev' %}
+        obfs4 000.000.000.000:0000 testlinetestlinetestlinetestlinetestline cert=testlinetestlinetestlinetestlinetestlinetestlinetestlinetestlinetestli iat-mode=0
+        <br>
+        obfs4 000.000.000.000:0000 testlinetestlinetestlinetestlinetestline cert=testlinetestlinetestlinetestlinetestlinetestlinetestlinetestlinetestli iat-mode=0
+        <br>
+        obfs4 000.000.000.000:0000 testlinetestlinetestlinetestlinetestline cert=testlinetestlinetestlinetestlinetestlinetestlinetestlinetestlinetestli iat-mode=0
+        {% elif envvars('ENV') == 'prod' %}
+        {{ '''% for bridgeline in answer:
+        ${bridgeline | h,trim}<br />
+        % endfor''' | safe }}
+        {% else %}
+        {# if you got here, it means you didn't set the LEKTOR_ENV variable to a correct value. set it to prod/dev and try again #}
+        {{ 0/0 }}
+        {% endif %}
+    </div>
+    <button class="btn btn-primary disabled" id="bridgedb-selectbtn" aria-disabled="true"><span class="fa fa-copy pr-3"></span>Copy All</button>
+    {% if envvars('ENV') == 'dev' %}
+    <a id="bridgedb-qrcodebtn" class="btn btn-primary" type="button" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAADUklEQVR4nO3dQU4DQRAEQUD8/8vwBaAtN+mOuCOvB6fmVNq3NwAAAAAAAAAAAAAAAADgxb0P//7rIU9xw+Sst865+MxFfz7nj0c+BfBcAoYwAUOYgCFMwBAmYAgTMIQJGMIEDGEChjABQ5iAIUzAECZgCPtc/OzplHFDcSJXPOfiM6/8NtzAECZgCBMwhAkYwgQMYQKGMAFDmIAhTMAQJmAIEzCECRjCBAxhAoawzTnhxGS6VZyqTVw7q1Pf1w0MYQKGMAFDmIAhTMAQJmAIEzCECRjCBAxhAoYwAUOYgCFMwBAmYAirzglzs6+hyfctvlF [...]
+    {% elif envvars('ENV') == 'prod' %}
+    {{ '''% if qrcode:
+    <p id="qrcode-para">
+        <img title="QRCode for your bridge lines from BridgeDB"
+             src="${qrcode}"
+             alt="" />
+    </p>
+    % else:
+    <p class="text-danger">
+        ${_("""It seems there was an error getting your QRCode.""")}
+        <i class="icon icon-frown"></i>
+    </p>
+    % endif''' | safe }}
+    {% else %}
+    {# if you got here, it means you didn't set the LEKTOR_ENV variable to a correct value. set it to prod/dev and try again #}
+    {{ 0/0 }}
+    {% endif %}
+    <div class="mt-4">
+    {# XXXX: don't indent the string below, it'll render as a code block #}
+    {{ md(_('''### How to start using your bridges
 
-<hr class="margin-4r-0">
-<h5 id="bridgedb-support-header">Support</h5>
+First, you need to [download Tor Browser](https://www.torproject.org/projects/torbrowser.html). Our Tor Browser User Manual explains how you can add your bridges to Tor Browser. If you are using Windows, Linux, or OS X, [click here](https://tb-manual.torproject.org/bridges/#entering-bridge-addresses) to learn more. If you are using Android, [click here](https://tb-manual.torproject.org/mobile-tor/#circumvention).''')) }}
+    </div>
 
-{{ this.body }}
+<div id="qrcode" class="modal hidden" aria-hidden="true">
+    <div class="modal-dialog modal-sm">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button id="qrcode-modal-btn" class="close" type="button">×</button>
+                <h4 class="modal-title">QRCode for your bridge lines</h4>
+            </div>
+            <div class="modal-body">
+                <p id="qrcode-para">
+                    {% if envvars('ENV') == 'dev' %}
+                    <img title="QRCode for your bridge lines from BridgeDB" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAADUklEQVR4nO3dQU4DQRAEQUD8/8vwBaAtN+mOuCOvB6fmVNq3NwAAAAAAAAAAAAAAAADgxb0P//7rIU9xw+Sst865+MxFfz7nj0c+BfBcAoYwAUOYgCFMwBAmYAgTMIQJGMIEDGEChjABQ5iAIUzAECZgCPtc/OzplHFDcSJXPOfiM6/8NtzAECZgCBMwhAkYwgQMYQKGMAFDmIAhTMAQJmAIEzCECRjCBAxhAoawzTnhxGS6VZyqTVw7q1Pf1w0MYQKGMAFDmIAhTMAQJmAIEzCECRjCBAxhAoYwAUOYgCFMwBAmYAirzglzs6+hy [...]
+                    {% elif envvars('ENV') == 'prod' %}
+                    <img title="QRCode for your bridge lines from BridgeDB" src="{{ '${qrcode}' | safe }}">
+                    {% else %}
+                    {# if you got here, it means you didn't set the LEKTOR_ENV variable to a correct value. set it to prod/dev and try again #}
+                    {{ 0/0 }}
+                    {% endif %}
+                </p>
+                <p>This QRCode contains your bridge lines. Scan it with a QRCode reader to copy your bridge lines onto mobile and other devices.</p>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
 
-{% endblock %}
+{% include 'support.jinja2' %}
diff --git a/frontend/templates/hero-captcha.html b/frontend/templates/captcha.html
similarity index 96%
rename from frontend/templates/hero-captcha.html
rename to frontend/templates/captcha.html
index 9658e32..5b3b8b3 100644
--- a/frontend/templates/hero-captcha.html
+++ b/frontend/templates/captcha.html
@@ -16,3 +16,5 @@
     </form>
   </div>
 </div>
+
+{% include 'support.jinja2' %}
diff --git a/frontend/templates/hero-bridge-lines.html b/frontend/templates/hero-bridge-lines.html
deleted file mode 100644
index 5231216..0000000
--- a/frontend/templates/hero-bridge-lines.html
+++ /dev/null
@@ -1,81 +0,0 @@
-{% if envvars('ENV') == 'dev' %}
-<script src="{{ '/static/js/bridges.js' | asseturl }}"></script>
-{% elif envvars('ENV') == 'prod' %}
-<script src="/static/js/bridges.js"></script>
-{% else %}
-{# if you got here, it means you didn't set the LEKTOR_ENV variable to a correct value. set it to prod/dev and try again #}
-{{ 0/0 }}
-{% endif %}
-
-<div id="container-bridges">
-    <!-- this element exists so bridges.js runs. it checks for a `container-bridges` element but never uses it -->
-</div>
-<div class="container w-75">
-    <h1>Here are your bridge lines:</h1>
-    <div id="bridgelines" class="p-4 mb-3">
-        {% if envvars('ENV') == 'dev' %}
-        obfs4 000.000.000.000:0000 testlinetestlinetestlinetestlinetestline cert=testlinetestlinetestlinetestlinetestlinetestlinetestlinetestlinetestli iat-mode=0
-        <br>
-        obfs4 000.000.000.000:0000 testlinetestlinetestlinetestlinetestline cert=testlinetestlinetestlinetestlinetestlinetestlinetestlinetestlinetestli iat-mode=0
-        <br>
-        obfs4 000.000.000.000:0000 testlinetestlinetestlinetestlinetestline cert=testlinetestlinetestlinetestlinetestlinetestlinetestlinetestlinetestli iat-mode=0
-        {% elif envvars('ENV') == 'prod' %}
-        {{ '''% for bridgeline in answer:
-        ${bridgeline | h,trim}<br />
-        % endfor''' | safe }}
-        {% else %}
-        {# if you got here, it means you didn't set the LEKTOR_ENV variable to a correct value. set it to prod/dev and try again #}
-        {{ 0/0 }}
-        {% endif %}
-    </div>
-    <button class="btn btn-primary disabled" id="bridgedb-selectbtn" aria-disabled="true"><span class="fa fa-copy pr-3"></span>Copy All</button>
-    {% if envvars('ENV') == 'dev' %}
-    <a id="bridgedb-qrcodebtn" class="btn btn-primary" type="button" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAADUklEQVR4nO3dQU4DQRAEQUD8/8vwBaAtN+mOuCOvB6fmVNq3NwAAAAAAAAAAAAAAAADgxb0P//7rIU9xw+Sst865+MxFfz7nj0c+BfBcAoYwAUOYgCFMwBAmYAgTMIQJGMIEDGEChjABQ5iAIUzAECZgCPtc/OzplHFDcSJXPOfiM6/8NtzAECZgCBMwhAkYwgQMYQKGMAFDmIAhTMAQJmAIEzCECRjCBAxhAoawzTnhxGS6VZyqTVw7q1Pf1w0MYQKGMAFDmIAhTMAQJmAIEzCECRjCBAxhAoYwAUOYgCFMwBAmYAirzglzs6+hyfctvlF [...]
-    {% elif envvars('ENV') == 'prod' %}
-    {{ '''% if qrcode:
-    <p id="qrcode-para">
-        <img title="QRCode for your bridge lines from BridgeDB"
-             src="${qrcode}"
-             alt="" />
-    </p>
-    % else:
-    <p class="text-danger">
-        ${_("""It seems there was an error getting your QRCode.""")}
-        <i class="icon icon-frown"></i>
-    </p>
-    % endif''' | safe }}
-    {% else %}
-    {# if you got here, it means you didn't set the LEKTOR_ENV variable to a correct value. set it to prod/dev and try again #}
-    {{ 0/0 }}
-    {% endif %}
-    <div class="mt-4">
-    {# XXXX: don't indent the string below, it'll render as a code block #}
-    {{ md(_('''### How to start using your bridges
-
-First, you need to [download Tor Browser](https://www.torproject.org/projects/torbrowser.html). Our Tor Browser User Manual explains how you can add your bridges to Tor Browser. If you are using Windows, Linux, or OS X, [click here](https://tb-manual.torproject.org/bridges/#entering-bridge-addresses) to learn more. If you are using Android, [click here](https://tb-manual.torproject.org/mobile-tor/#circumvention).''')) }}
-    </div>
-
-<div id="qrcode" class="modal hidden" aria-hidden="true">
-    <div class="modal-dialog modal-sm">
-        <div class="modal-content">
-            <div class="modal-header">
-                <button id="qrcode-modal-btn" class="close" type="button">×</button>
-                <h4 class="modal-title">QRCode for your bridge lines</h4>
-            </div>
-            <div class="modal-body">
-                <p id="qrcode-para">
-                    {% if envvars('ENV') == 'dev' %}
-                    <img title="QRCode for your bridge lines from BridgeDB" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAABmJLR0QA/wD/AP+gvaeTAAADUklEQVR4nO3dQU4DQRAEQUD8/8vwBaAtN+mOuCOvB6fmVNq3NwAAAAAAAAAAAAAAAADgxb0P//7rIU9xw+Sst865+MxFfz7nj0c+BfBcAoYwAUOYgCFMwBAmYAgTMIQJGMIEDGEChjABQ5iAIUzAECZgCPtc/OzplHFDcSJXPOfiM6/8NtzAECZgCBMwhAkYwgQMYQKGMAFDmIAhTMAQJmAIEzCECRjCBAxhAoawzTnhxGS6VZyqTVw7q1Pf1w0MYQKGMAFDmIAhTMAQJmAIEzCECRjCBAxhAoYwAUOYgCFMwBAmYAirzglzs6+hy [...]
-                    {% elif envvars('ENV') == 'prod' %}
-                    <img title="QRCode for your bridge lines from BridgeDB" src="{{ '${qrcode}' | safe }}">
-                    {% else %}
-                    {# if you got here, it means you didn't set the LEKTOR_ENV variable to a correct value. set it to prod/dev and try again #}
-                    {{ 0/0 }}
-                    {% endif %}
-                </p>
-                <p>This QRCode contains your bridge lines. Scan it with a QRCode reader to copy your bridge lines onto mobile and other devices.</p>
-            </div>
-        </div>
-    </div>
-</div>
-</div>
diff --git a/frontend/templates/home.html b/frontend/templates/home.html
index b72ce57..87cdacb 100644
--- a/frontend/templates/home.html
+++ b/frontend/templates/home.html
@@ -14,3 +14,5 @@
   {{ render_step(2, 'Get Bridges', '/options'|url, 'get-bridges.png') }}
   {{ render_step(3, 'Add the Bridges', '/howto'|url, 'add-bridges.png') }}
 </div>
+
+{% include 'support.jinja2' %}
diff --git a/frontend/templates/homepage.html b/frontend/templates/homepage.html
index 291afe6..1784732 100644
--- a/frontend/templates/homepage.html
+++ b/frontend/templates/homepage.html
@@ -32,11 +32,6 @@
           {% if this.intro %}{{ this.intro }}{% endif %}
         </div>
         {% if this.html %}{% include this.html %}{% endif %}
-        <div class="container pt-5 hero {{ locale.order }} {{ locale.direction }}">
-          <div id="bridgedb-support-body">
-            {% block body %}{{ this.body }}{% endblock %}
-          </div>
-        </div>
       </main>
     </div>
   </div>
diff --git a/frontend/templates/hero-howto.html b/frontend/templates/howto.html
similarity index 94%
rename from frontend/templates/hero-howto.html
rename to frontend/templates/howto.html
index afaf381..d1fc6ea 100644
--- a/frontend/templates/hero-howto.html
+++ b/frontend/templates/howto.html
@@ -7,3 +7,5 @@
     </div>
   </div>
 </section>
+
+{% include 'support.jinja2' %}
diff --git a/frontend/templates/options.html b/frontend/templates/options.html
index 8eb1c9c..b778a3b 100644
--- a/frontend/templates/options.html
+++ b/frontend/templates/options.html
@@ -1,6 +1,25 @@
-{% extends 'homepage.html' %}
-
-{% block body %}
+{% macro render_advanced_options() %}
+<div id="bridgedb-advanced-options">
+  <h3>Advanced Options</h3>
+  <p>Please select options for this bridge type:</p>
+  <form action="{{ '/bridges'|url }}">
+    <div class="bridgedb-form-row">
+      <div>
+        <p>Do you need a pluggable transport?</p>
+        <select id="bridgedb-advanced-options-transport" name="transport" accesskey="t" data-toggle="dropdown" class="form-control">
+          <option value="0">none</option>
+          <option value="obfs4" selected>obfs4</option>
+        </select>
+      </div>
+      <div>
+        <p>Do you need IPv6 addresses?</p>
+        <input id="ipv6" name="ipv6" type="checkbox" value="yes" accesskey="y"> <u>Y</u>es!
+      </div>
+    </div>
+    <input type="submit" value="Get Bridges" class="btn btn-lg btn-purple mt-4">
+  </form>
+</div>
+{% endmacro %}
 
 {{ md(_('''# Get Bridges!
 
@@ -20,32 +39,4 @@ Additionally, BridgeDB has plenty of plain-ol\'-vanilla bridges — without any
 
 {{ render_advanced_options() }}
 
-<hr class="margin-4r-0">
-<h5 id="bridgedb-support-header">Support</h5>
-
-  {{ this.body }}
-
-  {% endblock %}
-
-  {% macro render_advanced_options() %}
-  <div id="bridgedb-advanced-options">
-    <h3>Advanced Options</h3>
-    <p>Please select options for this bridge type:</p>
-    <form action="{{ '/bridges'|url }}">
-      <div class="bridgedb-form-row">
-        <div>
-          <p>Do you need a pluggable transport?</p>
-          <select id="bridgedb-advanced-options-transport" name="transport" accesskey="t" data-toggle="dropdown" class="form-control">
-            <option value="0">none</option>
-            <option value="obfs4" selected>obfs4</option>
-          </select>
-        </div>
-        <div>
-          <p>Do you need IPv6 addresses?</p>
-          <input id="ipv6" name="ipv6" type="checkbox" value="yes" accesskey="y"> <u>Y</u>es!
-        </div>
-      </div>
-      <input type="submit" value="Get Bridges" class="btn btn-lg btn-purple mt-4">
-    </form>
-  </div>
-  {% endmacro %}
+{% include 'support.jinja2' %}
diff --git a/frontend/templates/support.jinja2 b/frontend/templates/support.jinja2
new file mode 100644
index 0000000..2732f53
--- /dev/null
+++ b/frontend/templates/support.jinja2
@@ -0,0 +1,27 @@
+<hr class="margin-4r-0 my-5">
+<h5 id="bridgedb-support-header">Support</h5>
+
+<div class="container hero {{ locale.order }} {{ locale.direction }}">
+  <div id="bridgedb-support-body" class="pt-5">
+    <details>
+      <summary>
+        <h3>{{ _('What are bridges?') }}</h3>
+      </summary>
+      {{ md(_('[Bridges](https://tb-manual.torproject.org/bridges/) are Tor relays that help you circumvent censorship.')) }}
+    </details>
+
+    <details>
+      <summary>
+        <h3>{{ _('I need an alternative way of getting bridges!') }}</h3>
+      </summary>
+      {{ md(_('Another way to get bridges is to send an email to [bridges at torproject.org](mailto:bridges at torproject.org). Leave the email subject empty and write "get transport obfs4" in the email\'s message body. Please note that you must send the email using an address from one of the following email providers: [Riseup](https://riseup.net/) or [Gmail](https://mail.google.com/).')) }}
+    </details>
+
+    <details>
+      <summary>
+        <h3>{{ _("My bridges don't work! I need help!") }}</h3>
+      </summary>
+      {{ md(_('If your Tor Browser cannot connect, please take a look at the [Tor Browser Manual](https://tb-manual.torproject.org/circumvention/) and our [Support Portal](https://support.torproject.org/#censorship).')) }}
+    </details>
+  </div>
+</div>

-- 
To stop receiving notification emails like this one, please contact
the administrator of this repository.


More information about the tor-commits mailing list