|
<!DOCTYPE html> |
|
<html lang="ar"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>تحرير الصور</title> |
|
<link rel="stylesheet" href="styles.css"> |
|
</head> |
|
<body> |
|
<div id="main-container"> |
|
<div id="container"> |
|
<div class="image-preview-container"> |
|
<div class="image-preview"> |
|
<h3>الصورة الشفافة</h3> |
|
<div class="image-wrapper"> |
|
<img id="overlay-image1" src="ps.png" alt="Overlay Image"> |
|
<img id="profile-image1" src="" alt="Profile Image" crossorigin="anonymous"> |
|
<div id="hashtag1" class="hashtag"></div> |
|
</div> |
|
</div> |
|
<div class="image-preview"> |
|
<h3>الصورة الدائرية</h3> |
|
<div class="image-wrapper"> |
|
<img id="overlay-image2" src="ps.png" alt="Overlay Image"> |
|
<img id="profile-image2" src="" alt="Profile Image" crossorigin="anonymous"> |
|
<div id="hashtag2" class="hashtag"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<input type="text" id="username-input" placeholder="أدخل اسم مستخدم تويتر" dir="ltr"> |
|
<div class="buttons-container"> |
|
<button class="twitter-btn" onclick="loadTwitterImage()">Twitter / X</button> |
|
<button class="upload-btn" onclick="document.getElementById('file-input').click()">تحميل صورة</button> |
|
<button class="download-btn" onclick="downloadImage('transparent')">تحميل الصورة الشفافة</button> |
|
<button class="download-btn" onclick="downloadImage('circle')">تحميل الصورة الدائرية</button> |
|
</div> |
|
<div id="hashtag-options"> |
|
<label for="hashtag-select">اختر هاشتاج:</label> |
|
<select id="hashtag-select" onchange="updateHashtag()"> |
|
<option value="#StandWithPalestine">#StandWithPalestine</option> |
|
<option value="#FreePalestine">#FreePalestine</option> |
|
<option value="#PalestineWillBeFree">#PalestineWillBeFree</option> |
|
<option value="#SavePalestine">#SavePalestine</option> |
|
<option value="#PalestineUnderAttack">#PalestineUnderAttack</option> |
|
</select> |
|
</div> |
|
<div id="loading">جاري تحميل الصورة...</div> |
|
<div id="success-message">تم تحميل الصورة بنجاح!</div> |
|
<input type="file" id="file-input" style="display:none;" onchange="handleImageUpload(event)" accept="image/*"> |
|
</div> |
|
</div> |
|
<script src="script.js"></script> |
|
</body> |
|
</html> |
