-
Notifications
You must be signed in to change notification settings - Fork 1
/
token.html
265 lines (247 loc) · 15.1 KB
/
token.html
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
<div class="container pb-5" style="padding-top:80px">
<div class="row mb-5" id="token-card">
<div class="col-md-6 col-xxl-5 pe-lg-3 pe-xl-4">
<div id="token-asset-container">
<a href="" data-fancybox id="token-original-image">
<img src="img/thumbnails/token.webp" class="d-none w-100 border-1 shadow-sm" id="token-image" alt="Token" style="border:1px solid #cccccc; background-color:rgba(0,0,0,0.01); border-radius:10px" />
</a>
<img src="" class="d-none" id="token-original-image-preload" alt="Token" />
</div>
<div class="card d-none mt-4" id="additional-assets-container">
<div class="card-header bg-white font-size-90">Additional Assets</div>
<div class="card-body">
<a href="#" data-fancybox class="btn btn-custom-5 w-100" id="transparent-bg-mustachio" style="border-width:2px">Mustachio with Transparent Background</a>
<img src="" class="d-none" id="transparent-bg-mustachio-preload" alt="Token" />
</div>
</div>
<div class="card mt-4 d-none">
<div class="card-header bg-white fw-bold font-size-110 py-3">Offers</div>
<div id="offers-container">
<div class="d-flex justify-content-center py-5">
<div class="spinner-grow background-image-cover bg-transparent" style="width:3rem; height:3rem; background-image:url('../img/ownly/own-token.png')" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xxl-7 ps-lg-3 ps-xl-4 mt-4 mt-md-5">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="font-size-120">
<a href="#" class="link-color-4 text-decoration-none neo-bold" id="token-collection-name"></a>
</div>
</div>
<div class="d-flex justify-content-between">
<div class="d-flex align-items-center mb-1" style="min-height:61px">
<div class="neo-black font-size-200 font-size-md-250 mb-1 token-name link text-color-6 text-decoration-none" id="token-name"></div>
</div>
<div class="d-flex align-items-center">
<div class="pe-2 d-none" id="transfer-token-container">
<button type="button" class="btn btn-custom-14 font-size-130 change-token-view" id="transfer-token-show-modal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Gift">
<i class="fas fa-gift"></i>
</button>
<!-- <button class="btn p-0 m-0 link-color-4" id="transfer-token-show-modal" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Transfer" style="width:24px; height:24px; border-radius:50%; box-shadow: none">-->
<!-- <i class="fas fa-gift font-size-140"></i>-->
<!-- </button>-->
</div>
<div class="d-flex align-items-center py-1 ps-3 add-to-favorites-container">
<div class="">
<button class="btn add-to-favorites p-0 m-0" data-status="0" style="width:24px; height:24px; border-radius:50%; box-shadow: none">
<i class="fa-heart font-size-140 text-color-1"></i>
</button>
</div>
<div class="ps-2 font-size-90 text-color-1 favorites-count">0</div>
</div>
</div>
</div>
<div class="font-size-110 neo-bold mb-4 pb-1">#1 of 1 - Single Edition</div>
<div class="pb-3 text-center" id="token-loading">
<div class="spinner-grow background-image-cover bg-transparent mb-4" style="width:4rem; height:4rem; background-image:url('../img/ownly/own-token.png')" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="row align-items-center d-none mb-5" id="create-market-sale-container">
<div class="col-6">
<div class="d-flex align-items-end mb-2">
<div class="font-size-110 font-size-md-120 fw-bold">Price:</div>
<div class="ps-2 ms-1">
<img src="../img/ownly/own-token.png" class="token-price-currency" width="30" />
</div>
</div>
<div class="font-size-200 font-size-md-250 neo-black token-price line-height-90"></div>
</div>
<div class="col-6 text-end">
<button class="btn btn-custom-2 font-size-90 font-size-lg-100 font-size-xxl-110 py-3 neo-bold px-4 px-md-5 link create-market-sale-confirmation" data-type="sale" style="border-radius:15px">OWN NOW</button>
</div>
</div>
<div class="row align-items-center d-none mb-4" id="cancel-market-item-container">
<div class="col-6">
<div class="d-flex align-items-end mb-2">
<div class="font-size-110 font-size-md-120 fw-bold">Price:</div>
<div class="ps-2 ms-1">
<img src="../img/ownly/own-token.png" class="token-price-currency" width="30" />
</div>
</div>
<div class="font-size-200 font-size-md-250 neo-black token-price"></div>
</div>
<div class="col-6 text-end">
<button class="btn btn-custom-3 font-size-110 font-size-md-120 neo-bold px-4 px-md-5 link cancel-market-item-confirmation" style="border-radius:15px">CANCEL</button>
</div>
</div>
<div class="row align-items-center d-none mb-4" id="create-market-item-container">
<div class="col-6">
<div>
<a href="#" target="_blank" class="font-size-90 text-decoration-none d-none token-bscscan-transaction-hash">View on BscScan</a>
</div>
<div class="font-size-100 neo-bold">Owner</div>
<div class="font-size-90 owner-address"></div>
</div>
<div class="col-6">
<button class="btn btn-custom-4 w-100 font-size-90 font-size-lg-100 font-size-xxl-110 py-3 neo-bold create-market-item-confirmation" style="border-radius:15px">SELL NOW</button>
</div>
</div>
<div class="row align-items-center d-none mb-4" id="sold-out-container">
<div class="col-6">
<div>
<a href="#" target="_blank" class="font-size-90 text-decoration-none d-none token-bscscan-transaction-hash">View on BscScan</a>
</div>
<div class="font-size-100 neo-bold">Owner</div>
<div class="font-size-90 owner-address"></div>
</div>
<div class="col-6">
<!-- <button class="btn btn-custom-6 w-100 line-height-110 font-size-90 font-size-lg-110 neo-bold py-3 make-offer-show-modal" data-contract-address="' + contractAddress + '" data-token-id="' + i + '" style="border-radius:15px">MAKE OFFER</button>-->
<button class="btn btn-custom-17 w-100 line-height-110 font-size-90 font-size-lg-110 neo-bold py-3" style="border-radius:15px" disabled>SOLD OUT</button>
</div>
</div>
<!-- <div class="mb-4 d-none">-->
<!-- <button class="btn btn-secondary px-4" id="create-market-item-confirmation">POST ITEM FOR SALE</button>-->
<!-- </div>-->
<!-- <button class="btn btn-secondary w-100 sell-token-confirmation d-none">Sell</button>-->
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button neo-bold font-size-60" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Description
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne">
<div class="accordion-body">
<div class="d-flex align-items-center mb-3">
<div class="text-color-7">Created by</div>
<div class="ps-2">
<img src="../img/ownly/own-token.webp" width="30" alt="Ownly" />
</div>
</div>
<div class="font-size-100 line-height-140 mb-1" id="token-description"></div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button neo-bold font-size-60" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Properties
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo">
<div class="accordion-body px-4">
<div class="row" id="token-attributes"></div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button neo-bold font-size-60 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
About the Collection
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
<div class="accordion-body">
<div class="about-the-collection d-none" data-collection="titansofindustry">
Created by multimedia artist Eugene Oligo, our collaboration entitled Titans of Industry features the pioneers, entrepreneurs, and titans of the crypto space. This collection will surely help you recognize the big ones, their feats, and their impact on the blockchain world.
</div>
<div class="about-the-collection d-none" data-collection="oha">
Ownly House of Art (OHA) is a collection of tokenized physical art. It provides a solution to traditional artists that needs more exposure and collectors that need a frictionless acquisition of high-value physical art pieces. OHA, through the use of NFTs, creates a seamless, transparent, and more efficient sales process.
</div>
<div class="about-the-collection d-none" data-collection="genesisblock">
<p>Marso presents another collection of work combining the elegance of geometry and a vibrant color palette dubbed as the ‘Genesis Block’ of Blockchain, reminiscent of the ceiling of the famous Sistine Chapel.</p>
<p>This collection can both stand alone as an individual piece or as a whole with every piece being unique leading to a culmination of the ‘creation’ and establishing of the whole blockchain space.</p>
<p>With that being said, the whole collection can be viewed starting from the bottom left (Creation), bottom middle (Distribution), bottom right, (Progress), top left (Prosperity), top middle (Liberty & Freedom), top right (Community), middle right (Immersion), middle right (Integration), and ends in the middle (Eden).</p>
</div>
<div class="about-the-collection d-none" data-collection="mustachios">
Boii Mustache, the artist behind these avatars, describes them as 100 mustached explorers living in a hidden, mysterious, and magical island called MustachioVerse. Each of these Mustachios lived and thrived for over a hundred years, waiting for their turn to tell their own unique tale of adventure. One day, ten brave Mustachios discovered a mysterious torn journal written by The Prospector — the first-ever Mustachio who conquered every possible feat in their universe. Stories have been told about his glory, but no one knows The Prospector’s identity. His Lost Diary mentioned that he discovered 9 valuable artifacts and a precious golden ‘stache — the key in solving the greatest mystery in the land: why do they all have a mustache?
</div>
<div class="about-the-collection d-none" data-collection="cryptosolitaire">
Digital playing card deck created by Filipino artist, Chen Naje, also known as @chenandink on Instagram. For the clubs, tropical leaves to represent summer is used. For the spades, Chen Naje used maple leaves as symbol for the fall season. For the diamonds, he used ice crystals to represent winter which somehow also look like raw diamonds. Lastly, flowers for the hearts to represent their bloom during spring.
</div>
<div class="about-the-collection d-none" data-collection="inkvadyrz">
The deck is made up of twenty Cryptoart cards composed of three categories: common, uncommon, rare, and legendary. The card’s category shows its rarity, value, and benefits. The legendary cards are priced higher than the rare and common cards. There are also only 2 legendary cards compared to 5 rare cards, 6 uncommon cards, and 7 common cards. Most importantly, owning a legendary card gives the collector the possibility to get the reward piece by getting 9 other cards in the collection.
</div>
<div class="about-the-collection d-none" data-collection="rewards">
The collection composes of Ownly rewards for Private Sale and IDO participants, and top collectors for both Mustachio and Inkvadyrz collections.
</div>
<div class="about-the-collection d-none" data-collection="sagesrantcollectibles">
The Sages Rant Collectibles is a collection of single-edition, legendary pieces that can be acquired by participating in our auction happening this Q4 of 2021. Holders of these backgrounds and artifacts receive distinct strengths and can boost the rarity of their Mustachios — granting magical abilities and unlimited potentials.
</div>
<div class="about-the-collection d-none" data-collection="3dmustachios">
A collection of 3D mustached NFT avatars called Mustachios created by the one and only Boii Mustache. The tales and adventures of these NFT avatars inspired Ownly’s upcoming play-and-earn game, Mustachio Quest. Check out <a href="https://mustachioverse.com" class="link-color-4">mustachioverse.com</a> for more details.
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button neo-bold font-size-60 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Token Details
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour">
<div class="accordion-body">
<table>
<tr>
<td class="neo-bold pe-3 py-1">Token:</td>
<td class="py-1" id="token-type"></td>
</tr>
<tr>
<td class="neo-bold pe-3 py-1">Blockchain:</td>
<td class="py-1" id="token-network"></td>
</tr>
<tr>
<td class="neo-bold pe-3 py-1">Contract Address:</td>
<td class="py-1" id="token-contract-address"></td>
</tr>
<tr>
<td class="neo-bold pe-3 py-1">Token ID:</td>
<td class="py-1" id="token-id"></td>
</tr>
<tr>
<td class="neo-bold pe-3 py-1">Owner Address</td>
<td class="py-1" id="token-owner"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button neo-bold font-size-60" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
Transfer History
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse show" aria-labelledby="headingFive">
<div class="accordion-body">
<div class="table-responsive py-2">
<table class="table table-bordered font-size-80 mb-0" id="transfer-history"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-color-18 pb-md-5">
<div class="container py-5">
<div class="neo-bold font-size-130 font-size-lg-160 text-center mb-4 mb-md-5">YOU MIGHT LIKE ON THIS COLLECTION</div>
<div class="row flex-nowrap overflow-auto" id="tokens-container"></div>
</div>
</div>