<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = ${singlePage.spec.title}, content = ~{::content}, head = ~{::head})}">
<th:block th:fragment="head">
  <link rel="stylesheet" th:href="@{/assets/css/about.css}" />
  <link th:if="${theme.config.about != null && theme.config.about.steamConfig != null && theme.config.about.steamConfig.showSteam}" rel="stylesheet" th:href="@{/assets/css/steam.css}" />
  <meta property="og:type" content="profile" />
  <meta property="og:title" th:content="${(singlePage.spec.title ?: '关于') + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}" />
  <meta property="og:description" th:content="${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.description != null ? theme.config.basic.siteInfo.description : site.subtitle}" />
  <meta property="profile:username" th:content="${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.author != null ? theme.config.basic.siteInfo.author : site.title}" />
  <meta name="twitter:title" th:content="${(singlePage.spec.title ?: '关于') + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}" />
  <meta name="twitter:description" th:content="${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.description != null ? theme.config.basic.siteInfo.description : site.subtitle}" />
  <script th:if="${theme.config.seo != null && theme.config.seo.seoConfig != null && (theme.config.seo.seoConfig.enableJsonLd == null || theme.config.seo.seoConfig.enableJsonLd)}" type="application/ld+json" th:inline="javascript">
  {
    "@context": "https://schema.org",
    "@type": "ProfilePage",
    "mainEntity": {
      "@type": "Person",
      "name": /*[[${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.author != null ? theme.config.basic.siteInfo.author : site.title}]]*/ "",
      "description": /*[[${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.description != null ? theme.config.basic.siteInfo.description : site.subtitle}]]*/ "",
      "image": /*[[${site.logo != null && !#strings.isEmpty(site.logo) ? site.logo : '/themes/theme-Serenity/assets/public/ics6.webp'}]]*/ "",
      "url": /*[[${site.url}]]*/ ""
    }
  }
  </script>
  <script th:src="@{/assets/js/iconify.min.js}" defer></script>
  <script th:if="${theme.config.about != null && theme.config.about.foreverBlogConfig != null && theme.config.about.foreverBlogConfig.showForeverBlog}" th:src="@{/assets/js/about.js}" defer></script>
  <script th:if="${theme.config.about != null && theme.config.about.steamConfig != null && theme.config.about.steamConfig.showSteam}" th:src="@{/assets/js/steam.js}" defer></script>
  <script th:if="${theme.config.about != null && theme.config.about.afdianSettings != null && theme.config.about.afdianSettings.showAfdian}" th:src="@{/assets/js/about-afdian.js}"></script>
</th:block>
<th:block th:fragment="content">
  <div class="container">
    <section class="about-hero" data-aos="fade-up">
      <div class="about-hero-center">
        <div class="about-avatar-wrapper">
          <th:block th:if="${theme.config.about != null && theme.config.about.tagsConfig != null && (theme.config.about.tagsConfig.showTags == null || theme.config.about.tagsConfig.showTags)}">
          <div class="hero-tags-left" data-aos="fade-right" data-aos-delay="100">
            <th:block th:if="${theme.config.about.tagsConfig.tagsLeft != null}">
              <span th:each="tag : ${theme.config.about.tagsConfig.tagsLeft}" class="hero-tag" th:text="${tag.text}">标签</span>
            </th:block>
            <th:block th:if="${theme.config.about.tagsConfig.tagsLeft == null}">
              <span class="hero-tag">热爱开源</span>
              <span class="hero-tag">设计爱好者</span>
              <span class="hero-tag">终身学习</span>
            </th:block>
          </div>
          <div class="about-hero-avatar" data-aos="zoom-in" data-aos-delay="200">
            <img th:src="${site.logo ?: '/themes/theme-Serenity/assets/public/ics6.webp'}" alt="Avatar" />
          </div>
          <div class="hero-tags-right" data-aos="fade-left" data-aos-delay="100">
            <th:block th:if="${theme.config.about.tagsConfig.tagsRight != null}">
              <span th:each="tag : ${theme.config.about.tagsConfig.tagsRight}" class="hero-tag" th:text="${tag.text}">标签</span>
            </th:block>
            <th:block th:if="${theme.config.about.tagsConfig.tagsRight == null}">
              <span class="hero-tag">前端开发</span>
              <span class="hero-tag">独立开发者</span>
              <span class="hero-tag">折腾爱好者</span>
            </th:block>
          </div>
          </th:block>
          <th:block th:if="${theme.config.about == null || theme.config.about.tagsConfig == null || (theme.config.about.tagsConfig.showTags != null && !theme.config.about.tagsConfig.showTags)}">
          <div class="about-hero-avatar" data-aos="zoom-in" data-aos-delay="200">
            <img th:src="${site.logo ?: '/themes/theme-Serenity/assets/public/ics6.webp'}" alt="Avatar" />
          </div>
          </th:block>
        </div>
        <div class="about-hero-info" data-aos="fade-up" data-aos-delay="300">
          <h1 class="about-name" th:text="${theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.author != null ? theme.config.basic.siteInfo.author : site.title}">Serenity</h1>
          <p class="about-bio" th:text="${site.subtitle}">前端开发者 / 独立开发者 / 博主</p>
        </div>
      </div>
    </section>

    <div th:if="${theme.config.about == null || theme.config.about.aboutSiteConfig == null || theme.config.about.aboutSiteConfig.showAboutSite == null || theme.config.about.aboutSiteConfig.showAboutSite}" class="about-card glass-card about-card-with-mascot" data-aos="fade-up" data-aos-delay="100" th:with="siteStats = ${siteStatsFinder.getStats()}">
      <!-- 站在卡片上的吉祥物 -->
      <th:block th:if="${theme.config.about == null || theme.config.about.mascotConfig == null || theme.config.about.mascotConfig.showMascot == null || theme.config.about.mascotConfig.showMascot}">
        <div class="about-card-mascot">
          <img th:src="${theme.config.about != null && theme.config.about.mascotConfig != null && theme.config.about.mascotConfig.mascotImage != null && !#strings.isEmpty(theme.config.about.mascotConfig.mascotImage) ? theme.config.about.mascotConfig.mascotImage : '/themes/theme-Serenity/assets/images/about-mascot.gif'}" alt="" />
        </div>
        <span class="about-mascot-text" th:text="${theme.config.about != null && theme.config.about.mascotConfig != null && theme.config.about.mascotConfig.mascotText != null && !#strings.isEmpty(theme.config.about.mascotConfig.mascotText) ? theme.config.about.mascotConfig.mascotText : '嘿，你好啊~'}">嘿，你好啊~</span>
      </th:block>
      <div class="card-decoration card-decoration-1"></div>
      <div class="card-decoration card-decoration-2"></div>
      <h2 class="about-section-title">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></svg>
        关于本站
      </h2>
      <div class="about-content">
        <div class="about-text" style="white-space: pre-line;" th:text="${theme.config.about != null && theme.config.about.aboutSiteConfig != null ? theme.config.about.aboutSiteConfig.aboutSite : ''}">
          <p>嗨，欢迎来到我的小站。这里是我记录技术探索、分享生活感悟的地方。</p>
          <p>作为一名前端开发者，我热衷于探索新技术，追求简洁优雅的代码。工作之余，我喜欢折腾各种有趣的项目，也会在这里分享一些心得。</p>
        </div>
        <div class="about-stats">
          <div class="stat-item">
            <span class="stat-num" th:text="${postFinder.listAll().size()}">0</span>
            <span class="stat-label">篇文章</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <span class="stat-num" th:text="${siteStats.comment}">0</span>
            <span class="stat-label">条评论</span>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <span class="stat-num">365</span>
            <span class="stat-label">天运行</span>
          </div>
        </div>
      </div>
    </div>

    <div th:if="${theme.config.about == null || theme.config.about.skillsConfig == null || theme.config.about.skillsConfig.showSkills == null || theme.config.about.skillsConfig.showSkills}" class="about-card glass-card" data-aos="fade-up" data-aos-delay="200">
      <div class="card-decoration card-decoration-3"></div>
      <h2 class="about-section-title">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
        技能
      </h2>
      <div class="skills-grid">
        <div class="skill-card" th:each="skill : ${theme.config.about != null && theme.config.about.skillsConfig != null ? theme.config.about.skillsConfig.skills : {}}">
          <!-- 自定义图标图片（优先级最高） -->
          <div th:if="${skill.customIcon != null && !#strings.isEmpty(skill.customIcon)}" class="skill-icon skill-icon-custom" th:style="${skill.iconColor != null && !#strings.isEmpty(skill.iconColor) ? 'background:' + skill.iconColor : ''}">
            <img th:src="${skill.customIcon}" th:alt="${skill.name}" />
          </div>
          <!-- Iconify 图标（优先级第二） -->
          <div th:if="${(skill.customIcon == null || #strings.isEmpty(skill.customIcon)) && skill.iconifyIcon != null && !#strings.isEmpty(skill.iconifyIcon)}" class="skill-icon skill-icon-iconify" th:style="${skill.iconColor != null && !#strings.isEmpty(skill.iconColor) ? 'background:' + skill.iconColor : ''}">
            <span class="iconify" th:attr="data-icon=${skill.iconifyIcon}" data-width="24" data-height="24"></span>
          </div>
          <!-- 内置图标（兜底） -->
          <div th:if="${(skill.customIcon == null || #strings.isEmpty(skill.customIcon)) && (skill.iconifyIcon == null || #strings.isEmpty(skill.iconifyIcon))}" class="skill-icon" th:classappend="${skill.icon != null ? 'skill-icon-' + skill.icon : ''}" th:style="${skill.iconColor != null && !#strings.isEmpty(skill.iconColor) ? 'background:' + skill.iconColor : ''}">
            <span th:if="${skill.icon == 'ts'}">TS</span>
            <svg th:if="${skill.icon == 'js'}" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z"/></svg>
            <svg th:if="${skill.icon == 'react'}" viewBox="0 0 24 24" fill="currentColor"><path d="M12 13.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm0-12c-.56 0-1.1.04-1.62.11-.18.02-.35.05-.52.08C8.06 2.01 6.72 3.2 5.7 4.8c-.4.63-.74 1.32-1.02 2.05-.1.26-.19.52-.27.79-.7-.12-1.36-.18-1.97-.18C1.09 7.46 0 8.04 0 9c0 .96 1.09 1.54 2.44 1.54.61 0 1.27-.06 1.97-.18.08.27.17.53.27.79.28.73.62 1.42 1.02 2.05 1.02 1.6 2.36 2.79 4.16 3.11.17.03.34.06.52.08.52.07 1.06.11 1.62.11s1.1-.04 1.62-.11c.18-.02.35-.05.52-.08 1.8-.32 3.14-1.51 4.16-3.11.4-.63.74-1.32 1.02-2.05.1-.26.19-.52.27-.79.7.12 1.36.18 1.97.18 1.35 0 2.44-.58 2.44-1.54 0-.96-1.09-1.54-2.44-1.54-.61 0-1.27.06-1.97.18-.08-.27-.17-.53-.27-.79-.28-.73-.62-1.42-1.02-2.05-1.02-1.6-2.36-2.79-4.16-3.11-.17-.03-.34-.06-.52-.08A10.4 10.4 0 0 0 12 1.5z"/></svg>
            <svg th:if="${skill.icon == 'vue'}" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3h3.5L12 15l6.5-12H22L12 21 2 3z"/></svg>
            <svg th:if="${skill.icon == 'node'}" viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.985c-.275 0-.532-.074-.772-.202l-2.439-1.448c-.365-.203-.182-.277-.072-.314.496-.165.588-.201 1.101-.493.056-.037.129-.02.185.017l1.87 1.12c.074.036.166.036.221 0l7.319-4.237c.074-.036.11-.11.11-.202V7.768c0-.091-.036-.165-.11-.201l-7.319-4.219c-.073-.037-.165-.037-.221 0L4.552 7.566c-.073.036-.11.129-.11.201v8.457c0 .073.037.166.11.202l2 1.157c1.082.548 1.762-.095 1.762-.735V8.502c0-.11.091-.221.22-.221h.936c.108 0 .22.092.22.221v8.347c0 1.449-.788 2.294-2.164 2.294-.422 0-.752 0-1.688-.46l-1.925-1.099a1.55 1.55 0 0 1-.771-1.34V7.786c0-.55.293-1.064.771-1.339l7.316-4.237a1.637 1.637 0 0 1 1.544 0l7.317 4.237c.479.274.771.789.771 1.339v8.458c0 .549-.293 1.063-.771 1.34l-7.317 4.236c-.241.11-.516.165-.773.165z"/></svg>
            <svg th:if="${skill.icon == 'css'}" viewBox="0 0 24 24" fill="currentColor"><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.565-2.438L1.5 0zm17.09 4.413L5.41 4.41l.213 2.622 10.125.002-.255 2.716h-6.64l.24 2.573h6.182l-.366 3.523-2.91.804-2.956-.81-.188-2.11h-2.61l.29 3.855L12 19.288l5.373-1.53L18.59 4.414z"/></svg>
            <svg th:if="${skill.icon == 'html'}" viewBox="0 0 24 24" fill="currentColor"><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z"/></svg>
            <span th:if="${skill.icon == 'python'}">PY</span>
          </div>
          <div class="skill-info">
            <span class="skill-name" th:text="${skill.name}">技能名称</span>
            <div class="skill-bar"><div class="skill-fill" th:style="|width: ${skill.level}%|"></div></div>
          </div>
        </div>
      </div>
    </div>

    <div th:if="${theme.config.about == null || theme.config.about.siteHistoryConfig == null || theme.config.about.siteHistoryConfig.showSiteHistory == null || theme.config.about.siteHistoryConfig.showSiteHistory}" class="about-card glass-card" data-aos="fade-up" data-aos-delay="300">
      <th:block th:replace="~{modules/watermark :: watermark('about-card-watermark')}" />
      <div class="card-decoration card-decoration-2"></div>
      <h2 class="about-section-title">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
        建站历程
      </h2>
      <div class="about-history" style="white-space: pre-line;" th:text="${theme.config.about != null && theme.config.about.siteHistoryConfig != null ? theme.config.about.siteHistoryConfig.siteHistory : ''}">
        <p>始建于<span class="highlight">2024年</span>，纯个人兴趣建站，记录技术与生活。</p>
        <p>最初使用 Hexo 搭建，后迁移至 <span class="highlight">Halo</span>，体验更现代化的博客系统。</p>
        <p>记录生活中的点滴，分享技术探索的心得，收藏有趣的发现，顺便当做备忘录。</p>
        <p>经历了多次改版、换主题、折腾服务器，一直靠<span class="highlight">热爱</span>支撑，毕竟它承载着成长和回忆。</p>
        <p>更新随缘，有时勤快有时懒，因为不知道写什么，全看心情。</p>
        <p>如需联系，请 Email：<a href="mailto:hi@sepo.cc" class="history-link">hi@sepo.cc</a>，或到评论区留言。</p>
      </div>
    </div>

    <!-- Steam 个人资料卡片 -->
    <div th:if="${theme.config.about != null && theme.config.about.steamConfig != null && theme.config.about.steamConfig.showSteam}" class="about-card glass-card" data-aos="fade-up" data-aos-delay="350"
         th:attr="data-show-bans=${theme.config.about.steamConfig.showBans != null ? theme.config.about.steamConfig.showBans : true},data-show-stats=${theme.config.about.steamConfig.showStats != null ? theme.config.about.steamConfig.showStats : true},data-show-achievements=${theme.config.about.steamConfig.showAchievements != null ? theme.config.about.steamConfig.showAchievements : true},data-show-game-library=${theme.config.about.steamConfig.showGameLibrary != null ? theme.config.about.steamConfig.showGameLibrary : true},data-show-badges=${theme.config.about.steamConfig.showBadges != null ? theme.config.about.steamConfig.showBadges : true},data-show-friends=${theme.config.about.steamConfig.showFriends != null ? theme.config.about.steamConfig.showFriends : true}">
      <div class="card-decoration card-decoration-1"></div>
      <h2 class="about-section-title">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658c.545-.371 1.203-.59 1.912-.59.063 0 .125.004.188.006l2.861-4.142V8.91c0-2.495 2.028-4.524 4.524-4.524 2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911c0 .052.004.105.004.159 0 1.875-1.515 3.396-3.39 3.396-1.635 0-3.016-1.173-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 12-5.373 12-12S18.605 0 11.979 0zM7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25 1.297.539 2.793-.076 3.332-1.375.263-.63.264-1.319.005-1.949s-.75-1.121-1.377-1.383c-.624-.26-1.29-.249-1.878-.03l1.523.63c.956.4 1.409 1.5 1.009 2.455-.397.957-1.497 1.41-2.454 1.012zm11.415-9.303c0-1.662-1.353-3.015-3.015-3.015-1.665 0-3.015 1.353-3.015 3.015 0 1.665 1.35 3.015 3.015 3.015 1.663 0 3.015-1.35 3.015-3.015z"/></svg>
        Steam 游戏
      </h2>
      <div id="steamProfileCard" class="steam-profile-card">
        <div class="steam-loading">
          <div class="steam-loading-spinner"></div>
          <span>加载 Steam 资料中...</span>
        </div>
      </div>
    </div>

    <div th:if="${theme.config.about != null && theme.config.about.foreverBlogConfig != null && theme.config.about.foreverBlogConfig.showForeverBlog}" class="about-card glass-card forever-blog-card" data-aos="fade-up" data-aos-delay="400">
      <div class="card-decoration card-decoration-1"></div>
      <div class="forever-blog-header">
        <a href="https://www.foreverblog.cn/" target="_blank" rel="noopener noreferrer" class="forever-blog-logo">
          <img th:src="@{/assets/public/logo_en_default.png}" alt="十年之约">
        </a>
        <div class="forever-blog-info">
          <h3 class="forever-blog-title">十年之约</h3>
          <p class="forever-blog-desc">一个人的寂寞，一群人的狂欢</p>
        </div>
      </div>
      
      <div class="forever-blog-progress">
        <div class="progress-bar">
          <div class="progress-fill" id="progressFill"></div>
        </div>
        <div class="progress-text">
          <span>已坚持 <strong id="progressPercent">0</strong>%</span>
          <span id="remainingTime" class="remaining-time">0年:0天:00时:00分:00秒</span>
          <span class="progress-target">目标：10年</span>
        </div>
      </div>
    </div>

    <!-- 爱发电 -->
    <div th:if="${theme.config.about != null && theme.config.about.afdianSettings != null && theme.config.about.afdianSettings.showAfdian}" class="about-card glass-card afdian-card" data-aos="fade-up" data-aos-delay="450"
         th:with="afdianCfg = ${theme.config.about.afdianSettings}, sponsorData = ${afdianPlusFinder != null ? afdianPlusFinder.listAllSponsor() : null}, planData = ${afdianPlusFinder != null ? afdianPlusFinder.listAllPlan() : null}, productData = ${afdianPlusFinder != null ? afdianPlusFinder.listAllProduct() : null}, afdianLicensed = ${afdianPlusFinder != null ? afdianPlusFinder.isLicensed() : false}">
      <div class="card-decoration card-decoration-2"></div>
      <h2 class="about-section-title">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
        爱发电
      </h2>
      <!-- 赞助者（直接展示） -->
        <div class="afdian-sponsors">
          <th:block th:if="${sponsorData != null && sponsorData.data != null && sponsorData.data.list != null && !sponsorData.data.list.isEmpty()}">
            <div class="sponsor-item" th:each="sponsor : ${sponsorData.data.list}">
              <div class="sponsor-avatar">
                <img th:src="${sponsor.user.avatar}" th:alt="${sponsor.user.name}" loading="lazy" />
              </div>
              <div class="sponsor-info">
                <span class="sponsor-name" th:title="${sponsor.user.name}" th:text="${sponsor.user.name}">用户名</span>
                <div class="sponsor-meta">
                  <span class="sponsor-amount" th:text="|¥${sponsor.all_sum_amount}|">¥0</span>
                  <span class="sponsor-time" th:text="${afdianPlusFinder.parseTime(sponsor.last_pay_time)}">2024-01-01</span>
                </div>
              </div>
            </div>
          </th:block>
          <th:block th:if="${afdianPlusFinder == null}">
            <div class="afdian-empty">
              <svg viewBox="0 0 1024 1024" fill="currentColor" width="48" height="48"><path d="M554.666667 341.333333v128h85.333333l-128 213.333334V554.666667h-85.333333l128-213.333334z m384 170.666667c0 234.666667-192 426.666667-426.666667 426.666667S85.333333 746.666667 85.333333 512 277.333333 85.333333 512 85.333333v128c-166.4 0-298.666667 132.266667-298.666667 298.666667s132.266667 298.666667 298.666667 298.666667 298.666667-132.266667 298.666667-298.666667h128z m-46.933334 42.666667h-42.666666c-21.333333 166.4-166.4 298.666667-337.066667 298.666666-187.733333 0-341.333333-153.6-341.333333-341.333333C170.666667 337.066667 302.933333 196.266667 469.333333 174.933333v-42.666666C277.333333 153.6 128 315.733333 128 512c0 213.333333 170.666667 384 384 384 196.266667 0 358.4-149.333333 379.733333-341.333333z m-89.6-106.666667l123.733334-29.866667C891.733333 256 763.733333 128 601.6 93.866667l-29.866667 123.733333c119.466667 29.866667 204.8 115.2 230.4 230.4z"/></svg>
              <p>请安装并启用 Afdian Plus 插件</p>
            </div>
          </th:block>
          <th:block th:if="${afdianPlusFinder != null && (sponsorData == null || sponsorData.data == null || sponsorData.data.list == null || sponsorData.data.list.isEmpty())}">
            <div class="afdian-empty">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
              <p>暂无赞助者，成为第一个吧~</p>
            </div>
          </th:block>
        </div>
      <!-- 发电方案（折叠面板） -->
      <th:block th:if="${afdianPlusFinder != null && afdianCfg.showPlans != null && afdianCfg.showPlans}">
        <button class="afdian-toggle-btn" data-afdian-toggle="afdian-plans-panel" onclick="toggleAfdianPanel('afdian-plans-panel')">
          <span class="afdian-section-title">发电方案</span>
          <svg class="afdian-toggle-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
        </button>
        <div id="afdian-plans-panel" class="afdian-collapse-panel">
          <div th:if="${planData != null && planData.data != null && planData.data.list != null && !planData.data.list.isEmpty()}" class="afdian-plan-grid">
            <div class="afdian-plan-item"
                 th:each="plan : ${planData.data.list}"
                 th:data-plan-id="${plan.plan_id}"
                 th:data-product-type="${plan.product_type}"
                 th:data-pay-month="${plan.pay_month ?: 1}"
                 th:data-plan-name="${plan.name}"
                 th:data-plan-price="${plan.price ?: plan.show_price}"
                 th:data-plan-desc="${plan.desc ?: ''}"
                 onclick="var d=this.dataset;showAfdianModal({name:d.planName,price:d.planPrice,desc:d.planDesc,planId:d.planId,productType:d.productType,month:parseInt(d.payMonth)||1,showMonths:true})">
              <div class="afdian-plan-top">
                <span class="afdian-plan-name" th:text="${plan.name}">方案名</span>
                <span class="afdian-plan-price" th:text="|¥${plan.price ?: plan.show_price}|">¥0</span>
              </div>
              <div th:if="${plan.desc != null && !#strings.isEmpty(plan.desc)}" class="afdian-plan-desc" th:text="${plan.desc}">描述</div>
              <span class="afdian-plan-action">查看详情 ></span>
            </div>
          </div>
          <div th:if="${planData == null || planData.data == null || planData.data.list == null || planData.data.list.isEmpty()}" class="afdian-empty">
            <svg viewBox="0 0 1024 1024" fill="currentColor" width="48" height="48"><path d="M554.666667 341.333333v128h85.333333l-128 213.333334V554.666667h-85.333333l128-213.333334z m384 170.666667c0 234.666667-192 426.666667-426.666667 426.666667S85.333333 746.666667 85.333333 512 277.333333 85.333333 512 85.333333v128c-166.4 0-298.666667 132.266667-298.666667 298.666667s132.266667 298.666667 298.666667 298.666667 298.666667-132.266667 298.666667-298.666667h128z m-46.933334 42.666667h-42.666666c-21.333333 166.4-166.4 298.666667-337.066667 298.666666-187.733333 0-341.333333-153.6-341.333333-341.333333C170.666667 337.066667 302.933333 196.266667 469.333333 174.933333v-42.666666C277.333333 153.6 128 315.733333 128 512c0 213.333333 170.666667 384 384 384 196.266667 0 358.4-149.333333 379.733333-341.333333z m-89.6-106.666667l123.733334-29.866667C891.733333 256 763.733333 128 601.6 93.866667l-29.866667 123.733333c119.466667 29.866667 204.8 115.2 230.4 230.4z"/></svg>
            <p th:if="${!afdianLicensed}">需要开启插件高级功能</p>
            <p th:if="${afdianLicensed}">暂无发电方案</p>
          </div>
        </div>
      </th:block>
      <!-- 电铺商品（折叠面板） -->
      <th:block th:if="${afdianPlusFinder != null && afdianCfg.showProducts != null && afdianCfg.showProducts}">
        <button class="afdian-toggle-btn" data-afdian-toggle="afdian-products-panel" onclick="toggleAfdianPanel('afdian-products-panel')">
          <span class="afdian-section-title">电铺商品</span>
          <svg class="afdian-toggle-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
        </button>
        <div id="afdian-products-panel" class="afdian-collapse-panel">
          <div th:if="${productData != null && productData.data != null && productData.data.list != null && !productData.data.list.isEmpty()}" class="afdian-shop-grid">
            <div class="afdian-shop-item"
                 th:each="product : ${productData.data.list}"
                 th:data-plan-id="${product.plan_id}"
                 th:data-product-type="${product.product_type}"
                 th:data-product-name="${product.name}"
                 th:data-product-price="${product.price ?: product.show_price}"
                 th:data-product-desc="${product.desc ?: ''}"
                 th:data-product-pic="${product.pic ?: ''}"
                 onclick="var d=this.dataset;showAfdianModal({name:d.productName,price:d.productPrice,desc:d.productDesc,pic:d.productPic,planId:d.planId,productType:d.productType,showMonths:false})">
              <div th:if="${product.pic != null && !#strings.isEmpty(product.pic)}" class="afdian-shop-pic">
                <img th:src="${product.pic}" th:alt="${product.name}" loading="lazy" />
              </div>
              <div class="afdian-shop-info">
                <span class="afdian-shop-name" th:text="${product.name}">商品名</span>
                <span class="afdian-shop-price" th:text="|¥${product.price ?: product.show_price}|">¥0</span>
              </div>
            </div>
          </div>
          <div th:if="${productData == null || productData.data == null || productData.data.list == null || productData.data.list.isEmpty()}" class="afdian-empty">
            <svg viewBox="0 0 1024 1024" fill="currentColor" width="48" height="48"><path d="M554.666667 341.333333v128h85.333333l-128 213.333334V554.666667h-85.333333l128-213.333334z m384 170.666667c0 234.666667-192 426.666667-426.666667 426.666667S85.333333 746.666667 85.333333 512 277.333333 85.333333 512 85.333333v128c-166.4 0-298.666667 132.266667-298.666667 298.666667s132.266667 298.666667 298.666667 298.666667 298.666667-132.266667 298.666667-298.666667h128z m-46.933334 42.666667h-42.666666c-21.333333 166.4-166.4 298.666667-337.066667 298.666666-187.733333 0-341.333333-153.6-341.333333-341.333333C170.666667 337.066667 302.933333 196.266667 469.333333 174.933333v-42.666666C277.333333 153.6 128 315.733333 128 512c0 213.333333 170.666667 384 384 384 196.266667 0 358.4-149.333333 379.733333-341.333333z m-89.6-106.666667l123.733334-29.866667C891.733333 256 763.733333 128 601.6 93.866667l-29.866667 123.733333c119.466667 29.866667 204.8 115.2 230.4 230.4z"/></svg>
            <p th:if="${!afdianLicensed}">需要开启插件高级功能</p>
            <p th:if="${afdianLicensed}">暂无电铺商品</p>
          </div>
        </div>
      </th:block>
      <!-- 底部按钮 -->
      <div class="afdian-footer" th:if="${afdianCfg.afdianUrl != null && !#strings.isEmpty(afdianCfg.afdianUrl)}">
        <a th:href="${afdianCfg.afdianUrl}" class="afdian-btn" target="_blank" rel="noopener">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
          成为赞助者
        </a>
      </div>
    </div>
    <!-- 爱发电弹窗 -->
    <div th:if="${theme.config.about != null && theme.config.about.afdianSettings != null && theme.config.about.afdianSettings.showAfdian}" id="afdian-modal" class="afdian-modal-overlay" onclick="if(event.target===this)closeAfdianModal()">
      <div class="afdian-modal">
        <div class="afdian-modal-header">
          <span class="afdian-modal-title">赞助详情</span>
          <button class="afdian-modal-close" onclick="closeAfdianModal()">×</button>
        </div>
        <div class="afdian-modal-body">
          <div class="afdian-modal-pic" style="display:none"><img src="" alt="" /></div>
          <div class="afdian-modal-info">
            <span class="afdian-modal-name"></span>
            <span class="afdian-modal-price"></span>
          </div>
          <div class="afdian-modal-desc"></div>
          <div class="afdian-modal-months">
            <div class="afdian-modal-label">订阅时长</div>
            <div class="afdian-month-grid">
              <div class="afdian-month-opt" data-month="1" onclick="selectAfdianMonth(1)">1 个月</div>
              <div class="afdian-month-opt" data-month="3" onclick="selectAfdianMonth(3)">3 个月</div>
              <div class="afdian-month-opt" data-month="6" onclick="selectAfdianMonth(6)">6 个月</div>
              <div class="afdian-month-opt" data-month="12" onclick="selectAfdianMonth(12)">12 个月</div>
            </div>
          </div>
        </div>
        <div class="afdian-modal-footer">
          <div class="afdian-verify-section" style="display:none">
            <button class="afdian-verify-btn" onclick="verifyAfdianPayment()">我已付款，验证支付</button>
          </div>
          <button class="afdian-modal-btn" onclick="closeAfdianModal()">取消</button>
          <button class="afdian-modal-btn afdian-modal-btn-primary" onclick="confirmAfdianOrder()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
            前往爱发电支付
          </button>
        </div>
      </div>
    </div>

    <div th:if="${theme.config.about == null || theme.config.about.contactConfig == null || theme.config.about.contactConfig.showContact == null || theme.config.about.contactConfig.showContact}" class="about-card glass-card" data-aos="fade-up" data-aos-delay="500">
      <h2 class="about-section-title">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
        联系我
      </h2>
      <div class="about-contact">
        <th:block th:if="${theme.config.social != null && theme.config.social.links != null}">
          <th:block th:each="link : ${theme.config.social.links}">
            <a th:if="${link.url != null && !#strings.isEmpty(link.url)}"
               th:href="${link.icon == 'email' && (link.iconifyIcon == null || #strings.isEmpty(link.iconifyIcon)) ? 'mailto:' + link.url : link.url}"
               th:title="${link.name}"
               class="contact-link"
               target="_blank"
               rel="noopener">
              <!-- Iconify 图标（优先） -->
              <span th:if="${link.iconifyIcon != null && !#strings.isEmpty(link.iconifyIcon)}" class="iconify" th:attr="data-icon=${link.iconifyIcon}" data-width="20" data-height="20"></span>
              <!-- 内置图标（fallback） -->
              <th:block th:if="${link.iconifyIcon == null || #strings.isEmpty(link.iconifyIcon)}">
                <svg th:if="${link.icon == 'github'}" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
                <svg th:if="${link.icon == 'twitter'}" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                <svg th:if="${link.icon == 'email'}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                <svg th:if="${link.icon == 'weibo'}" viewBox="0 0 24 24" fill="currentColor"><path d="M9.31 14.69c-1.48.46-2.77-.16-2.88-1.38-.11-1.22.96-2.59 2.44-3.05 1.48-.46 2.77.16 2.88 1.38.11 1.22-.96 2.59-2.44 3.05zm5.73-3.95c-.25-.07-.42-.12-.29-.44.29-.7.32-1.3.01-1.73-.58-.81-2.17-.77-4.01-.02 0 0-.58.25-.43-.2.28-.9.24-1.65-.19-2.08-.98-.98-3.58.04-5.82 2.28C2.7 10.15 2 11.82 2 13.31c0 2.82 3.61 4.53 7.14 4.53 4.63 0 7.71-2.69 7.71-4.82 0-1.29-1.08-2.02-1.81-2.28zM8.68 17.19c-2.83.28-5.27-1-5.45-2.86-.18-1.86 1.97-3.57 4.8-3.85 2.83-.28 5.27 1 5.45 2.86.18 1.86-1.97 3.57-4.8 3.85z"/><path d="M18.24 7.67c-.82-.82-1.99-1.19-3.13-1.05-.31.04-.52.33-.48.64.04.31.33.52.64.48.82-.1 1.66.17 2.25.76.59.59.86 1.43.76 2.25-.04.31.17.6.48.64h.08c.28 0 .52-.21.56-.48.14-1.14-.23-2.31-1.05-3.13l-.11-.11zm1.46-1.46c-1.58-1.58-3.85-2.29-6.06-1.92-.31.05-.53.34-.48.65.05.31.34.53.65.48 1.93-.32 3.91.3 5.29 1.68 1.38 1.38 2 3.36 1.68 5.29-.05.31.17.6.48.65h.08c.28 0 .52-.21.57-.48.37-2.21-.34-4.48-1.92-6.06l-.29-.29z"/></svg>
                <svg th:if="${link.icon == 'bilibili'}" viewBox="0 0 24 24" fill="currentColor"><path d="M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z"/></svg>
                <svg th:if="${link.icon == 'zhihu'}" viewBox="0 0 24 24" fill="currentColor"><path d="M5.721 0C4.12 0 2.82 1.3 2.82 2.9v18.2C2.82 22.7 4.12 24 5.721 24h12.558c1.601 0 2.901-1.3 2.901-2.9V2.9C21.18 1.3 19.88 0 18.279 0H5.72zM8.48 5.079h2.364v9.172H8.48V5.08zm.04 10.672h2.324l2.244 3.862 2.684-3.862h-2.684l-1.64 2.324-1.928-2.324zm5.32-10.672h1.6c1.6 0 2.4.8 2.4 2.4v6.772h-1.6V7.479c0-.8-.4-1.2-1.2-1.2h-1.2v7.972h-1.6V5.08h1.6z"/></svg>
                <svg th:if="${link.icon == 'telegram'}" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z"/></svg>
                <svg th:if="${link.icon == 'discord'}" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
              </th:block>
              <span th:text="${link.name}">Social</span>
            </a>
          </th:block>
        </th:block>
        <a th:href="@{/rss.xml}" class="contact-link" title="RSS">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 11a9 9 0 0 1 9 9"/><path d="M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg>
          <span>RSS</span>
        </a>
      </div>
    </div>
  </div>

  <script th:if="${theme.config.about != null && theme.config.about.foreverBlogConfig != null && theme.config.about.foreverBlogConfig.showForeverBlog}" th:inline="javascript">
    window.FOREVER_BLOG_START_DATE = /*[[${theme.config.about.foreverBlogConfig.foreverBlogStartDate ?: '2024-01-01'}]]*/ '2024-01-01';
  </script>
</th:block>
</html>
