pidgin/nest

Move list of available translations to its own page under About

Moving the list of available translations away from the homepage and into it's own page under the About section makes the homepage cleaner. We still have a paragraph in the homepage where we mention that pidgin has a variety of translations and link to the corresponding new page.

Testing Done:
Ran `dev-server.sh` and verified the contents looked the way they are expected to

Reviewed at https://reviews.imfreedom.org/r/519/
<!DOCTYPE html>
<html>
<head>
<title>libpurple oauth helper</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"
></script>
<link
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"
></script>
<style>
body {
margin-top: 1em;
}
.blur {
filter: blur(3px);
}
</style>
</head>
<body>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div class="row">
<img
src="/images/pidgin-circle-256.png"
class="img-responsive center-block"
/>
</div>
<div class="row">
<div class="panel panel-info">
<div class="panel-heading">About</div>
<div class="panel-body">
This page helps you to login your accounts that
require oauth authentication. Due to the way
OAuth2's implicit flow works, we do not have access
to, nor do we store, this access token.
</div>
</div>
</div>
<div class="row">
<div class="panel panel-success">
<div class="panel-heading">Usage</div>
<div class="panel-body">
To use this page, click the copy button next to the
access token and paste it into the password entry
for the pidgin account you just enabled.
</div>
</div>
</div>
<div class="row">
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> This access code is used to
access your account. Do not share it with anyone!
</div>
</div>
<div class="row">
<div class="input-group">
<span class="input-group-btn">
<button
class="btn btn-secondary"
type="button"
id="access_token_toggle"
onclick="toggleAccessToken()"
>
Show
</button>
</span>
<input
type="text"
class="blur form-control"
id="access_token"
/>
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
aria-label="Copy to clipboard"
onclick="copyToClipboard();"
>
<span
class="glyphicon glyphicon-copy"
aria-hidden="true"
></span>
</button>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// set the input box's value to the value of access_token in window.location.hash
var data = window.location.hash.slice(1);
var vars = data.split("&");
for (var i = 0; i < vars.length; i++) {
var parts = vars[i].split("=");
if (parts[0] == "access_token") {
// remove the hash from the url so we don't leak it.
window.location.hash = "";
// update the input box with the access token
var element = $("#access_token");
element.val(parts[1]);
element.select();
// stop processing
break;
}
}
});
function copyToClipboard(e) {
$("#access_token").select();
document.execCommand("copy");
}
function toggleAccessToken() {
var toggle = $("#access_token_toggle");
var token = $("#access_token");
if (toggle.text() == "Show") {
toggle.text("Hide");
token.removeClass("blur");
} else {
toggle.text("Show");
token.addClass("blur");
}
token.select();
}
</script>
</body>
</html>