YoonJ-C
UI improvements: chat interface and styling updates
9501e9b
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title if logged_in else 'Spiritual Path Finder - Login' }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<!-- Add Font Awesome here -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.7.1/firebase-auth-compat.js"></script>
{% if firebase_config and firebase_config.apiKey %}
<script>
// Initialize Firebase
const firebaseConfig = {
apiKey: "{{ firebase_config.apiKey }}",
authDomain: "{{ firebase_config.authDomain }}",
projectId: "{{ firebase_config.projectId }}",
storageBucket: "{{ firebase_config.storageBucket }}",
messagingSenderId: "{{ firebase_config.messagingSenderId }}",
appId: "{{ firebase_config.appId }}"
};
firebase.initializeApp(firebaseConfig);
window.firebaseAuth = firebase.auth();
window.firebaseEnabled = true;
</script>
{% else %}
<script>
window.firebaseEnabled = false;
</script>
{% endif %}
</head>
<body>
<div class="{% if not logged_in %}auth-container{% else %}assessment-container{% endif %}">
<div class="nav-header">
<a href="/" class="back-link">← Back to Home</a>
</div>
{% if not logged_in %}
<!-- Login/Signup Form -->
<h2><span class="icon"></span>Spiritual Path Finder</h2>
<p>{{ 'Begin your journey of self-discovery' if is_signup else 'Welcome back, seeker!' }}</p>
{% if verify_success %}
<div class="success-msg" style="padding: 15px; margin-bottom: 20px; border-radius: 8px;">
✅ Email verified successfully! You can now sign in.
</div>
{% endif %}
{% if verify_error %}
<div class="error-msg" style="padding: 15px; margin-bottom: 20px; border-radius: 8px;">
⚠️ {{ verify_error }}
</div>
{% endif %}
{% if reset_error %}
<div class="error-msg" style="padding: 15px; margin-bottom: 20px; border-radius: 8px;">
⚠️ {{ reset_error }}
</div>
{% endif %}
<div class="auth-form">
{% if not is_forgot_password %}
<!-- Firebase Google Sign-In Button -->
{% if firebase_config and firebase_config.apiKey %}
<button class="google-signin-btn" onclick="signInWithGoogle()">
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
<path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
<path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
<path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
<path fill="none" d="M0 0h48v48H0z"/>
</svg>
Continue with Google
</button>
<!-- Hide email/password sign-in temporarily -------------------------------------->
<!-- <div class="divider">
<span>or</span>
</div>
{% endif %}
{% if firebase_config and firebase_config.apiKey %}
<input type="email" id="authEmail" placeholder="Email">
{% else %}
<input type="text" id="authUsername" placeholder="User name">
{% endif %}
{% if is_signup and firebase_config and firebase_config.apiKey %}
<input type="text" id="authUsername" placeholder="Display Name (optional)">
{% elif not firebase_config or not firebase_config.apiKey %}
{% if is_signup %}
<input type="email" id="authEmail" placeholder="Email">
{% endif %}
{% endif %}
<button onclick="authenticate()">{{ 'Sign Up' if is_signup else 'Sign In' }}</button>
<div id="result"></div>
{% if not is_signup %}
<p class="switch-link" onclick="window.location.href='/forgot-password'">
Forgot Password?
</p>
{% endif %}
<p class="switch-link" onclick="switchAuth()">
{{ 'Already have an account? Sign In' if is_signup else 'New here? Sign Up' }}
</p>
</div>
{% else %}
{% if show_reset_form %}
<input type="password" id="resetPassword" placeholder="New Password">
<input type="hidden" id="resetToken" value="{{ reset_token }}">
<button onclick="submitPasswordReset()">Reset Password</button>
<div id="result"></div>
{% else %}
<input type="email" id="resetEmail" placeholder="Email">
<button onclick="resetPassword()">Send Reset Link</button>
<div id="result"></div>
{% endif %}
<p class="switch-link" onclick="window.location.href='/login'">
Back to Sign In
</p>
{% endif %} -->
</div>
{% else %}
<!-- Assessment Interface ------------------------------------------------------------>
<h2>{{ title }}</h2>
<p>{{ message }} <i class="fas fa-heart"></i> </p>
{% if not has_results %}
<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">
<button type="button" class="nav-btn prev" id="prevBtn{{ q_index }}" onclick="goToPrev()" {% if loop.first %}style="visibility: hidden;"{% endif %}>
← Previous
</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 class="results-explanation">
* Percentages reflect how strongly your answers align with each path, using weighted scoring where more fundamental beliefs count more.
</div>
<div id="resultsContainer" class="results-spacing">
{% 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><i class="fa-solid fa-grip"></i> Common Practices:</h5>
<p>{{ result.practices }}</p>
<h5><i class="fa-solid fa-rainbow"></i> Core Beliefs:</h5>
<p>{{ result.core_beliefs }}</p>
</div>
<button class="chat-toggle-btn" onclick="toggleChat('{{ result.name }}')">
<i class="fa-solid fa-comment-dots"></i> 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:#666; font-size:14px;">
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 anything"
onkeypress="if(event.key==='Enter') sendMessage('{{ result.name }}')">
<button class="voice-btn"
id="voice-{{ result.name|replace(' ', '-') }}"
onmousedown="startVoiceInput('{{ result.name }}')"
onmouseup="stopVoiceInput('{{ result.name }}')"
ontouchstart="startVoiceInput('{{ result.name }}')"
ontouchend="stopVoiceInput('{{ result.name }}')"
title="Hold to record with live transcription">
<i class="fa-solid fa-microphone"></i>
</button>
<button class="chat-send-btn"
id="send-{{ result.name|replace(' ', '-') }}"
onclick="sendMessage('{{ result.name }}')"
title="Send">
</button>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="buttons-row">
<button class="btn reset-btn" onclick="resetAssessment()">
<i class="fa-solid fa-arrow-rotate-right"></i> Retake Assessment
</button>
<button class="btn share-btn" onclick="shareResults()">
<i class="fa-solid fa-share-nodes"></i> Share Results
</button>
<a href="/logout" class="btn logout-btn">
<i class="fa-solid fa-arrow-right-from-bracket"></i> Sign Out
</a>
</div>
{% endif %}
{% endif %}
</div>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>