Create index.html
Browse files- templates/index.html +295 -0
templates/index.html
ADDED
|
@@ -0,0 +1,295 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="fa" dir="rtl">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>چت بات آلفا</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script>
|
| 9 |
+
tailwind.config = {
|
| 10 |
+
darkMode: 'class',
|
| 11 |
+
theme: {
|
| 12 |
+
extend: {}
|
| 13 |
+
}
|
| 14 |
+
}
|
| 15 |
+
</script>
|
| 16 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 17 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 18 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
| 19 |
+
|
| 20 |
+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
| 21 |
+
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
|
| 22 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
| 23 |
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
| 24 |
+
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap" rel="stylesheet">
|
| 25 |
+
|
| 26 |
+
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
| 27 |
+
|
| 28 |
+
</head>
|
| 29 |
+
<body class="bg-slate-100 dark:bg-slate-900">
|
| 30 |
+
|
| 31 |
+
<div id="global-audio-player" class="fixed top-0 left-0 right-0 z-[100] bg-white/80 dark:bg-slate-800/80 backdrop-blur-lg shadow-lg p-3 transform -translate-y-full transition-transform duration-300 ease-in-out">
|
| 32 |
+
<div class="w-full max-w-3xl mx-auto flex items-center gap-3 sm:gap-4">
|
| 33 |
+
<button id="global-player-play-pause" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex-shrink-0">
|
| 34 |
+
<svg id="global-player-play-icon" class="w-7 h-7 text-slate-700 dark:text-slate-200" fill="currentColor" viewBox="0 0 20 20"><path d="M6.3 2.841A1.5 1.5 0 004 4.11V15.89a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z"></path></svg>
|
| 35 |
+
<svg id="global-player-pause-icon" class="w-7 h-7 text-slate-700 dark:text-slate-200 hidden" fill="currentColor" viewBox="0 0 20 20"><path d="M5.75 4.5a.75.75 0 00-.75.75v10.5a.75.75 0 001.5 0V5.25a.75.75 0 00-.75-.75zM14.25 4.5a.75.75 0 00-.75.75v10.5a.75.75 0 001.5 0V5.25a.75.75 0 00-.75-.75z"></path></svg>
|
| 36 |
+
</button>
|
| 37 |
+
<div class="flex-grow flex flex-col justify-center overflow-hidden">
|
| 38 |
+
<p id="global-player-text" class="text-sm font-medium text-slate-800 dark:text-slate-200 truncate pr-1">درحال پخش صدا...</p>
|
| 39 |
+
<div class="flex items-center gap-2">
|
| 40 |
+
<span id="global-player-current-time" class="text-xs text-slate-500 dark:text-slate-400 font-mono">0:00</span>
|
| 41 |
+
<div id="waveform-container" class="relative flex-grow h-10">
|
| 42 |
+
<canvas id="waveform-canvas" class="w-full h-full"></canvas>
|
| 43 |
+
</div>
|
| 44 |
+
<span id="global-player-total-time" class="text-xs text-slate-500 dark:text-slate-400 font-mono">0:00</span>
|
| 45 |
+
</div>
|
| 46 |
+
</div>
|
| 47 |
+
<div id="global-player-loading" class="w-6 h-6 border-2 border-slate-300 border-t-blue-500 rounded-full animate-spin hidden mx-2 flex-shrink-0"></div>
|
| 48 |
+
<button id="global-player-close" class="p-2 rounded-full hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors flex-shrink-0">
|
| 49 |
+
<svg class="w-5 h-5 text-slate-500 dark:text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
| 50 |
+
</button>
|
| 51 |
+
</div>
|
| 52 |
+
<audio id="global-audio-element" class="hidden"></audio>
|
| 53 |
+
</div>
|
| 54 |
+
|
| 55 |
+
<div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-40 dark:bg-opacity-60 z-40 hidden opacity-0"></div>
|
| 56 |
+
<aside id="history-sidebar" class="fixed top-0 right-0 h-full bg-white/80 dark:bg-slate-800/80 backdrop-blur-lg border-l border-slate-200/50 dark:border-slate-700/50 w-72 p-4 flex flex-col z-50 transform translate-x-full">
|
| 57 |
+
<div class="flex items-center justify-between mb-4 px-2">
|
| 58 |
+
<h2 class="text-lg font-bold text-slate-800 dark:text-slate-200">تاریخچه چتها</h2>
|
| 59 |
+
<button id="delete-all-chats" title="حذف تمام چتها" class="p-2 text-red-500 hover:bg-red-100 dark:hover:bg-red-900/20 rounded-full transition-colors">
|
| 60 |
+
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /></svg>
|
| 61 |
+
</button>
|
| 62 |
+
</div>
|
| 63 |
+
<nav id="history-list" class="flex-grow overflow-y-auto custom-scrollbar -mr-2 pr-2"></nav>
|
| 64 |
+
<div id="sidebar-footer" class="flex-shrink-0 pt-4 border-t border-slate-200/60 dark:border-slate-700/60">
|
| 65 |
+
<button id="settings-button" class="sidebar-button">
|
| 66 |
+
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.438.995s.145.755.438.995l1.003.827c.48.398.668 1.03.26 1.431l-1.296 2.247a1.125 1.125 0 01-1.37.49l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.063-.374-.313-.686-.645-.87a6.52 6.52 0 01-.22-.127c-.324-.196-.72-.257-1.075-.124l-1.217.456a1.125 1.125 0 01-1.37-.49l-1.296-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.437-.995s-.145-.755-.437-.995l-1.004-.827a1.125 1.125 0 01-.26-1.431l1.296-2.247a1.125 1.125 0 011.37-.49l1.217.456c.355.133.75.072 1.076.124.072-.044.146-.087.22-.128.332-.183.582-.495.645-.869l.213-1.281z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
| 67 |
+
<span>تنظیمات</span>
|
| 68 |
+
</button>
|
| 69 |
+
</div>
|
| 70 |
+
</aside>
|
| 71 |
+
|
| 72 |
+
<div id="app-container" class="h-full w-full max-w-3xl mx-auto shadow-2xl bg-slate-100 dark:bg-slate-900">
|
| 73 |
+
<header id="main-header" class="flex items-center justify-between p-4 bg-slate-100/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-200/80 dark:border-slate-800/80 z-20">
|
| 74 |
+
<button id="menu-button" class="p-2 text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
|
| 75 |
+
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9h16.5m-4.125 6h-8.25" /></svg>
|
| 76 |
+
</button>
|
| 77 |
+
<div class="text-lg font-bold">
|
| 78 |
+
<span style="background: linear-gradient(45deg, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;">Alpha</span>
|
| 79 |
+
<span class="text-slate-800 dark:text-slate-200">Chat Bot</span>
|
| 80 |
+
</div>
|
| 81 |
+
<button id="new-chat-button" class="p-2 text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white">
|
| 82 |
+
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>
|
| 83 |
+
</button>
|
| 84 |
+
</header>
|
| 85 |
+
|
| 86 |
+
<main id="chat-window" class="flex-grow w-full p-4 sm:p-6 overflow-y-auto custom-scrollbar"></main>
|
| 87 |
+
|
| 88 |
+
<footer id="main-footer" class="flex-shrink-0 px-4 sm:px-6 pb-4 sm:pb-6 z-10 pt-4 bg-gradient-to-t from-slate-100 via-slate-100 to-transparent dark:from-slate-900 dark:via-slate-900">
|
| 89 |
+
<div id="image-preview-container" class="mb-3 relative p-1.5 bg-white/50 dark:bg-slate-700/50 backdrop-blur-md rounded-lg border border-slate-200 dark:border-slate-600 shadow-sm hidden">
|
| 90 |
+
<img id="image-preview" src="" alt="Preview" class="h-20 w-20 object-cover rounded-md flex-shrink-0" />
|
| 91 |
+
<span id="file-info-text" class="mr-2 text-slate-800 dark:text-slate-200"></span>
|
| 92 |
+
<button id="remove-image-button" class="absolute -top-2 -left-2 bg-slate-700 text-white rounded-full p-0.5 leading-none shadow-md hover:bg-red-600 transition-colors">
|
| 93 |
+
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
| 94 |
+
</button>
|
| 95 |
+
</div>
|
| 96 |
+
|
| 97 |
+
<form id="message-form">
|
| 98 |
+
<div class="chat-input-box">
|
| 99 |
+
<textarea id="message-input" class="chat-text-input" placeholder="هر چی میخوای بپرس" rows="1"></textarea>
|
| 100 |
+
|
| 101 |
+
<div class="buttons-wrapper">
|
| 102 |
+
<div class="tools-container">
|
| 103 |
+
<button type="button" class="tools-button" id="tools-button">
|
| 104 |
+
<span class="tools-icon" id="tools-default-icon">
|
| 105 |
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg>
|
| 106 |
+
</span>
|
| 107 |
+
<span id="tools-button-text">ابزارها</span>
|
| 108 |
+
<button type="button" class="clear-tool-selection" id="clear-tool-selection" style="display: none;">
|
| 109 |
+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
| 110 |
+
</button>
|
| 111 |
+
</button>
|
| 112 |
+
<ul class="tools-menu" id="tools-menu">
|
| 113 |
+
<li class="tool-item" data-tool="deep-think" data-tool-name="تفکر عمیق">
|
| 114 |
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="tool-item-svg"><circle cx="12" cy="8.5" r="6.8" fill="#FFF9C4" opacity="0.35"><animate attributeName="opacity" values="0.25;0.6;0.25" dur="1.6s" repeatCount="indefinite" /></circle><path d="M12 3c-3.3 0-6 2.7-6 6 0 2.1 1.1 4 2.8 5.1V15c0 1.1.9 2 2 2h2.4c1.1 0 2-.9 2-2v-.9C16.9 13 18 11.1 18 9c0-3.3-2.7-6-6-6z" fill="#FFE082" stroke="#FBC02D" stroke-width="0.7"/><path d="M10 10.5 Q12 8.7 14 10.5" fill="none" stroke="#FFA000" stroke-width="1" stroke-linecap="round"/><line x1="9.6" y1="10.5" x2="9.6" y2="12" stroke="#FFA000" stroke-width="0.8" stroke-linecap="round"/><line x1="14.4" y1="10.5" x2="14.4" y2="12" stroke="#FFA000" stroke-width="0.8" stroke-linecap="round"/><rect x="9" y="15" width="6" height="3" rx="1" fill="#B0BEC5" stroke="#90A4AE" stroke-width="0.5"/><line x1="10" y1="16" x2="14" y2="16" stroke="#78909C" stroke-width="0.8" stroke-linecap="round"/><line x1="10" y1="17" x2="14" y2="17" stroke="#78909C" stroke-width="0.8" stroke-linecap="round"/><g stroke="#FFD54F" stroke-width="1.2" stroke-linecap="round" opacity="0.9"><line x1="12" y1="1.8" x2="12" y2="3.4"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" repeatCount="indefinite"/></line><line x1="5.2" y1="3.2" x2="6.6" y2="4.3"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" begin="0.1s" repeatCount="indefinite"/></line><line x1="18.8" y1="3.2" x2="17.4" y2="4.3"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" begin="0.2s" repeatCount="indefinite"/></line><line x1="3.5" y1="8.5" x2="5.2" y2="8.5"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" begin="0.3s" repeatCount="indefinite"/></line><line x1="18.8" y1="8.5" x2="20.5" y2="8.5"><animate attributeName="opacity" values="0.3;1;0.3" dur="1.6s" begin="0.4s" repeatCount="indefinite"/></line></g></svg>
|
| 115 |
+
<span>تفکر عمیق</span>
|
| 116 |
+
</li>
|
| 117 |
+
<li class="tool-item" data-tool="reasoning" data-tool-name="استدلال">
|
| 118 |
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="tool-item-svg">
|
| 119 |
+
<defs>
|
| 120 |
+
<linearGradient id="reasoning-grad" x1="0%" y1="0%" x2="100%" y2="100%">
|
| 121 |
+
<stop offset="0%" style="stop-color:#86EFAC; stop-opacity:1" />
|
| 122 |
+
<stop offset="100%" style="stop-color:#3B82F6; stop-opacity:1" />
|
| 123 |
+
</linearGradient>
|
| 124 |
+
</defs>
|
| 125 |
+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.59V18h2v-1.41c1.89-.42 3.5-1.66 4.38-3.23l-1.48-.74c-.7 1.25-1.9 2.17-3.4 2.37V13h-2v1.59c-1.89.42-3.5 1.66-4.38 3.23l1.48.74c.7-1.25 1.9-2.17 3.4-2.37zM12 4c-1.93 0-3.5 1.57-3.5 3.5S10.07 11 12 11s3.5-1.57 3.5-3.5S13.93 4 12 4z" fill="url(#reasoning-grad)"/>
|
| 126 |
+
<circle cx="12" cy="7.5" r="1.5" fill="#fff" opacity="0.8">
|
| 127 |
+
<animate attributeName="r" values="1.5; 2.5; 1.5" dur="2s" repeatCount="indefinite" />
|
| 128 |
+
</circle>
|
| 129 |
+
</svg>
|
| 130 |
+
<span>استدلال</span>
|
| 131 |
+
</li>
|
| 132 |
+
<!-- START: REMOVED PREMIUM LOCK -->
|
| 133 |
+
<li class="tool-item" data-tool="search" data-tool-name="جستجو در اینترنت">
|
| 134 |
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="tool-item-svg"><circle cx="12" cy="12" r="9" fill="none" stroke="#4682B4" stroke-width="0.5" stroke-dasharray="2 2" opacity="0.7"><animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="8s" repeatCount="indefinite" /></circle><circle cx="12" cy="12" r="7" fill="#D4EAF7" stroke="#87CEEB" stroke-width="0.8"/><ellipse cx="12" cy="12" rx="3.2" ry="7" fill="none" stroke="#4682B4" stroke-width="0.8"/><ellipse cx="12" cy="12" rx="5.2" ry="7" fill="none" stroke="#4682B4" stroke-width="0.5" opacity="0.6"/><ellipse cx="12" cy="12" rx="7" ry="3.5" fill="none" stroke="#4682B4" stroke-width="0.8"/><ellipse cx="12" cy="9" rx="6" ry="2.2" fill="none" stroke="#4682B4" stroke-width="0.5" opacity="0.6"/><g><circle cx="17.5" cy="17.5" r="2.7" fill="rgba(180, 220, 255, 0.7)" stroke="#3B82F6" stroke-width="1"/><line x1="19.2" y1="19.2" x2="21.4" y2="21.4" stroke="#3B82F6" stroke-width="1.2" stroke-linecap="round"/><circle cx="17.5" cy="17.5" r="1.3" fill="none" stroke="#3B82F6" stroke-width="0.8" stroke-dasharray="3 3"><animate attributeName="r" values="1.3;2.4;1.3" dur="2.2s" repeatCount="indefinite"/></circle></g></svg>
|
| 135 |
+
<span>جستجو در اینترنت</span>
|
| 136 |
+
</li>
|
| 137 |
+
<!-- END: REMOVED PREMIUM LOCK -->
|
| 138 |
+
<div class="menu-divider"></div>
|
| 139 |
+
<li class="premium-locked-item tool-item-full-width">
|
| 140 |
+
<div class="toggle-wrapper">
|
| 141 |
+
<span class="toggle-label">فعال کردن افکار</span>
|
| 142 |
+
<div class="toggle-switch">
|
| 143 |
+
<div class="toggle-thumb"><span class="thumb-text">Pro</span></div>
|
| 144 |
+
</div>
|
| 145 |
+
</div>
|
| 146 |
+
</li>
|
| 147 |
+
</ul>
|
| 148 |
+
</div>
|
| 149 |
+
|
| 150 |
+
<div class="attach-container">
|
| 151 |
+
<button type="button" id="attach-file-button" class="icon-button" aria-label="پیوست فایل">
|
| 152 |
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path></svg>
|
| 153 |
+
</button>
|
| 154 |
+
<div id="file-popup-menu">
|
| 155 |
+
<!-- START: REMOVED PREMIUM LOCK -->
|
| 156 |
+
<button type="button" id="select-image-option" class="popup-option">
|
| 157 |
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="popup-option-svg"><rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="#E0E0E0" stroke="#BBB" stroke-width="1"/><path d="M3 15 L8 10 L13 15 L18 10 L21 15 V19 H3 Z" fill="#999999" stroke="#777" stroke-width="0.5"/><circle cx="7" cy="8" r="2" fill="#FFD700" stroke="#DAA520" stroke-width="0.5"/><path class="upload-arrow" d="M12 4 L12 11 M9 8 L12 11 L15 8" stroke="#4CAF50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
|
| 158 |
+
<span>آپلود تصویر</span>
|
| 159 |
+
</button>
|
| 160 |
+
<button type="button" id="select-file-option" class="popup-option">
|
| 161 |
+
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="popup-option-svg"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" fill="#E0E0E0" stroke="#BBB" stroke-width="1"/><polyline points="14 2 14 8 20 8" fill="#CCCCCC" stroke="#AAA" stroke-width="0.5"/><g class="magnifier-group"><circle cx="11.5" cy="14.5" r="3" fill="#F0F0F0" stroke="#777" stroke-width="1"/><circle class="magnifying-lens" cx="11.5" cy="14.5" r="2.5" fill="rgba(180, 220, 255, 0.7)" stroke="rgba(100, 150, 200, 0.8)" stroke-width="0.5"/><path class="magnifying-handle" d="M13.5 16.5 C15 17.5 17 19.5 19 20.5 Q19.5 21 19 21.5 C17 20.5 15 18.5 13.5 17.5 Z" fill="#999999" stroke="#777" stroke-width="0.5"/></g></svg>
|
| 162 |
+
<span>آپلود فایل</span>
|
| 163 |
+
</button>
|
| 164 |
+
<!-- END: REMOVED PREMIUM LOCK -->
|
| 165 |
+
</div>
|
| 166 |
+
</div>
|
| 167 |
+
|
| 168 |
+
<input type="file" id="image-file-input" class="hidden" accept="image/*">
|
| 169 |
+
<input type="file" id="general-file-input" class="hidden">
|
| 170 |
+
|
| 171 |
+
<button id="submit-button" type="submit" class="icon-button send-button" aria-label="ارسال">
|
| 172 |
+
<svg id="send-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>
|
| 173 |
+
<svg id="stop-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5 5a1 1 0 00-1 1v8a1 1 0 001 1h8a1 1 0 001-1V6a1 1 0 00-1-1H5z" clip-rule="evenodd"></path></svg>
|
| 174 |
+
</button>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</form>
|
| 178 |
+
</footer>
|
| 179 |
+
</div>
|
| 180 |
+
|
| 181 |
+
<div id="settings-modal" class="fixed inset-0 bg-black bg-opacity-40 dark:bg-opacity-60 backdrop-blur-sm flex items-center justify-center p-4 z-50 hidden">
|
| 182 |
+
<div id="settings-modal-content" class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-6 transform">
|
| 183 |
+
<h2 class="text-xl font-bold text-center mb-6 text-slate-800 dark:text-white">تنظیمات</h2>
|
| 184 |
+
<div class="mb-6 p-4 rounded-lg bg-slate-100 dark:bg-slate-700/50">
|
| 185 |
+
<div id="settings-user-tier" class="flex flex-col items-center justify-center">
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
<div class="flex items-center justify-between p-4 rounded-lg bg-slate-100 dark:bg-slate-700/50">
|
| 189 |
+
<label for="theme-toggle" class="text-slate-700 dark:text-slate-300 font-medium">حالت تیره</label>
|
| 190 |
+
<label class="theme-switch">
|
| 191 |
+
<input type="checkbox" id="theme-toggle">
|
| 192 |
+
<span class="slider round"></span>
|
| 193 |
+
</label>
|
| 194 |
+
</div>
|
| 195 |
+
</div>
|
| 196 |
+
</div>
|
| 197 |
+
|
| 198 |
+
<div id="premium-feature-modal" class="fixed inset-0 z-[60] hidden items-center justify-center p-4">
|
| 199 |
+
<div class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
|
| 200 |
+
<div class="premium-modal-content relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-6 text-center transform">
|
| 201 |
+
<div id="premium-modal-icon-container" class="mb-4"></div>
|
| 202 |
+
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">این یک ویژگی نسخه کامل است!</h3>
|
| 203 |
+
<p class="text-slate-600 dark:text-slate-300 mb-6 text-sm">برای استفاده از این قابلیت، اشتراک خود را به نسخه کامل ارتقا دهید.</p>
|
| 204 |
+
<div class="flex flex-col gap-3">
|
| 205 |
+
<button id="premium-modal-upgrade-btn" class="beautiful-upgrade-btn w-full">
|
| 206 |
+
🚀 ارتقا به نسخه نامحدود
|
| 207 |
+
</button>
|
| 208 |
+
<button id="premium-modal-close-btn" class="w-full px-6 py-2 rounded-full bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors">بعداً</button>
|
| 209 |
+
</div>
|
| 210 |
+
</div>
|
| 211 |
+
</div>
|
| 212 |
+
|
| 213 |
+
<div id="plus-required-modal" class="fixed inset-0 z-[60] hidden items-center justify-center p-4">
|
| 214 |
+
<div class="absolute inset-0 bg-black/50 backdrop-blur-md"></div>
|
| 215 |
+
<div class="premium-modal-content relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-6 text-center transform">
|
| 216 |
+
<div id="plus-modal-icon-container" class="mb-4"></div>
|
| 217 |
+
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">قابلیت ویژه نسخه پلاس</h3>
|
| 218 |
+
<p class="text-slate-600 dark:text-slate-300 mb-6 text-sm">شما کاربر اشتراکی هستید. برای استفاده از این قابلیت، از نسخه پلاس استفاده کنید.</p>
|
| 219 |
+
<div class="flex flex-col gap-3">
|
| 220 |
+
<button id="plus-modal-close-btn" class="w-full px-6 py-2 rounded-full bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors">متوجه شدم</button>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
</div>
|
| 224 |
+
|
| 225 |
+
<div id="history-item-menu" class="fixed bg-white dark:bg-slate-800 rounded-xl shadow-lg p-2 z-50 w-56 border border-slate-200 dark:border-slate-700">
|
| 226 |
+
</div>
|
| 227 |
+
|
| 228 |
+
<div id="message-item-menu" class="fixed inset-0 z-50 hidden items-center justify-center p-4">
|
| 229 |
+
<div id="message-item-menu-overlay" class="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
|
| 230 |
+
<div id="message-item-menu-content" class="relative bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-2 border border-slate-200 dark:border-slate-700">
|
| 231 |
+
</div>
|
| 232 |
+
</div>
|
| 233 |
+
|
| 234 |
+
<div id="confirm-modal" class="fixed inset-0 z-50 hidden">
|
| 235 |
+
<div id="confirm-modal-overlay" class="absolute inset-0 bg-black/40"></div>
|
| 236 |
+
<div class="relative w-full h-full flex items-center justify-center p-4">
|
| 237 |
+
<div id="confirm-modal-content" class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-6 text-center">
|
| 238 |
+
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-2">تایید عملیات</h3>
|
| 239 |
+
<p id="confirm-modal-message" class="text-slate-600 dark:text-slate-300 mb-6"></p>
|
| 240 |
+
<div class="flex justify-center gap-4">
|
| 241 |
+
<button id="confirm-modal-cancel-btn" class="px-6 py-2 rounded-lg bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">انصراف</button>
|
| 242 |
+
<button id="confirm-modal-confirm-btn" class="px-6 py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-colors">تایید</button>
|
| 243 |
+
</div>
|
| 244 |
+
</div>
|
| 245 |
+
</div>
|
| 246 |
+
</div>
|
| 247 |
+
|
| 248 |
+
<div id="rename-modal" class="fixed inset-0 z-50 hidden">
|
| 249 |
+
<div id="rename-modal-overlay" class="absolute inset-0 bg-black/40"></div>
|
| 250 |
+
<div class="relative w-full h-full flex items-center justify-center p-4">
|
| 251 |
+
<form id="rename-modal-content" class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-sm p-6">
|
| 252 |
+
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-4 text-center">تغییر نام گفتگو</h3>
|
| 253 |
+
<input id="rename-input" type="text" class="w-full p-2 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-200 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none mb-6">
|
| 254 |
+
<div class="flex justify-center gap-4">
|
| 255 |
+
<button id="rename-modal-cancel-btn" type="button" class="px-6 py-2 rounded-lg bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">انصراف</button>
|
| 256 |
+
<button id="rename-modal-confirm-btn" type="submit" class="px-6 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors">تایید</button>
|
| 257 |
+
</div>
|
| 258 |
+
</form>
|
| 259 |
+
</div>
|
| 260 |
+
</div>
|
| 261 |
+
|
| 262 |
+
<div id="edit-modal" class="fixed inset-0 z-50 hidden">
|
| 263 |
+
<div id="edit-modal-overlay" class="absolute inset-0 bg-black/40"></div>
|
| 264 |
+
<div class="relative w-full h-full flex items-center justify-center p-4">
|
| 265 |
+
<form id="edit-modal-content" class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl w-full max-w-lg p-6">
|
| 266 |
+
<h3 class="text-lg font-bold text-slate-800 dark:text-white mb-4 text-center">ویرایش پیام</h3>
|
| 267 |
+
<textarea id="edit-input" rows="5" class="w-full p-2 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-200 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none mb-6"></textarea>
|
| 268 |
+
<div class="flex justify-center gap-4">
|
| 269 |
+
<button id="edit-modal-cancel-btn" type="button" class="px-6 py-2 rounded-lg bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-200 hover:bg-slate-300 dark:hover:bg-slate-500 transition-colors">انصراف</button>
|
| 270 |
+
<button id="edit-modal-confirm-btn" type="submit" class="px-6 py-2 rounded-lg bg-blue-500 text-white hover:bg-blue-600 transition-colors">تایید و ارسال مجدد</button>
|
| 271 |
+
</div>
|
| 272 |
+
</form>
|
| 273 |
+
</div>
|
| 274 |
+
</div>
|
| 275 |
+
|
| 276 |
+
<div id="html-preview-modal" class="hidden">
|
| 277 |
+
<div id="html-preview-overlay" class="absolute inset-0 bg-black/40"></div>
|
| 278 |
+
<div id="html-preview-content" class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl transform">
|
| 279 |
+
<div id="html-preview-header" class="bg-slate-50 dark:bg-slate-700">
|
| 280 |
+
<h3 class="text-lg font-bold text-slate-800 dark:text-white">پیشنمایش HTML</h3>
|
| 281 |
+
<button id="html-preview-close-btn" class="p-2 rounded-full text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600">
|
| 282 |
+
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path></svg>
|
| 283 |
+
</button>
|
| 284 |
+
</div>
|
| 285 |
+
<div id="html-preview-iframe-container">
|
| 286 |
+
<iframe id="html-preview-iframe" srcdoc="" allowfullscreen></iframe>
|
| 287 |
+
</div>
|
| 288 |
+
</div>
|
| 289 |
+
</div>
|
| 290 |
+
|
| 291 |
+
<script type="module" src="{{ url_for('static', filename='js/db.js') }}"></script>
|
| 292 |
+
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
|
| 293 |
+
|
| 294 |
+
</body>
|
| 295 |
+
</html>
|