Spaces:

madansa7
/

persona

Running

App Files Files Community

madansa7 commited on Jun 7, 2025

Commit

ad2eb5b

verified ·

1 Parent(s): 9609534

undefined - Initial Deployment

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +1054 -18
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Persona
-emoji: 👀
-colorFrom: indigo
 colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: persona
+emoji: 🐳
+colorFrom: purple
 colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1055 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Free Personality Test | Persona</title>
+    <meta name="description" content="Take our free personality test and get a detailed report of your personality type. Understand your strengths and weaknesses.">
+    <!-- Social Media Meta Tags -->
+    <meta property="og:title" content="Free Personality Test | Persona">
+    <meta property="og:description" content="Discover your personality type with our free, in-depth test.">
+    <meta property="og:url" content="https://your-website.com">
+    <meta name="twitter:card" content="summary_large_image">
+    <!-- Fonts and Icons -->
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧠</text></svg>">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <!-- PDF Generation Library -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <style>
+        /* --- General Setup & Variables --- */
+        :root {
+            --primary-color: #6a11cb;
+            --secondary-color: #2575fc;
+            --background-color: #f4f7f6;
+            --text-color: #333;
+            --card-bg: #ffffff;
+            --shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.1);
+            --border-radius: 16px; /* 2xl */
+            --font-family: 'Poppins', sans-serif;
+        }
+        [data-theme="dark"] {
+            --primary-color: #8e44ad;
+            --secondary-color: #3498db;
+            --background-color: #121212;
+            --text-color: #f4f7f6;
+            --card-bg: #1e1e1e;
+            --shadow: 0 10px 20px rgba(0,0,0,0.3), 0 6px 6px rgba(0,0,0,0.3);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: var(--font-family);
+            background-color: var(--background-color);
+            color: var(--text-color);
+            transition: background-color 0.3s, color 0.3s;
+            line-height: 1.6;
+        }
+        /* --- Page Transitions --- */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        main {
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        .page {
+            display: none;
+        }
+        .page.active {
+            display: block;
+        }
+        /* --- Header & Navigation --- */
+        header {
+            padding: 1rem 5%;
+            background: var(--card-bg);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            cursor: pointer;
+        }
+        #theme-toggle {
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: var(--text-color);
+        }
+        /* --- Name Input Section --- */
+        #name-input-section {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            min-height: 80vh;
+            text-align: center;
+            padding: 2rem;
+        }
+        #name-input-section h1 {
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+        }
+        #name-input-section p {
+            font-size: 1.2rem;
+            max-width: 500px;
+            margin-bottom: 2rem;
+            opacity: 0.8;
+        }
+        #name-input {
+            font-size: 1.2rem;
+            padding: 0.8rem;
+            border-radius: 8px;
+            border: 2px solid #ddd;
+            margin-bottom: 1rem;
+            width: 100%;
+            max-width: 400px;
+            text-align: center;
+            background-color: var(--card-bg);
+            color: var(--text-color);
+        }
+        #start-btn {
+            padding: 1rem 2.5rem;
+            font-size: 1.1rem;
+            font-weight: 600;
+        }
+        /* --- Hero Section --- */
+        .hero {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 4rem 2rem;
+            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+            color: #fff;
+            min-height: 70vh;
+        }
+        .hero-container {
+             display: flex;
+             align-items: center;
+             justify-content: center;
+             gap: 2rem;
+             max-width: 1200px;
+             flex-wrap: wrap-reverse; /* Image appears below on small screens */
+        }
+        .hero-content {
+            max-width: 600px;
+            text-align: left;
+        }
+        .hero-content h1 {
+            font-size: 3.5rem;
+            margin-bottom: 1rem;
+            line-height: 1.2;
+        }
+        .hero-content p {
+            font-size: 1.2rem;
+            margin: 0 0 2rem;
+        }
+        .hero-image img {
+            width: 300px;
+            height: 300px;
+            border-radius: 50%;
+            object-fit: cover;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+            animation: float 6s ease-in-out infinite;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-20px); }
+            100% { transform: translateY(0px); }
+        }
+        .cta-button {
+            display: inline-block;
+            padding: 1rem 2.5rem;
+            background-color: #fff;
+            color: var(--primary-color);
+            border: none;
+            border-radius: 50px;
+            font-size: 1.1rem;
+            font-weight: 600;
+            text-decoration: none;
+            transition: transform 0.3s, box-shadow 0.3s;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+            cursor: pointer;
+        }
+        .cta-button:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
+        }
+        .small-text {
+            margin-top: 1rem;
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+        /* --- Personality Types Section --- */
+        .types-section {
+            padding: 4rem 5%;
+            text-align: center;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .types-section h2 {
+            font-size: 2.5rem;
+            margin-bottom: 3rem;
+            color: var(--text-color);
+        }
+        .types-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
+        }
+        .type-card {
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+            padding: 2rem;
+            box-shadow: var(--shadow);
+            cursor: pointer;
+            transition: transform 0.3s, box-shadow 0.3s;
+            border-left: 5px solid var(--primary-color);
+            text-align: center;
+        }
+        .type-card .icon {
+            font-size: 2.5rem;
+            color: var(--primary-color);
+            margin-bottom: 1rem;
+        }
+        .type-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 15px 30px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.1);
+        }
+        .type-card h3 {
+            font-size: 1.5rem;
+            color: var(--primary-color);
+            margin-bottom: 0.5rem;
+        }
+        .type-card h4 {
+            font-size: 1rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            color: var(--text-color);
+        }
+        .type-card p {
+            font-size: 0.9rem;
+            color: var(--text-color);
+            opacity: 0.8;
+        }
+        /* --- Modal --- */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1001;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.6);
+            animation: fadeIn 0.3s;
+        }
+        .modal-content {
+            background-color: var(--card-bg);
+            margin: 10% auto;
+            padding: 2rem;
+            border-radius: var(--border-radius);
+            width: 80%;
+            max-width: 700px;
+            position: relative;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+        }
+        .close-button {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .close-button:hover,
+        .close-button:focus {
+            color: black;
+            text-decoration: none;
+        }
+        #modal-body h3 {
+            color: var(--primary-color);
+            font-size: 2rem;
+            margin-bottom: 1rem;
+        }
+        /* --- Test Page --- */
+        .test-main {
+            max-width: 800px;
+            margin: 2rem auto;
+            padding: 0 1rem;
+        }
+        .progress-container {
+            width: 100%;
+            background-color: #e0e0e0;
+            border-radius: 50px;
+            margin-bottom: 2rem;
+            overflow: hidden;
+        }
+        .progress-bar {
+            width: 0%;
+            height: 15px;
+            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
+            border-radius: 50px;
+            transition: width 0.4s ease-in-out;
+        }
+        .test-container {
+            background: var(--card-bg);
+            padding: 2.5rem;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+        }
+        .question-block {
+            text-align: center;
+            margin-bottom: 2rem;
+            animation: fadeIn 0.5s;
+        }
+        .question-block h2 {
+            font-size: 1.8rem;
+            margin-bottom: 2rem;
+            line-height: 1.4;
+        }
+        .options {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin: 0 auto;
+            max-width: 500px;
+        }
+        .options span {
+            font-weight: 600;
+            padding: 0 0.5rem;
+            color: var(--text-color);
+            opacity: 0.7;
+        }
+        input[type="range"] {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 8px;
+            background: #ddd;
+            border-radius: 5px;
+            outline: none;
+            margin: 0 1rem;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 24px;
+            height: 24px;
+            background: var(--secondary-color);
+            cursor: pointer;
+            border-radius: 50%;
+            box-shadow: 0 0 10px rgba(0,0,0,0.2);
+            transition: background-color 0.2s;
+        }
+        input[type="range"]::-webkit-slider-thumb:hover {
+            background-color: var(--primary-color);
+        }
+        input[type="range"]::-moz-range-thumb {
+            width: 24px;
+            height: 24px;
+            background: var(--secondary-color);
+            cursor: pointer;
+            border-radius: 50%;
+        }
+        .navigation-buttons {
+            display: flex;
+            justify-content: space-between;
+            margin-top: 2rem;
+        }
+        .nav-button {
+            padding: 0.8rem 2rem;
+            border: 2px solid var(--primary-color);
+            border-radius: 50px;
+            background-color: var(--primary-color);
+            color: #fff;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .nav-button:hover:not(:disabled) {
+            background-color: var(--secondary-color);
+            border-color: var(--secondary-color);
+            transform: translateY(-3px);
+        }
+        .nav-button:disabled {
+            background-color: #ccc;
+            border-color: #ccc;
+            cursor: not-allowed;
+            transform: none;
+        }
+        /* --- Results Page --- */
+        .results-main {
+            padding: 2rem 1rem;
+            text-align: center;
+        }
+        .result-card {
+            background: var(--card-bg);
+            max-width: 700px;
+            margin: 2rem auto;
+            padding: 3rem;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+        }
+        #result-type {
+            font-size: 3rem;
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+        #result-title {
+            font-size: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+        #result-summary {
+            font-size: 1.1rem;
+            margin-bottom: 2rem;
+        }
+        .result-actions {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+        .action-button {
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 50px;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.3s;
+            background-color: var(--primary-color);
+            color: #fff;
+            font-weight: 600;
+        }
+        .action-button:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
+        }
+        .action-button.secondary {
+            background-color: transparent;
+            border: 2px solid var(--primary-color);
+            color: var(--primary-color);
+        }
+        .action-button.secondary:hover {
+            background-color: var(--primary-color);
+            color: #fff;
+        }
+        .result-details-section {
+            max-width: 800px;
+            margin: 2rem auto;
+            padding: 2rem;
+            text-align: left;
+            background: var(--card-bg);
+            border-radius: var(--border-radius);
+        }
+        .result-details-section h3 {
+            color: var(--primary-color);
+            margin-top: 1.5rem;
+            margin-bottom: 0.5rem;
+            font-size: 1.5rem;
+        }
+        .result-details-section p {
+            margin-bottom: 1rem;
+        }
+        /* --- Footer --- */
+        footer {
+            text-align: center;
+            padding: 2rem 1rem;
+            margin-top: 2rem;
+            opacity: 0.7;
+        }
+        /* --- Responsive Design --- */
+        @media (max-width: 768px) {
+            .hero-content h1 {
+                font-size: 2.5rem;
+            }
+            .hero-container {
+                gap: 1rem;
+            }
+            .hero-content {
+                text-align: center;
+            }
+            .hero-content p {
+                font-size: 1rem;
+            }
+            .hero-image img {
+                width: 200px;
+                height: 200px;
+            }
+            .types-section h2 {
+                font-size: 2rem;
+            }
+            .modal-content {
+                width: 90%;
+                margin: 20% auto;
+            }
+            .test-container {
+                padding: 1.5rem;
+            }
+            .question-block h2 {
+                font-size: 1.5rem;
+            }
+            .options {
+                flex-direction: column;
+            }
+            input[type="range"] {
+                margin: 1rem 0;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <nav>
+            <div class="logo">Persona</div>
+            <div class="theme-switcher">
+                <button id="theme-toggle">🌙</button>
+            </div>
+        </nav>
+    </header>
+    <main>
+        <!-- Home Page -->
+        <div id="home-page" class="page active">
+            <section id="name-input-section">
+                 <h1>Welcome to Persona</h1>
+                 <p>Let's start your journey of self-discovery. First, what should we call you?</p>
+                 <input type="text" id="name-input" placeholder="Enter your name">
+                 <button id="start-btn" class="cta-button">Start Discovery</button>
+            </section>
+            <div id="main-content" style="display: none;">
+                <section class="hero">
+                    <div class="hero-container">
+                        <div class="hero-content">
+                            <h1 id="hero-title">Discover Yourself</h1>
+                            <p>Uncover your true potential. Our scientifically validated personality test will help you understand your strengths, weaknesses, and how you interact with the world.</p>
+                            <button id="take-test-btn" class="cta-button">Take the Test →</button>
+                            <p class="small-text">Takes less than 12 minutes.</p>
+                        </div>
+                        <div class="hero-image">
+                            <img src="https://placehold.co/400x400/6a11cb/ffffff?text=Persona" alt="Abstract representation of a personality">
+                        </div>
+                    </div>
+                </section>
+                <section id="personality-types" class="types-section">
+                    <h2><i class="fas fa-users"></i> The 16 Personality Types</h2>
+                    <div class="types-grid" id="types-grid">
+                        <!-- Personality cards will be injected by JavaScript -->
+                    </div>
+                </section>
+            </div>
+        </div>
+        <!-- Test Page -->
+        <div id="test-page" class="page">
+             <div class="test-main">
+                <div class="progress-container">
+                    <div class="progress-bar" id="progress-bar"></div>
+                </div>
+                <div class="test-container">
+                    <div id="question-container" class="question-block">
+                        <!-- Question content will be injected by JavaScript -->
+                    </div>
+                    <div class="navigation-buttons">
+                        <button id="prev-btn" class="nav-button" disabled>Previous</button>
+                        <button id="next-btn" class="nav-button">Next</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Results Page -->
+        <div id="results-page" class="page">
+            <div class="results-main">
+                <div id="result-content" class="result-card">
+                    <h1 id="result-type"></h1>
+                    <h2 id="result-title"></h2>
+                    <p id="result-summary"></p>
+                    <div class="result-actions">
+                        <button id="download-pdf-btn" class="action-button">Download PDF</button>
+                        <button id="retake-test-btn" class="action-button secondary">Retake Test</button>
+                    </div>
+                </div>
+                <div id="result-details" class="result-details-section">
+                    <!-- Detailed results will be injected here -->
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Modal for Personality Type Details -->
+    <div id="type-modal" class="modal">
+        <div class="modal-content">
+            <span class="close-button">&times;</span>
+            <div id="modal-body">
+                <!-- Modal content will be injected by JavaScript -->
+            </div>
+        </div>
+    </div>
+    <footer>
+        <p>&copy; <span id="footer-year"></span> Persona. All Rights Reserved. Inspired by 16Personalities.</p>
+    </footer>
+    <script>
+    document.addEventListener('DOMContentLoaded', () => {
+        // --- DATABASE ---
+        const personalityData = {
+            "INTJ": { title: "The Architect", icon: "fas fa-chess-king", summary: "Imaginative and strategic thinkers, with a plan for everything.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Quick, imaginative, and strategic mind. High self-confidence. Independent and decisive. Hard-working and determined.</p><p><strong>Weaknesses:</strong> Can be arrogant and judgmental. Often overly analytical. Clueless in romance.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>INTJs excel in careers that require intellectual rigor and strategic thinking, such as scientists, engineers, strategists, and university professors.</p>" },
+            "INTP": { title: "The Logician", icon: "fas fa-flask", summary: "Innovative inventors with an unquenchable thirst for knowledge.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Great analysts and abstract thinkers. Imaginative and original. Open-minded.</p><p><strong>Weaknesses:</strong> Can be very private and withdrawn. Insensitive. Absent-minded. Condescending.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>INTPs thrive in fields that value expertise and logic, such as philosophy, computer science, and technical writing.</p>" },
+            "ENTJ": { title: "The Commander", icon: "fas fa-bullhorn", summary: "Bold, imaginative and strong-willed leaders, always finding a way – or making one.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Efficient, energetic, self-confident, strong-willed, strategic thinkers.</p><p><strong>Weaknesses:</strong> Stubborn, dominant, intolerant, impatient, arrogant.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ENTJs are natural leaders, well-suited for roles like CEO, entrepreneur, or military officer.</p>" },
+            "ENTP": { title: "The Debater", icon: "fas fa-lightbulb", summary: "Smart and curious thinkers who cannot resist an intellectual challenge.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Knowledgeable, quick thinkers, original, excellent brainstormers, charismatic.</p><p><strong>Weaknesses:</strong> Very argumentative, insensitive, intolerant, can find it difficult to focus.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ENTPs enjoy complex challenges and are suited for careers like entrepreneur, lawyer, or consultant.</p>" },
+            "INFJ": { title: "The Advocate", icon: "fas fa-hand-holding-heart", summary: "Quiet and mystical, yet very inspiring and tireless idealists.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Creative, insightful, inspiring, convincing, decisive, determined and passionate.</p><p><strong>Weaknesses:</strong> Sensitive, extremely private, perfectionistic, always need to have a cause, can burn out easily.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>INFJs seek careers with a purpose, such as counselor, teacher, or artist.</p>" },
+            "INFP": { title: "The Mediator", icon: "fas fa-dove", summary: "Poetic, kind and altruistic people, always eager to help a good cause.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Idealistic, seek and value harmony, open-minded and flexible, very creative, passionate and energetic.</p><p><strong>Weaknesses:</strong> Too idealistic, too altruistic, impractical, dislike dealing with data.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>INFPs thrive in creative and mission-driven fields like writing, psychology, and social work.</p>" },
+            "ENFJ": { title: "The Protagonist", icon: "fas fa-users", summary: "Charismatic and inspiring leaders, able to mesmerize their listeners.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Tolerant, reliable, charismatic, altruistic, natural leaders.</p><p><strong>Weaknesses:</strong> Overly idealistic, too selfless, too sensitive, fluctuating self-esteem.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ENFJs are natural people-leaders, excelling in teaching, politics, and sales.</p>" },
+            "ENFP": { title: "The Campaigner", icon: "fas fa-laugh-beam", summary: "Enthusiastic, creative and sociable free spirits, who can always find a reason to smile.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Curious, observant, energetic and enthusiastic, excellent communicators, know how to relax.</p><p><strong>Weaknesses:</strong> Poor practical skills, find it difficult to focus, overthink things, get stressed easily.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ENFPs' creativity and people skills make them great journalists, actors, and advertising creatives.</p>" },
+            "ISTJ": { title: "The Logistician", icon: "fas fa-clipboard-list", summary: "Practical and fact-minded individuals, whose reliability cannot be doubted.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Honest and direct, strong-willed and dutiful, very responsible, calm and practical.</p><p><strong>Weaknesses:</strong> Stubborn, insensitive, always by the book, judgmental.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ISTJs are the bedrock of society, excelling in roles like accountant, auditor, or systems administrator.</p>" },
+            "ISFJ": { title: "The Defender", icon: "fas fa-shield-alt", summary: "Very dedicated and warm protectors, always ready to defend their loved ones.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Supportive, reliable and patient, imaginative and observant, enthusiastic, loyal and hard-working.</p><p><strong>Weaknesses:</strong> Humble and shy, take things too personally, repress their feelings, reluctant to change.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ISFJs are caring and dedicated, making them excellent nurses, doctors, and social workers.</p>" },
+            "ESTJ": { title: "The Executive", icon: "fas fa-gavel", summary: "Excellent administrators, unsurpassed at managing things – or people.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Dedicated, strong-willed, direct and honest, loyal, patient and reliable, enjoy creating order.</p><p><strong>Weaknesses:</strong> Inflexible and stubborn, uncomfortable with unconventional situations, judgmental.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ESTJs thrive in management and administration, such as financial officers or project managers.</p>" },
+            "ESFJ": { title: "The Consul", icon: "fas fa-handshake", summary: "Extraordinarily caring, social and popular people, always eager to help.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Strong practical skills, strong sense of duty, very loyal, sensitive and warm.</p><p><strong>Weaknesses:</strong> Worried about their social status, inflexible, reluctant to improvise or innovate.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ESFJs are community builders, finding fulfillment in roles like nursing, teaching, and event coordinating.</p>" },
+            "ISTP": { title: "The Virtuoso", icon: "fas fa-tools", summary: "Bold and practical experimenters, masters of all kinds of tools.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Optimistic and energetic, creative and practical, spontaneous and rational.</p><p><strong>Weaknesses:</strong> Stubborn, insensitive, private and reserved, easily bored, dislike commitment.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ISTPs are hands-on problem-solvers, perfect for careers in mechanics, engineering, or as first responders.</p>" },
+            "ISFP": { title: "The Adventurer", icon: "fas fa-paint-brush", summary: "Flexible and charming artists, always ready to explore and experience something new.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Charming, sensitive to others, imaginative, passionate, curious, artistic.</p><p><strong>Weaknesses:</strong> Fiercely independent, unpredictable, easily stressed, overly competitive.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ISFPs are creative souls who shine as artists, designers, musicians, and chefs.</p>" },
+            "ESTP": { title: "The Entrepreneur", icon: "fas fa-rocket", summary: "Smart, energetic and very perceptive people, who truly enjoy living on the edge.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Bold, rational and practical, original, perceptive, direct, sociable.</p><p><strong>Weaknesses:</strong> Insensitive, impatient, risk-prone, unstructured, may miss the bigger picture.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ESTPs thrive in high-energy environments like sales, emergency services, and entrepreneurship.</p>" },
+            "ESFP": { title: "The Entertainer", icon: "fas fa-microphone-alt", summary: "Spontaneous, energetic and enthusiastic people – life is never boring around them.", description: "<h3><i class='fas fa-puzzle-piece'></i> Strengths & Weaknesses</h3><p><strong>Strengths:</strong> Bold and original. Excellent people skills. Practical. Spontaneous and fun-loving.</p><p><strong>Weaknesses:</strong> Sensitive. Conflict-averse. Easily bored. Poor long-term planners.</p><h3><i class='fas fa-briefcase'></i> Career Paths</h3><p>ESFPs are born to be in the spotlight. Careers in entertainment, sales, event planning, and customer service suit them well.</p>" }
+        };
+        const questions = [
+            // Mind: Introvert (I) vs. Extravert (E)
+            { text: "You regularly make new friends.", dimension: 'E' },
+            { text: "You feel comfortable just walking up to someone you find interesting and striking up a conversation.", dimension: 'E' },
+            { text: "You feel more energized after spending time with a group of people.", dimension: 'E' },
+            { text: "At parties, you tend to stick to a few people you know rather than mingle with everyone.", dimension: 'I' },
+            { text: "You often prefer to express yourself in writing.", dimension: 'I' },
+            { text: "You would rather have a few close friends than a wide circle of acquaintances.", dimension: 'I' },
+            { text: "You enjoy being the center of attention.", dimension: 'E' },
+            { text: "You often find yourself lost in thought and unaware of your surroundings.", dimension: 'I' },
+            { text: "You are quick to respond to emails and messages.", dimension: 'E' },
+            { text: "In your free time, you prefer to engage in solitary activities.", dimension: 'I' },
+            { text: "You enjoy large parties and social gatherings.", dimension: 'E' },
+            { text: "Being in a quiet, secluded place is rejuvenating for you.", dimension: 'I' },
+            { text: "You are often the one to start a conversation with new people.", dimension: 'E' },
+            { text: "You feel a bit drained after a day of social activities, even if you enjoyed them.", dimension: 'I' },
+            { text: "You think of yourself as a private person.", dimension: 'I' },
+            // Energy: Intuitive (N) vs. Observant (S)
+            { text: "You are more intrigued by a general concept than by the specific details.", dimension: 'N' },
+            { text: "You tend to focus on what is happening here and now, rather than what might happen in the future.", dimension: 'S' },
+            { text: "You enjoy philosophical discussions.", dimension: 'N' },
+            { text: "You prefer practical, hands-on activities over theoretical ones.", dimension: 'S' },
+            { text: "You often have a strong sense of impending events.", dimension: 'N' },
+            { text: "You trust experience more than imagination.", dimension: 'S' },
+            { text: "You like to explore the 'what ifs' and possibilities of a situation.", dimension: 'N' },
+            { text: "You are more down-to-earth than head-in-the-clouds.", dimension: 'S' },
+            { text: "You find metaphors and symbolism fascinating.", dimension: 'N' },
+            { text: "You would rather see how something works in practice than read a manual about it.", dimension: 'S' },
+            { text: "You are often described as imaginative.", dimension: 'N' },
+            { text: "You prefer to rely on what you can see and touch.", dimension: 'S' },
+            { text: "Abstract theories and ideas are exciting to you.", dimension: 'N' },
+            { text: "You pay a lot of attention to details in your environment.", dimension: 'S' },
+            { text: "You are more likely to ponder the meaning of life than to plan your daily tasks.", dimension: 'N' },
+            // Nature: Thinking (T) vs. Feeling (F)
+            { text: "When making a decision, you prioritize logic over others' feelings.", dimension: 'T' },
+            { text: "You find it easy to understand what others are feeling.", dimension: 'F' },
+            { text: "You believe that truth should be valued more than tact.", dimension: 'T' },
+            { text: "Your decisions are often influenced by your emotions.", dimension: 'F' },
+            { text: "You enjoy finding flaws in an argument.", dimension: 'T' },
+            { text: "You are more concerned with harmony than with proving a point.", dimension: 'F' },
+            { text: "You would rather be seen as competent than compassionate.", dimension: 'T' },
+            { text: "You often make choices to accommodate others.", dimension: 'F' },
+            { text: "You can stay detached and objective in a heated debate.", dimension: 'T' },
+            { text: "Seeing other people cry can easily make you feel like you want to cry too.", dimension: 'F' },
+            { text: "You are more likely to criticize someone's work than to praise it.", dimension: 'T' },
+            { text: "You value empathy and kindness highly in others.", dimension: 'F' },
+            { text: "You find it more important to be efficient than to be cooperative.", dimension: 'T' },
+            { text: "You are careful not to hurt other people's feelings.", dimension: 'F' },
+            { text: "It's easy for you to make impersonal decisions.", dimension: 'T' },
+            // Tactics: Judging (J) vs. Prospecting (P)
+            { text: "You prefer to have a detailed plan rather than to improvise.", dimension: 'J' },
+            { text: "You enjoy spontaneity and last-minute plans.", dimension: 'P' },
+            { text: "You like to have your work done well before the deadline.", dimension: 'J' },
+            { text: "You are comfortable with a flexible schedule.", dimension: 'P' },
+            { text: "You like to make to-do lists and stick to them.", dimension: 'J' },
+            { text: "You prefer to keep your options open as long as possible.", dimension: 'P' },
+            { text: "You find satisfaction in a tidy and organized workspace.", dimension: 'J' },
+            { text: "You often work in bursts of energy.", dimension: 'P' },
+            { text: "You prefer to finish one project before starting another.", dimension: 'J' },
+            { text: "You are more of a 'go with the flow' type of person.", dimension: 'P' },
+            { text: "You feel more comfortable when you know what to expect.", dimension: 'J' },
+            { text: "You enjoy adapting to new and unexpected situations.", dimension: 'P' },
+            { text: "You are a methodical and systematic worker.", dimension: 'J' },
+            { text: "You often find it difficult to commit to a plan.", dimension: 'P' },
+            { text: "You like to have things settled and decided.", dimension: 'J' }
+        ];
+        // --- DOM ELEMENTS ---
+        const themeToggle = document.getElementById('theme-toggle');
+        const typesGrid = document.getElementById('types-grid');
+        const modal = document.getElementById('type-modal');
+        const modalBody = document.getElementById('modal-body');
+        const closeModalBtn = document.getElementsByClassName('close-button')[0];
+        const logo = document.querySelector('.logo');
+        // Page containers
+        const homePage = document.getElementById('home-page');
+        const testPage = document.getElementById('test-page');
+        const resultsPage = document.getElementById('results-page');
+        // Home page elements
+        const nameInputSection = document.getElementById('name-input-section');
+        const nameInput = document.getElementById('name-input');
+        const startBtn = document.getElementById('start-btn');
+        const mainContent = document.getElementById('main-content');
+        const heroTitle = document.getElementById('hero-title');
+        const takeTestBtn = document.getElementById('take-test-btn');
+        // Test page elements
+        const questionContainer = document.getElementById('question-container');
+        const progressBar = document.getElementById('progress-bar');
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+        // Results page elements
+        const resultContent = document.getElementById('result-content');
+        const resultTypeEl = document.getElementById('result-type');
+        const resultTitleEl = document.getElementById('result-title');
+        const resultSummaryEl = document.getElementById('result-summary');
+        const resultDetailsEl = document.getElementById('result-details');
+        const downloadPdfBtn = document.getElementById('download-pdf-btn');
+        const retakeTestBtn = document.getElementById('retake-test-btn');
+        // Footer
+        document.getElementById('footer-year').textContent = new Date().getFullYear();
+        // --- APP STATE ---
+        let currentQuestionIndex = 0;
+        let userName = '';
+        const userAnswers = new Array(questions.length).fill(null);
+        // --- PAGE NAVIGATION ---
+        function navigateTo(pageId) {
+            document.querySelectorAll('.page').forEach(page => page.classList.remove('active'));
+            document.getElementById(pageId).classList.add('active');
+            window.scrollTo(0, 0);
+        }
+        startBtn.addEventListener('click', () => {
+            userName = nameInput.value.trim();
+            if (userName) {
+                heroTitle.textContent = `Discover Yourself, ${userName}!`;
+                nameInputSection.style.display = 'none';
+                mainContent.style.display = 'block';
+            } else {
+                alert('Please enter your name to begin.');
+            }
+        });
+        takeTestBtn.addEventListener('click', () => {
+            navigateTo('test-page');
+            startTest();
+        });
+        logo.addEventListener('click', () => {
+            navigateTo('home-page');
+        });
+        // --- THEME SWITCHER ---
+        const currentTheme = localStorage.getItem('theme');
+        if (currentTheme) {
+            document.documentElement.setAttribute('data-theme', currentTheme);
+            themeToggle.textContent = currentTheme === 'dark' ? '☀️' : '🌙';
+        }
+        themeToggle.addEventListener('click', () => {
+            let theme = document.documentElement.getAttribute('data-theme');
+            if (theme === 'dark') {
+                document.documentElement.setAttribute('data-theme', 'light');
+                localStorage.setItem('theme', 'light');
+                themeToggle.textContent = '🌙';
+            } else {
+                document.documentElement.setAttribute('data-theme', 'dark');
+                localStorage.setItem('theme', 'dark');
+                themeToggle.textContent = '☀️';
+            }
+        });
+        // --- HOME PAGE LOGIC ---
+        function populatePersonalityCards() {
+            if (typesGrid && personalityData) {
+                Object.keys(personalityData).forEach(type => {
+                    const card = document.createElement('div');
+                    card.className = 'type-card';
+                    card.dataset.type = type;
+                    const typeInfo = personalityData[type];
+                    card.innerHTML = `<div class="icon"><i class="${typeInfo.icon}"></i></div><h3>${type}</h3><h4>${typeInfo.title}</h4><p>${typeInfo.summary}</p>`;
+                    card.addEventListener('click', () => openModal(type));
+                    typesGrid.appendChild(card);
+                });
+            }
+        }
+        // --- MODAL LOGIC ---
+        function openModal(type) {
+            const typeInfo = personalityData[type];
+            modalBody.innerHTML = `<h3><i class="${typeInfo.icon}"></i> ${type} - ${typeInfo.title}</h3>${typeInfo.description}`;
+            modal.style.display = 'block';
+        }
+        closeModalBtn.onclick = () => modal.style.display = "none";
+        window.onclick = (event) => {
+            if (event.target == modal) {
+                modal.style.display = "none";
+            }
+        };
+        // --- TEST PAGE LOGIC ---
+        function startTest() {
+            currentQuestionIndex = 0;
+            userAnswers.fill(null);
+            showQuestion(currentQuestionIndex);
+        }
+        function showQuestion(index) {
+            const question = questions[index];
+            questionContainer.innerHTML = `
+                <h2>${question.text}</h2>
+                <div class="options">
+                    <span>Disagree</span>
+                    <input type="range" id="answer-slider" min="-3" max="3" value="${userAnswers[index] === null ? 0 : userAnswers[index]}">
+                    <span>Agree</span>
+                </div>
+            `;
+            const slider = document.getElementById('answer-slider');
+            slider.addEventListener('input', () => {
+                userAnswers[index] = parseInt(slider.value, 10);
+            });
+            updateNavigation();
+            updateProgressBar();
+        }
+        function updateNavigation() {
+            prevBtn.disabled = currentQuestionIndex === 0;
+            nextBtn.textContent = currentQuestionIndex === questions.length - 1 ? 'Finish' : 'Next';
+        }
+        function updateProgressBar() {
+            const progress = (currentQuestionIndex / questions.length) * 100;
+            progressBar.style.width = `${progress}%`;
+        }
+        nextBtn.addEventListener('click', () => {
+            if (userAnswers[currentQuestionIndex] === null) {
+                userAnswers[currentQuestionIndex] = 0; // Default if not moved
+            }
+            if (currentQuestionIndex < questions.length - 1) {
+                currentQuestionIndex++;
+                showQuestion(currentQuestionIndex);
+            } else {
+                progressBar.style.width = `100%`;
+                const finalResult = calculateResult();
+                displayResults(finalResult);
+                navigateTo('results-page');
+            }
+        });
+        prevBtn.addEventListener('click', () => {
+            if (currentQuestionIndex > 0) {
+                currentQuestionIndex--;
+                showQuestion(currentQuestionIndex);
+            }
+        });
+        // --- RESULTS LOGIC ---
+        function calculateResult() {
+            const scores = { E: 0, I: 0, N: 0, S: 0, T: 0, F: 0, J: 0, P: 0 };
+            userAnswers.forEach((answer, index) => {
+                if (answer === null) return;
+                const question = questions[index];
+                const dimension = question.dimension;
+                // Positive value for Agree, negative for Disagree
+                if (answer > 0) scores[dimension] += answer;
+                else if (answer < 0) scores[dimension === 'E' ? 'I' : dimension === 'I' ? 'E' : dimension === 'N' ? 'S' : dimension === 'S' ? 'N' : dimension === 'T' ? 'F' : dimension === 'F' ? 'T' : dimension === 'J' ? 'P' : 'J'] -= answer;
+            });
+            let result = '';
+            result += scores.E >= scores.I ? 'E' : 'I';
+            result += scores.N >= scores.S ? 'N' : 'S';
+            result += scores.T >= scores.F ? 'T' : 'F';
+            result += scores.J >= scores.P ? 'J' : 'P';
+            return result;
+        }
+        function displayResults(personalityType) {
+             if (personalityType && personalityData[personalityType]) {
+                const data = personalityData[personalityType];
+                resultTypeEl.textContent = personalityType;
+                resultTitleEl.textContent = data.title;
+                resultSummaryEl.innerHTML = `Here are your results, <strong>${userName || 'friend'}</strong>! You are an ${data.title}.<br>${data.summary}`;
+                resultDetailsEl.innerHTML = data.description;
+            } else {
+                resultContent.innerHTML = '<h1>Result not found!</h1><p>It seems you haven\'t completed the test, or the personality type is invalid. Please take the test to get your result.</p>';
+            }
+        }
+        retakeTestBtn.addEventListener('click', () => {
+            navigateTo('test-page');
+            startTest();
+        });
+        downloadPdfBtn.addEventListener('click', () => {
+            const personalityType = resultTypeEl.textContent;
+            if (!personalityType || !personalityData[personalityType]) return;
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF();
+            const data = personalityData[personalityType];
+            doc.setFont('helvetica', 'bold');
+            doc.setFontSize(24);
+            doc.text(`Persona Report for ${userName || 'User'}`, 20, 20);
+            doc.setFontSize(18);
+            doc.text(`${personalityType} - ${data.title}`, 20, 30);
+            doc.setFont('helvetica', 'normal');
+            doc.setFontSize(12);
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = data.description;
+            let yPos = 45;
+            const summaryLines = doc.splitTextToSize(`Summary: ${data.summary}`, 170);
+            doc.text(summaryLines, 20, yPos);
+            yPos += (summaryLines.length * 7) + 10;
+            let contentText = '';
+            tempDiv.childNodes.forEach(node => {
+                if (node.nodeName === 'H3') {
+                     // remove icon html before adding text
+                    const cleanText = node.textContent;
+                    contentText += `\n\n${cleanText.trim()}\n`;
+                } else if (node.nodeName === 'P') {
+                    contentText += `${node.innerText}\n`;
+                }
+            });
+            const detailLines = doc.splitTextToSize(contentText.trim(), 170);
+            doc.text(detailLines, 20, yPos);
+            doc.save(`${personalityType}_Personality_Result.pdf`);
+        });
+        // --- INITIALIZE APP ---
+        populatePersonalityCards();
+        // Hide main content until name is entered
+        mainContent.style.display = 'none';
+        nameInputSection.style.display = 'flex';
+        navigateTo('home-page');
+    });
+    </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=madansa7/persona" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt ADDED Viewed

File without changes