Шаг 48: Итоговый мини‑проект: карточка курса с доступом

Собираем всё вместе: HTML‑вёрстка, CSS‑стили, JS‑интерактив, PHP‑логика доступа и цены. Это прототип блока курса для онлайн‑школы.

Код примера

<style>
  .course-block { border: 1px solid #ccc; padding: 20px; border-radius: 8px; max-width: 400px; font-family: system-ui; }
  .price { font-weight: bold; color: #8c6dd1; font-size: 1.2rem; }
  .btn { padding: 10px 16px; background: #8c6dd1; color: white; border: none; border-radius: 6px; cursor: pointer; }
  .btn:disabled { background: #ccc; }
</style>

<div class="course-block">
  <h3 id="cTitle">Курс "PHP для онлайн‑школы"</h3>
  <p id="cDesc">Научим писать безопасный бэкенд: PDO, сессии, валидация, защита от спама.</p>
  <div class="price" id="cPrice">5900 ₽</div>
  <button id="cBtn">Записаться</button>
  <p id="cMsg" style="margin-top:10px; color:#666;"></p>
</div>

<script>
  const btn = document.getElementById("cBtn");
  btn.addEventListener("click", () => {
    btn.disabled = true;
    btn.textContent = "Заявка отправлена";
    document.getElementById("cMsg").textContent = "Мы свяжемся с вами для подтверждения.";
  });
</script>

<?php
// PHP‑часть: эмуляция статуса доступа
$now = time();
$trialEnd = strtotime("+7 days");
if ($now < $trialEnd) {
  echo '<p style="color:#2e7d32; font-weight:bold;">У вас действует пробный период (7 дней)</p>';
} else {
  echo '<p style="color:#d32f2f; font-weight:bold;">Пробный период завершён — требуется оплата</p>';
}
?>