File size: 22,376 Bytes
1db15c9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 |
<!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">
<!-- Analyst Types -->
<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>
<!-- Diplomat Types -->
<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>
<!-- Sentinel Types -->
<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>
<!-- Explorer Types -->
<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>
// Game state
let coins = 0;
let gameActive = false;
// MBTI type descriptions
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."
}
};
// DOM elements
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');
// Event listeners
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);
});
});
// Functions
function insertCoin() {
coins++;
coinCount.textContent = `Coins: ${coins}`;
// Create a visual coin
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);
// Remove coin after animation
setTimeout(() => {
coin.remove();
}, 800);
// Activate game if not already active
if (!gameActive) {
gameActive = true;
coinMessage.textContent = "Game Active!";
coinSlot.style.background = "linear-gradient(90deg, #e0e0e0, #f0f0f0)";
gameBoard.classList.remove('hidden');
// Use a coin
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');
// Use a coin
coins--;
coinCount.textContent = `Coins: ${coins}`;
// End game if no coins left
if (coins <= 0) {
setTimeout(endGame, 30000); // Give them time to read
}
}
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> |