templates/mines.html.twig line 1

1. {% extends 'base.html.twig' %}
3. {% block title %}Мины - Doggy{% 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 readonly 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>Doggy</p>
61.                 <div class="mines-amounts-image-wrapper">
62.                     <img src="/assets/doggy/Frame.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 class="light" src="/assets/doggy/Frame.svg" alt="" />
71.                 </div>
72.                 <div class="mines-field">
73.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
74.                     <img class="light" src="/assets/doggy/Frame.svg" alt="" />
75.                 </div>
76.                 <div class="mines-field">
77.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
78.                     <img class="light" src="/assets/doggy/Frame.svg" alt="" />
79.                 </div>
80.                 <div class="mines-field">
81.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
82.                     <img class="light" src="/assets/doggy/Frame.svg" alt="" />
83.                 </div>
84.                 <div class="mines-field">
85.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
86.                     <img class="light" src="/assets/doggy/Frame.svg" alt="" />
87.                 </div>
88.                 <div class="mines-field">
89.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
90.                     <img
91.                          class="light"
92.                          src="/assets/doggy/Frame.svg"
93.                          alt=""
94.                          />
95.                 </div>
96.                 <div class="mines-field">
97.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
98.                     <img
99.                          class="light"
100.                          src="/assets/doggy/Frame.svg"
101.                          alt=""
102.                          />
103.                 </div>
104.                 <div class="mines-field">
105.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
106.                     <img
107.                          class="light"
108.                          src="/assets/doggy/Frame.svg"
109.                          alt=""
110.                          />
111.                 </div>
112.                 <div class="mines-field">
113.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
114.                     <img
115.                          class="light"
116.                          src="/assets/doggy/Frame.svg"
117.                          alt=""
118.                          />
119.                 </div>
120.                 <div class="mines-field">
121.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
122.                     <img
123.                          class="light"
124.                          src="/assets/doggy/Frame.svg"
125.                          alt=""
126.                          />
127.                 </div>
128.                 <div class="mines-field">
129.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
130.                     <img
131.                          class="light"
132.                          src="/assets/doggy/Frame.svg"
133.                          alt=""
134.                          />
135.                 </div>
136.                 <div class="mines-field">
137.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
138.                     <img
139.                          class="light"
140.                          src="/assets/doggy/Frame.svg"
141.                          alt=""
142.                          />
143.                 </div>
144.                 <div class="mines-field">
145.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
146.                     <img
147.                          class="light"
148.                          src="/assets/doggy/Frame.svg"
149.                          alt=""
150.                          />
151.                 </div>
152.                 <div class="mines-field">
153.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
154.                     <img
155.                          class="light"
156.                          src="/assets/doggy/Frame.svg"
157.                          alt=""
158.                          />
159.                 </div>
160.                 <div class="mines-field">
161.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
162.                     <img
163.                          class="light"
164.                          src="/assets/doggy/Frame.svg"
165.                          alt=""
166.                          />
167.                 </div>
168.                 <div class="mines-field">
169.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
170.                     <img
171.                          class="light"
172.                          src="/assets/doggy/Frame.svg"
173.                          alt=""
174.                          />
175.                 </div>
176.                 <div class="mines-field">
177.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
178.                     <img
179.                          class="light"
180.                          src="/assets/doggy/Frame.svg"
181.                          alt=""
182.                          />
183.                 </div>
184.                 <div class="mines-field">
185.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
186.                     <img
187.                          class="light"
188.                          src="/assets/doggy/Frame.svg"
189.                          alt=""
190.                          />
191.                 </div>
192.                 <div class="mines-field">
193.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
194.                     <img
195.                          class="light"
196.                          src="/assets/doggy/Frame.svg"
197.                          alt=""
198.                          />
199.                 </div>
200.                 <div class="mines-field">
201.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
202.                     <img
203.                          class="light"
204.                          src="/assets/doggy/Frame.svg"
205.                          alt=""
206.                          />
207.                 </div>
208.                 <div class="mines-field">
209.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
210.                     <img
211.                          class="light"
212.                          src="/assets/doggy/Frame.svg"
213.                          alt=""
214.                          />
215.                 </div>
216.                 <div class="mines-field">
217.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
218.                     <img
219.                          class="light"
220.                          src="/assets/doggy/Frame.svg"
221.                          alt=""
222.                          />
223.                 </div>
224.                 <div class="mines-field">
225.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
226.                     <img
227.                          class="light"
228.                          src="/assets/doggy/Frame.svg"
229.                          alt=""
230.                          />
231.                 </div>
232.                 <div class="mines-field">
233.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
234.                     <img
235.                          class="light"
236.                          src="/assets/doggy/Frame.svg"
237.                          alt=""
238.                          />
239.                 </div>
240.                 <div class="mines-field">
241.                     <img class="bomb" src="./assets/images/big-bomb.svg" alt="" />
242.                     <img
243.                          class="light"
244.                          src="/assets/doggy/Frame.svg"
245.                          alt=""
246.                          />
247.                 </div>
248.             </div>
249.             <div class="mines-amounts-wrapper bombs-amount-wrapper">
250.                 <p>Мины</p>
251.                 <div class="mines-amounts-image-wrapper">
252.                     <img src="./assets/images/big-bomb.svg" alt="" />
253.                     <span class="mines-amounts-image-shadow"></span>
254.                 </div>
255.                 <span class="bombs-amount">4</span>
256.             </div>
257.         </div>
258.     </div>
259.     {% include 'components/history.html.twig' %}
260. </div>
261. {% endblock %}