Add download page

assets/scss/_tor-variables.scss

@@ -4,6 +4,7 @@ $purple-dark: #59316B !default;
 $green:       #68B030 !default;
 $gray-dark:   #333A41 !default;
 $white:       #FFFFFF !default;
+$purple-darker: #401753 !default;
 
 // Other Colors
 $blue:    #007bff !default;
@@ -34,6 +35,7 @@ $warning:       $yellow !default;
 $danger:        $red !default;
 $light:         $gray-100 !default;
 $dark:          $purple-dark !default;
+$darker:        $purple-darker !default;
 
 $navbar-dark-color:                 $white !default;
 $navbar-light-color:                $purple-dark !default;

assets/scss/_tor.scss

@@ -37,6 +37,11 @@
     color: $white;
 }
 
+// Define darker background
+.bg-darker{
+  background-color: $purple-darker;
+}
+
 /*
  * Typography
  */

assets/scss/_tpo.scss

@@ -14,6 +14,9 @@
   bottom: 0;
 }
 
+.shape {
+  padding: 35%;
+}
 .page {
   padding-top: 7rem !important;
 }
@@ -45,12 +48,18 @@ footer {
   padding-top: 10em;
 }
 
+.window-bg {
+  background-image: url("images/png/Group4.png");
+  background-repeat: no-repeat;
+  background-size: inherit;
+}
+
 .onion-bg{
   background: url("images/circle-pattern.png");
-      background-color: rgba(0, 0, 0, 0);
-      background-position-x: -85%;
-      background-repeat: no-repeat;
-      background-size: 65%;
+  background-color: rgba(0, 0, 0, 0);
+  background-position-x: -85%;
+  background-repeat: no-repeat;
+  background-size: 65%;
 }
 
 

assets/static/bootstrap.css

@@ -6906,6 +6906,9 @@ footer .border {
   position: relative !important;
   bottom: 0; }
 
+.shape {
+  padding: 35%; }
+
 .page {
   padding-top: 7rem !important; }
 
@@ -6930,6 +6933,11 @@ footer .border {
 footer {
   padding-top: 10em; }
 
+.window-bg {
+  background-image: url("images/png/Group4.png");
+  background-repeat: no-repeat;
+  background-size: inherit; }
+
 .onion-bg {
   background: url("images/circle-pattern.png");
   background-color: rgba(0, 0, 0, 0);
@@ -7015,6 +7023,9 @@ footer {
   bottom: 0;
   color: #FFFFFF; }
 
+.bg-darker {
+  background-color: #401753; }
+
 /*
  * Typography
  */

assets/static/images/android-logo/svg/Shape.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="51px" height="53px" viewBox="0 0 51 53" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+    <title>A02F190E-6B44-4472-A678-94AB9A527367</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Landings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Download-Desktop---review" transform="translate(-936.000000, -480.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <path d="M944,500.216374 L944,513.760234 C944,515.561404 942.319444,517 940.180556,517 C938.055556,517 936,515.549708 936,513.760234 L936,500.216374 C936,498.450292 938.055556,497 940.180556,497 C942.277778,497 944,498.450292 944,500.216374 Z M945,519.094352 C945,521.02271 946.761423,522.574803 948.949858,522.574803 L951.605338,522.574803 L951.64537,529.759111 C951.64537,534.097916 959.011322,534.062641 959.011322,529.759111 L959.011322,522.574803 L963.975334,522.574803 L963.975334,529.759111 C963.975334,534.074399 971.381318,534.086158 971.381318,529.759111 L971.381318,522.574803 L974.07683,522.574803 C976.238577,522.574803 978,521.02271 978,519.094352 L978,498 L945,498 L945,519.094352 Z M978,496 L945,496 C945,491.124965 948.391409,486.887785 953.425532,484.678073 L950.895223,480.657309 C950.524287,480.099186 951.464874,479.746087 951.782818,480.224479 L954.35287,484.279414 C958.976315,482.513923 964.288639,482.605045 968.70012,484.279414 L971.256925,480.235869 C971.588117,479.746087 972.515456,480.110576 972.14452,480.668699 L969.614211,484.678073 C974.608591,486.887785 978,491.124965 978,496 Z M955,490 C955,489.457143 954.333333,489 953.478261,489 C952.652174,489 952,489.457143 952,490 C952,490.542857 952.666667,491 953.478261,491 C954.333333,491 955,490.542857 955,490 Z M971,490 C971,489.457143 970.333333,489 969.521739,489 C968.666667,489 968,489.457143 968,490 C968,490.542857 968.666667,491 969.521739,491 C970.333333,491 971,490.542857 971,490 Z M982.819444,497 C980.722222,497 979,498.415205 979,500.216374 L979,513.760234 C979,515.561404 980.722222,517 982.819444,517 C984.958333,517 987,515.549708 987,513.760234 L987,500.216374 C987,498.415205 984.944444,497 982.819444,497 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>

assets/static/images/windows-logo/svg/Shape.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="45px" height="44px" viewBox="0 0 45 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+    <title>732C40ED-B8C9-4F3E-B2B5-F93867A544CD</title>
+    <desc>Created with sketchtool.</desc>
+    <g id="Landings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Download-Desktop---review" transform="translate(-460.000000, -484.000000)" fill="#FFFFFF">
+            <g id="windows" transform="translate(435.000000, 461.000000)">
+                <g id="windows-logo-silhouette" transform="translate(25.000000, 22.500000)">
+                    <polygon id="Path" points="0 38.9010674 18 41.5 18 23.5 0 23.5"></polygon>
+                    <polygon id="Path" points="0 21.5 18 21.5 18 3.5 0 6.06738312"></polygon>
+                    <polygon id="Path" points="21 41.1607073 45 44.5 45 23.5002807 45 23.5 21 23.5"></polygon>
+                    <polygon id="Path" points="21 3.80601874 21 21.5 45 21.5 45 0.5"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

databags/platforms+en.ini

@@ -1,23 +1,15 @@
-[platforms]
-path = download/platforms
-label = Platform
-
 [windows]
-path = download/windows
+path = windows
 label = Microsoft Windows
 
-[osx]
-path = download/osx
+[apple]
+path = osx
 label = Apple OS X
 
 [linux]
-path = download/linux
+path = linux
 label = Linux
 
 [android]
-path = download/android
+path = #android
 label = Android
-
-[openbsd]
-path = download/openbsd
-label = OpenBSD

databags/versions.ini

@@ -0,0 +1,17 @@
+[torbrowser-stable]
+version = 8.0.4
+release_date = 2018-11-17
+win32 = 0.3.4.9
+
+[torbrowser-alpha]
+version = 8.5a6
+release_date = 2018-12-11
+
+[torbrowser-develop-branch]
+version = maint-7.5
+
+[tor-stable]
+version = 0.3.5.7
+
+[tor-alpha]
+version = 0.4.0.1-alpha

templates/download-android.html

@@ -0,0 +1,27 @@
+<div class="container-fluid bg-darker justify-content-center">
+  <div class="row col-10 p-5">
+    <div class="col-8 p-5">
+      <div class="row">
+        <div class="oval-2 bg-dark" id="android">
+          <a href="{{ '/download/#android'|url }}">
+            <img class="shape" src="{{ 'static/images/android-logo/png/Shape.png'|asseturl }}">
+          </a>
+        </div>
+      </div>
+      <div class="row">
+        <h1 class="mx-auto display-2 text-white">Get Tor Browser for Android.</h1>
+      </div>
+      <div class="row">
+        <h1 class="mx-auto defend text-white">Protect yourself against tracking, surveillance, and censorship. </h1>
+      </div>
+      <div class="row">
+        <a href="">
+          <img src="{{ 'static/images/google-play-badge.png'|asseturl }}">
+        </a>
+      </div>
+    </div>
+    <div class="col-4 p-5">
+      <img src="{{ 'static/images/tor-browser-mobile-window/png/onboarding.png'|asseturl }}">
+    </div>
+  </div>
+</div>

templates/footer.html

@@ -1,3 +1,6 @@
+{% if this.path == '/download' %}
+  {% include 'download-android.html' %}
+{% endif %}
 <div class="container-fluid bg-dark footer onion-bg">
   <div class="row">
     <div class="col-12 d-flex justify-content-right">

templates/hero-download.html

@@ -4,36 +4,22 @@
 <div class="row">
   <h1 class="mx-auto defend text-white">Protect yourself against tracking, surveillance, and censorship. </h1>
 </div>
-<div class="row col-12 p-5 mx-auto justify-content-center">
-  <form action="/download/torbrowser" method="get">
-    <div class="form-group row">
-      <div class="col-3 dropdown-select">
-        <select id="platforms" class="form-control btn btn-dark bg-dark border-0 border-white border-active">
-          {% for id, item in bag('platforms+' + this.alt).items() %}
-            <option id="{{ id }}" data-style="btn btn-dark bg-dark">{{ item.label }}</option>
-          {% endfor %}
-        </select>
-      </div>
-      <div class="col-3 dropdown-select">
-        <select class="form-control btn btn-dark bg-dark border-0 border-white border-active">
-          <span class="oi oi-chevron-bottom"></span>
-          {% for id, item in bag('alternatives').items() %}
-            {% if this.alt != id %}
-              <option data-style="btn btn-dark bg-dark">{{ item.language }}</option>
-            {% endif %}
-          {% endfor %}
-        </select>
-      </div>
-      <div class="col-6">
-        <button type="submit" class="btn btn-shadow text-white bg-dark">{{ _("Download Tor Browser") }}<span class="oi oi-arrow-bottom ml-2 p-1" title="icon arrow-bottom" aria-hidden="true"></span></button>
+<div class="row p-5 mx-auto justify-content-center">
+  {% for id, item in bag('platforms+' + this.alt).items() %}
+    <div class="col-3">
+      <div class="oval-2 bg-darker justify-content-center">
+        {% set distro = 'static/images/' + id + '-logo/png/Shape.png' %}
+        <a href="{{ item.path|url }}">
+          <img class="shape" src="{{ distro|asseturl }}">
+        </a>
       </div>
     </div>
-  </form>
+  {% endfor %}
 </div>
 <div class="row">
+  <a class="mx-auto text-white p-5" href=""><u>Download in another language</u></a>
+  <a class="mx-auto text-white p-5" href=""><u>Advanced Install Options</u></a>
+</div>
+<div class="row p-5 justify-content-center window-bg">
   <a class="mx-auto text-white p-5" href=""><u>Read the latest release announcements</u></a>
-  <a class="mx-auto text-white p-5" href=""><u>Advanced Install Options & Other Platforms</u></a>
-</div>
-<div class="row pt-5 justify-content-center">
-  <img src="{{ 'static/images/png/Group4.png'|asseturl }}" />
 </div>