-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcreate-advert-page.html
More file actions
297 lines (290 loc) · 19.5 KB
/
create-advert-page.html
File metadata and controls
297 lines (290 loc) · 19.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>Stokex</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="assets/css/style.css" type="text/css" media="all">
<script defer src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script defer src="assets/js/popper.min.js"></script>
<script defer src="assets/js/bootstrap.min.js"></script>
<script defer src="assets/js/bundle.create-advert.js"></script>
</head>
<body>
<header class="main-header main-header__shadow">
<div class="container-xl conainer-lg-fluid">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">stokex</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.5 1.75C3.5 2.21413 3.31563 2.65925 2.98744 2.98744C2.65925 3.31563 2.21413 3.5 1.75 3.5C1.28587 3.5 0.840752 3.31563 0.512563 2.98744C0.184374 2.65925 0 2.21413 0 1.75C0 1.28587 0.184374 0.840752 0.512563 0.512563C0.840752 0.184374 1.28587 0 1.75 0C2.21413 0 2.65925 0.184374 2.98744 0.512563C3.31563 0.840752 3.5 1.28587 3.5 1.75Z"
fill="#D0D9DE" />
<path
d="M3.5 7C3.5 7.46413 3.31563 7.90925 2.98744 8.23744C2.65925 8.56563 2.21413 8.75 1.75 8.75C1.28587 8.75 0.840752 8.56563 0.512563 8.23744C0.184374 7.90925 0 7.46413 0 7C0 6.53587 0.184374 6.09075 0.512563 5.76256C0.840752 5.43437 1.28587 5.25 1.75 5.25C2.21413 5.25 2.65925 5.43437 2.98744 5.76256C3.31563 6.09075 3.5 6.53587 3.5 7Z"
fill="#D0D9DE" />
<path
d="M1.75 14C2.21413 14 2.65925 13.8156 2.98744 13.4874C3.31563 13.1592 3.5 12.7141 3.5 12.25C3.5 11.7859 3.31563 11.3408 2.98744 11.0126C2.65925 10.6844 2.21413 10.5 1.75 10.5C1.28587 10.5 0.840752 10.6844 0.512563 11.0126C0.184374 11.3408 0 11.7859 0 12.25C0 12.7141 0.184374 13.1592 0.512563 13.4874C0.840752 13.8156 1.28587 14 1.75 14Z"
fill="#D0D9DE" />
<path
d="M8.75 1.75C8.75 2.21413 8.56563 2.65925 8.23744 2.98744C7.90925 3.31563 7.46413 3.5 7 3.5C6.53587 3.5 6.09075 3.31563 5.76256 2.98744C5.43437 2.65925 5.25 2.21413 5.25 1.75C5.25 1.28587 5.43437 0.840752 5.76256 0.512563C6.09075 0.184374 6.53587 0 7 0C7.46413 0 7.90925 0.184374 8.23744 0.512563C8.56563 0.840752 8.75 1.28587 8.75 1.75Z"
fill="#D0D9DE" />
<path
d="M7 8.75C7.46413 8.75 7.90925 8.56563 8.23744 8.23744C8.56563 7.90925 8.75 7.46413 8.75 7C8.75 6.53587 8.56563 6.09075 8.23744 5.76256C7.90925 5.43437 7.46413 5.25 7 5.25C6.53587 5.25 6.09075 5.43437 5.76256 5.76256C5.43437 6.09075 5.25 6.53587 5.25 7C5.25 7.46413 5.43437 7.90925 5.76256 8.23744C6.09075 8.56563 6.53587 8.75 7 8.75Z"
fill="#D0D9DE" />
<path
d="M8.75 12.25C8.75 12.7141 8.56563 13.1592 8.23744 13.4874C7.90925 13.8156 7.46413 14 7 14C6.53587 14 6.09075 13.8156 5.76256 13.4874C5.43437 13.1592 5.25 12.7141 5.25 12.25C5.25 11.7859 5.43437 11.3408 5.76256 11.0126C6.09075 10.6844 6.53587 10.5 7 10.5C7.46413 10.5 7.90925 10.6844 8.23744 11.0126C8.56563 11.3408 8.75 11.7859 8.75 12.25Z"
fill="#D0D9DE" />
<path
d="M12.25 3.5C12.7141 3.5 13.1592 3.31563 13.4874 2.98744C13.8156 2.65925 14 2.21413 14 1.75C14 1.28587 13.8156 0.840752 13.4874 0.512563C13.1592 0.184374 12.7141 0 12.25 0C11.7859 0 11.3408 0.184374 11.0126 0.512563C10.6844 0.840752 10.5 1.28587 10.5 1.75C10.5 2.21413 10.6844 2.65925 11.0126 2.98744C11.3408 3.31563 11.7859 3.5 12.25 3.5Z"
fill="#D0D9DE" />
<path
d="M14 7C14 7.46413 13.8156 7.90925 13.4874 8.23744C13.1592 8.56563 12.7141 8.75 12.25 8.75C11.7859 8.75 11.3408 8.56563 11.0126 8.23744C10.6844 7.90925 10.5 7.46413 10.5 7C10.5 6.53587 10.6844 6.09075 11.0126 5.76256C11.3408 5.43437 11.7859 5.25 12.25 5.25C12.7141 5.25 13.1592 5.43437 13.4874 5.76256C13.8156 6.09075 14 6.53587 14 7Z"
fill="#D0D9DE" />
<path
d="M12.25 14C12.7141 14 13.1592 13.8156 13.4874 13.4874C13.8156 13.1592 14 12.7141 14 12.25C14 11.7859 13.8156 11.3408 13.4874 11.0126C13.1592 10.6844 12.7141 10.5 12.25 10.5C11.7859 10.5 11.3408 10.6844 11.0126 11.0126C10.6844 11.3408 10.5 11.7859 10.5 12.25C10.5 12.7141 10.6844 13.1592 11.0126 13.4874C11.3408 13.8156 11.7859 14 12.25 14Z"
fill="#D0D9DE" />
</svg>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="navbar-collapse__background">
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Markets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Trade</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-expanded="false">
Information
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">About Us</a>
<a class="dropdown-item" href="#">Support Center</a>
<a class="dropdown-item" href="#">Affiliate Program</a>
<a class="dropdown-item" href="#">FAQ</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Wallets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Promo<span class="icon-currency">NEW</span></a>
</li>
</ul>
<div class="login-block">
<a class="login" href="#">Log In</a>
<a class="btn stokex-button" href="#">Register</a>
<div class="language-switcher">
<ul class="nav nav-tabs">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
role="button" aria-expanded="false"><span
class="lang_icon en"></span>En</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#"><span
class="lang_icon ru"></span>Ru</a>
<a class="dropdown-item" href="#"><span
class="lang_icon de"></span>De</a>
<a class="dropdown-item" href="#"><span
class="lang_icon pl"></span>Pl</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
<section class="advert-menu">
<div class="container">
<div class="row">
<div class="col-12">
<div class="menu">
<a class="stokex-button" href="#">AD board</a>
<a class="stokex-button" href="#">My Adverts</a>
<a class="stokex-button" href="#">My Trades</a>
<a class="stokex-button current" href="#">Create Advert</a>
</div>
</div>
</div>
</div>
</section>
<section class="content">
<div class="container">
<div class="row">
<div class="col-12">
<div class="advert-creation-block">
<div class="advert-creation-block__form">
<h1>Create advert</h1>
<div class="input-group advert-type">
<label for="adType" class="info" data-info="Example tooltip">Advert type</label>
<select class="my-custom-select" id="adType">
<option value="" selected disabled>Advert type</option>
<option value="Example 1">Example 1</option>
<option value="Example 2">Example 2</option>
</select>
</div>
<div class="input-group currency">
<label for="cryptoCurr">Currency</label>
<select class="my-custom-select" id="cryptoCurr">
<option value="" selected disabled>Cryptocurrency</option>
<option value="Example 1">Example 1</option>
<option value="Example 2">Example 2</option>
</select>
<div class="d-flex flex-row align-items-center justify-content-between flex-nowrap">
<div>
<select class="my-custom-select" id="curr">
<option value="" selected disabled>Currency</option>
<option value="Example 1">Example 1</option>
<option value="Example 2">Example 2</option>
</select>
</div>
<div>
<select class="my-custom-select" id="payMethod">
<option value="" selected disabled>Payment method</option>
<option value="Example 1">Example 1</option>
<option value="Example 2">Example 2</option>
</select>
</div>
</div>
</div>
<div class="rate-slider">
<label for="floatingRate">Price</label>
<p>Specify the floating rate</p>
<div class="slidecontainer">
<span class="fill-field"></span>
<span class="value-pointer">100</span>
<input type="range" min="0" max="200" step="1" value="100" class="slider"
id="siderRange">
</div>
</div>
<div class="input-group flex-boxes">
<div class="d-flex flex-direction-row align-items-center justify-content-between">
<div>Or specify the fixed rate</div>
<div><input type="text" class="nums-and-dots" value="99" id="fixedRate"></div>
</div>
</div>
<div class="input-group flex-boxes">
<label for="limits">Limits</label>
<div class="d-flex flex-direction-row align-items-center justify-content-between">
<div>Minimal currency amount</div>
<div><input type="text" class="nums-and-dots" value="1" id="limits"></div>
</div>
<div class="d-flex flex-direction-row align-items-center justify-content-between">
<div>Maximal currency amount</div>
<div><input type="text" class="nums-and-dots" value="2147483647" id="maxAmount">
</div>
</div>
</div>
<div class="input-group trade-terms">
<label for="tradeTerms" class="info" data-info="Example tooltip">Trade terms</label>
<textarea placeholder="For example, Accepting VTB transfers only."
id="tradeTerms"></textarea>
</div>
<button type="button" class="submit stokex-button">Create</button>
</div>
<div class="advert-creation-block__rules">
<h2 class="yellow">Advert rules and requirements</h2>
<ul class="yellow-dots-list">
<li>You need positive cryptocurrency balance on Stokex wallet for your adverts to be
shown.
</li>
<li>Fee depends on cryptocurrecy.</li>
<li>Get all the information on fees page.</li>
<li>You can`t change the price after starting the deal.</li>
<li>You are not allowed to buy or sell Bitcoins behalf of another person (to be a
broker).
</li>
<li>You can only use accounts registered for your name (payments from third parties are
prohibited!).</li>
<li>You need to specify your payment details in the Advert or in the Chat.</li>
<li>All information exchange should be at stokex.com.</li>
<li>Be careful when conducting transactions.</li>
</ul>
<h2 class="yellow">Advert limit display rules</h2>
<ul class="yellow-dots-list">
<li>A maximal limit in sellers advert can`t be bigger than cryptocurrency balance on his
wallet.</li>
<li>In case a lack of funds only real maximum amount will be shown.</li>
<li>Advert will be suspended if sellers balance will be lower of a minimal amount.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="main-footer">
<div class="container">
<div class="row">
<div class="col-12">
<div class="main-footer__menu">
<div>
<div class="heading">About us</div>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Confidentiality</a></li>
<li><a href="#">Announcements</a></li>
</ul>
</div>
<div>
<div class="heading">Products</div>
<ul>
<li><a href="#">Exchange</a></li>
<li><a href="#">Trade</a></li>
</ul>
</div>
<div>
<div class="heading">Service</div>
<ul>
<li><a href="#">Buy cryptocurrency</a></li>
<li><a href="#">Fees</a></li>
<li><a href="#">Trading rules</a></li>
</ul>
</div>
<div>
<div class="heading">Support</div>
<ul>
<li><a href="#">Leave us a review</a></li>
<li><a href="#">Support Center</a></li>
<li><a href="#">Send request</a></li>
<li><a href="#">Law enforcement inquiries</a></li>
</ul>
</div>
<div>
<div class="heading">Buy</div>
<ul>
<li><a href="#">Buy Bitcoin</a></li>
<li><a href="#">Buy Ethereum</a></li>
<li><a href="#">Buy Litecoin</a></li>
<li><a href="#">Buy Dogecoin</a></li>
<li><a href="#">Buy USDT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>