mirror of
https://gitlab.torproject.org/tpo/anti-censorship/pluggable-transports/snowflake.git
synced 2025-10-14 05:11:19 -04:00
implement options page opt-in button, messaging and styling.
clicking the badge links to options page, and tested no-js mode #21
This commit is contained in:
parent
f2bbf80c7d
commit
c6b02fdaca
2 changed files with 57 additions and 50 deletions
|
@ -43,8 +43,10 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="badge">
|
<a target="_blank" href="options.html">
|
||||||
Internet Freedom
|
<div id="badge">
|
||||||
</div>
|
Internet Freedom
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -2,8 +2,6 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
||||||
<script type="text/javascript" src="modernizr.js"></script>
|
|
||||||
<script type="text/javascript" src="snowflake.js"></script>
|
|
||||||
<title>Snowflake - Options</title>
|
<title>Snowflake - Options</title>
|
||||||
<style>
|
<style>
|
||||||
* {
|
* {
|
||||||
|
@ -29,43 +27,14 @@
|
||||||
position: relative; border: none;
|
position: relative; border: none;
|
||||||
width: 30rem; min-width: 40em;
|
width: 30rem; min-width: 40em;
|
||||||
padding: 3rem; margin: auto; margin-top: 1rem;
|
padding: 3rem; margin: auto; margin-top: 1rem;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
.active { background-color: rgba(0,50,0,0.8); }
|
a { color: #88F; } a:hover { color: #fff; }
|
||||||
#msglog {
|
#snowflake-status {
|
||||||
display: block;
|
color: #888;
|
||||||
width: 100%;
|
|
||||||
min-height: 40em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
}
|
||||||
.inputarea {
|
.active {
|
||||||
position: relative;
|
color: #2F2 !important;
|
||||||
width: 100%;
|
|
||||||
height: 3em;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
#input {
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute; left: 0;
|
|
||||||
width: 89%; height: 100%;
|
|
||||||
padding: 8px 30px;
|
|
||||||
font-size: 80%;
|
|
||||||
color: #fff;
|
|
||||||
background-color: rgba(0,0,0,0.9);
|
|
||||||
border: 1px solid #999;
|
|
||||||
}
|
|
||||||
#send {
|
|
||||||
display: inline-block; position: absolute;
|
|
||||||
right: 0; top: 0; height: 100%; width: 10%;
|
|
||||||
background-color: #202; color: #f8f;
|
|
||||||
font-variant: small-caps; font-size: 100%;
|
|
||||||
border: none; // box-shadow: 0 2px 5px #000;
|
|
||||||
}
|
|
||||||
#send:hover { background-color: #636; }
|
|
||||||
#status {
|
|
||||||
background-color: rgba(0,0,0,0.9); color: #999;
|
|
||||||
margin: 8px 0; padding: 8px 1em; cursor: default;
|
|
||||||
text-align: left;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
@ -82,42 +51,78 @@
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
For more information on this system click
|
For more information on this system click
|
||||||
<a href="keroserene.net/snowflake">here</a>.
|
<a href="https://keroserene.net/snowflake">here</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<noscript>
|
<noscript>
|
||||||
Volunteering as a snowflake proxy requires javascript to be enabled.
|
<hr/>
|
||||||
|
Snowflake proxy requires javascript.
|
||||||
|
<br/>
|
||||||
|
To volunteer as a proxy, please enable javascript.
|
||||||
</noscript>
|
</noscript>
|
||||||
|
|
||||||
|
<div id='buttons' style='display:none'>
|
||||||
<p>
|
<p>
|
||||||
Do you want your browser to act as a proxy?
|
Do you want your browser to act as a proxy?
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<button onclick="enable()">
|
<button onclick="enableSnowflake()">
|
||||||
Yes
|
Yes
|
||||||
</button>
|
</button>
|
||||||
<button onclick="disable()">
|
<button onclick="disableSnowflake()">
|
||||||
No
|
No
|
||||||
</button>
|
</button>
|
||||||
</p>
|
</p>
|
||||||
|
<div id="snowflake-status"></div>
|
||||||
<div id="snowflake-status">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
var COOKIE_NAME = 'snowflake-allow'
|
// Defaults to opt-in.
|
||||||
|
var COOKIE_NAME = "snowflake-allow";
|
||||||
|
var COOKIE_LIFETIME = "Thu, 01 Jan 2038 00:00:00 GMT";
|
||||||
|
|
||||||
function readCookie(cookie) {
|
function readCookie(cookie) {
|
||||||
c = document.cookies.split('; ');
|
c = document.cookie.split('; ');
|
||||||
cookies = {};
|
cookies = {};
|
||||||
for (i = 0 ; i < c.length ; i++) {
|
for (i = 0 ; i < c.length ; i++) {
|
||||||
pair = c[i].split('=')
|
pair = c[i].split('=');
|
||||||
cookies[pair[0]] = pair[1]q
|
cookies[pair[0]] = pair[1];
|
||||||
}
|
}
|
||||||
return cookies[cookie];
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue