Murtada1/image-editor
0
1<!DOCTYPE html>2<html lang="ar" 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 <link rel="stylesheet" href="style.css">8 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>9</head>10<body>11 12<div class="topbar">13 <button class="btn-green" onclick="download()">📥 حفظ الصورة</button>14 15 <input type="file" id="uploadInput" accept="image/*" style="display: none;" onchange="handleImageUpload(event)">16 <button class="btn-blue" onclick="document.getElementById('uploadInput').click()">📤 رفع صورة</button>17 18 <button onclick="undo()">↩️ تراجع</button>19 <button onclick="redo()">↪️ إعادة</button>20</div>21 22<div class="container">23 <div class="sidebar right-sidebar">24 <h3>الأدوات</h3>25 26 <div class="color-picker-container">27 <label for="colorPicker">اللون:</label>28 <input type="color" id="colorPicker" value="#000000">29 </div>30 31 <button onclick="addText()">📝 نص</button>32 <button id="drawBtn" onclick="enableDraw()">🖌️ فرشاة</button>33 <button id="moveBtn" onclick="disableDraw()" class="active-tool">🖱️ تحريك</button>34 <button onclick="rotate()">🔄 تدوير</button>35 <button class="btn-red" onclick="remove()">🗑️ حذف</button>36 </div>37 38 <div class="workspace">39 <div class="canvas-container-wrapper">40 <canvas id="canvas"></canvas>41 </div>42 </div>43 44 <div class="sidebar left-sidebar">45 <h3>الطبقات</h3>46 <ul id="layerList"></ul>47 </div>48</div>49 50<script src="app.js"></script>51 52</body>53</html>54 