0235713
/
intelligent-interview


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能招聘系统</title>
    <!-- 国内CDN引入 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        :root {
            --primary: #2563eb;
            --secondary: #f59e0b;
            --dark: #1e293b;
            --light: #f8fafc;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f97316;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f1f5f9;
            color: var(--dark);
            line-height: 1.6;
        }
        
        /* 登录页面样式 */
        .login-container {
            display: flex;
            min-height: 100vh;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
        }
        
        .login-box {
            width: 400px;
            background: white;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        
        .login-logo {
            font-size: 28px;
            font-weight: bold;
            color: var(--primary);
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .login-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .login-tab {
            flex: 1;
            padding: 12px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .login-tab.active {
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
        }
        
        .login-form {
            display: none;
        }
        
        .login-form.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 20px;
            text-align: left;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.2s;
        }
        
        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
            outline: none;
        }
        
        .btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background: #1d4ed8;
        }
        
        .login-links {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }
        
        .login-link {
            color: var(--primary);
            font-size: 14px;
            cursor: pointer;
        }
        
        /* 主界面样式 */
        .container {
            display: flex;
            min-height: 100vh;
            padding: 20px;
            gap: 20px;
            max-width: 1400px;
            margin: 0 auto;
            display: none;
        }
        
        /* 左侧导航 */
        .sidebar {
            width: 240px;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            display: flex;
            flex-direction: column;
        }
        
        .logo {
            font-size: 20px;
            font-weight: bold;
            color: var(--primary);
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .nav-menu {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .nav-item {
            padding: 12px 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .nav-item:hover {
            background-color: #f1f5f9;
        }
        
        .nav-item.active {
            background-color: #eff6ff;
            color: var(--primary);
            font-weight: 500;
        }
        
        .nav-item i {
            width: 20px;
            text-align: center;
        }
        
        /* 主内容区 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        /* 顶部信息栏 */
        .header {
            background: white;
            border-radius: 12px;
            padding: 18px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #e0f2fe;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-weight: bold;
            cursor: pointer;
        }
        
        .user-dropdown {
            position: relative;
        }
        
        .dropdown-menu {
            position: absolute;
            top: 50px;
            right: 0;
            width: 200px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            padding: 10px 0;
            z-index: 100;
            display: none;
        }
        
        .dropdown-item {
            padding: 10px 16px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .dropdown-item:hover {
            background: #f1f5f9;
        }
        
        .dropdown-divider {
            height: 1px;
            background: #e2e8f0;
            margin: 5px 0;
        }
        
        /* 搜索栏 */
        .search-bar {
            display: flex;
            gap: 10px;
        }
        
        .search-input {
            flex: 1;
            padding: 10px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .search-btn {
            padding: 10px 16px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
        
        /* 内容区域样式 */
        .content-area {
            flex: 1;
            background: white;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            overflow-y: auto;
        }
        
        .content-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 24px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* 工作/简历卡片样式 */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        
        .card {
            background: white;
            border-radius: 8px;
            padding: 16px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            border: 1px solid #e2e8f0;
            transition: all 0.2s;
            cursor: pointer;
        }
        
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        
        .card-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: #e0f2fe;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-weight: bold;
        }
        
        .card-title {
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .card-subtitle {
            font-size: 14px;
            color: #64748b;
        }
        
        .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 12px;
        }
        
        .card-tag {
            background: #f1f5f9;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
            color: #64748b;
        }
        
        .card-footer {
            margin-top: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .card-match {
            background: #dcfce7;
            color: #166534;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .card-btn {
            padding: 6px 12px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 12px;
            cursor: pointer;
        }
        
        /* 简历分析表单 */
        .resume-form {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .form-section {
            margin-bottom: 24px;
            padding: 16px;
            background: #f8fafc;
            border-radius: 8px;
        }
        
        .form-section-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .form-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .form-col {
            flex: 1;
        }
        
        textarea.form-control {
            min-height: 100px;
            resize: vertical;
        }
        
        .form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            margin-top: 24px;
        }
        
        /* 职业匹配结果 */
        .match-result {
            margin-top: 24px;
            padding: 16px;
            background: #f8fafc;
            border-radius: 8px;
        }
        
        .match-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
            color: var(--primary);
        }
        
        .match-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .match-item:last-child {
            border-bottom: none;
        }
        
        .match-job {
            font-weight: 500;
        }
        
        .match-score {
            font-weight: 600;
            color: var(--primary);
        }
        
        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            padding: 24px;
            border-radius: 12px;
            max-width: 600px;
            width: 90%;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        .modal-buttons {
            display: flex;
            gap: 12px;
            margin-top: 24px;
        }

        .modal-btn {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            border: none;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .modal-btn-cancel {
            background: #f1f5f9;
            color: var(--dark);
        }

        .modal-btn-confirm {
            background: var(--success);
            color: white;
        }

        .modal-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .login-box {
                width: 90%;
                padding: 30px 20px;
            }
            
            .container {
                flex-direction: column;
                padding: 10px;
            }
            
            .sidebar {
                width: 100%;
                flex-direction: row;
                align-items: center;
            }
            
            .logo {
                margin-bottom: 0;
                margin-right: 30px;
            }
            
            .nav-menu {
                flex-direction: row;
                overflow-x: auto;
                padding-bottom: 10px;
            }
            
            .card-grid {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                flex-direction: column;
                gap: 16px;
            }
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div class="login-container" id="loginPage">
        <div class="login-box">
            <div class="login-logo">
                <i class="fas fa-briefcase"></i>
                <span>智能招聘系统</span>
            </div>
            
            <div class="login-tabs">
                <div class="login-tab active" data-tab="candidate">应聘者登录</div>
                <div class="login-tab" data-tab="recruiter">招聘者登录</div>
            </div>
            
            <!-- 应聘者登录表单 -->
            <div class="login-form active" id="candidateLogin">
                <div class="form-group">
                    <label for="candidateUsername">用户名</label>
                    <input type="text" id="candidateUsername" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="candidatePassword">密码</label>
                    <input type="password" id="candidatePassword" class="form-control" placeholder="请输入密码">
                </div>
                <button class="btn btn-primary" id="candidateLoginBtn">登录</button>
                <div class="login-links">
                    <span class="login-link" id="showRegister">注册账号</span>
                    <span class="login-link" id="showForgot">忘记密码</span>
                </div>
            </div>
            
            <!-- 招聘者登录表单 -->
            <div class="login-form" id="recruiterLogin">
                <div class="form-group">
                    <label for="recruiterUsername">用户名</label>
                    <input type="text" id="recruiterUsername" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="recruiterPassword">密码</label>
                    <input type="password" id="recruiterPassword" class="form-control" placeholder="请输入密码">
                </div>
                <button class="btn btn-primary" id="recruiterLoginBtn">登录</button>
                <div class="login-links">
                    <span class="login-link" id="showRegister2">注册账号</span>
                    <span class="login-link" id="showForgot2">忘记密码</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 注册页面 -->
    <div class="login-container" id="registerPage" style="display: none;">
        <div class="login-box">
            <div class="login-logo">
                <i class="fas fa-user-plus"></i>
                <span>注册账号</span>
            </div>
            
            <div class="login-tabs">
                <div class="login-tab active" data-tab="candidateReg">应聘者注册</div>
                <div class="login-tab" data-tab="recruiterReg">招聘者注册</div>
            </div>
            
            <!-- 应聘者注册表单 -->
            <div class="login-form active" id="candidateRegister">
                <div class="form-group">
                    <label for="regCandidateUsername">用户名</label>
                    <input type="text" id="regCandidateUsername" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="regCandidatePassword">密码</label>
                    <input type="password" id="regCandidatePassword" class="form-control" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="regCandidateConfirm">确认密码</label>
                    <input type="password" id="regCandidateConfirm" class="form-control" placeholder="请再次输入密码">
                </div>
                <div class="form-group">
                    <label for="regCandidateEmail">电子邮箱</label>
                    <input type="email" id="regCandidateEmail" class="form-control" placeholder="请输入电子邮箱">
                </div>
                <button class="btn btn-primary" id="candidateRegisterBtn">注册</button>
                <div class="login-links">
                    <span class="login-link" id="backToLogin">返回登录</span>
                </div>
            </div>
            
            <!-- 招聘者注册表单 -->
            <div class="login-form" id="recruiterRegister">
                <div class="form-group">
                    <label for="regRecruiterUsername">用户名</label>
                    <input type="text" id="regRecruiterUsername" class="form-control" placeholder="请输入用户名">
                </div>
                <div class="form-group">
                    <label for="regRecruiterPassword">密码</label>
                    <input type="password" id="regRecruiterPassword" class="form-control" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="regRecruiterConfirm">确认密码</label>
                    <input type="password" id="regRecruiterConfirm" class="form-control" placeholder="请再次输入密码">
                </div>
                <div class="form-group">
                    <label for="regRecruiterEmail">电子邮箱</label>
                    <input type="email" id="regRecruiterEmail" class="form-control" placeholder="请输入电子邮箱">
                </div>
                <div class="form-group">
                    <label for="regCompany">公司名称</label>
                    <input type="text" id="regCompany" class="form-control" placeholder="请输入公司名称">
                </div>
                <button class="btn btn-primary" id="recruiterRegisterBtn">注册</button>
                <div class="login-links">
                    <span class="login-link" id="backToLogin2">返回登录</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 忘记密码页面 -->
    <div class="login-container" id="forgotPage" style="display: none;">
        <div class="login-box">
            <div class="login-logo">
                <i class="fas fa-key"></i>
                <span>找回密码</span>
            </div>
            
            <div class="form-group">
                <label for="forgotEmail">电子邮箱</label>
                <input type="email" id="forgotEmail" class="form-control" placeholder="请输入注册时使用的电子邮箱">
            </div>
            <button class="btn btn-primary" id="forgotBtn">发送重置链接</button>
            <div class="login-links">
                <span class="login-link" id="backToLogin3">返回登录</span>
            </div>
        </div>
    </div>
    
    <!-- 主界面 - 应聘者 -->
    <div class="container" id="candidateContainer">
        <!-- 左侧导航 -->
        <div class="sidebar">
            <div class="logo">
                <i class="fas fa-user-tie"></i>
                <span>应聘者中心</span>
            </div>
            <div class="nav-menu">
                <div class="nav-item active" id="navCandidateJobs">
                    <i class="fas fa-briefcase"></i>
                    <span>工作机会</span>
                </div>
                <div class="nav-item" id="navCandidateResume">
                    <i class="fas fa-file-alt"></i>
                    <span>简历分析</span>
                </div>
                <div class="nav-item" id="navCandidateInterview">
                    <i class="fas fa-video"></i>
                    <span>视频面试</span>
                </div>
                <div class="nav-item" id="navCandidateRecords">
                    <i class="fas fa-history"></i>
                    <span>面试记录</span>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部信息栏 -->
            <div class="header">
                <div class="search-bar">
                    <input type="text" class="search-input" placeholder="搜索工作职位、公司...">
                    <button class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <div class="user-info">
                    <div class="user-dropdown">
                        <div class="avatar" id="userAvatar">张</div>
                        <div class="dropdown-menu" id="userDropdown">
                            <div class="dropdown-item">
                                <i class="fas fa-user"></i> 个人中心
                            </div>
                            <div class="dropdown-item">
                                <i class="fas fa-cog"></i> 系统设置
                            </div>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-item">
                                <i class="fas fa-sign-out-alt"></i> 退出登录
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="font-weight: 500;">张伟</div>
                        <div style="font-size: 12px; color: #64748b;">应聘者</div>
                    </div>
                </div>
            </div>
            
            <!-- 工作机会页面 -->
            <div class="content-area" id="candidateJobsPage">
                <div class="content-title">
                    <i class="fas fa-briefcase"></i>
                    <span>推荐工作机会</span>
                </div>
                <div class="card-grid" id="jobGrid">
                    <!-- 工作卡片将通过JS动态生成 -->
                </div>
            </div>
            
            <!-- 简历分析页面 -->
            <div class="content-area" id="candidateResumePage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-file-alt"></i>
                    <span>我的简历</span>
                </div>
                
                <div class="resume-form">
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-user"></i>
                            <span>基本信息</span>
                        </div>
                        <div class="form-row">
                            <div class="form-col">
                                <label for="resumeName">姓名</label>
                                <input type="text" id="resumeName" class="form-control" placeholder="请输入您的姓名">
                            </div>
                            <div class="form-col">
                                <label for="resumeGender">性别</label>
                                <select id="resumeGender" class="form-control">
                                    <option value="male">男</option>
                                    <option value="female">女</option>
                                    <option value="other">其他</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-col">
                                <label for="resumeBirth">出生日期</label>
                                <input type="date" id="resumeBirth" class="form-control">
                            </div>
                            <div class="form-col">
                                <label for="resumePhone">联系电话</label>
                                <input type="tel" id="resumePhone" class="form-control" placeholder="请输入联系电话">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-col">
                                <label for="resumeEmail">电子邮箱</label>
                                <input type="email" id="resumeEmail" class="form-control" placeholder="请输入电子邮箱">
                            </div>
                            <div class="form-col">
                                <label for="resumeLocation">居住地</label>
                                <input type="text" id="resumeLocation" class="form-control" placeholder="请输入居住城市">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-graduation-cap"></i>
                            <span>教育背景</span>
                        </div>
                        <div class="form-row">
                            <div class="form-col">
                                <label for="resumeSchool">学校名称</label>
                                <input type="text" id="resumeSchool" class="form-control" placeholder="请输入学校名称">
                            </div>
                            <div class="form-col">
                                <label for="resumeDegree">学历</label>
                                <select id="resumeDegree" class="form-control">
                                    <option value="bachelor">本科</option>
                                    <option value="master">硕士</option>
                                    <option value="phd">博士</option>
                                    <option value="college">大专</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-col">
                                <label for="resumeMajor">专业</label>
                                <input type="text" id="resumeMajor" class="form-control" placeholder="请输入所学专业">
                            </div>
                            <div class="form-col">
                                <label for="resumeGraduation">毕业时间</label>
                                <input type="date" id="resumeGraduation" class="form-control">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-briefcase"></i>
                            <span>工作经历</span>
                        </div>
                        <div id="workExperienceContainer">
                            <!-- 工作经历将通过JS动态添加 -->
                        </div>
                        <button class="btn" id="addWorkExperience" style="margin-top: 10px;">
                            <i class="fas fa-plus"></i> 添加工作经历
                        </button>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-project-diagram"></i>
                            <span>项目经验</span>
                        </div>
                        <div id="projectExperienceContainer">
                            <!-- 项目经验将通过JS动态添加 -->
                        </div>
                        <button class="btn" id="addProjectExperience" style="margin-top: 10px;">
                            <i class="fas fa-plus"></i> 添加项目经验
                        </button>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-star"></i>
                            <span>技能专长</span>
                        </div>
                        <div class="form-group">
                            <label for="resumeSkills">技能 (用逗号分隔)</label>
                            <input type="text" id="resumeSkills" class="form-control" placeholder="例如: JavaScript, Python, 项目管理">
                        </div>
                    </div>
                    
                    <div class="form-section">
                        <div class="form-section-title">
                            <i class="fas fa-certificate"></i>
                            <span>证书资质</span>
                        </div>
                        <div id="certificateContainer">
                            <!-- 证书将通过JS动态添加 -->
                        </div>
                        <button class="btn" id="addCertificate" style="margin-top: 10px;">
                            <i class="fas fa-plus"></i> 添加证书
                        </button>
                    </div>
                    
                    <div class="form-actions">
                        <button class="btn" id="cancelResume">
                            取消
                        </button>
                        <button class="btn btn-primary" id="saveResume">
                            <i class="fas fa-save"></i> 保存简历
                        </button>
                        <button class="btn btn-primary" id="analyzeResume">
                            <i class="fas fa-chart-bar"></i> 分析匹配度
                        </button>
                    </div>
                </div>
                
                <!-- 职业匹配结果 -->
                <div class="match-result" id="matchResult" style="display: none;">
                    <div class="match-title">
                        <i class="fas fa-chart-pie"></i>
                        <span>职业匹配分析</span>
                    </div>
                    <div id="matchList">
                        <!-- 匹配结果将通过JS动态生成 -->
                    </div>
                </div>
            </div>
            
            <!-- 视频面试页面 -->
            <div class="content-area" id="candidateInterviewPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-video"></i>
                    <span>视频面试</span>
                </div>
                <div style="text-align: center; padding: 40px;">
                    <i class="fas fa-video" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
                    <h3 style="margin-bottom: 20px;">等待面试邀请</h3>
                    <p style="color: #64748b; margin-bottom: 30px;">当招聘者发起面试邀请时，您将在此处看到面试信息</p>
                </div>
            </div>
            
            <!-- 面试记录页面 -->
            <div class="content-area" id="candidateRecordsPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-history"></i>
                    <span>面试记录</span>
                </div>
                <div style="text-align: center; padding: 40px;">
                    <i class="fas fa-clock" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
                    <h3 style="margin-bottom: 20px;">暂无面试记录</h3>
                    <p style="color: #64748b;">完成面试后，您的面试记录将显示在此处</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 主界面 - 招聘者 -->
    <div class="container" id="recruiterContainer">
        <!-- 左侧导航 -->
        <div class="sidebar">
            <div class="logo">
                <i class="fas fa-building"></i>
                <span>招聘者中心</span>
            </div>
            <div class="nav-menu">
                <div class="nav-item active" id="navRecruiterCandidates">
                    <i class="fas fa-users"></i>
                    <span>候选人</span>
                </div>
                <div class="nav-item" id="navRecruiterJobs">
                    <i class="fas fa-briefcase"></i>
                    <span>职位管理</span>
                </div>
                <div class="nav-item" id="navRecruiterResume">
                    <i class="fas fa-file-alt"></i>
                    <span>简历分析</span>
                </div>
                <div class="nav-item" id="navRecruiterInterview">
                    <i class="fas fa-video"></i>
                    <span>视频面试</span>
                </div>
                <div class="nav-item" id="navRecruiterRecords">
                    <i class="fas fa-history"></i>
                    <span>面试记录</span>
                </div>
                <div class="nav-item" id="navRecruiterAnalysis">
                    <i class="fas fa-chart-bar"></i>
                    <span>数据分析</span>
                </div>
            </div>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部信息栏 -->
            <div class="header">
                <div class="search-bar">
                    <input type="text" class="search-input" placeholder="搜索候选人姓名、技能...">
                    <button class="search-btn">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                <div class="user-info">
                    <div class="user-dropdown">
                        <div class="avatar" id="recruiterAvatar">李</div>
                        <div class="dropdown-menu" id="recruiterDropdown">
                            <div class="dropdown-item">
                                <i class="fas fa-user"></i> 个人中心
                            </div>
                            <div class="dropdown-item">
                                <i class="fas fa-cog"></i> 系统设置
                            </div>
                            <div class="dropdown-divider"></div>
                            <div class="dropdown-item">
                                <i class="fas fa-sign-out-alt"></i> 退出登录
                            </div>
                        </div>
                    </div>
                    <div>
                        <div style="font-weight: 500;">李明</div>
                        <div style="font-size: 12px; color: #64748b;">XX公司招聘经理</div>
                    </div>
                </div>
            </div>
            
            <!-- 候选人页面 -->
            <div class="content-area" id="recruiterCandidatesPage">
                <div class="content-title">
                    <i class="fas fa-users"></i>
                    <span>候选人列表</span>
                </div>
                <div class="card-grid" id="candidateGrid">
                    <!-- 候选人卡片将通过JS动态生成 -->
                </div>
            </div>
            
            <!-- 职位管理页面 -->
            <div class="content-area" id="recruiterJobsPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-briefcase"></i>
                    <span>职位管理</span>
                </div>
                <div style="text-align: right; margin-bottom: 20px;">
                    <button class="btn btn-primary" id="addJobBtn">
                        <i class="fas fa-plus"></i> 发布新职位
                    </button>
                </div>
                <div class="card-grid" id="jobManageGrid">
                    <!-- 职位管理卡片将通过JS动态生成 -->
                </div>
            </div>
            
            <!-- 简历分析页面 -->
            <div class="content-area" id="recruiterResumePage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-file-alt"></i>
                    <span>简历分析</span>
                </div>
                <div style="text-align: center; padding: 40px;">
                    <i class="fas fa-file-search" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
                    <h3 style="margin-bottom: 20px;">选择候选人查看简历</h3>
                    <p style="color: #64748b;">点击候选人列表中的候选人，查看其完整简历和AI分析报告</p>
                </div>
            </div>
            
            <!-- 视频面试页面 -->
            <div class="content-area" id="recruiterInterviewPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-video"></i>
                    <span>视频面试</span>
                </div>
                <div style="text-align: center; padding: 40px;">
                    <i class="fas fa-video" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
                    <h3 style="margin-bottom: 20px;">发起视频面试</h3>
                    <p style="color: #64748b; margin-bottom: 30px;">选择候选人后，您可以发起视频面试邀请</p>
                    <button class="btn btn-primary" id="startInterviewBtn" style="display: none;">
                        <i class="fas fa-video"></i> 发起面试
                    </button>
                </div>
            </div>
            
            <!-- 面试记录页面 -->
            <div class="content-area" id="recruiterRecordsPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-history"></i>
                    <span>面试记录</span>
                </div>
                <div style="text-align: center; padding: 40px;">
                    <i class="fas fa-clock" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
                    <h3 style="margin-bottom: 20px;">暂无面试记录</h3>
                    <p style="color: #64748b;">完成面试后，您的面试记录将显示在此处</p>
                </div>
            </div>
            
            <!-- 数据分析页面 -->
            <div class="content-area" id="recruiterAnalysisPage" style="display: none;">
                <div class="content-title">
                    <i class="fas fa-chart-bar"></i>
                    <span>数据分析</span>
                </div>
                <div style="text-align: center; padding: 40px;">
                    <i class="fas fa-chart-pie" style="font-size: 60px; color: #e2e8f0; margin-bottom: 20px;"></i>
                    <h3 style="margin-bottom: 20px;">数据分析面板</h3>
                    <p style="color: #64748b;">查看候选人数据、面试表现统计和招聘效果分析</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 发布职位模态框 -->
    <div class="modal-overlay" id="jobModal">
        <div class="modal-content">
            <div class="modal-title">
                <i class="fas fa-briefcase"></i>
                <span>发布新职位</span>
            </div>
            
            <div class="form-group">
                <label for="jobTitle">职位名称</label>
                <input type="text" id="jobTitle" class="form-control" placeholder="例如: 高级产品经理">
            </div>
            
            <div class="form-group">
                <label for="jobType">职位类型</label>
                <select id="jobType" class="form-control">
                    <option value="fulltime">全职</option>
                    <option value="parttime">兼职</option>
                    <option value="intern">实习</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="jobDepartment">所属部门</label>
                <input type="text" id="jobDepartment" class="form-control" placeholder="例如: 产品部">
            </div>
            
            <div class="form-group">
                <label for="jobLocation">工作地点</label>
                <input type="text" id="jobLocation" class="form-control" placeholder="例如: 北京">
            </div>
            
            <div class="form-group">
                <label for="jobSalary">薪资范围</label>
                <input type="text" id="jobSalary" class="form-control" placeholder="例如: 15k-30k">
            </div>
            
            <div class="form-group">
                <label for="jobDescription">职位描述</label>
                <textarea id="jobDescription" class="form-control" rows="5" placeholder="请输入职位描述和工作内容"></textarea>
            </div>
            
            <div class="form-group">
                <label for="jobRequirements">任职要求</label>
                <textarea id="jobRequirements" class="form-control" rows="5" placeholder="请输入任职要求和技能要求"></textarea>
            </div>
            
            <div class="modal-buttons">
                <button class="modal-btn modal-btn-cancel" id="cancelJob">
                    取消
                </button>
                <button class="modal-btn modal-btn-confirm" id="confirmJob">
                    发布职位
                </button>
            </div>
        </div>
    </div>

    <script>
        // 用户类型: candidate(应聘者) 或 recruiter(招聘者)
        let userType = '';
        let currentUser = null;
        
        // 工作数据
        const jobs = [
            {
                id: 1,
                title: "高级产品经理",
                company: "XX科技公司",
                location: "北京",
                salary: "25k-40k",
                type: "全职",
                experience: "5年以上",
                skills: ["产品规划", "用户增长", "数据分析"],
                description: "负责公司核心产品的规划与设计，主导产品从0到1的开发...",
                posted: "2023-10-10",
                match: 82
            },
            {
                id: 2,
                title: "UI设计师",
                company: "YY设计公司",
                location: "上海",
                salary: "15k-25k",
                type: "全职",
                experience: "3年以上",
                skills: ["界面设计", "用户体验", "Figma"],
                description: "负责公司客户产品的界面设计和用户体验优化...",
                posted: "2023-10-12",
                match: 76
            },
            {
                id: 3,
                title: "前端开发工程师",
                company: "ZZ互联网公司",
                location: "深圳",
                salary: "20k-35k",
                type: "全职",
                experience: "3年以上",
                skills: ["Vue.js", "React", "TypeScript"],
                description: "负责公司核心产品的前端架构设计和开发...",
                posted: "2023-10-15",
                match: 88
            },
            {
                id: 4,
                title: "市场营销经理",
                company: "AA集团",
                location: "广州",
                salary: "18k-30k",
                type: "全职",
                experience: "5年以上",
                skills: ["品牌策划", "数字营销", "市场分析"],
                description: "制定并执行公司年度营销策略，管理营销团队...",
                posted: "2023-10-08",
                match: 79
            }
        ];
        
        // 候选人数据
        const candidates = [
            {
                id: 1,
                name: "张伟",
                position: "高级产品经理",
                experience: "5年",
                skills: ["产品规划", "用户增长", "数据分析", "Axure", "SQL"],
                location: "北京",
                match: 82,
                resume: "张伟的简历内容..."
            },
            {
                id: 2,
                name: "李娜",
                position: "UI设计师",
                experience: "3年",
                skills: ["界面设计", "用户体验", "交互设计", "Sketch", "Figma"],
                location: "上海",
                match: 76,
                resume: "李娜的简历内容..."
            },
            {
                id: 3,
                name: "王强",
                position: "前端开发工程师",
                experience: "4年",
                skills: ["Vue.js", "React", "TypeScript", "Node.js", "Webpack"],
                location: "深圳",
                match: 88,
                resume: "王强的简历内容..."
            },
            {
                id: 4,
                name: "赵敏",
                position: "市场营销经理",
                experience: "6年",
                skills: ["品牌策划", "数字营销", "市场分析", "SEO", "Google Analytics"],
                location: "广州",
                match: 79,
                resume: "赵敏的简历内容..."
            }
        ];
        
        // 职位管理数据
        let managedJobs = [
            {
                id: 1,
                title: "高级产品经理",
                department: "产品部",
                type: "全职",
                location: "北京",
                salary: "25k-40k",
                posted: "2023-10-01",
                applicants: 12,
                status: "招聘中"
            },
            {
                id: 2,
                title: "UI设计师",
                department: "设计部",
                type: "全职",
                location: "上海",
                salary: "15k-25k",
                posted: "2023-09-15",
                applicants: 8,
                status: "招聘中"
            }
        ];
        
        // 初始化页面
        const initPages = () => {
            // 绑定登录/注册切换事件
            document.querySelectorAll('.login-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 更新标签页状态
                    document.querySelectorAll('.login-tab').forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应的表单
                    if (tabId.includes('Reg')) {
                        // 注册表单
                        document.querySelectorAll('.login-form').forEach(form => form.classList.remove('active'));
                        document.getElementById(tabId === 'candidateReg' ? 'candidateRegister' : 'recruiterRegister').classList.add('active');
                    } else {
                        // 登录表单
                        document.querySelectorAll('.login-form').forEach(form => form.classList.remove('active'));
                        document.getElementById(tabId === 'candidate' ? 'candidateLogin' : 'recruiterLogin').classList.add('active');
                    }
                });
            });
            
            // 绑定显示注册页面事件
            document.getElementById('showRegister').addEventListener('click', showRegisterPage);
            document.getElementById('showRegister2').addEventListener('click', showRegisterPage);
            
            // 绑定显示忘记密码页面事件
            document.getElementById('showForgot').addEventListener('click', showForgotPage);
            document.getElementById('showForgot2').addEventListener('click', showForgotPage);
            
            // 绑定返回登录事件
            document.getElementById('backToLogin').addEventListener('click', showLoginPage);
            document.getElementById('backToLogin2').addEventListener('click', showLoginPage);
            document.getElementById('backToLogin3').addEventListener('click', showLoginPage);
            
            // 绑定登录按钮事件
            document.getElementById('candidateLoginBtn').addEventListener('click', () => login('candidate'));
            document.getElementById('recruiterLoginBtn').addEventListener('click', () => login('recruiter'));
            
            // 绑定注册按钮事件
            document.getElementById('candidateRegisterBtn').addEventListener('click', () => register('candidate'));
            document.getElementById('recruiterRegisterBtn').addEventListener('click', () => register('recruiter'));
            
            // 绑定忘记密码按钮事件
            document.getElementById('forgotBtn').addEventListener('click', forgotPassword);
            
            // 生成工作卡片
            document.getElementById('jobGrid').innerHTML = jobs.map(job => `
                <div class="card" data-id="${job.id}">
                    <div class="card-header">
                        <div class="card-avatar">${job.company.charAt(0)}</div>
                        <div>
                            <div class="card-title">${job.title}</div>
                            <div class="card-subtitle">${job.company} · ${job.location}</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        ${job.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                        ${job.skills.length > 3 ? `<span class="card-tag">+${job.skills.length - 3}</span>` : ''}
                    </div>
                    <div class="card-footer">
                        <span class="card-match">匹配度: ${job.match}%</span>
                        <button class="card-btn">申请职位</button>
                    </div>
                </div>
            `).join('');
            
            // 生成候选人卡片
            document.getElementById('candidateGrid').innerHTML = candidates.map(candidate => `
                <div class="card" data-id="${candidate.id}">
                    <div class="card-header">
                        <div class="card-avatar">${candidate.name.charAt(0)}</div>
                        <div>
                            <div class="card-title">${candidate.name}</div>
                            <div class="card-subtitle">${candidate.position} · ${candidate.experience}经验</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        ${candidate.skills.slice(0, 3).map(skill => `<span class="card-tag">${skill}</span>`).join('')}
                        ${candidate.skills.length > 3 ? `<span class="card-tag">+${candidate.skills.length - 3}</span>` : ''}
                    </div>
                    <div class="card-footer">
                        <span class="card-match">匹配度: ${candidate.match}%</span>
                        <button class="card-btn">查看简历</button>
                    </div>
                </div>
            `).join('');
            
            // 生成职位管理卡片
            updateJobManageGrid();
            
            // 绑定工作卡片点击事件
            document.querySelectorAll('#jobGrid .card').forEach(card => {
                card.addEventListener('click', function() {
                    const jobId = parseInt(this.getAttribute('data-id'));
                    showJobDetail(jobId);
                });
            });
            
            // 绑定候选人卡片点击事件
            document.querySelectorAll('#candidateGrid .card').forEach(card => {
                card.addEventListener('click', function() {
                    const candidateId = parseInt(this.getAttribute('data-id'));
                    showCandidateDetail(candidateId);
                });
            });
            
            // 绑定职位管理卡片点击事件
            document.querySelectorAll('#jobManageGrid .card').forEach(card => {
                card.addEventListener('click', function() {
                    const jobId = parseInt(this.getAttribute('data-id'));
                    showJobManageDetail(jobId);
                });
            });
            
            // 绑定用户头像点击事件
            document.getElementById('userAvatar').addEventListener('click', toggleUserDropdown);
            document.getElementById('recruiterAvatar').addEventListener('click', toggleRecruiterDropdown);
            
            // 绑定导航菜单点击事件 - 应聘者
            document.getElementById('navCandidateJobs').addEventListener('click', () => switchCandidatePage('jobs'));
            document.getElementById('navCandidateResume').addEventListener('click', () => switchCandidatePage('resume'));
            document.getElementById('navCandidateInterview').addEventListener('click', () => switchCandidatePage('interview'));
            document.getElementById('navCandidateRecords').addEventListener('click', () => switchCandidatePage('records'));
            
            // 绑定导航菜单点击事件 - 招聘者
            document.getElementById('navRecruiterCandidates').addEventListener('click', () => switchRecruiterPage('candidates'));
            document.getElementById('navRecruiterJobs').addEventListener('click', () => switchRecruiterPage('jobs'));
            document.getElementById('navRecruiterResume').addEventListener('click', () => switchRecruiterPage('resume'));
            document.getElementById('navRecruiterInterview').addEventListener('click', () => switchRecruiterPage('interview'));
            document.getElementById('navRecruiterRecords').addEventListener('click', () => switchRecruiterPage('records'));
            document.getElementById('navRecruiterAnalysis').addEventListener('click', () => switchRecruiterPage('analysis'));
            
            // 绑定简历表单事件
            document.getElementById('addWorkExperience').addEventListener('click', addWorkExperienceField);
            document.getElementById('addProjectExperience').addEventListener('click', addProjectExperienceField);
            document.getElementById('addCertificate').addEventListener('click', addCertificateField);
            document.getElementById('saveResume').addEventListener('click', saveResume);
            document.getElementById('cancelResume').addEventListener('click', cancelResume);
            document.getElementById('analyzeResume').addEventListener('click', analyzeResume);
            
            // 绑定职位管理事件
            document.getElementById('addJobBtn').addEventListener('click', showJobModal);
            document.getElementById('cancelJob').addEventListener('click', hideJobModal);
            document.getElementById('confirmJob').addEventListener('click', addNewJob);
            
            // 绑定退出登录事件
            document.querySelectorAll('.dropdown-item').forEach(item => {
                if (item.textContent.includes('退出登录')) {
                    item.addEventListener('click', logout);
                }
            });
        };
        
        // 更新职位管理网格
        const updateJobManageGrid = () => {
            document.getElementById('jobManageGrid').innerHTML = managedJobs.map(job => `
                <div class="card" data-id="${job.id}">
                    <div class="card-header">
                        <div class="card-avatar">${job.title.charAt(0)}</div>
                        <div>
                            <div class="card-title">${job.title}</div>
                            <div class="card-subtitle">${job.department} · ${job.location}</div>
                        </div>
                    </div>
                    <div class="card-tags">
                        <span class="card-tag">${job.type}</span>
                        <span class="card-tag">${job.salary}</span>
                        <span class="card-tag">${job.status}</span>
                    </div>
                    <div class="card-footer">
                        <span>${job.applicants}位申请人</span>
                        <span>发布于 ${job.posted}</span>
                    </div>
                </div>
            `).join('');
        };
        
        // 显示工作详情
        const showJobDetail = (jobId) => {
            const job = jobs.find(j => j.id === jobId);
            if (!job) return;
            
            alert(`职位详情: ${job.title}\n公司: ${job.company}\n地点: ${job.location}\n薪资: ${job.salary}\n描述: ${job.description}`);
        };
        
        // 显示候选人详情
        const showCandidateDetail = (candidateId) => {
            const candidate = candidates.find(c => c.id === candidateId);
            if (!candidate) return;
            
            alert(`候选人详情: ${candidate.name}\n职位: ${candidate.position}\n经验: ${candidate.experience}\n技能: ${candidate.skills.join(', ')}\n简历: ${candidate.resume}`);
            
            // 如果是招聘者界面，显示发起面试按钮
            if (userType === 'recruiter') {
                document.getElementById('startInterviewBtn').style.display = 'inline-block';
            }
        };
        
        // 显示职位管理详情
        const showJobManageDetail = (jobId) => {
            const job = managedJobs.find(j => j.id === jobId);
            if (!job) return;
            
            alert(`职位管理: ${job.title}\n部门: ${job.department}\n地点: ${job.location}\n薪资: ${job.salary}\n状态: ${job.status}\n申请人: ${job.applicants}`);
        };
        
        // 切换应聘者页面
        const switchCandidatePage = (page) => {
            // 隐藏所有页面
            document.getElementById('candidateJobsPage').style.display = 'none';
            document.getElementById('candidateResumePage').style.display = 'none';
            document.getElementById('candidateInterviewPage').style.display = 'none';
            document.getElementById('candidateRecordsPage').style.display = 'none';
            
            // 显示选中的页面
            document.getElementById(`candidate${page.charAt(0).toUpperCase() + page.slice(1)}Page`).style.display = 'block';
            
            // 更新导航激活状态
            document.querySelectorAll('#candidateContainer .nav-item').forEach(item => {
                item.classList.remove('active');
            });
            document.getElementById(`navCandidate${page.charAt(0).toUpperCase() + page.slice(1)}`).classList.add('active');
        };
        
        // 切换招聘者页面
        const switchRecruiterPage = (page) => {
            // 隐藏所有页面
            document.getElementById('recruiterCandidatesPage').style.display = 'none';
            document.getElementById('recruiterJobsPage').style.display = 'none';
            document.getElementById('recruiterResumePage').style.display = 'none';
            document.getElementById('recruiterInterviewPage').style.display = 'none';
            document.getElementById('recruiterRecordsPage').style.display = 'none';
            document.getElementById('recruiterAnalysisPage').style.display = 'none';
            
            // 显示选中的页面
            document.getElementById(`recruiter${page.charAt(0).toUpperCase() + page.slice(1)}Page`).style.display = 'block';
            
            // 更新导航激活状态
            document.querySelectorAll('#recruiterContainer .nav-item').forEach(item => {
                item.classList.remove('active');
            });
            document.getElementById(`navRecruiter${page.charAt(0).toUpperCase() + page.slice(1)}`).classList.add('active');
        };
        
        // 显示登录页面
        const showLoginPage = () => {
            document.getElementById('loginPage').style.display = 'flex';
            document.getElementById('registerPage').style.display = 'none';
            document.getElementById('forgotPage').style.display = 'none';
        };
        
        // 显示注册页面
        const showRegisterPage = () => {
            document.getElementById('loginPage').style.display = 'none';
            document.getElementById('registerPage').style.display = 'flex';
            document.getElementById('forgotPage').style.display = 'none';
        };
        
        // 显示忘记密码页面
        const showForgotPage = () => {
            document.getElementById('loginPage').style.display = 'none';
            document.getElementById('registerPage').style.display = 'none';
            document.getElementById('forgotPage').style.display = 'flex';
        };
        
        // 切换用户下拉菜单
        const toggleUserDropdown = () => {
            const dropdown = document.getElementById('userDropdown');
            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
        };
        
        const toggleRecruiterDropdown = () => {
            const dropdown = document.getElementById('recruiterDropdown');
            dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
        };
        
        // 添加工作经历字段
        const addWorkExperienceField = () => {
            const container = document.getElementById('workExperienceContainer');
            const id = Date.now();
            
            const html = `
                <div class="form-section" id="work-${id}">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <div class="form-section-title">
                            <i class="fas fa-briefcase"></i>
                            <span>工作经历</span>
                        </div>
                        <button class="btn" onclick="removeField('work-${id}')">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <label for="workCompany-${id}">公司名称</label>
                            <input type="text" id="workCompany-${id}" class="form-control" placeholder="请输入公司名称">
                        </div>
                        <div class="form-col">
                            <label for="workPosition-${id}">职位</label>
                            <input type="text" id="workPosition-${id}" class="form-control" placeholder="请输入职位">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <label for="workStart-${id}">开始时间</label>
                            <input type="date" id="workStart-${id}" class="form-control">
                        </div>
                        <div class="form-col">
                            <label for="workEnd-${id}">结束时间</label>
                            <input type="date" id="workEnd-${id}" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="workDescription-${id}">工作内容</label>
                        <textarea id="workDescription-${id}" class="form-control" rows="3" placeholder="请输入工作内容和职责"></textarea>
                    </div>
                </div>
            `;
            
            container.insertAdjacentHTML('beforeend', html);
        };
        
        // 添加项目经验字段
        const addProjectExperienceField = () => {
            const container = document.getElementById('projectExperienceContainer');
            const id = Date.now();
            
            const html = `
                <div class="form-section" id="project-${id}">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                        <div class="form-section-title">
                            <i class="fas fa-project-diagram"></i>
                            <span>项目经验</span>
                        </div>
                        <button class="btn" onclick="removeField('project-${id}')">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <label for="projectName-${id}">项目名称</label>
                            <input type="text" id="projectName-${id}" class="form-control" placeholder="请输入项目名称">
                        </div>
                        <div class="form-col">
                            <label for="projectRole-${id}">担任角色</label>
                            <input type="text" id="projectRole-${id}" class="form-control" placeholder="请输入您在项目中的角色">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-col">
                            <label for="projectStart-${id}">开始时间</label>
                            <input type="date" id="projectStart-${id}" class="form-control">
                        </div>
                        <div class="form-col">
                            <label for="projectEnd-${id}">结束时间</label>
                            <input type="date" id="projectEnd-${id}" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="projectDescription-${id}">项目描述</label>
                        <textarea id="projectDescription-${id}" class="form-control" rows="3" placeholder="请输入项目描述"></textarea>
                    </div>
                    <div class="form-group">
                        <label for="projectAchievement-${id}">项目成果</label>
                        <textarea id="projectAchievement-${id}" class="form-control" rows="3" placeholder="请输入项目成果和收获"></textarea>
                    </div>
                </div>
            `;
            
            container.insertAdjacentHTML('beforeend', html);
        };
        
        // 添加证书字段
        const addCertificateField = () => {
            const container = document.getElementById('certificateContainer');
            const id = Date.now();
            
            const html = `
                <div class="form-row" id="certificate-${id}" style="margin-bottom: 16px;">
                    <div class="form-col">
                        <label for="certificateName-${id}">证书名称</label>
                        <input type="text" id="certificateName-${id}" class="form-control" placeholder="请输入证书名称">
                    </div>
                    <div class="form-col">
                        <label for="certificateTime-${id}">获得时间</label>
                        <input type="date" id="certificateTime-${id}" class="form-control">
                    </div>
                    <div class="form-col" style="display: flex; align-items: flex-end;">
                        <button class="btn" onclick="removeField('certificate-${id}')" style="height: 42px;">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            `;
            
            container.insertAdjacentHTML('beforeend', html);
        };
        
        // 删除字段
        const removeField = (id) => {
            document.getElementById(id).remove();
        };
        
        // 保存简历
        const saveResume = () => {
            alert('简历已保存');
            // 这里可以添加保存简历到服务器的代码
        };
        
        // 取消编辑简历
        const cancelResume = () => {
            if (confirm('确定要取消编辑吗？所有未保存的更改将丢失。')) {
                // 重置表单
                document.getElementById('resumeForm').reset();
                // 清空动态添加的字段
                document.getElementById('workExperienceContainer').innerHTML = '';
                document.getElementById('projectExperienceContainer').innerHTML = '';
                document.getElementById('certificateContainer').innerHTML = '';
            }
        };
        
        // 分析简历匹配度
        const analyzeResume = () => {
            // 模拟分析过程
            document.getElementById('matchResult').style.display = 'block';
            
            // 模拟匹配结果
            const matches = [
                { job: "高级产品经理", score: 85 },
                { job: "产品经理", score: 78 },
                { job: "产品助理", score: 65 },
                { job: "项目经理", score: 72 },
                { job: "用户研究员", score: 60 }
            ];
            
            document.getElementById('matchList').innerHTML = matches.map(match => `
                <div class="match-item">
                    <div class="match-job">${match.job}</div>
                    <div class="match-score">${match.score}%</div>
                </div>
            `).join('');
            
            // 滚动到结果区域
            document.getElementById('matchResult').scrollIntoView({ behavior: 'smooth' });
        };
        
        // 显示职位发布模态框
        const showJobModal = () => {
            document.getElementById('jobModal').style.display = 'flex';
        };
        
        // 隐藏职位发布模态框
        const hideJobModal = () => {
            document.getElementById('jobModal').style.display = 'none';
        };
        
        // 添加新职位
        const addNewJob = () => {
            const title = document.getElementById('jobTitle').value;
            const type = document.getElementById('jobType').value;
            const department = document.getElementById('jobDepartment').value;
            const location = document.getElementById('jobLocation').value;
            const salary = document.getElementById('jobSalary').value;
            const description = document.getElementById('jobDescription').value;
            const requirements = document.getElementById('jobRequirements').value;
            
            if (!title || !department || !location || !salary) {
                alert('请填写所有必填字段');
                return;
            }
            
            const now = new Date();
            const newJob = {
                id: managedJobs.length + 1,
                title: title,
                department: department,
                type: type === 'fulltime' ? '全职' : type === 'parttime' ? '兼职' : '实习',
                location: location,
                salary: salary,
                posted: `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2, '0')}-${now.getDate().toString().padStart(2, '0')}`,
                applicants: 0,
                status: "招聘中"
            };
            
            managedJobs.push(newJob);
            updateJobManageGrid();
            hideJobModal();
            
            // 重置表单
            document.getElementById('jobTitle').value = '';
            document.getElementById('jobDepartment').value = '';
            document.getElementById('jobLocation').value = '';
            document.getElementById('jobSalary').value = '';
            document.getElementById('jobDescription').value = '';
            document.getElementById('jobRequirements').value = '';
        };
        
        // 登录功能
        const login = (type) => {
            const usernameField = type === 'candidate' ? 'candidateUsername' : 'recruiterUsername';
            const passwordField = type === 'candidate' ? 'candidatePassword' : 'recruiterPassword';
            
            const username = document.getElementById(usernameField).value;
            const password = document.getElementById(passwordField).value;
            
            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }
            
            // 模拟登录成功
            userType = type;
            currentUser = {
                username: username,
                type: type,
                name: type === 'candidate' ? '张伟' : '李明',
                company: type === 'recruiter' ? 'XX科技公司' : null
            };
            
            // 显示主界面
            document.getElementById('loginPage').style.display = 'none';
            
            if (type === 'candidate') {
                document.getElementById('candidateContainer').style.display = 'flex';
                switchCandidatePage('jobs');
            } else {
                document.getElementById('recruiterContainer').style.display = 'flex';
                switchRecruiterPage('candidates');
            }
        };
        
        // 注册功能
        const register = (type) => {
            const usernameField = type === 'candidate' ? 'regCandidateUsername' : 'regRecruiterUsername';
            const passwordField = type === 'candidate' ? 'regCandidatePassword' : 'regRecruiterPassword';
            const confirmField = type === 'candidate' ? 'regCandidateConfirm' : 'regRecruiterConfirm';
            const emailField = type === 'candidate' ? 'regCandidateEmail' : 'regRecruiterEmail';
            
            const username = document.getElementById(usernameField).value;
            const password = document.getElementById(passwordField).value;
            const confirm = document.getElementById(confirmField).value;
            const email = document.getElementById(emailField).value;
            const company = type === 'recruiter' ? document.getElementById('regCompany').value : null;
            
            if (!username || !password || !confirm || !email) {
                alert('请填写所有必填字段');
                return;
            }
            
            if (password !== confirm) {
                alert('两次输入的密码不一致');
                return;
            }
            
            if (type === 'recruiter' && !company) {
                alert('请填写公司名称');
                return;
            }
            
            // 模拟注册成功
            alert('注册成功！请登录');
            showLoginPage();
        };
        
        // 忘记密码功能
        const forgotPassword = () => {
            const email = document.getElementById('forgotEmail').value;
            
            if (!email) {
                alert('请输入电子邮箱');
                return;
            }
            
            // 模拟发送重置链接
            alert(`重置链接已发送至 ${email}，请查收邮件并按照指示操作`);
            showLoginPage();
        };
        
        // 退出登录
        const logout = () => {
            userType = '';
            currentUser = null;
            
            // 隐藏所有主界面
            document.getElementById('candidateContainer').style.display = 'none';
            document.getElementById('recruiterContainer').style.display = 'none';
            
            // 显示登录页面
            showLoginPage();
        };
        
        // 初始化页面
        initPages();
    </script>
</body>
</html>