未命名页面

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>挽回INTP挑战测试</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script> tailwind.config = { theme: { extend: { colors: { darkBase: '#12100E', darkCard: '#1E1A17', goldLight: '#D4B886', goldDim: '#9C835A', textSoft: '#C9C2BB' }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, animation: { 'fade-in': 'fadeIn 0.4s ease-out forwards', 'scale-up': 'scaleUp 0.3s ease-out forwards', 'shake': 'shake 0.4s ease-in-out' }, keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' } }, scaleUp: { '0%': { transform: 'scale(0.92)', opacity: '0' }, '100%': { transform: 'scale(1)', opacity: '1' } }, shake: { '0%,100%': { transform: 'translateX(0)' }, '20%': { transform: 'translateX(-6px)' }, '60%': { transform: 'translateX(6px)' } } } } } } </script> <style type="text/tailwindcss"> @layer utilities { .card-shadow { box-shadow: 0 8px 32px rgba(0,0,0,0.35); } .gold-glow { box-shadow: 0 0 14px rgba(212, 184, 134, 0.18); } .scroll-hide::-webkit-scrollbar { display: none; } .option-hover { transition: all 0.24s ease; } .option-hover:hover { background-color: rgba(212, 184, 134, 0.12); border-color: #D4B886; transform: translateY(-2px); } } </style> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #12100E; background-image: radial-gradient(#25201B 0.8px, transparent 0.8px); background-size: 24px 24px; } </style></head><body class="min-h-screen text-textSoft overflow-x-hidden scroll-hide"> <div id="app" class="w-full min-h-screen p-5 md:p-8 flex flex-col items-center justify-center max-w-xl mx-auto">  <div id="page-home" class="w-full animate-scale-up"> <div class="bg-darkCard rounded-3xl p-7 md:p-9 card-shadow border border-[#2D2823]"> <div class="mb-6 text-center"> <span class="text-goldLight text-sm tracking-widest uppercase">Personality Challenge</span> <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-semibold text-goldLight mt-2">挽回INTP挑战测试</h1> </div> <p class="text-sm leading-relaxed opacity-85 mb-7 text-center"> INTP逻辑学家冷淡疏离、厌恶情绪内耗，拥有极强精神边界。15道真实相处场景选择题，只有完全贴合INTP内心诉求的选项才能通关，一步选错即刻挑战失败。 </p> <div class="grid grid-cols-3 gap-3 mb-8"> <div class="bg-darkBase rounded-2xl p-4 text-center border border-[#2D2823]"> <div class="text-2xl text-goldLight font-semibold">15</div> <div class="text-xs mt-1 opacity-70">挑战关卡</div> </div> <div class="bg-darkBase rounded-2xl p-4 text-center border border-[#2D2823]"> <div class="text-2xl text-goldLight font-semibold">1</div> <div class="text-xs mt-1 opacity-70">正确通路</div> </div> <div class="bg-darkBase rounded-2xl p-4 text-center border border-[#2D2823]"> <div class="text-2xl text-goldLight font-semibold">∞</div> <div class="text-xs mt-1 opacity-70">失败结局</div> </div> </div> <button onclick="startGame()" class="w-full py-4 rounded-2xl bg-goldLight text-darkBase font-medium gold-glow transition-all hover:brightness-110 active:scale-[0.97]"> <i class="fa fa-play mr-2"></i>开启挑战 </button> </div> </div>  <div id="page-quiz" class="w-full hidden animate-fade-in"> <div class="bg-darkCard rounded-3xl p-6 md:p-8 card-shadow border border-[#2D2823]"> <div class="flex justify-between items-center mb-5"> <span class="text-goldDim text-sm">关卡 <span id="level-num">1</span>/15</span> <span class="text-xs opacity-60">死亡率：<span id="death-rate">0</span>%</span> </div> <div class="bg-darkBase rounded-2xl p-5 mb-6 border border-[#2D2823]"> <div class="text-xs text-goldDim mb-2">场景</div> <p id="scene-text" class="text-sm leading-relaxed"></p> <div class="mt-4 pt-4 border-t border-[#2D2823]"> <div class="text-xs text-goldDim mb-2">INTP台词</div> <p id="intp-line" class="italic text-goldLight text-sm"></p> </div> </div> <div class="space-y-3" id="option-box">  </div> </div> </div>  <div id="modal-death" class="fixed inset-0 bg-black/80 backdrop-blur-sm hidden flex items-center justify-center p-5 z-50 animate-fade-in"> <div class="bg-darkCard w-full max-w-md rounded-3xl p-7 card-shadow border border-[#2D2823] animate-scale-up"> <h2 class="text-xl text-goldLight font-medium text-center mb-3">挑战阵亡</h2> <p class="text-center text-sm opacity-80 mb-5" id="death-desc"></p> <div class="bg-darkBase rounded-2xl p-4 mb-5 border border-[#2D2823]"> <div class="text-xs text-goldDim mb-2">当前累计死亡率</div> <div class="text-3xl text-center text-goldLight font-semibold" id="modal-death-rate">0%</div> </div> <div class="space-y-3 mb-8" id="thought-list">  </div> <div class="grid grid-cols-2 gap-3"> <button onclick="restartGame()" class="py-3 rounded-xl border border-goldDim text-goldDim transition-all hover:bg-goldDim/10"> 重新开始 </button> <button onclick="closeDeathModal()" class="py-3 rounded-xl bg-goldLight text-darkBase font-medium gold-glow hover:brightness-110 active:scale-[0.97]"> 回看关卡 </button> </div> </div> </div>  <div id="page-win" class="w-full hidden animate-fade-in"> <div class="bg-darkCard rounded-3xl p-7 md:p-9 card-shadow border border-[#2D2823]"> <div class="text-center mb-6"> <i class="fa fa-star text-4xl text-goldLight gold-glow inline-block p-3 rounded-full bg-darkBase"></i> <h2 class="text-2xl font-semibold text-goldLight mt-4">挑战通关 · 治愈结局</h2> </div> <div class="bg-darkBase rounded-2xl p-5 mb-8 border border-[#2D2823]"> <p id="win-text" class="text-sm leading-relaxed"></p> </div> <button onclick="restartGame()" class="w-full py-4 rounded-2xl bg-goldLight text-darkBase font-medium gold-glow transition-all hover:brightness-110 active:scale-[0.97]"> <i class="fa fa-refresh mr-2"></i>再次挑战 </button> </div> </div> </div> <script> // 全局数据 let currentLevel = 1; let failCount = 0; const totalQuestion = 15; // 15关完整题库写死 const levelData = [ { scene: "INTP和你相处一周后突然消失，一整天不回消息，你完全联系不上对方", intpLine: "暂时不想进行社交输入，我需要独处清理思绪，不用找我", options: [ {text:"疯狂发几十条消息、打电话追问为什么冷暴力",correct:false}, {text:"直接质问：你是不是不在乎我，为什么突然冷落我",correct:false}, {text:"不再打扰，告知对方需要独处随时可以找你，不再主动刷屏",correct:true}, {text:"找共同好友吐槽INTP冷漠，让别人帮忙传话",correct:false} ] }, { scene: "你情绪崩溃大哭，想要INTP共情安抚你的委屈", intpLine: "我可以分析问题根源，但没办法持续提供情绪哄劝", options: [ {text:"指责对方冷血，一点都不懂心疼自己",correct:false}, {text:"理解对方思维模式，先平复情绪再理性沟通问题",correct:true}, {text:"逼迫对方必须说温柔情话哄你开心",correct:false}, {text:"冷战赌气，直到对方主动低头哄你",correct:false} ] }, { scene: "INTP沉迷专业理论研究，一整天沉浸看书忽略你的存在", intpLine: "这套理论逻辑很完善，我需要完整梳理推导过程", options: [ {text:"频繁打断对方，强行拉着对方陪你聊天逛街",correct:false}, {text:"抱怨对方只爱学习，心里根本没有自己",correct:false}, {text:"安静给对方准备饮品，不打扰，等对方结束再交流",correct:true}, {text:"藏起书本逼迫对方放下爱好陪伴你",correct:false} ] }, { scene: "你们产生观念分歧，INTP客观指出你逻辑漏洞，不带情绪反驳你", intpLine: "你的推论存在两处逻辑断层，我客观说明一下", options: [ {text:"觉得对方针对自己，上升感情争吵，指责对方不爱自己",correct:false}, {text:"接纳客观讨论，理性探讨观点差异，不掺杂情绪对立",correct:true}, {text:"直接闭嘴冷战，拒绝继续沟通",correct:false}, {text:"要求对方必须顺从你的想法，不能反驳你",correct:false} ] }, { scene: "你希望每天高强度黏在一起，随时报备行踪", intpLine: "我需要独立精神空间，时刻报备会消耗我的心理能量", options: [ {text:"妥协约定合理边界，各自保留独处时间，互不束缚",correct:true}, {text:"认为对方不爱自己，强制要求全天候分享日常",correct:false}, {text:"和对方拉锯拉扯，不停索取陪伴安全感",correct:false}, {text:"拿别人情侣对比，指责对方不够黏人",correct:false} ] }, { scene: "INTP不擅长浪漫仪式，忘记纪念日，没有准备礼物", intpLine:"仪式化流程对我来说没有实际意义，但我记得你的喜好", options: [ {text:"大发脾气，认为对方根本不在意这段关系",correct:false}, {text:"坦然沟通，和对方约定简单轻量化纪念方式，不强制浪漫",correct:true}, {text:"长期记仇，反复翻旧账指责对方",correct:false}, {text:"要求对方一次性补偿昂贵礼物弥补过错",correct:false} ] }, { scene: "INTP习惯性直白客观说话，无意间戳中你的敏感点", intpLine:"我只是客观描述事实，没有任何贬低你的意思", options: [ {text:"冷静告知对方你的敏感底线，协商温和表达方式",correct:true}, {text:"当场崩溃大哭，指责对方说话伤人",correct:false}, {text:"记恨在心，事后阴阳怪气报复对方",correct:false}, {text:"禁止对方说任何客观真话，只允许甜言蜜语",correct:false} ] }, { scene: "你希望INTP频繁表达爱意，每天反复说我爱你", intpLine:"爱意不需要反复口头复述，我的行动会体现在意", options: [ {text:"尊重对方表达习惯，从行动感知爱意，不强迫口头情话",correct:true}, {text:"不停索取口头表白，得不到就失落闹脾气",correct:false}, {text:"怀疑对方不爱自己，逼迫对方反复证明心意",correct:false}, {text:"对比其他人，嫌弃对方不够深情",correct:false} ] }, { scene: "INTP社交后能量耗尽，回家只想独处放空，拒绝外出约会", intpLine:"社交耗尽精神力，外出会让我极度疲惫，需要静养", options: [ {text:"理解社交耗竭，独自安排活动，让对方安静休息",correct:true}, {text:"强迫对方出门，认为对方借口逃避陪伴",correct:false}, {text:"伤心难过，指责对方宁愿独处也不愿陪你",correct:false}, {text:"拉着对方不停倾诉情绪，加重对方精神消耗",correct:false} ] }, { scene: "你们发生矛盾，INTP想要冷静梳理逻辑，暂时停止对话", intpLine:"现在情绪干扰判断，给我一点时间理清整件事再沟通", options: [ {text:"给对方冷静空间，约定好沟通时间，不连环轰炸消息",correct:true}, {text:"不允许冷静，必须当下立刻把矛盾说清楚",correct:false}, {text:"疯狂发消息、打电话，不让对方独处思考",correct:false}, {text:"对方一冷静就认定对方想分手",correct:false} ] }, { scene: "INTP投入小众冷门爱好，花费大量时间钻研，你无法理解", intpLine:"这个领域逻辑体系很完整，钻研它能让我获得精神满足", options: [ {text:"尊重对方爱好，愿意倾听对方分享，不贬低排斥",correct:true}, {text:"嘲讽爱好无用，逼迫对方放弃陪你",correct:false}, {text:"看到对方钻研就闹脾气，破坏对方爱好物品",correct:false}, {text:"不断贬低这个爱好没有价值，让对方产生负罪感",correct:false} ] }, { scene: "你产生不安全感，频繁试探对方会不会离开你", intpLine:"反复试探会消耗信任，稳定相处远比测试有意义", options: [ {text:"停止无意义试探，坦诚内心不安，理性沟通安全感问题",correct:true}, {text:"频繁提分手、冷战试探对方底线",correct:false}, {text:"故意和异性亲近刺激对方看对方反应",correct:false}, {text:"每天追问一百次会不会抛弃自己",correct:false} ] }, { scene: "INTP做事随性松弛，不擅长规划未来，没有明确长远计划", intpLine:"未来变量太多，固定规划会束缚可能性，走一步看一步更舒服", options: [ {text:"接纳对方松弛节奏，协商弹性规划，不强求死板计划",correct:true}, {text:"逼迫对方立刻定下完整人生规划，否则焦虑争吵",correct:false}, {text:"嫌弃对方没有上进心，拿别人规划对比打压",correct:false}, {text:"因为对方不做规划长期焦虑内耗，持续抱怨",correct:false} ] }, { scene: "朋友聚会，大家起哄调侃你们的感情，INTP十分社恐想离场", intpLine:"公开调侃亲密关系会让我极度不自在，想提前离场", options: [ {text:"主动解围，陪对方提前离场，不强迫应付社交起哄",correct:true}, {text:"觉得扫兴，指责对方不给自己面子",correct:false}, {text:"硬拉对方留下来，配合所有人起哄玩笑",correct:false}, {text:"当众和对方吵架，埋怨对方不懂人情世故",correct:false} ] }, { scene: "最终关卡：长期相处，你想要稳定长久走下去，和INTP深度沟通关系未来", intpLine:"只要彼此保留边界、互不消耗精神，这段关系可以长久维持", options: [ {text:"接纳INTP完整的全部特质，包容独处需求，理性温和长久同行",correct:true}, {text:"试图改造对方性格，让对方变成黏人感性的类型",correct:false}, {text:"不断索取情绪价值，让对方持续迁就你的所有敏感",correct:false}, {text:"用爱意捆绑对方，限制对方独立思考与独处自由",correct:false} ] } ]; // 失败文案库 const deathText = [ "你过度索取情绪陪伴，突破了INTP最重要的精神边界，对方选择彻底退场", "持续的情绪拉扯、无底线试探耗尽INTP所有耐心，逻辑型人格无法长期承受内耗", "你试图改变、捆绑对方，忽视INTP对独立空间的刚需，这段关系走向终结" ]; const thoughtListAll = [ "INTP的冷淡从来不是不爱，只是本能需要独处修复精神能量，不要用情绪化索取消耗对方", "逻辑学家人格厌恶无意义情绪拉扯，稳定、松弛、有边界的相处模式才是长久之道", "想要留住INTP，不必强迫浪漫与黏腻，尊重对方独立思维，平等理性沟通胜过万千情话" ]; // 通关治愈长文 const winFullText = `恭喜你完整通过15关挽回挑战，你完全读懂了INTP逻辑学家的内心内核。INTP看似冷漠疏离、回避情绪、偏爱独处，本质只是依靠逻辑运转思维，精神能量极易被情绪化冲突消耗。他们不会用甜腻情话表达爱意，却会用长久包容、理性包容、保留边界的方式接纳你全部模样。你没有强迫对方改变本性，不索要无底线情绪安抚，尊重独处需求、客观理性沟通、不反复试探拉扯。这种松弛且有分寸的相处，恰好是INTP心中最理想的亲密关系。不必追逐热烈黏腻的浪漫，安稳、自由、互不消耗的陪伴，就是逻辑人格独有的极致温柔。往后相处，守住彼此边界，平等包容，便能长久同行。`; // 计算死亡率 function calcDeathRate() { return Math.round((failCount / totalQuestion) * 100); } // 切换页面 function switchPage(pageId) { ["page-home", "page-quiz", "page-win"].forEach(id=>{ document.getElementById(id).classList.add("hidden"); }) document.getElementById(pageId).classList.remove("hidden"); } // 开始游戏 function startGame() { currentLevel = 1; renderQuiz(); switchPage("page-quiz"); } // 渲染答题页面 function renderQuiz() { const data = levelData[currentLevel - 1]; document.getElementById("level-num").innerText = currentLevel; document.getElementById("scene-text").innerText = data.scene; document.getElementById("intp-line").innerText = data.intpLine; document.getElementById("death-rate").innerText = calcDeathRate(); const box = document.getElementById("option-box"); box.innerHTML = ""; data.options.forEach((opt,idx)=>{ const btn = document.createElement("button"); btn.className = "w-full text-left p-4 rounded-2xl border border-[#2D2823] option-hover bg-darkBase"; btn.innerHTML = `<span class="text-goldLight mr-2">${String.fromCharCode(65+idx)}.</span>${opt.text}`; btn.onclick = ()=>selectOption(opt.correct); box.appendChild(btn); }) } // 选择选项判定 function selectOption(isCorrect) { if(!isCorrect) { failCount++; showDeathModal(); return; } // 答对进入下一关 if(currentLevel >= totalQuestion) { // 最后一关通关 document.getElementById("win-text").innerText = winFullText; switchPage("page-win"); return; } currentLevel++; renderQuiz(); } // 弹出死亡弹窗 function showDeathModal() { const randomDeathDesc = deathText[Math.floor(Math.random()*deathText.length)]; document.getElementById("death-desc").innerText = randomDeathDesc; document.getElementById("modal-death-rate").innerText = calcDeathRate() + "%"; const thoughtBox = document.getElementById("thought-list"); thoughtBox.innerHTML = ""; thoughtListAll.forEach(t=>{ const p = document.createElement("p"); p.className = "text-xs leading-relaxed opacity-80 bg-darkBase p-3 rounded-xl border border-[#2D2823]"; p.innerText = "· " + t; thoughtBox.appendChild(p); }) document.getElementById("modal-death").classList.remove("hidden"); } // 关闭死亡弹窗 function closeDeathModal() { document.getElementById("modal-death").classList.add("hidden"); } // 全部重新开始 function restartGame() { currentLevel = 1; failCount = 0; switchPage("page-home"); document.getElementById("modal-death").classList.add("hidden"); } </script></body></html>42000013falsefalse0WPS Office_12.9.0.27389_F1E327BC-269C-435d-A152-05C5408002CA02026-07-03T23:02:00Z稻香Kaiser稻香Kaiser2026-07-03T23:04:21Z12052-12.9.0.273898C77E5608C68813275CF476AB2135A39_43

html2.link ·粘贴 HTML，一键生成链接