templates/mines.html.twig line 1

1. {% extends 'base.html.twig' %}
3. {% block title %}Мины - FlashBet{% endblock %}
5. {% block body %}
6. <div class="container chat-open">
7.     <div class="page-title">
8.         <h3>Mines</h3>
9.     </div>
10.     <div class="mines-game-wrapper">
11.         <div class="game-options">
12.             <div class="game-field-wrapper">
13.                 <div class="game-input-wrapper">
14.                     <div class="game-input">
15.                         <input value="10.00" type="text" />
16.                         <img src="./assets/icons/orange-coin.svg" alt="" />
17.                     </div>
18.                     <div class="input-setter-btns">
19.                         <button class="btn-secondary">+10</button>
20.                         <button class="btn-secondary">+100</button>
21.                         <button class="btn-secondary">+1000</button>
22.                         <button class="btn-secondary">Х2</button>
23.                     </div>
24.                 </div>
25.                 <div class="game-input-secondary">
26.                     <input placeholder="Кол-во бомб:" type="text" />
27.                     <div class="game-input-secondary-btns">
28.                         <button class="game-input-secondary-btn active">3</button>
29.                         <button class="game-input-secondary-btn">5</button>
30.                         <button class="game-input-secondary-btn">10</button>
31.                         <button class="game-input-secondary-btn">24</button>
32.                     </div>
33.                 </div>
34.                 <button class="btn-primary game-start-btn">Начать игру</button>
35.                 <button class="btn-primary game-collect-btn">
36.                     Забрать
37.                     <span
38.                           ><svg class="icon">
39.                         <use href="./assets/icons/icons.svg#coins-icon"></use>
40.                         </svg>
41.                         10.00
42.                     </span>
43.                 </button>
44.             </div>
45.         </div>
46.         <div class="mines-game">
47.             <div class="game-win-popup" style="display:none">
48.                 <img class="win-logo" src="./assets/icons/logo.svg" alt="logo" />
49.                 <div>
50.                     <h3>Поздравляем!</h3>
51.                     <p>Вы выиграли</p>
52.                     <span>
53.                         <img src="./assets/icons/orange-coin.svg" alt="coin" />
54.                         <span class="win-amount-text">10.00</span>
55.                     </span>
56.                 </div>
57.                 <button class="share-result-btn">Продолжить</button>
58.             </div>
59.             <div class="mines-amounts-wrapper lightning-amount-wrapper">
60.                 <p>Молнии</p>
61.                 <div class="mines-amounts-image-wrapper">
62.                     <img src="./assets/images/big-ligtning.svg" alt="" />
63.                     <span class="mines-amounts-image-shadow"></span>
64.                 </div>
65.                 <span class="lightning-amount">10</span>
66.             </div>
67.             <div class="mines-fields">
68.                 <div class="mines-field">
69.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
70.                     <img
71.                          class="light"
72.                          src="./assets/images/big-ligtning.svg"
73.                          alt=""
74.                          />
75.                 </div>
76.                 <div class="mines-field">
77.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
78.                     <img
79.                          class="light"
80.                          src="./assets/images/big-ligtning.svg"
81.                          alt=""
82.                          />
83.                 </div>
84.                 <div class="mines-field">
85.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
86.                     <img
87.                          class="light"
88.                          src="./assets/images/big-ligtning.svg"
89.                          alt=""
90.                          />
91.                 </div>
92.                 <div class="mines-field">
93.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
94.                     <img
95.                          class="light"
96.                          src="./assets/images/big-ligtning.svg"
97.                          alt=""
98.                          />
99.                 </div>
100.                 <div class="mines-field">
101.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
102.                     <img
103.                          class="light"
104.                          src="./assets/images/big-ligtning.svg"
105.                          alt=""
106.                          />
107.                 </div>
108.                 <div class="mines-field">
109.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
110.                     <img
111.                          class="light"
112.                          src="./assets/images/big-ligtning.svg"
113.                          alt=""
114.                          />
115.                 </div>
116.                 <div class="mines-field">
117.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
118.                     <img
119.                          class="light"
120.                          src="./assets/images/big-ligtning.svg"
121.                          alt=""
122.                          />
123.                 </div>
124.                 <div class="mines-field">
125.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
126.                     <img
127.                          class="light"
128.                          src="./assets/images/big-ligtning.svg"
129.                          alt=""
130.                          />
131.                 </div>
132.                 <div class="mines-field">
133.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
134.                     <img
135.                          class="light"
136.                          src="./assets/images/big-ligtning.svg"
137.                          alt=""
138.                          />
139.                 </div>
140.                 <div class="mines-field">
141.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
142.                     <img
143.                          class="light"
144.                          src="./assets/images/big-ligtning.svg"
145.                          alt=""
146.                          />
147.                 </div>
148.                 <div class="mines-field">
149.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
150.                     <img
151.                          class="light"
152.                          src="./assets/images/big-ligtning.svg"
153.                          alt=""
154.                          />
155.                 </div>
156.                 <div class="mines-field">
157.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
158.                     <img
159.                          class="light"
160.                          src="./assets/images/big-ligtning.svg"
161.                          alt=""
162.                          />
163.                 </div>
164.                 <div class="mines-field">
165.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
166.                     <img
167.                          class="light"
168.                          src="./assets/images/big-ligtning.svg"
169.                          alt=""
170.                          />
171.                 </div>
172.                 <div class="mines-field">
173.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
174.                     <img
175.                          class="light"
176.                          src="./assets/images/big-ligtning.svg"
177.                          alt=""
178.                          />
179.                 </div>
180.                 <div class="mines-field">
181.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
182.                     <img
183.                          class="light"
184.                          src="./assets/images/big-ligtning.svg"
185.                          alt=""
186.                          />
187.                 </div>
188.                 <div class="mines-field">
189.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
190.                     <img
191.                          class="light"
192.                          src="./assets/images/big-ligtning.svg"
193.                          alt=""
194.                          />
195.                 </div>
196.                 <div class="mines-field">
197.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
198.                     <img
199.                          class="light"
200.                          src="./assets/images/big-ligtning.svg"
201.                          alt=""
202.                          />
203.                 </div>
204.                 <div class="mines-field">
205.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
206.                     <img
207.                          class="light"
208.                          src="./assets/images/big-ligtning.svg"
209.                          alt=""
210.                          />
211.                 </div>
212.                 <div class="mines-field">
213.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
214.                     <img
215.                          class="light"
216.                          src="./assets/images/big-ligtning.svg"
217.                          alt=""
218.                          />
219.                 </div>
220.                 <div class="mines-field">
221.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
222.                     <img
223.                          class="light"
224.                          src="./assets/images/big-ligtning.svg"
225.                          alt=""
226.                          />
227.                 </div>
228.                 <div class="mines-field">
229.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
230.                     <img
231.                          class="light"
232.                          src="./assets/images/big-ligtning.svg"
233.                          alt=""
234.                          />
235.                 </div>
236.                 <div class="mines-field">
237.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
238.                     <img
239.                          class="light"
240.                          src="./assets/images/big-ligtning.svg"
241.                          alt=""
242.                          />
243.                 </div>
244.                 <div class="mines-field">
245.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
246.                     <img
247.                          class="light"
248.                          src="./assets/images/big-ligtning.svg"
249.                          alt=""
250.                          />
251.                 </div>
252.                 <div class="mines-field">
253.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
254.                     <img
255.                          class="light"
256.                          src="./assets/images/big-ligtning.svg"
257.                          alt=""
258.                          />
259.                 </div>
260.                 <div class="mines-field">
261.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
262.                     <img
263.                          class="light"
264.                          src="./assets/images/big-ligtning.svg"
265.                          alt=""
266.                          />
267.                 </div>
268.             </div>
269.             <div class="mines-amounts-wrapper bombs-amount-wrapper">
270.                 <p>Бомбы</p>
271.                 <div class="mines-amounts-image-wrapper">
272.                     <img src="./assets/images/big-bomb.svg" alt="" />
273.                     <span class="mines-amounts-image-shadow"></span>
274.                 </div>
275.                 <span class="bombs-amount">4</span>
276.             </div>
277.         </div>
278.     </div>
279.     {% include 'components/history.html.twig' %}
280. </div>
281. {% endblock %}