diff --git a/public/index.html b/public/index.html
index 0e53c24..bf99cf8 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,25 +4,122 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width">
-    <title>HeroUnion英雄联盟 - Hero爬虫联盟</title>
-    <meta name="author" content="HeroUnion英雄联盟 - filesite.io">
-    <meta name="description" content="HeroUnion: A union of hero bots, Hero爬虫的英雄联盟。">
+    <title>HeroUnion英雄联盟 - 开源的Hero爬虫联盟</title>
+    <meta name="author" content="filesite.io">
+    <meta name="description" content="HeroUnion: A union of hero bots, 开源的Hero爬虫联盟。">
+    <style>
+        *,body{margin:0;padding:0}
+        body{padding:8px;max-width:640px;margin:0 auto}
+        h1{font-size:2em;font-weight:500}
+        small{font-size:65%;font-weight:400}
+        pre{background-color:#DDD;padding-bottom:3px;padding-right:3px;border-radius:0 5px 0 5px;max-width:480px}
+        code{display:block;background-color:#EEE;padding:4px}
+
+        .text-center{text-align:center}
+        .mt-d5{margin-top:0.5em}
+        .mt-1{margin-top:1em}
+        .mt-4{margin-top:4em}
+
+        .stats{background-color:#EEE;padding:10px}
+        .col{display:inline-block;padding:13px 4px;width:20%;background:#444;color:#FFF;margin-right:4px;margin-bottom:6px;text-align:center}
+        .col strong{font-size:24px}
+        .col label{display:block;font-size:15px}
+        .info{background-color:darkblue}
+        .success{background-color:green}
+        .warning{background-color:orange;color:#444}
+        .danger{background-color:red}
+        .disable{background-color:gray}
+
+        @media(max-width:480px) {
+            h1 small{display:block}
+        }
+    </style>
     <script src="/js/jquery-3.7.1.min.js"></script>
 </head>
 <body>
-    <h1>HeroUnion英雄联盟 <small>- Hero爬虫联盟</small></h1>
+    <h1 class="text-center">HeroUnion英雄联盟 - <small>开源的Hero爬虫联盟</small></h1>
 
-    <h3>HeroUnion联盟状态</h3>
-    <pre><code id="herounion_stats">...</code></pre>
+    <hr class="mt-d5">
 
-    <h3>HeroUnion源码下载</h3>
+    <h3 class="mt-1">HeroUnion源码下载</h3>
     <p><a href="https://git.filesite.io/filesite/hero_union" target="_blank">https://git.filesite.io/filesite/hero_union</a></p>
 
-    <h3>HeroBot - Machete Hero源码下载</h3>
+    <h3 class="mt-1">HeroBot - Machete Hero源码下载</h3>
     <p><a href="https://git.filesite.io/filesite/machete_hero" target="_blank">https://git.filesite.io/filesite/machete_hero</a></p>
-    
-    
+
+    <h3 class="mt-1">HeroUnion联盟状态 - 已运行<span class="run_time">...</span></h3>
+    <h4 class="mt-d5">任务状态</h4>
+    <div class="stats taskStatus">
+        <span class="col">
+            <strong class="total">...</strong>
+            <label>总数</label>
+        </span>
+        <span class="col info">
+            <strong class="waiting">...</strong>
+            <label>等待中</label>
+        </span>
+        <span class="col warning">
+            <strong class="running">...</strong>
+            <label>执行中</label>
+        </span>
+        <span class="col success">
+            <strong class="done">...</strong>
+            <label>完成</label>
+        </span>
+        <span class="col danger">
+            <strong class="failed">...</strong>
+            <label>失败</label>
+        </span>
+    </div>
+
+    <h4 class="mt-d5">爬虫状态</h4>
+    <div class="stats heroStatus">
+        <span class="col">
+            <strong class="total">...</strong>
+            <label>总数</label>
+        </span>
+        <span class="col success">
+            <strong class="idle">...</strong>
+            <label>空闲</label>
+        </span>
+        <span class="col warning">
+            <strong class="busy">...</strong>
+            <label>繁忙</label>
+        </span>
+        <span class="col disable">
+            <strong class="offline">...</strong>
+            <label>离线</label>
+        </span>
+    </div>
+
+    <h4 class="mt-d5">JSON数据</h4>
+    <pre><code id="herounion_stats">...</code></pre>
+
+    <footer class="mt-4 text-center">
+        &copy;copyright <a href="https://filesite.io" target="_blank">FileSite.io</a>
+    </footer>
+
     <script type="text/javascript">
+        var formatSeconds = function(secs) {
+            var str = secs + '秒';
+            if (secs > 86400) {
+                str = Math.floor(secs/86400) + '天';
+            }else if (secs > 3600) {
+                str = Math.floor(secs/3600) + '小时';
+            }else if (secs > 86400*365) {
+                str = Math.floor(secs/86400/365) + '年'
+                        + Math.floor( (secs - Math.floor(secs/86400/365)) / 86400 ) + '天';
+            }
+
+            return str;
+        };
+
+        var renderStats = function(data) {
+            for (var key in data) {
+                $('.'+key).text(data[key]);
+            }
+        };
+
         var api = '/api/stats/';
         $.ajax({
             url: api,
@@ -30,6 +127,9 @@
             dataType: 'json'
         }).done(function(data) {
             $('#herounion_stats').text(JSON.stringify(data, null, 4));
+            $('.run_time').text( formatSeconds(data.run_seconds) );
+            renderStats(data.taskStatus);
+            renderStats(data.heroStatus);
         });
     </script>
 </body>
