|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>MBTI Personality Arcade</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@keyframes coinDrop { |
|
0% { transform: translateY(-100px) rotate(0deg); opacity: 0; } |
|
100% { transform: translateY(0) rotate(360deg); opacity: 1; } |
|
} |
|
|
|
@keyframes typeReveal { |
|
0% { transform: scale(0.8); opacity: 0; } |
|
100% { transform: scale(1); opacity: 1; } |
|
} |
|
|
|
.coin-animation { |
|
animation: coinDrop 0.8s ease-out forwards; |
|
} |
|
|
|
.type-reveal { |
|
animation: typeReveal 0.5s ease-out forwards; |
|
} |
|
|
|
.coin-slot { |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.coin-slot::after { |
|
content: ""; |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 4px; |
|
background: linear-gradient(90deg, #d4af37, #f9d423, #d4af37); |
|
border-radius: 2px; |
|
} |
|
|
|
.mbti-grid { |
|
display: grid; |
|
grid-template-columns: repeat(4, 1fr); |
|
gap: 1rem; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.mbti-grid { |
|
grid-template-columns: repeat(2, 1fr); |
|
} |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-indigo-50 min-h-screen font-sans"> |
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
<header class="text-center mb-12"> |
|
<h1 class="text-5xl font-bold text-indigo-900 mb-2">MBTI Personality Arcade</h1> |
|
<p class="text-xl text-indigo-700">Click your type to reveal your personality profile!</p> |
|
|
|
<div class="mt-8 flex justify-center items-center"> |
|
<div class="coin-slot bg-gray-200 w-64 h-16 rounded-lg shadow-inner flex items-center justify-center cursor-pointer" id="coinSlot"> |
|
<p class="text-gray-500 font-medium" id="coinMessage">Insert Coin to Continue</p> |
|
</div> |
|
<div class="ml-4 w-12 h-12 bg-yellow-400 rounded-full flex items-center justify-center shadow-md cursor-pointer hover:scale-110 transition-transform" id="coinButton"> |
|
<i class="fas fa-coins text-2xl text-yellow-700"></i> |
|
</div> |
|
</div> |
|
|
|
<div class="mt-4 text-gray-600"> |
|
<span id="coinCount">Coins: 0</span> |
|
</div> |
|
</header> |
|
|
|
<div class="bg-white rounded-xl shadow-xl p-6 mb-8 hidden" id="gameBoard"> |
|
<div class="mbti-grid"> |
|
|
|
<div class="mbti-card bg-blue-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-blue-100" data-type="INTJ"> |
|
<div class="text-4xl mb-2 text-blue-600"><i class="fas fa-chess-queen"></i></div> |
|
<h3 class="font-bold text-xl text-blue-800">INTJ</h3> |
|
<p class="text-blue-600">The Architect</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-blue-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-blue-100" data-type="INTP"> |
|
<div class="text-4xl mb-2 text-blue-600"><i class="fas fa-atom"></i></div> |
|
<h3 class="font-bold text-xl text-blue-800">INTP</h3> |
|
<p class="text-blue-600">The Logician</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-blue-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-blue-100" data-type="ENTJ"> |
|
<div class="text-4xl mb-2 text-blue-600"><i class="fas fa-crown"></i></div> |
|
<h3 class="font-bold text-xl text-blue-800">ENTJ</h3> |
|
<p class="text-blue-600">The Commander</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-blue-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-blue-100" data-type="ENTP"> |
|
<div class="text-4xl mb-2 text-blue-600"><i class="fas fa-lightbulb"></i></div> |
|
<h3 class="font-bold text-xl text-blue-800">ENTP</h3> |
|
<p class="text-blue-600">The Debater</p> |
|
</div> |
|
|
|
|
|
<div class="mbti-card bg-green-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-green-100" data-type="INFJ"> |
|
<div class="text-4xl mb-2 text-green-600"><i class="fas fa-hands-helping"></i></div> |
|
<h3 class="font-bold text-xl text-green-800">INFJ</h3> |
|
<p class="text-green-600">The Advocate</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-green-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-green-100" data-type="INFP"> |
|
<div class="text-4xl mb-2 text-green-600"><i class="fas fa-feather-alt"></i></div> |
|
<h3 class="font-bold text-xl text-green-800">INFP</h3> |
|
<p class="text-green-600">The Mediator</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-green-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-green-100" data-type="ENFJ"> |
|
<div class="text-4xl mb-2 text-green-600"><i class="fas fa-heart"></i></div> |
|
<h3 class="font-bold text-xl text-green-800">ENFJ</h3> |
|
<p class="text-green-600">The Protagonist</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-green-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-green-100" data-type="ENFP"> |
|
<div class="text-4xl mb-2 text-green-600"><i class="fas fa-star"></i></div> |
|
<h3 class="font-bold text-xl text-green-800">ENFP</h3> |
|
<p class="text-green-600">The Campaigner</p> |
|
</div> |
|
|
|
|
|
<div class="mbti-card bg-yellow-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-yellow-100" data-type="ISTJ"> |
|
<div class="text-4xl mb-2 text-yellow-600"><i class="fas fa-shield-alt"></i></div> |
|
<h3 class="font-bold text-xl text-yellow-800">ISTJ</h3> |
|
<p class="text-yellow-600">The Logistician</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-yellow-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-yellow-100" data-type="ISFJ"> |
|
<div class="text-4xl mb-2 text-yellow-600"><i class="fas fa-hands"></i></div> |
|
<h3 class="font-bold text-xl text-yellow-800">ISFJ</h3> |
|
<p class="text-yellow-600">The Defender</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-yellow-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-yellow-100" data-type="ESTJ"> |
|
<div class="text-4xl mb-2 text-yellow-600"><i class="fas fa-gavel"></i></div> |
|
<h3 class="font-bold text-xl text-yellow-800">ESTJ</h3> |
|
<p class="text-yellow-600">The Executive</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-yellow-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-yellow-100" data-type="ESFJ"> |
|
<div class="text-4xl mb-2 text-yellow-600"><i class="fas fa-people-carry"></i></div> |
|
<h3 class="font-bold text-xl text-yellow-800">ESFJ</h3> |
|
<p class="text-yellow-600">The Consul</p> |
|
</div> |
|
|
|
|
|
<div class="mbti-card bg-purple-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-purple-100" data-type="ISTP"> |
|
<div class="text-4xl mb-2 text-purple-600"><i class="fas fa-tools"></i></div> |
|
<h3 class="font-bold text-xl text-purple-800">ISTP</h3> |
|
<p class="text-purple-600">The Virtuoso</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-purple-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-purple-100" data-type="ISFP"> |
|
<div class="text-4xl mb-2 text-purple-600"><i class="fas fa-paint-brush"></i></div> |
|
<h3 class="font-bold text-xl text-purple-800">ISFP</h3> |
|
<p class="text-purple-600">The Adventurer</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-purple-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-purple-100" data-type="ESTP"> |
|
<div class="text-4xl mb-2 text-purple-600"><i class="fas fa-bolt"></i></div> |
|
<h3 class="font-bold text-xl text-purple-800">ESTP</h3> |
|
<p class="text-purple-600">The Entrepreneur</p> |
|
</div> |
|
|
|
<div class="mbti-card bg-purple-50 rounded-lg p-4 text-center cursor-pointer transition-all hover:scale-105 hover:shadow-md border-2 border-purple-100" data-type="ESFP"> |
|
<div class="text-4xl mb-2 text-purple-600"><i class="fas fa-glass-cheers"></i></div> |
|
<h3 class="font-bold text-xl text-purple-800">ESFP</h3> |
|
<p class="text-purple-600">The Entertainer</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="bg-white rounded-xl shadow-xl p-6 mt-8 hidden" id="typeInfo"> |
|
<div class="flex justify-between items-center mb-4"> |
|
<h2 class="text-3xl font-bold" id="typeTitle">Type Name</h2> |
|
<div class="text-4xl" id="typeIcon"></div> |
|
</div> |
|
<div class="bg-gray-50 p-4 rounded-lg" id="typeDescription"> |
|
Type description will appear here... |
|
</div> |
|
<div class="mt-4 text-right"> |
|
<button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors" id="backButton"> |
|
<i class="fas fa-arrow-left mr-2"></i> Back to Types |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
let coins = 0; |
|
let gameActive = false; |
|
|
|
|
|
const typeDescriptions = { |
|
"INTJ": { |
|
icon: '<i class="fas fa-chess-queen text-blue-600"></i>', |
|
title: "INTJ - The Architect", |
|
description: "Imaginative and strategic thinkers with a plan for everything. INTJs are analytical problem-solvers who enjoy coming up with creative solutions. They're independent thinkers who value competence and knowledge above all else." |
|
}, |
|
"INTP": { |
|
icon: '<i class="fas fa-atom text-blue-600"></i>', |
|
title: "INTP - The Logician", |
|
description: "Innovative inventors with an unquenchable thirst for knowledge. INTPs are philosophical thinkers who love exploring theories and abstract concepts. They're often lost in thought and enjoy deconstructing and rebuilding ideas." |
|
}, |
|
"ENTJ": { |
|
icon: '<i class="fas fa-crown text-blue-600"></i>', |
|
title: "ENTJ - The Commander", |
|
description: "Bold, imaginative, and strong-willed leaders who enjoy challenges. ENTJs are natural leaders who excel at organizing people and resources efficiently. They're strategic thinkers who love turning vision into reality." |
|
}, |
|
"ENTP": { |
|
icon: '<i class="fas fa-lightbulb text-blue-600"></i>', |
|
title: "ENTP - The Debater", |
|
description: "Smart and curious thinkers who enjoy intellectual sparring. ENTPs are quick-witted and love exploring possibilities. They enjoy challenging others' ideas and their own, always seeking deeper understanding." |
|
}, |
|
"INFJ": { |
|
icon: '<i class="fas fa-hands-helping text-green-600"></i>', |
|
title: "INFJ - The Advocate", |
|
description: "Quiet and mystical, yet very inspiring and tireless idealists. INFJs are deeply concerned with helping others and making the world a better place. They have strong intuition and often understand things without explanation." |
|
}, |
|
"INFP": { |
|
icon: '<i class="fas fa-feather-alt text-green-600"></i>', |
|
title: "INFP - The Mediator", |
|
description: "Poetic, kind, and altruistic people who want to make the world better. INFPs are idealistic and guided by their core values. They're creative souls who seek deep, meaningful connections with others." |
|
}, |
|
"ENFJ": { |
|
icon: '<i class="fas fa-heart text-green-600"></i>', |
|
title: "ENFJ - The Protagonist", |
|
description: "Charismatic and inspiring leaders who can motivate others. ENFJs are natural-born leaders who genuinely care about others. They're excellent at bringing out the best in people and creating harmony." |
|
}, |
|
"ENFP": { |
|
icon: '<i class="fas fa-star text-green-600"></i>', |
|
title: "ENFP - The Campaigner", |
|
description: "Enthusiastic, creative, and sociable free spirits who can always find a reason to smile. ENFPs are people-focused individuals who love exploring possibilities. They bring energy and optimism to everything they do." |
|
}, |
|
"ISTJ": { |
|
icon: '<i class="fas fa-shield-alt text-yellow-600"></i>', |
|
title: "ISTJ - The Logistician", |
|
description: "Practical and fact-minded individuals whose reliability cannot be doubted. ISTJs are responsible and dependable, with a strong sense of duty. They value tradition and prefer working with concrete information." |
|
}, |
|
"ISFJ": { |
|
icon: '<i class="fas fa-hands text-yellow-600"></i>', |
|
title: "ISFJ - The Defender", |
|
description: "Very dedicated, warm, and protective individuals who are always ready to defend their loved ones. ISFJs are conscientious helpers who pay attention to others' needs. They have excellent memories for details." |
|
}, |
|
"ESTJ": { |
|
icon: '<i class="fas fa-gavel text-yellow-600"></i>', |
|
title: "ESTJ - The Executive", |
|
description: "Excellent administrators who value order and organization in all areas of their lives. ESTJs are traditional and rule-following individuals who like to get things done. They're practical and no-nonsense." |
|
}, |
|
"ESFJ": { |
|
icon: '<i class="fas fa-people-carry text-yellow-600"></i>', |
|
title: "ESFJ - The Consul", |
|
description: "Caring, social, and popular individuals who are always eager to help. ESFJs are warm and sociable people who value harmony. They're conscientious and enjoy taking care of others' practical needs." |
|
}, |
|
"ISTP": { |
|
icon: '<i class="fas fa-tools text-purple-600"></i>', |
|
title: "ISTP - The Virtuoso", |
|
description: "Bold and practical experimenters who excel at using tools and instruments. ISTPs are action-oriented problem solvers who enjoy understanding how things work. They're often adventurous and spontaneous." |
|
}, |
|
"ISFP": { |
|
icon: '<i class="fas fa-paint-brush text-purple-600"></i>', |
|
title: "ISFP - The Adventurer", |
|
description: "Flexible and charming artists who are always ready to explore new things. ISFPs are gentle and sensitive individuals who live in the present moment. They value personal freedom and authentic experiences." |
|
}, |
|
"ESTP": { |
|
icon: '<i class="fas fa-bolt text-purple-600"></i>', |
|
title: "ESTP - The Entrepreneur", |
|
description: "Smart, energetic, and perceptive individuals who truly enjoy living on the edge. ESTPs are action-oriented and enjoy solving problems in the moment. They're energetic and excellent at thinking on their feet." |
|
}, |
|
"ESFP": { |
|
icon: '<i class="fas fa-glass-cheers text-purple-600"></i>', |
|
title: "ESFP - The Entertainer", |
|
description: "Spontaneous, energetic, and enthusiastic people who bring joy to others. ESFPs are the life of the party who love new experiences. They're observant and practical, with a great sense of humor." |
|
} |
|
}; |
|
|
|
|
|
const coinSlot = document.getElementById('coinSlot'); |
|
const coinButton = document.getElementById('coinButton'); |
|
const coinMessage = document.getElementById('coinMessage'); |
|
const coinCount = document.getElementById('coinCount'); |
|
const gameBoard = document.getElementById('gameBoard'); |
|
const typeInfo = document.getElementById('typeInfo'); |
|
const typeTitle = document.getElementById('typeTitle'); |
|
const typeIcon = document.getElementById('typeIcon'); |
|
const typeDescription = document.getElementById('typeDescription'); |
|
const backButton = document.getElementById('backButton'); |
|
const mbtiCards = document.querySelectorAll('.mbti-card'); |
|
|
|
|
|
coinButton.addEventListener('click', insertCoin); |
|
coinSlot.addEventListener('click', insertCoin); |
|
backButton.addEventListener('click', showGameBoard); |
|
|
|
mbtiCards.forEach(card => { |
|
card.addEventListener('click', function() { |
|
if (!gameActive) return; |
|
|
|
const type = this.getAttribute('data-type'); |
|
showTypeInfo(type); |
|
}); |
|
}); |
|
|
|
|
|
function insertCoin() { |
|
coins++; |
|
coinCount.textContent = `Coins: ${coins}`; |
|
|
|
|
|
const coin = document.createElement('div'); |
|
coin.className = 'absolute w-6 h-6 bg-yellow-400 rounded-full shadow-md flex items-center justify-center coin-animation'; |
|
coin.innerHTML = '<i class="fas fa-coins text-yellow-700"></i>'; |
|
coin.style.left = `${Math.random() * 200 + 30}px`; |
|
|
|
coinSlot.appendChild(coin); |
|
|
|
|
|
setTimeout(() => { |
|
coin.remove(); |
|
}, 800); |
|
|
|
|
|
if (!gameActive) { |
|
gameActive = true; |
|
coinMessage.textContent = "Game Active!"; |
|
coinSlot.style.background = "linear-gradient(90deg, #e0e0e0, #f0f0f0)"; |
|
gameBoard.classList.remove('hidden'); |
|
|
|
|
|
setTimeout(() => { |
|
coins--; |
|
coinCount.textContent = `Coins: ${coins}`; |
|
if (coins <= 0) { |
|
endGame(); |
|
} |
|
}, 5000); |
|
} |
|
} |
|
|
|
function endGame() { |
|
gameActive = false; |
|
coinMessage.textContent = "Insert Coin to Continue"; |
|
coinSlot.style.background = "#e5e7eb"; |
|
gameBoard.classList.add('hidden'); |
|
typeInfo.classList.add('hidden'); |
|
} |
|
|
|
function showTypeInfo(type) { |
|
if (coins <= 0) { |
|
endGame(); |
|
return; |
|
} |
|
|
|
const info = typeDescriptions[type]; |
|
typeTitle.textContent = info.title; |
|
typeIcon.innerHTML = info.icon; |
|
typeDescription.textContent = info.description; |
|
|
|
gameBoard.classList.add('hidden'); |
|
typeInfo.classList.remove('hidden'); |
|
typeInfo.classList.add('type-reveal'); |
|
|
|
|
|
coins--; |
|
coinCount.textContent = `Coins: ${coins}`; |
|
|
|
|
|
if (coins <= 0) { |
|
setTimeout(endGame, 30000); |
|
} |
|
} |
|
|
|
function showGameBoard() { |
|
typeInfo.classList.add('hidden'); |
|
gameBoard.classList.remove('hidden'); |
|
} |
|
</script> |
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Hawkwind/mbti-personality-arcade" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
|
</html> |
