<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <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://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/v5/echarts-wordcloud.min.js"></script>
    <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 {
    /* 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: 0px;
    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;
    }
}
.chart{
    width: 800px;
    height: 400px;
}

@media screen and (max-width:600px){
	.chart{
        width: 400px;
        height: 220px;
    }
}
    </style>
</head>
<body>
    <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>2023年</h1>
            <p>你一共给<span class="number">{{contact_num}}</span>个联系人<br>发送了<span class="number">{{send_msg_num}}</span>条消息<br>收到了<span class="number">{{receive_msg_num}}</span>条消息</p>
            <div id="sender-chart" class="chart" ></div>
            <div id="types-chart" class="chart"></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);

            // 设置雪花的随机大小
            const size = ran * 20 + 10; // 随机大小在 10 到 30 之间
            snowflake.style.width = `${size}px`;
            snowflake.style.height = `${size}px`;

            snowContainer.appendChild(snowflake);
        }
    });
    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>
<script>
    var chart_51ebd4312946429e9c32b2b55b96a479 = echarts.init(
        document.getElementById('types-chart'), 'white', {renderer: 'canvas'});
    var result = {{chart_data_types|safe}};
    chart_51ebd4312946429e9c32b2b55b96a479.setOption(result);
    var chart_51ebd4312946429e9c32b2b55b96a4 = echarts.init(
        document.getElementById('sender-chart'), 'white', {renderer: 'canvas'});
    var result = {{chart_data_sender|safe}};
    chart_51ebd4312946429e9c32b2b55b96a4.setOption(result);
</script>
</body>
</html>
