snowflake/proxy/static/options.html
Serene H c6b02fdaca implement options page opt-in button, messaging and styling.
clicking the badge links to options page, and tested no-js mode #21
2017-01-02 14:23:21 -08:00

128 lines
2.8 KiB
HTML

<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Snowflake - Options</title>
<style>
* {
box-sizing: border-box;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
body {
position: absolute;
width: 100%; height: 100%; top: 0; margin: 0 auto;
background-color: #424;
color: #000;
font-size: 1rem;
text-align: center;
font-family: monospace;
background-image: url('koch.jpg');
}
.options {
background-color: rgba(0,0,0,0.8);
color: #fff;
resize: none;
position: relative; border: none;
width: 30rem; min-width: 40em;
padding: 3rem; margin: auto; margin-top: 1rem;
cursor: default;
}
a { color: #88F; } a:hover { color: #fff; }
#snowflake-status {
color: #888;
}
.active {
color: #2F2 !important;
}
</style>
</head>
<body>
<div class="options">
<h1>Snowflake Options</h1>
<p>
This page enables you to use your web browser as a proxy to help other
Internet users in censored places.
When you click yes, your browser will act as a
censorship circumvention proxy
as long as you are viewing a page with the snowflake badge.
</p>
<p>
For more information on this system click
<a href="https://keroserene.net/snowflake">here</a>.
</p>
<noscript>
<hr/>
Snowflake proxy requires javascript.
<br/>
To volunteer as a proxy, please enable javascript.
</noscript>
<div id='buttons' style='display:none'>
<p>
Do you want your browser to act as a proxy?
</p>
<p>
<button onclick="enableSnowflake()">
Yes
</button>
<button onclick="disableSnowflake()">
No
</button>
</p>
<div id="snowflake-status"></div>
</div>
<script>
// Defaults to opt-in.
var COOKIE_NAME = "snowflake-allow";
var COOKIE_LIFETIME = "Thu, 01 Jan 2038 00:00:00 GMT";
function readCookie(cookie) {
c = document.cookie.split('; ');
cookies = {};
for (i = 0 ; i < c.length ; i++) {
pair = c[i].split('=');
cookies[pair[0]] = pair[1];
}
return cookies[cookie];
}
function enableSnowflake() {
setSnowflakeCookie(1);
refreshStatus();
}
function disableSnowflake() {
setSnowflakeCookie(0);
refreshStatus();
}
function setSnowflakeCookie(val) {
document.cookie = COOKIE_NAME + "=" + val + ";path=/ ;expires=" + COOKIE_LIFETIME;
}
function refreshStatus() {
var enabled = readCookie(COOKIE_NAME);
var $status = document.getElementById('snowflake-status');
if ("1" === enabled) {
$status.innerHTML = 'Snowflake Proxy is ACTIVE <br/><br/>' +
'Thank you for contributing to internet freedom!';
$status.className = 'active';
} else {
$status.innerHTML = 'Snowflake Proxy is OFF';
$status.className = '';
}
}
$buttons = document.getElementById('buttons');
$buttons.style = '';
refreshStatus();
</script>
</body>
</html>