This is an automated email from the git hooks/post-receive script.
meskio pushed a commit to branch main in repository bridgedb.
commit 1391d1c7bfa39c1015eef9ddd16df9e944bea6c8 Author: kez kez@torproject.org AuthorDate: Wed Jan 12 13:18:53 2022 -0800
Create a lektor-based frontend for bridgedb
Context: tpo/anti-censorship/bridgedb#34322 --- .gitmodules | 3 + frontend/.gitignore | 93 +++++++++++++++++++++ frontend/assets/javascript | 1 + frontend/assets/scss | 1 + frontend/assets/static/css | 1 + frontend/assets/static/fonts | 1 + .../assets/static/images/placeholder_captcha.jpg | Bin 0 -> 64012 bytes frontend/assets/static/js/bootstrap.bundle.min.js | 1 + frontend/assets/static/js/bridges.js | 84 +++++++++++++++++++ frontend/assets/static/js/download.js | 1 + frontend/assets/static/js/fallback.js | 1 + frontend/assets/static/js/jquery-3.2.1.min.js | 1 + frontend/assets/static/js/modernizr.js | 1 + frontend/assets/static/js/popper.min.js | 1 + frontend/assets/static/js/scrollspy.min.js | 1 + frontend/babel.cfg | 3 + frontend/bridges.lektorproject | 11 +++ frontend/build.sh | 18 ++++ frontend/configs/i18n.ini | 5 ++ frontend/content/bridges/contents.lr | 27 ++++++ frontend/content/captcha/contents.lr | 27 ++++++ frontend/content/contents.lr | 30 +++++++ frontend/content/options/contents.lr | 27 ++++++ frontend/databags/alternatives.ini | 71 ++++++++++++++++ frontend/databags/menu.ini | 1 + frontend/databags/menu_footer.ini | 1 + frontend/lego | 1 + frontend/models/page.ini | 39 +++++++++ frontend/packages | 1 + frontend/templates/advanced-options.html | 28 +++++++ frontend/templates/bridges.html | 10 +++ frontend/templates/footer.html | 1 + frontend/templates/hero-bridge-lines.html | 81 ++++++++++++++++++ frontend/templates/hero-captcha.html | 16 ++++ frontend/templates/hero-home.html | 6 ++ frontend/templates/hero-options.html | 0 frontend/templates/hero.html | 7 ++ frontend/templates/home.html | 25 ++++++ frontend/templates/homepage.html | 43 ++++++++++ frontend/templates/jumbotron.html | 4 + frontend/templates/macros/footer.html | 3 + frontend/templates/meta.html | 34 ++++++++ frontend/templates/navbar.html | 1 + frontend/templates/options.html | 51 +++++++++++ 44 files changed, 763 insertions(+)
diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..be4500e --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "frontend/lego"] + path = frontend/lego + url = https://gitlab.torproject.org/tpo/web/lego.git diff --git a/frontend/.gitignore b/frontend/.gitignore new file mode 100644 index 0000000..a82e424 --- /dev/null +++ b/frontend/.gitignore @@ -0,0 +1,93 @@ +node_modules + +.sass-cache +.DS_Store + +cache + +public +*.mo +*.po +contents+*.lr + +*.ipynb* + +*.egg-info +*.pyc +__pycache__ + +### Lektor Temps ### +*~* + +### Idea (IDE) ### +.idea/ + +### Emacs ### +# -*- mode: gitignore; -*- +*~ +#*# +/.emacs.desktop +/.emacs.desktop.lock +*.elc +auto-save-list +tramp +.#* + +# Org-mode +.org-id-locations +*_archive + +# flymake-mode +*_flymake.* + +# eshell files +/eshell/history +/eshell/lastdir + +node_modules + +# elpa packages +/elpa/ + +# reftex files +*.rel + +# AUCTeX auto folder +/auto/ + +# cask packages +.cask/ +dist/ + +# Flycheck +flycheck_*.el + +# server auth directory +/server/ + +# projectiles files +.projectile +projectile-bookmarks.eld + +# directory configuration +.dir-locals.el + +# saveplace +places + +# url cache +url/cache/ + +# cedet +ede-projects.el + +# smex +smex-items + +# company-statistics +company-statistics-cache.el + +# anaconda-mode +anaconda-mode/ +venv/ +i18n/ diff --git a/frontend/assets/javascript b/frontend/assets/javascript new file mode 120000 index 0000000..f1da3c5 --- /dev/null +++ b/frontend/assets/javascript @@ -0,0 +1 @@ +../lego/assets/javascript \ No newline at end of file diff --git a/frontend/assets/scss b/frontend/assets/scss new file mode 120000 index 0000000..e77291b --- /dev/null +++ b/frontend/assets/scss @@ -0,0 +1 @@ +../lego/assets/scss/ \ No newline at end of file diff --git a/frontend/assets/static/css b/frontend/assets/static/css new file mode 120000 index 0000000..12e4567 --- /dev/null +++ b/frontend/assets/static/css @@ -0,0 +1 @@ +../../lego/assets/static/css \ No newline at end of file diff --git a/frontend/assets/static/fonts b/frontend/assets/static/fonts new file mode 120000 index 0000000..439915f --- /dev/null +++ b/frontend/assets/static/fonts @@ -0,0 +1 @@ +../../lego/assets/static/fonts/ \ No newline at end of file diff --git a/frontend/assets/static/images/placeholder_captcha.jpg b/frontend/assets/static/images/placeholder_captcha.jpg new file mode 100644 index 0000000..9be5135 Binary files /dev/null and b/frontend/assets/static/images/placeholder_captcha.jpg differ diff --git a/frontend/assets/static/js/bootstrap.bundle.min.js b/frontend/assets/static/js/bootstrap.bundle.min.js new file mode 120000 index 0000000..b24bc44 --- /dev/null +++ b/frontend/assets/static/js/bootstrap.bundle.min.js @@ -0,0 +1 @@ +../../../lego/assets/static/js/bootstrap.bundle.min.js \ No newline at end of file diff --git a/frontend/assets/static/js/bridges.js b/frontend/assets/static/js/bridges.js new file mode 100644 index 0000000..2686e24 --- /dev/null +++ b/frontend/assets/static/js/bridges.js @@ -0,0 +1,84 @@ +// Takes one argument, `element`, which should be a string specifying the id +// of the element whose text should be selected. +function selectText(element) { + try { + var range; + var selection; + text = document.getElementById(element); + + if (document.body.createTextRange) { + range = document.body.createTextRange(); + range.moveToElementText(text); + range.select(); + } else if (window.getSelection) { + selection = window.getSelection(); + range = document.createRange(); + range.selectNodeContents(text); + selection.removeAllRanges(); + selection.addRange(range); + } + } catch (e) { + console.log(e); + } +} + +function displayOrHide(element) { + try { + e = document.getElementById(element); + if (e.classList.contains('hidden')) { + // Don't use classList.toggle() because vendors seem to handle the + // secondary, optional "force" parameter in different ways. + e.classList.remove('hidden'); + e.classList.add('visible'); + e.setAttribute('aria-hidden', 'false'); + } else if (e.classList.contains('visible')) { + e.classList.remove('visible'); + e.classList.add('hidden'); + e.setAttribute('aria-hidden', 'true'); + } + } catch (err) { + console.log(err); + } +} + +window.onload = function() { + var selectBtn = document.getElementById('bridgedb-selectbtn'); + if (selectBtn) { + selectBtn.addEventListener('click', + function() { + selectText('bridgelines'); + }, false); + // Make the 'Select All' button clickable: + selectBtn.classList.remove('disabled'); + selectBtn.setAttribute('aria-disabled', 'false'); + } + + var bridgesContainer = document.getElementById('container-bridges'); + if (bridgesContainer) { + var bridgeLines = document.getElementById('bridgelines'); + bridgeLines.classList.add('cursor-copy'); + bridgeLines.addEventListener('click', + function() { + selectText('bridgelines'); + }, false); + } + + var qrcodeBtn = document.getElementById('bridgedb-qrcodebtn'); + if (qrcodeBtn) { + qrcodeBtn.addEventListener('click', + function() { + displayOrHide('qrcode'); + }, false); + // Remove the href attribute that opens the QRCode image as a data: URL if + // JS is disabled: + qrcodeBtn.removeAttribute('href'); + } + + var qrModalBtn = document.getElementById('qrcode-modal-btn'); + if (qrModalBtn) { + qrModalBtn.addEventListener('click', + function() { + displayOrHide('qrcode'); + }, false); + } +}; diff --git a/frontend/assets/static/js/download.js b/frontend/assets/static/js/download.js new file mode 120000 index 0000000..e017eeb --- /dev/null +++ b/frontend/assets/static/js/download.js @@ -0,0 +1 @@ +../../../lego/assets/static/js/download.js \ No newline at end of file diff --git a/frontend/assets/static/js/fallback.js b/frontend/assets/static/js/fallback.js new file mode 120000 index 0000000..59a1e76 --- /dev/null +++ b/frontend/assets/static/js/fallback.js @@ -0,0 +1 @@ +../../../lego/assets/static/js/fallback.js \ No newline at end of file diff --git a/frontend/assets/static/js/jquery-3.2.1.min.js b/frontend/assets/static/js/jquery-3.2.1.min.js new file mode 120000 index 0000000..dec5611 --- /dev/null +++ b/frontend/assets/static/js/jquery-3.2.1.min.js @@ -0,0 +1 @@ +../../../lego/assets/static/js/jquery-3.2.1.min.js \ No newline at end of file diff --git a/frontend/assets/static/js/modernizr.js b/frontend/assets/static/js/modernizr.js new file mode 120000 index 0000000..7f0619f --- /dev/null +++ b/frontend/assets/static/js/modernizr.js @@ -0,0 +1 @@ +../../../lego/assets/static/js/modernizr.js \ No newline at end of file diff --git a/frontend/assets/static/js/popper.min.js b/frontend/assets/static/js/popper.min.js new file mode 120000 index 0000000..3b1a4be --- /dev/null +++ b/frontend/assets/static/js/popper.min.js @@ -0,0 +1 @@ +../../../lego/assets/static/js/popper.min.js \ No newline at end of file diff --git a/frontend/assets/static/js/scrollspy.min.js b/frontend/assets/static/js/scrollspy.min.js new file mode 120000 index 0000000..d480d6a --- /dev/null +++ b/frontend/assets/static/js/scrollspy.min.js @@ -0,0 +1 @@ +../../../lego/assets/static/js/scrollspy.min.js \ No newline at end of file diff --git a/frontend/babel.cfg b/frontend/babel.cfg new file mode 100644 index 0000000..a4bdcfd --- /dev/null +++ b/frontend/babel.cfg @@ -0,0 +1,3 @@ +[jinja2: **/templates/**.html] +encoding = utf-8 +extensions=jinja2.ext.autoescape,jinja2.ext.with_ diff --git a/frontend/bridges.lektorproject b/frontend/bridges.lektorproject new file mode 100644 index 0000000..a0637f0 --- /dev/null +++ b/frontend/bridges.lektorproject @@ -0,0 +1,11 @@ +[project] +name = Tor Project Website +url = https://bridges.torproject.org/ +url_style = relative +locale = en + +[alternatives.en] +name = English (en) +primary = yes +url_prefix = / +locale = en diff --git a/frontend/build.sh b/frontend/build.sh new file mode 100755 index 0000000..3c4e174 --- /dev/null +++ b/frontend/build.sh @@ -0,0 +1,18 @@ +#!/usr/bin/env bash + +set -eux + +export LEKTOR_ENV=$1 + +cd "$(dirname "$0")" + +lektor build -O public_tmp +rm -rf public +mkdir public +cp public_tmp/index.html public +cp public_tmp/captcha/index.html public/captcha.html +cp public_tmp/bridges/index.html public/bridges.html +cp public_tmp/options/index.html public/options.html +cp -r public_tmp/static public/assets + +rm -rf public_tmp diff --git a/frontend/configs/i18n.ini b/frontend/configs/i18n.ini new file mode 100644 index 0000000..03b9f59 --- /dev/null +++ b/frontend/configs/i18n.ini @@ -0,0 +1,5 @@ +content = en +translations = en +i18npath = i18n +translate_paragraphwise = True +url_prefix = https://bridges.torproject.org/ diff --git a/frontend/content/bridges/contents.lr b/frontend/content/bridges/contents.lr new file mode 100644 index 0000000..92a2900 --- /dev/null +++ b/frontend/content/bridges/contents.lr @@ -0,0 +1,27 @@ +section: home +--- +section_id: home +--- +color: primary +--- +_template: bridges.html +--- +title: BridgeDB +--- +path_bar: Get Bridges! +--- +html: hero-bridge-lines.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@torproject.org](mailto:bridges@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). \ No newline at end of file diff --git a/frontend/content/captcha/contents.lr b/frontend/content/captcha/contents.lr new file mode 100644 index 0000000..ec2245a --- /dev/null +++ b/frontend/content/captcha/contents.lr @@ -0,0 +1,27 @@ +section: home +--- +section_id: home +--- +color: primary +--- +_template: bridges.html +--- +title: BridgeDB +--- +path_bar: Get Bridges! +--- +html: hero-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@torproject.org](mailto:bridges@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 new file mode 100644 index 0000000..296d9d2 --- /dev/null +++ b/frontend/content/contents.lr @@ -0,0 +1,30 @@ +section: home +--- +section_id: home +--- +color: primary +--- +_template: jumbotron.html +--- +title: Get Bridges for Tor +--- +html: home.html +--- +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@torproject.org](mailto:bridges@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 new file mode 100644 index 0000000..0761dc7 --- /dev/null +++ b/frontend/content/options/contents.lr @@ -0,0 +1,27 @@ +section: home +--- +section_id: home +--- +color: primary +--- +_template: options.html +--- +title: BridgeDB +--- +path_bar: Get 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@torproject.org](mailto:bridges@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). \ No newline at end of file diff --git a/frontend/databags/alternatives.ini b/frontend/databags/alternatives.ini new file mode 100644 index 0000000..510183c --- /dev/null +++ b/frontend/databags/alternatives.ini @@ -0,0 +1,71 @@ +[en] +direction = text-left +order = order-last +url = / +language = English (en) + +[ca] +direction = text-left +order = order-last +url = /ca/ +language = Català (ca) + +[de] +direction = text-left +order = order-last +url = /de/ +language = Deutsch (de) + +[es] +direction = text-left +order = order-last +url = /es/ +language = Español (es) + +[fr] +direction = text-left +order = order-last +url = /fr/ +language = Français (fr) + +[is] +direction = text-left +order = order-last +url = /is/ +language = Íslenska (is) + +[it] +direction = text-left +order = order-last +url = /it/ +language = Italiano (it) + +[ka] +direction = text-left +order = order-last +language = ქართული ენა (ka) +url = /ka/ + +[pt-BR] +direction = text-left +order = order-last +url = /pt-BR/ +language = Português Brasil (pt-BR) + +[ru] +direction = text-left +order = order-last +url = /ru/ +language = Русский (ru) + +[tr] +direction = text-left +order = order-last +url = /tr/ +language = Türkçe (tr) + +[zh-CN] +direction = text-left +order = order-last +url = /zh-CN/ +language = 简体中文 (zh-CN) diff --git a/frontend/databags/menu.ini b/frontend/databags/menu.ini new file mode 120000 index 0000000..94f62ff --- /dev/null +++ b/frontend/databags/menu.ini @@ -0,0 +1 @@ +../lego/databags/menu.ini \ No newline at end of file diff --git a/frontend/databags/menu_footer.ini b/frontend/databags/menu_footer.ini new file mode 120000 index 0000000..e6c1f3b --- /dev/null +++ b/frontend/databags/menu_footer.ini @@ -0,0 +1 @@ +../lego/databags/menu_footer.ini \ No newline at end of file diff --git a/frontend/lego b/frontend/lego new file mode 160000 index 0000000..efd74ea --- /dev/null +++ b/frontend/lego @@ -0,0 +1 @@ +Subproject commit efd74eae8ef3767ff84dcbb0172ac57dc1f04a82 diff --git a/frontend/models/page.ini b/frontend/models/page.ini new file mode 100644 index 0000000..fc8bffc --- /dev/null +++ b/frontend/models/page.ini @@ -0,0 +1,39 @@ +[model] +name = Page +label = {{ this.title }} + +[fields.title] +label = Title +type = string +translate = True + +[fields.section] +label = Section +type = string +translate = True + +[fields.section_id] +label = Section_id +type = string +translate = False + +[fields.body] +label = Body +type = markdown +translate = True + +[fields.color] +label = Color +type = string + +[fields.html] +label = Html +type = string + +[fields.intro] +label = Intro +type = markdown + +[fields.path_bar] +label = Path Bar +type = string \ No newline at end of file diff --git a/frontend/packages b/frontend/packages new file mode 120000 index 0000000..d287165 --- /dev/null +++ b/frontend/packages @@ -0,0 +1 @@ +lego/packages/ \ No newline at end of file diff --git a/frontend/templates/advanced-options.html b/frontend/templates/advanced-options.html new file mode 100644 index 0000000..23e84af --- /dev/null +++ b/frontend/templates/advanced-options.html @@ -0,0 +1,28 @@ +<div id="bridges-button-container" class="bs-component"> + <a href="{{ '/bridges'|url }}?transport=obfs4"> + <button class="btn btn-success btn-lg btn-block" id="just-give-me-bridges-btn" type="button" accesskey="j"> + <u>J</u>ust give me bridges! + </button> + </a> +</div> + +<div id="bridgedb-advanced-options"> + <h3 class="fs-2r">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="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-success btn-lg btn-block"> + </form> +</div> diff --git a/frontend/templates/bridges.html b/frontend/templates/bridges.html new file mode 100644 index 0000000..cbd0d64 --- /dev/null +++ b/frontend/templates/bridges.html @@ -0,0 +1,10 @@ +{% extends'homepage.html' %} + +{% block body %} + +<hr class="margin-4r-0"> +<h5 id="bridgedb-support-header">Support</h6> + +{{ this.body }} + +{% endblock %} diff --git a/frontend/templates/footer.html b/frontend/templates/footer.html new file mode 120000 index 0000000..e78ee3c --- /dev/null +++ b/frontend/templates/footer.html @@ -0,0 +1 @@ +../lego/templates/footer.html \ No newline at end of file diff --git a/frontend/templates/hero-bridge-lines.html b/frontend/templates/hero-bridge-lines.html new file mode 100644 index 0000000..4e43e24 --- /dev/null +++ b/frontend/templates/hero-bridge-lines.html @@ -0,0 +1,81 @@ +{% 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 id="container"> + <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>Select 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/hero-captcha.html b/frontend/templates/hero-captcha.html new file mode 100644 index 0000000..cc88b79 --- /dev/null +++ b/frontend/templates/hero-captcha.html @@ -0,0 +1,16 @@ +<div id="bridgedb-captcha-container"> + <div id="bridgedb-captcha" class="pb-3"> + {% if envvars('ENV') == 'dev' %} + <img src="{{ '/static/images/placeholder_captcha.jpg' | asseturl }}"> + {% elif envvars('ENV') == 'prod' %} + {% raw %}<img alt="${_(strings.CAPTCHA[0])}" src="${imgstr}">{% endraw %} + {% 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> + <form action="" method="POST"> + <input type="text" id="bridgedb-captcha-input" class="form-control" placeholder="Enter the characters from the image above..."> + <button type="submit" class="btn btn-primary" id="bridgedb-captcha-submit"><span class="fa fa-level-down fa-rotate-90"></span></button> + </form> +</div> diff --git a/frontend/templates/hero-home.html b/frontend/templates/hero-home.html new file mode 100644 index 0000000..3370701 --- /dev/null +++ b/frontend/templates/hero-home.html @@ -0,0 +1,6 @@ +<div class="row"> + <h1 class="mx-auto display-2 text-center text-white">{{ _('BridgeDB') }}</h1> +</div> +<div class="row"> + <h3 class="mx-auto p-3 text-center text-white">{{ _('Defend yourself against tracking and surveillance. Circumvent censorship.') }}</h3> +</div> diff --git a/frontend/templates/hero-options.html b/frontend/templates/hero-options.html new file mode 100644 index 0000000..e69de29 diff --git a/frontend/templates/hero.html b/frontend/templates/hero.html new file mode 100644 index 0000000..7f93294 --- /dev/null +++ b/frontend/templates/hero.html @@ -0,0 +1,7 @@ +<div class="container bg-primary pt-5"> + <div class="row"> + <div class="col-12 content-center pt-5"> + {% if this.html %}{% include 'hero-' + this.html %}{% endif %} + </div> + </div> +</div> diff --git a/frontend/templates/home.html b/frontend/templates/home.html new file mode 100644 index 0000000..b322352 --- /dev/null +++ b/frontend/templates/home.html @@ -0,0 +1,25 @@ +{% macro render_step(number, text, link) %} +<section> + <div class=""> + <div class="card border-0"> + <div class=""> + <div> + <div class="mt-3 mx-3"> + <p class="m-0">{{ _("Step " + number|string) }}</p> + <h4 class="card-text">{{ _(text) }}</h4> + <div class="text-center pt-3 mb-3"> + <a class="btn btn-primary" href="{{ link }}">{{ _(text) }}</a> + </div> + </div> + </div> + </div> + </div> + </div> +</section> +{% endmacro %} + +<div class="container pt-5 justify-content-center" id="bridgedb-steps-container"> + {{ render_step(1, 'Download Tor Browser', 'https://www.torproject.org/projects/torbrowser.html') }} + {{ render_step(2, 'Get Bridges', '/options'|url) }} + {{ render_step(3, 'Add the Bridges', 'https://bridges.torproject.org/howto') }} +</div> diff --git a/frontend/templates/homepage.html b/frontend/templates/homepage.html new file mode 100644 index 0000000..4529542 --- /dev/null +++ b/frontend/templates/homepage.html @@ -0,0 +1,43 @@ +{% include 'meta.html' %} +<div class="page"> + <div class="container-fluid bg-primary"> + <div class="row flex-xl-nowrap {{ bag('alternatives', this.alt, 'order') }}"> + <div class="container bg-primary pt-5"> + <div class="row"> + <div class="col-12 content-center pt-5"> + <div class="row"> + <h1 class="mx-auto display-2 text-center text-white">{{ this.title }}</h1> + </div> + <div class="row"> + <h3 class="mx-auto p-3 text-center text-white">{{ _('Lorem ipsum dolor sit amet, consectetur adipiscing elit') }}</h3> + </div> + </div> + </div> + </div> + </div> + </div> + {% if this.path_bar %} + <div id="bridgedb-pathbar"> + <a href="{{ '/' | url }}">BridgeDB</a><span id="bridgedb-pathbar-sep-container"><span id="bridgedb-pathbar-sep"></span>{{ this.path_bar }}</span> + </div> + {% endif %} + {% set locale = bag('alternatives', this.alt) %} + <div class="container {{ locale.order }} {{ locale.direction }}"> + <div class="row flex-xl-nowrap {{ locale.order }} {{ locale.direction }}"> + <main role="main" class="container mx-auto col-12 {{ locale.order }} {{ locale.direction }}"> + <div id="bridgedb-homepage-intro" class="py-5"> + {% 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> +</div> +{% include 'footer.html' %} +</body> +</html> diff --git a/frontend/templates/jumbotron.html b/frontend/templates/jumbotron.html new file mode 100644 index 0000000..960c2e9 --- /dev/null +++ b/frontend/templates/jumbotron.html @@ -0,0 +1,4 @@ +{% extends "homepage.html" %} +{% block body %} + {{ this.body }} +{% endblock %} diff --git a/frontend/templates/macros/footer.html b/frontend/templates/macros/footer.html new file mode 100644 index 0000000..e3c90c8 --- /dev/null +++ b/frontend/templates/macros/footer.html @@ -0,0 +1,3 @@ +{% macro render_faq() %} + <a href="https://www.torproject.org/about/trademark/" target="_blank" class="text-primary text-light"><u>FAQ</u></a> +{% endmacro %} diff --git a/frontend/templates/meta.html b/frontend/templates/meta.html new file mode 100644 index 0000000..dab26fe --- /dev/null +++ b/frontend/templates/meta.html @@ -0,0 +1,34 @@ +<!doctype html> +<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ this.alt }}" {% if bag('alternatives', this.alt, 'direction') == 'text-right' %}dir="rtl" {% endif %}> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="{{ _('Defend yourself against tracking and surveillance. Circumvent censorship.') }} | {{ this.title }}"> + <meta name="twitter:card" content="summary" /> + <meta name="twitter:site" content="@torproject" /> + <meta name="twitter:creator" content="@torproject" /> + <meta name="twitter:image" content="https://www.torproject.org/static/images/tor-project-logo-onions.png"/> + <meta property="og:url" content="https://torproject.org" /> + <meta property="og:title" content="{{ _('The Tor Project | Privacy & Freedom Online') }}" /> + <meta property="og:description" content="{{ _('Defend yourself against tracking and surveillance. Circumvent censorship.') }}" /> + <meta property="og:image" content="https://www.torproject.org/static/images/tor-project-logo-onions.png" /> + <link rel="stylesheet" href="{{ '/static/css/bootstrap.css'|asseturl }}"> + <link rel="stylesheet" href="{{ '/static/fonts/fontawesome/css/all.min.css'|asseturl }}"> + <link rel="stylesheet" href="{{ '/static/fonts/fontawesome/css/v4-shims.min.css'|asseturl }}"> + <!-- Standard favicon --> + <link rel="icon" type="image/x-icon" href="https://www.torproject.org/static/images/favicon/favicon.ico"> + <!-- Recommended favicon format --> + <link rel="icon" type="image/png" href="https://www.torproject.org/static/images/favicon/favicon.png"> + <title>{{ _("Tor Project") }} | {% block title %}{{ this.title }}{% endblock %}</title> + <style> + /* the extremely specific selector is needed to override the `.container-fluid.bg-dark.footer` lego style */ + .container-fluid.bg-dark.footer { + background-color: var(--purple) !important; + } + </style> + {% block head_extra %}{% endblock %} +</head> +<body class="no-gutters"> + <header class="bg-primary"> + {% include 'navbar.html' %} + </header> diff --git a/frontend/templates/navbar.html b/frontend/templates/navbar.html new file mode 120000 index 0000000..ea44d39 --- /dev/null +++ b/frontend/templates/navbar.html @@ -0,0 +1 @@ +../lego/templates/navbar.html \ No newline at end of file diff --git a/frontend/templates/options.html b/frontend/templates/options.html new file mode 100644 index 0000000..e3610e0 --- /dev/null +++ b/frontend/templates/options.html @@ -0,0 +1,51 @@ +{% extends 'homepage.html' %} + +{% block body %} + +{{ md(_('''# Get Bridges! + +BridgeDB can provide bridges with several types of [Pluggable Transports](https://support.torproject.org/glossary/#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. + +Some bridges with IPv6 addresses are also available, though some Pluggable Transports aren't IPv6 compatible. + +Additionally, BridgeDB has plenty of plain-ol'-vanilla bridges — without any Pluggable Transports — which maybe doesn't sound as cool, but they can still help to circumvent internet censorship in many cases.''')) }} + +<div class="bs-component" id="bridges-button-container"> + <a href="{{ '/bridges'|url }}?transport=obfs4"> + <button class="btn btn-success btn-lg btn-block" id="just-give-me-bridges-btn" type="button" accesskey="j"> + <u>J</u>ust give me bridges! + </button> + </a> +</div> + +{{ render_advanced_options() }} + +<hr class="margin-4r-0"> +<h5 id="bridgedb-support-header">Support</h6> + + {{ 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-success btn-lg btn-block"> + </form> + </div> + {% endmacro %}