<!-- ========== HEADER ========== -->
<header id="header" class="navbar navbar-expand-lg navbar-end navbar-light bg-white">
<!-- Topbar -->
<div class="container navbar-topbar">
<nav class="js-mega-menu navbar-nav-wrap">
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#topbarNavDropdown" aria-controls="topbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="d-flex justify-content-between align-items-center">
<span class="text-dark">Topbar</span>
<span class="navbar-toggler-default">
<i class="bi-list ms-2"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x ms-2"></i>
</span>
</span>
</button>
<!-- End Toggler -->
<div id="topbarNavDropdown" class="navbar-nav-wrap-collapse collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item me-auto">
<a class="nav-link" href="#"><i class="bi-chevron-left small ms-1"></i> 主站演示</a>
</li>
<!-- Demos -->
<li class="hs-has-mega-menu nav-item">
<a id="demosMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle " aria-current="page" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Demos</a>
<!-- Mega Menu -->
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="demosMegaMenu" style="min-width: 40rem;">
<!-- Promo -->
<div class="navbar-dropdown-menu-promo">
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M4.06068 22.4249C3.47489 23.0107 3.47489 23.9604 4.06068 24.5462L10.4246 30.9102C11.0104 31.4959 11.9602 31.4959 12.546 30.9102L18.9099 24.5462C19.4957 23.9604 19.4957 23.0107 18.9099 22.4249L12.546 16.0609C11.9602 15.4751 11.0104 15.4751 10.4246 16.0609L4.06068 22.4249ZM28.0607 22.4249C27.4749 23.0107 27.4749 23.9604 28.0607 24.5462L34.4246 30.9102C35.0104 31.4959 35.9602 31.4959 36.546 30.9102L42.9099 24.5462C43.4957 23.9604 43.4957 23.0107 42.9099 22.4249L36.546 16.0609C35.9602 15.4751 35.0104 15.4751 34.4246 16.0609L28.0607 22.4249Z" fill="#000000"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.0607 10.4249C15.4749 11.0107 15.4749 11.9604 16.0607 12.5462L22.4246 18.9102C23.0104 19.496 23.9602 19.496 24.546 18.9102L30.9099 12.5462C31.4957 11.9604 31.4957 11.0107 30.9099 10.4249L24.546 4.06092C23.9602 3.47514 23.0104 3.47514 22.4246 4.06092L16.0607 10.4249ZM16.0607 34.4249C15.4749 35.0107 15.4749 35.9604 16.0607 36.5462L22.4246 42.9102C23.0104 43.496 23.9602 43.496 24.546 42.9102L30.9099 36.5462C31.4957 35.9604 31.4957 35.0107 30.9099 34.4249L24.546 28.0609C23.9602 27.4751 23.0104 27.4751 22.4246 28.0609L16.0607 34.4249Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Main</span>
<p class="navbar-dropdown-menu-media-desc">超过60个可以直接进行使用的页面包含企业、机构、投资组合、应用、账户、登录、注册、个人中心等更多的页面。</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 6C10.6716 6 10 6.67157 10 7.5V12H5.5C4.67157 12 4 12.6716 4 13.5V16.5C4 17.3284 4.67157 18 5.5 18H10V40.5C10 41.3284 10.6716 42 11.5 42H14.5C15.3284 42 16 41.3284 16 40.5V18H42.5C43.3284 18 44 17.3284 44 16.5V13.5C44 12.6716 43.3284 12 42.5 12H16V7.5C16 6.67157 15.3284 6 14.5 6H11.5Z" fill="#000000"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M42.5 22H20V36.5C20 37.3284 20.6716 38 21.5 38H37.5C41.0899 38 44 35.0899 44 31.5V23.5C44 22.6716 43.3284 22 42.5 22ZM39 24C38.4477 24 38 24.4477 38 25V33C38 33.5523 38.4477 34 39 34H41C41.5523 34 42 33.5523 42 33V25C42 24.4477 41.5523 24 41 24H39Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Real Estate</span>
<p class="navbar-dropdown-menu-media-desc">Find the latest homes for sale, real estate market data.</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.34717 16C7.2426 16 6.34717 16.8954 6.34717 18V38C6.34717 39.1046 7.2426 40 8.34717 40H39.653C40.7576 40 41.653 39.1046 41.653 38V18C41.653 16.8954 40.7576 16 39.653 16H8.34717ZM20.5 20C20.2238 20 20 20.2239 20 20.5V23.5C20 23.7761 20.2238 24 20.5 24H27.5C27.7761 24 28 23.7761 28 23.5V20.5C28 20.2239 27.7761 20 27.5 20H20.5Z" fill="#000000"/>
<path opacity="0.3" d="M20 16H16V14C16 10.6863 18.6863 8 22 8H26C29.3137 8 32 10.6863 32 14V16H28V14C28 12.8954 27.1046 12 26 12H22C20.8954 12 20 12.8954 20 14V16Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Jobs <span class="badge bg-success rounded-pill ms-1">Hot</span></span>
<p class="navbar-dropdown-menu-media-desc">在网上搜索数以百万计的工作，以找到你职业生涯的下一步。</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
</div>
<!-- End Promo -->
<!-- Promo -->
<div class="navbar-dropdown-menu-promo">
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 4H14C10.5072 4 8 6.61167 8 10V38C8 41.3883 10.5072 44 14 44H38C39.2837 44 40 43.2538 40 42V40H15.6667C14.7462 40 14 39.2538 14 38.3333V37.6667C14 36.7462 14.7462 36 15.6667 36H40V6C40 4.74619 39.2837 4 38 4Z" fill="#000000"/>
<mask maskUnits="userSpaceOnUse" x="8" y="4" width="32" height="40">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38 4H14C10.5072 4 8 6.61167 8 10V38C8 41.3883 10.5072 44 14 44H38C39.2837 44 40 43.2538 40 42V40H15.6667C14.7462 40 14 39.2538 14 38.3333V37.6667C14 36.7462 14.7462 36 15.6667 36H40V6C40 4.74619 39.2837 4 38 4Z" fill="white"/>
</mask>
<g mask="url(#mask0)">
</g>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Course <span class="badge bg-success rounded-pill ms-1">Hot</span></span>
<p class="navbar-dropdown-menu-media-desc">根据你的时间表学习。 一个在线学习和教学演示网站。</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.34717 16C7.2426 16 6.34717 16.8954 6.34717 18V38C6.34717 39.1046 7.2426 40 8.34717 40H39.653C40.7576 40 41.653 39.1046 41.653 38V18C41.653 16.8954 40.7576 16 39.653 16H8.34717ZM20.5 20C20.2238 20 20 20.2239 20 20.5V23.5C20 23.7761 20.2238 24 20.5 24H27.5C27.7761 24 28 23.7761 28 23.5V20.5C28 20.2239 27.7761 20 27.5 20H20.5Z" fill="#000000"/>
<path opacity="0.3" d="M20 16H16V14C16 10.6863 18.6863 8 22 8H26C29.3137 8 32 10.6863 32 14V16H28V14C28 12.8954 27.1046 12 26 12H22C20.8954 12 20 12.8954 20 14V16Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">电子商务</span>
<p class="navbar-dropdown-menu-media-desc">电子商务网站案例，选择一个网上商店 &让您的业务立刻上线！</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" d="M8.24219 9C8.24219 8.44772 8.6899 8 9.24219 8H38.7579C39.3102 8 39.7579 8.44772 39.7579 9V40C39.7579 41.1046 38.8625 42 37.7579 42H10.2422C9.13762 42 8.24219 41.1046 8.24219 40V9Z" fill="#000000"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 14H18C18 17.3137 20.6863 20 24 20C27.3137 20 30 17.3137 30 14H34C34 19.5228 29.5228 24 24 24C18.4772 24 14 19.5228 14 14Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">App Marketplace</span>
<p class="navbar-dropdown-menu-media-desc">查找应用程序，并与流行应用程序无缝集成。</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
</div>
<!-- End Promo -->
<!-- Promo -->
<div class="navbar-dropdown-menu-promo">
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.1921 37.1421C45.5077 37.4577 46.0472 37.2331 46.0456 36.7868L46.0079 26.2105V11.0526C46.0079 8.26214 43.7458 6 40.9553 6H17.3764C14.5859 6 12.3237 8.26214 12.3237 11.0526V18H29C30.6569 18 32 19.3431 32 21V31.2632H39.3131L45.1921 37.1421Z" fill="#000000"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M3.97021 36V26C3.97021 23.7909 5.76108 22 7.97021 22H23.9702C26.1794 22 27.9702 23.7909 27.9702 26V36C27.9702 38.2091 26.1794 40 23.9702 40H8.20168L4.86824 43.1905C4.55024 43.4949 4.02252 43.2695 4.02252 42.8293V36.6485C3.98811 36.4374 3.97021 36.2208 3.97021 36ZM12.0001 28.5C12.0001 28.2239 12.2239 28 12.5001 28H23.5001C23.7762 28 24.0001 28.2239 24.0001 28.5V29.5C24.0001 29.7761 23.7762 30 23.5001 30H12.5001C12.2239 30 12.0001 29.7761 12.0001 29.5V28.5ZM18.5001 32C18.2239 32 18.0001 32.2239 18.0001 32.5V33.5C18.0001 33.7761 18.2239 34 18.5001 34H23.5001C23.7762 34 24.0001 33.7761 24.0001 33.5V32.5C24.0001 32.2239 23.7762 32 23.5001 32H18.5001Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Help Desk</span>
<p class="navbar-dropdown-menu-media-desc">一个客户服务演示网站，帮助您平衡客户需求。</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
<!-- Promo Link -->
<a class="navbar-dropdown-menu-promo-link" href="https://www.52abp.com/contactus" target="_blank">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M24 34C32.8366 34 40 26.8366 40 18C40 9.16344 32.8366 2 24 2C15.1634 2 8 9.16344 8 18C8 26.8366 15.1634 34 24 34Z" fill="#000000"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M13.0764 18L21.1361 38.7249L23.952 37.6298L26.7491 38.7349L34.9406 18H13.0764ZM18.9238 22H29.0596L23.9518 34.9291L18.9238 22Z" fill="#000000"/>
<path opacity="0.3" d="M20 44H28V46C28 47.1046 27.1046 48 26 48H22C20.8954 48 20 47.1046 20 46V44Z" fill="#000000"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 34C16 32.8954 16.8954 32 18 32H30C31.1046 32 32 32.8954 32 34C32 35.1046 31.1046 36 30 36C31.1046 36 32 36.8954 32 38C32 39.1046 31.1046 40 30 40C31.1046 40 32 40.8954 32 42C32 43.1046 31.1046 44 30 44H18C16.8954 44 16 43.1046 16 42C16 40.8954 16.8954 40 18 40C16.8954 40 16 39.1046 16 38C16 36.8954 16.8954 36 18 36C16.8954 36 16 35.1046 16 34Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">New demo ideas</span>
<p class="navbar-dropdown-menu-media-desc">把你的建议发给我们</p>
</div>
</div>
</a>
<!-- End Promo Link -->
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-dropdown-menu-promo-item">
</div>
<!-- End Promo Item -->
</div>
<!-- End Promo -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Demos -->
<!-- Docs -->
<li class="hs-has-mega-menu nav-item"
data-hs-mega-menu-item-options='{
"desktop": {
"maxWidth": "20rem"
}
}'>
<a id="docsMegaMenu" class="hs-mega-menu-invoker nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Docs</a>
<!-- Mega Menu -->
<div class="hs-mega-menu hs-position-right dropdown-menu" aria-labelledby="docsMegaMenu" style="min-width: 20rem;">
<!-- Link -->
<a class="navbar-dropdown-menu-media-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 37.2379C26 37.6013 26.3781 37.8364 26.7161 37.7028C28.725 36.9087 34.8407 34.7498 43.5349 34.0366C43.7956 34.0152 44 33.8124 44 33.5508C44 30.5596 44 13.5944 44 10.4884C44 10.2122 43.7817 10.0015 43.5057 10.0107C41.532 10.076 33.9512 10.542 26.2985 13.8688C26.1173 13.9476 26 14.1221 26 14.3197C26 16.8386 26 33.4617 26 37.2379Z" fill="#000000"/>
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M22 37.2379C22 37.6013 21.6219 37.8364 21.2839 37.7028C19.275 36.9087 13.1593 34.7498 4.46513 34.0366C4.20441 34.0152 3.99997 33.8124 3.99997 33.5508C3.99997 30.5596 3.99997 13.5944 3.99997 10.4884C3.99997 10.2122 4.21827 10.0015 4.49426 10.0107C6.46804 10.076 14.0488 10.542 21.7015 13.8688C21.8827 13.9476 22 14.1221 22 14.3197C22 16.8386 22 33.4617 22 37.2379Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Documentation <span class="badge bg-primary rounded-pill ms-1">v4.0</span></span>
<p class="navbar-dropdown-menu-media-desc">项目开发文档，无论是从空项目开始还是二次开发，更好的指引您完成项目的开发</p>
</div>
</div>
</a>
<!-- End Link -->
<div class="dropdown-divider"></div>
<!-- Link -->
<a class="navbar-dropdown-menu-media-link" href="#">
<div class="d-flex">
<div class="flex-shrink-0">
<span class="svg-icon svg-icon-sm text-primary">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M16 7C16 5.34315 17.3431 4 19 4H25C26.6569 4 28 5.34315 28 7V12H36C37.1046 12 38 12.8954 38 14V22H43C44.6569 22 46 23.3431 46 25V31C46 32.6569 44.6569 34 43 34H38V42C38 43.1046 37.1046 44 36 44H8C6.89543 44 6 43.1046 6 42V34H13C14.6569 34 16 32.6569 16 31V25C16 23.3431 14.6569 22 13 22H6V14C6 12.8954 6.89543 12 8 12H16V7Z" fill="#000000"/>
</svg>
</span>
</div>
<div class="flex-grow-1 ms-3">
<span class="navbar-dropdown-menu-media-title">Snippets</span>
<p class="navbar-dropdown-menu-media-desc">快速复制你需要的代码段到你的项目中</p>
</div>
</div>
</a>
<!-- End Link -->
</div>
<!-- End Mega Menu -->
</li>
<!-- End Docs -->
</ul>
</div>
</nav>
</div>
<!-- End Topbar -->
<div class="container">
<nav class="navbar-nav-wrap">
<!-- Default Logo -->
<a class="navbar-brand" href="#" aria-label="Front">
<img class="navbar-brand-logo" src="../assets/svg/logos/logo.svg" alt="Logo">
</a>
<!-- End Default Logo -->
<!-- Toggler -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-default">
<i class="bi-list"></i>
</span>
<span class="navbar-toggler-toggled">
<i class="bi-x"></i>
</span>
</button>
<!-- End Toggler -->
<!-- Collapse -->
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " href="#">Help Page</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Listing</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Article Overview</a>
</li>
<li class="nav-item">
<button class="btn btn-primary btn-transition" type="button" data-bs-toggle="modal" data-bs-target="#loginModal">Log in</button>
</li>
</ul>
</div>
<!-- End Collapse -->
</nav>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Log In -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<!-- Header -->
<div class="modal-close">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="modal-body">
<!-- Log in -->
<div id="loginModalFormLogin">
<!-- Heading -->
<div class="text-center mb-7">
<h3 class="modal-title">Log in to Front</h3>
<p>Login to manage your account</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormLoginEmail">你的邮箱</label>
<input type="email" class="form-control" name="email" id="loginModalFormLoginEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">请输入有效的电子邮件地址.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="loginModalFormLoginPassword">Password</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormResetPassword",
"groupName": "idForm"
}'>Forgot Password?</a>
</div>
<input type="password" class="form-control form-control-lg" name="password" id="loginModalFormLoginPassword" placeholder="请输入至少8个字符以上的内容" aria-label="请输入至少8个字符以上的内容" required minlength="8">
<span class="invalid-feedback">请输入有效的密码.</span>
</div>
<!-- End Form -->
<div class="d-grid gap-3 text-center">
<button type="submit" class="btn btn-primary btn-lg">Log in</button>
<span class="divider-center">OR</span>
<button type="submit" class="btn btn-ghost-secondary">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="图片描述内容">
Google登录
</span>
</button>
<p>Don't have an account yet?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormSignup",
"groupName": "idForm"
}'>Sign up</a>
</p>
</div>
</form>
</div>
<!-- End Log in -->
<!-- Log in -->
<div id="loginModalFormSignup" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h3 class="modal-title">Sign up</h3>
<p>Fill out the form to get started</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormSignupEmail">你的邮箱</label>
<input type="email" class="form-control form-control-lg" name="email" id="loginModalFormSignupEmail" placeholder="email@site.com" aria-label="email@site.com" required>
<span class="invalid-feedback">请输入有效的电子邮件地址.</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3">
<label class="form-label" for="loginModalFormSignupPassword">Password</label>
<input type="password" class="form-control form-control-lg" name="password" id="loginModalFormSignupPassword" placeholder="请输入至少8个字符以上的内容" aria-label="请输入至少8个字符以上的内容" required>
<span class="invalid-feedback">您的密码无效。请再试一次。</span>
</div>
<!-- End Form -->
<!-- Form -->
<div class="mb-3" data-hs-validation-validate-class>
<label class="form-label" for="loginModalFormSignupConfirmPassword">确认密码</label>
<input type="password" class="form-control form-control-lg" name="confirmPassword" id="loginModalFormSignupConfirmPassword" placeholder="请输入至少8个字符以上的内容" aria-label="请输入至少8个字符以上的内容" required
data-hs-validation-equal-field="#loginModalFormSignupPassword">
<span class="invalid-feedback">Password does not match the confirm password.</span>
</div>
<!-- End Form -->
<div class="text-center mb-3">
<p class="small mb-0">By continuing you agree to our <a href="#">Terms and Conditions</a></p>
</div>
<div class="d-grid gap-3 text-center">
<button type="submit" class="btn btn-primary btn-lg">Sign up</button>
<span class="divider-center">OR</span>
<button type="submit" class="btn btn-ghost-secondary">
<span class="d-flex justify-content-center align-items-center">
<img class="avatar avatar-xss me-2" src="../assets/svg/brands/google-icon.svg" alt="图片描述内容">
谷歌注册
</span>
</button>
<p>已经有账户了?
<a class="js-animation-link link" href="javascript:;" role="button"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormLogin",
"groupName": "idForm"
}'>Log in</a>
</p>
</div>
</form>
</div>
<!-- End Log in -->
<!-- Reset Password -->
<div id="loginModalFormResetPassword" style="display: none; opacity: 0;">
<!-- Heading -->
<div class="text-center mb-7">
<h3 class="modal-title">忘记密码</h3>
<p>Instructions will be sent to you</p>
</div>
<!-- End Heading -->
<form class="js-validate needs-validation" novalidate>
<!-- Form -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<label class="form-label" for="signupModalFormResetPasswordEmail" tabindex="0">你的邮箱</label>
<a class="js-animation-link form-label-link" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#loginModalFormLogin",
"groupName": "idForm"
}'>
<i class="bi-chevron-left small"></i> 返回登录页面
</a>
</div>
<input type="email" class="form-control form-control-lg" name="email" id="signupModalFormResetPasswordEmail" tabindex="1" placeholder="输入您的电子邮件地址" aria-label="输入您的电子邮件地址" required>
<span class="invalid-feedback">请输入有效的电子邮件地址.</span>
</div>
<!-- End Form -->
<div class="d-grid gap-3 text-center">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</form>
</div>
<!-- End Reset Password -->
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
<!-- JS Implementing Plugins -->
<script src="../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
<script src="../assets/vendor/hs-show-animation/dist/hs-show-animation.min.js"></script>
<!-- JS Front -->
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF MEGA MENU
// =======================================================
new HSMegaMenu('.js-mega-menu', {
desktop: {
position: 'left'
}
})
// INITIALIZATION OF SHOW ANIMATIONS
// =======================================================
new HSShowAnimation('.js-animation-link')
// INITIALIZATION OF BOOTSTRAP VALIDATION
// =======================================================
HSBsValidation.init('.js-validate', {
onSubmit: data => {
data.event.preventDefault()
alert('Submited')
}
})
})()
</script>