master

分支 (1)

管理

管理

master

Wetemp
/
home.html

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>运营素材库</title>
  <style>
    body {
      font-family: 'Arial', 'Microsoft YaHei', sans-serif;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #fff;
      color: #333;
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .message {
      text-align: center;
      margin-bottom: 30px;
    }

    .greeting {
      font-size: 18px;
      margin-bottom: 10px;
      line-height: 1.6;
    }

    .greeting font {
      font-weight: 800;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, #07C160 0%, #008000 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .title {
      font-size: 28px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    .title span {
      font-weight: 800;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, #07C160 0%, #008000 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .calendar {
      background: white;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      padding: 30px;
      width: 100%;
      max-width: 500px;
      margin-bottom: 30px;
    }

    .calendar-header {
      text-align: center;
      margin-bottom: 20px;
    }

    .calendar-time {
      font-size: 36px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }

    .calendar-date {
      font-size: 20px;
      color: #666;
      margin-bottom: 15px;
    }

    .calendar-info {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .info-item {
      flex: 1;
      min-width: 120px;
      text-align: center;
      padding: 10px;
      margin: 5px;
      background: #f8f9fa;
      border-radius: 10px;
    }

    .info-label {
      font-size: 14px;
      color: #888;
      margin-bottom: 5px;
    }

    .info-value {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }

    .holiday-poem {
      background: linear-gradient(135deg, #f0f9f2 0%, #e4f3e8 100%);
      padding: 15px;
      border-radius: 10px;
      margin-top: 20px;
      text-align: center;
      font-style: italic;
      line-height: 1.6;
    }

    .poem-title {
      font-weight: bold;
      margin-bottom: 10px;
      color: #07C160;
    }

    .poem-content {
      color: #555;
    }

    .holiday-highlight {
      color: #07C160;
      font-weight: bold;
    }

    img{
      position: absolute;
      bottom: 20px;
      right: 10px;
      width: 200px;
    }

    @media (max-width: 600px) {
      .calendar {
        padding: 20px;
      }

      .calendar-time {
        font-size: 28px;
      }

      .calendar-date {
        font-size: 18px;
      }

      .info-item {
        min-width: 100px;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="calendar">
      <div class="calendar-header">
        <div class="calendar-time" id="current-time">00:00:00</div>
        <div class="calendar-date" id="current-date">2023年1月1日 星期一</div>
      </div>

      <div class="calendar-info">
        <div class="info-item">
          <div class="info-label">农历</div>
          <div class="info-value" id="lunar-date">农历日期</div>
        </div>

        <div class="info-item">
          <div class="info-label">星座</div>
          <div class="info-value" id="constellation">星座</div>
        </div>

        <div class="info-item">
          <div class="info-label">节气</div>
          <div class="info-value" id="solar-term">节气</div>
        </div>

        <div class="info-item">
          <div class="info-label">节假日</div>
          <div class="info-value" id="holiday">节假日</div>
        </div>
      </div>

      <div class="holiday-poem" id="holiday-poem" style="display: none;">
        <div class="poem-title" id="poem-title">节日诗词</div>
        <div class="poem-content" id="poem-content"></div>
      </div>
    </div>

    <div class="message">
      <h1 class="title">您好！欢迎使用<span>运营素材库</span>！</h1>
      <p class="greeting"><font>注意：</font>本平台为<font>纯前端</font>工具集，平台不会存储用户的任何数据，为防止数据丢失，建议及时<font>保存</font>所需<font>数据</font>。</p>
      <img src="img/logo.png">
    </div>
  </div>

  <script>
    // 农历数据
    const lunarInfo = [
      0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
      0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
      0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
      0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
      0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,
      0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0,
      0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
      0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b5a0, 0x195a6,
      0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,
      0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0,
      0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,
      0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,
      0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,
      0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,
      0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0
    ];

    // 节气数据
    const solarTerms = [
      "小寒", "大寒", "立春", "雨水", "惊蛰", "春分",
      "清明", "谷雨", "立夏", "小满", "芒种", "夏至",
      "小暑", "大暑", "立秋", "处暑", "白露", "秋分",
      "寒露", "霜降", "立冬", "小雪", "大雪", "冬至"
    ];

    // 节假日数据
    const holidays = {
      "1-1": { name: "元旦", poem: "元日\n王安石\n爆竹声中一岁除，春风送暖入屠苏。\n千门万户曈曈日，总把新桃换旧符。" },
      "2-14": { name: "情人节", poem: "七夕\n杜牧\n银烛秋光冷画屏，轻罗小扇扑流萤。\n天阶夜色凉如水，卧看牵牛织女星。" },
      "3-8": { name: "妇女节", poem: "木兰诗\n佚名\n唧唧复唧唧，木兰当户织。\n不闻机杼声，唯闻女叹息。" },
      "5-1": { name: "劳动节", poem: "悯农\n李绅\n锄禾日当午，汗滴禾下土。\n谁知盘中餐，粒粒皆辛苦。" },
      "6-1": { name: "儿童节", poem: "所见\n袁枚\n牧童骑黄牛，歌声振林樾。\n意欲捕鸣蝉，忽然闭口立。" },
      "9-10": { name: "教师节", poem: "无题\n李商隐\n相见时难别亦难，东风无力百花残。\n春蚕到死丝方尽，蜡炬成灰泪始干。" },
      "10-1": { name: "国庆节", poem: "春望\n杜甫\n国破山河在，城春草木深。\n感时花溅泪，恨别鸟惊心。\n烽火连三月，家书抵万金。\n白头搔更短，浑欲不胜簪。" },
      "12-25": { name: "圣诞节", poem: "雪\n罗隐\n尽道丰年瑞，丰年事若何。\n长安有贫者，为瑞不宜多。" }
    };

    // 传统节日（农历）
    const traditionalHolidays = {
      "1-1": { name: "春节", poem: "元日\n王安石\n爆竹声中一岁除，春风送暖入屠苏。\n千门万户曈曈日，总把新桃换旧符。" },
      "1-15": { name: "元宵节", poem: "青玉案·元夕\n辛弃疾\n东风夜放花千树，更吹落，星如雨。\n宝马雕车香满路。\n凤箫声动，玉壶光转，一夜鱼龙舞。" },
      "5-5": { name: "端午节", poem: "端午\n文秀\n节分端午自谁言，万古传闻为屈原。\n堪笑楚江空渺渺，不能洗得直臣冤。" },
      "8-15": { name: "中秋节", poem: "静夜思\n李白\n床前明月光，疑是地上霜。\n举头望明月，低头思故乡。" },
      "9-9": { name: "重阳节", poem: "九月九日忆山东兄弟\n王维\n独在异乡为异客，每逢佳节倍思亲。\n遥知兄弟登高处，遍插茱萸少一人。" }
    };

    // 星座数据
    const constellations = [
      { name: "摩羯座", start: "1-20", end: "2-18" },
      { name: "水瓶座", start: "2-19", end: "3-20" },
      { name: "双鱼座", start: "3-21", end: "4-19" },
      { name: "白羊座", start: "4-20", end: "5-20" },
      { name: "金牛座", start: "5-21", end: "6-21" },
      { name: "双子座", start: "6-22", end: "7-22" },
      { name: "巨蟹座", start: "7-23", end: "8-22" },
      { name: "狮子座", start: "8-23", end: "9-22" },
      { name: "处女座", start: "9-23", end: "10-23" },
      { name: "天秤座", start: "10-24", end: "11-22" },
      { name: "天蝎座", start: "11-23", end: "12-21" },
      { name: "射手座", start: "12-22", end: "1-19" }
    ];

    // 节气计算数据
    const solarTermInfo = [
      0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693,
      263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758
    ];

    // 更新时间和日期
    function updateTime() {
      const now = new Date();
      const timeElement = document.getElementById('current-time');
      const dateElement = document.getElementById('current-date');

      // 更新时间
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      timeElement.textContent = `${hours}:${minutes}:${seconds}`;

      // 更新日期
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekday = weekdays[now.getDay()];
      dateElement.textContent = `${year}年${month}月${day}日 ${weekday}`;

      // 更新农历
      updateLunarCalendar(year, month, day);

      // 更新星座
      updateConstellation(month, day);

      // 更新节假日
      updateHoliday(month, day);

      // 更新节气
      updateSolarTerm(year, month, day);
    }

    // 更新农历
    function updateLunarCalendar(year, month, day) {
      const lunarDate = solarToLunar(year, month, day);
      const lunarElement = document.getElementById('lunar-date');

      const lunarMonths = ['正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];
      const lunarDays = ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十',
        '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
        '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'];

      let lunarText = `农历${lunarDate.isLeap ? '闰' : ''}${lunarMonths[lunarDate.lMonth - 1]}${lunarDays[lunarDate.lDay - 1]}`;

      // 检查是否是传统节日
      const lunarKey = `${lunarDate.lMonth}-${lunarDate.lDay}`;
      if (traditionalHolidays[lunarKey]) {
        lunarText += ` (${traditionalHolidays[lunarKey].name})`;
      }

      lunarElement.textContent = lunarText;
    }

    // 阳历转农历
    function solarToLunar(year, month, day) {
      let i, leap = 0, temp = 0;
      const baseDate = new Date(1900, 0, 31);
      const objDate = new Date(year, month - 1, day);

      // 计算天数差
      let offset = Math.floor((objDate - baseDate) / 86400000);

      // 计算年
      for (i = 1900; i < 2100 && offset > 0; i++) {
        temp = lYearDays(i);
        offset -= temp;
      }

      if (offset < 0) {
        offset += temp;
        i--;
      }

      // 计算月
      leap = leapMonth(i); // 闰哪个月
      let isLeap = false;
      let j; // 提前声明变量 j
      for (j = 1; j <= 12 && offset > 0; j++) {
        // 闰月
        if (leap > 0 && j === (leap + 1) && !isLeap) {
          --j;
          isLeap = true;
          temp = leapDays(i);
        } else {
          temp = monthDays(i, j);
        }

        // 解除闰月
        if (isLeap && j === (leap + 1)) isLeap = false;

        offset -= temp;
      }

      if (offset === 0 && leap > 0 && j === leap + 1) {
        if (isLeap) {
          isLeap = false;
        } else {
          isLeap = true;
          --j;
        }
      }

      if (offset < 0) {
        offset += temp;
        --j;
      }

      return {
        lYear: i,
        lMonth: j,
        lDay: offset + 1,
        isLeap: isLeap
      };
    }

    // 返回农历y年的总天数
    function lYearDays(y) {
      let i, sum = 348;
      for (i = 0x8000; i > 0x8; i >>= 1) {
        sum += (lunarInfo[y - 1900] & i) ? 1 : 0;
      }
      return sum + leapDays(y);
    }

    // 返回农历y年闰月的天数
    function leapDays(y) {
      if (leapMonth(y)) {
        return (lunarInfo[y - 1900] & 0x10000) ? 30 : 29;
      }
      return 0;
    }

    // 返回农历y年闰哪个月 1-12 , 没闰返回0
    function leapMonth(y) {
      return lunarInfo[y - 1900] & 0xf;
    }

    // 返回农历y年m月的总天数
    function monthDays(y, m) {
      return (lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29;
    }

    // 更新星座
    function updateConstellation(month, day) {
      const dateStr = `${month}-${day}`;
      let constellation = '';

      for (const c of constellations) {
        const start = new Date(`${new Date().getFullYear()}-${c.start}`);
        const end = new Date(`${new Date().getFullYear()}-${c.end}`);
        const current = new Date(`${new Date().getFullYear()}-${dateStr}`);

        if ((current >= start && current <= end) ||
          (c.start.split('-')[0] === '12' && current >= start) ||
          (c.end.split('-')[0] === '1' && current <= end)) {
          constellation = c.name;
          break;
        }
      }

      document.getElementById('constellation').textContent = constellation;
    }

    // 更新节假日
    function updateHoliday(month, day) {
      const holidayKey = `${month}-${day}`;
      const holidayElement = document.getElementById('holiday');
      const poemContainer = document.getElementById('holiday-poem');

      // 检查公历节日
      if (holidays[holidayKey]) {
        holidayElement.innerHTML = `<span class="holiday-highlight">${holidays[holidayKey].name}</span>`;
        document.getElementById('poem-title').textContent = `${holidays[holidayKey].name}诗词`;
        document.getElementById('poem-content').textContent = holidays[holidayKey].poem;
        poemContainer.style.display = 'block';
        return;
      }

      // 检查农历节日
      const lunarDate = solarToLunar(new Date().getFullYear(), month, day);
      const lunarKey = `${lunarDate.lMonth}-${lunarDate.lDay}`;

      if (traditionalHolidays[lunarKey]) {
        holidayElement.innerHTML = `<span class="holiday-highlight">${traditionalHolidays[lunarKey].name}</span>`;
        document.getElementById('poem-title').textContent = `${traditionalHolidays[lunarKey].name}诗词`;
        document.getElementById('poem-content').textContent = traditionalHolidays[lunarKey].poem;
        poemContainer.style.display = 'block';
        return;
      }

      // 不是节日
      holidayElement.textContent = '无';
      poemContainer.style.display = 'none';
    }

    // 更新节气
    function updateSolarTerm(year, month, day) {
      const solarTerm = getSolarTerm(year, month, day);
      document.getElementById('solar-term').textContent = solarTerm || '无';
    }

    // 计算节气
    function getSolarTerm(year, month, day) {
      const termBase = 31556925974.7 * (year - 1900);
      const firstTermDate = new Date(termBase + solarTermInfo[(month - 1) * 2] * 60000);
      const secondTermDate = new Date(termBase + solarTermInfo[(month - 1) * 2 + 1] * 60000);
      const currentDate = new Date(year, month - 1, day);

      if (Math.abs(currentDate - firstTermDate) < 86400000 * 2) {
        return solarTerms[(month - 1) * 2];
      }
      if (Math.abs(currentDate - secondTermDate) < 86400000 * 2) {
        return solarTerms[(month - 1) * 2 + 1];
      }
      return '';
    }

    // 初始化
    updateTime();
    setInterval(updateTime, 1000);
  </script>
</body>

</html>