1661f5f588
- Add comprehensive chat system with modern UI design - Implement admin-based password reset system - Fix template syntax errors and 500 server errors - Add chat routes, API endpoints, and database models - Enhance user interface with Tailwind CSS card-based design - Implement community guidelines and quick action features - Add responsive design for mobile and desktop compatibility - Create support chat functionality with admin integration - Fix JavaScript inheritance in base template - Add database migration for chat system tables Features: ✅ Modern chat interface with room management ✅ Admin-based password reset workflow ✅ Real-time chat with mobile app support ✅ Professional UI with gradient cards and hover effects ✅ Community guidelines and safety features ✅ Responsive design for all devices ✅ Error-free template rendering
273 lines
14 KiB
HTML
273 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Chat - Community Discussions{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="min-h-screen bg-gradient-to-br from-blue-900 via-purple-900 to-teal-900 pt-16">
|
|
<!-- Header Section -->
|
|
<div class="relative overflow-hidden py-16">
|
|
<div class="absolute inset-0 bg-black/20"></div>
|
|
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 border border-white/20">
|
|
<h1 class="text-4xl font-bold text-white mb-4">
|
|
<i class="fas fa-comments mr-3"></i>Community Chat
|
|
</h1>
|
|
<p class="text-blue-200 text-lg">Connect with fellow motorcycle adventurers</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 -mt-8">
|
|
<!-- Community Guidelines Card -->
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden mb-8">
|
|
<div class="bg-gradient-to-r from-green-600 to-emerald-600 p-6">
|
|
<div class="flex items-center text-white">
|
|
<i class="fas fa-shield-alt text-3xl mr-4"></i>
|
|
<div>
|
|
<h3 class="text-xl font-bold">Community Guidelines</h3>
|
|
<p class="text-green-100">Keep our community safe and welcoming</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-green-50">
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
|
<div class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
|
<span>Be respectful to all community members</span>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
|
<span>Share motorcycle adventures and tips</span>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
|
|
<span>Help others with technical questions</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105">
|
|
<div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6">
|
|
<div class="flex items-center text-white">
|
|
<i class="fas fa-life-ring text-3xl mr-4"></i>
|
|
<div>
|
|
<h4 class="text-lg font-bold">Get Support</h4>
|
|
<p class="text-blue-100 text-sm">Need help or password reset?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<p class="text-gray-600 mb-4">Contact administrators for support or password reset</p>
|
|
<a href="{{ url_for('chat.support') }}"
|
|
class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200">
|
|
<i class="fas fa-headset mr-2"></i>Get Support
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105">
|
|
<div class="bg-gradient-to-r from-green-600 to-emerald-600 p-6">
|
|
<div class="flex items-center text-white">
|
|
<i class="fas fa-plus-circle text-3xl mr-4"></i>
|
|
<div>
|
|
<h4 class="text-lg font-bold">Create Room</h4>
|
|
<p class="text-green-100 text-sm">Start a new discussion</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<p class="text-gray-600 mb-4">Start a new chat room on any motorcycle topic</p>
|
|
<a href="{{ url_for('chat.create_room_form') }}"
|
|
class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-lg hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
|
|
<i class="fas fa-plus mr-2"></i>Create Room
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105">
|
|
<div class="bg-gradient-to-r from-orange-600 to-red-600 p-6">
|
|
<div class="flex items-center text-white">
|
|
<i class="fas fa-key text-3xl mr-4"></i>
|
|
<div>
|
|
<h4 class="text-lg font-bold">Password Reset</h4>
|
|
<p class="text-orange-100 text-sm">Forgot your password?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<p class="text-gray-600 mb-4">Request a password reset from administrators</p>
|
|
<a href="{{ url_for('auth.forgot_password') }}"
|
|
class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-orange-600 to-red-600 text-white font-semibold rounded-lg hover:from-orange-700 hover:to-red-700 transition-all duration-200">
|
|
<i class="fas fa-unlock-alt mr-2"></i>Reset Password
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if user_rooms %}
|
|
<!-- Your Recent Chats -->
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-bold text-white mb-6 flex items-center">
|
|
<i class="fas fa-history mr-3"></i>Your Recent Chats
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{% for room in user_rooms %}
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105">
|
|
<div class="bg-gradient-to-r
|
|
{% if room.room_type == 'support' %}from-purple-600 to-indigo-600
|
|
{% elif room.room_type == 'public' %}from-blue-600 to-cyan-600
|
|
{% elif room.room_type == 'group' %}from-green-600 to-teal-600
|
|
{% else %}from-gray-600 to-slate-600{% endif %} p-6">
|
|
<div class="flex items-center justify-between text-white">
|
|
<div>
|
|
<h3 class="text-lg font-bold">{{ room.name }}</h3>
|
|
<p class="text-sm opacity-80">{{ room.room_type.replace('_', ' ').title() }}</p>
|
|
</div>
|
|
<i class="fas
|
|
{% if room.room_type == 'support' %}fa-headset
|
|
{% elif room.room_type == 'public' %}fa-users
|
|
{% elif room.room_type == 'group' %}fa-user-friends
|
|
{% else %}fa-comments{% endif %} text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<p class="text-gray-600 mb-4">{{ room.description or 'No description available' }}</p>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-500">
|
|
<i class="fas fa-clock mr-1"></i>
|
|
{{ room.last_activity.strftime('%m/%d %H:%M') if room.last_activity else 'No activity' }}
|
|
</span>
|
|
<a href="{{ url_for('chat.room', room_id=room.id) }}"
|
|
class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200">
|
|
<i class="fas fa-sign-in-alt mr-2"></i>Join Chat
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if public_rooms %}
|
|
<!-- Public Chat Rooms -->
|
|
<div class="mb-8">
|
|
<h2 class="text-2xl font-bold text-white mb-6 flex items-center">
|
|
<i class="fas fa-globe mr-3"></i>Public Chat Rooms
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{% for room in public_rooms %}
|
|
<div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl hover:scale-105">
|
|
<div class="bg-gradient-to-r
|
|
{% if room.room_type == 'support' %}from-purple-600 to-indigo-600
|
|
{% elif room.room_type == 'public' %}from-blue-600 to-cyan-600
|
|
{% elif room.room_type == 'group' %}from-green-600 to-teal-600
|
|
{% else %}from-gray-600 to-slate-600{% endif %} p-6">
|
|
<div class="flex items-center justify-between text-white">
|
|
<div>
|
|
<h3 class="text-lg font-bold">{{ room.name }}</h3>
|
|
<p class="text-sm opacity-80">{{ room.room_type.replace('_', ' ').title() }}</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<i class="fas
|
|
{% if room.room_type == 'support' %}fa-headset
|
|
{% elif room.room_type == 'public' %}fa-users
|
|
{% elif room.room_type == 'group' %}fa-user-friends
|
|
{% else %}fa-comments{% endif %} text-2xl"></i>
|
|
<p class="text-xs mt-1">{{ room.participants.count() }} members</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6">
|
|
<p class="text-gray-600 mb-3">{{ room.description or 'Join the conversation!' }}</p>
|
|
{% if room.related_post %}
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
|
|
<p class="text-sm text-blue-700">
|
|
<i class="fas fa-link mr-1"></i>Related to: {{ room.related_post.title }}
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-500">
|
|
<i class="fas fa-clock mr-1"></i>
|
|
{{ room.last_activity.strftime('%m/%d %H:%M') if room.last_activity else 'No activity' }}
|
|
</span>
|
|
<a href="{{ url_for('chat.room', room_id=room.id) }}"
|
|
class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200">
|
|
<i class="fas fa-sign-in-alt mr-2"></i>Join Chat
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if not user_rooms and not public_rooms %}
|
|
<!-- Empty State -->
|
|
<div class="text-center py-16">
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-12 border border-white/20">
|
|
<i class="fas fa-comments text-6xl text-white/50 mb-6"></i>
|
|
<h3 class="text-2xl font-bold text-white mb-4">No chat rooms available</h3>
|
|
<p class="text-blue-200 mb-8">Be the first to start a conversation!</p>
|
|
<a href="{{ url_for('chat.create_room_form') }}"
|
|
class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-semibold rounded-lg hover:from-green-700 hover:to-emerald-700 transition-all duration-200">
|
|
<i class="fas fa-plus mr-2"></i>Create First Room
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Mobile app detection and API guidance
|
|
if (window.ReactNativeWebView || window.flutter_inappwebview) {
|
|
console.log('Mobile app detected - use API endpoints for better performance');
|
|
document.body.classList.add('mobile-app-view');
|
|
}
|
|
|
|
// Auto-refresh room list every 60 seconds (increased from 30s to reduce server load)
|
|
let refreshInterval;
|
|
function startAutoRefresh() {
|
|
refreshInterval = setInterval(() => {
|
|
if (document.visibilityState === 'visible' && !document.hidden) {
|
|
window.location.reload();
|
|
}
|
|
}, 60000);
|
|
}
|
|
|
|
// Pause refresh when page is hidden
|
|
document.addEventListener('visibilitychange', () => {
|
|
if (document.hidden) {
|
|
clearInterval(refreshInterval);
|
|
} else {
|
|
startAutoRefresh();
|
|
}
|
|
});
|
|
|
|
// Start auto-refresh on page load
|
|
startAutoRefresh();
|
|
|
|
// Smooth scrolling for better UX
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const target = document.querySelector(this.getAttribute('href'));
|
|
if (target) {
|
|
target.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'start'
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|