Upload 2 files

example.py

@@ -0,0 +1,348 @@
+"""
+Concept: Flask + HTML Integration - Spiritual Path Assessment Tool
+
+This app helps users discover which religious or spiritual path aligns with their 
+beliefs, values, lifestyle, and background through an interactive questionnaire.
+"""
+# cSpell:ignore jsonify
+
+from flask import Flask, render_template, request, jsonify, session, redirect, url_for
+import json
+import os
+import warnings
+from dotenv import load_dotenv
+from together import Together
+
+warnings.filterwarnings("ignore")
+load_dotenv()
+
+app = Flask(__name__)
+app.secret_key = 'spiritual-journey-finder-2024'
+
+# File to store user data
+USERS_FILE = 'users_data.json'
+
+# Together API for chatbot
+TOGETHER_API_KEY = os.getenv("TOGETHER_API_KEY")
+client = Together(api_key=TOGETHER_API_KEY) if TOGETHER_API_KEY else None
+
+# Assessment Questions
+QUESTIONS = [
+    {
+        "id": 1,
+        "question": "What is your view on the nature of the divine?",
+        "options": {
+            "One supreme God who created everything": {"christianity": 3, "islam": 3, "judaism": 3},
+            "Multiple gods and goddesses": {"hinduism": 3, "paganism": 3},
+            "A universal energy or force": {"buddhism": 2, "taoism": 3, "new_age": 3},
+            "No divine being, focus on human potential": {"humanism": 3, "atheism": 3},
+            "Uncertain or unknowable": {"agnosticism": 3}
+        }
+    },
+    {
+        "id": 2,
+        "question": "How do you prefer to connect with spirituality?",
+        "options": {
+            "Through organized worship and community": {"christianity": 2, "islam": 2, "judaism": 2},
+            "Through personal meditation and reflection": {"buddhism": 3, "hinduism": 2, "taoism": 2},
+            "Through nature and natural cycles": {"paganism": 3, "indigenous": 3},
+            "Through reason and philosophy": {"humanism": 2, "stoicism": 3},
+            "I don't feel the need for spiritual connection": {"atheism": 3}
+        }
+    },
+    {
+        "id": 3,
+        "question": "What is your belief about the afterlife?",
+        "options": {
+            "Heaven or Hell based on faith/deeds": {"christianity": 3, "islam": 3},
+            "Reincarnation until enlightenment": {"hinduism": 3, "buddhism": 3},
+            "Ancestral realm or spiritual world": {"indigenous": 2, "paganism": 2},
+            "No afterlife, this life is all there is": {"atheism": 3, "humanism": 2},
+            "Unsure or open to possibilities": {"agnosticism": 2, "new_age": 2}
+        }
+    },
+    {
+        "id": 4,
+        "question": "What guides your moral and ethical decisions?",
+        "options": {
+            "Sacred texts and religious teachings": {"christianity": 3, "islam": 3, "judaism": 3},
+            "Universal principles of compassion and mindfulness": {"buddhism": 3, "jainism": 3},
+            "Harmony with nature and balance": {"taoism": 3, "indigenous": 2},
+            "Reason, empathy, and human rights": {"humanism": 3, "secularism": 3},
+            "Personal intuition and inner wisdom": {"new_age": 2, "spiritualism": 3}
+        }
+    },
+    {
+        "id": 5,
+        "question": "What role does ritual or practice play in your life?",
+        "options": {
+            "Regular prayer and worship are essential": {"islam": 3, "christianity": 2, "judaism": 2},
+            "Daily meditation or mindfulness practice": {"buddhism": 3, "hinduism": 2, "zen": 3},
+            "Seasonal celebrations and ceremonies": {"paganism": 3, "wicca": 3},
+            "Minimal to no ritual, prefer intellectual engagement": {"humanism": 2, "deism": 2},
+            "Flexible, whatever feels meaningful to me": {"new_age": 2, "spiritual_not_religious": 3}
+        }
+    },
+    {
+        "id": 6,
+        "question": "How do you view the relationship between humans and nature?",
+        "options": {
+            "Humans are stewards of God's creation": {"christianity": 2, "islam": 2, "judaism": 2},
+            "All life is interconnected and sacred": {"buddhism": 2, "hinduism": 2, "jainism": 3},
+            "Nature itself is divine": {"paganism": 3, "pantheism": 3, "indigenous": 3},
+            "Nature follows natural laws we can understand": {"atheism": 2, "humanism": 2},
+            "We should live in harmony with natural flow": {"taoism": 3, "shintoism": 2}
+        }
+    },
+    {
+        "id": 7,
+        "question": "What is your view on suffering and its purpose?",
+        "options": {
+            "A test of faith or part of God's plan": {"christianity": 2, "islam": 2},
+            "Result of attachment and desire": {"buddhism": 3, "stoicism": 2},
+            "Karma from past actions": {"hinduism": 3, "sikhism": 2},
+            "Random or result of natural causes": {"atheism": 3, "secular": 2},
+            "An opportunity for growth and learning": {"new_age": 2, "spiritualism": 2}
+        }
+    },
+    {
+        "id": 8,
+        "question": "How important is community in your spiritual life?",
+        "options": {
+            "Very important, prefer group worship": {"christianity": 2, "islam": 2, "sikhism": 3},
+            "Somewhat important, but personal practice matters more": {"buddhism": 2, "hinduism": 2},
+            "Community of like-minded seekers": {"paganism": 2, "unitarian": 3},
+            "Not important, spirituality is personal": {"spiritual_not_religious": 3, "deism": 2},
+            "Prefer secular community over religious": {"humanism": 2, "atheism": 2}
+        }
+    }
+]
+
+# Religion Descriptions
+RELIGIONS = {
+    "christianity": {"name": "Christianity", "description": "Faith in Jesus Christ emphasizing love, forgiveness, and salvation through grace.", "practices": "Prayer, Bible study, church, communion", "core_beliefs": "Trinity, salvation through Christ, eternal life"},
+    "islam": {"name": "Islam", "description": "Submission to Allah through Prophet Muhammad's teachings and the Quran.", "practices": "Five daily prayers, Ramadan fasting, charity, Mecca pilgrimage", "core_beliefs": "One God (Allah), Muhammad as prophet, Day of Judgment"},
+    "buddhism": {"name": "Buddhism", "description": "Path to enlightenment through mindfulness and compassion.", "practices": "Meditation, mindfulness, Eightfold Path", "core_beliefs": "Four Noble Truths, impermanence, ending suffering"},
+    "hinduism": {"name": "Hinduism", "description": "Ancient tradition embracing diverse paths to spiritual realization.", "practices": "Yoga, meditation, puja, festivals", "core_beliefs": "Dharma, karma, reincarnation, moksha, multiple paths"},
+    "judaism": {"name": "Judaism", "description": "Covenant with God through Torah and Jewish community.", "practices": "Shabbat, Torah study, prayer, kosher", "core_beliefs": "One God, Torah as divine law, ethical monotheism"},
+    "taoism": {"name": "Taoism", "description": "Living in harmony with the Tao - the natural order.", "practices": "Meditation, tai chi, wu wei, simplicity", "core_beliefs": "Yin-yang balance, harmony with nature"},
+    "paganism": {"name": "Modern Paganism", "description": "Nature-based spirituality honoring seasonal cycles.", "practices": "Seasonal celebrations, rituals, nature work", "core_beliefs": "Nature as sacred, multiple deities"},
+    "humanism": {"name": "Secular Humanism", "description": "Ethics emphasizing human values and reason without supernatural beliefs.", "practices": "Critical thinking, ethical living, community service", "core_beliefs": "Human dignity, reason, science, secular ethics"},
+    "atheism": {"name": "Atheism", "description": "Lack of belief in deities with naturalistic worldview.", "practices": "Evidence-based thinking, secular community", "core_beliefs": "No gods, natural explanations, this-life focus"},
+    "agnosticism": {"name": "Agnosticism", "description": "Divine existence is unknown or unknowable.", "practices": "Philosophical inquiry, ethical living", "core_beliefs": "Uncertainty about divine, questions over answers"},
+    "new_age": {"name": "New Age Spirituality", "description": "Eclectic approach emphasizing personal growth.", "practices": "Meditation, energy work, crystals, yoga", "core_beliefs": "Personal transformation, universal consciousness"},
+    "spiritual_not_religious": {"name": "Spiritual But Not Religious", "description": "Personal spirituality without organized religion.", "practices": "Personal practices, meditation, self-reflection", "core_beliefs": "Individual journey, authenticity, diverse wisdom"},
+    "sikhism": {"name": "Sikhism", "description": "One God emphasizing service, equality, and meditation.", "practices": "Prayer, meditation, community service, 5 Ks", "core_beliefs": "One God, equality, honest living, sharing"},
+    "indigenous": {"name": "Indigenous Spirituality", "description": "Traditional practices honoring ancestors and land.", "practices": "Ceremonies, storytelling, seasonal rituals", "core_beliefs": "Land connection, ancestor veneration, reciprocity"}
+}
+
+def load_users():
+    """Load users from JSON file"""
+    if os.path.exists(USERS_FILE):
+        with open(USERS_FILE, 'r') as f:
+            return json.load(f)
+    return {}
+
+def save_users(users):
+    """Save users to JSON file"""
+    with open(USERS_FILE, 'w') as f:
+        json.dump(users, f, indent=2)
+
+def calculate_results(answers):
+    """Calculate which spiritual paths align with user's answers"""
+    scores = {}
+    
+    for answer in answers:
+        question = next((q for q in QUESTIONS if q["id"] == answer["question_id"]), None)
+        if question and answer["answer"] in question["options"]:
+            points = question["options"][answer["answer"]]
+            for religion, score in points.items():
+                scores[religion] = scores.get(religion, 0) + score
+    
+    # Sort by score
+    sorted_scores = sorted(scores.items(), key=lambda x: x[1], reverse=True)
+    
+    # Get top 3 recommendations
+    recommendations = []
+    for religion_key, score in sorted_scores[:3]:
+        if religion_key in RELIGIONS:
+            religion_info = RELIGIONS[religion_key].copy()
+            religion_info["score"] = score
+            religion_info["percentage"] = round((score / (len(answers) * 3)) * 100)
+            recommendations.append(religion_info)
+    
+    return recommendations
+
+@app.route("/")
+def home():
+    if 'username' not in session:
+        return redirect(url_for('login'))
+    
+    users = load_users()
+    user_data = users.get(session['username'], {})
+    has_results = 'results' in user_data and user_data['results']
+    
+    return render_template(
+        "index.html", 
+        title="Spiritual Path Finder", 
+        message=f"Welcome, {session['username']}! 🌟",
+        username=session['username'],
+        logged_in=True,
+        questions=QUESTIONS,
+        has_results=has_results,
+        results=user_data.get('results', []) if has_results else []
+    )
+
+@app.route("/login", methods=["GET", "POST"])
+def login():
+    if request.method == "POST":
+        data = request.json
+        username = data.get('username', '').strip()
+        password = data.get('password', '')
+        
+        users = load_users()
+        
+        if username in users and users[username]['password'] == password:
+            session['username'] = username
+            return jsonify({"success": True})
+        else:
+            return jsonify({"success": False, "message": "Invalid credentials!"})
+    
+    return render_template("index.html", logged_in=False, is_signup=False)
+
+@app.route("/signup", methods=["GET", "POST"])
+def signup():
+    if request.method == "POST":
+        data = request.json
+        username = data.get('username', '').strip()
+        password = data.get('password', '')
+        
+        users = load_users()
+        
+        if username in users:
+            return jsonify({"success": False, "message": "Username already exists!"})
+        
+        if not username or not password:
+            return jsonify({"success": False, "message": "Username and password required!"})
+        
+        # Create new user
+        users[username] = {
+            'password': password,
+            'answers': [],
+            'results': []
+        }
+        save_users(users)
+        session['username'] = username
+        return jsonify({"success": True})
+    
+    return render_template("index.html", logged_in=False, is_signup=True)
+
+@app.route("/logout")
+def logout():
+    session.pop('username', None)
+    return redirect(url_for('login'))
+
+@app.route("/submit_assessment", methods=["POST"])
+def submit_assessment():
+    if 'username' not in session:
+        return jsonify({"success": False, "message": "Not logged in"})
+    
+    data = request.json
+    answers = data.get('answers', [])
+    
+    if len(answers) != len(QUESTIONS):
+        return jsonify({"success": False, "message": "Please answer all questions!"})
+    
+    # Calculate results
+    results = calculate_results(answers)
+    
+    # Save to user data
+    users = load_users()
+    if session['username'] in users:
+        users[session['username']]['answers'] = answers
+        users[session['username']]['results'] = results
+        save_users(users)
+        
+        return jsonify({"success": True, "results": results})
+    
+    return jsonify({"success": False, "message": "User not found"})
+
+@app.route("/reset_assessment", methods=["POST"])
+def reset_assessment():
+    if 'username' not in session:
+        return jsonify({"success": False, "message": "Not logged in"})
+    
+    users = load_users()
+    if session['username'] in users:
+        users[session['username']]['answers'] = []
+        users[session['username']]['results'] = []
+        save_users(users)
+        return jsonify({"success": True})
+    
+    return jsonify({"success": False, "message": "User not found"})
+
+@app.route("/chat", methods=["POST"])
+def chat():
+    if 'username' not in session:
+        return jsonify({"success": False, "message": "Not logged in"})
+    
+    if not client:
+        return jsonify({"success": False, "message": "Chat service not configured. Please set TOGETHER_API_KEY."})
+    
+    data = request.json
+    user_message = data.get('message', '').strip()
+    religion_name = data.get('religion', '')
+    chat_history = data.get('history', [])
+    
+    if not user_message or not religion_name:
+        return jsonify({"success": False, "message": "Message and religion required"})
+    
+    # Find religion details
+    religion_data = None
+    for key, value in RELIGIONS.items():
+        if value['name'] == religion_name:
+            religion_data = value
+            break
+    
+    if not religion_data:
+        return jsonify({"success": False, "message": "Religion not found"})
+    
+    # Create context-aware system prompt
+    system_prompt = f"""You're a spiritual guide for {religion_data['name']}.
+Info: {religion_data['description']} | Practices: {religion_data['practices']} | Beliefs: {religion_data['core_beliefs']}
+Rules: Keep 30-50 words, be respectful, use * for bullet points (format: "Text: * item * item"), answer directly."""
+
+    # Build conversation history
+    messages = [{"role": "system", "content": system_prompt}]
+    
+    # Add chat history (last 5 messages for context)
+    for msg in chat_history[-5:]:
+        messages.append({"role": msg["role"], "content": msg["content"]})
+    
+    # Add current user message
+    messages.append({"role": "user", "content": user_message})
+    
+    try:
+        # Call Together API with limited tokens for concise responses
+        response = client.chat.completions.create(
+            model="meta-llama/Meta-Llama-3-8B-Instruct-Lite",
+            messages=messages,
+            max_tokens=80,  # Roughly 50-60 words maximum
+            temperature=0.7,
+        )
+        
+        bot_response = response.choices[0].message.content
+        
+        return jsonify({
+            "success": True,
+            "response": bot_response
+        })
+        
+    except Exception as e:
+        return jsonify({
+            "success": False,
+            "message": f"Chat error: {str(e)}"
+        })
+
+if __name__ == "__main__":
+    app.run(debug=True, port=5001)

templates/index.html

@@ -0,0 +1,837 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{{ title if logged_in else 'Spiritual Path Finder - Login' }}</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            background: #F5F5F5;
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 20px;
+        }
+        
+        .container {
+            background: white;
+            border-radius: 16px;
+            padding: 40px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+            max-width: 700px;
+            width: 100%;
+            animation: slideIn 0.4s ease;
+            max-height: 90vh;
+            overflow-y: auto;
+        }
+        
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        h1 {
+            color: #3D3D3D;
+            font-size: 32px;
+            margin-bottom: 8px;
+            text-align: center;
+            font-weight: 800;
+        }
+        
+        p {
+            color: #6B7280;
+            text-align: center;
+            margin-bottom: 30px;
+            font-size: 15px;
+        }
+        
+        .subtitle {
+            color: #9CA3AF;
+            font-size: 14px;
+            text-align: center;
+            margin-bottom: 25px;
+            line-height: 1.6;
+        }
+        
+        input[type="text"], input[type="password"] {
+            width: 100%;
+            padding: 12px 16px;
+            font-size: 15px;
+            border: none;
+            background: #F5F5F5;
+            border-radius: 10px;
+            transition: all 0.2s;
+            outline: none;
+        }
+        
+        input:focus {
+            background: #EBEBEB;
+            box-shadow: 0 0 0 2px #E5E5E5;
+        }
+        
+        button, .btn {
+            padding: 12px 24px;
+            font-size: 15px;
+            background: #3D3D3D;
+            color: white;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-weight: 600;
+            text-decoration: none;
+            display: inline-block;
+        }
+        
+        button:hover, .btn:hover {
+            background: #1A1A1A;
+            transform: translateY(-1px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+        
+        button:active, .btn:active { transform: translateY(0); }
+        button:disabled { background: #E5E5E5; color: #999; cursor: not-allowed; transform: none; }
+        
+        .logout-btn, .reset-btn {
+            background: #6B7280;
+            padding: 8px 16px;
+            font-size: 13px;
+            margin-top: 15px;
+        }
+        
+        .logout-btn:hover, .reset-btn:hover {
+            background: #4B5563;
+            box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
+        }
+        
+        .auth-form input {
+            width: 100%;
+            margin-bottom: 15px;
+        }
+        
+        .auth-form button {
+            width: 100%;
+        }
+        
+        .switch-link {
+            color: #3D3D3D;
+            text-decoration: none;
+            cursor: pointer;
+            font-weight: 600;
+            margin-top: 15px;
+            display: inline-block;
+            transition: color 0.2s;
+        }
+
+        .switch-link:hover {
+            color: #1A1A1A;
+            text-decoration: underline;
+        }
+
+        .question-block {
+            background: #FAFAFA;
+            padding: 30px;
+            border-radius: 12px;
+            margin-bottom: 20px;
+            border: none;
+            display: none;
+            min-height: 400px;
+        }
+
+        .question-block.active {
+            display: block;
+            animation: fadeIn 0.3s ease;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateX(20px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+
+        .question-block h4 {
+            color: #3D3D3D;
+            margin-bottom: 25px;
+            font-weight: 700;
+            font-size: 18px;
+            line-height: 1.6;
+        }
+
+        .question-number {
+            display: inline-block;
+            background: #3D3D3D;
+            color: #fff;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 32px;
+            margin-right: 12px;
+            font-size: 16px;
+        }
+
+        .option {
+            display: block;
+            padding: 16px 20px;
+            margin-bottom: 12px;
+            background: white;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 15px;
+            color: #3D3D3D;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+        }
+
+        .option:hover {
+            background: #F5F5F5;
+            transform: translateX(5px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        }
+
+        .option input[type="radio"] {
+            margin-right: 12px;
+            cursor: pointer;
+            width: 18px;
+            height: 18px;
+        }
+
+        .option input[type="radio"]:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        .option:has(input[type="radio"]:disabled) {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        .option:has(input[type="radio"]:disabled):hover {
+            background: white;
+            transform: none;
+        }
+
+        .question-counter {
+            text-align: center;
+            color: #999;
+            font-size: 14px;
+            margin-bottom: 15px;
+            font-weight: 600;
+        }
+
+        .submit-btn {
+            width: 100%;
+            padding: 16px;
+            font-size: 16px;
+            margin-top: 10px;
+            background: #3D3D3D;
+            color: #fff;
+            border: none;
+            border-radius: 10px;
+            font-weight: 600;
+            transition: background 0.2s;
+        }
+        .submit-btn:hover {
+            background: #1A1A1A;
+            color: #fff;
+        }
+
+        .result-card {
+            padding: 25px;
+            border-radius: 12px;
+            margin-bottom: 20px;
+            border: none;
+            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+        }
+
+        .result-card.rank-1 {
+            background: #FFFACD;
+        }
+
+        .result-card.rank-2 {
+            background: #B4C7E7;
+        }
+
+        .result-card.rank-3 {
+            background: #90EE90;
+        }
+
+        .result-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 15px;
+        }
+
+        .result-rank {
+            color: #fff;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            font-weight: 800;
+            background: #3D3D3D;
+        }
+
+        .result-title { flex: 1; margin-left: 15px; }
+        .result-title h3 {
+            font-size: 22px; margin-bottom: 5px; color: #3D3D3D;
+        }
+        .result-percentage {
+            font-size: 24px; font-weight: 800; color: #3D3D3D;
+        }
+        .result-description { color: #666; line-height: 1.6; margin-bottom: 12px; font-size: 14px; }
+        .result-details { background: rgba(255, 255, 255, 0.6); border: none; padding: 15px; border-radius: 8px; margin-top: 15px; }
+        .result-details h5 { color: #3D3D3D; font-size: 13px; margin-bottom: 8px; font-weight: 700; }
+        .result-details p { color: #666; font-size: 13px; margin-bottom: 10px; text-align: left; }
+        .icon { font-size: 24px; margin-right: 8px; }
+        .success-msg { color: #3D3D3D; font-weight: 600; }
+        .error-msg { color: #666; font-weight: 600; text-align: center; padding: 10px; }
+        .progress-bar { background: #F5F5F5; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 20px; }
+        .progress-fill { background: #3D3D3D; height: 100%; transition: width 0.3s; }
+        .buttons-row { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
+        .nav-buttons { display: flex; gap: 12px; justify-content: space-between; margin-top: 20px; }
+        .nav-btn, .nav-btn.next {
+            padding: 12px 24px;
+            font-size: 15px;
+            background: #3D3D3D;
+            color: #fff;
+            border: none;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: background 0.2s;
+            font-weight: 600;
+        }
+        .nav-btn:hover, .nav-btn.next:hover { background: #1A1A1A; color: #fff; transform: translateY(-1px); }
+        .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
+        h3 { text-align: center; color: #3D3D3D; }
+        .chat-toggle-btn {
+            background: rgba(255, 255, 255, 0.8);
+            color: #3D3D3D;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 600;
+            margin-top: 15px;
+            width: 100%;
+            transition: background 0.2s, color 0.2s;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        }
+        .chat-toggle-btn:hover { background: #3D3D3D; color: #fff; }
+        .chat-window {
+            display: none;
+            background: rgba(255, 255, 255, 0.9);
+            border: none;
+            border-radius: 10px;
+            margin-top: 15px;
+            overflow: hidden;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+        }
+        .chat-window.open { display: block; animation: slideDown 0.3s ease; }
+        @keyframes slideDown { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 500px; } }
+        .chat-messages { height: 250px; overflow-y: auto; padding: 15px; background: transparent; }
+        .chat-message { margin-bottom: 12px; padding: 10px 14px; border-radius: 8px; max-width: 85%; line-height: 1.5; font-size: 14px; }
+        .chat-message.user {
+            background: #3D3D3D;
+            color: #fff;
+            margin-left: auto;
+            text-align: right;
+        }
+        .chat-message.bot {
+            background: white;
+            color: #3D3D3D;
+            border: none;
+            text-align: left;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+        }
+        .chat-message.bot ul { margin: 8px 0 0 0; padding-left: 20px; }
+        .chat-message.bot li { margin-bottom: 6px; line-height: 1.6; }
+        .chat-input-area { display: flex; gap: 8px; padding: 12px; background: transparent; border-top: none; }
+        .chat-input {
+            flex: 1;
+            padding: 10px 14px;
+            border: none;
+            background: white;
+            border-radius: 8px;
+            font-size: 14px;
+            outline: none;
+            color: #3D3D3D;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+        }
+        .chat-input:focus { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
+        .chat-send-btn {
+            padding: 10px 20px;
+            background: #3D3D3D;
+            color: #fff;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 14px;
+            transition: background 0.2s;
+        }
+        .chat-send-btn:hover { background: #1A1A1A; color: #fff; }
+        .chat-send-btn:disabled { background: #F5F5F5; color: #999; cursor: not-allowed; }
+        .chat-typing { color: #999; font-style: italic; font-size: 13px; padding: 10px 14px; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        {% if not logged_in %}
+            <!-- Login/Signup Form -->
+            <h1><span class="icon">🌟</span>Spiritual Path Finder</h1>
+            <p>{{ 'Begin your journey of self-discovery' if is_signup else 'Welcome back, seeker!' }}</p>
+            
+            <div class="auth-form">
+                <input type="text" id="authUsername" placeholder="Username">
+                <input type="password" id="authPassword" placeholder="Password">
+                <button onclick="authenticate()">{{ 'Sign Up' if is_signup else 'Sign In' }}</button>
+                <div id="result"></div>
+                <p class="switch-link" onclick="switchAuth()">
+                    {{ 'Already have an account? Sign In' if is_signup else 'New here? Sign Up' }}
+                </p>
+            </div>
+            
+            <script>
+                function authenticate() {
+                    const username = document.getElementById('authUsername').value.trim();
+                    const password = document.getElementById('authPassword').value;
+                    
+                    if (!username || !password) {
+                        document.getElementById('result').innerHTML = 
+                            '<p class="error-msg">⚠️ Please fill in all fields</p>';
+                        return;
+                    }
+                    
+                    const endpoint = window.location.pathname === '/signup' ? '/signup' : '/login';
+                    
+                    fetch(endpoint, {
+                        method: 'POST',
+                        headers: {'Content-Type': 'application/json'},
+                        body: JSON.stringify({username, password})
+                    })
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            window.location.href = '/';
+                        } else {
+                            document.getElementById('result').innerHTML = 
+                                `<p class="error-msg">${data.message}</p>`;
+                        }
+                    });
+                }
+                
+                function switchAuth() {
+                    const newPath = window.location.pathname === '/signup' ? '/login' : '/signup';
+                    window.location.href = newPath;
+                }
+                
+                document.getElementById('authPassword').addEventListener('keypress', function(e) {
+                    if (e.key === 'Enter') authenticate();
+                });
+            </script>
+        {% else %}
+            <!-- Assessment Interface -->
+            <h1>{{ title }}</h1>
+            <p>{{ message }}</p>
+            
+            {% if not has_results %}
+                <p class="subtitle">
+                    Discover which spiritual or religious path aligns with your beliefs, values, and lifestyle. 
+                    Answer 8 thoughtful questions about your worldview.
+                </p>
+                
+                <div class="question-counter" id="questionCounter">Question 1 of {{ questions|length }}</div>
+                
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progressBar" style="width: 0%"></div>
+                </div>
+                
+                <div style="display:none;" id="assessmentData" 
+                     data-total="{{ questions|length }}" 
+                     data-ids="{{ questions|map(attribute='id')|list|tojson|safe }}">
+                </div>
+                
+                <form id="assessmentForm">
+                    {% for question in questions %}
+                    {% set q_index = loop.index %}
+                    <div class="question-block" data-question-index="{{ q_index }}" {% if loop.first %}data-active="true"{% endif %}>
+                        <h4>
+                            <span class="question-number">{{ q_index }}</span>
+                            {{ question.question }}
+                        </h4>
+                        {% for option in question.options.keys() %}
+                        <label class="option">
+                            <input type="radio" 
+                                   name="q{{ question.id }}" 
+                                   value="{{ option }}"
+                                   data-question-index="{{ q_index }}"
+                                   onchange="handleAnswer(this)">
+                            {{ option }}
+                        </label>
+                        {% endfor %}
+                        
+                        <div class="nav-buttons" style="justify-content: flex-end;">
+                            <button type="button" class="nav-btn next" id="nextBtn{{ q_index }}" onclick="goToNext()" disabled>
+                                Next →
+                            </button>
+                        </div>
+                    </div>
+                    {% endfor %}
+                    
+                    <button type="button" class="submit-btn" onclick="submitAssessment()" id="submitBtn" style="display: none;">
+                        ✨ Discover Your Path
+                    </button>
+                </form>
+                
+                <div id="errorMsg"></div>
+            {% else %}
+                <!-- Results Display -->
+                <p class="subtitle">
+                    Based on your responses, here are the spiritual paths that align most closely with your values and beliefs:
+                </p>
+                
+                <div id="resultsContainer">
+                    {% for result in results %}
+                    <div class="result-card rank-{{ loop.index }}">
+                        <div class="result-header">
+                            <div class="result-rank">{{ loop.index }}</div>
+                            <div class="result-title">
+                                <h3>{{ result.name }}</h3>
+                            </div>
+                            <div class="result-percentage">{{ result.percentage }}%</div>
+                        </div>
+                        <p class="result-description">{{ result.description }}</p>
+                        <div class="result-details">
+                            <h5>📿 Common Practices:</h5>
+                            <p>{{ result.practices }}</p>
+                            <h5>💭 Core Beliefs:</h5>
+                            <p>{{ result.core_beliefs }}</p>
+                        </div>
+                        
+                        <button class="chat-toggle-btn" onclick="toggleChat('{{ result.name }}')">
+                            💬 Ask Questions About {{ result.name }}
+                        </button>
+                        
+                        <div class="chat-window" id="chat-{{ result.name|replace(' ', '-') }}">
+                            <div class="chat-messages" id="messages-{{ result.name|replace(' ', '-') }}">
+                                <div class="chat-message bot">
+                                    Hi! Ask me anything about {{ result.name }}.<br>
+                                    <span style="color:#7C3AED; font-size:13px;">
+                                        Example: "What are the daily practices?"<br>
+                                        Example: "How do I get started with this path?"
+                                    </span>
+                                </div>
+                            </div>
+                            <div class="chat-input-area">
+                                <input type="text" 
+                                       class="chat-input" 
+                                       id="input-{{ result.name|replace(' ', '-') }}"
+                                       placeholder="Ask about {{ result.name }}..."
+                                       onkeypress="if(event.key==='Enter') sendMessage('{{ result.name }}')">
+                                <button class="chat-send-btn" 
+                                        id="send-{{ result.name|replace(' ', '-') }}"
+                                        onclick="sendMessage('{{ result.name }}')">
+                                    Send
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    {% endfor %}
+                </div>
+                
+                <div class="buttons-row">
+                    <button class="btn reset-btn" onclick="resetAssessment()">🔄 Retake Assessment</button>
+                </div>
+            {% endif %}
+            
+            <div style="text-align: center;">
+                <a href="/logout" class="btn logout-btn">Logout</a>
+            </div>
+            
+            <script>
+                var currentQuestion = 1;
+                var maxQuestionReached = 1;  // Track the furthest question reached
+                var assessmentDataEl = document.getElementById('assessmentData');
+                var totalQuestions = assessmentDataEl ? parseInt(assessmentDataEl.getAttribute('data-total')) : 0;
+                var questionIds = assessmentDataEl ? JSON.parse(assessmentDataEl.getAttribute('data-ids')) : [];
+                
+                // Show first question on load
+                window.addEventListener('DOMContentLoaded', function() {
+                    showQuestion(1);
+                });
+                
+                function showQuestion(questionIndex) {
+                    if (questionIndex > maxQuestionReached + 1) return;
+                    if (questionIndex > maxQuestionReached) maxQuestionReached = questionIndex;
+                    
+                    document.querySelectorAll('.question-block').forEach(function(block) {
+                        block.classList.remove('active');
+                        var blockIndex = parseInt(block.getAttribute('data-question-index'));
+                        if (blockIndex === questionIndex) block.classList.add('active');
+                        if (blockIndex < questionIndex) {
+                            block.querySelectorAll('input[type="radio"]').forEach(function(radio) { radio.disabled = true; });
+                        }
+                    });
+                    
+                    currentQuestion = questionIndex;
+                    document.getElementById('questionCounter').textContent = 'Question ' + questionIndex + ' of ' + totalQuestions;
+                    document.getElementById('progressBar').style.width = ((questionIndex - 1) / totalQuestions) * 100 + '%';
+                    updateNavigationButtons();
+                }
+                
+                function updateNavigationButtons() {
+                    var nextBtn = document.getElementById('nextBtn' + currentQuestion);
+                    
+                    if (nextBtn) {
+                        var currentQuestionId = questionIds[currentQuestion - 1];
+                        var radioName = 'q' + currentQuestionId;
+                        var isAnswered = document.querySelector('input[name="' + radioName + '"]:checked') !== null;
+                        
+                        if (currentQuestion === totalQuestions && isAnswered) {
+                            nextBtn.style.display = 'none';
+                            document.getElementById('submitBtn').style.display = 'block';
+                        } else {
+                            nextBtn.disabled = !isAnswered;
+                            nextBtn.style.display = 'inline-block';
+                        }
+                    }
+                }
+                
+                function handleAnswer(radioElement) {
+                    var questionIndex = parseInt(radioElement.getAttribute('data-question-index'));
+                    
+                    // Only process if this is the current question
+                    if (questionIndex !== currentQuestion) {
+                        return;
+                    }
+                    
+                    updateNavigationButtons();
+                    
+                    // Auto-advance to next question after selection
+                    setTimeout(function() {
+                        if (questionIndex < totalQuestions) {
+                            showQuestion(questionIndex + 1);
+                        } else {
+                            // Last question - show submit button
+                            var nextBtn = document.getElementById('nextBtn' + questionIndex);
+                            if (nextBtn) {
+                                nextBtn.style.display = 'none';
+                            }
+                            document.getElementById('submitBtn').style.display = 'block';
+                        }
+                    }, 400);
+                }
+                
+                function goToNext() {
+                    if (currentQuestion < totalQuestions) {
+                        showQuestion(currentQuestion + 1);
+                    }
+                }
+                
+                function submitAssessment() {
+                    var form = document.getElementById('assessmentForm');
+                    var answers = [];
+                    
+                    questionIds.forEach(function(qId) {
+                        var radioName = 'q' + qId;
+                        var selectedRadio = form.querySelector('input[name="' + radioName + '"]:checked');
+                        if (selectedRadio) {
+                            answers.push({
+                                question_id: qId,
+                                answer: selectedRadio.value
+                            });
+                        }
+                    });
+                    
+                    if (answers.length !== totalQuestions) {
+                        document.getElementById('errorMsg').innerHTML = 
+                            '<p class="error-msg">⚠️ Please answer all questions</p>';
+                        return;
+                    }
+                    
+                    document.getElementById('submitBtn').disabled = true;
+                    document.getElementById('submitBtn').textContent = '✨ Calculating...';
+                    
+                    fetch('/submit_assessment', {
+                        method: 'POST',
+                        headers: {'Content-Type': 'application/json'},
+                        body: JSON.stringify({answers: answers})
+                    })
+                    .then(function(response) { return response.json(); })
+                    .then(function(data) {
+                        if (data.success) {
+                            window.location.reload();
+                        } else {
+                            document.getElementById('errorMsg').innerHTML = 
+                                '<p class="error-msg">' + data.message + '</p>';
+                            document.getElementById('submitBtn').disabled = false;
+                            document.getElementById('submitBtn').textContent = '✨ Discover Your Path';
+                        }
+                    });
+                }
+                
+                function resetAssessment() {
+                    if (!confirm('Are you sure you want to retake the assessment? Your current results will be cleared.')) {
+                        return;
+                    }
+                    
+                    fetch('/reset_assessment', {
+                        method: 'POST',
+                        headers: {'Content-Type': 'application/json'}
+                    })
+                    .then(function(response) { return response.json(); })
+                    .then(function(data) {
+                        if (data.success) {
+                            window.location.reload();
+                        }
+                    });
+                }
+                
+                // Chat functionality
+                var chatHistories = {};
+                
+                function formatBotResponse(text) {
+                    var div = document.createElement('div');
+                    div.textContent = text;
+                    var escaped = div.innerHTML;
+                    
+                    if (escaped.match(/\*\s+/g) || escaped.match(/•\s+/g) || escaped.match(/^\s*-\s+/gm)) {
+                        var lines = escaped.split(/(?:\*|•|\n-)\s+/);
+                        if (lines.length > 1) {
+                            var formatted = lines[0].trim() ? lines[0].trim() + '<br><br>' : '';
+                            formatted += '<ul style="margin: 0; padding-left: 20px; line-height: 1.8;">';
+                            for (var i = 1; i < lines.length; i++) {
+                                if (lines[i].trim()) formatted += '<li style="margin-bottom: 6px;">' + lines[i].trim() + '</li>';
+                            }
+                            return formatted + '</ul>';
+                        }
+                    }
+                    return escaped.replace(/\n/g, '<br>');
+                }
+                
+                function toggleChat(religionName) {
+                    var chatId = 'chat-' + religionName.replace(/\s+/g, '-');
+                    var chatWindow = document.getElementById(chatId);
+                    
+                    if (chatWindow.classList.contains('open')) {
+                        chatWindow.classList.remove('open');
+                    } else {
+                        chatWindow.classList.add('open');
+                        var inputId = 'input-' + religionName.replace(/\s+/g, '-');
+                        setTimeout(function() {
+                            document.getElementById(inputId).focus();
+                        }, 300);
+                    }
+                }
+                
+                function sendMessage(religionName) {
+                    var inputId = 'input-' + religionName.replace(/\s+/g, '-');
+                    var messagesId = 'messages-' + religionName.replace(/\s+/g, '-');
+                    var sendBtnId = 'send-' + religionName.replace(/\s+/g, '-');
+                    
+                    var inputEl = document.getElementById(inputId);
+                    var messagesEl = document.getElementById(messagesId);
+                    var sendBtn = document.getElementById(sendBtnId);
+                    
+                    var message = inputEl.value.trim();
+                    if (!message) return;
+                    
+                    // Initialize chat history if not exists
+                    if (!chatHistories[religionName]) {
+                        chatHistories[religionName] = [];
+                    }
+                    
+                    // Add user message to UI
+                    var userMsgDiv = document.createElement('div');
+                    userMsgDiv.className = 'chat-message user';
+                    userMsgDiv.textContent = message;
+                    messagesEl.appendChild(userMsgDiv);
+                    
+                    // Clear input and disable send button
+                    inputEl.value = '';
+                    sendBtn.disabled = true;
+                    
+                    // Show typing indicator
+                    var typingDiv = document.createElement('div');
+                    typingDiv.className = 'chat-typing';
+                    typingDiv.textContent = '💭 Thinking...';
+                    messagesEl.appendChild(typingDiv);
+                    
+                    // Scroll to bottom
+                    messagesEl.scrollTop = messagesEl.scrollHeight;
+                    
+                    // Add to chat history
+                    chatHistories[religionName].push({
+                        role: 'user',
+                        content: message
+                    });
+                    
+                    // Send to backend
+                    fetch('/chat', {
+                        method: 'POST',
+                        headers: {'Content-Type': 'application/json'},
+                        body: JSON.stringify({
+                            message: message,
+                            religion: religionName,
+                            history: chatHistories[religionName]
+                        })
+                    })
+                    .then(function(response) { return response.json(); })
+                    .then(function(data) {
+                        messagesEl.removeChild(typingDiv);
+                        
+                        if (data.success) {
+                            var botMsgDiv = document.createElement('div');
+                            botMsgDiv.className = 'chat-message bot';
+                            
+                            // Format the response with proper bullet points
+                            var formattedResponse = formatBotResponse(data.response);
+                            botMsgDiv.innerHTML = formattedResponse;
+                            
+                            messagesEl.appendChild(botMsgDiv);
+                            
+                            chatHistories[religionName].push({
+                                role: 'assistant',
+                                content: data.response
+                            });
+                        } else {
+                            var errorMsgDiv = document.createElement('div');
+                            errorMsgDiv.className = 'chat-message bot';
+                            errorMsgDiv.style.color = '#EF4444';
+                            errorMsgDiv.textContent = '❌ ' + data.message;
+                            messagesEl.appendChild(errorMsgDiv);
+                        }
+                        
+                        sendBtn.disabled = false;
+                        messagesEl.scrollTop = messagesEl.scrollHeight;
+                    })
+                    .catch(function(error) {
+                        messagesEl.removeChild(typingDiv);
+                        
+                        var errorMsgDiv = document.createElement('div');
+                        errorMsgDiv.className = 'chat-message bot';
+                        errorMsgDiv.style.color = '#EF4444';
+                        errorMsgDiv.textContent = '❌ Connection error';
+                        messagesEl.appendChild(errorMsgDiv);
+                        
+                        sendBtn.disabled = false;
+                        messagesEl.scrollTop = messagesEl.scrollHeight;
+                    });
+                }
+            </script>
+        {% endif %}
+    </div>
+</body>
+</html>