index.html

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/menstruation.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
</head>

<!-- 全屏加载动画开始 -->
<style>
    main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100vw;
    height: 100vh;
    }
  
    #CustomLoadanimation {
          background-color: #fff;
          height: 100%;
          width: 100%;
          position: fixed;
          z-index: 1;
          margin-top: 0px;
          top: 0px;
      }
    /* Add this class to hide the element by default */
    .hidden {
        display: none;
    }
  
    .spinner-triple {
        will-change: transform;
        width: 70px;
        height: 70px;
        border: 5px solid transparent;
        border-top-color: blue ;
        border-radius: 50%;
        animation: spin 2s linear infinite;
    }
  
    .spinner-triple::before {
        content: "";
        border: 5px solid transparent;
        border-top-color: lightskyblue ;
        border-radius: 50%;
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        animation: spin 1s linear infinite;
    }
  
    .spinner-triple::after {
        content: "";
        border: 5px solid transparent;
        border-top-color: lightblue;
        border-radius: 50%;
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        animation: spin 1.5s linear infinite;
    }
  
    .spinner-triple>div{
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        animation: spin 2s linear infinite;
    }
  
    @keyframes spin {
        100% {
            transform: rotate(360deg);
        }
    }
</style>
<main id="CustomLoadanimation" style="z-index: 999999;" class="hidden">
    <div class="spinner-triple">
        <div class="spinner-triple">
            <div class="spinner-triple"></div>
        </div>
    </div>
</main>
<script>
    // 显示加载动画
    function showCustomLoadingAnimation() {
        var CustomLoadanimation = document.getElementById('CustomLoadanimation');
        CustomLoadanimation.style.display = 'flex'; // or 'block', depending on your layout
        CustomLoadanimation.style.visibility = 'visible';
    }

    // 渐隐加载动画
    function fadeOutCustomLoadingAnimation(CustomLoadanimation) {
        // 延时1秒后开始渐隐动画
        setTimeout(function() {
            var opacity = 1; // 初始不透明度
            var interval = 50; // 更新频率（毫秒）
            var fadeOutSpeed = 0.06; // 渐隐速度

            var fadeOutInterval = setInterval(function() {
                opacity -= fadeOutSpeed;
                CustomLoadanimation.style.opacity = opacity;

                if (opacity <= 0) {
                    // 动画结束，隐藏加载动画并清除定时器
                    CustomLoadanimation.style.display = 'none';
                    clearInterval(fadeOutInterval);
                }
            }, interval);
        }, 500); //等待 1 秒钟
    }

    // 隐藏加载动画函数
    function hideCustomLoadingAnimation() {
        var CustomLoadanimation = document.getElementById('CustomLoadanimation');
        fadeOutCustomLoadingAnimation(CustomLoadanimation);
    }

    // 全屏动画加载
    showCustomLoadingAnimation();

    // 文档主体加载完成
    document.addEventListener('DOMContentLoaded', function() {
        // 全屏加载结束
        hideCustomLoadingAnimation();
    });
</script>
<!-- 全屏加载动画结束 -->

<body>
<title>宝宝的经期记录</title>
<div style="display:none;" class="back-to" id="toolBackTop">
    <a title="返回頂部" onclick="window.scrollTo(0,0);return false;" href="#top" class="back-top"></a>
</div>
<div class="container">
    <div class="row content">
        <div class="col-md-6">
            <h3>关于月经</h3>
            <a href="https://zh.wikipedia.org/wiki/月经"><button class="btn btn-light m-2"
                    onclick="$.hulla.send('正在加载', 'light')">维基百科</button></a>
            <a href="https://baike.baidu.com/item/月经/94195"><button class="btn btn-info m-2"
                    onclick="$.hulla.send('正在加载', 'info')">百度百科</button></a>
            <a href="http://www.a-hospital.com/w/月经"><button class="btn btn-danger m-2"
                    onclick="$.hulla.send('正在加载', 'danger')">医学百科</button></a>
            <a
                href="https://www.baike.com/wikiid/1987634366782328299?prd=home_search&search_id=1x507alax8yo00&view_id=yrg3k6mt6q800"><button
                    class="btn btn-warning m-2" onclick="$.hulla.send('正在加载', 'warning')">头条百科</button></a>
            <a href="https://baike.sogou.com/v59933.htm?fromTitle=月经"><button class="btn btn-dark m-2"
                    onclick="$.hulla.send('正在加载', 'dark')">搜狗百科</button></a>
            <a href="https://baike.so.com/doc/5337218-5572657.html"><button class="btn btn-success m-2"
                    onclick="$.hulla.send('正在加载', 'success')">360 百科</button></a><br><br>
            <ul>
                <!-- 日历 -->
                <div id='calendar'></div>
                <!-- 新增一个表单用于输入数据 -->
                <form id="addTimelineForm" class="mt-4">
                    <h3>添加新数据</h3>
                    <div class="form-group">
                        <label for="current_period_date">月经周期（生殖系统中的一个重要循环）</label>
                        <input type="date" class="form-control" id="current_period_date" required>
                    </div>
                    <div class="form-group">
                        <label for="period_days">行经时间（子宫内膜脱落伴随阴道出血）</label>
                        <input type="number" class="form-control" id="period_days" placeholder="出血起始至结束天数" required>
                    </div>
                    <div class="form-group">
                        <label for="fight_count">痛经次数（子宫内膜脱落引起的子宫收缩）</label>
                        <input type="number" class="form-control" id="fight_count" placeholder="痛经的严重程度因人而异"
                            required>
                    </div>
                    <div class="form-group">
                        <label for="health_status">身体状况（管理和维护自己的生殖健康）</label>
                        <input type="text" class="form-control" id="health_status" placeholder="描述你的身体状况" required>
                    </div>
                    <button type="submit" class="btn btn-primary">保存到数据库</button>
                </form>
        </div>
        </ul>
    </div>
</div>

<section class="timeline">
    <ul>
        <div id="timelineList">
            <!-- 已有的数据项将在这里显示 -->
        </div>

        <li class="in-view">
            <div>
                <time>2023-05-12</time>
                <div class="last time">
                    <h5>月经周期</h5>
                    <span><span style="color:rgb(255,0,255);">首次记录</span></span>
                </div>
                <div class="this time">
                    <h5>行径时间</h5>
                    <span><span style="color:rgb(255,0,255);">首次记录</span></span>
                </div>
                <div class="Sore">
                    <h5>痛经次数</h5>
                    <span style="color:rgb(255, 166, 0);">首次记录次</span>
                </div>
                <div class="Sore">
                    <h5>身体状况</h5>
                    <span style="color:rgb(0,0,139);">首次记录</span>
                </div>
            </div>
        </li>
    </ul>

</section>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.9/index.global.min.js'></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/hullabaloo.js"></script>

<!-- 经期数据处理-->
<script>
    // 计算心情状态并生成 HTML 字符串
    function calculateHeartStatus(fight_count) {
        // 判断吵架次数并生成爱心字符串
        const heartCount = Math.min(fight_count, 6); // 限制最多为 6 个爱心
        const emptyHearts = '♥'.repeat(6 - heartCount); // 补全空心
        const fullHearts = '♡'.repeat(heartCount);
        const fightStatus = `<span style="color:rgb(255, 166, 0);">${fullHearts}${emptyHearts}</span> ${fight_count}次`;
        return fightStatus;

    }

    // 添加时间轴项目
    function addTimelineItem(cycle_days, period_days, fight_count, health_status, created_at, current_period_date) {
        $.hulla = new hullabaloo();
        const timelineList = document.getElementById('timelineList');

        // 计算周期状态
        const cycleStatus = cycle_days < 21 || cycle_days > 36
            ? '<span style="color:rgb(255,0,0);">异常</span>'
            : '<span style="color:rgb(0,255,0);">正常</span>';

        // 计算月经期状态
        const periodStatus = period_days < 3 || period_days > 7
            ? '<span style="color:rgb(255,0,0);">异常</span>'
            : '<span style="color:rgb(0,255,0);">正常</span>';

        // 计算吵架状态
        const fightStatus = calculateHeartStatus(fight_count);

        // 构建新的时间轴项
        const newItem = `
        <li class="in-view">
            <div> 
                <time>${current_period_date}</time>
                <div class="last time">
                    <h5>月经周期</h5>
                    <span><span style="color:rgb(255,0,255);">${cycle_days}</span>天</span>
                    ${cycleStatus}
                </div>
                <div class="this time">
                    <h5>行径时间</h5>
                    <span><span style="color:rgb(255,0,255);">${period_days}</span>天</span>
                    ${periodStatus}
                </div>
                <div class="Sore">
                    <h5>痛经次数</h5>
                    ${fightStatus}
                </div>
                <div class="Sore">
                    <h5>身体状况</h5>
                    <span style="color:rgb(0,0,139);">${health_status}</span>
                </div>
            </div>
        </li>
    `;

        // 将新项插入时间轴的开头
        timelineList.insertAdjacentHTML('afterbegin', newItem);
        var newItemElement = timelineList.firstElementChild;
        newItemElement.classList.add("in-view");
    }

    // 日历
    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
        });
        calendar.render();
        // 确保这里传递了 calendar 对象
        loadAndDisplayData(calendar);
    });

    // 计算月经结束日期并返回颜色
    function calculatePeriodEndAndColor(startDate, periodDays) {
        var start = new Date(startDate);
        var end = new Date(start);
        end.setDate(start.getDate() + periodDays);

        var color = (periodDays >= 3 && periodDays <= 7) ? 'green' : 'red'; // 设置颜色
        return { end, color };
    }

    // 计算并返回平均周期长度（天数）
    function calculateAverageCycleLength(data) {
        let totalLength = 0;
        for (let i = 1; i < data.length; i++) {
            const prevDate = new Date(data[i - 1].current_period_date);
            const currentDate = new Date(data[i].current_period_date);
            const diffTime = Math.abs(currentDate - prevDate);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            totalLength += diffDays;
        }
        return totalLength / (data.length - 1);
    }

    // 这个预测方法假设月经周期是规律的。如果周期非常不规则，预测可能不准确。
    function predictNextPeriod(data) {
        if (data.length > 1) {
            const averageLength = calculateAverageCycleLength(data);
            const lastPeriodDate = new Date(data[data.length - 1].current_period_date);
            lastPeriodDate.setDate(lastPeriodDate.getDate() + averageLength);
            return lastPeriodDate;
        }
        return null; // 不足以预测
    }

     // 新函数，用于显示弹窗信息
     function displayPopupMessages(averageCycleDays, abnormalCycleCount) {
        
    }

    // 加载并展示数据
    async function loadAndDisplayData(calendar) {
        try {
            const response = await fetch('read_data.php');
            const data = await response.json();
            let totalCycleDays = 0;
            let abnormalCycleCount = 0;

            // 遍历并处理每一条数据
            data.forEach(item => {
                totalCycleDays += parseInt(item.cycle_days);
                if (item.cycle_days < 21 || item.cycle_days > 36) {
                    abnormalCycleCount++;
                }

                if (item.current_period_date && !isNaN(item.period_days)) {
                    const { end, color } = calculatePeriodEndAndColor(item.current_period_date, parseInt(item.period_days));

                    calendar.addEvent({
                        title: '行经',
                        start: item.current_period_date,
                        end: end.toISOString().split('T')[0], // 格式化结束日期为 YYYY-MM-DD
                        color: color
                    });
                }
                addTimelineItem(item.cycle_days, item.period_days, item.fight_count, item.health_status, item.created_at, item.current_period_date);
            });

            const nextPeriodDate = predictNextPeriod(data);
            if (nextPeriodDate) {
                calendar.addEvent({
                    title: '预测',
                    start: nextPeriodDate.toISOString().split('T')[0],
                    color: 'blue' // 或者您选择的颜色
                });
            }

            const averageCycleDays = (totalCycleDays / data.length).toFixed(1);

            setTimeout(function () {
                $.hulla.send(`平均周期：${averageCycleDays}天`, "success");
            }, 1000);

            setTimeout(function () {
                $.hulla.send(`异常周期：${abnormalCycleCount}次`, "info");
            }, 2000);

            setTimeout(function () {
                $.hulla.send("信息仅作参考", "warning");
            }, 3000);
            addAnimationToTimeline();
        } catch (error) {
            console.error('发生错误:', error);
            alert('发生错误，请刷稍后重试');
        }
    }

    // 处理表单提交
    const addTimelineForm = document.getElementById('addTimelineForm');
    addTimelineForm.addEventListener('submit', async function (e) {
        e.preventDefault();

        const period_days = document.getElementById('period_days').value;
        const fight_count = document.getElementById('fight_count').value;
        const health_status = document.getElementById('health_status').value;
        const current_period_date = document.getElementById('current_period_date').value;

        // 发送 POST 请求保存数据
        try {
            const response = await fetch('save_data.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    period_days,
                    fight_count,
                    health_status,
                    current_period_date
                })
            });

            const data = await response.json();
            if (data.status === 'success') {
                addTimelineItem(period_days, fight_count, health_status, data.created_at, current_period_date);
                alert('数据已成功保存到数据库');
            } else {
                alert('保存数据时出现错误');
            }
        } catch (error) {
            console.error('发生错误:', error);
            alert('发生错误，请稍后再试');
        }
    });
</script>

<!-- 动画 -->
<script>
    // 添加动画效果到时间线
    function addAnimationToTimeline() {
        var items = document.querySelectorAll(".timeline li");

        function isElementInViewport(el) {
            var rect = el.getBoundingClientRect();
            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }

        function callbackFunc() {
            for (var i = 0; i < items.length; i++) {
                if (isElementInViewport(items[i])) {
                    if (!items[i].classList.contains("in-view")) {
                        items[i].classList.add("in-view");
                    }
                } else if (items[i].classList.contains("in-view")) {
                    items[i].classList.remove("in-view");
                }
            }
        }

        window.addEventListener("load", callbackFunc);
        window.addEventListener("scroll", callbackFunc);
    }
</script>

<!-- 回到顶部 -->
<script>
    $(function () {
        var bt = $('#toolBackTop');
        var sw = $(document.body)[0].clientWidth;

        var limitsw = (sw - 840) / 2 - 80;  //距离右侧距离
        if (limitsw > 0) {
            limitsw = parseInt(limitsw);
            bt.css("right", limitsw / 8);
        }

        $(window).scroll(function () {
            var st = $(window).scrollTop();
            if (st > 30) {
                bt.show();
            } else {
                bt.hide();
            }
        });
    });

    $(window).scroll(function () {
        if ($(window).scrollTop() > 300) {
            $('#return-top').fadeIn(300);
        }
        else { $('#return-top').fadeOut(200); }
    })


    // 点击按钮，使得页面返回顶部
    $("#return-top").click(function () {
        scrollTo(0, 0);
    });
    // 鼠标悬浮按钮之上，图片消失，文字显示
    $(".top_e").mouseover(function () {
        $("#img").hide();
        $("#font").show();
    })
    //鼠标离开，文字消失，图片显示。
    $(".top_e").mouseout(function () {
        $("#font").hide();
        $("#img").show();
    })
</script>

<!-- 统计 -->
<p align="center"> 
Visitor count<br>
<img src="https://profile-counter.glitch.me/menstruation/count.svg" />
</p>

</body>
</html>