<meta name='viewport' content='width=device-width, initial-scale=1'/><!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>قم بأضافة لمسة جذابة لأعلانك</title>
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>قم بأضافة لمسة جذابة لأعلانك👻</h1>

    <h4>عدد الزوار</h4>
<!-- عداد الزوار الجديد -->
<div class="counter-container">
    <div id="sfchwzk2aytutsrl3zmj7nfaaga2jbc8m3d"></div>
</div>

<script type="text/javascript" src="https://counter6.optistats.ovh/private/counter.js?c=hwzk2aytutsrl3zmj7nfaaga2jbc8m3d&down=async" async></script>

<style>
/* تنسيق لتوسيط العداد */
.counter-container {
    text-align: center;
    margin-top: 10px; /* مسافة صغيرة بعد العنوان */
}
</style>
    
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>عداد زيارات الصفحة</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
    }
    #visitor-counter {
      font-size: 10px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1></h1>
</body>
</html>
    
    <!-- حقل رفع الصورة -->
    <div class="form-group">
      <label for="imageLoader">رفع الصورة للتعديل عليها:</label>
      <input type="file" id="imageLoader" accept="image/*">
    </div>
    
    <!-- حقول بيانات السيارة مع إعدادات النص -->
    <h3>بيانات السيارة</h3>
    
    <!-- حقل 1: اسم السيارة -->
    <div class="field-wrapper" data-index="0">
      <label>اسم السيارة:</label>
      <div class="inline-group">
        <input type="text" class="field-text" placeholder="أدخل اسم السيارة">
      </div>
      <div class="color-group inline-group">
        <label>لون النص:</label>
        <input type="color" class="field-textColor" value="#ffffff">
      </div>
      <div class="color-group inline-group">
        <label>لون خلفية النص:</label>
        <input type="color" class="field-bgColor" value="#00a4dd">
      </div>
    </div>
    
    <!-- حقل 2: موديل السيارة -->
    <div class="field-wrapper" data-index="1">
      <label>موديل السيارة:</label>
      <div class="inline-group">
        <input type="text" class="field-text" placeholder="أدخل موديل السيارة">
      </div>
      <div class="color-group inline-group">
        <label>لون النص:</label>
        <input type="color" class="field-textColor" value="#ffffff">
      </div>
      <div class="color-group inline-group">
        <label>لون خلفية النص:</label>
        <input type="color" class="field-bgColor" value="#000000">
      </div>
    </div>
    
    <!-- حقل 3: وصف السيارة (حجم الحقل مزدوج) -->
    <div class="field-wrapper" data-index="2">
      <label>وصف السيارة:</label>
      <div class="inline-group">
        <textarea class="field-text" placeholder="أدخل وصف السيارة"></textarea>
      </div>
      <div class="color-group inline-group">
        <label>لون النص:</label>
        <input type="color" class="field-textColor" value="#000000">
      </div>
      <div class="color-group inline-group">
        <label>لون خلفية النص:</label>
        <input type="color" class="field-bgColor" value="#f7ec00">
      </div>
    </div>
    
    <!-- حقل 4: سعر السيارة -->
    <div class="field-wrapper" data-index="3">
      <label>سعر السيارة:</label>
      <div class="inline-group">
        <input type="text" class="field-text" placeholder="أدخل سعر السيارة">
      </div>
      <div class="color-group inline-group">
        <label>لون النص:</label>
        <input type="color" class="field-textColor" value="#ffffff">
      </div>
      <div class="color-group inline-group">
        <label>لون خلفية النص:</label>
        <input type="color" class="field-bgColor" value="#f70000">
      </div>
    </div>
    
    <!-- حقل 5: رقم هاتف التواصل -->
    <div class="field-wrapper" data-index="4">
      <label>رقم هاتف التواصل:</label>
      <div class="inline-group">
        <input type="text" class="field-text" placeholder="أدخل رقم الهاتف">
      </div>
      <div class="color-group inline-group">
        <label>لون النص:</label>
        <input type="color" class="field-textColor" value="#ffffff">
      </div>
      <div class="color-group inline-group">
        <label>لون خلفية النص:</label>
        <input type="color" class="field-bgColor" value="#a61bc3">
      </div>
    </div>
    
    <!-- اختيار الحقل النشط لتحريك النص -->
    <div class="form-group">
      <label for="activeField">اختر الحقل لتحريك نصه:</label>
      <select id="activeField">
        <option value="0">اسم السيارة</option>
        <option value="1">موديل السيارة</option>
        <option value="2">وصف السيارة</option>
        <option value="3">سعر السيارة</option>
        <option value="4">رقم الهاتف</option>
      </select>
    </div>
    
    <!-- محاذاة النص -->
    <div class="form-group">
      <label for="textAlign">محاذاة النص:</label>
      <select id="textAlign">
        <option value="center">توسيط</option>
        <option value="left">يسار</option>
        <option value="right">يمين</option>
      </select>
    </div>
    
    <!-- أزرار تحريك النص (خطوة 5 بكسل لكل نقرة) -->
    <div id="controls">
      <button id="upBtn">▲</button>
      <button id="downBtn">▼</button>
      <button id="leftBtn">◀</button>
      <button id="rightBtn">▶</button>
    </div>
    
    <!-- التحكم في حجم الخط -->
    <div id="fontControls">
      <button id="increaseFont">تكبير الخط</button>
      <button id="decreaseFont">تصغير الخط</button>
    </div>
    
    <!-- زر تحميل الصورة -->
    <button id="downloadBtn" class="download-btn">تحميل الصورة</button>
    
    <!-- منطقة المعاينة -->
    <div id="canvasContainer">
      <canvas id="canvas"></canvas>
    </div>
  </div>
  <div id="whatsapp-button">
  <a href="https://wa.me/971508730379?text=هل%20تريد%20ارسال%20الصورة%20الى%20هذا%20الرقم؟" target="_blank">
    <button>أضغط هنا الأرسال الاعلان في الوت ساب</button>
  </a>
</div>
  <script src="script.js"></script>
<div id="copyright">
  <p>حقوق الطبع محفوظة لدى سمسار الإمارات</p>
  <p>vtc.smsar 👻</p>
  <p>2025</p>
</div>
</body>
</html><style>body {
  font-family: Tajawal, sans-serif;
  direction: rtl;
  background: #F3FB0F;
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 1100px;
  margin: auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

h1{
  text-align: center;
  color: #333;
    font-size: 15px; /* ضع الحجم الذي تريده هنا */
  background-color: #ffeb3b;
  color: #000000;
}
h3{
  text-align: center;
  color: #333;
    font-size: 19px; /* ضع الحجم الذي تريده هنا */
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.field-wrapper {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}

/* المجموعة التي تحتوي على الإدخالات ولون الخلفية */
.inline-group {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

input[type="text"],
input[type="number"],
textarea {
  width: 250px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* إضافة نمط لحقل رفع الملف */
input[type="file"] {
  width: 250px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* جعل حقل وصف السيارة أكبر (مضاعفة الارتفاع) */
.field-wrapper[data-index="2"] textarea {
  height: 120px;
}

textarea {
  resize: vertical;
}

.color-group {
  margin-top: 5px;
}

.color-group label {
  font-weight: normal;
  margin-right: 5px;
}

#controls, #fontControls {
  text-align: center;
  margin-top: 10px;
}

#controls button, #fontControls button {
  padding: 8px 12px;
  margin: 5px;
  font-size: 16px;
  cursor: pointer;
}

#canvasContainer {
  text-align: center;
  margin-top: 20px;
}

canvas {
  border: 1px solid #ccc;
  max-width: 100%;
}

.download-btn {
  margin-top: 15px;
  display: block;
  padding: 10px 15px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 200px;
  margin: 15px auto;
  font-size: 16px;
}
#copyright {
  text-align: center;
  font-size: 14px;
  color: #555;
  margin-top: 20px;
}

#copyright p {
  margin: 5px 0;
}

#whatsapp-button {
  margin-top: 20px;
  text-align: center;
}

#whatsapp-button button {
  font-size: 16px;
  color: #fff;
  background-color: #25D366;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
}

#whatsapp-button button:hover {
  background-color: #1DA057;
}</style><script>const imageLoader = document.getElementById('imageLoader');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// الحصول على حقول مواصفات السيارة
const fieldWrappers = document.querySelectorAll('.field-wrapper');
// تخزين بيانات الحقول: النص، لون النص، لون الخلفية، إحداثيات الرسم، حجم الخط، والمحاذاة
const fieldsData = [
  { text: '', textColor: '#ffffff', bgColor: '#00a4dd', x: 70, y: 50, fontSize: 50, align: 'center' },
  { text: '', textColor: '#ffffff', bgColor: '#000000', x: 70, y: 100, fontSize: 50, align: 'center' },
  { text: '', textColor: '#000000', bgColor: '#f7ec00', x: 70, y: 150, fontSize: 50, align: 'center' },
  { text: '', textColor: '#ffffff', bgColor: '#f70000', x: 70, y: 200, fontSize: 50, align: 'center' },
  { text: '', textColor: '#ffffff', bgColor: '#a61bc3', x: 70, y: 250, fontSize: 50, align: 'center' }
];
const activeFieldSelect = document.getElementById('activeField');
const textAlignSelect = document.getElementById('textAlign');

// أزرار تحريك النص وحجم الخط
const upBtn = document.getElementById('upBtn');
const downBtn = document.getElementById('downBtn');
const leftBtn = document.getElementById('leftBtn');
const rightBtn = document.getElementById('rightBtn');
const increaseFontBtn = document.getElementById('increaseFont');
const decreaseFontBtn = document.getElementById('decreaseFont');
const downloadBtn = document.getElementById('downloadBtn');

let img = new Image();
let imageLoaded = false;

// تحميل الصورة
imageLoader.addEventListener('change', function(e) {
  if (e.target.files && e.target.files[0]) {
    const reader = new FileReader();
    reader.onload = function(event) {
      img.onload = function() {
        imageLoaded = true;
        canvas.width = img.width;
        canvas.height = img.height;
        drawCanvas();
      }
      img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
  }
});

// تحديث بيانات كل حقل من عناصر الإدخال
fieldWrappers.forEach((wrapper, index) => {
  const textInput = wrapper.querySelector('.field-text');
  const colorInput = wrapper.querySelector('.field-textColor');
  const bgColorInput = wrapper.querySelector('.field-bgColor');

  // عند تغيير النص
  textInput.addEventListener('input', () => {
    fieldsData[index].text = textInput.value;
    drawCanvas();
  });
  // عند تغيير لون النص
  colorInput.addEventListener('input', () => {
    fieldsData[index].textColor = colorInput.value;
    drawCanvas();
  });
  // عند تغيير لون الخلفية مع إزالة المسافات
  bgColorInput.addEventListener('input', () => {
    fieldsData[index].bgColor = bgColorInput.value.replace(/\s+/g, '');
    drawCanvas();
  });
});

// تغيير المحاذاة عند اختيارها
textAlignSelect.addEventListener('change', () => {
  const index = parseInt(activeFieldSelect.value);
  fieldsData[index].align = textAlignSelect.value;
  drawCanvas();
});

// دالة رسم الصورة والنصوص على الـ Canvas
function drawCanvas() {
  if (!imageLoaded) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
     "20px Arial";
    ctx.fillStyle = "#888";
    ctx.textAlign = "center";
    ctx.fillText("الرجاء رفع صورة للتعديل", canvas.width / 2 || 300, canvas.height / 2 || 150);
    return;
  }
  // رسم الصورة
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0);
// إضافة العلامة المائية
const watermarkText = "👻vtc.smsar"; // النص الذي نريد إضافته كعلامة مائية
const fontSize = 40; // حجم الخط
const margin = 20; // المسافة من الحواف

ctx.font = `${fontSize}px Arial`;
ctx.textAlign = "right";
ctx.fillStyle = "white";

// حساب أبعاد النص
const textMetrics = ctx.measureText(watermarkText);
const textWidth = textMetrics.width;
const textHeight = fontSize;

// تحديد الموضع العلوي الأيمن
const x = canvas.width - margin;
const y = margin + textHeight;

// رسم خلفية بيضاء للنص
ctx.fillRect(x - textWidth - 5, y - textHeight, textWidth + 10, textHeight + 5);

// رسم النص الأسود فوق الخلفية
ctx.fillStyle = "black";
ctx.fillText(watermarkText, x, y);
  // رسم نصوص الحقول الخمسة
  fieldsData.forEach((field, index) => {
    if (field.text.trim() !== "") {
      
// التحقق مما إذا كان النص يحتوي على أرقام فقط
const isNumber = /^[0-9]+$/.test(field.text.trim());
ctx.font = `${isNumber ? " 900" : "normal"} ${field.fontSize}px "Tajawal", sans-serif`;      ctx.textAlign = field.align;
      const padding = 22;

      // إذا كان الحقل رقم 3 (وصف السيارة) نقوم بلف النص
      if (index === 2) {
        // تحديد الحد الأقصى للعرض؛ يمكن تعديله بحسب الحاجة
        const maxWidth = canvas.width - 200;
        const lineHeight = field.fontSize * 1.6;
        const lines = getWrappedText(ctx, field.text, maxWidth);
        lines.forEach((line, i) => {
          const textMetrics = ctx.measureText(line);
          const textWidth = textMetrics.width;
          let rectX;
          if (field.align === "center") {
            rectX = field.x - textWidth / 2 - padding;
          } else if (field.align === "left") {
            rectX = field.x - padding;
          } else { // right
            rectX = field.x - textWidth - padding;
          }
          const lineY = field.y + i * lineHeight;
          // رسم خلفية السطر بزوايا منحنية
          ctx.beginPath();
          ctx.roundRect(rectX, lineY - field.fontSize, textWidth + padding * 3, field.fontSize + padding * 3, 10);
          ctx.fillStyle = field.bgColor;
          ctx.fill();
          // رسم النص
          ctx.fillStyle = field.textColor;
          ctx.fillText(line, field.x, lineY + padding);
        });
      } else {
        // للرسم العادي (الحقل 1، 2، 4، 5)
        const textMetrics = ctx.measureText(field.text);
        const textWidth = textMetrics.width;
        let rectX;
        if (field.align === "center") {
          rectX = field.x - textWidth / 2 - padding;
        } else if (field.align === "left") {
          rectX = field.x - padding;
        } else { // right
          rectX = field.x - textWidth - padding;
        }
        // رسم خلفية النص بزوايا منحنية
        ctx.beginPath();
        ctx.roundRect(rectX, field.y - field.fontSize, textWidth + padding * 3, field.fontSize + padding * 3, 10);
        ctx.fillStyle = field.bgColor;
        ctx.fill();
        ctx.fillStyle = field.textColor;
        ctx.fillText(field.text, field.x, field.y + padding);
      }
    }
  });
}

// دالة لفك لف النص بحسب العرض المحدد
function getWrappedText(ctx, text, maxWidth) {
  const words = text.split(' ');
  const lines = [];
  let currentLine = words[0];

  for (let i = 1; i < words.length; i++) {
    const word = words[i];
    const width = ctx.measureText(currentLine + " " + word).width;
    if (width < maxWidth) {
      currentLine += " " + word;
    } else {
      lines.push(currentLine);
      currentLine = word;
    }
  }
  lines.push(currentLine);
  return lines;
}

// دالة تحريك النص للحقل النشط (خطوة 5 بكسل لكل نقرة)
function moveActiveField(dx, dy) {
  const index = parseInt(activeFieldSelect.value);
  fieldsData[index].x += dx;
  fieldsData[index].y += dy;
  drawCanvas();
}

upBtn.addEventListener('click', () => moveActiveField(0, -50));
downBtn.addEventListener('click', () => moveActiveField(0, 50));
leftBtn.addEventListener('click', () => moveActiveField(-90, 0));
rightBtn.addEventListener('click', () => moveActiveField(90, 0));

// التحكم في حجم الخط للحقل النشط
increaseFontBtn.addEventListener('click', () => {
  const index = parseInt(activeFieldSelect.value);
  fieldsData[index].fontSize += 10;
  drawCanvas();
});
decreaseFontBtn.addEventListener('click', () => {
  const index = parseInt(activeFieldSelect.value);
  if (fieldsData[index].fontSize > 10) {
    fieldsData[index].fontSize -= 10;
    drawCanvas();
  }
});

// زر تحميل الصورة بعد التعديل
downloadBtn.addEventListener('click', function() {
  if (!imageLoaded) {
    alert("الرجاء رفع صورة أولاً!");
    return;
  }
  const link = document.createElement('a');
  link.download = 'car_specification.png';
  link.href = canvas.toDataURL();
  link.click();
});</script>