Spaces:
Sleeping
Sleeping
Delete templates/index (8).html
Browse files- templates/index (8).html +0 -246
templates/index (8).html
DELETED
|
@@ -1,246 +0,0 @@
|
|
| 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 |
-
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 9 |
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 10 |
-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
| 11 |
-
|
| 12 |
-
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
| 13 |
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
|
| 14 |
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
| 15 |
-
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap" rel="stylesheet">
|
| 16 |
-
|
| 17 |
-
<!-- CSS file is now linked externally -->
|
| 18 |
-
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
| 19 |
-
|
| 20 |
-
</head>
|
| 21 |
-
<body>
|
| 22 |
-
<!-- Define SVG filters for 3D effect (hidden from view) -->
|
| 23 |
-
<svg width="0" height="0" style="position: absolute; overflow: hidden;">
|
| 24 |
-
<defs>
|
| 25 |
-
<filter id="shadowAndHighlight">
|
| 26 |
-
<feDropShadow dx="-0.5" dy="-0.5" stdDeviation="0" flood-color="#FFFFFF" flood-opacity="0.8"/>
|
| 27 |
-
<feDropShadow dx="1" dy="1" stdDeviation="0" flood-color="#888888" flood-opacity="0.8"/>
|
| 28 |
-
</filter>
|
| 29 |
-
</defs>
|
| 30 |
-
</svg>
|
| 31 |
-
|
| 32 |
-
<div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-40 z-40 hidden opacity-0"></div>
|
| 33 |
-
<aside id="history-sidebar" class="fixed top-0 right-0 h-full bg-white/80 backdrop-blur-lg border-l border-slate-200/50 w-72 p-4 flex flex-col z-50 transform translate-x-full">
|
| 34 |
-
<div class="flex items-center justify-between mb-4 px-2">
|
| 35 |
-
<h2 class="text-lg font-bold text-slate-800">تاریخچه چتها</h2>
|
| 36 |
-
<button id="delete-all-chats" title="حذف تمام چتها" class="p-2 text-red-500 hover:bg-red-100 rounded-full transition-colors">
|
| 37 |
-
<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>
|
| 38 |
-
</button>
|
| 39 |
-
</div>
|
| 40 |
-
<nav id="history-list" class="flex-grow overflow-y-auto custom-scrollbar -mr-2 pr-2"></nav>
|
| 41 |
-
</aside>
|
| 42 |
-
|
| 43 |
-
<div id="app-container" class="h-full w-full max-w-3xl mx-auto shadow-2xl bg-slate-100">
|
| 44 |
-
<header id="main-header" class="flex items-center justify-between p-4 bg-slate-100/80 backdrop-blur-md border-b border-slate-200/80 z-20">
|
| 45 |
-
<button id="menu-button" class="p-2 text-slate-600 hover:text-slate-900">
|
| 46 |
-
<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>
|
| 47 |
-
</button>
|
| 48 |
-
<button id="model-select-button" class="px-4 py-2 text-sm font-semibold text-white bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center gap-2">
|
| 49 |
-
<span id="current-model-name"></span>
|
| 50 |
-
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" /></svg>
|
| 51 |
-
</button>
|
| 52 |
-
<button id="new-chat-button" class="p-2 text-slate-600 hover:text-slate-900">
|
| 53 |
-
<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>
|
| 54 |
-
</button>
|
| 55 |
-
</header>
|
| 56 |
-
|
| 57 |
-
<main id="chat-window" class="flex-grow w-full p-4 sm:p-6 overflow-y-auto custom-scrollbar"></main>
|
| 58 |
-
|
| 59 |
-
<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">
|
| 60 |
-
<!-- File preview remains the same -->
|
| 61 |
-
<div id="image-preview-container" class="mb-3 relative p-1.5 bg-white/50 backdrop-blur-md rounded-lg border border-slate-200 shadow-sm hidden">
|
| 62 |
-
<img id="image-preview" src="" alt="Preview" class="h-20 w-20 object-cover rounded-md flex-shrink-0" />
|
| 63 |
-
<span id="file-info-text" class="mr-2"></span>
|
| 64 |
-
<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">
|
| 65 |
-
<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>
|
| 66 |
-
</button>
|
| 67 |
-
</div>
|
| 68 |
-
|
| 69 |
-
<form id="message-form" class="flex items-center bg-white/60 backdrop-blur-lg p-2 border border-slate-200/80 shadow-md focus-within:ring-2 focus-within:ring-blue-500 rounded-full">
|
| 70 |
-
<textarea id="message-input" rows="1" placeholder="از من هرچه میخواهی بپرس..." class="flex-grow bg-transparent text-slate-800 placeholder-slate-400 focus:outline-none px-4 text-right" autocomplete="off"></textarea>
|
| 71 |
-
|
| 72 |
-
<input type="file" id="image-file-input" class="hidden" accept="image/*">
|
| 73 |
-
<input type="file" id="general-file-input" class="hidden" accept="image/*, application/pdf, text/plain, audio/*, video/*">
|
| 74 |
-
|
| 75 |
-
<button type="button" id="attach-file-button" class="p-2 text-slate-500 hover:text-blue-600 transition-colors">
|
| 76 |
-
<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="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.122 2.122l7.81-7.81" /></svg>
|
| 77 |
-
</button>
|
| 78 |
-
<button id="submit-button" type="submit" class="p-2 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 text-white disabled:from-slate-300 disabled:to-slate-400 transition-all flex items-center justify-center w-10 h-10 flex-shrink-0">
|
| 79 |
-
<svg id="send-icon" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
|
| 80 |
-
<svg id="stop-icon" class="w-5 h-5" 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>
|
| 81 |
-
</button>
|
| 82 |
-
</form>
|
| 83 |
-
</footer>
|
| 84 |
-
</div>
|
| 85 |
-
|
| 86 |
-
<!-- All Modals remain here as part of the main HTML structure -->
|
| 87 |
-
<div id="model-select-modal" class="fixed inset-0 bg-black bg-opacity-40 backdrop-blur-sm flex items-center justify-center p-4 z-50 hidden">
|
| 88 |
-
<div id="modal-content" class="bg-white rounded-2xl shadow-xl w-full max-w_sm p-6 transform">
|
| 89 |
-
<h2 class="text-xl font-bold text-center mb-6">یک مدل را انتخاب کنید</h2>
|
| 90 |
-
<div class="space-y-4">
|
| 91 |
-
<button data-model="gemini-2.0-flash" data-name="چت بات رایگان آلفا" class="model-option-card w-full text-right p-4 border rounded-xl hover:border-blue-500 hover:bg-blue-50 transition-all flex items-center gap-4">
|
| 92 |
-
<div class="w-5 h-5 border-2 border-slate-400 rounded-full flex items-center justify-center flex-shrink-0 radio-icon"><div class="w-2.5 h-2.5 bg-blue-500 rounded-full inner-dot hidden"></div></div>
|
| 93 |
-
<div>
|
| 94 |
-
<p class="font-semibold">چت بات رایگان آلفا</p><p class="text-sm text-slate-500">مناسب برای سرعت و کارهای روزمره</p>
|
| 95 |
-
</div>
|
| 96 |
-
</button>
|
| 97 |
-
<button data-model="gemini-2.5-flash" data-name="چت بات پیشرفته آلفا" class="model-option-card w-full text-right p-4 border rounded-xl hover:border-blue-500 hover:bg-blue-50 transition-all flex items-center gap-4">
|
| 98 |
-
<div class="w-5 h-5 border-2 border-slate-400 rounded-full flex items-center justify-center flex-shrink-0 radio-icon"><div class="w-2.5 h-2.5 bg-blue-500 rounded-full inner-dot hidden"></div></div>
|
| 99 |
-
<div>
|
| 100 |
-
<p class="font-semibold">چت بات پیشرفته آلفا</p><p class="text-sm text-slate-500">برای پاسخهای دقیقتر و پیچیدهتر</p>
|
| 101 |
-
</div>
|
| 102 |
-
</button>
|
| 103 |
-
</div>
|
| 104 |
-
</div>
|
| 105 |
-
</div>
|
| 106 |
-
|
| 107 |
-
<div id="history-item-menu" class="fixed bg-white rounded-xl shadow-lg p-2 z-50 w-48">
|
| 108 |
-
<button data-action="rename" class="w-full flex items-center gap-3 px-3 py-2 text-sm text-slate-700 hover:bg-slate-100 rounded-md transition-colors">
|
| 109 |
-
<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="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.931z" /><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12.572l-4.5-4.5" /></svg>
|
| 110 |
-
<span>تغییر نام گفتگو</span>
|
| 111 |
-
</button>
|
| 112 |
-
<button data-action="delete" class="w-full flex items-center gap-3 px-3 py-2 text-sm text-red-500 hover:bg-red-100 rounded-md transition-colors">
|
| 113 |
-
<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="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>
|
| 114 |
-
<span>حذف گفتگو</span>
|
| 115 |
-
</button>
|
| 116 |
-
</div>
|
| 117 |
-
|
| 118 |
-
<div id="confirm-modal" class="fixed inset-0 z-50 hidden">
|
| 119 |
-
<div id="confirm-modal-overlay" class="absolute inset-0 bg-black/40"></div>
|
| 120 |
-
<div class="relative w-full h-full flex items-center justify-center p-4">
|
| 121 |
-
<div id="confirm-modal-content" class="bg-white rounded-2xl shadow-xl w-full max-w_sm p-6 text-center">
|
| 122 |
-
<h3 class="text-lg font-bold text-slate-800 mb-2">تایید عملیات</h3>
|
| 123 |
-
<p id="confirm-modal-message" class="text-slate-600 mb-6"></p>
|
| 124 |
-
<div class="flex justify-center gap-4">
|
| 125 |
-
<button id="confirm-modal-cancel-btn" class="px-6 py-2 rounded-lg bg-slate-200 text-slate-700 hover:bg-slate-300 transition-colors">انصراف</button>
|
| 126 |
-
<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>
|
| 127 |
-
</div>
|
| 128 |
-
</div>
|
| 129 |
-
</div>
|
| 130 |
-
</div>
|
| 131 |
-
|
| 132 |
-
<div id="rename-modal" class="fixed inset-0 z-50 hidden">
|
| 133 |
-
<div id="rename-modal-overlay" class="absolute inset-0 bg-black/40"></div>
|
| 134 |
-
<div class="relative w-full h-full flex items-center justify-center p-4">
|
| 135 |
-
<form id="rename-modal-content" class="bg-white rounded-2xl shadow-xl w-full max-w_sm p-6">
|
| 136 |
-
<h3 class="text-lg font-bold text-slate-800 mb-4 text-center">تغییر نام گفتگو</h3>
|
| 137 |
-
<input id="rename-input" type="text" class="w-full p-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none mb-6">
|
| 138 |
-
<div class="flex justify-center gap-4">
|
| 139 |
-
<button id="rename-modal-cancel-btn" type="button" class="px-6 py-2 rounded-lg bg-slate-200 text-slate-700 hover:bg-slate-300 transition-colors">انصراف</button>
|
| 140 |
-
<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>
|
| 141 |
-
</div>
|
| 142 |
-
</form>
|
| 143 |
-
</div>
|
| 144 |
-
</div>
|
| 145 |
-
|
| 146 |
-
<div id="edit-modal" class="fixed inset-0 z-50 hidden">
|
| 147 |
-
<div id="edit-modal-overlay" class="absolute inset-0 bg-black/40"></div>
|
| 148 |
-
<div class="relative w-full h-full flex items-center justify-center p-4">
|
| 149 |
-
<form id="edit-modal-content" class="bg-white rounded-2xl shadow-xl w-full max-w_lg p-6">
|
| 150 |
-
<h3 class="text-lg font-bold text-slate-800 mb-4 text-center">ویرایش پیام</h3>
|
| 151 |
-
<textarea id="edit-input" rows="5" class="w-full p-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:outline-none mb-6"></textarea>
|
| 152 |
-
<div class="flex justify-center gap-4">
|
| 153 |
-
<button id="edit-modal-cancel-btn" type="button" class="px-6 py-2 rounded-lg bg-slate-200 text-slate-700 hover:bg-slate-300 transition-colors">انصراف</button>
|
| 154 |
-
<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>
|
| 155 |
-
</div>
|
| 156 |
-
</form>
|
| 157 |
-
</div>
|
| 158 |
-
</div>
|
| 159 |
-
|
| 160 |
-
<div id="html-preview-modal" class="hidden">
|
| 161 |
-
<div id="html-preview-overlay" class="absolute inset-0 bg-black/40"></div>
|
| 162 |
-
<div id="html-preview-content" class="bg-white rounded-2xl shadow-xl transform">
|
| 163 |
-
<div id="html-preview-header">
|
| 164 |
-
<h3 class="text-lg font-bold text-slate-800">پیشنمایش HTML</h3>
|
| 165 |
-
<button id="html-preview-close-btn" class="p-2 rounded-full text-slate-600 hover:bg-slate-200">
|
| 166 |
-
<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>
|
| 167 |
-
</button>
|
| 168 |
-
</div>
|
| 169 |
-
<div id="html-preview-iframe-container">
|
| 170 |
-
<iframe id="html-preview-iframe" srcdoc="" allowfullscreen></iframe>
|
| 171 |
-
</div>
|
| 172 |
-
</div>
|
| 173 |
-
</div>
|
| 174 |
-
|
| 175 |
-
<div id="file-popup-menu" class="hidden">
|
| 176 |
-
<button id="select-image-option" class="popup-option">
|
| 177 |
-
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="svg-3d-effect" style="margin-left: 15px;">
|
| 178 |
-
<rect x="3" y="5" width="18" height="14" rx="2" ry="2" fill="#E0E0E0" stroke="#BBB" stroke-width="1"/>
|
| 179 |
-
<path d="M3 15 L8 10 L13 15 L18 10 L21 15 V19 H3 Z" fill="#999999" stroke="#777" stroke-width="0.5"/>
|
| 180 |
-
<circle cx="7" cy="8" r="2" fill="#FFD700" stroke="#DAA520" stroke-width="0.5"/>
|
| 181 |
-
<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"/>
|
| 182 |
-
</svg>
|
| 183 |
-
<span>آپلود تصویر</span>
|
| 184 |
-
</button>
|
| 185 |
-
<button id="select-file-option" class="popup-option">
|
| 186 |
-
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="svg-3d-effect" style="margin-left: 15px;">
|
| 187 |
-
<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"/>
|
| 188 |
-
<polyline points="14 2 14 8 20 8" fill="#CCCCCC" stroke="#AAA" stroke-width="0.5"/>
|
| 189 |
-
<g class="magnifier-group">
|
| 190 |
-
<circle cx="11.5" cy="14.5" r="3" fill="#F0F0F0" stroke="#777" stroke-width="1"/>
|
| 191 |
-
<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"/>
|
| 192 |
-
<path class="magnifying-handle"
|
| 193 |
-
d="M13.5 16.5
|
| 194 |
-
C15 17.5 17 19.5 19 20.5
|
| 195 |
-
Q19.5 21 19 21.5
|
| 196 |
-
C17 20.5 15 18.5 13.5 17.5
|
| 197 |
-
Z"
|
| 198 |
-
fill="#999999" stroke="#777" stroke-width="0.5"/>
|
| 199 |
-
</g>
|
| 200 |
-
</svg>
|
| 201 |
-
<span>آپلود فایل</span>
|
| 202 |
-
</button>
|
| 203 |
-
</div>
|
| 204 |
-
|
| 205 |
-
<!-- START: Image Gallery Modal -->
|
| 206 |
-
<div id="image-gallery-modal" class="fixed inset-0 z-[70] hidden items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
|
| 207 |
-
<div id="image-gallery-content" class="relative flex flex-col w-full h-full max-w-5xl max-h-[90vh] transition-all duration-300 scale-95 opacity-0">
|
| 208 |
-
<!-- Close Button -->
|
| 209 |
-
<button id="gallery-close-btn" class="absolute top-2 left-2 z-10 p-2 text-white bg-black/30 rounded-full hover:bg-black/60 transition-colors">
|
| 210 |
-
<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>
|
| 211 |
-
</button>
|
| 212 |
-
|
| 213 |
-
<!-- Main Image Viewer -->
|
| 214 |
-
<div class="relative flex-grow flex items-center justify-center overflow-hidden rounded-lg">
|
| 215 |
-
<img id="gallery-main-image" src="" alt="تمام صفحه" class="object-contain max-w-full max-h-full transition-opacity duration-300">
|
| 216 |
-
<!-- Navigation Buttons -->
|
| 217 |
-
<button id="gallery-prev-btn" class="absolute left-4 p-3 text-white bg-black/30 rounded-full hover:bg-black/60 transition-colors">
|
| 218 |
-
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 6L9 12L15 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
| 219 |
-
</button>
|
| 220 |
-
<button id="gallery-next-btn" class="absolute right-4 p-3 text-white bg-black/30 rounded-full hover:bg-black/60 transition-colors">
|
| 221 |
-
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
| 222 |
-
</button>
|
| 223 |
-
</div>
|
| 224 |
-
|
| 225 |
-
<!-- START: NEW LAYOUT for Download Button and Thumbnails -->
|
| 226 |
-
<div class="flex-shrink-0 pt-4 flex flex-col items-center justify-center gap-4">
|
| 227 |
-
<!-- Download Button is now on top -->
|
| 228 |
-
<button id="gallery-download-btn" class="flex-shrink-0 flex items-center justify-center gap-2 text-white font-semibold">
|
| 229 |
-
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
|
| 230 |
-
<span>دانلود</span>
|
| 231 |
-
</button>
|
| 232 |
-
<!-- Thumbnail strip is below -->
|
| 233 |
-
<div id="gallery-thumbnails" class="w-full flex items-center justify-center gap-2 overflow-x-auto custom-scrollbar p-2">
|
| 234 |
-
<!-- Thumbnails will be injected here by JS -->
|
| 235 |
-
</div>
|
| 236 |
-
</div>
|
| 237 |
-
<!-- END: NEW LAYOUT -->
|
| 238 |
-
</div>
|
| 239 |
-
</div>
|
| 240 |
-
<!-- END: Image Gallery Modal -->
|
| 241 |
-
|
| 242 |
-
<!-- JavaScript file is now linked externally as a module -->
|
| 243 |
-
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
|
| 244 |
-
|
| 245 |
-
</body>
|
| 246 |
-
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|