[tor-commits] [snowflake/master] Update Snowflake embed, and add info page about it (close #16)

Wed Feb 10 22:04:10 UTC 2016

commit 6fb2e4753fb72ea70ed817310ed0d8f0d7c0d0fa
Author: Serene Han <keroserene+git at gmail.com>
Date:   Wed Feb 10 13:54:07 2016 -0800

    Update Snowflake embed, and add info page about it (close #16)
---
 proxy/README.md         |  9 +++++-
 proxy/static/embed.html | 30 ++++++++++---------
 proxy/static/index.html | 78 +++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 102 insertions(+), 15 deletions(-)

diff --git a/proxy/README.md b/proxy/README.md
index 364ac0e..5b5761d 100644
--- a/proxy/README.md
+++ b/proxy/README.md
@@ -1,6 +1,13 @@
 This is the browser proxy component of Snowflake.
 
-### Testing:
+### Embedding
+
+See [keroserene.net/snowflake](http://keroserene.net/snowflake) for more info:
+```
+<iframe src="http://keroserene.net/snowflake/embed.html" width="88" height="16" frameborder="0" scrolling="no"></iframe>
+```
+
+### Testing
 
 Unit testing with Jasmine are available with:
 ```
diff --git a/proxy/static/embed.html b/proxy/static/embed.html
index c59809e..5d68576 100644
--- a/proxy/static/embed.html
+++ b/proxy/static/embed.html
@@ -6,36 +6,38 @@
   <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: 10px; letter-spacing: 1px; font-variant: small-caps;
+    position: absolute; width: 100%; height: 100%;
+    top: 0; margin: 0 auto; padding: 0;
+    background-color: #424;
     text-align: center; cursor: default;
-    margin: 0; padding: 0;
   }
   #badge {
     margin: auto; padding: 0;
     width: 88px; height: 16px;
     background-image: url('koch.jpg');
-    text-shadow: 0 0 5px #fef;
-    font-weight: 900;
+    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: 49% -4%;}
-    to {background-position: 49% 104%;}
+    from {background-position: 0 -4%;}
+    to {background-position: 0 104%;}
   }
   @keyframes bgScroll {
-    from {background-position: 49% -4%;}
-    to {background-position: 49% 104%;}
+    from {background-position: 0 -4%;}
+    to {background-position: 0 104%;}
   }
   </style>
 </head>
diff --git a/proxy/static/index.html b/proxy/static/index.html
new file mode 100644
index 0000000..895f67d
--- /dev/null
+++ b/proxy/static/index.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html>
+
+<head>
+<style>
+body {
+  text-align: center; margin: auto;
+  width: 50%;
+  min-width: 40em;
+}
+textarea {
+  width: 100%;
+  height: 4em;
+  font-size: 12px;
+  resize: none;
+  padding: 1em;
+}
+</style>
+</head>
+
+<body>
+
+<h1>Snowflake</h1>
+
+<p>
+<a href="https://github.com/keroserene/snowflake" target="_blank">Snowflake</a>
+is a WebRTC pluggable transport for Tor.
+</p>
+
+<p>
+Minimum functionality has been achieved, and it is possible
+to bootstrap a Tor client to 100% using Snowflake, and the
+browsing experience using this PT is reasonable enough.
+</p>
+
+<p>
+However, Snowflake is also under active development and much work is needed.
+<br/>
+It is not yet stable or audited, probably has many issues,
+and should not yet be relied upon!!
+</p>
+
+See
+<a href="https://lists.torproject.org/pipermail/tor-dev/2016-January/010310.html"
+target="_blank">
+here</a> for more information.
+
+<hr>
+
+<p>
+It is now possible to embed the Snowflake badge on any website:
+</p>
+
+<textarea readonly>
+<iframe src="http://keroserene.net/snowflake/embed.html" width="88" height="16" frameborder="0" scrolling="no"></iframe>
+</textarea>
+
+<p>
+Which looks like this:
+</p>
+<iframe src="http://keroserene.net/snowflake/embed.html" width="88" height="16" frameborder="0" scrolling="no"></iframe>
+
+<p>
+If it animates, then congratulations -- you are currently acting as a Tor bridge.
+</p>
+<hr>
+
+Repo: <a target="_blank"
+href="https://gitweb.torproject.org/pluggable-transports/snowflake.git/">
+gitweb.torproject.org/pluggable-transports/snowflake.git
+</a>
+<br/>
+Last update: 2016-02-10
+<br/>
+~Serene
+
+</body>
+<html>

