Update HTML to incorporate the designs provided by @camiloferrua. Add…

…ed color coding. Buttons for accepting, sending, canceling and bartering are now color coded so that when the steem connect button is displayed its better understood which command will be sent.
ArtoLabs · Oct 22, 2018 · 4f8ebac · 4f8ebac
1 parent 7fb5031
commit 4f8ebac
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 12 deletions.
diff --git a/website/templates/info.html b/website/templates/info.html
@@ -4,7 +4,7 @@
     <title>SteemAX</title>
     <meta name="description" content="An auto-upvote exchange system for the Steemit blockchain.">
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
     <link href='https://steemax.trade/favicon.ico' rel='icon' type='image/vnd.microsoft.icon'>
     <link rel="stylesheet" type="text/css" href="https://steemax.trade/css/fonts.css">
     <link rel="stylesheet" media="only screen and (max-width: 6000px) and (min-width: 1000px)" href="https://steemax.trade/css/page_layout.css">
@@ -40,8 +40,17 @@
                 <a href="https://steemax.trade/login">
                 <button id="ghost-button">Exchange</button>
                 </a>
+                <div id="menu-icon"><a href="javascript" onClick="openMenu(); return false;">
+                    <img src="https://steemax.trade/images/menu.png" border="0" id="hamburger-icon"></a>
+                </div>
             </div>
         </div>
+        <div id="navmenu">
+            <a href="https://steemax.trade"><div class="menuitem">Home</div></a>
+            <a href="https://steemax.info/history"><div class="menuitem">History</div></a>
+            <a href="https://steemax.trade/login"><div class="menuitem">Invite</div></a>
+            <a href="https://discord.gg/97GKVFC"><div class="menuitem">Help (Discord)</div></a>
+		</div>
     </div>
     <div id="exchange_table">
     INFOBOX

diff --git a/website/templates/infobox.html b/website/templates/infobox.html
@@ -6,19 +6,33 @@
         <input type="hidden" id="inviteeAXID" value="INVITEE">
         <input type="hidden" id="otheraccountAXID" value="OTHERACCOUNT">
         <input type="hidden" id="storedmemoidAXID" value="MEMOID">
-        <div class="xinnerbox" style="width: 28%; min-width: 250px; max-width: 350px;">@ACCOUNT1 vs. @ACCOUNT2</div>
-        <div class="xinnerbox" id="clearit">PERCENTAGE%</div>
-        <div class="xinnerbox">DARATIO:1</div>
-        <div class="xinnerbox">DURATION</div>
-        <div class="xbuttons">BTNCODE</div>
+        <input type="hidden" value="MEMOID" id="memoidAXID">
+        <div class="duration">
+            <img src="https://steemax.trade/images/clock-icon.png" class="clock-icon">DURATION
+        </div>
+        <div class="versus1">
+            <b><a href="https://steemit.com/@ACCOUNT1">@ACCOUNT1</a></b>
+        </div>
+        <div class="exchange-icon-info">
+            <img src="https://steemax.trade/images/exchange-icon.png"> 
+        </div>
+        <div class="versus2">
+            <b><a href="https://steemit.com/@ACCOUNT2">@ACCOUNT2</a></b>
+        </div>
+        <div class="xbuttons">
+            BTNCODE
+        </div>
     </div>
     <div class="memobox" id="memoAXID">
-        <div class="minnerbox" id="compareAXID" style="min-width: 100px; max-width: 250px; padding-top: 15px; vertical-align: text-bottom; margin-right: 50px;"></div>
-        <div class="minnerbox" style="margin: 0px; padding-bottom: 5px; padding-top: 5px; font-size: 12px;">
-            <p style="float: left; padding-left: 10px;">Send $0.001 SBD with this in a memo to @steem-ax</p>
-            <input type="text" value="MEMOID" id="memoidAXID" style="clear: left; float: left;">
+        <div class="percentage-info">
+            ACCOUNT1 offers <b>PERCENTAGE%</b> of their upvote.<br>
+            At the ratio of <b>DARATIO:1</b> the values exchanged will be:<br>
+            <div class="votevalues" id="compareAXID"></div>
+        </div>
+        <div class="steem-connect-send">
+            <div class="button" onClick="sendSbdToSteemax('MYACCOUNT', AXID);" id="sendBtnAXID">Send using Steem Connect</div>
         </div>
-        <div class="minnerbox" style="padding-top: 45px;">
-            <div class="button" onClick="sendSbdToSteemax('MYACCOUNT', AXID);">Send using SteemConnect</div>
+        <div class="send-text" id="sendTextAXID">
+            <a href="javascript" onClick="manualSend(AXID); return false;">Send manually</a>
         </div>
     </div>