From 514c49307a76d4fd30176cfde63e2dd83357574a Mon Sep 17 00:00:00 2001
From: Revertron <r@revertron.com>
Date: Sat, 10 Apr 2021 22:26:49 +0200
Subject: [PATCH] Added hints to controls.

---
 src/webview/index.html | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/webview/index.html b/src/webview/index.html
index 2d454b1..23d88c8 100644
--- a/src/webview/index.html
+++ b/src/webview/index.html
@@ -60,15 +60,15 @@
     <div class="tab row page" id="tab_credentials">
         <div class="field is-grouped">
             <div class="control is-expanded has-icons-left">
-                <input class="input is-expanded" type="text" id="public_key" placeholder="No key loaded" readonly>
+                <input class="input is-expanded" type="text" id="public_key" placeholder="No key loaded" readonly title="If you load or mine a keypair the public key will be displayed here">
                 <span class="icon is-small is-left">
                     <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M12,17A2,2 0 0,0 14,15C14,13.89 13.1,13 12,13A2,2 0 0,0 10,15A2,2 0 0,0 12,17M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V10C4,8.89 4.9,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path></svg>
                 </span>
             </div>
             <div class="buttons has-addons">
-                <button class="button is-info is-light" onclick="loadKey();">Load key</button>
-                <button class="button is-info is-light" id="save_key" onclick="saveKey();" disabled>Save key</button>
-                <button class="button is-info" onclick="createKey();">Mine new key</button>
+                <button class="button is-info is-light" onclick="loadKey();" title="Load keypair from file">Load key</button>
+                <button class="button is-info is-light" id="save_key" onclick="saveKey();" disabled title="Save current keypair to file">Save key</button>
+                <button class="button is-info" onclick="createKey();" title="Generate new keypair, suitable to mine domains">Mine new key</button>
             </div>
         </div>
         <p class="help">To mine domains (or zones) you need to mine a strong pair of keys.</p>
@@ -79,7 +79,7 @@
         <div class="field is-grouped is-fullwidth">
             <div class="control field has-addons is-expanded">
                 <div class="control is-expanded has-icons-left">
-                    <input class="input is-expanded" type="text" placeholder="domain" id="new_domain" oninput="onDomainChange(this)">
+                    <input class="input is-expanded" type="text" placeholder="domain" id="new_domain" oninput="onDomainChange(this)" title="Just a name of desired domain, like mail, facehook, etc.">
                     <span class="icon is-small is-left">
                         <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg>
                     </span>
@@ -87,7 +87,7 @@
 
                 <!-- Zones -->
                 <div class="control">
-                    <div class="dropdown" onclick="toggle(this, event);" onblur="alert('blured!')">
+                    <div class="dropdown" onclick="toggle(this, event);" title="Select your TLD - Top Level Domain">
                         <div class="dropdown-trigger">
                             <button class="button" aria-haspopup="true" aria-controls="zones-menu">
                                 <span id="zones-current-name">Select zone</span>
@@ -106,8 +106,8 @@
 
             <div class="control">
                 <div class="buttons has-addons">
-                    <button id="add_record_button" class="button is-info is-light" onclick="showNewRecordDialog();">Add record</button>
-                    <button id="new_domain_button" class="button is-info" onclick="createDomain();">Mine domain</button>
+                    <button id="add_record_button" class="button is-info is-light" onclick="showNewRecordDialog();" title="Domain is nothing without good DNS records">Add record</button>
+                    <button id="new_domain_button" class="button is-info" onclick="createDomain();" title="Start mining">Mine domain</button>
                 </div>
             </div>
         </div>
@@ -122,22 +122,22 @@
     <div class="tab row page is-hidden" id="tab_zones">
         <div class="field is-grouped">
             <div class="control is-expanded has-icons-left">
-                <input class="input" type="text" placeholder="ygg" id="new_zone" oninput="onZoneChange()">
+                <input class="input" type="text" placeholder="ygg" id="new_zone" oninput="onZoneChange()" title="The name of your zone, like com, net or 007, who knows?">
                 <span class="icon is-small is-left">
                     <svg viewBox="0 0 24 24" style="width: 20px; height: 20px;"><path d="M18.25,22L15.5,19L16.66,17.82L18.25,19.41L21.84,15.82L23,17.23M20.5,3A0.5,0.5 0 0,1 21,3.5V13.36C20.36,13.13 19.69,13 19,13C17.46,13 16.06,13.6 15,14.56V7.1L9,5V16.9L13.04,18.3C13,18.54 13,18.77 13,19C13,19.46 13.06,19.92 13.16,20.36L9,18.9L3.66,20.97C3.59,21 3.55,21 3.5,21A0.5,0.5 0 0,1 3,20.5V5.38C3,5.15 3.16,4.97 3.35,4.9L9,3L15,5.1L20.33,3"></path></svg>
                 </span>
             </div>
             <div class="control has-icons-left">
-                <input class="input" type="number" placeholder="Difficulty: 15-30" id="new_zone_difficulty" name="Just a name" oninput="onZoneChange()">
+                <input class="input" type="number" placeholder="Difficulty: 20-28" id="new_zone_difficulty" oninput="onZoneChange()" title="How difficult it will be to mine domains in this zone? Good numbers are 20-28.">
                 <span class="icon is-small is-left">
                     <svg viewBox="0 0 24 24" style="width: 24px; height: 24px;"><path d="M17.66 11.2C17.43 10.9 17.15 10.64 16.89 10.38C16.22 9.78 15.46 9.35 14.82 8.72C13.33 7.26 13 4.85 13.95 3C13 3.23 12.17 3.75 11.46 4.32C8.87 6.4 7.85 10.07 9.07 13.22C9.11 13.32 9.15 13.42 9.15 13.55C9.15 13.77 9 13.97 8.8 14.05C8.57 14.15 8.33 14.09 8.14 13.93C8.08 13.88 8.04 13.83 8 13.76C6.87 12.33 6.69 10.28 7.45 8.64C5.78 10 4.87 12.3 5 14.47C5.06 14.97 5.12 15.47 5.29 15.97C5.43 16.57 5.7 17.17 6 17.7C7.08 19.43 8.95 20.67 10.96 20.92C13.1 21.19 15.39 20.8 17.03 19.32C18.86 17.66 19.5 15 18.56 12.72L18.43 12.46C18.22 12 17.66 11.2 17.66 11.2M14.5 17.5C14.22 17.74 13.76 18 13.4 18.1C12.28 18.5 11.16 17.94 10.5 17.28C11.69 17 12.4 16.12 12.61 15.23C12.78 14.43 12.46 13.77 12.33 13C12.21 12.26 12.23 11.63 12.5 10.94C12.69 11.32 12.89 11.7 13.13 12C13.9 13 15.11 13.44 15.37 14.8C15.41 14.94 15.43 15.08 15.43 15.23C15.46 16.05 15.1 16.95 14.5 17.5H14.5Z"></path></svg>
                 </span>
             </div>
             <div class="buttons has-addons">
-                <button class="button is-info" id="new_zone_button" onclick="createZone();">Mine zone</button>
+                <button class="button is-info" id="new_zone_button" onclick="createZone();" title="Start mining">Mine zone</button>
             </div>
         </div>
-        <label class="checkbox mb-1" style="align-self: flex-start;">
+        <label class="checkbox mb-1" style="align-self: flex-start;" title="This zone's domains will have only IPv6 addresses from Yggdrasil network (200::/7).">
             <input type="checkbox" id="yggdrasil_only">
             Restrict this zone to <a onclick="open_link('https://yggdrasil-network.github.io');">Yggdrasil</a> only.
         </label>