[snowflake/master] Update the main page on the static website

13 Jul 2019

commit d6d42e82aa067610960b2407204cf5f508d864bb
Author: Arlo Breault <arlolra@gmail.com>
Date:   Fri Jul 12 21:31:36 2019 +0200

    Update the main page on the static website
---
 proxy/static/SourceSansPro-Regular.ttf | Bin 0 -> 293516 bytes
 proxy/static/chrome150.jpg             | Bin 0 -> 5321 bytes
 proxy/static/firefox150.jpg            | Bin 0 -> 44930 bytes
 proxy/static/index.css                 |  78 ++++++++++
 proxy/static/index.html                | 260 ++++++++++-----------------------
 proxy/static/screenshot.png            | Bin 0 -> 377507 bytes
 proxy/static/tor-logo@2x.png           | Bin 0 -> 10042 bytes
 7 files changed, 157 insertions(+), 181 deletions(-)

diff --git a/proxy/static/SourceSansPro-Regular.ttf b/proxy/static/SourceSansPro-Regular.ttf
new file mode 100644
index 0000000..278ad8a
Binary files /dev/null and b/proxy/static/SourceSansPro-Regular.ttf differ
diff --git a/proxy/static/chrome150.jpg b/proxy/static/chrome150.jpg
new file mode 100644
index 0000000..fc8a83f
Binary files /dev/null and b/proxy/static/chrome150.jpg differ
diff --git a/proxy/static/firefox150.jpg b/proxy/static/firefox150.jpg
new file mode 100644
index 0000000..1eda543
Binary files /dev/null and b/proxy/static/firefox150.jpg differ
diff --git a/proxy/static/index.css b/proxy/static/index.css
new file mode 100644
index 0000000..70b5a24
--- /dev/null
+++ b/proxy/static/index.css
@@ -0,0 +1,78 @@
+@font-face {
+  font-family: Source Sans Pro;
+  src: url("SourceSansPro-Regular.ttf");
+}
+
+body {
+  margin: 0;
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1.3rem;
+  font-weight: 400;
+  line-height: 1.5;
+  background-color: #59316B;
+  color: #212529;
+}
+
+#header {
+  margin: 0;
+  line-height: 0;
+  padding: 1.3rem 2.6rem;
+}
+
+#header a {
+  border-style: none;
+  display: inline-block;
+  line-height: 0;
+}
+
+#content {
+  margin: 0 0 2.6rem 0;
+  padding: 2.6rem 5.2rem;
+  background-color: #FFFFFF;
+}
+
+h1 {
+  margin: 0;
+  font-size: 2.6rem;
+  color: #7D4698;
+  text-align: center;
+}
+
+h3 {
+  margin: 0;
+  font-size: 2rem;
+  color: #7D4698;
+}
+
+.clear {
+  margin: 2.6rem 0;
+  overflow: auto;
+}
+
+@media only screen and (min-width: 600px) {
+  .browser, .extension {
+    float: left;
+    width: 50%;
+  }
+  .padding {
+    padding: 0 1.3rem;
+  }
+}
+
+.addon {
+  margin-top: 2.6rem 0;
+  text-align: center;
+}
+
+.addon a {
+  display: inline-block;
+  padding: 0 1.3rem;
+}
+
+.diagram, .screenshot {
+  text-align: center;
+}
+
+.diagram img, .screenshot img {
+  max-width: 100%;
+}
diff --git a/proxy/static/index.html b/proxy/static/index.html
index 2eb7bd1..e46c373 100644
--- a/proxy/static/index.html
+++ b/proxy/static/index.html
@@ -1,184 +1,82 @@
 <!doctype html>
 <html>
-
-<head>
-<title>Snowflake</title>
-<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
-<style>
-body {
-  text-align: center; margin: auto;
-  width: 50%;
-  min-width: 40em;
-}
-textarea {
-  width: 100%;
-  height: 4em;
-  font-size: 12px;
-  resize: none;
-  padding: 1em;
-}
-#options {
-  background-color: rgba(0,0,0,0.8);
-  color: #fff;
-  resize: none;
-  position: relative; border: none;
-  width: 30rem;
-  padding: 3rem; margin: auto; margin-top: 1rem;
-  cursor: default;
-}
-#options .active {
-  color: #2F2 !important;
-}
-</style>
-</head>
-
-<body>
-
-<h1>Snowflake</h1>
-
-<p>
-<a href="https://trac.torproject.org/projects/tor/wiki/doc/Snowflake" target="_blank">Snowflake</a>
-is a WebRTC pluggable transport for Tor.
-</p>
-
-<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>
-
-<div id='options'>
-
-<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>
-
-<div id='cookies-disabled' style='display:none'>
-<hr/>
-<p>
-Your browser has cookies disabled. You will need to enable them in order
-to set Snowflake preferences.
-</p>
-</div>
-
-</div>
-
-<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://trac.torproject.org/projects/tor/wiki/doc/Snowflake"
-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="https://snowflake.torproject.org/embed.html" width="88" height="16" frameborder="0" scrolling="no"></iframe>
-</textarea>
-
-<p>
-Which looks like this:
-</p>
-<iframe src="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: <time>2019-01-22</time>
-
-<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);
-  location.reload();
-}
-
-function disableSnowflake() {
-  setSnowflakeCookie(0);
-  location.reload();
-}
-
-function setSnowflakeCookie(val) {
-  document.cookie = COOKIE_NAME + "=" + val + ";path=/ ;expires=" + COOKIE_LIFETIME;
-}
-
-window.onload = function() {
-  if (navigator.cookieEnabled) {
-    // Both JS and cookies enabled -- display normal buttons.
-    document.getElementById('buttons').style = '';
-  } else {
-    // Display the cookies disabled message if necessary.
-    document.getElementById('cookies-disabled').style = '';
-  }
-  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 = '';
-  }
-}
-</script>
-
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Snowflake</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div id="header">
+      <a href="https://www.torproject.org/">
+        <img src="tor-logo@2x.png" alt="Tor" height="50px" />
+      </a>
+    </div>
+    <div id="content">
+      <h1>SNOWFLAKE</h1>
+
+      <p class="diagram"><img src="https://trac.torproject.org/projects/tor/raw-attachment/wiki/doc/Snowflake/s..." alt="Diagram" /></p>
+
+      <p>Snowflake is a system to defeat internet censorship. People who are
+      censored can use Snowflake to access the internet. Their connection goes
+      through Snowflake proxies, which are run by volunteers. For more detailed
+      information about how Snowflake works see our
+      <a href="https://trac.torproject.org/projects/tor/wiki/doc/Snowflake/">documentation wiki</a>.</p>
+
+      <div class="clear">
+
+        <div class="browser"><div class="padding">
+          <h3>Browser</h3>
+
+          <p>If your internet access is censored, you should download
+          <a href="https://www.torproject.org/download/">Tor Browser</a>.</p>
+
+          <p class="screenshot"><img src="screenshot.png" alt="Tor Browser screenshot" /></p>
+        </div></div>
+
+        <div class="extension"><div class="padding">
+          <h3>Extension</h3>
+
+          <p>If your internet access is <strong>not</strong> censored, you should
+          consider installing the Snowflake extension to help users in censored
+          networks. There is no need to worry about which websites people are
+          accessing through your proxy. Their visible browsing IP address will
+          match their Tor exit node, not yours.</p>
+
+          <p class="addon">
+            <a href="https://addons.mozilla.org/en-US/firefox/addon/torproject-snowflake/">
+              <img src="firefox150.jpg" alt="Install in Firefox" height="100px" /><br />
+              <span>Install in Firefox</span>
+            </a>
+            <a href="https://chrome.google.com/webstore/detail/snowflake/mafpmfcccpbjnhfhjnllmmalhifmlcie">
+              <img src="chrome150.jpg" alt="Install in Chrome" height="100px" /><br />
+              <span>Install in Chrome</span>
+            </a>
+            <span class="clear"></span>
+          </p>
+        </div></div>
+
+      </div>
+
+      <h3>REPORTING BUGS</h3>
+      
+      <p>If you encounter problems with Snowflake as a client or a proxy,
+      please consider filing a bug.  To do so, you will have to,</p>
+      
+      <ol>
+        <li>
+        Either <a href="https://trac.torproject.org/projects/tor/register">create an
+        account</a> or <a href="https://trac.torproject.org/projects/tor/login">log in</a>
+        using the shared <b>cypherpunks</b> account with password <b>writecode</b>.</li>
+        <li><a href="https://trac.torproject.org/projects/tor/newticket?component=Circumvention%2FSnowflake">File a ticket</a>
+        using our bug tracker.</li>
+      </ol>
+
+      <p>Please try to be as descriptive as possible with your ticket and if
+      possible include log messages that will help us reproduce the bug.
+      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>
+    </div>
+  </body>
 </html>
diff --git a/proxy/static/screenshot.png b/proxy/static/screenshot.png
new file mode 100644
index 0000000..58c0540
Binary files /dev/null and b/proxy/static/screenshot.png differ
diff --git a/proxy/static/tor-logo@2x.png b/proxy/static/tor-logo@2x.png
new file mode 100644
index 0000000..5a459de
Binary files /dev/null and b/proxy/static/tor-logo@2x.png differ

    

arlo＠torproject.org

tags

participants (1)