templates/components/modals/wallet/modal.html.twig line 1

Open in your IDE?
  1. <div class="popup wallet-modal" style="min-height: 300px;">
  2.     <div class="wallet-header">
  3.         <div class="wallet-nav">
  4.             <button class="deposite-btn active">
  5.                 <svg class="icon"><use href="/assets/icons/icons.svg#plus-icon"></use></svg>Депозит
  6.             </button>
  7.             <button class="withdraw-btn">
  8.                 <svg class="icon"><use href="/assets/icons/icons.svg#minus-icon"></use></svg>Вывод
  9.             </button>
  10.             <button class="history-btn">
  11.                 <svg class="icon"><use href="/assets/icons/icons.svg#history-icon"></use></svg>История
  12.             </button>
  13.         </div>
  14.         <button class="close-modal-btn">
  15.             <svg class="icon"><use href="/assets/icons/icons.svg#close-icon"></use></svg>
  16.         </button>
  17.     </div>
  18.     <div class="scroll-container">
  19.         <div class="deposite-wrapper">
  20.             <div class="wallet-payments-system-list">
  21.                 <div class="payment-system" data-system="1" data-method="sbp1">
  22.                     <div class="payments-left">
  23.                         <img src="/assets/icons/spb-icon.svg" alt="sbp" />
  24.                         <div>
  25.                             <h3>СБП #1</h3>
  26.                             <p>Мин. 100₽</p>
  27.                         </div>
  28.                     </div>
  29.                     <p>0.0%</p>
  30.                 </div>
  31.                 <div class="payment-system" data-system="3" data-method="sbp1">
  32.                     <div class="payments-left">
  33.                         <img src="/assets/icons/spb-icon.svg" alt="sbp" />
  34.                         <div>
  35.                             <h3>СБП #2</h3>
  36.                             <p>Мин. 300₽</p>
  37.                         </div>
  38.                     </div>
  39.                     <p>0.0%</p>
  40.                 </div>
  41.                 <div class="payment-system" data-system="2" data-method="sbp1">
  42.                     <div class="payments-left">
  43.                         <img src="/assets/icons/spb-icon.svg" alt="sbp" />
  44.                         <div>
  45.                             <h3>СБП #3</h3>
  46.                             <p>Мин. 300₽</p>
  47.                         </div>
  48.                     </div>
  49.                     <p>0.0%</p>
  50.                 </div>
  51.                 <div class="payment-system" data-system="4" data-method="fkwallet">
  52.                     <div class="payments-left">
  53.                         <img src="/assets/icons/fk-icon.svg" alt="fkwallet" />
  54.                         <div>
  55.                             <h3>FKWallet</h3>
  56.                             <p>Мин. 100₽</p>
  57.                         </div>
  58.                     </div>
  59.                     <p>0.0%</p>
  60.                 </div>
  61.                 <div class="payment-system" data-system="5" data-method="cryptobot">
  62.                     <div class="payments-left">
  63.                         <img src="/assets/icons/crypto.svg" alt="cryptobot" />
  64.                         <div>
  65.                             <h3>Криптобот</h3>
  66.                             <p>Мин. 100₽</p>
  67.                         </div>
  68.                     </div>
  69.                     <p>0.0%</p>
  70.                 </div>
  71.                 <div class="payment-system" data-system="6" data-method="cryptopay">
  72.                     <div class="payments-left">
  73.                         <img src="/assets/icons/crypto.svg" alt="cryptopay" />
  74.                         <div>
  75.                             <h3>Криптовалюты</h3>
  76.                             <p>Мин. 100₽</p>
  77.                         </div>
  78.                     </div>
  79.                     <p>0.0%</p>
  80.                 </div>
  81.             </div>
  82.             <style>
  83.                 .orange-outline {
  84.                     border: 1px solid rgba(255,149,0,0.4);
  85.                     box-shadow: 0 0 0 3px rgba(255,149,0,0.12);
  86.                     border-radius: 12px;
  87.                 }
  89.                 .payment-system {
  90.                     border: 1px solid transparent;
  91.                     border-radius: 12px;
  92.                     transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  93.                     cursor: pointer;
  94.                 }
  95.                 .payment-system.active {
  96.                     background: rgba(255,149,0,0.04);
  97.                     border-color: rgba(255,149,0,0.45);
  98.                     box-shadow: 0 0 0 3px rgba(255,149,0,0.12);
  99.                 }
  101.                 @media (min-width: 1024px) {
  102.                     .wallet-payments-system-list {
  103.                         min-height: 400px;
  104.                     }
  105.                 }
  107.                 .bank-buttons { margin-top: 10px; }
  108.                 .bank-buttons .game-input-btns {
  109.                     display: flex; gap: 8px; flex-wrap: wrap;
  110.                 }
  112.                 .bank-buttons .game-input-btns button {
  113.                     padding: 8px 12px;
  114.                     border-radius: 10px;
  115.                     border: 1px solid rgba(255,149,0,0.35);
  116.                     background: rgba(255,149,0,0.04);
  117.                     font: inherit;
  118.                     cursor: pointer;
  119.                     transition: background .15s ease, box-shadow .15s ease, border-color .15s ease, transform .05s ease;
  120.                     color: gray;
  121.                 }
  122.                 .bank-buttons .game-input-btns button:hover {
  123.                     background: rgba(255,149,0,0.07);
  124.                 }
  125.                 .bank-buttons .game-input-btns button:active {
  126.                     transform: translateY(1px);
  127.                 }
  128.                 .bank-buttons .game-input-btns button.active {
  129.                     background: rgba(255,149,0,0.10);
  130.                     border-color: rgba(255,149,0,0.55);
  131.                     box-shadow: 0 0 0 3px rgba(255,149,0,0.12);
  132.                 }
  133.                 .bank-buttons .game-input-btns button:focus-visible {
  134.                     outline: 2px solid rgba(255,149,0,0.6);
  135.                     outline-offset: 2px;
  136.                 }
  138.                 .cancel-withdraw-btn {
  139.                     background: linear-gradient(180deg, #ff6264, #cd2549 119.444%);
  140.                     border: none;
  141.                     border-radius: 8px;
  142.                     padding: 4px 10px;
  143.                     font-size: 12px;
  144.                     font-weight: 500;
  145.                     color: #fff;
  146.                     font-family: 'Google Sans', sans-serif;
  147.                     cursor: pointer;
  148.                     transition: background 0.3s ease;
  149.                     white-space: nowrap;
  150.                 }
  152.                 .cancel-withdraw-btn:hover {
  153.                     background: linear-gradient(180deg, #ff787a, #da3a55);
  154.                 }
  156.                 .cancel-withdraw-btn:active {
  157.                     background: linear-gradient(180deg, #e5484a, #b32a3f);
  158.                 }
  161.             </style>
  162.             <div class="deposite-variant">
  163.                 <div class="wrapper-variant">
  164.                     <div class="custom-input-wrapper">
  165.                         <div class="custom-input">
  166.                             <input type="text" placeholder="Введите сумму пополнения" />
  167.                             <p class="inner-label">₽</p>
  168.                         </div>
  169.                         <div class="additional-btns">
  170.                             <button style="cursor:pointer">+{{ random(range(501, 521)) }}</button>
  171.                             <button style="cursor:pointer">+{{ random(range(1001, 1121)) }}</button>
  172.                             <button style="cursor:pointer">+{{ random(range(2500, 5000)) }}</button>
  173.                             <button style="cursor:pointer">+{{ random(range(5001, 15021)) }}</button>
  174.                         </div>
  175.                     </div>
  176.                     <div class="wallet-bonus-tools">
  177.                         <div class="wallet-bonus-tools-header">
  178.                             <span>Дополнительный бонус</span>
  179.                             <label class="wallet-toggle">
  180.                                 <input type="checkbox" checked>
  181.                                 <i></i>
  182.                             </label>
  183.                         </div>
  184.                         <div class="wallet-bonus-grid">
  185.                             {% set walletBonuses = ['+15FS', '+30FS', '+70FS', '+60FS', '+100FS', '+150FS'] %}
  186.                             {% for bonus in walletBonuses %}
  187.                                 <button type="button" class="wallet-bonus-card {% if loop.first %}active{% endif %}">
  188.                                     <img src="/assets/images/slots/SugarRushXmas.jpg" alt="">
  189.                                     <strong>{{ bonus }}</strong>
  190.                                     <span>Ставка 2₽<br>От {{ loop.first ? '300₽' : (loop.index < 4 ? '700₽' : '1500₽') }}</span>
  191.                                 </button>
  192.                             {% endfor %}
  193.                         </div>
  194.                     </div>
  195.                     <div class="custom-input wallet-promo">
  196.                         <input type="text" placeholder="Введите промокод" />
  197.                     </div>
  198.                     <button class="btn-primary">Пополнить баланс</button>
  199.                 </div>
  200.             </div>
  201.         </div>
  202.         <div class="withdraw-wrapper">
  203.             <div class="wallet-payments-system-list">
  204.                 <div class="payment-system">
  205.                     <div class="payments-left">
  206.                         <img src="/assets/icons/spb-icon.svg" alt="sbp" data-method="sbp" />
  207.                         <div>
  208.                             <h3>СБП</h3>
  209.                             <p>Мин. 500₽</p>
  210.                         </div>
  211.                     </div>
  212.                     <p>10.0%</p>
  213.                 </div>
  214.                 <div class="payment-system">
  215.                     <div class="payments-left">
  216.                         <img src="/assets/icons/carts-icon.svg" alt="crypto" data-method="Card RUB" />
  217.                         <div>
  218.                             <h3>Карты РФ</h3>
  219.                             <p>Мин. 500₽</p>
  220.                         </div>
  221.                     </div>
  222.                     <p>10.0%</p>
  223.                 </div>
  224.                 <div class="payment-system">
  225.                     <div class="payments-left">
  226.                         <img src="/assets/icons/fk-icon.svg" alt="FKWallet" data-method="FKWallet" />
  227.                         <div>
  228.                             <h3>FKWallet</h3>
  229.                             <p>Мин. 500₽</p>
  230.                         </div>
  231.                     </div>
  232.                     <p>10.0%</p>
  233.                 </div>
  234.                 <div class="payment-system">
  235.                     <div class="payments-left">
  236.                         <img src="/assets/icons/crypto.svg" alt="crypto" data-method="USDTTRC" />
  237.                         <div>
  238.                             <h3>USDT TRC20</h3>
  239.                             <p>Мин. 1500₽</p>
  240.                         </div>
  241.                     </div>
  242.                     <p>10.0%</p>
  243.                 </div>
  244.             </div>
  245.             <div class="withdraw-variant">
  246.                 <div class="wrapper-variant">
  247.                     <div class="custom-input-wrapper">
  248.                         <div class="custom-input">
  249.                             <input type="text" placeholder="Введите сумму вывода" />
  250.                             <p class="inner-label">₽</p>
  251.                         </div>
  252.                         <div class="additional-btns" style="cursor:pointer">
  253.                             <button style="cursor:pointer">+500</button>
  254.                             <button style="cursor:pointer">+1000</button>
  255.                             <button style="cursor:pointer">+5000</button>
  256.                             <button style="cursor:pointer">Макс</button>
  257.                         </div>
  258.                     </div>
  259.                     <div class="custom-input wallet-promo">
  260.                         <input type="text" placeholder="Введите реквизиты" />
  261.                     </div>
  262.                     <div class="bank-buttons" style="display:none">
  263.                         <div class="game-input-btns">
  264.                             <button class="active" data-bank="sber">Сбербанк</button>
  265.                             <button data-bank="alfa">Альфа</button>
  266.                             <button data-bank="tinkoff">Т-Банк</button>
  267.                             <button data-bank="vtb">ВТБ</button>
  268.                         </div>
  269.                     </div>
  270.                     <p class="wallet-info-text label-wallet">
  271.                         К зачислению: <span> 1000₽</span>
  272.                     </p>
  273.                     <button class="btn-primary">Оформить заявку</button>
  274.                 </div>
  275.                 <p class="wallet-info-text">Комиссия: <span> 10.0%</span></p>
  276.             </div>
  277.         </div>
  278.         <div class="history-variant">
  279.             <div class="transaction-select">
  280.                 <div class="transaction-select-header">
  281.                     <p>Пополнения</p>
  282.                     <img src="/assets/icons/wallet-select-arrow.svg" alt="arrow" />
  283.                 </div>
  284.                 <div class="transaction-select-body">
  285.                     <div class="transaction-select-item">Пополнения</div>
  286.                     <div class="transaction-select-item">Выводы</div>
  287.                 </div>
  288.             </div>
  289.             <div class="wallet-history-table">
  290.                 <div class="wallet-history-header">
  291.                     <p>ID</p>
  292.                     <p>Дата</p>
  293.                     <p>Сумма</p>
  294.                     <p>Статус</p>
  295.                 </div>
  296.                 <div class="wallet-history-body">
  297.                 </div>
  298.                 <div class="referal-table-nav">
  299.                     <button class="referal-table-nav-btn">
  300.                         <svg class="icon">
  301.                             <use href="/assets/icons/icons.svg#arrow-icon"></use>
  302.                         </svg>
  303.                     </button>
  304.                     <button class="referal-table-nav-btn">
  305.                         <svg class="icon">
  306.                             <use href="/assets/icons/icons.svg#arrow-icon"></use>
  307.                         </svg>
  308.                     </button>
  309.                 </div>
  310.             </div>
  311.         </div>
  312.     </div>
  313. </div>