<div class="modal-layout">
<div class="popup wallet-modal">
<div class="wallet-menu">
<div class="group-header">
<div class="group-title">
<span class="group-icon">
<img src="/assets/images/wallet-icon.svg" alt="" /></span>
<h3>Кошелек</h3>
</div>
<span class="modal-close-btn">
<img src="/assets/icons/close.svg" alt="" />
</span>
</div>
<div class="wallet-type-select">
<button class="deposite-btn active">Пополнение</button>
<button class="withdraw-btn">Вывод</button>
<button class="wallet-history-btn">История</button>
</div>
<div class="payment-systems">
<button class="payment-system-item active">
<div class="payment-system-title">
<span class="payment-system-icon"><img src="/assets/icons/sbp.svg" alt="" /></span>
<p>СБП</p>
</div>
<span class="payment-system-procent">0%</span>
</button>
<button class="payment-system-item">
<div class="payment-system-title">
<span class="payment-system-icon"><img src="/assets/icons/fk-wallet.svg" alt="" /></span>
<p>FKWallet</p>
</div>
<span class="payment-system-procent">0%</span>
</button>
<button class="payment-system-item">
<div class="payment-system-title">
<span class="payment-system-icon"><img src="/assets/icons/card.svg" alt="" /></span>
<p>Карты</p>
</div>
<span class="payment-system-procent">0%</span>
</button>
<button class="payment-system-item">
<div class="payment-system-title">
<span class="payment-system-icon"><img src="/assets/icons/piatrix.png" alt="" /></span>
<p>Piastrix</p>
</div>
<span class="payment-system-procent">0%</span>
</button>
<button class="payment-system-item">
<div class="payment-system-title">
<span class="payment-system-icon"><img src="/assets/icons/qiwi.svg" alt="" /></span>
<p>Qiwi</p>
</div>
<span class="payment-system-procent">0%</span>
</button>
</div>
<div class="wallet-history-wrapper">
<div class="wallet-history-menu">
<button id="deposits-btn" class="active">Пополнения</button><button id="withdrawals-btn">Выводы</button>
</div>
<div class="deposite-history">
<div class="table-header">
<p>ID</p>
<p>Дата</p>
<p>Сумма</p>
</div>
<div class="table-body">
<div class="table-item">
<p>434756</p>
<p>28.04.24 11:30</p>
<p>2 540.00 ₽</p>
</div>
<div class="table-item">
<p>434756</p>
<p>28.04.24 11:30</p>
<p>2 540.00 ₽</p>
</div>
<div class="table-item">
<p>434756</p>
<p>28.04.24 11:30</p>
<p>2 540.00 ₽</p>
</div>
<div class="table-item">
<p>434756</p>
<p>28.04.24 11:30</p>
<p>2 540.00 ₽</p>
</div>
<div class="table-item">
<p>434756</p>
<p>28.04.24 11:30</p>
<p>2 540.00 ₽</p>
</div>
</div>
<div class="table-history">
<button class="arrow-btn">
<svg width="18.033203" height="18.033081" viewBox="0 0 18.0332 18.0331" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="↳ Icon Color" d="M7.33 9.01L11.93 13.61C12.3 13.97 12.3 14.57 11.93 14.94C11.56 15.3 10.97 15.3 10.6 14.94L5.34 9.68C4.98 9.31 4.98 8.71 5.34 8.35L10.6 3.09C10.97 2.72 11.56 2.72 11.93 3.09C12.3 3.45 12.3 4.05 11.93 4.42L7.33 9.01Z" fill="currentColor" fill-opacity="1.000000" fill-rule="nonzero" />
</svg>
</button>
<button class="arrow-btn">
<svg width="19.419922" height="19.420288" viewBox="0 0 19.4199 19.4203" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="↳ Icon Color" d="M11.51 9.71L6.56 14.65C6.17 15.05 6.17 15.69 6.56 16.08C6.96 16.48 7.6 16.48 7.99 16.08L13.66 10.42C14.05 10.03 14.05 9.38 13.66 8.99L7.99 3.33C7.6 2.93 6.96 2.93 6.56 3.33C6.17 3.72 6.17 4.36 6.56 4.76L11.51 9.71Z" fill="currentColor" fill-opacity="1.000000" fill-rule="nonzero" />
</svg>
</button>
</div>
</div>
<div class="withdraw-history">
<div class="table-header">
<p>ID</p>
<p>Дата</p>
<p>Сумма</p>
<p>Статус</p>
</div>
<div class="table-body">
<div class="table-item">
<p>434756</p>
<p>28.04.24 11:30</p>
<p>2 540.00 ₽</p>
<p class="waiting">Ожидание</p>
</div>
<div class="table-item">
<p>434756</p>
<p>28.04.24 11:30</p>
<p>2 540.00 ₽</p>
<p class="completed">Выплачено</p>
</div>
<div class="table-item">
<p>434756</p>
<p>28.04.24 11:30</p>
<p>2 540.00 ₽</p>
<p class="canceled">Отменен</p>
</div>
<div class="table-item">
<p>434756</p>
<p>28.04.24 11:30</p>
<p>2 540.00 ₽</p>
<p class="canceled">Отменен</p>
</div>
<div class="table-item">
<p>434756</p>
<p>28.04.24 11:30</p>
<p>2 540.00 ₽</p>
<p class="waiting">Ожидание</p>
</div>
</div>
<div class="table-history">
<button class="arrow-btn">
<svg width="18.033203" height="18.033081" viewBox="0 0 18.0332 18.0331" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="↳ Icon Color" d="M7.33 9.01L11.93 13.61C12.3 13.97 12.3 14.57 11.93 14.94C11.56 15.3 10.97 15.3 10.6 14.94L5.34 9.68C4.98 9.31 4.98 8.71 5.34 8.35L10.6 3.09C10.97 2.72 11.56 2.72 11.93 3.09C12.3 3.45 12.3 4.05 11.93 4.42L7.33 9.01Z" fill="currentColor" fill-opacity="1.000000" fill-rule="nonzero" />
</svg>
</button>
<button class="arrow-btn">
<svg width="19.419922" height="19.420288" viewBox="0 0 19.4199 19.4203" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="↳ Icon Color" d="M11.51 9.71L6.56 14.65C6.17 15.05 6.17 15.69 6.56 16.08C6.96 16.48 7.6 16.48 7.99 16.08L13.66 10.42C14.05 10.03 14.05 9.38 13.66 8.99L7.99 3.33C7.6 2.93 6.96 2.93 6.56 3.33C6.17 3.72 6.17 4.36 6.56 4.76L11.51 9.71Z" fill="currentColor" fill-opacity="1.000000" fill-rule="nonzero" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="deposite-block">
<div class="wallet-wariant-title">
<h3>Пополнение баланса</h3>
<span class="modal-close-btn">
<img src="/assets/icons/close.svg" alt="" />
</span>
</div>
<div class="deposite-body">
<div class="game-input-wrapper">
<p>Сумма пополнения</p>
<div class="game-input">
<input type="text" value="1" placeholder="300 ₽ - 100 000 ₽" />
</div>
<div>
<div class="game-input-btns">
<button>100</button>
<button>200</button>
<button>1000</button>
<button>5000</button>
</div>
</div>
</div>
<div class="game-input-wrapper">
<p>Промокод (если есть)</p>
<div class="game-input">
<input type="text" placeholder="Введите промокод" />
</div>
</div>
<button class="wallet-confirm">Перейти к оплате</button>
</div>
<div class="wallet-result">
<p>Комиссия: <span>0.00₽</span></p>
<p>Сумма к получению: <span>0.00₽</span></p>
</div>
</div>
<div class="withdraw-block">
<div class="wallet-wariant-title">
<h3>Снять средства</h3>
<span class="modal-close-btn">
<img src="/assets/icons/close.svg" alt="" />
</span>
</div>
<div class="deposite-body">
<div class="game-input-wrapper">
<p>Номер кошелька/Телефона</p>
<div class="game-input">
<input placeholder="Номер" type="text" />
</div>
<div>
<div class="game-input-btns">
<button>Сбер</button>
<button>Альфа</button>
<button>Т-Банк</button>
<button>ВТБ</button>
</div>
</div>
</div>
<div class="game-input-wrapper">
<p>Сумма вывода</p>
<div class="game-input">
<input value="1.00" type="text" />
</div>
</div>
<button class="wallet-confirm">Оформить заявку</button>
</div>
<div class="wallet-result">
<p>Комиссия: <span>0.00₽</span></p>
<p>Сумма к получению: <span>0.00₽</span></p>
</div>
</div>
</div>
</div>