-
Notifications
You must be signed in to change notification settings - Fork 0
/
main-card.html
411 lines (374 loc) · 17.1 KB
/
main-card.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
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
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/@walletconnect/[email protected]/dist/umd/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/main-card.css" />
<script
src="https://kit.fontawesome.com/3fe8aae587.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="css/menu.css" />
</head>
<body>
<div id="ownerBtn" class="buttons-container owner">
<div class="button-div">
<a
onclick="window.location='locationNew.html'+window.location.search;"
class="Buy-button"
>Location</a
>
</div>
<div class="button-div">
<a
onclick="window.location='certificate.html'+window.location.search;"
class="Buy-button"
>Certification</a
>
</div>
</div>
<div id="non-ownerBtn" class="buttons-container non-owner">
<div id="buy-btn" class="button-div">
<a href="#" class="Buy-button">buy</a>
</div>
</div>
<div class="menu-wrap">
<!-- fix icon alignment -->
<input type="checkbox" class="toggler" />
<div class="hamburger">
<div></div>
</div>
<!-- fix the elements inside the menu -->
<div class="menu">
<div>
<ul class="list-items">
<li>
<ul>
<img src="./assets/images/home-svg.svg" alt="home-icon" />
<a href="#">Home</a>
</ul>
</li>
<li>
<ul>
<img src="./assets/images/person.svg" alt="home-icon" />
<a href="#">Log in</a>
</ul>
</li>
<li>
<ul>
<img
src="./assets/images/phone-svgrepo-com.svg"
alt="home-icon"
/>
<a href="#">Contact us</a>
</ul>
</li>
<li>
<ul>
<img
src="./assets/images/about-information-info-help-svgrepo-com.svg"
alt="home-icon"
/>
<a href="#">About</a>
</ul>
</li>
<li>
<button class="wallet" id="walletbtn">
<i id="walletIcon" class="fa-solid fa-wallet fa-lg"></i>Connect
</button>
</li>
<li>
<p id="Address" class="menu-address">address</p>
</li>
</ul>
</div>
</div>
</div>
<div class="my-row">
<div class="example-1 my-card">
<div class="wrapper">
<div class="art-pic"><img src="" alt="" id="art-pic" /></div>
<div class="the-cards">
<div
ontouchstart="touchStart(event)"
ontouchmove="touchMove(event)"
ontouchend="touchEnd()"
id="backSheet"
class="data"
>
<div class="content">
<div class="blueeee">
<h1 class="product-name" id="prodname">product name</h1>
<ul>
<li>
<img
src="..."
id="artist-picture"
class="img-thumbnail rounded-circle"
alt=" artist pic"
/>
</li>
<li>
<h4>
<a
onclick="window.location='profile.html'+window.location.search;"
class="artist-name"
id="art-name"
>artist name</a
>
</h4>
</li>
</ul>
</div>
<div class="whiteee">
<div class="swipe-indicator"></div>
<ul>
<li>
<h2 class="authenticity" id="authentic">
The item is authentic
</h2>
</li>
<li
style="
padding: 0;
margin: 0;
position: relative;
top: 8px;
"
>
<img
class="imgg"
style="width: 2rem"
src="./assets/images/checkbox-circle-fill.svg"
alt="checkmark"
/>
</li>
</ul>
<ul
class="nav nav-pills nav-pilled-tab"
id="pills-tab"
role="tablist"
>
<li class="nav-item" role="presentation">
<button
class="nav-link active"
id="pills-Info-tab"
data-bs-toggle="pill"
data-bs-target="#pills-Info"
type="button"
role="tab"
aria-controls="pills-Info"
aria-selected="true"
>
Description
</button>
</li>
<li class="nav-item" role="presentation">
<button
class="nav-link"
id="pills-Owner-tab"
data-bs-toggle="pill"
data-bs-target="#pills-Owner"
type="button"
role="tab"
aria-controls="pills-Owner"
aria-selected="false"
>
History of owners
</button>
</li>
</ul>
<div
class="tab-content content-custome-data"
id="pills-tabContent"
>
<div
class="tab-pane fade active show"
id="pills-Info"
role="tabpanel"
aria-labelledby="pills-Info-tab"
>
<div>
<!-- <h5>Name:</h5>
<p>For he's a jolly good fellow 2020</p> -->
<h5>Price:</h5>
<p id="itemPrice">100000$</p>
<h5>Size:</h5>
<p id="size"></p>
<h5>Media:</h5>
<p id="artMedia">oil and gold leaf on canvas</p>
<h5>Ideas behind the work:</h5>
<p id="idea"></p>
</div>
</div>
<div
class="tab-pane fade"
id="pills-Owner"
role="tabpanel"
aria-labelledby="pills-Owner-tab"
>
<h5>History</h5>
</div>
</div>
<div>
<!-- <h5>Name:</h5>
<p>For he's a jolly good fellow 2020</p> -->
</div>
<!-- <p style="overflow-y: scroll; height: 10vh;"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam cum deleniti unde accusantium corrupti, quia voluptas laudantium dolorum, dolor harum quasi sapiente voluptatem impedit labore error? Distinctio magni dignissimos unde veritatis in exercitationem error sint nostrum fuga consequuntur aperiam porro dicta, excepturi amet adipisci nam enim deleniti eaque possimus? Nulla ad adipisci obcaecati autem eaque similique optio aliquam tempore veritatis, ut ipsum ab repudiandae. Tenetur quod esse dolorum eligendi. Minus ad esse rerum repellendus corporis nam omnis, aliquid velit dolorum eveniet, facere magnam. Recusandae eaque quisquam eveniet cum magni veritatis sed ducimus ut, ad, officiis aliquam illo, molestiae similique impedit accusantium nisi optio. Alias mollitia tempore quis, quibusdam obcaecati vel eligendi voluptatibus sapiente, atque qui cum, iste quidem maiores unde neque cumque! Rerum quidem quis distinctio natus ab sed laborum dignissimos quae error consequuntur? Impedit reiciendis neque at numquam nihil totam pariatur eligendi, laborum, soluta non doloremque nulla dolores perferendis exercitationem, repellendus eveniet! Eius cumque eveniet vero nesciunt debitis assumenda id enim, animi ipsam officiis, facere magni ipsa? Dignissimos vitae fugiat dolor voluptatem dolorem sint vero laudantium quaerat pariatur saepe vel, maiores, sunt exercitationem eius nulla illum reprehenderit! Cupiditate voluptatibus fuga sequi, ad aperiam nemo ex eos facilis reiciendis nulla, provident rem labore consectetur dolores iusto. Alias cum molestiae iusto dolore adipisci, provident fugiat expedita molestias eligendi optio culpa nisi reprehenderit ea maxime ullam similique, rerum a nemo earum accusamus deserunt recusandae corporis laborum impedit! Praesentium, quas reprehenderit. Nemo, quos! Beatae totam molestias voluptate soluta dolores, officia aut recusandae ducimus similique maxime vitae, animi modi voluptas eaque iste quibusdam et deleniti! Nesciunt accusantium sit voluptatem deserunt quidem soluta. Inventore suscipit eum doloremque ad delectus laborum at, eius minus saepe cupiditate esse mollitia earum fugiat, atque, velit aliquid ullam quia vero rem laboriosam aspernatur! Expedita harum, suscipit non reprehenderit eos, maiores ducimus repellendus similique tenetur impedit placeat quisquam quia, laboriosam atque tempore porro sunt velit? Optio possimus harum enim vero ex sit architecto repellendus dignissimos nisi libero quaerat culpa voluptas omnis illo, quasi ea deserunt veniam exercitationem magnam! Aliquid delectus exercitationem repellendus nam, odio et dolor consequatur dolore placeat nostrum magnam, numquam dicta aperiam ad qui rem ratione impedit quo saepe quod modi distinctio corporis? Commodi, aut minus vero dicta similique excepturi molestias dignissimos in quasi itaque dolor optio quaerat pariatur sunt, eaque velit assumenda consequatur neque. Commodi neque magnam vel impedit earum nisi molestias quidem error omnis atque veniam sed provident deserunt facere adipisci eos repellat illo nihil eveniet nostrum voluptatibus dolorum, incidunt sint? Libero inventore cum ipsam voluptas laboriosam provident explicabo rerum in eligendi quisquam mollitia maxime voluptatem autem, rem asperiores atque consequatur sequi? Beatae illum harum pariatur eos commodi sequi perspiciatis modi obcaecati quam error unde incidunt quae cupiditate doloribus molestiae, quaerat at aliquid voluptatem dolore id deleniti iusto aspernatur! Numquam, explicabo. Hic, consectetur fugit non modi a, asperiores fuga illo cumque ex quasi perferendis necessitatibus. Facere animi qui veniam vel magni consequatur doloribus recusandae impedit quis dignissimos porro, suscipit ea deleniti consequuntur autem. Dolore officiis numquam veniam.</p>
-->
<!-- add size section -->
<p class="space-holder">holder</p>
</div>
</div>
</div>
<!-- <div id="frontSheet" class="data">
<div class="content">
<div class="front-sheet-head">
<h2 class="authenticity">The item is authentic</h2>
<img src="#" alt="checkmark" />
<p>
Boxing icon has the will for a couple more fightsBoxing icon
has the will for a couple more fightsBoxing icon has the
will for a couple more fightsBoxing icon has the will for a
couple more fightsBoxing icon has the will for a couple more
fightsBoxing icon has the will for a couple more
fightsBoxing icon has the will for a couple more
fightsBoxing icon has the will for a couple more
fightsBoxing icon has the will for a couple more fights
</p>
</div>
<h1 class="title">
<a href="#"
>Boxing icon has the will for a couple more fights
</a>
</h1>
<p class="text"></p>
</div>
</div> -->
</div>
</div>
</div>
</div>
<!-- card move code -->
<script>
var expanded = false;
let card = document.getElementById("backSheet");
card.style.height = "350px";
card.style.transition = "height 300ms";
var startingX, startingY, movingX, movingY;
function touchStart(evt) {
startingX = evt.touches[0].clientX;
startingY = evt.touches[0].clientY;
}
function touchMove(evt) {
movingX = evt.touches[0].clientX;
movingY = evt.touches[0].clientY;
}
function touchEnd() {
if (startingX + 100 < movingX) {
} else if (startingX - 100 > movingX) {
}
if (startingY + 100 < movingY && expanded) {
//console.log("down");
expanded = false;
card.style.height = "350px";
} else if (startingY - 100 > movingY && !expanded) {
//console.log("up");
card.style.height = "640px";
expanded = true;
}
}
</script>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/1.0.2/package/lib/browser/fs.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--Script to verify signature-->
<!-- <script >
const currentURL = new URL(location.href);
//console.log(currentURL);
var ID = currentURL.searchParams.get("itemID");
console.log("item id in new script: " + ID);
function verifySignature(signature, empName, hash) {
const crypto = require("crypto");
const fs = require("fs");
const buffer = require("buffer");
//generate a path for public key
const publicKeyPath = "pbft/" + empName + "-publickey.txt";
//read public key from file path
const publicKey = fs.readFileSync(publicKeyPath);
//convert signature string to buffer
const signatureBuffer = Buffer.from(signature);
const h = Buffer.from(hash); //hash value of transaction
//verify signature to see if its ok or not
const isVerified = crypto.verify(
"SHA256",
h,
publicKey,
signatureBuffer
);
return isVerified; //if not verified fix the UI
} //end of verify signature function
//---GET parameters for verifysignature from blockchain---------------------------
//fetch signature, employee name and hash from blockchain using itemIF
var signature = "";
var empName = "";
var hash = "";
//first fetch data from blockchain
await fetch("blockchain.json")
.then(function (response) {
return response.json();
}
)
.then(function (resp) {
//for each transaction in the block
for (var transactionNum = 0; transactionNum < resp[1]["data"].length; transactionNum ++) {
var data = resp[1]["data"][transactionNum]["input"]["data"]["data"];
//console.log(data["ID"]);
//if the itemID from URL is id from blockchain
if (data["ID"] == ID) {
signature = data["employee signature"];
empName = data["employee name"];
hash = resp[1]["data"][transactionNum]["hash"];
}
}
})
.catch(error => {
console.log(error);
});
//myfunction();
console.log(signature);
console.log(hash);
console.log(empName);
var isAuthentic = verifySignature(signature, empName, hash);
console.log(isAuthentic);
/*
function start() {
return myfunction();
}
// Call start
(async() => {
//console.log('before start');
await start();
console.log(signature);
console.log(hash);
console.log(empName);
var isAuthentic = verifySignature(signature, empName, hash);
console.log(isAuthentic);
})();
*/
</script> -->
<script type="module" src="display-main-card.js"></script>
<!-- <script type="module" src="walletConnect.js"></script> -->
<script src="assets/bootstrap.bundle.min.js"></script>
<script type="module" src="URLgenerator.js"></script>
<script src="./dist/bundle.js"></script>
</body>
</html>