diff --git a/top50.html b/top50.html
new file mode 100644
index 0000000..4990873
--- /dev/null
+++ b/top50.html
@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+  <title>top50</title>
+  <meta content="" name="descriptison">
+  <meta content="" name="keywords">
+
+  <!-- Favicons -->
+  <link href="../static/assets/img/favicon.png" rel="icon">
+  <link href="../static/assets/img/favicon.png" rel="apple-touch-icon">
+
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
+
+  <!-- Vendor CSS Files -->
+  <link href="../static/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
+  <link href="../static/assets/vendor/icofont/icofont.min.css" rel="stylesheet">
+  <link href="../static/assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
+  <link href="../static/assets/vendor/venobox/venobox.css" rel="stylesheet">
+  <link href="../static/assets/vendor/owl.carousel/static/assets/owl.carousel.min.css" rel="stylesheet">
+  <link href="../static/assets/vendor/aos/aos.css" rel="stylesheet">
+
+  <!-- Template Main CSS File -->
+  <link href="../static/assets/css/style.css" rel="stylesheet">
+
+  <!-- =======================================================
+  * Template Name: Day - v2.1.0
+  * Template URL: https://bootstrapmade.com/day-multipurpose-html-template-for-free/
+  * Author: BootstrapMade.com
+  * License: https://bootstrapmade.com/license/
+  ======================================================== -->
+</head>
+
+<body>
+
+  <!-- ======= Top Bar ======= -->
+
+  <!-- ======= Header ======= -->
+  <header id="header" class="fixed-top ">
+    <div class="container d-flex align-items-center">
+      <h2  class="logo mr-auto"><a href="http://127.0.0.1:5000/index">球员分析</a></h2>
+      <!-- Uncomment below if you prefer to use an image logo -->
+      <!-- <a href="index.html" class="logo mr-auto"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
+
+      <nav class="nav-menu d-none d-lg-block">
+        <ul>
+          <li class="active"><a href="/index.html">Home</a></li>
+          <li><a href="./top50.html">TOP50</a></li>
+          <li><a href="./cloud.html">Cloud</a></li>
+          <li><a href="./chart.html">Chart</a></li>
+          <li><a href="./team.html">Team</a></li>
+        </ul>
+      </nav><!-- .nav-menu -->
+    </div>
+  </header><!-- End Header -->
+
+  <!-- ======= Hero Section ======= -->
+
+
+    <!-- ======= About Section ======= -->
+    <!-- ======= Why Us Section ======= -->
+    <!-- ======= Clients Section ======= -->
+    <!-- ======= Services Section ======= -->
+
+    <!-- ======= Cta Section ======= -->
+
+    <!-- ======= Portfolio Section ======= -->
+
+    <!-- ======= Pricing Section ======= -->
+
+    <!-- ======= Team Section ======= -->
+    
+
+    <!-- ======= Contact Section ======= -->
+
+  <!-- ======= Footer ======= -->
+  <footer id="footer">
+    <div class="container">
+      <div class="copyright">
+        &copy; university <strong><span>NBA System</span></strong>
+      </div>
+      <div class="credits">
+        <!-- All the links in the footer should remain intact. -->
+        <!-- You can delete the links only if you purchased the pro version. -->
+        <!-- Licensing information: https://bootstrapmade.com/license/ -->
+        <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/day-multipurpose-html-template-for-free/ -->
+         refer to <a href="https://bootstrapmade.com/">BootstrapMade</a><BR>
+      </div>
+    </div>
+  </footer><!-- End Footer -->
+
+  <a href="#" class="back-to-top"><i class="icofont-simple-up"></i></a>
+  <div id="preloader"></div>
+
+  <!-- Vendor JS Files -->
+  <script src="../static/assets/vendor/jquery/jquery.min.js"></script>
+  <script src="../static/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+  <script src="../static/assets/vendor/jquery.easing/jquery.easing.min.js"></script>
+  <script src="../static/assets/vendor/php-email-form/validate.js"></script>
+  <script src="../static/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
+  <script src="../static/assets/vendor/venobox/venobox.min.js"></script>
+  <script src="../static/assets/vendor/owl.carousel/owl.carousel.min.js"></script>
+  <script src="../static/assets/vendor/aos/aos.js"></script>
+
+  <!-- Template Main JS File -->
+  <script src="../static/assets/js/main.js"></script>
+  <input type="file" id="open-excel" >
+  <div class="open"></div>
+</body>
+
+</html>
+<script src="../static/assets/js/JQuery.js"></script>
+<script src="https://cdn.bootcss.com/xlsx/0.11.9/xlsx.core.min.js"></script>
+<script type="text/javascript">
+  $(function(){
+    $('#open-excel').change(function(e) {
+        var files = e.target.files;
+        var fileReader = new FileReader();
+        fileReader.readAsBinaryString(files[0]); // 以二进制方式打开文件
+        fileReader.onload = function(ev) {
+            try {
+                var data = ev.target.result,
+                    workbook = XLSX.read(data, {
+                        type: 'binary'
+                    }),
+                    values = []; // 存储获取到的数据
+            } catch (e) {
+                console.log('文件类型不正确');
+                return;
+            }
+
+            // 遍历每张表读取
+            for (var sheet in workbook.Sheets) {
+                if (workbook.Sheets.hasOwnProperty(sheet)) {
+                    // 得到表数据并转成json格式
+                    values = values.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
+                    var html = json2Html(values); // 把获取到的数据添加表格
+                    console.log('html',html)
+                    $('.open').html(html)
+                    break; // 如果只取第一张表，加上这行
+                }
+            }
+        }
+    });
+
+
+
+    htmlKit = {
+      _tags: [], html: [],
+      _createAttrs: function (attrs) {
+        var attrStr = [];
+        for (var key in attrs) {
+          if (!attrs.hasOwnProperty(key)) continue;
+          attrStr.push(key + "=" + attrs[key] + "")
+        }
+        return attrStr.join(" ")
+      },
+      _createTag: function (tag, attrs, isStart) {
+        if (isStart) {
+          return "<" + tag + " " + this._createAttrs(attrs) + ">"
+        } else {
+          return "</" + tag + ">"
+        }
+      },
+      start: function (tag, attrs) {
+        this._tags.push(tag);
+        this.html.push(this._createTag(tag, attrs, true))
+      },
+      end: function () {
+        this.html.push(this._createTag(this._tags.pop(), null, false))
+      },
+      tag: function (tag, attr, text) {
+        this.html.push(this._createTag(tag, attr, true) + text + this._createTag(tag, null, false))
+      },
+      create: function () {
+        return this.html.join("")
+      }
+    };
+
+    function json2Html(data) {
+      console.log('data',data)
+      var hk = htmlKit;
+      hk.start("table", {"cellpadding": "10","cellspacing":"0", "border": "1"});
+      hk.start("thead");
+      hk.start("tr");
+      hk.end();
+      hk.end();
+      hk.start("tbody");
+      $.each(data,function (k, v) {
+          if(k==0){
+            hk.start("tr");
+            $.each(v, function(key, val) {
+              hk.tag("td", null, key)
+            });
+            hk.end()
+          }
+          hk.start("tr");
+          $.each(v, function(key, val) {
+            hk.tag("td", null, val)
+          });
+          hk.end()
+      });
+      hk.end();
+      hk.end();
+      return hk.create()
+    }
+
+  })
+
+</script>
