archives/snowflake
2
0
Fork 0
mirror of https://gitlab.torproject.org/tpo/anti-censorship/pluggable-transports/snowflake.git synced 2025-10-14 14:11:23 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reimagine the badge

Browse source 
Trac 27385
This commit is contained in:
Arlo Breault 2019-07-14 09:41:51 +02:00 • committed by Cecylia Bocovich
parent 0bded511b9
commit e60f22833a
29 changed files with 401 additions and 351 deletions
Download patch file Download diff file Expand all files Collapse all files

1
proxy/static/.htaccess
View file

@ -1,4 +1,3 @@
<Files "embed.html">
Header always unset X-Frame-Options
</Files>
Redirect permanent /options.html /index.html

105
proxy/static/embed.css Normal file
View file

@ -0,0 +1,105 @@
body {
margin: 10px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
width: 300px;
font-size: 12px;
}
#active {
margin: 20px 0;
text-align: center;
}
.b {
border-top: 1px solid gainsboro;
padding: 10px;
position: relative;
}
.b a {
color: black;
display: inline-block;
text-decoration: none;
}
.learn:before {
content : " ";
display: block;
position: absolute;
top: 12px;
background-image: url('icons/arrowhead-right-12.svg');
width: 12px;
height: 12px;
opacity : 0.6;
z-index: 9999;
right: 0px;
margin-right: 10px;
}
/* Snowflake Status */
.transfering {
-webkit-animation:spin 8s linear infinite;
-moz-animation:spin 8s linear infinite;
animation:spin 8s linear infinite;
fill: BlueViolet;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
/* Toggle */
.switch {
position: relative;
display: inline-block;
width: 30px;
height: 17px;
float: right;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 17px;
}
.slider:before {
position: absolute;
content: "";
height: 13px;
width: 13px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: BlueViolet;
}
input:focus + .slider {
box-shadow: 0 0 1px BlueViolet;
}
input:checked + .slider:before {
-webkit-transform: translateX(13px);
-ms-transform: translateX(13px);
transform: translateX(13px);
}

72
proxy/static/embed.html
View file

@ -1,52 +1,28 @@
<!doctype html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="refresh" content="86400">
<script type="text/javascript" src="snowflake.js"></script>
<style>
* {
box-sizing: border-box;
}
body {
position: absolute; width: 100%; height: 100%;
top: 0; margin: 0 auto; padding: 0;
background-color: #424;
text-align: center; cursor: default;
}
#badge {
margin: auto; padding: 0;
width: 88px; height: 16px;
background-image: url('koch.jpg');
white-space: nowrap;
color: #000;
font-size: 12px; font-weight: 900;
font-variant: small-caps;
text-shadow: 0 0 5px #fef,
0 1px 2px #fef,
0 -1px 2px #fef,
1px 0px 3px #fef,
-1px 0px 3px #fef;
}
.active {
-webkit-animation: bgScroll 8s linear infinite;
animation: bgScroll 8s linear infinite;
}
@-webkit-keyframes bgScroll {
from {background-position: 0 -4%;}
to {background-position: 0 104%;}
}
@keyframes bgScroll {
from {background-position: 0 -4%;}
to {background-position: 0 104%;}
}
</style>
</head>
<body>
<a target="_blank" href="index.html">
<div id="badge">
Internet Freedom
<head>
<meta charset="utf-8" />
<!-- This should be essentially be a no-opt in the popup -->
<meta http-equiv="refresh" content="86400" />
<link rel="stylesheet" href="embed.css" />
<script src="popup.js"></script>
<script src="embed.js"></script>
</head>
<body>
<div id="active">
<img src="icons/status-off.png" />
<p>Snowflake is off</p>
<p></p>
</div>
</a>
</body>
<div class="b button">
<label id="toggle" for="enabled">Turn On</label>
<label class="switch">
<input id="enabled" type="checkbox" />
<span class="slider round"></span>
</label>
</div>
<div class="b learn">
<a target="_blank" href="https://snowflake.torproject.org/">Learn more</a>
</div>
</body>
</html>

4
proxy/static/icons/arrowhead-right-12.svg Normal file
View file

@ -0,0 +1,4 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="context-fill" d="M9 6a1 1 0 0 0-.293-.707l-3-3a1 1 0 0 0-1.414 1.414L6.586 6 4.293 8.293a1 1 0 0 0 1.414 1.414l3-3A1 1 0 0 0 9 6z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 445 B

BIN
proxy/static/icons/status-off.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.9 KiB

11
proxy/static/icons/status-off.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8 KiB

BIN
proxy/static/icons/status-off@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
proxy/static/icons/status-off@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
proxy/static/icons/status-on.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

11
proxy/static/icons/status-on.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8 KiB

BIN
proxy/static/icons/status-on@2x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
proxy/static/icons/status-on@3x.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
proxy/static/icons/status-running.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.6 KiB

11
proxy/static/icons/status-running.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8 KiB

5
proxy/static/index.css
View file

@ -76,3 +76,8 @@ h3 {
.diagram img, .screenshot img {
max-width: 100%;
}
textarea {
max-width: 100%;
width: 600px;
}

11
proxy/static/index.html
View file

@ -77,6 +77,17 @@
Consider adding keywords <em>snowflake-webextension</em> or <em>snowflake-client</em>
to let us know how which part of the Snowflake system is experiencing
problems.</p>
<h3>EMBED</h3>
<p>It is now possible to embed the Snowflake badge on any website:</p>
<textarea readonly>&lt;iframe src="https://snowflake.torproject.org/embed.html" width="320px" height="200px" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;</textarea>
<p>Which looks like this:</p>
<iframe src="embed.html" width="320px" height="200px" frameborder="0" scrolling="no"></iframe>
</div>
</body>
</html>

BIN
proxy/static/koch.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 129 KiB

28
proxy/static/popup.js Normal file
View file

@ -0,0 +1,28 @@
/* exported Popup */
class Popup {
constructor() {
this.div = document.getElementById('active');
this.ps = this.div.querySelectorAll('p');
this.img = this.div.querySelector('img');
}
setImgSrc(src) {
this.img.src = `icons/status-${src}.png`;
}
setStatusText(txt) {
this.ps[0].innerText = txt;
}
setStatusDesc(desc, color) {
this.ps[1].innerText = desc;
this.ps[1].style.color = color || 'black';
}
hideButton() {
document.querySelector('.button').style.display = 'none';
}
setChecked(checked) {
document.getElementById('enabled').checked = checked;
}
setToggleText(txt) {
document.getElementById('toggle').innerText = txt;
}
}

60
proxy/static/snowflake.html
View file

@ -1,60 +0,0 @@
<!doctype html>
<html>
<head>
<title>Snowflake</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<script type="text/javascript" src="snowflake.js"></script>
<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;
text-align: center;
font-size: 24px;
font-family: monospace;
background-image: url('koch.jpg');
}
textarea {
background-color: rgba(0,0,0,0.8);
color: #fff;
resize: none;
}
.chatarea {
position: relative; border: none;
width: 50%; min-width: 40em;
padding: 0.5em; margin: auto;
}
.active { background-color: rgba(0,50,0,0.8); }
#msglog {
display: block;
width: 100%;
min-height: 40em;
margin-bottom: 1em;
padding: 8px;
}
#status {
background-color: rgba(0,0,0,0.9); color: #999;
margin: 8px 0; padding: 8px 1em; cursor: default;
font-size: 12px;
text-align: left;
}
</style>
</head>
<body>
<div class="chatarea">
<div id="status">
Timeout...
</div>
<textarea id="msglog" readonly>
</textarea>
</div>
</body>
</html>