131 lines
7.6 KiB
JavaScript
131 lines
7.6 KiB
JavaScript
function MakingAnOrder() {
|
|
return (
|
|
<section className="h-100">
|
|
<div className="mask d-flex align-items-center h-100 gradient-custom-3">
|
|
<div className="container h-100">
|
|
<div className="row d-flex justify-content-center align-items-center h-100">
|
|
<div className="col-12 col-md-9 col-lg-7 col-xl-6">
|
|
<div className="card" style={{ borderRadius: "15px", borderColor: "#767479" }}>
|
|
<div className="card-body p-5">
|
|
<h2 className="text-uppercase text-center mb-5">Оформление заказа</h2>
|
|
<form>
|
|
<div className="form-outline mb-4">
|
|
<input type="text" id="form3Example1cg" className="form-control form-control-lg" />
|
|
<label className="form-label" htmlFor="form3Example1cg">Ваше имя</label>
|
|
</div>
|
|
|
|
<div className="form-outline mb-4">
|
|
<input type="tel" id="form3Example5cg" className="form-control form-control-lg" />
|
|
<label className="form-label" htmlFor="form3Example5cg">Электронная почта</label>
|
|
</div>
|
|
|
|
<label className="form-check-label" htmlFor="creditCard">Вариант получения</label>
|
|
|
|
<div className="form-check mb-4">
|
|
<input className="form-check-input" type="radio" name="deliveryMethod" id="selfPickup"
|
|
defaultValue="selfPickup" />
|
|
<label className="form-check-label" htmlFor="selfPickup">Самовывоз</label>
|
|
</div>
|
|
|
|
<div className="form-check mb-4">
|
|
<input className="form-check-input" type="radio" name="deliveryMethod" id="delivery" defaultValue="delivery" />
|
|
<label className="form-check-label" htmlFor="delivery">Доставка</label>
|
|
</div>
|
|
|
|
<div className="form-outline mb-4" id="deliveryAddress" style={{ display: "none" }}>
|
|
<input type="text" id="form3ExampleAddress" className="form-control form-control-lg" />
|
|
<label className="form-label" htmlFor="form3ExampleAddress">Ваш адрес доставки</label>
|
|
|
|
<div id="deliveryTimeOptions">
|
|
<select className="form-select" id="timeSlotSelect" name="timeSlot">
|
|
<option defaultValue="10:00-10:30">10:00-10:30</option>
|
|
<option defaultValue="10:30-11:00">10:30-11:00</option>
|
|
<option defaultValue="11:00-11:30">11:00-11:30</option>
|
|
<option defaultValue="11:30-12:00">11:30-12:00</option>
|
|
<option defaultValue="12:00-12:30">12:00-12:30</option>
|
|
<option defaultValue="12:30-13:00">12:30-13:00</option>
|
|
<option defaultValue="13:00-13:30">13:00-13:30</option>
|
|
<option defaultValue="13:30-14:00">13:30-14:00</option>
|
|
<option defaultValue="14:00-14:30">14:00-14:30</option>
|
|
<option defaultValue="14:30-15:00">14:30-15:00</option>
|
|
<option defaultValue="15:00-15:30">15:00-15:30</option>
|
|
<option defaultValue="15:30-16:00">15:30-16:00</option>
|
|
<option defaultValue="16:00-16:30">16:00-16:30</option>
|
|
<option defaultValue="16:30-17:00">16:30-17:00</option>
|
|
<option defaultValue="17:00-17:30">17:00-17:30</option>
|
|
<option defaultValue="17:30-18:00">17:30-18:00</option>
|
|
<option defaultValue="18:00-18:30">18:00-18:30</option>
|
|
<option defaultValue="18:30-19:00">18:30-19:00</option>
|
|
<option defaultValue="19:00-19:30">19:00-19:30</option>
|
|
<option defaultValue="19:30-20:00">19:30-20:00</option>
|
|
<option defaultValue="20:00-20:30">20:00-20:30</option>
|
|
<option defaultValue="20:30-21:00">20:30-21:00</option>
|
|
<option defaultValue="21:00-21:30">21:00-21:30</option>
|
|
<option defaultValue="21:30-22:00">21:30-22:00</option>
|
|
<option defaultValue="22:00-22:30">22:00-22:30</option>
|
|
<option defaultValue="22:30-23:00">22:30-23:00</option>
|
|
</select>
|
|
<label htmlFor="timeSlotSelect">Выберите время доставки:</label>
|
|
</div>
|
|
</div>
|
|
|
|
<label className="form-check-label" htmlFor="creditCard">Вариант оплаты</label>
|
|
|
|
<div className="form-check mb-4">
|
|
<input className="form-check-input" type="radio" name="paymentMethod" id="cash" defaultValue="cash" />
|
|
<label className="form-check-label" htmlFor="cash">Наличные</label>
|
|
</div>
|
|
|
|
<div className="form-check mb-4">
|
|
<input className="form-check-input" type="radio" name="paymentMethod" id="creditCard"
|
|
defaultValue="creditCard" />
|
|
<label className="form-check-label" htmlFor="creditCard">Оплата картой</label>
|
|
</div>
|
|
|
|
<div className="form-outline mb-4" id="creditCardDetails" style={{ display: "none" }}>
|
|
<div className="row mb-4">
|
|
<div className="col">
|
|
<div className="form-outline">
|
|
<input type="text" id="formNameOnCard" className="form-control" />
|
|
<label className="form-label" htmlFor="formNameOnCard">Имя держателя карты</label>
|
|
</div>
|
|
</div>
|
|
<div className="col">
|
|
<div className="form-outline">
|
|
<input type="text" id="formCardNumber" className="form-control" />
|
|
<label className="form-label" htmlFor="formCardNumber">Номер карты</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row mb-4">
|
|
<div className="col-3">
|
|
<div className="form-outline">
|
|
<input type="text" id="formExpiration" className="form-control" />
|
|
<label className="form-label" htmlFor="formExpiration">Срок действия</label>
|
|
</div>
|
|
</div>
|
|
<div className="col-3">
|
|
<div className="form-outline">
|
|
<input type="text" id="formCVV" className="form-control" />
|
|
<label className="form-label" htmlFor="formCVV">CVV</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="d-flex justify-content-center">
|
|
<button className="btn btn" type="button" id="saveButton">Оформить</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default MakingAnOrder; |