1. بطاقة تعريف حديثة

مطور واجهات

بطاقة تعريف أنيقة وعملية

تواصل الآن

<div class="card modern-card">
  <img src="https://placekitten.com/600/240" alt="صورة">
  <h3>مطور واجهات</h3>
  <p>بطاقة تعريف أنيقة وعملية</p>
  <button class="btn">تواصل الآن</button>
</div>

.card.modern-card{background:#fff;border:1px solid #e7eaf0;border-radius:12px;overflow:hidden;text-align:center}
.card.modern-card img{width:100%;display:block}
.card.modern-card h3{margin:14px 0 6px}
.card.modern-card p{margin:0 0 12px;color:#6b7280}
.card.modern-card .btn{margin-bottom:14px}

// لا يوجد جافاسكربت هنا

2. زر أنيميشن بسيط

<button class="animated-btn">اضغطني</button>

.animated-btn{padding:10px 18px;border:none;background:#e11d48;color:#fff;border-radius:8px;transition:transform .2s}
.animated-btn:hover{transform:translateY(-1px)}

// لا يوجد جافاسكربت

3. شريط تنقل

<div class="navbar">
  <a href="#">الرئيسية</a><a href="#">الدروس</a><a href="#">حول</a><a href="#">تواصل</a>
</div>

.navbar{background:#1f2937;padding:10px;border-radius:10px;display:flex;gap:12px;flex-wrap:wrap}
.navbar a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:8px}
.navbar a:hover{background:#111827}

4. مودال

<button class="btn" onclick="document.getElementById('modal').style.display='flex'">افتح المودال</button>
<div class="modal" id="modal" onclick="this.style.display='none'">
  <div class="modal-content" onclick="event.stopPropagation()">...</div>
</div>

.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);justify-content:center;align-items:center}
.modal-content{background:#fff;padding:20px;border-radius:12px;width:min(92vw,360px);text-align:center}

5. أكوردين

<button class="btn" onclick="toggleAccordion(this)">اضغط لعرض المحتوى</button>
<div class="accordion-content" style="display:none;">...</div>

.accordion-content{margin-top:10px;padding:10px;background:#f3f4f6;border-radius:8px;border:1px solid #e7eaf0}

function toggleAccordion(btn){
  const c = btn.nextElementSibling;
  c.style.display = c.style.display === 'none' ? 'block' : 'none';
}

6. تبويبات

<button class="btn" onclick="showTab('tab1')">محتوى 1</button>
<button class="btn secondary" onclick="showTab('tab2')">محتوى 2</button>
<div id="tab1" class="tab-content">...</div>
<div id="tab2" class="tab-content" style="display:none;">...</div>

.tab-content{padding:10px;background:#f3f4f6;margin-top:10px;border-radius:8px;border:1px solid #e7eaf0}

function showTab(id){
  document.querySelectorAll('.tab-content').forEach(e => e.style.display='none');
  document.getElementById(id).style.display='block';
}

7. Tooltip حديث

<div class="tooltip-wrapper">
  <span class="tooltip-target">؟</span>
  <span class="tooltip-new">معلومة مساعدة</span>
</div>

.tooltip-wrapper{position:relative;display:inline-block;font-size:18px;line-height:1}
.tooltip-target{background:#0ea5e9;color:#fff;border-radius:50%;padding:4px 10px;cursor:help}
.tooltip-new{visibility:hidden;position:absolute;bottom:125%;right:0;background:#111827;color:#fff;padding:6px 10px;border-radius:6px;white-space:nowrap;opacity:0;transition:.2s;transform:translateY(5px)}
.tooltip-wrapper:hover .tooltip-new{visibility:visible;opacity:1;transform:translateY(0)}

8. Loader

<div class="loader"></div>

.loader{border:6px solid #f3f3f3;border-top:6px solid #0ea5e9;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:auto}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

9. Flip Card

<div class="flip-card">
  <div class="flip-inner">
    <div class="flip-front">🟢 أمامي</div>
    <div class="flip-back">🔄 خلفي</div>
  </div>
</div>

.flip-card{perspective:1000px;width:220px;height:130px;margin:auto}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .6s;transform-style:preserve-3d;border-radius:10px;overflow:hidden;border:1px solid #e7eaf0}
.flip-card:hover .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;color:#fff;display:grid;place-items:center;font-size:18px}
.flip-front{background:linear-gradient(45deg,#0ea5e9,#2563eb)}
.flip-back{background:linear-gradient(45deg,#111827,#374151);transform:rotateY(180deg)}

10. زر متدرج

<button class="glow-btn">اضغطني</button>

.glow-btn{padding:10px 18px;border:none;border-radius:999px;background:linear-gradient(90deg,#3b82f6,#0ea5e9);color:#fff;cursor:pointer}

11. شبكة (Grid)

<div class="grid-container">
  <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div>
</div>

.grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.grid-item{background:#0ea5e9;color:#fff;padding:18px;text-align:center;border-radius:10px}

12. نموذج تواصل

<form onsubmit="event.preventDefault()">
  <input type="text" placeholder="الاسم" required>
  <input type="email" placeholder="البريد الإلكتروني" required>
  <textarea placeholder="رسالتك" required></textarea>
  <button class="btn" type="submit">إرسال</button>
</form>

form input,form textarea{width:100%;padding:10px;margin-bottom:10px;border:1px solid #e7eaf0;border-radius:10px;background:#fff}
form textarea{min-height:110px}
form .btn{background:#0ea5e9}

13. بطاقة بديل اجتماعي

مصمم UX/UI

متحمس لبناء تجارب مستخدم ممتازة

🐦💼📷

<div class="card modern-card">
  <img src="https://placekitten.com/600/240" alt="صورة">
  <h3>مصمم UX/UI</h3>
  <p>متحمس لبناء تجارب مستخدم ممتازة</p>
  <div class="social-icons"><a href="#">🐦</a><a href="#">💼</a><a href="#">📷</a></div>
</div>

.card .social-icons{display:flex;justify-content:center;gap:10px;margin:0 0 12px}
.social-icons a{color:#0ea5e9;font-size:20px;text-decoration:none}

14. اقتباس بسيط

<blockquote class="quote-card">
  "التعليم هو أقوى سلاح يمكنك استخدامه لتغيير العالم."
  <footer>— نيلسون مانديلا</footer>
</blockquote>

.quote-card{background:#fff;padding:18px;border-radius:12px;border-inline-start:6px solid #0ea5e9;border:1px solid #e7eaf0}
.quote-card footer{margin-top:8px;color:#6b7280}

15. عداد زمني تنازلي

<div id="countdown" class="countdown">...</div>

.countdown{font-size:28px;background:#fff;display:inline-block;padding:16px 28px;border-radius:12px;border:1px solid #e7eaf0;box-shadow:0 2px 10px rgba(0,0,0,.06);color:#7c3aed}

const endTime = Date.now() + 24*60*60*1000;
const countdown = document.getElementById('countdown');
function updateCountdown(){
  const d = endTime - Date.now();
  if (d<0){ countdown.textContent = "انتهى الوقت!"; clearInterval(t); return; }
  const days=Math.floor(d/86400000),hours=Math.floor(d%86400000/3600000),minutes=Math.floor(d%3600000/60000),seconds=Math.floor(d%60000/1000);
  countdown.textContent = `${days} يوم ${hours} ساعة ${minutes} دقيقة ${seconds} ثانية`;
}
const t=setInterval(updateCountdown,1000); updateCountdown();

16. بطاقات KPI مصغّرة

<div class="kpi-wrap">
  <div class="kpi"><div class="val">1,245</div><div class="label">زائر/اليوم</div></div>
  <div class="kpi"><div class="val">3.2%</div><div class="label">تحويل</div></div>
  <div class="kpi"><div class="val">+84</div><div class="label">مشترك جديد</div></div>
  <div class="kpi"><div class="val">4.7★</div><div class="label">تقييم</div></div>
</div>

.kpi-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.kpi{background:#fff;border:1px solid #e7eaf0;border-radius:10px;padding:12px;text-align:center}
.kpi .val{font-size:22px;font-weight:700}
.kpi .label{color:#6b7280;font-size:13px}

17. شريط خطوات (Stepper)

<div class="stepper">
  <div class="step active"><div class="dot">1</div><div class="name">المعلومات</div></div>
  <div class="step active"><div class="dot">2</div><div class="name">العنوان</div></div>
  <div class="step"><div class="dot">3</div><div class="name">الدفع</div></div>
  <div class="step"><div class="dot">4</div><div class="name">إتمام</div></div>
</div>

.stepper{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px}
.step .dot{width:26px;height:26px;border-radius:50%;background:#e7eaf0;color:#374151;display:grid;place-items:center;font-size:13px}
.step.active .dot{background:#0ea5e9;color:#fff}
.step .name{font-size:14px}
.step + .step::before{content:"";width:30px;height:2px;background:#e7eaf0;display:inline-block}

18. إشعار (Toast) بسيط

<button class="btn" onclick="showToast()">أظهر الإشعار</button>
<div id="toast" class="toast">تم حفظ الإعدادات <button class="close" onclick="hideToast()">✕</button></div>

.toast{position:fixed;bottom:18px;inset-inline:18px auto;background:#111827;color:#fff;padding:12px 14px;border-radius:10px;display:none;box-shadow:0 2px 10px rgba(0,0,0,.06);z-index:1000}
.toast.show{display:block}
.toast .close{background:transparent;border:none;color:#fff;font-size:16px;cursor:pointer;float:inline-end}

function showToast(){ const el=document.getElementById('toast'); el.classList.add('show'); setTimeout(()=>el.classList.remove('show'),3000); }
function hideToast(){ document.getElementById('toast').classList.remove('show'); }

19. بطاقات أسعار بسيطة

<div class="pricing">... بطاقات </div>

.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.plan{background:#fff;border:1px solid #e7eaf0;border-radius:12px;padding:16px;text-align:center}
.plan .price{font-size:28px;font-weight:800;margin:4px 0}
.plan ul{list-style:none;padding:0;margin:10px 0;color:#6b7280;text-align:start}
.plan li{margin:6px 0}
.plan .btn{background:#0ea5e9}
.plan.pop{border-color:#0ea5e9}

20. FAQ بدون JS (details/summary)

<div class="faq">
  <details><summary>سؤال</summary><p>إجابة</p></details>
</div>

.faq details{border:1px solid #e7eaf0;border-radius:10px;padding:10px;background:#fff}
.faq details + details{margin-top:8px}
.faq summary{cursor:pointer;font-weight:600}