Redesigned downlaod buttons

themes/5Sigma/layouts/index.html

@@ -19,25 +19,68 @@
       </div>
     </div>
     <div class="ui segment basic center aligned">
-      <div class="ui huge basic buttons inverted">
+      <div class="ui huge red buttons inverted" id="download-buttons">
-        <a class="ui button" href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-windows.zip">
+        <div class="ui button" data-tab="windows-download">
           <i class="ui life windows icon"></i>
           Windows
-        </a>
+        </div>
-        <a class="ui button" href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-linux.tar.gz">
+        <div class="ui button" data-tab="linux-download">
           <i class="ui linux icon"></i>
           Linux
-        </a>
+        </div>
-        <a class="ui button" href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-darwin.zip">
+        <div class="ui button" data-tab="macos-download">
           <i class="ui apple icon"></i>
           MacOS
-        </a>
+        </div>
         <a class="ui button" href="http://github.com/5Sigma/conductor">
           <i class="ui icon github"></i>
           Source Code
         </a>
       </div>
     </div>
+    <div class="ui tab basic segment center aligned" data-tab="windows-download">
+      <div class="ui inverted huge header" style="font-weight: bold;">
+        Binary Download
+      </div>
+      <a class="ui basic huge inverted button"
+        href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-windows.zip">
+        <i class="ui life windows icon"></i> Download
+      </a>
+    </div>
+    <div class="ui tab basic segment center aligned" data-tab="linux-download">
+      <div class="ui inverted huge header" style="font-weight: bold;">
+        Binary Download
+      </div>
+      <a class="ui basic huge inverted button"
+        href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-linux.tar.gz">
+        <i class="ui linux icon"></i>
+        Donwload
+      </a>
+    </div>
+    <div class="ui tab basic segment center aligned" data-tab="macos-download" style="margin: auto; width: 800px;">
+      <div class="ui inverted huge header" style="font-weight: bold;">
+        Hombrew Installation
+      </div>
+      <div style="width: 500px; margin: auto; text-align: left;">
+        <div class="ui inverted segment">
+          <pre style="font-size: 16px; font-weight: bold;">
+            brew tap 5sigma/tap
+            brew install conductor</pre>
+        </div>
+      </div>
+      <div class="ui horizontal divider" style="color: white;">
+        Or
+      </div>
+      <div class="ui inverted huge header" style="font-weight: bold;">
+        Binary Download
+      </div>
+      <div class="ui hidden divider"></div>
+      <a class="ui basic huge inverted button"
+        href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-darwin.zip">
+        <i class="ui apple icon"></i>
+        Download
+      </a>
+    </div>
     <div class="ui hidden section divider"></div>
   </div>
   <div class="ui grid two columns">
@@ -73,6 +116,26 @@
     </div>
   </div>
   {{ partial "footer" . }}
+  <script>
+    $('#download-buttons div.button').tab();
+    $(function () {
+      var OSName = "Unknown OS";
+      if (navigator.appVersion.indexOf("Win") != -1) OSName = "Windows";
+      if (navigator.appVersion.indexOf("Mac") != -1) OSName = "MacOS";
+      if (navigator.appVersion.indexOf("Linux") != -1) OSName = "Linux";
+      switch (OSName) {
+        case "Windows":
+          $('[data-tab=windows-download]').addClass('active');
+          break;
+        case "MacOS":
+          $('[data-tab=macos-download]').addClass('active');
+          break;
+        case "Linux":
+          $('[data-tab=linux-download]').addClass('active');
+          break;
+      }
+    });
+  </script>
 </body>
 
 </html>