Hugging Face's logo

Spaces:
amirpoorazima
/
persian-calligraphy
Running

App Files Community
amirpoorazima commited on
Commit
33877bd
·
verified ·
1 Parent(s): 99792ed

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +542 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Persian Calligraphy
3
- emoji: 👁
4
  colorFrom: green
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: persian-calligraphy
3
+ emoji: 🐳
4
  colorFrom: green
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,542 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>هنر خوشنویسی فارسی | Persian Calligraphy</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&display=swap');
11
+
12
+ .persian-font {
13
+ font-family: 'Noto Nastaliq Urdu', serif;
14
+ }
15
+
16
+ .canvas-container {
17
+ background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="%23e5e7eb" stroke-width="1"/></svg>');
18
+ background-size: 20px 20px;
19
+ }
20
+
21
+ .ink-flow {
22
+ position: absolute;
23
+ width: 60px;
24
+ height: 60px;
25
+ background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M30,10 Q50,0 70,10 Q90,30 70,50 Q50,70 30,50 Q10,30 30,10 Z" fill="%233b82f6"/></svg>') no-repeat;
26
+ background-size: contain;
27
+ opacity: 0;
28
+ animation: drip 1.5s ease-out;
29
+ }
30
+
31
+ @keyframes drip {
32
+ 0% { transform: translateY(-20px) scale(0.8); opacity: 0; }
33
+ 20% { opacity: 0.8; }
34
+ 100% { transform: translateY(40px) scale(1.2); opacity: 0; }
35
+ }
36
+
37
+ .pen-tip {
38
+ position: absolute;
39
+ width: 20px;
40
+ height: 40px;
41
+ background: linear-gradient(to bottom, #1e3a8a, #3b82f6);
42
+ border-radius: 50% 50% 0 0;
43
+ transform: rotate(45deg);
44
+ bottom: -15px;
45
+ left: 50%;
46
+ transform-origin: bottom center;
47
+ }
48
+
49
+ .pen-body {
50
+ position: relative;
51
+ width: 15px;
52
+ height: 120px;
53
+ background: linear-gradient(to bottom, #111827, #1f2937);
54
+ border-radius: 5px;
55
+ }
56
+
57
+ .history-item {
58
+ transition: all 0.3s ease;
59
+ }
60
+
61
+ .history-item:hover {
62
+ transform: translateY(-5px);
63
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="bg-gray-50 text-gray-800">
68
+ <div class="container mx-auto px-4 py-8">
69
+ <!-- Header -->
70
+ <header class="flex flex-col items-center mb-8">
71
+ <h1 class="text-4xl font-bold text-blue-800 mb-2 persian-font">هنر خوشنویسی فارسی</h1>
72
+ <p class="text-lg text-gray-600">تجربه‌ای اصیل از هنر نوشتار فارسی</p>
73
+ <div class="w-full h-1 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 mt-4 rounded-full"></div>
74
+ </header>
75
+
76
+ <!-- Main App -->
77
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
78
+ <!-- Tools Panel -->
79
+ <div class="bg-white rounded-xl shadow-lg p-6 lg:order-3">
80
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">ابزارها</h2>
81
+
82
+ <!-- Pen Selection -->
83
+ <div class="mb-6">
84
+ <h3 class="text-lg font-medium mb-3">نوع قلم</h3>
85
+ <div class="grid grid-cols-3 gap-3">
86
+ <button class="pen-option bg-gray-100 p-3 rounded-lg flex flex-col items-center transition-all hover:bg-blue-100 border-2 border-transparent hover:border-blue-300" data-pen="nastaliq">
87
+ <div class="pen-body mx-auto mb-2">
88
+ <div class="pen-tip"></div>
89
+ </div>
90
+ <span class="text-sm">نستعلیق</span>
91
+ </button>
92
+ <button class="pen-option bg-gray-100 p-3 rounded-lg flex flex-col items-center transition-all hover:bg-blue-100" data-pen="shekasteh">
93
+ <div class="pen-body mx-auto mb-2" style="width: 12px; height: 100px;">
94
+ <div class="pen-tip" style="width: 15px; height: 30px;"></div>
95
+ </div>
96
+ <span class="text-sm">شکسته</span>
97
+ </button>
98
+ <button class="pen-option bg-gray-100 p-3 rounded-lg flex flex-col items-center transition-all hover:bg-blue-100" data-pen="thuluth">
99
+ <div class="pen-body mx-auto mb-2" style="width: 18px; height: 140px;">
100
+ <div class="pen-tip" style="width: 25px; height: 50px;"></div>
101
+ </div>
102
+ <span class="text-sm">ثلث</span>
103
+ </button>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Ink Color -->
108
+ <div class="mb-6">
109
+ <h3 class="text-lg font-medium mb-3">رنگ مرکب</h3>
110
+ <div class="flex flex-wrap gap-2">
111
+ <button class="w-8 h-8 rounded-full bg-black border-2 border-gray-300 ink-color" data-color="#000000"></button>
112
+ <button class="w-8 h-8 rounded-full bg-blue-800 border-2 border-gray-300 ink-color" data-color="#1e40af"></button>
113
+ <button class="w-8 h-8 rounded-full bg-red-700 border-2 border-gray-300 ink-color" data-color="#b91c1c"></button>
114
+ <button class="w-8 h-8 rounded-full bg-green-700 border-2 border-gray-300 ink-color" data-color="#15803d"></button>
115
+ <button class="w-8 h-8 rounded-full bg-yellow-600 border-2 border-gray-300 ink-color" data-color="#ca8a04"></button>
116
+ <button class="w-8 h-8 rounded-full bg-purple-800 border-2 border-gray-300 ink-color" data-color="#6b21a8"></button>
117
+ <button class="w-8 h-8 rounded-full bg-brown-600 border-2 border-gray-300 ink-color" style="background-color: #78350f;" data-color="#78350f"></button>
118
+ <button class="w-8 h-8 rounded-full bg-gray-600 border-2 border-gray-300 ink-color" data-color="#4b5563"></button>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Pen Size -->
123
+ <div class="mb-6">
124
+ <h3 class="text-lg font-medium mb-3">ضخامت قلم</h3>
125
+ <input type="range" min="1" max="10" value="3" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" id="penSize">
126
+ <div class="flex justify-between text-sm text-gray-600 mt-1">
127
+ <span>نازک</span>
128
+ <span>ضخیم</span>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Actions -->
133
+ <div class="grid grid-cols-2 gap-3">
134
+ <button id="clearCanvas" class="bg-red-100 text-red-700 py-2 px-4 rounded-lg flex items-center justify-center gap-2 transition hover:bg-red-200">
135
+ <i class="fas fa-trash-alt"></i>
136
+ پاک کردن
137
+ </button>
138
+ <button id="saveCanvas" class="bg-blue-100 text-blue-700 py-2 px-4 rounded-lg flex items-center justify-center gap-2 transition hover:bg-blue-200">
139
+ <i class="fas fa-save"></i>
140
+ ذخیره
141
+ </button>
142
+ <button id="undoAction" class="bg-gray-100 text-gray-700 py-2 px-4 rounded-lg flex items-center justify-center gap-2 transition hover:bg-gray-200">
143
+ <i class="fas fa-undo-alt"></i>
144
+ بازگشت
145
+ </button>
146
+ <button id="redoAction" class="bg-gray-100 text-gray-700 py-2 px-4 rounded-lg flex items-center justify-center gap-2 transition hover:bg-gray-200">
147
+ <i class="fas fa-redo-alt"></i>
148
+ تکرار
149
+ </button>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Canvas Area -->
154
+ <div class="lg:col-span-2">
155
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
156
+ <!-- Canvas Header -->
157
+ <div class="bg-gradient-to-r from-blue-600 to-blue-800 p-4 text-white flex justify-between items-center">
158
+ <h2 class="text-xl font-semibold">صفحه خوشنویسی</h2>
159
+ <div class="flex items-center gap-2">
160
+ <span id="currentPen" class="bg-white bg-opacity-20 px-3 py-1 rounded-full text-sm">نستعلیق</span>
161
+ <span id="currentColor" class="w-5 h-5 rounded-full bg-black border-2 border-white"></span>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Canvas -->
166
+ <div class="p-4">
167
+ <div class="canvas-container bg-white border-2 border-gray-200 rounded-lg overflow-hidden relative" style="height: 500px;">
168
+ <canvas id="calligraphyCanvas" class="w-full h-full cursor-crosshair"></canvas>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Canvas Footer -->
173
+ <div class="bg-gray-100 p-3 flex justify-between items-center text-sm text-gray-600">
174
+ <div>
175
+ <span>راهنما: برای شروع خوشنویسی، قلم را روی صفحه بکشید</span>
176
+ </div>
177
+ <div class="flex items-center gap-2">
178
+ <i class="fas fa-info-circle"></i>
179
+ </div>
180
+ </div>
181
+ </div>
182
+
183
+ <!-- Quick Phrases -->
184
+ <div class="mt-6 bg-white rounded-xl shadow-lg p-6">
185
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">جمله‌های آماده</h2>
186
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
187
+ <button class="quick-phrase bg-gray-100 hover:bg-blue-100 transition py-2 px-3 rounded-lg text-right persian-font" data-phrase="دل نوشته">دل نوشته</button>
188
+ <button class="quick-phrase bg-gray-100 hover:bg-blue-100 transition py-2 px-3 rounded-lg text-right persian-font" data-phrase="عشق">عشق</button>
189
+ <button class="quick-phrase bg-gray-100 hover:bg-blue-100 transition py-2 px-3 rounded-lg text-right persian-font" data-phrase="ایران">ایران</button>
190
+ <button class="quick-phrase bg-gray-100 hover:bg-blue-100 transition py-2 px-3 rounded-lg text-right persian-font" data-phrase="سلام">سلام</button>
191
+ <button class="quick-phrase bg-gray-100 hover:bg-blue-100 transition py-2 px-3 rounded-lg text-right persian-font" data-phrase="بهار">بهار</button>
192
+ <button class="quick-phrase bg-gray-100 hover:bg-blue-100 transition py-2 px-3 rounded-lg text-right persian-font" data-phrase="هنر">هنر</button>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- History Section -->
199
+ <div class="mt-12 bg-white rounded-xl shadow-lg p-6">
200
+ <h2 class="text-xl font-semibold mb-4 border-b pb-2">آثار شما</h2>
201
+ <div id="historyGrid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
202
+ <!-- History items will be added here dynamically -->
203
+ <div class="history-item bg-gray-100 rounded-lg p-3 flex flex-col items-center cursor-pointer">
204
+ <div class="text-gray-500 text-sm mb-2">هنوز اثری ایجاد نکرده‌اید</div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Footer -->
210
+ <footer class="mt-12 pt-8 border-t border-gray-200 text-center text-gray-600">
211
+ <p class="persian-font mb-2">هنر خوشنویسی فارسی - گنجینه‌ای از فرهنگ و تمدن ایران</p>
212
+ <p class="text-sm">© 2023 تمامی حقوق محفوظ است</p>
213
+ </footer>
214
+ </div>
215
+
216
+ <script>
217
+ document.addEventListener('DOMContentLoaded', function() {
218
+ // Canvas setup
219
+ const canvas = document.getElementById('calligraphyCanvas');
220
+ const ctx = canvas.getContext('2d');
221
+ let isDrawing = false;
222
+ let lastX = 0;
223
+ let lastY = 0;
224
+ let currentPen = 'nastaliq';
225
+ let currentColor = '#000000';
226
+ let currentSize = 3;
227
+ let drawingHistory = [];
228
+ let historyIndex = -1;
229
+
230
+ // Set canvas size
231
+ function resizeCanvas() {
232
+ const container = canvas.parentElement;
233
+ canvas.width = container.clientWidth;
234
+ canvas.height = container.clientHeight;
235
+
236
+ // Redraw if there's history
237
+ if (drawingHistory.length > 0) {
238
+ redrawCanvas();
239
+ }
240
+ }
241
+
242
+ // Initial resize
243
+ resizeCanvas();
244
+ window.addEventListener('resize', resizeCanvas);
245
+
246
+ // Drawing functions
247
+ function startDrawing(e) {
248
+ isDrawing = true;
249
+ [lastX, lastY] = getPosition(e);
250
+
251
+ // Create ink drip effect
252
+ createInkDrip(lastX, lastY);
253
+
254
+ // Start new path
255
+ ctx.beginPath();
256
+ ctx.moveTo(lastX, lastY);
257
+ }
258
+
259
+ function draw(e) {
260
+ if (!isDrawing) return;
261
+
262
+ const [x, y] = getPosition(e);
263
+
264
+ // Apply different styles based on pen type
265
+ switch(currentPen) {
266
+ case 'nastaliq':
267
+ ctx.lineWidth = currentSize * 2;
268
+ ctx.lineCap = 'round';
269
+ ctx.lineJoin = 'round';
270
+ break;
271
+ case 'shekasteh':
272
+ ctx.lineWidth = currentSize;
273
+ ctx.lineCap = 'square';
274
+ ctx.lineJoin = 'miter';
275
+ break;
276
+ case 'thuluth':
277
+ ctx.lineWidth = currentSize * 3;
278
+ ctx.lineCap = 'round';
279
+ ctx.lineJoin = 'round';
280
+ break;
281
+ }
282
+
283
+ ctx.strokeStyle = currentColor;
284
+
285
+ // Draw line
286
+ ctx.lineTo(x, y);
287
+ ctx.stroke();
288
+
289
+ // For smoother curves
290
+ ctx.beginPath();
291
+ ctx.moveTo(x, y);
292
+
293
+ lastX = x;
294
+ lastY = y;
295
+ }
296
+
297
+ function stopDrawing() {
298
+ isDrawing = false;
299
+
300
+ // Save drawing state to history
301
+ saveDrawingState();
302
+ }
303
+
304
+ function getPosition(e) {
305
+ const rect = canvas.getBoundingClientRect();
306
+ let x, y;
307
+
308
+ if (e.type.includes('touch')) {
309
+ x = e.touches[0].clientX - rect.left;
310
+ y = e.touches[0].clientY - rect.top;
311
+ } else {
312
+ x = e.clientX - rect.left;
313
+ y = e.clientY - rect.top;
314
+ }
315
+
316
+ return [x, y];
317
+ }
318
+
319
+ // Ink drip effect
320
+ function createInkDrip(x, y) {
321
+ const drip = document.createElement('div');
322
+ drip.className = 'ink-flow';
323
+ drip.style.left = `${x - 30}px`;
324
+ drip.style.top = `${y - 30}px`;
325
+ drip.style.backgroundImage = drip.style.backgroundImage.replace('%233b82f6', currentColor.substring(1));
326
+
327
+ canvas.parentElement.appendChild(drip);
328
+
329
+ // Remove after animation
330
+ setTimeout(() => {
331
+ drip.remove();
332
+ }, 1500);
333
+ }
334
+
335
+ // Save drawing state to history
336
+ function saveDrawingState() {
337
+ // If we're not at the end of history, remove future states
338
+ if (historyIndex < drawingHistory.length - 1) {
339
+ drawingHistory = drawingHistory.slice(0, historyIndex + 1);
340
+ }
341
+
342
+ // Save current canvas state
343
+ const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
344
+ drawingHistory.push(imageData);
345
+ historyIndex++;
346
+
347
+ // Update history display
348
+ updateHistoryDisplay();
349
+ }
350
+
351
+ // Redraw canvas from history
352
+ function redrawCanvas() {
353
+ if (historyIndex >= 0 && historyIndex < drawingHistory.length) {
354
+ ctx.putImageData(drawingHistory[historyIndex], 0, 0);
355
+ } else {
356
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
357
+ }
358
+ }
359
+
360
+ // Undo action
361
+ function undo() {
362
+ if (historyIndex > 0) {
363
+ historyIndex--;
364
+ redrawCanvas();
365
+ }
366
+ }
367
+
368
+ // Redo action
369
+ function redo() {
370
+ if (historyIndex < drawingHistory.length - 1) {
371
+ historyIndex++;
372
+ redrawCanvas();
373
+ }
374
+ }
375
+
376
+ // Clear canvas
377
+ function clearCanvas() {
378
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
379
+ saveDrawingState();
380
+ }
381
+
382
+ // Save canvas as image
383
+ function saveCanvas() {
384
+ const link = document.createElement('a');
385
+ link.download = 'خوشنویسی-فارسی.png';
386
+ link.href = canvas.toDataURL('image/png');
387
+ link.click();
388
+
389
+ // Add to history display
390
+ addToHistoryGrid(canvas.toDataURL('image/png'));
391
+ }
392
+
393
+ // Update history display
394
+ function updateHistoryDisplay() {
395
+ const historyGrid = document.getElementById('historyGrid');
396
+
397
+ // Clear existing items except the first one (empty state)
398
+ while (historyGrid.children.length > 1) {
399
+ historyGrid.removeChild(historyGrid.lastChild);
400
+ }
401
+
402
+ // Remove empty state if there are items
403
+ if (drawingHistory.length > 0 && historyGrid.children[0].textContent.includes("هنوز اثری ایجاد نکرده‌اید")) {
404
+ historyGrid.removeChild(historyGrid.children[0]);
405
+ }
406
+
407
+ // Add current state to history display
408
+ addToHistoryGrid(canvas.toDataURL('image/png'));
409
+ }
410
+
411
+ // Add to history grid
412
+ function addToHistoryGrid(imageUrl) {
413
+ const historyGrid = document.getElementById('historyGrid');
414
+
415
+ // Create history item
416
+ const historyItem = document.createElement('div');
417
+ historyItem.className = 'history-item bg-gray-100 rounded-lg overflow-hidden cursor-pointer';
418
+ historyItem.innerHTML = `
419
+ <img src="${imageUrl}" alt="اثر خوشنویسی" class="w-full h-32 object-contain bg-white">
420
+ <div class="p-2 text-center text-sm text-gray-600">${new Date().toLocaleString('fa-IR')}</div>
421
+ `;
422
+
423
+ // Add click event to load this drawing
424
+ historyItem.addEventListener('click', function() {
425
+ const img = new Image();
426
+ img.onload = function() {
427
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
428
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
429
+ saveDrawingState();
430
+ };
431
+ img.src = imageUrl;
432
+ });
433
+
434
+ historyGrid.insertBefore(historyItem, historyGrid.firstChild);
435
+
436
+ // Limit history to 10 items
437
+ if (historyGrid.children.length > 10) {
438
+ historyGrid.removeChild(historyGrid.lastChild);
439
+ }
440
+ }
441
+
442
+ // Event listeners for canvas
443
+ canvas.addEventListener('mousedown', startDrawing);
444
+ canvas.addEventListener('mousemove', draw);
445
+ canvas.addEventListener('mouseup', stopDrawing);
446
+ canvas.addEventListener('mouseout', stopDrawing);
447
+
448
+ // Touch support
449
+ canvas.addEventListener('touchstart', function(e) {
450
+ e.preventDefault();
451
+ startDrawing(e);
452
+ });
453
+
454
+ canvas.addEventListener('touchmove', function(e) {
455
+ e.preventDefault();
456
+ draw(e);
457
+ });
458
+
459
+ canvas.addEventListener('touchend', stopDrawing);
460
+
461
+ // Pen selection
462
+ document.querySelectorAll('.pen-option').forEach(option => {
463
+ option.addEventListener('click', function() {
464
+ // Remove active class from all options
465
+ document.querySelectorAll('.pen-option').forEach(opt => {
466
+ opt.classList.remove('border-blue-300');
467
+ opt.classList.add('border-transparent');
468
+ });
469
+
470
+ // Add active class to selected option
471
+ this.classList.add('border-blue-300');
472
+ this.classList.remove('border-transparent');
473
+
474
+ // Update current pen
475
+ currentPen = this.dataset.pen;
476
+ document.getElementById('currentPen').textContent =
477
+ currentPen === 'nastaliq' ? 'نستعلیق' :
478
+ currentPen === 'shekasteh' ? 'شکسته' : 'ثلث';
479
+ });
480
+ });
481
+
482
+ // Set first pen as active by default
483
+ document.querySelector('.pen-option').click();
484
+
485
+ // Ink color selection
486
+ document.querySelectorAll('.ink-color').forEach(color => {
487
+ color.addEventListener('click', function() {
488
+ currentColor = this.dataset.color;
489
+ document.getElementById('currentColor').style.backgroundColor = currentColor;
490
+ });
491
+ });
492
+
493
+ // Set black as default color
494
+ document.querySelector('.ink-color').click();
495
+
496
+ // Pen size
497
+ document.getElementById('penSize').addEventListener('input', function() {
498
+ currentSize = parseInt(this.value);
499
+ });
500
+
501
+ // Quick phrases
502
+ document.querySelectorAll('.quick-phrase').forEach(phrase => {
503
+ phrase.addEventListener('click', function() {
504
+ // Clear canvas
505
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
506
+
507
+ // Draw the phrase
508
+ ctx.font = `bold ${canvas.width / 8}px 'Noto Nastaliq Urdu'`;
509
+ ctx.fillStyle = currentColor;
510
+ ctx.textAlign = 'center';
511
+ ctx.textBaseline = 'middle';
512
+ ctx.fillText(this.dataset.phrase, canvas.width / 2, canvas.height / 2);
513
+
514
+ // Save to history
515
+ saveDrawingState();
516
+ });
517
+ });
518
+
519
+ // Action buttons
520
+ document.getElementById('clearCanvas').addEventListener('click', clearCanvas);
521
+ document.getElementById('saveCanvas').addEventListener('click', saveCanvas);
522
+ document.getElementById('undoAction').addEventListener('click', undo);
523
+ document.getElementById('redoAction').addEventListener('click', redo);
524
+
525
+ // Keyboard shortcuts
526
+ document.addEventListener('keydown', function(e) {
527
+ // Ctrl+Z for undo
528
+ if (e.ctrlKey && e.key === 'z') {
529
+ e.preventDefault();
530
+ undo();
531
+ }
532
+
533
+ // Ctrl+Y for redo
534
+ if (e.ctrlKey && e.key === 'y') {
535
+ e.preventDefault();
536
+ redo();
537
+ }
538
+ });
539
+ });
540
+ </script>
541
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=amirpoorazima/persian-calligraphy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
542
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Persian calligraphy app