You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
4.5 KiB
94 lines
4.5 KiB
{% extends "admin/base_site.html" %}
|
|
{% load i18n static unfold %}
|
|
|
|
{% block breadcrumbs %}{% endblock %}
|
|
|
|
{% block title %}
|
|
{{ title }} | {{ site_title|default:_('Django site admin') }}
|
|
{% endblock %}
|
|
|
|
{% block extrahead %}
|
|
{{ block.super }}
|
|
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet"
|
|
type="text/css" />
|
|
<link rel="stylesheet" href="{% static 'css/live_chat.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="chat-main-wrapper flex w-full shadow-md border-y border-gray-200 dark:border-gray-700 overflow-hidden mt-0">
|
|
|
|
<div
|
|
class="rooms-sidebar flex-shrink-0 flex flex-col border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 relative z-20">
|
|
|
|
<div class="telegram-header px-5 py-3 flex-shrink-0 flex items-center shadow-sm">
|
|
<div class="flex items-center gap-3">
|
|
<div class="user-avatar bg-white/20 border border-white/30 text-white shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]">forum</span>
|
|
</div>
|
|
<h2 class="text-[16px] font-semibold text-white m-0 tracking-wide">
|
|
{% trans "Chat Rooms" %}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="room-list" class="flex-1 overflow-y-auto overscroll-contain chat-scrollbar pt-2">
|
|
<div class="flex items-center justify-center h-full">
|
|
<span class="material-symbols-outlined animate-spin text-gray-400">autorenew</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-area flex-1 flex flex-col relative z-10">
|
|
|
|
<div id="no-chat-selected"
|
|
class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 z-30 bg-[#f8fafc] dark:bg-[#111827]">
|
|
<div
|
|
class="w-20 h-20 mx-auto mb-6 bg-gradient-to-br from-blue-100 to-blue-200 dark:from-gray-700 dark:to-gray-600 rounded-full flex items-center justify-center shadow-inner">
|
|
<span class="material-symbols-outlined text-5xl text-blue-500 dark:text-blue-400 opacity-80">chat</span>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-2">{% trans "No Chat Selected" %}</h3>
|
|
<p class="text-sm font-medium">{% trans "Select a chat from the sidebar to start messaging" %}</p>
|
|
</div>
|
|
|
|
<div id="active-chat-header"
|
|
class="telegram-header px-6 py-3 flex items-center justify-between flex-shrink-0 invisible">
|
|
<div class="flex items-center gap-3">
|
|
<div class="user-avatar bg-white/20 border border-white/30 text-white shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]">group</span>
|
|
</div>
|
|
<h3 id="active-chat-title" class="text-[16px] font-semibold text-white m-0 tracking-wide"></h3>
|
|
</div>
|
|
<span id="polling-indicator" class="flex h-2.5 w-2.5 relative hidden">
|
|
<span
|
|
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-300 opacity-75"></span>
|
|
<span
|
|
class="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-400 shadow-[0_0_8px_rgba(74,222,128,0.8)]"></span>
|
|
</span>
|
|
</div>
|
|
|
|
<div id="chat-messages" class="chat-messages flex-1 invisible"></div>
|
|
|
|
<div id="chat-input-area" class="message-input-area flex-shrink-0 px-6 py-4 invisible z-20">
|
|
<form id="chat-form" class="flex items-center gap-3 w-full m-0 max-w-5xl mx-auto">
|
|
<div class="telegram-input-container flex-1">
|
|
<input type="text" id="chat-input" class="telegram-message-input w-full"
|
|
placeholder="{% trans 'Type your message...' %}" autocomplete="off">
|
|
</div>
|
|
<button type="submit" id="send-btn" class="telegram-action-btn send-btn-telegram shadow-md">
|
|
<span class="material-symbols-outlined text-[20px] ml-1">send</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
window.CHAT_CONFIG = {
|
|
csrfToken: '{{ csrf_token }}',
|
|
apiUrlRooms: '{% url "admin:live_chat_api_rooms" %}',
|
|
apiUrlMessagesBase: '{% url "admin:live_chat_api_messages" room_id=0 %}'.replace('0/', ''),
|
|
apiUrlSendBase: '{% url "admin:live_chat_api_send" room_id=0 %}'.replace('0/', '')
|
|
};
|
|
</script>
|
|
<script src="{% static 'js/live_chat.js' %}"></script>
|
|
{% endblock %}
|