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:
Serene H 2017-01-02 14:08:33 -08:00
parent f2bbf80c7d
commit c6b02fdaca
2 changed files with 57 additions and 50 deletions

View file

@ -43,8 +43,10 @@
</style> </style>
</head> </head>
<body> <body>
<a target="_blank" href="options.html">
<div id="badge"> <div id="badge">
Internet Freedom Internet Freedom
</div> </div>
</a>
</body> </body>
</html> </html>

View file

@ -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>