<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 侧边栏自我介绍 -->

<div class="card-widget card-info" th:fragment="profile">

    <!-- 默认 -->
    <th:block th:if="${#strings.equals(theme.config.sidebar.profile.profileStyle, 'default')}">
        <!-- 描述信息 -->
        <div class="card-content">
            <div class="card-info-avatar is-center">
                <div class="author-info__top-group">
                    <div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！我是
                    </div>
                    <img class="avatar-img entered loaded"
                         th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
                </div>
                <div class="author-info__name" th:if="${#strings.isEmpty(theme.config.sidebar.profile.profileName)}"
                     th:text="${site.title}"></div>
                <div class="author-info__name" th:if="${not #strings.isEmpty(theme.config.sidebar.profile.profileName)}"
                     th:text="${theme.config.sidebar.profile.profileName}"></div>
                <div class="author-info__description" th:utext="${theme.config.sidebar.profile.profileDesc}">

                </div>
            </div>
        </div>

        <!-- 跳转信息 -->
        <div class="banner-button-group">
            <a class="banner-button" href="/about">
                <i class="iconfont icon-arrow-circle-right"></i>
                <span class="banner-button-text">了解更多</span>
            </a>
        </div>

        <div class="card-info-social-icons is-center"
             th:if="${not #lists.isEmpty(theme.config.sidebar.profile.socialMedia)}"
             th:with="socialMedias = ${theme.config.sidebar.profile.socialMedia}">

            <a class="social-icon" rel="external nofollow" target="_blank" th:each="socialMedia : ${socialMedias}"
               th:href="${socialMedia.url}" th:title="${socialMedia.name}">
                <i class="iconfont " th:classappend="${socialMedia.icon}"></i>
            </a>
        </div>

        <style>
            /* 社交按钮 */
            #aside-content .card-info #card-info-btn {
                display: none;
            }

            #aside-content .card-info .card-info-social-icons {
                margin: 0;
                padding-top: 10px;
                display: flex;
                justify-content: flex-start;
                flex-direction: row;
                flex-wrap: wrap;
                cursor: pointer;
                position: absolute;
                bottom: 1rem;
                left: 1rem;
            }

            #aside-content .card-info .card-info-social-icons .social-icon {
                margin: 0;
                margin-right: 8px;
            }

            #aside-content .card-info .card-info-social-icons i {
                background: var(--heo-white-op);
                color: var(--heo-white);
                font-size: 1.2rem;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
            }

            #aside-content .card-info .card-info-social-icons i:hover {
                background: var(--heo-secondbg);
                transform: scale(0.97);
                color: var(--heo-main);
                box-shadow: none;
            }

            #aside-content .card-info .banner-button {
                height: 40px;
                width: 124px;
                border-radius: 20px;
                justify-content: center;
            }

            @media screen and (min-width: 1300px) {
                #aside-content .card-info .card-info-social-icons i {
                    color: var(--heo-white);
                }

                [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
                    color: var(--heo-white);
                }
            }

            #aside-content .card-info img {
                width: 28px;
                right: 24px;
                top: 20px;
                border-radius: 500px;
                transition: all 0.5s ease 0s;
                position: absolute;
            }

            #aside-content .card-info .author-info__name {
                font-weight: 500;
                font-size: 1.57em;
            }

            #aside-content .card-info .author-info__name {
                text-align: left;
                font-weight: bold;
                color: var(--heo-white);
                font-size: 28px;
                line-height: 1.1;
                margin-top: 0.8rem;
                margin-bottom: 0.4rem;
            }
        </style>

    </th:block>


    <!-- 样式一 -->
    <th:block th:if="${#strings.equals(theme.config.sidebar.profile.profileStyle, 'one')}">


        <div class="card-content">
            <div class="card-info-avatar is-center">
                <div class="author-info__top-group">
                    <div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！
                    </div>
                </div>
            </div>
            <div class="avatar-img-group"><img class="avatar-img" alt="avatar"
                                               th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
                <div class="avatar-sticker"><img class="avatar-sticker-img" alt="avatar"
                                                 th:src="@{${theme.config.sidebar.profile.stickerImg}}"></div>
            </div>
            <div class="author-info__description_group" th:utext="${theme.config.sidebar.profile.profileDesc}">
            </div>
            <div class="author-info__bottom-group">
                <a th:if="${not #strings.isEmpty(theme.config.sidebar.profile.profileName)}"
                   class="author-info__bottom-group-left" href="/about" data-pjax-state="">
                    <div class="author-info__name">[[${theme.config.sidebar.profile.profileName}]]</div>
                    <div class="author-info__desc">[[${theme.config.sidebar.profile.desc}]]</div>
                </a>
                <div class="card-info-social-icons is-center"
                     th:if="${not #lists.isEmpty(theme.config.sidebar.profile.socialMedia)}"
                     th:with="socialMedias = ${theme.config.sidebar.profile.socialMedia}">
                    <a class="social-icon" rel="external nofollow" target="_blank"
                       th:each="socialMedia : ${socialMedias}" th:href="${socialMedia.url}"
                       th:title="${socialMedia.name}">
                        <i class="iconfont " th:classappend="${socialMedia.icon}"></i>
                    </a>
                </div>
            </div>
        </div>



        <style>
            .is-center {
                text-align: center;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                flex-direction: row;
                align-items: center
            }

            .card-info-avatar.is-center {
                flex-direction: column;
                display: flex;
                align-items: flex-start
            }

            #aside-content .card-info img.avatar-img {
                width: 118px;
                right: 0;
                top: 0;
                border-radius: 500px;
                position: absolute;
                opacity: 1;
                transition: .3s;
                border: 5px solid var(--heo-white)
            }

            .author-info__top-group {
                display: flex;
                height: 28px;
                width: 100%
            }

            .author-info__desc {
                font-size: 12px;
                color: var(--heo-white);
                opacity: .6;
                line-height: 1
            }

            .avatar-img-group {
                width: 118px;
                height: 118px;
                right: calc(50% - 59px);
                top: 90px;
                border-radius: 500px;
                position: absolute;
                transition: cubic-bezier(.69, .39, 0, 1.21) .3s;
                transform-origin: bottom
            }

            #aside-content .card-info:hover .avatar-img-group {
                opacity: 0;
                transform: scale(0)
            }

            .author-info__bottom-group {
                display: flex;
                justify-content: space-between;
                position: absolute;
                padding: 1.2rem;
                width: 100%;
                left: 0;
                bottom: 0;
                align-items: center
            }

            #aside-content .card-info .card-info-social-icons {
                margin: 0;
                display: flex;
                justify-content: flex-start;
                flex-direction: row;
                flex-wrap: wrap;
                cursor: pointer
            }

            #aside-content .card-info .card-info-social-icons i:hover {
                transform: rotate(540deg);
                background-color: #000;
                cursor: pointer
            }

            #aside-content .card-info .card-info-social-icons .social-icon {
                margin: 0;
                margin-left: 8px
            }

            #aside-content .card-info .card-info-social-icons i {
                background: var(--heo-white-op);
                color: var(--heo-white);
                font-size: 1rem;
                width: 40px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center
            }

            #aside-content .card-info .card-info-social-icons i:hover {
                background: var(--heo-secondbg);
                transform: scale(1.1);
                color: var(--heo-main);
                box-shadow: none
            }

            #aside-content .card-info .banner-button {
                height: 40px;
                width: 118px;
                border-radius: 20px;
                justify-content: center
            }

            @media screen and (min-width: 1300px) {
                #aside-content .card-info .card-info-social-icons i {
                    color: var(--heo-white)
                }

                [data-theme=dark] #aside-content .card-info .card-info-social-icons i {
                    color: var(--heo-white)
                }
            }

            .author-info__description_group {
                position: absolute;
                top: 50px;
                width: 100%;
                left: 0;
                padding: 1.2rem;
                opacity: 0;
                transition: .3s
            }

            .card-widget:hover .author-info__description_group {
                opacity: 1
            }

            .author-info__description2 {
                line-height: 1.38;
                margin: .3rem 0;
                text-align: justify;
                width: 100%;
                z-index: 2;
                color: rgba(255, 255, 255, .8)
            }

            .author-info__description2 b {
                color: var(--heo-white)
            }

            div#author-info__sayhi {
                text-align: center;
                width: fit-content;
                color: var(--heo-white);
                background: var(--heo-white-op);
                font-size: 12px;
                margin-right: auto;
                padding: 2px 8px;
                border-radius: 12px;
                cursor: pointer;
                -webkit-user-select: none;
                transition: .3s;
                margin: auto;
                min-width: 100px
            }

            div#author-info__sayhi:hover {
                background: var(--heo-card-bg);
                color: var(--heo-fontcolor);
                transform: scale(1.1)
            }

            #aside-content .card-info .author-info__name {
                text-align: left;
                font-weight: 700;
                color: var(--heo-white);
                font-size: 20px;
                line-height: 1;
                margin-bottom: 5px
            }

            .author-info__desc {
                font-size: 12px;
                color: var(--heo-white);
                opacity: .6;
                line-height: 1
            }

            .author-info__description {
                line-height: 1.38;
                margin: .3rem 0;
                text-align: justify;
                color: rgba(255, 255, 255, .8)
            }

            .avatar-sticker {
                position: absolute;
                bottom: 2px;
                right: 2px;
                width: 33px;
                height: 33px;
                line-height: 34px;
                z-index: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: .3s .2s;
                transform: scale(1);
                background: var(--heo-white);
                border-radius: 50%
            }

            .avatar-sticker img {
                width: 26px;
                height: 26px
            }

            .card-widget:hover .avatar-sticker {
                opacity: 0;
                transform: scale(0)
            }

            .author-info__description b {
                color: var(--heo-white);
            }

            #aside-content>.card-widget.card-info::before {
                background: linear-gradient(-25deg, var(--heo-main), var(--heo-main-op-deep), var(--heo-main), var(--heo-main-op-deep));
                background-size: 400%;
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                content: '';
                animation: gradient 15s ease infinite;
            }
        </style>


    </th:block>

</div>

</html>