Update index.html

index.html

@@ -18,7 +18,7 @@
       --accent-color: #00ffff;
       --text-color: #ffffff;
       --card-padding: 0.5rem;
-      --text-size-base: 14px;
+      --text-size-base: 16px;
       --terminal-font: 'VT323', monospace;
       --header-font: 'Orbitron', sans-serif;
     }
@@ -26,7 +26,7 @@
     @media (min-width: 768px) {
       :root {
         --card-padding: 0.75rem;
-        --text-size-base: 16px;
+        --text-size-base: 18px;
       }
     }
     
@@ -67,7 +67,7 @@
     }
     
     h1 {
-      font-size: calc(var(--text-size-base) * 1.5);
+      font-size: 24px;
       font-weight: bold;
       color: var(--primary-color);
       font-family: var(--header-font);
@@ -76,6 +76,12 @@
       animation: flicker 4s infinite;
     }
     
+    @media (min-width: 768px) {
+      h1 {
+        font-size: 26px;
+      }
+    }
+    
     .card,
     .card-header,
     .card-body,
@@ -123,8 +129,8 @@
       background-color: #000;
       color: var(--primary-color);
       font-weight: bold;
-      padding: 0.25rem;
+      padding: 0.3rem 0.5rem;
-      font-size: 1rem;
+      font-size: 1.1rem;
       border-bottom: 1px solid var(--primary-color);
       text-shadow: 0 0 5px var(--primary-color);
       animation: flicker 4s infinite;
@@ -260,50 +266,75 @@
       width: 100%;
     }
     
-    /* Enhance metric value styling */
+    /* Enhance metric value styling with consistent glow */
     .metric-value {
       color: var(--text-color);
       font-weight: bold;
-      text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
+      text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
     }
     
-    /* Enhanced neon colors for different metrics */
+    /* Standardized glow effects for all metrics */
-    #btc_price { 
+    /* Yellow color family (BTC price, sats metrics, time to payout) */
+    #btc_price,
+    #daily_mined_sats,
+    #monthly_mined_sats,
+    #estimated_earnings_per_day_sats,
+    #estimated_earnings_next_block_sats,
+    #estimated_rewards_in_window_sats,
+    #est_time_to_payout { 
       color: #ffd700; 
-      text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
+      text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
-    }
-    
-    #unpaid_earnings { 
-      color: #32CD32; 
-      text-shadow: 0 0 8px rgba(50, 205, 50, 0.6);
-    }
-    
-    #miner_status.online { 
-      color: #32CD32; 
-      text-shadow: 0 0 8px rgba(50, 205, 50, 0.6);
-    }
-    
-    #daily_power_cost { 
-      color: #ff5555 !important; 
-      text-shadow: 0 0 8px rgba(255, 85, 85, 0.6);
     }
     
+    /* Green color family (profits, earnings) */
+    #unpaid_earnings,
     #daily_revenue,
     #daily_profit_usd,
     #monthly_profit_usd { 
       color: #32CD32; 
-      text-shadow: 0 0 8px rgba(50, 205, 50, 0.6);
+      text-shadow: 0 0 6px rgba(50, 205, 50, 0.6);
     }
     
-    #est_time_to_payout { 
+    /* Red color family (costs) */
-      color: #ffd700; 
+    #daily_power_cost { 
-      text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
+      color: #ff5555 !important; 
+      text-shadow: 0 0 6px rgba(255, 85, 85, 0.6);
+    }
+    
+    /* White metrics (general stats) */
+    .metric-value.white,
+    #block_number,
+    #network_hashrate,
+    #difficulty,
+    #workers_hashing,
+    #last_share,
+    #blocks_found,
+    #last_block_height {
+      color: #ffffff;
+      text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
+    }
+    
+    /* Blue metrics (time data) */
+    #last_block_time {
+      color: #00dfff;
+      text-shadow: 0 0 6px rgba(0, 223, 255, 0.6);
+    }
+    
+    /* Special stronger glow only for online/offline indicators */
+    .status-green {
+      color: #39ff14 !important;
+      text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14;
+    }
+    
+    .status-red {
+      color: #ff2d2d !important;
+      text-shadow: 0 0 10px #ff2d2d, 0 0 20px #ff2d2d;
     }
     
     .card-body strong {
       color: var(--primary-color);
       margin-right: 0.25rem;
-      text-shadow: 0 0 3px var(--primary-color);
+      text-shadow: 0 0 2px var(--primary-color);
     }
     
     .card-body p {
@@ -452,7 +483,7 @@
     }
     
     #progress-text {
-      font-size: 0.9rem;
+      font-size: 1rem;
       color: var(--primary-color);
       margin-top: 0.3rem;
       text-shadow: 0 0 5px var(--primary-color);
@@ -466,35 +497,46 @@
       text-align: center;
     }
     
-    /* Define color classes from boot page */
+    /* Define color classes with consistent glow for all elements */
     .green {
       color: #39ff14 !important;
-      text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14;
+      text-shadow: 0 0 6px #39ff14, 0 0 12px #39ff14;
     }
     
     .blue {
       color: #00dfff !important;
-      text-shadow: 0 0 10px #00dfff, 0 0 20px #00dfff;
+      text-shadow: 0 0 6px #00dfff, 0 0 12px #00dfff;
     }
     
     .yellow {
       color: #ffd700 !important;
-      text-shadow: 0 0 8px #ffd700, 0 0 16px #ffd700;
+      text-shadow: 0 0 6px #ffd700, 0 0 12px #ffd700;
     }
     
     .white {
       color: #ffffff !important;
-      text-shadow: 0 0 8px #ffffff, 0 0 16px #ffffff;
+      text-shadow: 0 0 6px #ffffff, 0 0 12px #ffffff;
     }
     
     .red {
       color: #ff2d2d !important;
-      text-shadow: 0 0 10px #ff2d2d, 0 0 20px #ff2d2d;
+      text-shadow: 0 0 6px #ff2d2d, 0 0 12px #ff2d2d;
     }
     
     .magenta {
       color: #ff2d95 !important;
-      text-shadow: 0 0 10px #ff2d95, 0 0 20px #ff2d95;
+      text-shadow: 0 0 6px #ff2d95, 0 0 12px #ff2d95;
+    }
+    
+    /* Special stronger glow classes for miner status */
+    .status-green {
+      color: #39ff14 !important;
+      text-shadow: 0 0 10px #39ff14, 0 0 20px #39ff14;
+    }
+    
+    .status-red {
+      color: #ff2d2d !important;
+      text-shadow: 0 0 10px #ff2d2d, 0 0 20px #ff2d2d;
     }
     
     /* Cursor blink for terminal feel */
@@ -530,7 +572,11 @@
       }
       
       h1 {
-        font-size: 1.1rem;
+        font-size: 22px;
+      }
+      
+      .card-header {
+        font-size: 1rem;
       }
       
       #topRightLink {
@@ -567,10 +613,10 @@
             <p>
               <strong>Status:</strong>
               <span id="miner_status" class="metric-value">
-                {% if metrics.workers_hashing and metrics.workers_hashing > 0 %}
+                {% if metrics and metrics.workers_hashing and metrics.workers_hashing > 0 %}
-                  <span class="green">ONLINE</span> <span class="online-dot"></span>
+                  <span class="status-green">ONLINE</span> <span class="online-dot"></span>
                 {% else %}
-                  <span class="red">OFFLINE</span> <span class="offline-dot"></span>
+                  <span class="status-red">OFFLINE</span> <span class="offline-dot"></span>
                 {% endif %}
               </span>
             </p>
@@ -581,7 +627,7 @@
             </p>
             <p>
               <strong>Last Share:</strong>
-              <span id="last_share" class="metric-value">{{ metrics.total_last_share }}</span>
+              <span id="last_share" class="metric-value">{{ metrics.total_last_share or "N/A" }}</span>
             </p>
           </div>
         </div>
@@ -597,7 +643,7 @@
             <p>
               <strong>Pool Total Hashrate:</strong>
               <span id="pool_total_hashrate" class="metric-value white">
-                {% if metrics.pool_total_hashrate %}
+                {% if metrics and metrics.pool_total_hashrate and metrics.pool_total_hashrate_unit %}
                   {{ metrics.pool_total_hashrate }} {{ metrics.pool_total_hashrate_unit[:-2]|upper ~ metrics.pool_total_hashrate_unit[-2:] }}
                 {% else %}
                   N/A
@@ -609,28 +655,64 @@
             <p>
               <strong>24hr Avg Hashrate:</strong>
               <span id="hashrate_24hr" class="metric-value white">
-                {{ metrics.hashrate_24hr }} {{ metrics.hashrate_24hr_unit[:-2]|upper ~ metrics.hashrate_24hr_unit[-2:] }}
+                {% if metrics and metrics.hashrate_24hr %}
+                  {{ metrics.hashrate_24hr }} 
+                  {% if metrics.hashrate_24hr_unit %}
+                    {{ metrics.hashrate_24hr_unit[:-2]|upper ~ metrics.hashrate_24hr_unit[-2:] }}
+                  {% else %}
+                    TH/s
+                  {% endif %}
+                {% else %}
+                  N/A
+                {% endif %}
               </span>
               <span id="indicator_hashrate_24hr"></span>
             </p>
             <p>
               <strong>3hr Avg Hashrate:</strong>
               <span id="hashrate_3hr" class="metric-value white">
-                {{ metrics.hashrate_3hr }} {{ metrics.hashrate_3hr_unit[:-2]|upper ~ metrics.hashrate_3hr_unit[-2:] }}
+                {% if metrics and metrics.hashrate_3hr %}
+                  {{ metrics.hashrate_3hr }} 
+                  {% if metrics.hashrate_3hr_unit %}
+                    {{ metrics.hashrate_3hr_unit[:-2]|upper ~ metrics.hashrate_3hr_unit[-2:] }}
+                  {% else %}
+                    TH/s
+                  {% endif %}
+                {% else %}
+                  N/A
+                {% endif %}
               </span>
               <span id="indicator_hashrate_3hr"></span>
             </p>
             <p>
               <strong>10min Avg Hashrate:</strong>
               <span id="hashrate_10min" class="metric-value white">
-                {{ metrics.hashrate_10min }} {{ metrics.hashrate_10min_unit[:-2]|upper ~ metrics.hashrate_10min_unit[-2:] }}
+                {% if metrics and metrics.hashrate_10min %}
+                  {{ metrics.hashrate_10min }} 
+                  {% if metrics.hashrate_10min_unit %}
+                    {{ metrics.hashrate_10min_unit[:-2]|upper ~ metrics.hashrate_10min_unit[-2:] }}
+                  {% else %}
+                    TH/s
+                  {% endif %}
+                {% else %}
+                  N/A
+                {% endif %}
               </span>
               <span id="indicator_hashrate_10min"></span>
             </p>
             <p>
               <strong>60sec Avg Hashrate:</strong>
-              <span id="hashrate_60sec" class="metric-value green">
+              <span id="hashrate_60sec" class="metric-value white">
-                {{ metrics.hashrate_60sec }} {{ metrics.hashrate_60sec_unit[:-2]|upper ~ metrics.hashrate_60sec_unit[-2:] }}
+                {% if metrics and metrics.hashrate_60sec %}
+                  {{ metrics.hashrate_60sec }} 
+                  {% if metrics.hashrate_60sec_unit %}
+                    {{ metrics.hashrate_60sec_unit[:-2]|upper ~ metrics.hashrate_60sec_unit[-2:] }}
+                  {% else %}
+                    TH/s
+                  {% endif %}
+                {% else %}
+                  N/A
+                {% endif %}
               </span>
               <span id="indicator_hashrate_60sec"></span>
             </p>
@@ -644,22 +726,46 @@
           <div class="card-body">
             <p>
               <strong>Block Number:</strong>
-              <span id="block_number" class="metric-value white">{{ metrics.block_number|commafy }}</span>
+              <span id="block_number" class="metric-value white">
+                {% if metrics and metrics.block_number %}
+                  {{ metrics.block_number|commafy }}
+                {% else %}
+                  N/A
+                {% endif %}
+              </span>
               <span id="indicator_block_number"></span>
             </p>
             <p>
               <strong>BTC Price:</strong>
-              <span id="btc_price" class="metric-value yellow">${{ "%.2f"|format(metrics.btc_price) }}</span>
+              <span id="btc_price" class="metric-value yellow">
+                {% if metrics and metrics.btc_price %}
+                  ${{ "%.2f"|format(metrics.btc_price) }}
+                {% else %}
+                  $0.00
+                {% endif %}
+              </span>
               <span id="indicator_btc_price"></span>
             </p>
             <p>
               <strong>Network Hashrate:</strong>
-              <span id="network_hashrate" class="metric-value white">{{ metrics.network_hashrate|round|commafy }} EH/s</span>
+              <span id="network_hashrate" class="metric-value white">
+                {% if metrics and metrics.network_hashrate %}
+                  {{ metrics.network_hashrate|round|commafy }} EH/s
+                {% else %}
+                  N/A
+                {% endif %}
+              </span>
               <span id="indicator_network_hashrate"></span>
             </p>
             <p>
               <strong>Difficulty:</strong>
-              <span id="difficulty" class="metric-value white">{{ metrics.difficulty|round|commafy }}</span>
+              <span id="difficulty" class="metric-value white">
+                {% if metrics and metrics.difficulty %}
+                  {{ metrics.difficulty|round|commafy }}
+                {% else %}
+                  N/A
+                {% endif %}
+              </span>
               <span id="indicator_difficulty"></span>
             </p>
           </div>
@@ -675,27 +781,57 @@
           <div class="card-body">
             <p>
               <strong>Daily Mined (Net):</strong>
-              <span id="daily_mined_sats" class="metric-value yellow">{{ metrics.daily_mined_sats|commafy }} sats</span>
+              <span id="daily_mined_sats" class="metric-value yellow">
+                {% if metrics and metrics.daily_mined_sats %}
+                  {{ metrics.daily_mined_sats|commafy }} sats
+                {% else %}
+                  0 sats
+                {% endif %}
+              </span>
               <span id="indicator_daily_mined_sats"></span>
             </p>
             <p>
               <strong>Monthly Mined (Net):</strong>
-              <span id="monthly_mined_sats" class="metric-value yellow">{{ metrics.monthly_mined_sats|commafy }} sats</span>
+              <span id="monthly_mined_sats" class="metric-value yellow">
+                {% if metrics and metrics.monthly_mined_sats %}
+                  {{ metrics.monthly_mined_sats|commafy }} sats
+                {% else %}
+                  0 sats
+                {% endif %}
+              </span>
               <span id="indicator_monthly_mined_sats"></span>
             </p>
             <p>
               <strong>Est. Earnings/Day:</strong>
-              <span id="estimated_earnings_per_day_sats" class="metric-value yellow">{{ metrics.estimated_earnings_per_day_sats|commafy }} sats</span>
+              <span id="estimated_earnings_per_day_sats" class="metric-value yellow">
+                {% if metrics and metrics.estimated_earnings_per_day_sats %}
+                  {{ metrics.estimated_earnings_per_day_sats|commafy }} sats
+                {% else %}
+                  0 sats
+                {% endif %}
+              </span>
               <span id="indicator_estimated_earnings_per_day_sats"></span>
             </p>
             <p>
               <strong>Est. Earnings/Block:</strong>
-              <span id="estimated_earnings_next_block_sats" class="metric-value yellow">{{ metrics.estimated_earnings_next_block_sats|commafy }} sats</span>
+              <span id="estimated_earnings_next_block_sats" class="metric-value yellow">
+                {% if metrics and metrics.estimated_earnings_next_block_sats %}
+                  {{ metrics.estimated_earnings_next_block_sats|commafy }} sats
+                {% else %}
+                  0 sats
+                {% endif %}
+              </span>
               <span id="indicator_estimated_earnings_next_block_sats"></span>
             </p>
             <p>
               <strong>Est. Rewards in Window:</strong>
-              <span id="estimated_rewards_in_window_sats" class="metric-value yellow">{{ metrics.estimated_rewards_in_window_sats|commafy }} sats</span>
+              <span id="estimated_rewards_in_window_sats" class="metric-value yellow">
+                {% if metrics and metrics.estimated_rewards_in_window_sats %}
+                  {{ metrics.estimated_rewards_in_window_sats|commafy }} sats
+                {% else %}
+                  0 sats
+                {% endif %}
+              </span>
               <span id="indicator_estimated_rewards_in_window_sats"></span>
             </p>
           </div>
@@ -708,22 +844,46 @@
           <div class="card-body">
             <p>
               <strong>Daily Revenue:</strong>
-              <span id="daily_revenue" class="metric-value green">${{ "%.2f"|format(metrics.daily_revenue) }}</span>
+              <span id="daily_revenue" class="metric-value green">
+                {% if metrics and metrics.daily_revenue is defined and metrics.daily_revenue is not none %}
+                  ${{ "%.2f"|format(metrics.daily_revenue) }}
+                {% else %}
+                  $0.00
+                {% endif %}
+              </span>
               <span id="indicator_daily_revenue"></span>
             </p>
             <p>
               <strong>Daily Power Cost:</strong>
-              <span id="daily_power_cost" class="metric-value red">${{ "%.2f"|format(metrics.daily_power_cost) }}</span>
+              <span id="daily_power_cost" class="metric-value red">
+                {% if metrics and metrics.daily_power_cost is defined and metrics.daily_power_cost is not none %}
+                  ${{ "%.2f"|format(metrics.daily_power_cost) }}
+                {% else %}
+                  $0.00
+                {% endif %}
+              </span>
               <span id="indicator_daily_power_cost"></span>
             </p>
             <p>
               <strong>Daily Profit (USD):</strong>
-              <span id="daily_profit_usd" class="metric-value green">${{ "%.2f"|format(metrics.daily_profit_usd) }}</span>
+              <span id="daily_profit_usd" class="metric-value green">
+                {% if metrics and metrics.daily_profit_usd is defined and metrics.daily_profit_usd is not none %}
+                  ${{ "%.2f"|format(metrics.daily_profit_usd) }}
+                {% else %}
+                  $0.00
+                {% endif %}
+              </span>
               <span id="indicator_daily_profit_usd"></span>
             </p>
             <p>
               <strong>Monthly Profit (USD):</strong>
-              <span id="monthly_profit_usd" class="metric-value green">${{ "%.2f"|format(metrics.monthly_profit_usd) }}</span>
+              <span id="monthly_profit_usd" class="metric-value green">
+                {% if metrics and metrics.monthly_profit_usd is defined and metrics.monthly_profit_usd is not none %}
+                  ${{ "%.2f"|format(metrics.monthly_profit_usd) }}
+                {% else %}
+                  $0.00
+                {% endif %}
+              </span>
               <span id="indicator_monthly_profit_usd"></span>
             </p>
           </div>
@@ -739,24 +899,46 @@
           <div class="card-body">
             <p>
               <strong>Unpaid Earnings:</strong>
-              <span id="unpaid_earnings" class="metric-value green">{{ metrics.unpaid_earnings }} BTC</span>
+              <span id="unpaid_earnings" class="metric-value green">
+                {% if metrics and metrics.unpaid_earnings %}
+                  {{ metrics.unpaid_earnings }} BTC
+                {% else %}
+                  0 BTC
+                {% endif %}
+              </span>
               <span id="indicator_unpaid_earnings"></span>
             </p>
             <p>
               <strong>Last Block:</strong>
-              <span id="last_block_height" class="metric-value white">{{ metrics.last_block_height }}</span>
+              <span id="last_block_height" class="metric-value white">
-              —<span id="last_block_time" class="metric-value blue">{{ metrics.last_block_time }}</span>—
+                {{ metrics.last_block_height if metrics and metrics.last_block_height else "N/A" }}
-              <span class="green">+{{ metrics.last_block_earnings | int | commafy }} sats</span>
+              </span>
+              —
+              <span id="last_block_time" class="metric-value blue">
+                {{ metrics.last_block_time if metrics and metrics.last_block_time else "N/A" }}
+              </span>
+              —
+              <span class="green">
+                {% if metrics and metrics.last_block_earnings %}
+                  +{{ metrics.last_block_earnings|int|commafy }} sats
+                {% else %}
+                  +0 sats
+                {% endif %}
+              </span>
               <span id="indicator_last_block"></span>
             </p> 
             <p>
               <strong>Est. Time to Payout:</strong>
-              <span id="est_time_to_payout" class="metric-value yellow">{{ metrics.est_time_to_payout }}</span>
+              <span id="est_time_to_payout" class="metric-value yellow">
+                {{ metrics.est_time_to_payout if metrics and metrics.est_time_to_payout else "N/A" }}
+              </span>
               <span id="indicator_est_time_to_payout"></span>
             </p>
             <p>
               <strong>Blocks Found:</strong>
-              <span id="blocks_found" class="metric-value white">{{ metrics.blocks_found }}</span>
+              <span id="blocks_found" class="metric-value white">
+                {{ metrics.blocks_found if metrics and metrics.blocks_found else "0" }}
+              </span>
               <span id="indicator_blocks_found"></span>
             </p>
           </div>
@@ -778,7 +960,7 @@
             </div>
           </div>
         </div>
-        <div id="progress-text">60s to next update</div>
+        <!-- <div id="progress-text">60s to next update</div> -->
       </div>
       <div id="uptimeTimer"><strong>Uptime:</strong> 0h 0m 0s</div>
     </div>
@@ -800,9 +982,9 @@
     $(document).ready(function() {
       // Update color classes when data refreshes
       $(document).on('dataRefreshed', function() {
-        // Add enhanced glow effects for certain elements
+        // Add enhanced glow effects only for online/offline status elements
-        $(".online-dot").parent().addClass("green");
+        $(".online-dot").parent().addClass("status-green");
-        $(".offline-dot").parent().addClass("red");
+        $(".offline-dot").parent().addClass("status-red");
         
         // Keep cursor blinking
         if ($("#terminal-cursor").length === 0) {