shenzx
/
claude-badminton


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396
							<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f5f7fa;
            min-height: 100vh;
        }

        /* 布局 */
        .app-container {
            display: flex;
            min-height: 100vh;
        }

        /* 侧边栏 */
        .sidebar {
            width: 220px;
            background: linear-gradient(180deg, #1e3a5f 0%, #2c5282 100%);
            color: #fff;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            z-index: 100;
        }

        .logo {
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: bold;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            background: rgba(0,0,0,0.2);
        }

        .logo-icon {
            font-size: 24px;
            margin-right: 8px;
        }

        .menu {
            padding: 10px 0;
        }

        .menu-item {
            padding: 12px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: all 0.3s;
            color: rgba(255,255,255,0.8);
        }

        .menu-item:hover {
            background: rgba(255,255,255,0.1);
            color: #fff;
        }

        .menu-item.active {
            background: rgba(64, 158, 255, 0.3);
            color: #fff;
            border-right: 3px solid #409eff;
        }

        .menu-icon {
            margin-right: 10px;
            font-size: 18px;
        }

        .menu-item span {
            font-size: 14px;
        }

        /* 主内容区 */
        .main-content {
            flex: 1;
            margin-left: 220px;
            min-height: 100vh;
        }

        /* 顶部导航 */
        .header {
            height: 60px;
            background: #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            position: sticky;
            top: 0;
            z-index: 50;
        }

        .breadcrumb {
            font-size: 14px;
            color: #909399;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }

        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: #409eff;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .user-name {
            font-size: 14px;
            color: #303133;
        }

        /* 页面内容 */
        .page-content {
            padding: 20px;
        }

        .page {
            display: none;
        }

        .page.active {
            display: block;
        }

        /* 卡片 */
        .card {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }

        .card-header {
            padding: 16px 20px;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-title {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
        }

        .card-body {
            padding: 20px;
        }

        /* 统计卡片 */
        .stat-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }

        .stat-card {
            background: #fff;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 1px 4px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
        }

        .stat-icon {
            width: 56px;
            height: 56px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-right: 16px;
        }

        .stat-icon.blue { background: #e6f4ff; color: #409eff; }
        .stat-icon.green { background: #e6ffed; color: #52c41a; }
        .stat-icon.orange { background: #fff7e6; color: #fa8c16; }
        .stat-icon.purple { background: #f9f0ff; color: #722ed1; }

        .stat-info h3 {
            font-size: 28px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 4px;
        }

        .stat-info p {
            font-size: 14px;
            color: #909399;
        }

        /* 按钮 */
        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .btn-primary {
            background: #409eff;
            color: #fff;
        }

        .btn-primary:hover {
            background: #66b1ff;
        }

        .btn-success {
            background: #52c41a;
            color: #fff;
        }

        .btn-success:hover {
            background: #73d13d;
        }

        .btn-warning {
            background: #faad14;
            color: #fff;
        }

        .btn-danger {
            background: #f56c6c;
            color: #fff;
        }

        .btn-default {
            background: #fff;
            border: 1px solid #dcdfe6;
            color: #606266;
        }

        .btn-default:hover {
            border-color: #c6e2ff;
            color: #409eff;
        }

        .btn-large {
            padding: 12px 32px;
            font-size: 16px;
        }

        /* 表单 */
        .form-group {
            margin-bottom: 16px;
        }

        .form-label {
            display: block;
            font-size: 14px;
            color: #606266;
            margin-bottom: 8px;
        }

        .form-input {
            width: 100%;
            height: 36px;
            padding: 0 12px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
            transition: border-color 0.3s;
        }

        .form-input:focus {
            border-color: #409eff;
            outline: none;
        }

        .form-select {
            width: 100%;
            height: 36px;
            padding: 0 12px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            font-size: 14px;
            background: #fff;
        }

        /* 表格 */
        .table-container {
            overflow-x: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 16px;
            text-align: left;
            border-bottom: 1px solid #ebeef5;
            font-size: 14px;
        }

        th {
            background: #fafafa;
            color: #909399;
            font-weight: 500;
        }

        tr:hover {
            background: #f5f7fa;
        }

        /* 标签 */
        .tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .tag-success { background: #e6ffed; color: #52c41a; }
        .tag-warning { background: #fff7e6; color: #fa8c16; }
        .tag-danger { background: #ffe6e6; color: #f56c6c; }
        .tag-info { background: #f4f4f5; color: #909399; }

        /* 签到按钮 */
        .checkin-area {
            text-align: center;
            padding: 60px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            color: #fff;
            margin-bottom: 24px;
        }

        .checkin-btn {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: #fff;
            color: #667eea;
            font-size: 20px;
            font-weight: bold;
            border: none;
            cursor: pointer;
            box-shadow: 0 8px 32px rgba(0,0,0,0.2);
            transition: all 0.3s;
            margin: 20px auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .checkin-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 12px 40px rgba(0,0,0,0.3);
        }

        .checkin-btn.checked {
            background: #52c41a;
            color: #fff;
            cursor: default;
        }

        .checkin-btn i {
            font-size: 48px;
            margin-bottom: 8px;
        }

        .checkin-time {
            font-size: 14px;
            opacity: 0.9;
        }

        /* 签到列表 */
        .signin-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 16px;
        }

        .signin-card {
            background: #fff;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .signin-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: #409eff;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .signin-info {
            flex: 1;
        }

        .signin-name {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            margin-bottom: 4px;
        }

        .signin-time {
            font-size: 13px;
            color: #909399;
        }

        .signin-status {
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
        }

        /* Tab标签 */
        .tabs {
            display: flex;
            border-bottom: 1px solid #e4e7ed;
            margin-bottom: 20px;
        }

        .tab-item {
            padding: 12px 24px;
            cursor: pointer;
            color: #909399;
            font-size: 14px;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
        }

        .tab-item:hover {
            color: #409eff;
        }

        .tab-item.active {
            color: #409eff;
            border-bottom-color: #409eff;
        }

        /* 弹窗 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal.show {
            display: flex;
        }

        .modal-content {
            background: #fff;
            border-radius: 8px;
            width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            animation: modalSlideIn 0.3s;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-header {
            padding: 16px 20px;
            border-bottom: 1px solid #e4e7ed;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 500;
        }

        .modal-close {
            font-size: 20px;
            cursor: pointer;
            color: #909399;
        }

        .modal-body {
            padding: 20px;
        }

        .modal-footer {
            padding: 16px 20px;
            border-top: 1px solid #e4e7ed;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

        /* 进度条 */
        .progress {
            height: 8px;
            background: #e4e7ed;
            border-radius: 4px;
            overflow: hidden;
        }

        .progress-bar {
            height: 100%;
            background: #409eff;
            border-radius: 4px;
            transition: width 0.3s;
        }

        /* 步骤条 */
        .steps {
            display: flex;
            justify-content: space-between;
            margin-bottom: 40px;
        }

        .step {
            flex: 1;
            text-align: center;
            position: relative;
        }

        .step:not(:last-child)::after {
            content: '';
            position: absolute;
            top: 20px;
            left: 50%;
            width: 100%;
            height: 2px;
            background: #e4e7ed;
        }

        .step:not(:last-child).done::after {
            background: #52c41a;
        }

        .step-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e4e7ed;
            color: #909399;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            position: relative;
            z-index: 1;
        }

        .step.active .step-icon {
            background: #409eff;
            color: #fff;
        }

        .step.done .step-icon {
            background: #52c41a;
            color: #fff;
        }

        .step-label {
            font-size: 14px;
            color: #909399;
        }

        .step.active .step-label {
            color: #409eff;
        }

        /* 筛选表单 */
        .filter-form {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }

        .filter-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 时间线 */
        .timeline {
            padding-left: 20px;
        }

        .timeline-item {
            position: relative;
            padding-bottom: 20px;
        }

        .timeline-item::before {
            content: '';
            position: absolute;
            left: -20px;
            top: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #409eff;
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            left: -16px;
            top: 14px;
            width: 2px;
            height: calc(100% - 8px);
            background: #e4e7ed;
        }

        .timeline-item:last-child::after {
            display: none;
        }

        .timeline-time {
            font-size: 12px;
            color: #909399;
            margin-bottom: 4px;
        }

        .timeline-content {
            font-size: 14px;
            color: #303133;
        }

        /* 搜索框 */
        .search-box {
            position: relative;
            width: 280px;
        }

        .search-input {
            width: 100%;
            height: 36px;
            padding: 0 36px 0 12px;
            border: 1px solid #dcdfe6;
            border-radius: 18px;
            font-size: 14px;
        }

        .search-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #909399;
        }

        /* 用户头像组 */
        .avatar-group {
            display: flex;
        }

        .avatar-group .avatar {
            margin-left: -8px;
            border: 2px solid #fff;
        }

        .avatar-group .avatar:first-child {
            margin-left: 0;
        }

        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #909399;
        }

        .empty-state i {
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        /* 警告提示 */
        .alert {
            padding: 12px 16px;
            border-radius: 4px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .alert-warning {
            background: #fff7e6;
            border: 1px solid #ffd591;
            color: #d48806;
        }

        .alert-success {
            background: #e6ffed;
            border: 1px solid #b7eb8f;
            color: #52c41a;
        }

        .alert-danger {
            background: #ffe6e6;
            border: 1px solid #ffccc7;
            color: #f56c6c;
        }

        /* 价格显示 */
        .price {
            font-size: 20px;
            font-weight: 600;
            color: #f56c6c;
        }

        .price-unit {
            font-size: 14px;
            font-weight: normal;
            color: #909399;
        }

        /* 复选框 */
        .checkbox {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }

        .checkbox input {
            width: 16px;
            height: 16px;
        }

        /* 响应式 */
        @media (max-width: 1200px) {
            .stat-cards {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }

            .main-content {
                margin-left: 0;
            }

            .stat-cards {
                grid-template-columns: 1fr;
            }
        }

        /* 快捷操作区 */
        .quick-actions {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

        /* 库存预警 */
        .stock-warning {
            background: #fff7e6;
            border: 1px solid #ffd591;
            border-radius: 4px;
            padding: 12px 16px;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .stock-warning-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* 账单卡片 */
        .bill-card {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            margin-bottom: 16px;
        }

        .bill-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid #ebeef5;
        }

        .bill-user {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .bill-amount {
            text-align: right;
        }

        .bill-total {
            font-size: 24px;
            font-weight: 600;
            color: #f56c6c;
        }

        .bill-paid {
            font-size: 13px;
            color: #52c41a;
        }

        .bill-progress {
            margin-top: 12px;
        }

        /* 用户选择器 */
        .user-selector {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .user-option {
            width: 100px;
            text-align: center;
            padding: 12px 8px;
            border: 2px solid #e4e7ed;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .user-option:hover {
            border-color: #409eff;
        }

        .user-option.selected {
            border-color: #409eff;
            background: #e6f4ff;
        }

        .user-option .avatar {
            margin: 0 auto 8px;
        }

        /* 批次选择器 */
        .batch-selector {
            border: 1px solid #e4e7ed;
            border-radius: 8px;
            padding: 12px;
            background: #fafafa;
        }

        .batch-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            border-radius: 6px;
            margin-bottom: 8px;
            background: #fff;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }

        .batch-item:hover {
            border-color: #409eff;
        }

        .batch-item.selected {
            border-color: #409eff;
            background: #e6f4ff;
        }

        .batch-item:last-child {
            margin-bottom: 0;
        }

        .batch-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .batch-radio {
            width: 18px;
            height: 18px;
            border: 2px solid #dcdfe6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .batch-item.selected .batch-radio {
            border-color: #409eff;
            background: #409eff;
        }

        .batch-item.selected .batch-radio::after {
            content: '';
            width: 6px;
            height: 6px;
            background: #fff;
            border-radius: 50%;
        }

        .batch-name {
            font-weight: 500;
            color: #303133;
        }

        .batch-details {
            font-size: 12px;
            color: #909399;
        }

        .batch-stock {
            font-size: 14px;
            font-weight: 500;
            color: #52c41a;
        }

        .batch-stock.low {
            color: #fa8c16;
        }

        .cost-preview {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 8px;
            padding: 16px;
            color: #fff;
            margin-top: 16px;
        }

        .cost-preview h4 {
            font-size: 14px;
            margin-bottom: 12px;
            opacity: 0.9;
        }

        .cost-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-size: 14px;
        }

        .cost-total {
            font-size: 24px;
            font-weight: 600;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(255,255,255,0.2);
        }

        /* 批次标签 */
        .batch-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            background: #e6f4ff;
            color: #409eff;
            border-radius: 4px;
            font-size: 12px;
        }

        /* 多批次选择样式 */
        .batch-item.multi-batch {
            flex-wrap: wrap;
        }

        .batch-item.multi-batch .batch-info {
            flex: 1;
            min-width: 200px;
        }

        .batch-checkbox {
            width: 20px;
            height: 20px;
            border: 2px solid #dcdfe6;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-size: 14px;
            color: transparent;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .batch-item.multi-batch.selected .batch-checkbox {
            background: #409eff;
            border-color: #409eff;
            color: #fff;
        }

        .batch-item.multi-batch.selected {
            background: #e6f4ff;
            border-color: #409eff;
        }

        .batch-item.multi-batch input[type="number"] {
            border-color: #dcdfe6;
            background: #fff;
        }

        .batch-item.multi-batch.selected input[type="number"] {
            border-color: #409eff;
        }

        .batch-item.multi-batch input[type="number"]:focus {
            border-color: #409eff;
            outline: none;
        }

        /* 批次汇总样式 */
        .batch-summary-item {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px dashed #e4e7ed;
        }

        .batch-summary-item:last-child {
            border-bottom: none;
        }

        .batch-summary-name {
            color: #303133;
        }

        .batch-summary-qty {
            color: #606266;
        }

        .batch-summary-cost {
            color: #f56c6c;
            font-weight: 500;
        }

        .batch-summary-total {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 2px solid #409eff;
            font-weight: 600;
            color: #409eff;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="logo">
                <span class="logo-icon">🏸</span>
                <span>羽毛球管理</span>
            </div>
            <nav class="menu">
                <div class="menu-item active" onclick="showPage('signin')">
                    <span class="menu-icon">📝</span>
                    <span>签到</span>
                </div>
                <div class="menu-item" onclick="showPage('activity')">
                    <span class="menu-icon">📋</span>
                    <span>活动记录</span>
                </div>
                <div class="menu-item" onclick="showPage('procurement')">
                    <span class="menu-icon">🛒</span>
                    <span>采购管理</span>
                </div>
                <div class="menu-item" onclick="showPage('billing')">
                    <span class="menu-icon">💰</span>
                    <span>账单管理</span>
                </div>
                <div class="menu-item" onclick="showPage('statistics')">
                    <span class="menu-icon">📊</span>
                    <span>数据统计</span>
                </div>
                <div class="menu-item" onclick="showPage('stock')">
                    <span class="menu-icon">📦</span>
                    <span>库存管理</span>
                </div>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航 -->
            <header class="header">
                <div class="breadcrumb">
                    首页 / <span id="currentPage">签到</span>
                </div>
                <div class="header-right">
                    <span>🔔</span>
                    <div class="user-info">
                        <div class="avatar">管</div>
                        <span class="user-name">管理员</span>
                    </div>
                </div>
            </header>

            <div class="page-content">
                <!-- 签到页面 -->
                <div id="page-signin" class="page active">
                    <div class="stat-cards">
                        <div class="stat-card">
                            <div class="stat-icon blue">📅</div>
                            <div class="stat-info">
                                <h3>2024-01-15</h3>
                                <p>今日日期</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon green">✅</div>
                            <div class="stat-info">
                                <h3>12</h3>
                                <p>已签到人数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon orange">📊</div>
                            <div class="stat-info">
                                <h3>15</h3>
                                <p>报名人数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon purple">🏸</div>
                            <div class="stat-info">
                                <h3>6</h3>
                                <p>预计用球（个）</p>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">今日签到</span>
                            <button class="btn btn-primary" onclick="openModal('checkinModal')">+ 添加签到</button>
                        </div>
                        <div class="card-body">
                            <div class="checkin-area">
                                <p>周一例行活动 · 体育中心羽毛球馆</p>
                                <button class="checkin-btn" id="checkinBtn" onclick="doCheckin()">
                                    <span>📝</span>
                                    签到
                                </button>
                                <p class="checkin-time" id="checkinTime">点击上方按钮完成签到</p>
                            </div>

                            <h4 style="margin-bottom: 16px; color: #303133;">签到名单</h4>
                            <div class="signin-list" id="signinList">
                                <!-- 动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 活动记录页面 -->
                <div id="page-activity" class="page">
                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">活动记录</span>
                            <div style="display: flex; gap: 12px;">
                                <select class="form-select" style="width: 150px;">
                                    <option>全部状态</option>
                                    <option>已完成</option>
                                    <option>草稿</option>
                                </select>
                                <button class="btn btn-primary" onclick="openModal('activityModal')">+ 新建活动</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="filter-form">
                                <div class="filter-item">
                                    <label class="form-label">日期：</label>
                                    <input type="date" class="form-input" value="2024-01-15">
                                    <span>至</span>
                                    <input type="date" class="form-input" value="2024-01-15">
                                </div>
                                <div class="filter-item">
                                    <input type="text" class="form-input" placeholder="搜索活动标题..." style="width: 200px;">
                                </div>
                                <button class="btn btn-primary">查询</button>
                                <button class="btn btn-default">重置</button>
                            </div>

                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>活动日期</th>
                                            <th>活动标题</th>
                                            <th>场地</th>
                                            <th>参与人数</th>
                                            <th>羽毛球消耗</th>
                                            <th>总费用</th>
                                            <th>人均费用</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>2024-01-15</td>
                                            <td>周一例行活动</td>
                                            <td>体育中心羽毛球馆</td>
                                            <td>12人</td>
                                            <td>6个</td>
                                            <td><span class="price">¥240.00</span></td>
                                            <td>¥20.00</td>
                                            <td><span class="tag tag-success">已完成</span></td>
                                            <td>
                                                <button class="btn btn-default" style="padding: 4px 8px;">查看</button>
                                                <button class="btn btn-default" style="padding: 4px 8px;">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-13</td>
                                            <td>周六友谊赛</td>
                                            <td>社区活动中心</td>
                                            <td>8人</td>
                                            <td>4个</td>
                                            <td><span class="price">¥160.00</span></td>
                                            <td>¥20.00</td>
                                            <td><span class="tag tag-success">已完成</span></td>
                                            <td>
                                                <button class="btn btn-default" style="padding: 4px 8px;">查看</button>
                                                <button class="btn btn-default" style="padding: 4px 8px;">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-08</td>
                                            <td>周一例行活动</td>
                                            <td>体育中心羽毛球馆</td>
                                            <td>10人</td>
                                            <td>5个</td>
                                            <td><span class="price">¥200.00</span></td>
                                            <td>¥20.00</td>
                                            <td><span class="tag tag-success">已完成</span></td>
                                            <td>
                                                <button class="btn btn-default" style="padding: 4px 8px;">查看</button>
                                                <button class="btn btn-default" style="padding: 4px 8px;">编辑</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 采购管理页面 -->
                <div id="page-procurement" class="page">
                    <div class="stat-cards">
                        <div class="stat-card">
                            <div class="stat-icon blue">🛒</div>
                            <div class="stat-info">
                                <h3>8</h3>
                                <p>本月采购次数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon green">💵</div>
                            <div class="stat-info">
                                <h3>¥1,250</h3>
                                <p>本月采购金额</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon orange">📦</div>
                            <div class="stat-info">
                                <h3>240</h3>
                                <p>羽毛球库存</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon purple">⚠️</div>
                            <div class="stat-info">
                                <h3>2</h3>
                                <p>库存预警</p>
                            </div>
                        </div>
                    </div>

                    <div class="stock-warning">
                        <div class="stock-warning-item">
                            <span>⚠️</span>
                            <span>库存不足预警：</span>
                        </div>
                        <div class="stock-warning-item">
                            <span class="tag tag-danger">手胶 剩余15个</span>
                            <span class="tag tag-danger">运动饮料 剩余8瓶</span>
                        </div>
                        <button class="btn btn-warning">立即采购</button>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">采购记录</span>
                            <button class="btn btn-primary" onclick="openModal('procurementModal')">+ 新建采购</button>
                        </div>
                        <div class="card-body">
                            <div class="filter-form">
                                <select class="form-select" style="width: 150px;">
                                    <option>全部分类</option>
                                    <option>羽毛球</option>
                                    <option>球拍</option>
                                    <option>手胶</option>
                                    <option>饮料</option>
                                </select>
                                <input type="text" class="form-input" placeholder="搜索商品名称..." style="width: 200px;">
                                <button class="btn btn-primary">查询</button>
                            </div>

                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>采购日期</th>
                                            <th>批次号</th>
                                            <th>商品名称</th>
                                            <th>分类</th>
                                            <th>规格</th>
                                            <th>数量</th>
                                            <th>单价</th>
                                            <th>金额</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>2024-01-10</td>
                                            <td><span class="batch-tag">PC-20240110-001</span></td>
                                            <td>亚狮龙10号羽毛球</td>
                                            <td>羽毛球</td>
                                            <td>12个/筒</td>
                                            <td>10筒</td>
                                            <td>¥15.00</td>
                                            <td>¥150.00</td>
                                            <td><span class="tag tag-success">已入库</span></td>
                                            <td>
                                                <button class="btn btn-default" style="padding: 4px 8px;">查看</button>
                                                <button class="btn btn-default" style="padding: 4px 8px;">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-10</td>
                                            <td><span class="batch-tag">PC-20240110-002</span></td>
                                            <td>亚狮龙10号羽毛球</td>
                                            <td>羽毛球</td>
                                            <td>12个/筒</td>
                                            <td>5筒</td>
                                            <td>¥16.00</td>
                                            <td>¥80.00</td>
                                            <td><span class="tag tag-success">已入库</span></td>
                                            <td>
                                                <button class="btn btn-default" style="padding: 4px 8px;">查看</button>
                                                <button class="btn btn-default" style="padding: 4px 8px;">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-05</td>
                                            <td><span class="batch-tag">PC-20240105-001</span></td>
                                            <td>尤尼克斯手胶</td>
                                            <td>手胶</td>
                                            <td>30个/包</td>
                                            <td>2包</td>
                                            <td>¥45.00</td>
                                            <td>¥90.00</td>
                                            <td><span class="tag tag-success">已入库</span></td>
                                            <td>
                                                <button class="btn btn-default" style="padding: 4px 8px;">查看</button>
                                                <button class="btn btn-default" style="padding: 4px 8px;">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2024-01-02</td>
                                            <td><span class="batch-tag">PC-20240102-001</span></td>
                                            <td>红牛运动饮料</td>
                                            <td>饮料</td>
                                            <td>24罐/箱</td>
                                            <td>1箱</td>
                                            <td>¥68.00</td>
                                            <td>¥68.00</td>
                                            <td><span class="tag tag-warning">未入库</span></td>
                                            <td>
                                                <button class="btn btn-default" style="padding: 4px 8px;">查看</button>
                                                <button class="btn btn-success" style="padding: 4px 8px;">入库</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 账单管理页面 -->
                <div id="page-billing" class="page">
                    <div class="stat-cards">
                        <div class="stat-card">
                            <div class="stat-icon blue">📄</div>
                            <div class="stat-info">
                                <h3>15</h3>
                                <p>本月账单数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon green">💰</div>
                            <div class="stat-info">
                                <h3>¥5,250</h3>
                                <p>账单总金额</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon orange">✅</div>
                            <div class="stat-info">
                                <h3>¥3,800</h3>
                                <p>已付金额</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon purple">⏳</div>
                            <div class="stat-info">
                                <h3>¥1,450</h3>
                                <p>待付金额</p>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">账单管理 - 2024年1月</span>
                            <button class="btn btn-primary" onclick="openModal('billModal')">生成账单</button>
                        </div>
                        <div class="card-body">
                            <div class="bill-card">
                                <div class="bill-header">
                                    <div class="bill-user">
                                        <div class="avatar" style="width: 48px; height: 48px; font-size: 18px;">张</div>
                                        <div>
                                            <div style="font-weight: 500; font-size: 16px;">张三</div>
                                            <div style="color: #909399; font-size: 13px;">参与8次活动</div>
                                        </div>
                                    </div>
                                    <div class="bill-amount">
                                        <div class="bill-total">¥280.00</div>
                                        <div class="bill-paid">已付 ¥200.00</div>
                                    </div>
                                </div>
                                <div class="bill-progress">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                        <span style="font-size: 13px; color: #909399;">付款进度</span>
                                        <span style="font-size: 13px; color: #52c41a;">71%</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar" style="width: 71%; background: #52c41a;"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="bill-card">
                                <div class="bill-header">
                                    <div class="bill-user">
                                        <div class="avatar" style="width: 48px; height: 48px; font-size: 18px; background: #52c41a;">李</div>
                                        <div>
                                            <div style="font-weight: 500; font-size: 16px;">李四</div>
                                            <div style="color: #909399; font-size: 13px;">参与6次活动</div>
                                        </div>
                                    </div>
                                    <div class="bill-amount">
                                        <div class="bill-total">¥210.00</div>
                                        <div class="bill-paid">已付 ¥210.00</div>
                                    </div>
                                </div>
                                <div class="bill-progress">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                        <span style="font-size: 13px; color: #909399;">付款进度</span>
                                        <span style="font-size: 13px; color: #52c41a;">100%</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar" style="width: 100%; background: #52c41a;"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="bill-card">
                                <div class="bill-header">
                                    <div class="bill-user">
                                        <div class="avatar" style="width: 48px; height: 48px; font-size: 18px; background: #fa8c16;">王</div>
                                        <div>
                                            <div style="font-weight: 500; font-size: 16px;">王五</div>
                                            <div style="color: #909399; font-size: 13px;">参与5次活动</div>
                                        </div>
                                    </div>
                                    <div class="bill-amount">
                                        <div class="bill-total">¥175.00</div>
                                        <div class="bill-paid">已付 ¥0.00</div>
                                    </div>
                                </div>
                                <div class="bill-progress">
                                    <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                                        <span style="font-size: 13px; color: #909399;">付款进度</span>
                                        <span style="font-size: 13px; color: #f56c6c;">0%</span>
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar" style="width: 0%; background: #f56c6c;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 数据统计页面 -->
                <div id="page-statistics" class="page">
                    <div class="stat-cards">
                        <div class="stat-card">
                            <div class="stat-icon blue">📝</div>
                            <div class="stat-info">
                                <h3>25</h3>
                                <p>本月签到次数</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon green">🏸</div>
                            <div class="stat-info">
                                <h3>18</h3>
                                <p>本月活动场次</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon orange">📦</div>
                            <div class="stat-info">
                                <h3>96</h3>
                                <p>羽毛球消耗（个）</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon purple">💰</div>
                            <div class="stat-info">
                                <h3>¥5,250</h3>
                                <p>本月总支出</p>
                            </div>
                        </div>
                    </div>

                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px;">
                        <div class="card">
                            <div class="card-header">
                                <span class="card-title">月度活动趋势</span>
                            </div>
                            <div class="card-body">
                                <div style="height: 250px; display: flex; align-items: flex-end; justify-content: space-around; padding: 20px;">
                                    <div style="text-align: center;">
                                        <div style="width: 40px; height: 120px; background: linear-gradient(180deg, #409eff 0%, #66b1ff 100%); border-radius: 4px 4px 0 0; margin: 0 auto 8px;"></div>
                                        <div style="font-size: 12px; color: #909399;">8月</div>
                                    </div>
                                    <div style="text-align: center;">
                                        <div style="width: 40px; height: 140px; background: linear-gradient(180deg, #409eff 0%, #66b1ff 100%); border-radius: 4px 4px 0 0; margin: 0 auto 8px;"></div>
                                        <div style="font-size: 12px; color: #909399;">9月</div>
                                    </div>
                                    <div style="text-align: center;">
                                        <div style="width: 40px; height: 100px; background: linear-gradient(180deg, #409eff 0%, #66b1ff 100%); border-radius: 4px 4px 0 0; margin: 0 auto 8px;"></div>
                                        <div style="font-size: 12px; color: #909399;">10月</div>
                                    </div>
                                    <div style="text-align: center;">
                                        <div style="width: 40px; height: 160px; background: linear-gradient(180deg, #409eff 0%, #66b1ff 100%); border-radius: 4px 4px 0 0; margin: 0 auto 8px;"></div>
                                        <div style="font-size: 12px; color: #909399;">11月</div>
                                    </div>
                                    <div style="text-align: center;">
                                        <div style="width: 40px; height: 180px; background: linear-gradient(180deg, #409eff 0%, #66b1ff 100%); border-radius: 4px 4px 0 0; margin: 0 auto 8px;"></div>
                                        <div style="font-size: 12px; color: #909399;">12月</div>
                                    </div>
                                    <div style="text-align: center;">
                                        <div style="width: 40px; height: 150px; background: linear-gradient(180deg, #409eff 0%, #66b1ff 100%); border-radius: 4px 4px 0 0; margin: 0 auto 8px;"></div>
                                        <div style="font-size: 12px; color: #909399;">1月</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <span class="card-title">消耗占比</span>
                            </div>
                            <div class="card-body">
                                <div style="height: 250px; display: flex; align-items: center; justify-content: center;">
                                    <div style="width: 180px; height: 180px; border-radius: 50%; background: conic-gradient(#409eff 0deg 200deg, #52c41a 200deg 290deg, #fa8c16 290deg 340deg, #722ed1 340deg 360deg); position: relative;">
                                        <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column;">
                                            <span style="font-size: 20px; font-weight: 600; color: #303133;">¥5,250</span>
                                            <span style="font-size: 12px; color: #909399;">总支出</span>
                                        </div>
                                    </div>
                                </div>
                                <div style="display: flex; justify-content: center; gap: 20px; margin-top: 16px;">
                                    <div style="display: flex; align-items: center; gap: 6px;">
                                        <span style="width: 12px; height: 12px; background: #409eff; border-radius: 2px;"></span>
                                        <span style="font-size: 13px;">羽毛球 56%</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 6px;">
                                        <span style="width: 12px; height: 12px; background: #52c41a; border-radius: 2px;"></span>
                                        <span style="font-size: 13px;">场地 25%</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 6px;">
                                        <span style="width: 12px; height: 12px; background: #fa8c16; border-radius: 2px;"></span>
                                        <span style="font-size: 13px;">饮料 14%</span>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 6px;">
                                        <span style="width: 12px; height: 12px; background: #722ed1; border-radius: 2px;"></span>
                                        <span style="font-size: 13px;">其他 5%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">活动排行榜</span>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>排名</th>
                                            <th>用户</th>
                                            <th>参与次数</th>
                                            <th>签到率</th>
                                            <th>累计消费</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>🥇 1</td>
                                            <td>张三</td>
                                            <td>15次</td>
                                            <td>95%</td>
                                            <td>¥525.00</td>
                                        </tr>
                                        <tr>
                                            <td>🥈 2</td>
                                            <td>李四</td>
                                            <td>12次</td>
                                            <td>90%</td>
                                            <td>¥420.00</td>
                                        </tr>
                                        <tr>
                                            <td>🥉 3</td>
                                            <td>王五</td>
                                            <td>10次</td>
                                            <td>85%</td>
                                            <td>¥350.00</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>赵六</td>
                                            <td>8次</td>
                                            <td>80%</td>
                                            <td>¥280.00</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>钱七</td>
                                            <td>6次</td>
                                            <td>75%</td>
                                            <td>¥210.00</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 库存管理页面 -->
                <div id="page-stock" class="page">
                    <div class="stat-cards">
                        <div class="stat-card">
                            <div class="stat-icon blue">📦</div>
                            <div class="stat-info">
                                <h3>8</h3>
                                <p>耗材种类</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon green">🎯</div>
                            <div class="stat-info">
                                <h3>485</h3>
                                <p>总库存数量</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon orange">💵</div>
                            <div class="stat-info">
                                <h3>¥4,200</h3>
                                <p>库存价值</p>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon purple">⚠️</div>
                            <div class="stat-info">
                                <h3>2</h3>
                                <p>需要补货</p>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <span class="card-title">库存列表</span>
                            <button class="btn btn-primary">导出库存</button>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>商品名称</th>
                                            <th>分类</th>
                                            <th>当前库存</th>
                                            <th>单位</th>
                                            <th>平均单价</th>
                                            <th>库存价值</th>
                                            <th>最近采购</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>亚狮龙10号羽毛球</td>
                                            <td>羽毛球</td>
                                            <td style="color: #52c41a; font-weight: 500;">240</td>
                                            <td>个</td>
                                            <td>¥15.00</td>
                                            <td>¥3,600.00</td>
                                            <td>2024-01-10</td>
                                            <td><span class="tag tag-success">充足</span></td>
                                            <td>
                                                <button class="btn btn-default" style="padding: 4px 8px;">采购</button>
                                                <button class="btn btn-default" style="padding: 4px 8px;">调整</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>尤尼克斯手胶</td>
                                            <td>手胶</td>
                                            <td style="color: #f56c6c; font-weight: 500;">15</td>
                                            <td>个</td>
                                            <td>¥1.50</td>
                                            <td>¥22.50</td>
                                            <td>2024-01-05</td>
                                            <td><span class="tag tag-danger">不足</span></td>
                                            <td>
                                                <button class="btn btn-warning" style="padding: 4px 8px;">采购</button>
                                                <button class="btn btn-default" style="padding: 4px 8px;">调整</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>红牛运动饮料</td>
                                            <td>饮料</td>
                                            <td style="color: #f56c6c; font-weight: 500;">8</td>
                                            <td>瓶</td>
                                            <td>¥5.67</td>
                                            <td>¥45.36</td>
                                            <td>2024-01-02</td>
                                            <td><span class="tag tag-danger">不足</span></td>
                                            <td>
                                                <button class="btn btn-warning" style="padding: 4px 8px;">采购</button>
                                                <button class="btn btn-default" style="padding: 4px 8px;">调整</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>场地费</td>
                                            <td>场地</td>
                                            <td>-</td>
                                            <td>次</td>
                                            <td>¥150.00</td>
                                            <td>-</td>
                                            <td>2024-01-15</td>
                                            <td><span class="tag tag-info">-</span></td>
                                            <td>
                                                <button class="btn btn-default" style="padding: 4px 8px;">查看</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 弹窗 -->
    <!-- 签到弹窗 -->
    <div id="checkinModal" class="modal">
        <div class="modal-content" style="width: 400px;">
            <div class="modal-header">
                <span class="modal-title">添加签到</span>
                <span class="modal-close" onclick="closeModal('checkinModal')">&times;</span>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">选择用户</label>
                    <select class="form-select">
                        <option>请选择用户</option>
                        <option>张三</option>
                        <option>李四</option>
                        <option>王五</option>
                        <option>赵六</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label">备注</label>
                    <textarea class="form-input" rows="3" placeholder="可选"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal('checkinModal')">取消</button>
                <button class="btn btn-primary">确认签到</button>
            </div>
        </div>
    </div>

    <!-- 活动弹窗 -->
    <div id="activityModal" class="modal">
        <div class="modal-content" style="width: 800px;">
            <div class="modal-header">
                <span class="modal-title">新建活动</span>
                <span class="modal-close" onclick="closeModal('activityModal')">&times;</span>
            </div>
            <div class="modal-body">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <div class="form-group">
                            <label class="form-label">活动日期 <span style="color: #f56c6c;">*</span></label>
                            <input type="date" class="form-input" value="2024-01-15">
                        </div>
                        <div class="form-group">
                            <label class="form-label">活动标题 <span style="color: #f56c6c;">*</span></label>
                            <input type="text" class="form-input" placeholder="请输入活动标题">
                        </div>
                        <div class="form-group">
                            <label class="form-label">场地</label>
                            <input type="text" class="form-input" placeholder="请输入场地">
                        </div>
                        <div class="form-group">
                            <label class="form-label">天气</label>
                            <select class="form-select">
                                <option>晴</option>
                                <option>阴</option>
                                <option>多云</option>
                                <option>小雨</option>
                            </select>
                        </div>
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                            <div class="form-group">
                                <label class="form-label">开始时间</label>
                                <input type="time" class="form-input" value="19:00">
                            </div>
                            <div class="form-group">
                                <label class="form-label">结束时间</label>
                                <input type="time" class="form-input" value="22:00">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">其他费用 <span style="color: #909399; font-weight: normal;">(元)</span></label>
                            <input type="number" class="form-input" id="otherCost" placeholder="请输入其他费用" min="0" step="0.01" value="150" oninput="calculateMultiBatchCost()">
                        </div>
                        <div class="form-group">
                            <label class="form-label">参与人员</label>
                            <div class="user-selector">
                                <div class="user-option selected">
                                    <div class="avatar" style="width: 40px; height: 40px; margin: 0 auto 4px;">张</div>
                                    <div style="font-size: 12px;">张三</div>
                                </div>
                                <div class="user-option selected">
                                    <div class="avatar" style="width: 40px; height: 40px; margin: 0 auto 4px; background: #52c41a;">李</div>
                                    <div style="font-size: 12px;">李四</div>
                                </div>
                                <div class="user-option selected">
                                    <div class="avatar" style="width: 40px; height: 40px; margin: 0 auto 4px; background: #fa8c16;">王</div>
                                    <div style="font-size: 12px;">王五</div>
                                </div>
                                <div class="user-option">
                                    <div class="avatar" style="width: 40px; height: 40px; margin: 0 auto 4px; background: #722ed1;">赵</div>
                                    <div style="font-size: 12px;">赵六</div>
                                </div>
                                <div class="user-option">
                                    <div class="avatar" style="width: 40px; height: 40px; margin: 0 auto 4px; background: #13c2c2;">钱</div>
                                    <div style="font-size: 12px;">钱七</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="form-group">
                            <label class="form-label">选择羽毛球批次（可多选）</label>
                            <div class="batch-selector" id="batchSelector">
                                <!-- 批次1 -->
                                <div class="batch-item multi-batch" id="batch-item-1" onclick="toggleBatch(1, 15, 120)">
                                    <div class="batch-info">
                                        <div class="batch-checkbox" id="batch-checkbox-1">✓</div>
                                        <div style="flex: 1;">
                                            <div class="batch-name">PC-20240110-001</div>
                                            <div class="batch-details">亚狮龙10号 | ¥15.00/个 | 剩余 120个</div>
                                        </div>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <input type="number" class="form-input" id="batch-qty-1" placeholder="数量" min="0" max="120" style="width: 70px;" oninput="calculateMultiBatchCost()" onclick="event.stopPropagation()">
                                        <span style="color: #909399; font-size: 12px;">个</span>
                                    </div>
                                </div>
                                <!-- 批次2 -->
                                <div class="batch-item multi-batch" id="batch-item-2" onclick="toggleBatch(2, 16, 60)">
                                    <div class="batch-info">
                                        <div class="batch-checkbox" id="batch-checkbox-2">✓</div>
                                        <div style="flex: 1;">
                                            <div class="batch-name">PC-20240110-002</div>
                                            <div class="batch-details">亚狮龙10号 | ¥16.00/个 | 剩余 60个</div>
                                        </div>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <input type="number" class="form-input" id="batch-qty-2" placeholder="数量" min="0" max="60" style="width: 70px;" oninput="calculateMultiBatchCost()" onclick="event.stopPropagation()">
                                        <span style="color: #909399; font-size: 12px;">个</span>
                                    </div>
                                </div>
                                <!-- 批次3 -->
                                <div class="batch-item multi-batch" id="batch-item-3" onclick="toggleBatch(3, 18, 30)">
                                    <div class="batch-info">
                                        <div class="batch-checkbox" id="batch-checkbox-3">✓</div>
                                        <div style="flex: 1;">
                                            <div class="batch-name">PC-20240105-001</div>
                                            <div class="batch-details">尤尼克斯比赛级 | ¥18.00/个 | 剩余 30个</div>
                                        </div>
                                    </div>
                                    <div style="display: flex; align-items: center; gap: 8px;">
                                        <input type="number" class="form-input" id="batch-qty-3" placeholder="数量" min="0" max="30" style="width: 70px;" oninput="calculateMultiBatchCost()" onclick="event.stopPropagation()">
                                        <span style="color: #909399; font-size: 12px;">个</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">已选批次汇总</label>
                            <div id="selectedBatchesSummary" style="background: #f5f7fa; border-radius: 6px; padding: 12px; font-size: 13px;">
                                <div style="color: #909399; text-align: center;">请选择批次并输入消耗数量</div>
                            </div>
                        </div>
                        <div class="cost-preview" id="costPreview">
                            <h4>费用预览</h4>
                            <div class="cost-row">
                                <span>羽毛球费用</span>
                                <span>¥<span id="shuttleCost">0.00</span></span>
                            </div>
                            <div class="cost-row">
                                <span>其他费用</span>
                                <span>¥<span id="otherCostPreview">150.00</span></span>
                            </div>
                            <div class="cost-row">
                                <span>消耗总数</span>
                                <span><span id="totalShuttleCount">0</span>个</span>
                            </div>
                            <div class="cost-row">
                                <span>参与人数</span>
                                <span><span id="participantCount">3</span>人</span>
                            </div>
                            <div class="cost-row cost-total">
                                <span>总费用</span>
                                <span>¥<span id="totalCost">150.00</span></span>
                            </div>
                            <div class="cost-row" style="margin-top: 8px; font-size: 13px; opacity: 0.8;">
                                <span>人均费用</span>
                                <span>¥<span id="avgCost">50.00</span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal('activityModal')">取消</button>
                <button class="btn btn-primary">保存活动</button>
            </div>
        </div>
    </div>

    <!-- 采购弹窗 -->
    <div id="procurementModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">新建采购</span>
                <span class="modal-close" onclick="closeModal('procurementModal')">&times;</span>
            </div>
            <div class="modal-body">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                    <div class="form-group">
                        <label class="form-label">采购日期 <span style="color: #f56c6c;">*</span></label>
                        <input type="date" class="form-input" value="2024-01-15">
                    </div>
                    <div class="form-group">
                        <label class="form-label">耗材分类 <span style="color: #f56c6c;">*</span></label>
                        <select class="form-select">
                            <option>请选择分类</option>
                            <option>羽毛球</option>
                            <option>球拍</option>
                            <option>手胶</option>
                            <option>饮料</option>
                            <option>其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">商品名称 <span style="color: #f56c6c;">*</span></label>
                        <input type="text" class="form-input" placeholder="请输入商品名称">
                    </div>
                    <div class="form-group">
                        <label class="form-label">规格型号</label>
                        <input type="text" class="form-input" placeholder="如：12个/筒">
                    </div>
                    <div class="form-group">
                        <label class="form-label">计量单位 <span style="color: #f56c6c;">*</span></label>
                        <select class="form-select">
                            <option>个</option>
                            <option>筒</option>
                            <option>箱</option>
                            <option>瓶</option>
                            <option>包</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">采购数量 <span style="color: #f56c6c;">*</span></label>
                        <input type="number" class="form-input" placeholder="请输入数量" min="1">
                    </div>
                    <div class="form-group">
                        <label class="form-label">单价 <span style="color: #f56c6c;">*</span> (元)</label>
                        <input type="number" class="form-input" placeholder="请输入单价" min="0" step="0.01">
                    </div>
                    <div class="form-group">
                        <label class="form-label">供应商</label>
                        <input type="text" class="form-input" placeholder="请输入供应商">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">备注</label>
                    <textarea class="form-input" rows="2" placeholder="可选"></textarea>
                </div>
                <div class="alert alert-success">
                    💡 采购入库后自动更新库存
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal('procurementModal')">取消</button>
                <button class="btn btn-primary">提交采购</button>
            </div>
        </div>
    </div>

    <!-- 账单弹窗 -->
    <div id="billModal" class="modal">
        <div class="modal-content" style="width: 500px;">
            <div class="modal-header">
                <span class="modal-title">生成账单</span>
                <span class="modal-close" onclick="closeModal('billModal')">&times;</span>
            </div>
            <div class="modal-body">
                <div class="steps">
                    <div class="step done">
                        <div class="step-icon">✓</div>
                        <div class="step-label">选择月份</div>
                    </div>
                    <div class="step done">
                        <div class="step-icon">✓</div>
                        <div class="step-label">确认用户</div>
                    </div>
                    <div class="step active">
                        <div class="step-icon">3</div>
                        <div class="step-label">预览生成</div>
                    </div>
                </div>

                <div class="alert alert-success">
                    ✓ 系统将根据2024年1月的活动记录自动生成账单
                </div>

                <div style="background: #f5f7fa; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span style="color: #909399;">账单月份</span>
                        <span style="font-weight: 500;">2024年1月</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span style="color: #909399;">参与用户</span>
                        <span style="font-weight: 500;">15人</span>
                    </div>
                    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
                        <span style="color: #909399;">活动场次</span>
                        <span style="font-weight: 500;">18场</span>
                    </div>
                    <div style="display: flex; justify-content: space-between;">
                        <span style="color: #909399;">预计总金额</span>
                        <span style="font-weight: 500; color: #f56c6c; font-size: 18px;">¥5,250.00</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal('billModal')">取消</button>
                <button class="btn btn-primary">确认生成</button>
            </div>
        </div>
    </div>

    <script>
        // 签到数据
        const signinData = [
            { name: '张三', avatar: '张', time: '18:30:25', status: '已签到' },
            { name: '李四', avatar: '李', time: '18:35:10', status: '已签到' },
            { name: '王五', avatar: '王', time: '18:42:08', status: '已签到' },
            { name: '赵六', avatar: '赵', time: '18:50:33', status: '已签到' },
            { name: '钱七', avatar: '钱', time: '19:05:22', status: '已签到' },
            { name: '孙八', avatar: '孙', time: '19:12:45', status: '已签到' },
        ];

        let isCheckedIn = false;

        // 批次数据
        const batchData = {
            1: { name: 'PC-20240110-001', item: '亚狮龙10号', price: 15.00, stock: 120 },
            2: { name: 'PC-20240110-002', item: '亚狮龙10号', price: 16.00, stock: 60 },
            3: { name: 'PC-20240105-001', item: '尤尼克斯比赛级', price: 18.00, stock: 30 }
        };

        // 渲染签到列表
        function renderSigninList() {
            const list = document.getElementById('signinList');
            list.innerHTML = signinData.map(item => `
                <div class="signin-card">
                    <div class="signin-avatar">${item.avatar}</div>
                    <div class="signin-info">
                        <div class="signin-name">${item.name}</div>
                        <div class="signin-time">签到时间: ${item.time}</div>
                    </div>
                    <span class="tag tag-success">${item.status}</span>
                </div>
            `).join('');
        }

        // 页面切换
        function showPage(pageName) {
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.querySelectorAll('.menu-item').forEach(m => m.classList.remove('active'));

            document.getElementById('page-' + pageName).classList.add('active');
            event.target.closest('.menu-item').classList.add('active');

            const pageNames = {
                'signin': '签到',
                'activity': '活动记录',
                'procurement': '采购管理',
                'billing': '账单管理',
                'statistics': '数据统计',
                'stock': '库存管理'
            };
            document.getElementById('currentPage').textContent = pageNames[pageName];
        }

        // 签到
        function doCheckin() {
            if (isCheckedIn) return;

            isCheckedIn = true;
            const btn = document.getElementById('checkinBtn');
            const time = document.getElementById('checkinTime');

            btn.classList.add('checked');
            btn.innerHTML = '<span>✓</span>已签到';
            time.textContent = '签到时间: ' + new Date().toLocaleTimeString('zh-CN', { hour12: false });

            const newSignin = {
                name: '我',
                avatar: '我',
                time: new Date().toLocaleTimeString('zh-CN', { hour12: false }),
                status: '已签到'
            };
            signinData.unshift(newSignin);
            renderSigninList();
        }

        // 切换批次选择（多选）
        function toggleBatch(batchId, price, stock) {
            const item = document.getElementById('batch-item-' + batchId);
            const qtyInput = document.getElementById('batch-qty-' + batchId);

            // 切换选中状态
            item.classList.toggle('selected');

            // 如果选中但没有数量，默认设为1
            if (item.classList.contains('selected') && !qtyInput.value) {
                qtyInput.value = 1;
            }

            // 重新计算费用
            calculateMultiBatchCost();
        }

        // 多批次费用计算
        function calculateMultiBatchCost() {
            let totalShuttleCost = 0;
            let totalShuttleCount = 0;
            const selectedBatches = [];

            // 遍历所有批次
            for (let id in batchData) {
                const item = document.getElementById('batch-item-' + id);
                const qtyInput = document.getElementById('batch-qty-' + id);
                const batch = batchData[id];

                if (item.classList.contains('selected')) {
                    const qty = parseInt(qtyInput.value) || 0;
                    if (qty > 0) {
                        const cost = qty * batch.price;
                        totalShuttleCost += cost;
                        totalShuttleCount += qty;

                        selectedBatches.push({
                            name: batch.name,
                            item: batch.item,
                            price: batch.price,
                            qty: qty,
                            cost: cost,
                            stock: batch.stock
                        });

                        // 检查库存
                        if (qty > batch.stock) {
                            qtyInput.style.borderColor = '#f56c6c';
                        } else {
                            qtyInput.style.borderColor = '#52c41a';
                        }
                    } else {
                        qtyInput.style.borderColor = '#dcdfe6';
                    }
                } else {
                    qtyInput.style.borderColor = '#dcdfe6';
                }
            }

            // 获取其他费用
            const otherCost = parseFloat(document.getElementById('otherCost').value) || 0;

            // 获取参与人数
            const participantCount = document.querySelectorAll('.user-selector .user-option.selected').length;

            // 计算总费用和人均费用
            const totalCost = totalShuttleCost + otherCost;
            const avgCost = participantCount > 0 ? (totalCost / participantCount).toFixed(2) : '0.00';

            // 更新费用显示
            document.getElementById('shuttleCost').textContent = totalShuttleCost.toFixed(2);
            document.getElementById('otherCostPreview').textContent = otherCost.toFixed(2);
            document.getElementById('totalShuttleCount').textContent = totalShuttleCount;
            document.getElementById('participantCount').textContent = participantCount;
            document.getElementById('totalCost').textContent = totalCost.toFixed(2);
            document.getElementById('avgCost').textContent = avgCost;

            // 更新已选批次汇总
            updateSelectedBatchesSummary(selectedBatches);
        }

        // 更新已选批次汇总显示
        function updateSelectedBatchesSummary(batches) {
            const summaryDiv = document.getElementById('selectedBatchesSummary');

            if (batches.length === 0) {
                summaryDiv.innerHTML = '<div style="color: #909399; text-align: center;">请选择批次并输入消耗数量</div>';
                return;
            }

            let html = batches.map(b => `
                <div class="batch-summary-item">
                    <span class="batch-summary-name">${b.name}</span>
                    <span class="batch-summary-qty">${b.qty}个 × ¥${b.price.toFixed(2)}</span>
                    <span class="batch-summary-cost">¥${b.cost.toFixed(2)}</span>
                </div>
            `).join('');

            const totalCost = batches.reduce((sum, b) => sum + b.cost, 0);
            html += `
                <div class="batch-summary-total">
                    <span>羽毛球合计</span>
                    <span>¥${totalCost.toFixed(2)}</span>
                </div>
            `;

            summaryDiv.innerHTML = html;
        }

        // 弹窗控制
        function openModal(modalId) {
            document.getElementById(modalId).classList.add('show');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('show');
        }

        // 点击弹窗外部关闭
        document.querySelectorAll('.modal').forEach(modal => {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    this.classList.remove('show');
                }
            });
        });

        // 初始化
        renderSigninList();
        // 初始计算费用
        setTimeout(calculateMultiBatchCost, 100);
    </script>
</body>
</html>