Dual site buttons

index.css

@@ -13,6 +13,10 @@ body {
   background-repeat: no-repeat;
 }
 
+/*---------------*/
+/* Settings Pane */
+/*---------------*/
+
 .tab-selected {
   color: #000;
   padding-bottom: 5px;
@@ -105,15 +109,23 @@ body {
   outline: none;
 }
 
+/*----------------*/
+/* Browse Buttons */
+/*--------------- */
+
 .button-label {
   position: absolute;
   text-align: center;
-  left: 325px;
+  left: 323px;
   width: 160px;
-  font-family: Baloo Bhaina;
+  font-family: Baloo Bhaina, sans-serif;
   font-size: 20px;
 }
 
+.button-label-small {
+  font-size: 14px;
+}
+
 .button {
   width: 150px;
   border: none;
@@ -133,21 +145,23 @@ body {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
-.button-blue {
+.button-open {
   background-color: #4472c4;
 }
 
-.button-blue:hover {
+.button-open:hover {
   background-color: #335b9c;
 }
 
-.button-green {
-  background-color: #4caf50; /* Green */
+.button .tooltip {
+  width: 130px;
+  /* Vertically position the tip in relation to the button*/
+  top: 12px;
 }
 
-.button-green:hover {
-  background-color: #339037; /* Green */
-}
+/*-----------------*/
+/* Settings button */
+/*-----------------*/
 
 .settings {
   width: 40px;
@@ -163,6 +177,14 @@ body {
   border: 1px solid #117022;
 }
 
+.settings-active:hover {
+  background-color: #339037; /* Green */
+}
+
+/*-------------------*/
+/* Connection status */
+/*-------------------*/
+
 .status {
   word-break: break-all;
   padding: 17px 16px;
@@ -178,11 +200,17 @@ body {
 .status-clear {
   height: 38px;
   width: 114px;
-  background: none; /* Green */
+  background: none;
   color: #ccc;
   border:2px solid #ddd;
 }
 
+.status-clear .tooltip {
+  width: 200px;
+  /* Vertically position the tip in relation to the button*/
+  top: -7px;
+}
+
 .status-green {
   height: 31px;
   width: 118px;
@@ -192,44 +220,52 @@ body {
   border: none;
 }
 
-.status-clear .statustiptext {
+/*----------*/
+/* Tool Tip */
+/*----------*/
+
+.tooltip {
   visibility: hidden;
-  width: 200px;
-  background-color: #4472c4;
+  width: 100px;              /* Default size */
+  background-color: #117022;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding-top: 3px;
   padding-bottom: 5px;
 
-  /* Position the tip (left of status)*/
+  /* Position the tip (left of button)*/
   position: absolute;
   z-index: 1;
-  top: -7px;
+  top: 10px;                /* Default position */
   right: 106%;
 
   /* Fade in tip - takes 4/10 second to go from 0% to 100% opacity */
   opacity: 0.0;
   transition: opacity 0.4s;
 }
 
-.status-clear .statustiptext::after {
+.tooltip::after {
   content: "";
   position: absolute;
   top: 50%;
   left: 100%;
   margin-top: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: transparent transparent transparent #4472c4;
+  border-color: transparent transparent transparent #117022;
 }
 
-.status-clear:hover .statustiptext {
+*:hover > .tooltip {
   visibility: visible;
   opacity: 1.0;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
+/*-------------*/
+/* App version */
+/*-------------*/
+
 .version {
   color: #999999;
   font-size: 11px;

index.html

@@ -69,23 +69,26 @@
     </div>
 
     <div style="top:70px;" class="button-label">
-      Click:
+      Open Browser:
     </div>
     <div style="position:absolute; top:100px; left:325px;">
-      <button id="open-browser" class="button button-blue">Open Browser</button>
+      <button id="open-blocklypropsolo" class="button button-open">BlocklyProp Solo<span class="tooltip">No login required</span></button>
     </div>
-    <div style="top:170px;" class="button-label">
+    <div style="top:142px;" class="button-label button-label-small">
+      --or--
+    </div>
+    <div style="position:absolute; top:162px; left:325px;">
+      <button id="open-blocklyprop" class="button button-open">BlocklyProp<span class="tooltip">Login required</span></button>
+    </div>
+    <div style="top:220px;" class="button-label">
       Status:
     </div>
-    <div style="position:absolute; top:200px; left:325px;">
+    <div style="position:absolute; top:250px; left:325px;">
       <div>
         <span id="sys-connected" class="status status-green" style="opacity:0.0;">&#10004; Connected</span>
-        <span id="sys-waiting" class="status status-clear" style="opacity:1.0; position:absolute; top: 0px; left: 0px;">Waiting to<br>connect...<span class="statustiptext">To connect:<br>Open browser to BlocklyProp<br>site, then navigate to<br>View/Edit project code</span></span>
+        <span id="sys-waiting" class="status status-clear" style="opacity:1.0; position:absolute; top: 0px; left: 0px;">Waiting to<br>connect...<span class="tooltip">To connect:<br>Open browser to desired<br>site, then navigate to<br>View/Edit project code</span></span>
       </div>
     </div>
-    <!--
-      <button id="connect-menu" class="button button-blue" style="position:absolute; top:230px; left:476px; z-index:3; text-align:left; padding-left:5px; height:55px;">&#8942;</button>
-    -->
     <div style="position:absolute; top:380px; left:240px;">
       <span id="version-text" class="version">v0.0.0</span>
     </div>

index.js

@@ -152,7 +152,11 @@ document.addEventListener('DOMContentLoaded', function() {
         sm = sm32bit();
     }
 
-    $('open-browser').onclick = function() {
+    $('open-blocklypropsolo').onclick = function() {
+        chrome.browser.openTab({ url: "https://solo.parallax.com/"});
+    };
+
+    $('open-blocklyprop').onclick = function() {
         chrome.browser.openTab({ url: "https://blockly.parallax.com/"});
     };
 

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "BlocklyProp Launcher",
   "description": "A Chrome application that connects your Propeller-Powered Hardware to the BlocklyProp website.",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "manifest_version": 2,
   "minimum_chrome_version": "45",