diff --git a/app/web_ui/templates/index.html b/app/web_ui/templates/index.html
index 0f35d49..359a1d8 100644
--- a/app/web_ui/templates/index.html
+++ b/app/web_ui/templates/index.html
@@ -1,196 +1,336 @@
 <!DOCTYPE html>
 <html lang="zh-CN">
-
 <head>
-    <meta charset="utf-8" />
-    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
-    <title></title>
-    <style type="text/css">
-        html,
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>微信年度聊天报告</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://memotrace.lc044.love/static/css/fullpage.min.css" />
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+    <script type="text/javascript" src="https://memotrace.lc044.love/static/js/fullpage.min.js"></script>
+    <script type="text/javascript" src="https://davidshimjs.github.io/qrcodejs/qrcode.min.js"></script>
+    <style>
         body {
-            height: 100%;
-        }
-        body,
-        ul,
-        li,
-        a,
-        p,
-        div {
-            padding: 0px;
-            margin: 0px;
-        }
-        #wrap {
-            overflow: hidden;
-            width: 100%;
-        }
-        #main {
-            top: 0;
-            position: relative;
-        }
-        .page {
-            width: 100%;
-            margin: 0;
-        }
-        #pageUl {
-            color: #8a6d3b;
-            position: fixed;
-            right: 10px;
-        }
-        #nextButton,#lastButton {
-            color: #000;
-            background-color: #8a6d3b;
-            border: none;
-            border-radius: 10px;
-        }
+    /* background-color: rgb(57,56,206); */
+    background: linear-gradient(to right,  #9ebdd8,#84aeea),
+    url("critters.png");
+    /* background-image: url('../img/èƒŒæ™¯.png'); */
+    margin: 0;
+    display: flex;
+    color: #fcf5f5;
+    flex-direction: column;
+    align-items: center;
+}
+.section{
+    height: 100vh;
+    margin: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+#snow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    z-index: 1000;
+}
+@keyframes snowfall {
+    from {
+        transform: translateY(-100vh);
+    }
+    to {
+        transform: translateY(100vh);
+    }
+}
+.snowflake {
+    position: absolute;
+    background-image: url('../img/snow2.png');
+    background-size: contain; /* ä¿æŒé›ªèŠ±å›¾ç‰‡çš„åŽŸå§‹æ¯”ä¾‹ */
+    animation: snowfall linear infinite;
+    animation-duration: 15s; /* ä¿®æ”¹ä¸ºä½ å¸Œæœ›çš„åŠ¨ç”»æŒç»­æ—¶é—´ */
+    animation-delay: calc(-15s * var(--animation-order));
+}
+.snowflake0 {
+    position: absolute;
+    background-color: #fff;
+    border-radius: 50%;
+    content: '';
+    z-index: -1;
+  }
+.Mountain-Image{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    max-height: 20%;
+}
+/* home */
+
+ul,li{
+list-style:none;
+}
+ul{
+overflow:hidden;
+padding:3em;
+}
+ul li a{
+text-decoration:none;
+color:#000  ;
+background:#ffc  ;
+display:block;
+height:10em;
+width:10em;
+padding:1em;
+}
+ul li{
+margin:1em;
+float:left;
+}
+
+ul li h2
+{
+    margin: 0;
+    font-size: 140%;
+    font-weight: bold;
+    padding-bottom: 10px;
+}
+ul li p
+{
+    margin: 0;
+    font-family: “Reenie Beanie” ,arial,sans-serif,微软雅黑;
+    font-size: 110%;
+}
+
+ul li a
+    {
+    text-decoration: none;
+    color: #000  ;
+    background: #ffc  ;
+    display: block;
+    height: 10em;
+    width: 10em;
+    padding: 1em; /* Firefox */
+    -moz-box-shadow: 5px 5px 7px rgba(33,33,33,1)  ; /* Safari+Chrome */
+    -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7)  ; /* Opera */
+    box-shadow: 5px 5px 7px rgba(33,33,33,.7)  ;
+    }
+    ul li a{
+-webkit-transform:rotate(-6deg);
+-o-transform:rotate(-6deg);
+-moz-transform:rotate(-6deg);
+}
+
+ul li:nth-child(even) a{
+-o-transform:rotate(4deg);
+-webkit-transform:rotate(4deg);
+-moz-transform:rotate(4deg);
+position:relative;
+top:5px;
+}
+ul li:nth-child(3n) a{
+-o-transform:rotate(-3deg);
+-webkit-transform:rotate(-3deg);
+-moz-transform:rotate(-3deg);
+position:relative;
+top:-5px;
+}
+ul li:nth-child(5n) a{
+-o-transform:rotate(5deg);
+-webkit-transform:rotate(5deg);
+-moz-transform:rotate(5deg);
+position:relative;
+top:-10px;
+}
+
+ul li a:hover,ul li a:focus{
+-moz-box-shadow:10px 10px 7px rgba(0,0,0,.7)  ;
+-webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7)  ;
+box-shadow:10px 10px 7px rgba(0,0,0,.7)  ;
+-webkit-transform: scale(1.25);
+-moz-transform: scale(1.25);
+-o-transform: scale(1.25);
+position:relative;
+z-index:5;
+}
+
+ul li:nth-child(even) a{
+-o-transform:rotate(4deg);
+-webkit-transform:rotate(4deg);
+-moz-transform:rotate(4deg);
+position:relative;
+top:5px;
+background:#cfc  ;
+}
+ul li:nth-child(3n) a{
+-o-transform:rotate(-3deg);
+-webkit-transform:rotate(-3deg);
+-moz-transform:rotate(-3deg);
+position:relative;
+top:-5px;
+background:#ccf  ;
+}
+a{
+    padding: 0px;
+}
+.contact-container{
+    padding-bottom: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.avatar{
+    height: 45px;
+    width: 45px;
+    border-radius: 50%;
+}
+.nickname{
+    font: 1.1em sans-serif;
+    font-weight: bold;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;     /* 显示省略号 */
+    max-width: 200px;            /* 设置最大宽度，可以根据需要调整 */
+    overflow: hidden;
+}
+
+
+/* CSS代码 */
+.number {
+    font: 1.1em sans-serif;
+    color: #af27ca;
+    margin: 5px;
+  }
+
+
+  #cover {
+    text-align: center;
+    animation: fadeIn 3s ease-out;
+}
+
+.cover {
+    text-align: center;
+    animation: fadeIn 3s ease-out;
+}
+h1 {
+    color: #003366;
+    font-size: 3em;
+    margin-bottom: 10px;
+}
+
+p {
+    color: #0066cc;
+    font-size: 1.2em;
+}
+
+#enterButton {
+    cursor: pointer;
+    padding: 10px 20px;
+    background-color: #003366;
+    color: #fff;
+    border: none;
+    font-size: 1em;
+    margin-top: 20px;
+    transition: background-color 0.3s;
+}
+
+#enterButton:hover {
+    background-color: #001a33;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
     </style>
 </head>
-
 <body>
-    <div id="wrap">
-        <div id="main">
-            <div><button  id="nextButton" style="position: fixed; bottom: 10px; right: 10px;">Next Page</button></div>
-            <div><button  id="lastButton" style="position: fixed; bottom: 10px; right: 100px;">Last Page</button></div>
-            <ul id="pageUl" type="circle">
-                <li id="pageUlLi1" class="pageUlLi" style="color: red;"> </li>
-                <li id="pageUlLi2" class="pageUlLi"> </li>
-                <li id="pageUlLi3" class="pageUlLi"> </li>
-                <li id="pageUlLi4" class="pageUlLi"> </li>
-                <li id="pageUlLi5" class="pageUlLi"> </li>
-                <li id="pageUlLi6" class="pageUlLi"> </li>
-                <li id="pageUlLi7" class="pageUlLi"> </li>
-            </ul>
-            <div id="page1" class="page">
-                <iframe src="/home" frameborder="0" height="100%" width="100%" class="if00"></iframe>
-            </div>
-            <div id="page2" class="page">
-                <iframe src="/wordcloud/1" frameborder="0" height="100%" width="100%" class="if00"></iframe>
-            </div>
-            <div id="page3" class="page">
-                <iframe src="/wordcloud/0" frameborder="0" height="100%" width="100%" class="if00"></iframe>
-            </div>
-            <div style="background-color: #8a6d3b" id="page4" class="page">
-                <iframe src="/test" frameborder="0" id="iframe0" height="100%" width="100%" class="if00"></iframe>
-            </div>
-            <div style="background-color: #337ab7" id="page5" class="page">
-                <iframe src="test" frameborder="0" id="iframe3" height="100%" width="100%" class="if00"></iframe>
-            </div>
-            <div style="background-color: #337ab7" id="page6" class="page">
-                <iframe src="test" frameborder="0" id="iframe4" height="100%" width="100%" class="if00"></iframe>
-            </div>
-            <div style="background-color: #337ab7" id="page7" class="page">
-                <iframe src="test" frameborder="0" id="iframe5" height="100%" width="100%" class="if00"></iframe>
-            </div>
+    <div id="snow"></div>
+    <!-- Your content goes here -->
+    <div id="fullpage">
+      <div class="section">
+          <div id="cover">
+              <h1>微信年度聊天报告</h1>
+              <p>统计、分析、回顾，记录一年的聊天时光</p>
+              <button id="enterButton" onclick="navigateToNextPage()">进入报告</button>
+          </div>
+      </div>
+      <div class="section cover">
+          <h1>我的年度好友</h1>
+          <h2>聊天榜单</h2>
+          <ul>
+              {% for contact,msg_num in contact_topN:%}
+                  <li>
+                      <a href="/charts/{{contact.wxid}}" target="_blank">
+                          <div class="contact-container">
+                              <p class="nickname">{{contact.remark}}</p>
+                              <img class="avatar" src="{{contact.smallHeadImgUrl}}">
+                          </div>
+                          <div style="color: blueviolet;"><span class="number">{{msg_num}}</span>条消息<br><span class="number">000</span>字</div>
+                      </a>
+                  </li>
+              {% endfor %}
+          </ul>
+      </div>
+      <div class="section" style="text-align: center;display:flex;justify-content: center;align-items: center;">
+        <h1>分享此页面</h1>
+        <div>
+            <a id="share" href="https://memotrace.lc044.love/" target="_blank">https://memotrace.lc044.love/</a>
         </div>
+        <button onclick="confirmUpload()">上传并显示二维码</button>
+        <div id="qrcode"></div>
+        <a href="https://memotrace.lc044.love/" target="_blank">点击生成我的年度聊天报告</a>
     </div>
+  </div>
+<script>
+    // JavaScript 代码用于生成聊天内容和雪花动画
+    document.addEventListener('DOMContentLoaded', function () {
+        const snowContainer = document.getElementById('snow');
+        // 生成雪花动画
+        for (let i = 0; i < 50; i++) {
+            const snowflake = document.createElement('div');
+            snowflake.className = 'snowflake';
+            var ran = Math.random();
+            var ran0 = 1-ran;
+            snowflake.style.left = `${Math.random() * 150}vw`;
+            snowflake.style.animationDuration = `${ran0  * 20 + 7}s`;
+            snowflake.style.setProperty('--animation-order', i);
 
-    <script type="text/javascript">
-        window.onload = resizeImages;
-        window.onresize = resizeImages;
+            // 设置雪花的随机大小
+            const size = ran * 20 + 10; // 随机大小在 10 到 30 之间
+            snowflake.style.width = `${size}px`;
+            snowflake.style.height = `${size}px`;
 
-        function resizeImages() {
-            $(function (e) {
-                var screenWeight = document.documentElement.clientWidth;
-                var screenHeight = document.documentElement.clientHeight;
-                $("[name=pageImg]").css("width", screenWeight).css("height", screenHeight);
-                $("#pageUl").css("bottom", screenHeight >> 1);
-            });
+            snowContainer.appendChild(snowflake);
         }
-
-        var index = 1;
-        var curIndex = 1;
-        var wrap = document.getElementById("wrap");
-        var main = document.getElementById("main");
-        var hei = document.body.clientHeight;
-        wrap.style.height = hei + "px";
-        var obj = document.getElementsByTagName("div");
-        for (var i = 0; i < obj.length; i++) {
-            if (obj[i].className == 'page') {
-                obj[i].style.height = hei + "px";
-            }
-        }
-        var pageNum = document.querySelectorAll(".page").length;
-
-        var startTime = 0,
-            endTime = 0,
-            now = 0;
-        if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
-            document.addEventListener("DOMMouseScroll", scrollFun, false);
-        } else if (document.addEventListener) {
-            document.addEventListener("wheel", scrollFun, false);
-        } else if (document.attachEvent) {
-            document.attachEvent("onmousewheel", scrollFun);
-        } else {
-            document.onmousewheel = scrollFun;
-        }
-
-        function scrollFun(event) {
-            startTime = new Date().getTime();
-            var delta = event.detail || (-event.wheelDelta);
-            console.info(index);
-            if ((endTime - startTime) < -1000) {
-                if (delta > 0 && parseInt(main.offsetTop) > -(hei * (pageNum - 1))) {
-                    index++;
-                    toPage(index);
-                    // iframeAddEventListener();
-                }
-                if (delta < 0 && parseInt(main.offsetTop) < 0) {
-                    index--;
-                    toPage(index);
-                    // iframeAddEventListener();
-                }
-                endTime = new Date().getTime();
-            } else {
-                event.preventDefault();
-            }
-        }
-
-        function toPage(idx) {
-            if (idx != curIndex) {
-                index = idx
-                var delta = idx - curIndex;
-                now = now - delta * hei;
-                $("#main").animate({
-                    top: (now + 'px')
-                }, 500);
-                curIndex = idx;
-                $(".pageUlLi").css("color", "#8a6d3b");
-                $("#pageUlLi" + idx).css("color", "red");
-            }
-        }
-
-        document.getElementById("nextButton").onclick = function () {
-            if (index < pageNum) {
-                index++;
-                toPage(index);
-            }
-        };
-        document.getElementById("lastButton").onclick = function () {
-            if (index > 1) {
-                index--;
-                toPage(index);
-            }
-        };
-        document.getElementById("pageUlLi1").onclick = function () {
-            toPage(1);
-        }
-        document.getElementById("pageUlLi2").onclick = function () {
-            toPage(2);
-        }
-        document.getElementById("pageUlLi3").onclick = function () {
-            toPage(3);
-        }
-        document.getElementById("pageUlLi4").onclick = function () {
-            toPage(4);
-        }
-        document.getElementById("pageUlLi5").onclick = function () {
-            toPage(5);
-        }
-        document.getElementById("pageUlLi6").onclick = function () {
-            toPage(6);
-        }
-        document.getElementById("pageUlLi7").onclick = function () {
-            toPage(7);
-        }
-    </script>
-
+    });
+    function createSnowflake(top, left) {
+      const snowflake = document.createElement('div');
+      snowflake.className = 'snowflake0';
+      snowflake.style.top = `${top}vh`;
+      snowflake.style.left = `${left}vw`;
+      // 设置雪花的随机大小
+      const size = Math.random() * 20 + 10; // 随机大小在 10 到 30 之间
+        snowflake.style.width = `${size}px`;
+        snowflake.style.height = `${size}px`;
+      document.body.appendChild(snowflake);
+    }
+</script>
+<script>
+    $(document).ready(function() {
+      $('#fullpage').fullpage();
+    });
+    // 获取按钮元素
+    var scrollToNextButton = document.getElementById('scrollToNext');
+    function navigateToNextPage(){
+        fullpage_api.moveSectionDown();
+    }
+  </script>
+</body>
 </html>
diff --git a/app/web_ui/web.py b/app/web_ui/web.py
index b2ff1cf..7262e13 100644
--- a/app/web_ui/web.py
+++ b/app/web_ui/web.py
@@ -22,6 +22,7 @@ time_range = (start_time, end_time)
 html: str = ''
 api_url = 'http://api.lc044.love/upload'
 
+
 def get_contact(wxid):
     contact_info_list = micro_msg_db.get_contact_by_username(wxid)
     contact_info = {
@@ -36,10 +37,19 @@ def get_contact(wxid):
     contact = Contact(contact_info)
     return contact
 
+
 @app.route("/")
 def index():
-    # 渲染模板，并传递图表的 HTML 到模板中
-    return "index.html"
+    contact_topN_num = msg_db.get_chatted_top_contacts(time_range=time_range, top_n=6)
+    contact_topN = []
+    for wxid,num in contact_topN_num:
+        contact = get_contact(wxid)
+        contact_topN.append([contact,num])
+    data = {
+        'avatar': Me().smallHeadImgUrl,
+        'contact_topN':contact_topN,
+    }
+    return render_template('index.html', **data)
 
 
 @app.route("/christmas/<wxid>")
@@ -225,7 +235,7 @@ def charts(wxid):
     except TypeError:
         first_time = '2023-01-01 00:00:00'
     data = {
-        'wxid':wxid,
+        'wxid': wxid,
         'my_nickname': Me().name,
         'ta_nickname': contact.remark,
         'first_time': first_time
@@ -236,7 +246,7 @@ def charts(wxid):
 @app.route('/calendar', methods=['POST'])
 def get_calendar():
     wxid = request.json.get('wxid')
-    time_range = request.json.get('time_range',[])
+    time_range = request.json.get('time_range', [])
     world_cloud_data = analysis.calendar_chart(wxid, time_range=time_range)
     return jsonify(world_cloud_data)
 
