You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
Fakel-Gym/template-parts/la-components/modals/modal-club-card.php

90 lines
4.4 KiB

<div class="bg-white max-w-lg w-full rounded-[8px]">
<div class="p-[24px]">
<h2 class="text-[24px] font-bold text-gray-900 mb-[16px]">
Заказать клубную карту
</h2>
<form class="space-y-[16px]">
<div>
<label for="name" class="block text-[14px] font-medium text-gray-700 mb-[8px]">
Имя *
</label>
<input type="text"
id="name"
name="name"
required
class="w-full px-[12px] py-[8px] border border-gray-300 rounded-[6px] focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="email" class="block text-[14px] font-medium text-gray-700 mb-[8px]">
Email *
</label>
<input type="email"
id="email"
name="email"
required
class="w-full px-[12px] py-[8px] border border-gray-300 rounded-[6px] focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="phone" class="block text-[14px] font-medium text-gray-700 mb-[8px]">
Телефон *
</label>
<input type="tel"
id="phone"
name="phone"
required
class="w-full px-[12px] py-[8px] border border-gray-300 rounded-[6px] focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="card-type" class="block text-[14px] font-medium text-gray-700 mb-[8px]">
Тип карты
</label>
<select id="card-type"
name="card-type"
class="w-full px-[12px] py-[8px] border border-gray-300 rounded-[6px] focus:outline-none focus:ring-2 focus:ring-blue-500">
<option value="">Выберите тип карты</option>
<option value="basic">Базовая</option>
<option value="premium">Премиум</option>
<option value="vip">VIP</option>
</select>
</div>
<div>
<label for="message" class="block text-[14px] font-medium text-gray-700 mb-[8px]">
Комментарий
</label>
<textarea id="message"
name="message"
rows="3"
class="w-full px-[12px] py-[8px] border border-gray-300 rounded-[6px] focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"></textarea>
</div>
<div class="flex items-center">
<input type="checkbox"
id="agreement"
name="agreement"
required
class="mr-[8px] w-[16px] h-[16px] text-blue-600 border-gray-300 rounded focus:ring-blue-500">
<label for="agreement" class="text-[14px] text-gray-700">
Я согласен с обработкой персональных данных *
</label>
</div>
</form>
<div class="flex justify-end gap-[12px] mt-[24px]">
<button data-modal-close
type="button"
class="px-[24px] py-[12px] bg-gray-500 text-white rounded-[6px] hover:bg-gray-600 transition-colors duration-[300ms]">
Отмена
</button>
<button type="submit"
class="px-[24px] py-[12px] bg-blue-500 text-white rounded-[6px] hover:bg-blue-600 transition-colors duration-[300ms]">
Отправить заявку
</button>
</div>
</div>
</div>