<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>اتصل بنا - روزانا</title>
<style>
/* عزل كامل داخل المكوّن */
#rz-contact, #rz-contact * { box-sizing: border-box; }
#rz-contact{
--red:#dc2626; --red-dark:#b91c1c;
--green:#22c55e; --green-hover:#16a34a;
--bg:#f8fafc; --text:#1e293b; --muted:#64748b; --white:#fff; --border:#e2e8f0;
--radius:14px; --shadow:0 4px 16px rgba(0,0,0,.08);
font-family:"Segoe UI", Tahoma, sans-serif; color:var(--text);
}
#rz-contact .container{ max-width:880px; margin:40px auto; padding:0 16px; }
#rz-contact .header{ text-align:center; margin-bottom:30px; }
#rz-contact .header h1{ margin:0; font-size:28px; color:var(--red); font-weight:900; }
#rz-contact .header p{ margin:6px 0 0; color:var(--muted); font-size:15px; }
#rz-contact .card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; }
#rz-contact form{ display:grid; gap:18px; }
#rz-contact .grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:680px){ #rz-contact .grid{ grid-template-columns:1fr; } }
#rz-contact label{ font-size:14px; font-weight:600; margin-bottom:6px; display:block; }
#rz-contact .req{ color:var(--red); }
#rz-contact input,
#rz-contact textarea,
#rz-contact .file-input{
width:100%; border:1px solid var(--border); border-radius:var(--radius);
padding:12px 14px; font-size:15px; background:#fff; color:var(--text);
outline:none; transition:border-color .2s, box-shadow .2s;
}
#rz-contact input:focus,
#rz-contact textarea:focus,
#rz-contact .file-input:focus{ border-color:var(--red); box-shadow:0 0 0 3px #fee2e2; }
#rz-contact textarea{ min-height:200px; resize:vertical; line-height:1.6; }
/* المرفقات */
#rz-contact .file-wrap{ display:grid; gap:8px; }
#rz-contact .file-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#rz-contact .file-input{ padding:10px; cursor:pointer; }
#rz-contact .file-hint{ font-size:12px; color:var(--muted); }
#rz-contact .file-error{ font-size:13px; color:#b91c1c; display:none; }
#rz-contact .file-error.show{ display:block; }
#rz-contact .preview{
display:none; align-items:center; gap:10px; margin-top:6px;
padding:8px; border:1px dashed var(--border); border-radius:12px;
}
#rz-contact .preview.show{ display:flex; }
#rz-contact .preview img{
width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid var(--border);
}
#rz-contact .preview .meta{ font-size:12px; color:var(--muted); }
/* الأزرار الصغيرة المتجاوبة */
#rz-contact .actions{
display:flex; flex-wrap:wrap; gap:10px; margin-top:6px;
}
#rz-contact .btn-primary,
#rz-contact .btn-whatsapp{
flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
border:none; border-radius:12px;
padding:10px 14px; /* أصغر من السابق */
font-size:14px; /* أصغر من السابق */
font-weight:800; cursor:pointer;
transition:background .2s, transform .1s; color:#fff !important; text-decoration:none;
min-height:40px; /* ارتفاع مناسب للمس */
line-height:1; /* تماسك النص مع الأيقونة */
}
#rz-contact .btn-primary svg,
#rz-contact .btn-whatsapp svg{
width:18px; height:18px; fill:#fff; /* أيقونة أصغر */
flex-shrink:0;
}
#rz-contact .btn-primary{ background:var(--red); box-shadow:0 3px 10px rgba(220,38,38,.22); }
#rz-contact .btn-primary:hover{ background:var(--red-dark); }
#rz-contact .btn-primary:active{ transform:scale(.98); }
#rz-contact .btn-whatsapp{ background:var(--green); box-shadow:0 3px 10px rgba(34,197,94,.25); }
#rz-contact .btn-whatsapp:hover{ background:var(--green-hover); }
#rz-contact .btn-whatsapp:active{ transform:scale(.98); }
/* تحسين إضافي للشاشات الصغيرة جدًا */
@media (max-width:400px){
#rz-contact .btn-primary,
#rz-contact .btn-whatsapp{
padding:9px 12px;
font-size:13px;
gap:6px;
min-height:38px;
}
#rz-contact .btn-primary svg,
#rz-contact .btn-whatsapp svg{
width:16px; height:16px;
}
}
#rz-contact .hint{ font-size:13px; color:var(--muted); }
#rz-contact #formStatus{ display:none; font-size:14px; margin-top:10px; }
#rz-contact #formStatus.ok{ color:green; }
#rz-contact #formStatus.err{ color:var(--red); }
</style>
</head>
<body>
=1024 && i0?num.toFixed(1):Math.round(num))+' '+units[i];
}
if(input){
input.addEventListener('change', function(){
if(err){ err.textContent=''; err.classList.remove('show'); }
if(preview) preview.classList.remove('show');
if(img) img.removeAttribute('src');
const file = input.files && input.files[0];
if(!file) return;
if(file.size > MAX){
if(err){ err.textContent='حجم الملف يتجاوز 5MB.'; err.classList.add('show'); }
input.value=''; return;
}
if(!file.type || !file.type.startsWith('image/')){
if(err){ err.textContent='الرجاء إرفاق صورة.'; err.classList.add('show'); }
input.value=''; return;
}
if(nameEl) nameEl.textContent='الملف: '+(file.name||'');
if(sizeEl) sizeEl.textContent='الحجم: '+formatSize(file.size);
try{
const url=URL.createObjectURL(file);
if(img) img.src=url;
if(preview) preview.classList.add('show');
}catch(_){ if(preview) preview.classList.add('show'); }
});
}
if(form){
form.addEventListener('submit', function(e){
if(!form.checkValidity()){
e.preventDefault();
if(status){
status.textContent='تحقق من الحقول المطلوبة.';
status.className='err'; status.style.display='block';
}
}else{
if(status){
status.textContent='جارٍ الإرسال...';
status.className='ok'; status.style.display='block';
}
}
});
}
})();
</body>
</html>
تواصل معنا
يمكنك إرسال رسالة عبر النموذج أو مراسلتنا على الواتساب مباشرة
<form id="contactForm" action="https://formsubmit.co/[email protected]" method="POST" enctype="multipart/form-data" novalidate>
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_template" value="table">
<input type="hidden" name="_subject" value="رسالة جديدة من موقع روزانا">
<input type="hidden" name="_next" value="#">
<input type="text" name="_honey" style="display:none" tabindex="-1" autocomplete="off">
![معاينة المرفق]()
<input type="text" id="name" name="name" required placeholder="مثال: سارة السبيعي" autocomplete="name">
<input type="email" id="email" name="email" required placeholder="[email protected]" dir="ltr" autocomplete="email">
<input type="text" id="subject" name="subject" required placeholder="موضوع الرسالة">
<input type="tel" id="phone" name="phone" placeholder="05xxxxxxxx" inputmode="tel" dir="ltr">
<textarea id="message" name="message" required placeholder="اكتب رسالتك هنا..."></textarea>
<input
type="file" id="attachment" name="attachment"
class="file-input"
accept="image/*,.heic,.heif"
aria-describedby="fileHint fileError"
>
الصيغ المسموحة: JPG, PNG, WEBP, HEIC — الحد الأقصى 5MB.
<button type="submit" class="btn-primary" aria-label="إرسال الرسالة بالبريد">
<svg viewBox="0 0 24 24" aria-hidden="true">
* جميع الحقول المطلوبة يجب تعبئتها
</form>