楂樿€冨織鎰垮～鎶ュ姪鎵?/title> <style> /* ======================================================== 馃煝鐢佃剳绔粍閲戞瘮渚?+ 澶ф皵楂樼骇瑙嗚琛ヤ竵锛堟墜鏈虹瀹屽叏涓嶅彈褰卞搷锛? ======================================================== */ @media (min-width: 1024px) { /* 1. 缁欑綉椤靛ぇ鑳屾櫙鎹㈡垚鏋佹贰鐨勭幇浠ｅ寲绉戞妧鐏拌摑寰笎鍙橈紝褰诲簳鍛婂埆姝荤櫧 */ body { background: linear-gradient(180deg, #f0f4f8 0%, #f3f4f6 100%) !important; } /* 2. 椤甸潰涓诲鍣ㄥ搴﹂檺鍒?*/ body > div, .max-w-md, .max-w-screen-md, [class*="max-w-"] { max-width: 1450px !important; width: 92% !important; margin-left: auto !important; margin-right: auto !important; } /* 3. 鏍稿績鏁戞槦锛氭妸涓婃柟鐨勮緭鍏ヨ〃鍗曘€佷笅鏂圭殑缁撴灉鍖哄煙锛堥€氬父鏄櫧搴?div锛夊彉鎴愰珮绾ф偓娴崱鐗?*/ body > div > div, form, .bg-white { border-radius: 16px !important; /* 鏇村渾娑﹂ケ婊＄殑杞 */ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03) !important; /* 鏌斿拰鐨勯珮绾у井闃村奖 */ border: 1px solid rgba(255, 255, 255, 0.8) !important; /* 鐧借壊鍐呰竟绾匡紝澧炲姞绮捐嚧鎰?*/ padding: 28px !important; /* 鐢佃剳绔唴杈硅窛鍔犲锛屾洿鏈夊懠鍚告劅 */ } /* 4. 璁╅《閮ㄧ殑绯荤粺澶ф爣棰樻洿鏈夊垎閲?*/ h1, .text-xl, .text-2xl { letter-spacing: 2px !important; font-weight: 800 !important; background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* 缁欐爣棰樺姞涓婃笎鍙橀噾韬?*/ } /* 5. 浼樺寲琛ㄦ牸澶撮儴锛坱head tr锛夛紝璁╁畠甯︽湁涓€灞傛贰娣＄殑鐏拌摑鑹查珮绾ц川鎰熷簳鑹?*/ thead tr { background-color: #f8fafc !important; border-bottom: 2px solid #e2e8f0 !important; } thead th { padding: 14px 8px !important; color: #475569 !important; font-weight: 700 !important; } /* 6. 瑙ｉ櫎琛ㄦ牸瀹瑰櫒闄愬埗 */ .overflow-x-auto { max-width: 100% !important; width: 100% !important; } /* 7. 琛ㄦ牸鏈韩鑷€傚簲 */ table { table-layout: auto !important; width: 100% !important; min-width: 1050px !important; } /* 8. 褰诲簳缁堢粨琛ㄦ牸鍐呭鏍″拰涓撲笟琚己琛岀旱鍚戞媺浼告垚鈥滀竴瀛楅暱鏉♀€濈殑灏村艾 */ .td-school { min-width: 180px !important; /* 缁欏鏍¤冻澶熺殑妯箙瀹藉害锛岃鍚嶅瓧鑸掓湇鍦拌汉骞充竴鏉＄嚎 */ white-space: nowrap !important; /* 寮哄埗涓嶆崲琛?*/ } .td-sp { min-width: 260px !important; /* 涓撲笟鍚嶇О閫氬父姣旇緝闀匡紝缁欒冻 260px 绌洪棿 */ white-space: normal !important; /* 鍏佽姝ｅ父鎸夎瘝鎴栨爣鐐规崲琛岋紝浣嗙粷涓嶅彉鎴愬崟瀛楀瀭鐩撮暱鏉?*/ } } /* 鈹€鈹€ Layout 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .wrap { max-width: 740px; margin: 0 auto; padding: 28px 14px 48px; } .card { background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 1px 4px rgba(0,0,0,.06); padding: 24px; margin-bottom: 16px; } .row { margin-bottom: 24px; } /* 鈹€鈹€ Header 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .page-title { font-size: 26px; font-weight: 700; text-align: center; color: #111827; } .page-sub { text-align: center; color: #9ca3af; font-size: 13px; margin-top: 6px; } /* 鈹€鈹€ Labels & inputs 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 10px; } .label .hint { font-weight: 400; color: #9ca3af; margin-left: 6px; } select, input[type=number] { width: 100%; border: 1px solid #d1d5db; border-radius: 8px; padding: 9px 12px; font-size: 14px; color: #111827; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; } select:focus, input[type=number]:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); } input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } .score-row { display: flex; align-items: flex-start; gap: 12px; } .score-row input { width: 130px; flex-shrink: 0; } .rank-hint { font-size: 13px; color: #6b7280; padding-top: 10px; line-height: 1.4; } /* 鈹€鈹€ Pill grids (checkbox / radio) 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .pills { display: flex; flex-wrap: wrap; gap: 8px; } .pills label { cursor: pointer; } .pills input { display: none; } .pill { display: block; border: 1.5px solid #e5e7eb; border-radius: 20px; padding: 5px 14px; font-size: 13px; color: #6b7280; background: #f9fafb; transition: all .15s; user-select: none; } .pill:hover { border-color: #93c5fd; background: #eff6ff; color: #2563eb; } .pills input:checked + .pill { background: #eff6ff; border-color: #3b82f6; color: #1d4ed8; font-weight: 600; } /* 鏈渷 special pill */ .pill-home { border-color: #f59e0b; color: #92400e; background: #fffbeb; } .pill-home:hover { border-color: #d97706; background: #fef3c7; } .pills input:checked + .pill-home { background: #fef3c7; border-color: #d97706; color: #78350f; font-weight: 600; } /* Single-select (radio) 鈥?larger pills */ .pills.radio-lg .pill { padding: 7px 18px; font-size: 14px; } /* 鈹€鈹€ Card-style radio grid (weight presets) 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .card-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; } .card-grid label { cursor: pointer; } .card-grid input { display: none; } .card-opt { border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 12px 8px; text-align: center; background: #f9fafb; transition: all .15s; } .card-opt:hover { border-color: #93c5fd; background: #f0f9ff; } .card-grid input:checked + .card-opt { border-color: #3b82f6; background: #eff6ff; } .card-opt .ct { font-size: 14px; font-weight: 600; color: #111827; } .card-opt .cd { font-size: 11px; color: #9ca3af; margin-top: 3px; } .card-grid input:checked + .card-opt .ct { color: #1d4ed8; } /* 鈹€鈹€ Collapsible family section 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .toggle-btn { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #2563eb; padding: 14px 0 10px; border-top: 1.5px dashed #e5e7eb; margin-top: 8px; text-align: left; } .toggle-btn .arrow { display: inline-block; transition: transform .2s; font-size: 11px; } .toggle-btn.open .arrow { transform: rotate(90deg); } .fam-body { display: none; padding-top: 4px; } .fam-body.open { display: block; } .fam-body .row { margin-bottom: 20px; } /* 鈹€鈹€ Submit button 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .btn-submit { width: 100%; background: #2563eb; color: #fff; font-size: 16px; font-weight: 700; padding: 15px; border: none; border-radius: 12px; cursor: pointer; transition: background .15s; letter-spacing: .02em; } .btn-submit:hover:not(:disabled) { background: #1d4ed8; } .btn-submit:disabled { opacity: .5; cursor: not-allowed; } /* 鈹€鈹€ Results: summary bar 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .sum-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .sum-rank { font-size: 26px; font-weight: 700; color: #111827; } .sum-label { font-size: 12px; color: #9ca3af; } .sum-tags { display: flex; gap: 8px; flex-wrap: wrap; } .sum-cvg { margin-left: auto; font-size: 13px; color: #6b7280; white-space: nowrap; } .sum-cvg b { color: #111827; } .alert-warn { margin-top: 14px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 8px; padding: 10px 14px; font-size: 12px; } .alert-info { margin-top: 8px; font-size: 12px; color: #9ca3af; } .tag { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; } .tag-c { background: #fee2e2; color: #b91c1c; } .tag-w { background: #dcfce7; color: #15803d; } .tag-b { background: #dbeafe; color: #1d4ed8; } /* 鈹€鈹€ Advisor card 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .adv-card { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 12px; padding: 18px; margin-bottom: 16px; } .adv-card h3 { font-size: 14px; font-weight: 700; color: #15803d; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .adv-narrative { font-size: 13px; color: #1e293b; line-height: 1.8; white-space: pre-wrap; max-height: 220px; overflow-y: auto; } .adv-majors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .adv-major { background: #fff; border: 1px solid #86efac; border-radius: 8px; padding: 7px 13px; font-size: 12px; } .adv-major .mn { font-weight: 600; color: #15803d; } .adv-major .mr { color: #6b7280; font-size: 11px; margin-top: 2px; } .adv-major.rec-鎺ㄨ崘 { border-color: #4ade80; } .adv-major.rec-鍙€冭檻 { border-color: #86efac; } .adv-major.rec-璋ㄦ厧 { border-color: #fde68a; background: #fffbeb; } /* 鈹€鈹€ Recommendation table 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } thead tr { border-bottom: 2px solid #f3f4f6; } th { padding: 10px 12px; text-align: left; font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; } th.r, td.r { text-align: right; } th.c, td.c { text-align: center; } td { padding: 10px 12px; border-bottom: 1px solid #f9fafb; } tr.r-c { background: #fff5f5; } tr.r-w { background: #f0fdf4; } tr.r-b { background: #eff6ff; } tr.r-mm { opacity: .72; } tr:hover td { filter: brightness(.96); } .td-school { font-weight: 500; color: #111827; } .td-city { color: #6b7280; font-size: 12px; } .td-sp { color: #4b5563; font-size: 12px; } .risk-note { margin-top: 2px; color: #b45309; font-size: 11px; line-height: 1.35; } .td-tier { color: #9ca3af; font-size: 11px; } .td-p { font-family: 'SF Mono', Consolas, monospace; color: #374151; } .td-util { font-family: 'SF Mono', Consolas, monospace; color: #9ca3af; font-size: 12px; } .td-seq { color: #9ca3af; font-size: 12px; } .foot-note { font-size: 11px; color: #9ca3af; text-align: center; margin-top: 18px; } /* 鈹€鈹€ Debug panel 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .debug { display: none; margin-top: 10px; background: #111827; color: #34d399; border-radius: 10px; padding: 14px; font-family: Consolas, monospace; font-size: 11px; overflow-x: auto; } /* 鈹€鈹€ Hidden 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .hidden { display: none !important; } /* 鈹€鈹€ Mobile result cards (hidden on desktop) 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .mob-rec-list { display: none; } .mob-card { border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; background: #fff; border-left: 4px solid #e5e7eb; } .mob-card.r-c { border-left-color: #fca5a5; } .mob-card.r-w { border-left-color: #86efac; } .mob-card.r-b { border-left-color: #93c5fd; } .mob-card.r-mm { opacity: .72; } .mob-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .mob-card-seq { color: #9ca3af; font-size: 12px; min-width: 22px; } .mob-card-school { font-weight: 600; color: #111827; flex: 1; font-size: 14px; } .mob-card-city { color: #9ca3af; font-size: 12px; } .mob-card-major { color: #4b5563; font-size: 13px; padding: 3px 0 5px 30px; } .mob-card-note { color: #b45309; font-size: 11px; padding: 0 0 5px 30px; line-height: 1.35; } .mob-card-footer { display: flex; align-items: center; gap: 10px; padding-left: 30px; } .mob-card-tier { color: #9ca3af; font-size: 11px; } .mob-card-p { font-weight: 600; color: #374151; font-size: 13px; } /* 鈹€鈹€ Mobile 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ @media (max-width: 580px) { .card-grid { grid-template-columns: repeat(2,1fr); } .sum-cvg { margin-left: 0; } .hide-mob { display: none; } .page-title { font-size: 22px; } /* Results: switch table 鈫?cards */ .table-wrap { display: none; } .mob-rec-list { display: block; } /* Advisor narrative: no inner scroll on mobile */ .adv-narrative { max-height: none; overflow-y: visible; } } </style> </head> <body> <div class="wrap"> <div style="box-sizing: border-box; width: 100%; background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(29, 78, 216, 0.75) 50%, rgba(245, 158, 11, 0.25) 100%), radial-gradient(circle at 80% 20%, rgba(253, 224, 71, 0.25) 0%, transparent 50%), url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat; padding: 58px 24px; text-align: center; border-radius: 16px; margin-bottom: 26px; box-shadow: 0 12px 30px -5px rgba(30, 58, 138, 0.15); border: 1px solid rgba(255, 255, 255, 0.15);"> <p class="page-title" style="font-size: 34px; font-weight: 800; letter-spacing: 5px; color: #ffffff !important; margin: 0; text-shadow: 0 4px 15px rgba(15, 23, 42, 0.6); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;"> 楂樿€冨織鎰垮～鎶ュ姪鎵? </p> <p class="page-sub" style="font-size: 14.5px; color: #f8fafc !important; letter-spacing: 3px; margin-top: 12px; margin-bottom: 0; font-weight: 600; text-shadow: 0 2px 8px rgba(15, 23, 42, 0.5); opacity: 0.95;"> 杈撳叆楂樿€冨垎鏁?路鏅鸿兘鐢熸垚鍐?路绋?路淇濆織鎰跨粍鍚?路鍔╀綘鍦嗘ⅵ鐞嗘兂澶у </p> </div>  <div class="card">  <div class="row"> <label class="label">1. 鐪佷唤 / 鐩磋緰甯?/label> <select id="province"> <option value="">-- 璇烽€夋嫨 --</option> </select> </div>  <div id="cat-row" class="row hidden"> <label class="label">2. 鑰冭瘯绫诲埆</label> <div id="cat-opts"></div> </div>  <div id="mode-note-row" class="row hidden"> <div id="mode-note" style="background:#fffbeb;border:1.5px solid #fcd34d;border-radius:8px;padding:10px 14px;font-size:13px;color:#92400e;line-height:1.5"></div> </div>  <div id="xuanke-row" class="row hidden"> <label class="label">2b. 閫夎€冪鐩?/label> <div id="xuanke-opts"></div> <div style="font-size:12px;color:#6b7280;margin-top:4px" id="xuanke-hint"></div> </div>  <div id="score-row" class="row hidden"> <label class="label">3. 楂樿€冩€诲垎</label> <div class="score-row"> <input id="score" type="number" min="1" max="750" step="1" placeholder="渚嬶細580"> <div id="rank-hint" class="rank-hint"></div> </div> </div>  <div class="row"> <label class="label">4. 鍙帴鍙楃殑鏈€浣庡鏍″眰娆?/label> <select id="tier"> <option value="985">985 鍙婁互涓?/option> <option value="211">211 鍙婁互涓?/option> <option value="鍙屼竴娴?>鍙屼竴娴?/option> <option value="鏈" selected>鏈锛堜笉闄愬眰娆★級</option> <option value="涓撶">涓嶉檺锛堝惈涓撶锛?/option> </select> </div>  <div class="row"> <label class="label">5. 鎰忓悜鍩庡競 <span class="hint">锛堝彲澶氶€夛紝涓嶉€夊垯涓嶉檺锛?/span></label> <div id="cities" class="pills"></div> </div>  <div class="row"> <label class="label">6. 鎰忓悜涓撲笟鏂瑰悜 <span class="hint">锛堝彲澶氶€夛紝涓嶉€夊垯涓嶉檺锛?/span></label> <div id="majors" class="pills"></div> </div>  <div class="row"> <label class="label">7. 濉姤渚ч噸</label> <div id="weights" class="card-grid"></div> </div>  <button class="toggle-btn" id="fam-toggle" onclick="toggleFam()"> <span class="arrow">鈻?/span> 绮惧噯鎺ㄨ崘锛堝彲閫夛級鈥?濉啓鑳屾櫙淇℃伅锛岀郴缁熷皢涓轰綘鎺ㄨ崘鏇村尮閰嶇殑涓撲笟鏂瑰悜 </button> <div class="fam-body" id="fam-body">  <div class="row"> <label class="label">8. 瀹跺涵缁忔祹鐘跺喌</label> <div class="pills radio-lg"> <label><input type="radio" name="eco" value="璐洶"><span class="pill">鍐滄潙/璐洶</span></label> <label><input type="radio" name="eco" value="宸ヨ柂" checked><span class="pill">鏅€氬伐钖?/span></label> <label><input type="radio" name="eco" value="涓骇"><span class="pill">涓骇</span></label> <label><input type="radio" name="eco" value="瀵岃"><span class="pill">瀵岃</span></label> </div> </div>  <div class="row"> <label class="label">9. 鐖舵瘝鑱屼笟鑳屾櫙 <span class="hint">锛堝彲澶氶€夛級</span></label> <div class="pills"> <label><input type="checkbox" name="bg" value="government"><span class="pill">鏀垮簻/鍏姟鍛?/span></label> <label><input type="checkbox" name="bg" value="medical"><span class="pill">鍖荤枟/鍖荤敓鎶ゅ＋</span></label> <label><input type="checkbox" name="bg" value="legal"><span class="pill">娉曞緥/寰嬪笀娉曞畼</span></label> <label><input type="checkbox" name="bg" value="finance"><span class="pill">閲戣瀺/閾惰璐㈠姟</span></label> <label><input type="checkbox" name="bg" value="technical"><span class="pill">宸ョ▼/IT/鐮斿彂</span></label> <label><input type="checkbox" name="bg" value="business"><span class="pill">浼佷笟涓?鍒涗笟</span></label> <label><input type="checkbox" name="bg" value="education"><span class="pill">鏁欏笀/鏁欒偛</span></label> <label><input type="checkbox" name="bg" value="military"><span class="pill">鍐涗汉/璀﹀療</span></label> </div> </div>  <div class="row"> <label class="label">10. 鏈€閲嶈鐨勮亴涓氱洰鏍?/label> <div class="pills radio-lg"> <label><input type="radio" name="career" value="灏变笟绋冲畾"><span class="pill">灏变笟绋冲畾</span></label> <label><input type="radio" name="career" value="鏀跺叆鏈€澶у寲"><span class="pill">鏀跺叆鏈€澶у寲</span></label> <label><input type="radio" name="career" value="涓汉鍙戝睍"><span class="pill">涓汉鍙戝睍/鏅嬪崌</span></label> <label><input type="radio" name="career" value="涓汉鍏磋叮"><span class="pill">鍏磋叮浼樺厛</span></label> <label><input type="radio" name="career" value="绀句細鍦颁綅"><span class="pill">绀句細鍦颁綅</span></label> <label><input type="radio" name="career" value="鏈‘瀹? checked><span class="pill">杩樻病鎯冲ソ</span></label> </div> </div>  <div class="row"> <label class="label">11. 蹇楁効濉姤椋庨櫓鍋忓ソ</label> <div class="pills radio-lg"> <label><input type="radio" name="risk" value="淇濆畧"><span class="pill">淇濆畧锛堝濉畨鍏ㄧ嚎浠ヤ笅锛?/span></label> <label><input type="radio" name="risk" value="绋冲仴" checked><span class="pill">绋冲仴锛堝啿绋充繚鍧囪　锛?/span></label> <label><input type="radio" name="risk" value="婵€杩?><span class="pill">婵€杩涳紙澶氬啿楂橈級</span></label> </div> </div>  <div class="row"> <label class="label">12. 鍑哄浗璁″垝</label> <div class="pills radio-lg"> <label><input type="radio" name="overseas" value="鏃犺鍒? checked><span class="pill">鏃犺鍒掞紝鍏ㄥ浗鍐?/span></label> <label><input type="radio" name="overseas" value="鐮旂┒鐢熷嚭鍥?><span class="pill">鏈鍥藉唴锛岀/鍗氬嚭鍥?/span></label> <label><input type="radio" name="overseas" value="鏈鍑哄浗"><span class="pill">鏈灏卞嚭鍥斤紝楂樿€冧綔淇濆簳</span></label> </div> </div>  <div class="row"> <label class="label">13. 璇荤爺/璇诲崥鎰忓悜</label> <div class="pills radio-lg"> <label><input type="radio" name="postgrad" value="鍚?><span class="pill">鏈姣曚笟鐩存帴宸ヤ綔</span></label> <label><input type="radio" name="postgrad" value="瑙嗘儏鍐? checked><span class="pill">瑙嗘儏鍐佃€屽畾</span></label> <label><input type="radio" name="postgrad" value="鑰冪爺"><span class="pill">璁″垝鑰冪爺锛堢澹級</span></label> <label><input type="radio" name="postgrad" value="鑰冨崥"><span class="pill">璁″垝璇诲崥锛堢洿鍗?纭曞崥锛?/span></label> </div> </div>  <div class="row" style="margin-bottom:8px"> <label class="label" style="display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:400"> <input type="checkbox" id="first_gen" style="width:16px;height:16px;cursor:pointer"> <span style="color:#374151">鎴戞槸瀹堕噷绗竴涓€冨ぇ瀛︾殑锛堢涓€浠ｅぇ瀛︾敓锛?/span> </label> </div> </div>  <button class="btn-submit" id="submit-btn" onclick="submitForm()">鐢熸垚蹇楁効鎺ㄨ崘</button> </div>  <div class="debug" id="debug"></div>  <div id="results" class="hidden">  <div class="card"> <div class="sum-bar"> <div> <div class="sum-label">鍏ㄧ渷鎺掑悕绾?/div> <div><span id="s-rank" class="sum-rank"></span> <span class="sum-label">鍚?/span></div> </div> <div class="sum-tags"> <span id="s-c" class="tag tag-c"></span> <span id="s-w" class="tag tag-w"></span> <span id="s-b" class="tag tag-b"></span> </div> <div class="sum-cvg">瑕嗙洊姒傜巼 <b id="s-cvg"></b></div> </div> <div id="s-warn" class="alert-warn hidden"></div> <div id="s-sparse" class="alert-warn hidden"></div> <div id="s-info" class="alert-info hidden"></div> <div id="s-top-note" class="alert-info hidden"></div> </div>  <div id="adv-card" class="adv-card hidden"> <h3>馃幆涓撲笟鏂瑰悜寤鸿</h3> <div id="adv-narrative" class="adv-narrative"></div> <div id="adv-majors" class="adv-majors"></div> </div>  <div id="mob-recs" class="mob-rec-list"></div>  <div class="card" style="padding:0;overflow:hidden"> <div class="table-wrap"> <table> <thead> <tr> <th class="r">#</th> <th>瀛︽牎浠ｅ彿</th> <th>瀛︽牎</th> <th>褰曞彇鏈€浣庡垎</th> <th>鍩庡競</th> <th>涓撲笟浠ｅ彿</th> <th>涓撲笟</th> <th>涓撲笟褰曞彇鍒?/th> <th>浣嶆</th> <th class="hide-mob">灞傛</th> <th class="r">褰曞彇姒傜巼</th> <th class="c">妗ｄ綅</th> <th class="r hide-mob">鏁堢敤</th> </tr> </thead> <tbody id="tbody"></tbody> </table> </div> </div> <p class="foot-note"> 鏁版嵁鏉ユ簮锛氬悇鐪?2020鈥?025 骞村疄闄呭綍鍙栨暟鎹€備粎渚涘弬鑰冿紝璇风粨鍚堥櫌鏍″畼缃戞渶鏂扮畝绔犵患鍚堝垽鏂€? </p> </div> </div> <script> // 鈹€鈹€ Static data (mirrors engine/profile.py) 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ const PROVINCES = [ {id:11,name:'鍖椾含', cats:['缁煎悎'], mode:'3+3'}, {id:12,name:'澶╂触', cats:['缁煎悎'], mode:'3+3'}, {id:13,name:'娌冲寳', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:14,name:'灞辫タ', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:15,name:'鍐呰挋鍙?,cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:21,name:'杈藉畞', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:22,name:'鍚夋灄', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:23,name:'榛戦緳姹?,cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:31,name:'涓婃捣', cats:['缁煎悎'], mode:'3+3'}, {id:32,name:'姹熻嫃', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:33,name:'娴欐睙', cats:['缁煎悎'], mode:'3+3'}, {id:34,name:'瀹夊窘', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:35,name:'绂忓缓', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:36,name:'姹熻タ', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:37,name:'灞变笢', cats:['缁煎悎'], mode:'3+3'}, {id:41,name:'娌冲崡', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:42,name:'婀栧寳', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:43,name:'婀栧崡', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:44,name:'骞夸笢', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:45,name:'骞胯タ', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:46,name:'娴峰崡', cats:['缁煎悎'], mode:'3+3'}, {id:50,name:'閲嶅簡', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:51,name:'鍥涘窛', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:52,name:'璐靛窞', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:53,name:'浜戝崡', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:54,name:'瑗胯棌', cats:['鐞嗙','鏂囩'], mode:'鏂囩悊绉?}, {id:61,name:'闄曡タ', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:62,name:'鐢樿們', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:63,name:'闈掓捣', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:64,name:'瀹佸', cats:['鐗╃悊绫?,'鍘嗗彶绫?], mode:'3+1+2'}, {id:65,name:'鏂扮枂', cats:['鐞嗙','鏂囩'], mode:'鏂囩悊绉?}, ]; // Province application mode notes const PROVINCE_NOTES = { 15: '馃搵鍐呰挋鍙?025骞磋捣瀹炴柦鏂伴珮鑰冿紙3+1+2锛夛紝鍚屾鏀逛负"闄㈡牎涓撲笟缁?骞宠蹇楁効锛屽叡45涓織鎰夸綅銆傚師鍔ㄦ€佸織鎰匡紙鎶㈡哗鐧婚檰锛夊埗搴﹀凡缁堟銆?, 46: '馃搵娴峰崡瀹炶3+3閫夌妯″紡锛岃€冪敓鑷敱閫夋嫨3闂ㄩ€夎€冪鐩紝褰曞彇浠?缁煎悎"绫诲埆濉姤锛屼笉鍖哄垎鐗╃悊绫?鍘嗗彶绫汇€?, 54: '馃搵瑗胯棌2025骞翠粛涓轰紶缁熸枃鐞嗙妯″紡锛堝皻鏈疄鏂芥柊楂樿€冩敼闈╋級锛屽垎鐞嗙/鏂囩涓ょ被濉姤銆傗殸锔?瑗胯棌鎷涚敓鏁版嵁瑕嗙洊鏈夐檺锛屾帹鑽愮粨鏋滃彲鑳芥瀬灏戯紝璇蜂互鍚勯珮鏍″畼缃戞嫑鐢熺畝绔犱负涓昏鍙傝€冦€?, 11: '馃搵鍖椾含瀹炶"闄㈡牎涓撲笟缁?骞宠蹇楁効銆傝嫢鍕鹃€?涓嶆湇浠庝笓涓氳皟鍓?锛屾湭杈惧埌缁勫唴涓撲笟绾垮垯鐩存帴閫€妗ｏ紝瀛樺湪鏃犲鍙笂椋庨櫓锛屽缓璁皑鎱庡鐞嗚皟鍓傞€夐」銆?, 12: '馃搵澶╂触瀹炶"闄㈡牎涓撲笟缁?骞宠蹇楁効锛屼互涓撲笟缁勪负鍗曚綅濉姤锛岀粍鍐呬笉璁捐皟鍓傘€?, 31: '馃搵涓婃捣瀹炶"闄㈡牎涓撲笟缁?骞宠蹇楁効锛屼互涓撲笟缁勪负鍗曚綅濉姤锛岀粍鍐呬笓涓氭寜鍒嗘暟浠庨珮鍒颁綆褰曞彇銆?, 33: '馃搵娴欐睙瀹炶"涓撲笟+瀛︽牎"骞宠蹇楁効锛屽叡80涓織鎰夸綅锛屼互涓撲笟涓哄崟浣嶅～鎶ワ紝鏃犺皟鍓傞闄┿€?, 37: '馃搵灞变笢瀹炶"涓撲笟+瀛︽牎"骞宠蹇楁効锛屽叡96涓織鎰夸綅锛堝叏鍥芥渶澶氾級锛屼互涓撲笟涓哄崟浣嶅～鎶ワ紝寤鸿鍏呭垎鍒╃敤鍚嶉銆?, 65: '馃搵鏂扮枂淇濈暀浼犵粺鏂囩悊绉戦珮鑰冧綋绯伙紙灏氭湭鏀归潻锛夈€傗殸锔?鏂扮枂鍙婅タ閮ㄩ儴鍒嗙渷浠界殑闄㈡牎褰曞彇鏁版嵁瑕嗙洊鏈夐檺锛岀郴缁熸帹鑽愮粨鏋滃彲鑳藉亸灏戯紝璇蜂互鍚勯櫌鏍″畼缃戞渶鏂版嫑鐢熺畝绔犱负涓昏鍙傝€冦€?, }; // Elective subject codes and names const XUANKE_ALL = [ {code:'70000', name:'鐗╃悊'}, {code:'70001', name:'鍖栧'}, {code:'70002', name:'鐢熺墿'}, {code:'70003', name:'鏀挎不'}, {code:'70004', name:'鍘嗗彶'}, {code:'70005', name:'鍦扮悊'}, {code:'70006', name:'鎶€鏈?}, ]; const CITIES = [ '鍖椾含','涓婃捣','骞垮窞','娣卞湷','鎴愰兘','鏉窞','姝︽眽','瑗垮畨', '鍗椾含','澶╂触','閲嶅簡','鑻忓窞','闀挎矙','閮戝窞','闈掑矝','娴庡崡', '鍚堣偉','鍘﹂棬','绂忓窞','鍗楁槍','鍝堝皵婊?,'娌堥槼','闀挎槬','鏄嗘槑', '璐甸槼','鍗楀畞','鐭冲搴?,'澶師','鍏板窞','涔岄瞾鏈ㄩ綈','娴峰彛', '鍛煎拰娴╃壒','瑗垮畞','閾跺窛','鎷夎惃', ]; // Province 鈫?representative cities (for 鏈渷 pill label only 鈥?backend matches on province_id, // so ALL schools in the province are boosted regardless of city) const PROVINCE_CITY_MAP = { 11:['鍖椾含'], 12:['澶╂触'], 13:['鐭冲搴?], 14:['澶師'], 15:['鍛煎拰娴╃壒'], 21:['娌堥槼'], 22:['闀挎槬'], 23:['鍝堝皵婊?], 31:['涓婃捣'], 32:['鍗椾含','鑻忓窞'], 33:['鏉窞'], 34:['鍚堣偉'], 35:['绂忓窞','鍘﹂棬'], 36:['鍗楁槍'], 37:['娴庡崡','闈掑矝'], 41:['閮戝窞'], 42:['姝︽眽'], 43:['闀挎矙'], 44:['骞垮窞','娣卞湷'], 45:['鍗楀畞'], 46:['娴峰彛'], 50:['閲嶅簡'], 51:['鎴愰兘'], 52:['璐甸槼'], 53:['鏄嗘槑'], 54:['鎷夎惃'], 61:['瑗垮畨'], 62:['鍏板窞'], 63:['瑗垮畞'], 64:['閾跺窛'], 65:['涔岄瞾鏈ㄩ綈'], }; const MAJORS = [ {label:'璁＄畻鏈?/ AI / 鏁版嵁', kw:['璁＄畻鏈?,'杞欢','浜哄伐鏅鸿兘','鏁版嵁','缃戠粶瀹夊叏','鐗╄仈缃?]}, {label:'鐢靛瓙 / 閫氫俊 / 鑺墖', kw:['鐢靛瓙','閫氫俊','闆嗘垚鐢佃矾','寰數瀛?,'鍗婂浣?]}, {label:'鏈烘 / 鑷姩鍖?, kw:['鏈烘','鑷姩鍖?,'鏈哄櫒浜?,'鏅鸿兘鍒堕€?,'杞﹁締宸ョ▼']}, {label:'鍦熸湪 / 寤虹瓚 / 瑙勫垝', kw:['鍦熸湪','寤虹瓚瀛?,'鍩庝埂瑙勫垝','宸ョ▼绠＄悊']}, {label:'缁忔祹 / 閲戣瀺 / 浼氳', kw:['缁忔祹','閲戣瀺','璐㈠姟','浼氳','瀹¤','淇濋櫓']}, {label:'宸ュ晢 / 绠＄悊 / 甯傚満', kw:['宸ュ晢','绠＄悊','甯傚満钀ラ攢','浜哄姏璧勬簮','鐢靛瓙鍟嗗姟']}, {label:'娉曞', kw:['娉曞','娉曞緥','鐭ヨ瘑浜ф潈','鍥介檯娉?]}, {label:'鍖诲 / 鎶ょ悊 / 鑽', kw:['涓村簥','鍙ｈ厰','鎶ょ悊','鑽','鍖诲','涓尰','鍏叡鍗敓']}, {label:'甯堣寖 / 鏁欒偛', kw:['甯堣寖','鏁欒偛','瀛﹀墠鏁欒偛','浣撹偛']}, {label:'鏂囧彶鍝?/ 涓枃', kw:['涓枃','姹夎','鏂囧','鍘嗗彶瀛?,'鍝插']}, {label:'澶栬', kw:['鑻辫','缈昏瘧','鏃ヨ','娉曡','寰疯','闊╄']}, {label:'鐞嗗锛堟暟鐞嗗寲鐢燂級', kw:['鏁板','缁熻','鐗╃悊瀛?,'鍖栧','鐢熺墿绉戝']}, {label:'鏂伴椈 / 浼犲獟', kw:['鏂伴椈','浼犲獟','浼犳挱瀛?,'骞垮憡','鍑虹増']}, {label:'鑹烘湳 / 璁捐', kw:['鑹烘湳','璁捐','缇庢湳','鍔ㄧ敾']}, {label:'鍐滄灄 / 鐜', kw:['鍐滃','鏋楀','鍥壓','鐜','鐢熸€?]}, ]; const WEIGHTS = [ {label:'瀛︽牎浼樺厛', desc:'鍚嶆皵/灞傛涓轰富', wt:0.70, wc:0.20, wm:0.10}, {label:'涓撲笟浼樺厛', desc:'鎰忓悜涓撲笟涓轰富', wt:0.30, wc:0.20, wm:0.50}, {label:'鍩庡競浼樺厛', desc:'鎰忓悜鍩庡競涓轰富', wt:0.30, wc:0.55, wm:0.15}, {label:'鍧囪　', desc:'涓夋柟鍧囪　', wt:0.45, wc:0.30, wm:0.25}, ]; // 鈹€鈹€ API base 鈥?always same-origin (app.py serves static + API from one port) const API = ''; // 鈹€鈹€ Build form 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ (function buildForm() { // Province const pSel = document.getElementById('province'); PROVINCES.forEach(p => { const o = document.createElement('option'); o.value = p.id; o.textContent = p.name; pSel.appendChild(o); }); // Cities 鈥?鏈渷 first (hidden until province selected), then specific cities const cd = document.getElementById('cities'); cd.innerHTML = `<label id="city-home-wrap" class="hidden"> <input type="checkbox" id="city-home" value="__home__"> <span class="pill pill-home" id="city-home-pill">鏈渷</span> </label>`; CITIES.forEach(c => { cd.innerHTML += `<label><input type="checkbox" name="city" value="${c}"><span class="pill">${c}</span></label>`; }); // Majors const md = document.getElementById('majors'); MAJORS.forEach((m, i) => { md.innerHTML += `<label><input type="checkbox" name="major" value="${i}"><span class="pill">${m.label}</span></label>`; }); // Weight presets const wd = document.getElementById('weights'); WEIGHTS.forEach((w, i) => { const chk = i === 3 ? 'checked' : ''; wd.innerHTML += ` <label> <input type="radio" name="wpreset" value="${i}" ${chk}> <div class="card-opt"> <div class="ct">${w.label}</div> <div class="cd">${w.desc}</div> </div> </label>`; }); })(); // 鈹€鈹€ Province 鈫?Category 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ document.getElementById('province').addEventListener('change', function() { const pid = parseInt(this.value); const prov = PROVINCES.find(p => p.id === pid); const catRow = document.getElementById('cat-row'); const catOpts = document.getElementById('cat-opts'); const scoreRow = document.getElementById('score-row'); if (!prov) { catRow.classList.add('hidden'); scoreRow.classList.add('hidden'); return; } catOpts.innerHTML = ''; if (prov.cats.length === 1) { catOpts.innerHTML = `<span style="display:inline-block;background:#eff6ff;color:#1d4ed8;border:1.5px solid #bfdbfe;border-radius:8px;padding:7px 18px;font-size:14px;font-weight:600">${prov.cats[0]}</span> <input type="hidden" id="cat-hidden" value="${prov.cats[0]}">`; } else { const opts = prov.cats.map((c, i) => `<label><input type="radio" name="cat" value="${c}" ${i===0?'checked':''}><span class="pill" style="font-size:14px;padding:7px 18px">${c}</span></label>` ).join(''); catOpts.innerHTML = `<div class="pills">${opts}</div>`; } catRow.classList.remove('hidden'); scoreRow.classList.remove('hidden'); document.getElementById('rank-hint').textContent = ''; // Province mode note const modeNoteRow = document.getElementById('mode-note-row'); const modeNoteEl = document.getElementById('mode-note'); if (PROVINCE_NOTES[pid]) { modeNoteEl.textContent = PROVINCE_NOTES[pid]; modeNoteRow.classList.remove('hidden'); } else { modeNoteRow.classList.add('hidden'); } // Trigger xuanke refresh based on current category selection renderXuanke(prov, getCat()); // Show 鏈渷 pill and label it with province name const homeWrap = document.getElementById('city-home-wrap'); const homePill = document.getElementById('city-home-pill'); if (prov) { // Label: fixed text, not city list 鈥?backend boosts ALL schools in province via province_id homePill.textContent = `${prov.name}锛堝叏鐪侀櫌鏍′紭鍏堬級`; homeWrap.classList.remove('hidden'); } else { homeWrap.classList.add('hidden'); document.getElementById('city-home').checked = false; } }); // 鈹€鈹€ Xuanke (elective subject) renderer 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ function renderXuanke(prov, cat) { const row = document.getElementById('xuanke-row'); const opts = document.getElementById('xuanke-opts'); const hint = document.getElementById('xuanke-hint'); if (!prov || prov.mode === '鏂囩悊绉?) { row.classList.add('hidden'); return; } let subjects, required, pickN; if (prov.mode === '3+3') { subjects = XUANKE_ALL; required = []; pickN = 3; hint.textContent = '璇烽€夋嫨鎮ㄥ弬鍔犻珮鑰冪殑3闂ㄩ€夎€冪鐩?; } else { // 3+1+2: required subject fixed by category const reqCode = cat === '鐗╃悊绫? ? '70000' : (cat === '鍘嗗彶绫? ? '70004' : null); if (!reqCode) { row.classList.add('hidden'); return; } required = [reqCode]; subjects = XUANKE_ALL.filter(s => s.code !== reqCode); pickN = 2; const reqName = XUANKE_ALL.find(s => s.code === reqCode)?.name || ''; hint.textContent = `${reqName}宸查攣瀹氾紝璇峰啀閫?闂ㄩ€夎€冪鐩甡; } opts.innerHTML = subjects.map(s => { const isReq = required.includes(s.code); return `<label style="opacity:${isReq?'0.5':'1'}"> <input type="checkbox" name="xuanke" value="${s.code}" ${isReq?'checked disabled':''}> <span class="pill" style="font-size:13px;padding:5px 14px">${s.name}</span> </label>`; }).join(''); // Enforce max selection opts.querySelectorAll('input[name=xuanke]:not([disabled])').forEach(cb => { cb.addEventListener('change', () => { const checked = opts.querySelectorAll('input[name=xuanke]:not([disabled]):checked'); if (checked.length > pickN) cb.checked = false; }); }); row.classList.remove('hidden'); } // Re-render xuanke when category changes (for 3+1+2 provinces) document.addEventListener('change', function(e) { if (e.target && e.target.name === 'cat') { const pid = parseInt(document.getElementById('province').value); const prov = PROVINCES.find(p => p.id === pid); renderXuanke(prov, e.target.value); } }); // 鈹€鈹€ Live rank preview 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ let rankTimer = null; document.getElementById('score').addEventListener('input', function() { clearTimeout(rankTimer); rankTimer = setTimeout(fetchRank, 600); }); function getCat() { const h = document.getElementById('cat-hidden'); if (h) return h.value; const r = document.querySelector('input[name=cat]:checked'); return r ? r.value : ''; } async function fetchRank() { const pid = document.getElementById('province').value; const cat = getCat(); const sc = document.getElementById('score').value; if (!pid || !cat || !sc) return; const scNum = Number(sc); const hint = document.getElementById('rank-hint'); if (!Number.isInteger(scNum) || scNum < 1 || scNum > 750) { hint.textContent = scNum > 750 ? '楂樿€冩弧鍒?50锛岃妫€鏌ヨ緭鍏? : !Number.isInteger(scNum) ? '璇疯緭鍏ユ暣鏁板垎鏁? : '璇疯緭鍏ユ湁鏁堝垎鏁帮紙1鈥?50锛?; hint.style.color = '#ef4444'; return; } hint.style.color = ''; try { const r = await fetch(`${API}/api/rank?province_id=${pid}&category=${encodeURIComponent(cat)}&score=${sc}`); if (!r.ok) { document.getElementById('rank-hint').textContent = ''; return; } const d = await r.json(); const pct = d.pool ? (d.rank / d.pool * 100).toFixed(1) : ''; if (d.max_score && scNum > d.max_score) { hint.style.color = '#f59e0b'; hint.textContent = `鈿?璇ョ渷浠芥湰骞村害鏈€楂樻垚缁╃害 ${d.max_score} 鍒嗭紝鎮ㄨ緭鍏ョ殑鍒嗘暟瓒呭嚭瀹為檯鑼冨洿锛屼粎渚涘弬鑰僠; } else { hint.style.color = ''; hint.textContent = `鍏ㄧ渷绾︾ ${d.rank.toLocaleString()} 鍚峘 + (pct ? `锛堝墠 ${pct}%锛塦 : ''); } } catch { document.getElementById('rank-hint').textContent = ''; } } // 鈹€鈹€ Family section toggle 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ function toggleFam() { const btn = document.getElementById('fam-toggle'); const body = document.getElementById('fam-body'); const open = body.classList.toggle('open'); btn.classList.toggle('open', open); } // 鈹€鈹€ Submit 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ async function submitForm() { const pid = parseInt(document.getElementById('province').value); const cat = getCat(); const scoreRaw = document.getElementById('score').value; const scoreNum = Number(scoreRaw); const score = scoreNum; const tier = document.getElementById('tier').value; if (!pid) { alert('璇烽€夋嫨鐪佷唤'); return; } if (!cat) { alert('璇烽€夋嫨鑰冭瘯绫诲埆'); return; } if (!scoreRaw || !Number.isInteger(scoreNum) || scoreNum < 1 || scoreNum > 750) { alert('璇疯緭鍏ユ湁鏁堢殑楂樿€冩€诲垎锛?鈥?50 鐨勬暣鏁帮級'); return; } // Build cities; "鏈渷" sends a flag rather than expanding to city names const rawCities = [...document.querySelectorAll('input[name=city]:checked')].map(e => e.value); const homeChecked = !!(document.getElementById('city-home')?.checked); const cities = rawCities.filter(c => c !== '__home__'); const majorKw = []; document.querySelectorAll('input[name=major]:checked').forEach(e => { MAJORS[+e.value].kw.forEach(k => { if (!majorKw.includes(k)) majorKw.push(k); }); }); const wIdx = parseInt(document.querySelector('input[name=wpreset]:checked').value); const wp = WEIGHTS[wIdx]; // Collect xuanke codes (required + selected electives) const prov = PROVINCES.find(p => p.id === pid); const xuankeCodes = [...document.querySelectorAll('input[name=xuanke]:checked')].map(e => e.value); // For 3+1+2: prepend the required subject if not already included if (prov && prov.mode === '3+1+2') { const reqCode = cat === '鐗╃悊绫? ? '70000' : (cat === '鍘嗗彶绫? ? '70004' : null); if (reqCode && !xuankeCodes.includes(reqCode)) xuankeCodes.unshift(reqCode); } // Build payload const payload = { province_id: pid, category: cat, score, min_tier: tier, preferred_cities: cities, major_keywords: majorKw, prefer_home_province: homeChecked, xuanke_codes: xuankeCodes, w_tier: wp.wt, w_city: wp.wc, w_major: wp.wm, }; // Family profile (only if section has been opened + economic tier selected) const ecoEl = document.querySelector('input[name=eco]:checked'); if (ecoEl && document.getElementById('fam-body').classList.contains('open')) { const eco = ecoEl.value; const supMap = {璐洶:5, 宸ヨ柂:6, 涓骇:8, 瀵岃:15}; payload.family_profile = { economic_tier: eco, parental_background: [...document.querySelectorAll('input[name=bg]:checked')].map(e => e.value), career_priority: document.querySelector('input[name=career]:checked')?.value || '鏈‘瀹?, risk_tolerance: document.querySelector('input[name=risk]:checked')?.value || '绋冲仴', overseas_plan: document.querySelector('input[name=overseas]:checked')?.value || '鏃犺鍒?, postgrad_willing: document.querySelector('input[name=postgrad]:checked')?.value || '瑙嗘儏鍐?, first_gen_college: document.getElementById('first_gen').checked, family_support_years: supMap[eco] || 6, }; } const btn = document.getElementById('submit-btn'); btn.disabled = true; btn.textContent = '璁＄畻涓€?; try { const resp = await fetch(`${API}/api/recommend`, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(payload), }); const raw = await resp.text(); showDebug(resp.status, raw); if (!resp.ok) throw new Error(raw); renderResults(JSON.parse(raw)); } catch(e) { alert('璇锋眰澶辫触锛? + e.message); } finally { btn.disabled = false; btn.textContent = '鐢熸垚蹇楁効鎺ㄨ崘'; } } // 鈹€鈹€ Debug panel (only active when URL contains ?debug) 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ function showDebug(status, raw) { if (!location.search.includes('debug')) return; const el = document.getElementById('debug'); const preview = raw.length > 500 ? raw.slice(0,500)+'鈥? : raw; el.innerHTML = `<b>HTTP ${status}</b> 路 ${new Date().toLocaleTimeString()}<br><pre style="margin-top:8px;white-space:pre-wrap;font-size:11px">${preview}</pre>`; el.style.display = 'block'; } // 鈹€鈹€ Render results 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ function renderResults(d) { // Summary bar document.getElementById('s-rank').textContent = d.student_rank.toLocaleString(); document.getElementById('s-c').textContent = `鍐?${d.chong}`; document.getElementById('s-w').textContent = `绋?${d.wen}`; document.getElementById('s-b').textContent = `淇?${d.bao}`; document.getElementById('s-cvg').textContent = (d.coverage*100).toFixed(1)+'%'; const warnEl = document.getElementById('s-warn'); if (d.switch_note) { warnEl.textContent = '鈿?' + d.switch_note; warnEl.classList.remove('hidden'); } else { warnEl.classList.add('hidden'); } // Sparse data warning (< 20 results 鈥?thin province data coverage) const sparseEl = document.getElementById('s-sparse'); const nRecs = (d.recommendations || []).length; if (nRecs > 0 && nRecs < 20) { sparseEl.textContent = `鈿?鏈浠呭尮閰嶅埌 ${nRecs} 鏉℃帹鑽愶紙璇ョ渷浠藉巻鍙插綍鍙栨暟鎹鐩栨湁闄愶級銆傜粨鏋滀粎渚涘弬鑰冿紝璇峰悓鏃舵煡闃呭悇闄㈡牎瀹樼綉鏈€鏂版嫑鐢熺畝绔犮€俙; sparseEl.classList.remove('hidden'); } else { sparseEl.classList.add('hidden'); } const infoEl = document.getElementById('s-info'); if (d.major_mismatch_count > 0) { infoEl.textContent = `娉細${d.major_mismatch_count} 鏉′笓涓氫笉瀹屽叏鍖归厤锛堝凡鐢ㄥ厹搴曞織鎰胯ˉ鍏咃紝鏍囨敞 *锛塦; infoEl.classList.remove('hidden'); } else { infoEl.classList.add('hidden'); } // Top-student note: no reach schools (all safety) const topEl = document.getElementById('s-top-note'); if (d.chong === 0 && nRecs >= 10) { topEl.textContent = '馃弳鎮ㄧ殑鎴愮哗浣嶅眳鍓嶅垪锛屾墍鏈夋帹鑽愰櫌鏍″潎鍦ㄥ畨鍏ㄥ綍鍙栬寖鍥村唴銆傚甯屾湜鍐插埡娓呭寳绛夐《灏栭櫌鏍★紝鍙皢"鍙帴鍙楁渶浣庡眰娆?璋冩暣涓?85鍚庨噸鏂版煡璇紝鎴栫洿鎺ュ挩璇㈢洰鏍囬櫌鏍℃嫑鐢熷姙浜嗚В鏈勾搴︾珵浜夋儏鍐点€?; topEl.classList.remove('hidden'); } else { topEl.classList.add('hidden'); } // Advisor card const advCard = document.getElementById('adv-card'); if (d.advisor_note) { document.getElementById('adv-narrative').textContent = d.advisor_note; const majorsDiv = document.getElementById('adv-majors'); majorsDiv.innerHTML = ''; (d.advisor_top_majors || []).slice(0, 6).forEach(m => { const el = document.createElement('div'); el.className = `adv-major rec-${m.recommendation}`; el.innerHTML = `<div class="mn">${m.major_name.split('/')[0].trim()}</div> <div class="mr">${m.recommendation} 路鍖归厤搴?${(m.fit_score*100).toFixed(0)}%</div>`; majorsDiv.appendChild(el); }); advCard.classList.remove('hidden'); } else { advCard.classList.add('hidden'); } // Table + mobile cards const tagCls = {鍐?'tag-c', 绋?'tag-w', 淇?'tag-b'}; const rowCls = {鍐?'r-c', 绋?'r-w', 淇?'r-b'}; const tbody = document.getElementById('tbody'); const mobRecs = document.getElementById('mob-recs'); tbody.innerHTML = ''; mobRecs.innerHTML = ''; d.recommendations.forEach(r => { const mm = !r.major_match ? ' *' : ''; const mmCl = !r.major_match ? ' r-mm' : ''; const rc = rowCls[r.tag] || ''; const tc = tagCls[r.tag] || ''; const note = r.note ? `<div class="risk-note">${r.note}</div>` : ''; const mobNote = r.note ? `<div class="mob-card-note">${r.note}</div>` : ''; // 鐙珛瀛楁鐩存帴璇诲彇 let schoolCode = r.school_code || '鏆傛棤'; let majorCode = r.major_code || '鏆傛棤'; // 馃攳銆愮 1 澶勪慨鏀广€戝湪杩欓噷鎶娾€滃綍鍙栨渶浣庡垎鈥濆拰鈥滃鏍℃渶浣庝綅娆♀€濆崟鐙畾涔夊嚭鏉? let schoolMinScore = r.school_min_score || '鏆傛棤'; // 鎺ュ悗绔柊鍔犵殑鏈€浣庡垎 let schoolMinRank = r.school_min_rank || '鏆傛棤'; // 鎺ユ渶浣庝綅娆? let majorHistScore = r.major_hist_score || '鏆傛棤'; let majorHistRank = r.major_hist_rank || '鏆傛棤'; // 鎶婂ぇ绫诲悕瀛楃敤灏忓瓧鎷煎湪鍏蜂綋涓撲笟鍓嶉潰 let majorCatStr = r.major_category ? `<span style="font-size:11px; color:#9ca3af; font-weight:normal; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; display: inline-block; margin-bottom: 2px;">${r.major_category}</span>` : ''; let displaySpName = majorCatStr + (r.sp_name || ''); // 馃攳銆愮 2 澶勪慨鏀广€戝鏋滅壒瀹氬垎鏁版鏈?note 璇︽儏锛屾垜浠澶氭姞涓€涓€滃垎鈥濆瓧鍑烘潵 if (r.note && (r.note.includes('鏍℃渶浣庝綅娆?) || r.note.includes('鍘嗗勾涓撲笟'))) { const detailStr = r.note; // 鍘熸湰鑰佷唬鐮佹病鏈夋姞褰曞彇鏈€浣庡垎锛屾垜浠姞涓€鏉℃鍒欏幓鎶犫€滄牎鏈€浣庡垎:XXX鍒嗏€濇垨鑰呬粠宸叉湁鏁版嵁鍏煎 const sScore = detailStr.match(/鏍℃渶浣庡垎\s*:\s*([0-9]+)鍒?); const sRank = detailStr.match(/鏍℃渶浣庝綅娆s*:\s*([^|]+)/); const mScore = detailStr.match(/鍘嗗勾涓撲笟\s*:\s*([0-9]+)鍒?); const mRank = detailStr.match(/鍒哱s*\/\s*([0-9]+)鍚?); if (sScore) schoolMinScore = sScore[1].trim(); if (sRank) schoolMinRank = sRank[1].trim(); if (mScore) majorHistScore = mScore[1].trim(); if (mRank) majorHistRank = mRank[1].trim(); } // Desktop table row tbody.innerHTML += ` <tr class="${rc}${mmCl}" style="border-bottom: 1px solid #f3f4f6; transition: background-color 0.2s;"> <td class="r td-seq" style="padding: 12px 8px; width: 40px; color: #9ca3af;">${r.rank}</td> <td class="c" style="padding: 12px 8px; width: 70px; font-weight:600; color:#4b5563; font-family: monospace;">${schoolCode}</td> <td class="td-school" style="padding: 12px 8px; min-width: 140px; font-weight:700; color: #1f2937; white-space: nowrap;">${r.school_name}</td> <td class="r" style="padding: 12px 8px; width: 90px; color:#dc2626; font-weight:600; text-align: center;">${schoolMinScore}</td> <td class="td-city" style="padding: 12px 8px; width: 70px; text-align: center; color: #4b5563;">${r.city}</td> <td class="c" style="padding: 12px 8px; width: 80px; font-weight:600; color:#4b5563; text-family: monospace; text-align: center;">${majorCode}</td> <td class="td-sp" style="padding: 12px 12px; min-width: 220px; text-align: left; line-height: 1.5;"> <div style="display: flex; flex-direction: column; align-items: flex-start;"> ${majorCatStr} <span style="font-weight: 600; color: #111827; font-size: 14px; margin-top: 2px;">${r.sp_name || ''}${mm}</span> </div> ${note ? `<div style="font-size: 12px; color: #9ca3af; margin-top: 4px;">${note}</div>` : ''} </td> <td class="r" style="padding: 12px 8px; width: 85px; color:#0284c7; font-weight:600; text-align: center;">${majorHistScore}</td> <td class="r" style="padding: 12px 8px; width: 95px; color:#0284c7; font-weight: 500; text-align: center;">${majorHistRank}</td> <td class="td-tier hide-mob" style="padding: 12px 8px; width: 60px; text-align: center; color: #6b7280;">${r.tier}</td> <td class="r td-p" style="padding: 12px 8px; width: 75px; font-weight: 600; text-align: center; color: #10b981;">${(r.p * 100).toFixed(1)}%</td> <td class="c" style="padding: 12px 8px; width: 60px; text-align: center;"><span class="tag ${tc}">${r.tag}</span></td> <td class="r td-util hide-mob" style="padding: 12px 8px; width: 70px; text-align: center; color: #9ca3af; font-size: 13px;">${r.utility.toFixed(3)}</td> </tr>`; // Mobile card (涓撲笟鍚嶅瓧鍚屾牱鐢ㄦ竻娲楄繃銆佸垹鎺?|| 鍚庣紑鐨?displaySpName) mobRecs.innerHTML += ` <div class="mob-card ${rc}${mmCl}"> <div class="mob-card-top"> <span class="mob-card-seq">${r.rank}</span> <span class="mob-card-school">${r.school_name}</span> <span class="mob-card-city">${r.city}</span> <span class="tag ${tc}">${r.tag}</span> </div> <div class="mob-card-major">${displaySpName}${mm}</div> ${mobNote} <div class="mob-card-footer"> <span class="mob-card-tier">${r.tier}</span> <span class="mob-card-p">褰曞彇姒傜巼 ${(r.p * 100).toFixed(1)}%</span> </div> </div>`; }); const res = document.getElementById('results'); res.classList.remove('hidden'); res.scrollIntoView({behavior:'smooth', block:'start'}); // 琛ヤ笂杩欎釜锛岄槻姝?AJAX 杩斿洖澶勭悊鏃跺洜涓烘壘涓嶅埌 showDebug 鑰岀洿鎺ユ姤閿欎腑鏂? if (typeof showDebug === 'undefined') { window.showDebug = function(...args) { console.log("Debug Info:", ...args); }; } } </script> </body> </html>