Refresh pool website example layout

website_example/pages/worker_stats.html

@@ -1,5 +1,23 @@
-<!-- Worker Statistics -->
-<h3><span data-tkey="minerStats">Your Stats & Payment History</span></h3>
+<section class="page-hero page-hero-compact">
+    <div class="page-hero-copy">
+        <span class="eyebrow">Miner diagnostics</span>
+        <h3><span data-tkey="minerStats">Your Stats & Payment History</span></h3>
+        <p class="hero-copy-text">
+            Track hashrate, pending balance, worker fleet health, and payout history in the same visual language as the
+            explorer and the main pool dashboard.
+        </p>
+    </div>
+    <div class="page-hero-panel">
+        <div class="hero-kpi">
+            <span>Lookup</span>
+            <strong>Wallet Based</strong>
+        </div>
+        <div class="hero-kpi">
+            <span>Charts</span>
+            <strong>Hashrate + Payments</strong>
+        </div>
+    </div>
+</section>
 
 <ul class="nav nav-tabs" id="blocksTabs">
 </ul>
@@ -14,14 +32,21 @@
 <script id="siblingTemplate" type="text/x-handlebars-template">
     <div role="tabpanel" class="tab-pane {{active}}" id="{{coin}}">
         <div id="workerStats{{coin}}">
-            <div class="input-group">
-                <input class="form-control" id="yourStatsInput{{coin}}" type="text" data-tplaceholder="enterYourAddress" placeholder="Enter Your {{coin}} Address">
-                <span class="input-group-btn"><button class="btn btn-default" type="button" id="lookUp{{coin}}">
-                    <span><i class="fa fa-search"></i> <span data-tkey="lookup">Lookup</span></span>
-                    <span><i class="fa fa-refresh fa-spin"></i> <span data-tkey="searching">Searching...</span></span>
-                </button></span>
+            <div class="lookup-panel">
+                <div class="lookup-panel-copy">
+                    <span class="eyebrow">Wallet lookup</span>
+                    <h4>Inspect miner activity for {{symbol}}</h4>
+                    <p>Enter the wallet address you use for pool mining to load worker status, pending balance, payments, and charts.</p>
+                </div>
+                <div class="input-group lookup-group">
+                    <input class="form-control" id="yourStatsInput{{coin}}" type="text" data-tplaceholder="enterYourAddress" placeholder="Enter Your {{coin}} Address">
+                    <span class="input-group-btn"><button class="btn btn-default" type="button" id="lookUp{{coin}}">
+                        <span><i class="fa fa-search"></i> <span data-tkey="lookup">Lookup</span></span>
+                        <span><i class="fa fa-refresh fa-spin"></i> <span data-tkey="searching">Searching...</span></span>
+                    </button></span>
+                </div>
+                <div id="addressError{{coin}}"></div>
             </div>
-            <div id="addressError{{coin}}"></div>
 
             <!-- Hashrate -->
             <div class="yourStats{{coin}} push-up-20">