التصميم المتمحور حول المستخدم User-Centered Design

<link rel="stylesheet" href="styles.css">

<div class="progressive-disclosure">
  <button id="show-details-btn" aria-expanded="false" aria-controls="extra-content">
    عرض المزيد من التفاصيل
  </button>
  <div id="extra-content" class="hidden" tabindex="-1">
    <p>
      إليك تفاصيل إضافية لا تظهر إلا عندما ترغب في رؤيتها.
وهذا يحافظ على واجهة نظيفة ويقلل من العبء الإدراكي.
    </p>
  </div>
</div>

<script src="index.js"></script>
            

.progressive-disclosure {
  font-family: sans-serif;
  max-width: 400px;
  margin: 20px auto;
}

#show-details-btn {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#show-details-btn:hover,
#show-details-btn:focus {
  background-color: #0056b3;
  outline: none;
}

.hidden {
  display: none;
}

#extra-content {
  margin-top: 15px;
  padding: 10px;
  background-color: #f7f9fcff;
  border: 1px solid #ddd;
  border-radius: 5px;
}
            

const btn = document.getElementById('show-details-btn');
const content = document.getElementById('extra-content');

btn.addEventListener('click', () => {
  const isHidden = content.classList.toggle('hidden');
  btn.setAttribute('aria-expanded', !isHidden);

  if (!isHidden) {
    content.focus();
  }
});
            

<link rel="stylesheet" href="styles.css">

<div class="product-list">
  <div class="product" tabindex="0" aria-expanded="false" aria-controls="details-1">
    <img src="https://placehold.co/150x150" alt="Example Product Image" />

    <button class="details-btn" aria-label="Show more details for Product 1">مزيد من التفاصيل</button>
    <div id="details-1" class="product-details hidden" tabindex="-1">
      <p><strong>المنتج 1:</strong> هذا منتج رائع يتمتع بمزايا مذهلة ستنال إعجابك.</p>
      <ul>
        <li>الميزة أ</li>
        <li>الميزة ب</li>
        <li>الميزة ج</li>
      </ul>
    </div>
  </div>

  <div class="product" tabindex="0" aria-expanded="false" aria-controls="details-2">
    <img src="https://placehold.co/150x150" alt="Example Product Image" />

    <button class="details-btn" aria-label="Show more details for Product 2">مزيد من التفاصيل</button>
    <div id="details-2" class="product-details hidden" tabindex="-1">
      <p><strong>المنتج 2:</strong> منتج رائع آخر يتمتع بفوائد عديدة لاستخدامك اليومي.</p>
      <ul>
        <li>الفائدة 1</li>
        <li>الفائدة 2</li>
        <li>الفائدة 3</li>
      </ul>
    </div>
  </div>
</div>

<script src="index.js"></script>
            

.product-list {
font-family: sans-serif;
display: flex;
gap: 20px;
max-width: 800px;
margin: 20px auto;
flex-wrap: wrap;
}

.product {
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
width: 180px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
position: relative;
}

.product img {
width: 100%;
border-radius: 6px;
cursor: pointer;
display: block;
margin-bottom: 8px;
}

.details-btn {
background-color: #007bff;
border: none;
color: white;
padding: 6px 12px;
font-size: 0.9rem;
border-radius: 5px;
cursor: pointer;
width: 100%;
transition: background-color 0.3s ease;
}

.details-btn:hover,
.details-btn:focus {
background-color: #0056b3;
outline: none;
}

.product-details {
margin-top: 10px;
background-color: #f7f9fc;
border: 1px solid #ddd;
border-radius: 6px;
padding: 8px;
font-size: 0.9rem;
}

.hidden {
display: none;
}
            

document.querySelectorAll('.details-btn').forEach((button) => {
  button.addEventListener('click', () => {
    const product = button.closest('.product');
    const details = product.querySelector('.product-details');
    const isHidden = details.classList.toggle('hidden');
    product.setAttribute('aria-expanded', !isHidden);

    if (!isHidden) {
      details.focus();
      button.textContent = 'Hide details';
    } else {
      button.textContent = 'More details';
    }
  });
});
            

<link rel="stylesheet" href="styles.css">

<div class="info-section">
  <h2>ملخص الطلب</h2>
  <p><strong>العناصر في عربة التسوق:</strong> 3</p>
  <p><strong>السعر الإجمالي:</strong> $75.00</p>
  <div class="advanced-options">
    <button id="toggle-advanced-btn" aria-expanded="false" aria-controls="advanced-details">
      إظهار الخيارات المتقدمة
    </button>
    <div id="advanced-details" class="hidden" tabindex="-1">
      <p>أدخل رموز القسائم، أو اختر تغليف الهدايا، أو حدد تفضيلات الشحن من هنا.</p>
      <form>
        <label for="coupon">رمز القسيمة:</label><br />
        <input type="text" id="coupon" name="coupon" /><br /><br />
        <label>
          <input type="checkbox" name="gift-wrap" /> غلّف هذا الطلب كهدية
        </label><br /><br />
        <label for="shipping">طريقة الشحن:</label><br />
        <select id="shipping" name="shipping">
          <option value="standard">قياسي (مجاني)</option>
          <option value="express">سريع (10.00 دولاراً)</option>
        </select>
      </form>
    </div>
  </div>
</div>

<script src="index.js"></script>
            

.info-section {
font-family: sans-serif;
max-width: 400px;
margin: 30px auto;
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
background-color: #fff;
}

h2 {
margin-top: 0;
}

.advanced-options {
margin-top: 20px;
}

#toggle-advanced-btn {
background-color: #007bff;
color: white;
border: none;
padding: 10px 16px;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.25s ease;
}

#toggle-advanced-btn:hover,
#toggle-advanced-btn:focus {
background-color: #0056b3;
outline: none;
}

.hidden {
display: none;
}

#advanced-details {
margin-top: 15px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #f7f9fc;
}
            

const toggleBtn = document.getElementById('toggle-advanced-btn');
const advancedDetails = document.getElementById('advanced-details');

toggleBtn.addEventListener('click', () => {
  const isHidden = advancedDetails.classList.toggle('hidden');
  toggleBtn.setAttribute('aria-expanded', !isHidden);

  if (!isHidden) {
    advancedDetails.focus();
  }
});
            

<link rel="stylesheet" href="styles.css">
<script src="index.js" defer></script>

<div class="product-preview">
  <img src="https://placehold.co/150x150" alt="Example Product Image" />

  <h3>منتج نموذجي</h3>
  <p class="price">$49.99</p>
  <button class="info-toggle" aria-expanded="false" aria-controls="product-info">
    مزيد من المعلومات
  </button>
  <div id="product-info" class="product-info hidden" tabindex="-1">
    <p>هذا المنتج مصنوع من مواد عالية الجودة ويأتي مع ضمان لمدة عامين. وهو مثالي للاستخدام اليومي.</p>
    <ul>
      <li>متين وخفيف الوزن</li>
      <li>متوفر بألوان متعددة</li>
      <li>شحن مجاني مشمول</li>
    </ul>
  </div>
</div>
            

body {
font-family: sans-serif;
padding: 30px;
display: flex;
justify-content: center;
}

.product-preview {
max-width: 300px;
border: 1px solid #ccc;
padding: 16px;
border-radius: 8px;
background: #fff;
text-align: center;
}

.product-preview img {
width: 100%;
border-radius: 4px;
margin-bottom: 10px;
}

.price {
font-weight: bold;
color: #333;
margin: 10px 0;
}

.info-toggle {
background-color: #007bff;
color: white;
border: none;
padding: 10px 16px;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s ease;
}

.info-toggle:hover,
.info-toggle:focus {
background-color: #0056b3;
outline: none;
}

.product-info {
margin-top: 15px;
text-align: left;
background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 12px;
border-radius: 6px;
}

.hidden {
display: none;
}
            

const toggleBtn = document.querySelector('.info-toggle');
const infoPanel = document.getElementById('product-info');

toggleBtn.addEventListener('click', () => {
  const isHidden = infoPanel.classList.toggle('hidden');
  toggleBtn.setAttribute('aria-expanded', !isHidden);
  toggleBtn.textContent = isHidden ? 'مزيد من المعلومات' : 'إخفاء المعلومات';

  if (!isHidden) {
    infoPanel.focus();
  }
});