collect.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  8. <META HTTP-EQUIV="Expires" CONTENT="-1">
  9. <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
  10. <title>ARK.Cards</title>
  11. <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  12. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
  13. integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  14. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  15. <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
  16. <link rel="stylesheet" href="./style.css">
  17. </head>
  18. <body>
  19. <section id="sec01" class="sec01-collect container-fluid px-0 mx-0">
  20. <img class="img-fluid" src="./img/banner.png" alt="">
  21. <div style="position: relative;" class="card-img-overlay p-0 d-flex align-items-end">
  22. <h5 style="background: #fff; font-size: 16px; position: absolute; z-index: 20;"
  23. class="card-title py-3 px-5 text-center mb-0 fw-bold">我的收藏</h5>
  24. </div>
  25. </section>
  26. <form class="collect-send" action="">
  27. <section id="sec05-moblie" class="sec05 my-4">
  28. <div class="sec05-moblie container-fluid">
  29. <div class="sec05-moblie-header">
  30. <h1 class="secn-title ps-2">NFT收藏品</h1>
  31. </div>
  32. <div class="sec05-moblie-container row row-cols-1 row-cols-md-4 g-4">
  33. <!-- <div class="col">
  34. <div class="card h-100">
  35. <a target="_blank" href="">
  36. <img src="./img/sec05/sec05-1.png"class="card-img-top" alt="...">
  37. </a>
  38. <div class="card-body p-2">
  39. <a target="_blank" href="">
  40. <h5 class="card-title">Lorem ipsum.</h5>
  41. </a>
  42. <p class="card-text">
  43. Lorem ipsum dolor sit amet,
  44. </p>
  45. <p class="card-text row">
  46. <small class="text-muted col-6 px-1">
  47. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  48. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  49. </small>
  50. <small class="price col-6 px-0 text-center">
  51. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  52. </p>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="col">
  57. <div class="card h-100">
  58. <a target="_blank" href="">
  59. <img src="./img/sec05/sec05-2.png"class="card-img-top" alt="...">
  60. </a>
  61. <div class="card-body p-2">
  62. <a target="_blank" href="">
  63. <h5 class="card-title">Lorem ipsum.</h5>
  64. </a>
  65. <p class="card-text">
  66. Lorem ipsum dolor sit amet,
  67. </p>
  68. <p class="card-text row">
  69. <small class="text-muted col-6 px-1">
  70. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  71. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  72. </small>
  73. <small class="price col-6 px-0 text-center">
  74. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  75. </p>
  76. </div>
  77. </div>
  78. </div>
  79. <div class="col">
  80. <div class="card h-100">
  81. <a target="_blank" href="./artist-course.html">
  82. <img src="./img/sec05/sec05-3.png"class="card-img-top" alt="...">
  83. </a>
  84. <div class="card-body p-2">
  85. <a target="_blank" href="./artist-course.html">
  86. <h5 class="card-title">Lorem ipsum.</h5>
  87. </a>
  88. <p class="card-text">
  89. Lorem ipsum dolor sit amet,
  90. </p>
  91. <p class="card-text row">
  92. <small class="text-muted col-6 px-1">
  93. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  94. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  95. </small>
  96. <small class="price col-6 px-0 text-center">
  97. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  98. </p>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="col">
  103. <div class="card h-100">
  104. <a target="_blank" href="./artist-course.html">
  105. <img src="./img/sec05/sec05-4.png"class="card-img-top" alt="...">
  106. </a>
  107. <div class="card-body p-2">
  108. <a target="_blank" href="./artist-course.html">
  109. <h5 class="card-title">Lorem ipsum.</h5>
  110. </a>
  111. <p class="card-text">
  112. Lorem ipsum dolor sit amet,
  113. </p>
  114. <p class="card-text row">
  115. <small class="text-muted col-6 px-1">
  116. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  117. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  118. </small>
  119. <small class="price col-6 px-0 text-center">
  120. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  121. </p>
  122. </div>
  123. </div>
  124. </div> -->
  125. </div>
  126. </div>
  127. <!-- <div class="sec05-moblie container-fluid">
  128. <div class="sec05-moblie-header">
  129. <h1 class="secn-title ps-2">運動</h1>
  130. </div>
  131. <div class="sec05-moblie-container row row-cols-1 row-cols-md-4 g-4">
  132. <div class="col">
  133. <div class="card h-100">
  134. <a target="_blank" href="./artist-course.html">
  135. <img src="./img/sec05/5.png"class="card-img-top" alt="...">
  136. </a>
  137. <div class="card-body">
  138. <a target="_blank" href="./artist-course.html">
  139. <h5 class="card-title">Lorem ipsum.</h5>
  140. </a>
  141. <p class="card-text">
  142. Lorem ipsum dolor sit amet,
  143. </p>
  144. <p class="card-text row">
  145. <small class="text-muted col-6 px-1">
  146. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  147. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  148. </small>
  149. <small class="price col-6 px-0 text-center">
  150. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  151. </p>
  152. </div>
  153. </div>
  154. </div>
  155. <div class="col">
  156. <div class="card h-100">
  157. <a target="_blank" href="./artist-course.html">
  158. <img src="./img/sec05/6.png"class="card-img-top" alt="...">
  159. </a>
  160. <div class="card-body">
  161. <a target="_blank" href="./artist-course.html">
  162. <h5 class="card-title">Lorem ipsum.</h5>
  163. </a>
  164. <p class="card-text">
  165. Lorem ipsum dolor sit amet,
  166. </p>
  167. <p class="card-text row">
  168. <small class="text-muted col-6 px-1">
  169. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  170. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  171. </small>
  172. <small class="price col-6 px-0 text-center">
  173. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  174. </p>
  175. </div>
  176. </div>
  177. </div>
  178. <div class="col">
  179. <div class="card h-100">
  180. <a target="_blank" href="./artist-course.html">
  181. <img src="./img/sec05/7.png"class="card-img-top" alt="...">
  182. </a>
  183. <div class="card-body">
  184. <a target="_blank" href="./artist-course.html">
  185. <h5 class="card-title">Lorem ipsum.</h5>
  186. </a>
  187. <p class="card-text">
  188. Lorem ipsum dolor sit amet,
  189. </p>
  190. <p class="card-text row">
  191. <small class="text-muted col-6 px-1">
  192. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  193. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  194. </small>
  195. <small class="price col-6 px-0 text-center">
  196. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  197. </p>
  198. </div>
  199. </div>
  200. </div>
  201. <div class="col">
  202. <div class="card h-100">
  203. <a target="_blank" href="./artist-course.html">
  204. <img src="./img/sec05/8.png"class="card-img-top" alt="...">
  205. </a>
  206. <div class="card-body">
  207. <a target="_blank" href="./artist-course.html">
  208. <h5 class="card-title">Lorem ipsum.</h5>
  209. </a>
  210. <p class="card-text">
  211. Lorem ipsum dolor sit amet,
  212. </p>
  213. <p class="card-text row">
  214. <small class="text-muted col-6 px-1">
  215. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  216. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  217. </small>
  218. <small class="price col-6 px-0 text-center">
  219. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  220. </p>
  221. </div>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. <div class="sec05-moblie container-fluid">
  227. <div class="sec05-moblie-header">
  228. <h1 class="secn-title ps-2">藝術</h1>
  229. </div>
  230. <div class="sec05-moblie-container row row-cols-1 row-cols-md-4 g-4">
  231. <div class="col">
  232. <div class="card h-100">
  233. <a target="_blank" href="./artist-course.html">
  234. <img src="./img/sec05/9.png" class="card-img-top" alt="...">
  235. </a>
  236. <div class="card-body">
  237. <a target="_blank" href="./artist-course.html">
  238. <h5 class="card-title">Lorem ipsum.</h5>
  239. </a>
  240. <p class="card-text">
  241. Lorem ipsum dolor sit amet,
  242. </p>
  243. <p class="card-text row">
  244. <small class="text-muted col-6 px-1">
  245. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  246. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  247. </small>
  248. <small class="price col-6 px-0 text-center">
  249. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  250. </p>
  251. </div>
  252. </div>
  253. </div>
  254. <div class="col">
  255. <div class="card h-100">
  256. <a target="_blank" href="./artist-course.html">
  257. <img src="./img/sec05/10.png"class="card-img-top" alt="...">
  258. </a>
  259. <div class="card-body">
  260. <a target="_blank" href="./artist-course.html">
  261. <h5 class="card-title">Lorem ipsum.</h5>
  262. </a>
  263. <p class="card-text">
  264. Lorem ipsum dolor sit amet,
  265. </p>
  266. <p class="card-text row">
  267. <small class="text-muted col-6 px-1">
  268. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  269. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  270. </small>
  271. <small class="price col-6 px-0 text-center">
  272. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  273. </p>
  274. </div>
  275. </div>
  276. </div>
  277. <div class="col">
  278. <div class="card h-100">
  279. <a target="_blank" href="./artist-course.html">
  280. <img src="./img/sec05/11.png"class="card-img-top" alt="...">
  281. </a>
  282. <div class="card-body">
  283. <a target="_blank" href="./artist-course.html">
  284. <h5 class="card-title">Lorem ipsum.</h5>
  285. </a>
  286. <p class="card-text">
  287. Lorem ipsum dolor sit amet,
  288. </p>
  289. <p class="card-text row">
  290. <small class="text-muted col-6 px-1">
  291. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  292. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  293. </small>
  294. <small class="price col-6 px-0 text-center">
  295. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  296. </p>
  297. </div>
  298. </div>
  299. </div>
  300. <div class="col">
  301. <div class="card h-100">
  302. <a target="_blank" href="./artist-course.html">
  303. <img src="./img/sec05/12.png"class="card-img-top" alt="...">
  304. </a>
  305. <div class="card-body">
  306. <a target="_blank" href="./artist-course.html">
  307. <h5 class="card-title">Lorem ipsum.</h5>
  308. </a>
  309. <p class="card-text">
  310. Lorem ipsum dolor sit amet,
  311. </p>
  312. <p class="card-text row">
  313. <small class="text-muted col-6 px-1">
  314. <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
  315. src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
  316. </small>
  317. <small class="price col-6 px-0 text-center">
  318. <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
  319. </p>
  320. </div>
  321. </div>
  322. </div>
  323. </div>
  324. </div> -->
  325. </section>
  326. <div style="background: #484848;position: fixed; bottom:0px; z-index: 20;" class="sendbox w-100 pt-2">
  327. <div class="p-2">
  328. <input id="address" style="border-radius: 10px; border:none;" class="p-2 w-100 mb-3" type="text" name="address" placeholder="請輸入您要發送的地址" required>
  329. <div class="text-end px-2">
  330. <p class="text-start text-white mb-2">※一次只能發送一則NFT收藏品</p>
  331. <button type="button" style="border:1px solid #fff; border-radius: 30px;" class="qrcode btn text-white px-3" data-bs-toggle="modal" data-bs-target="#qrcode-modal">掃描QRCode</button>
  332. <button type="button" style="border:1px solid #fff; border-radius: 30px;" class="close btn text-white px-3">取消</button>
  333. <input style="border-radius: 30px; background:#fff; border: none;" class="send-btn p-2 ms-1" type="submit" value="確定發送">
  334. <!-- <button sty type="button" style="border-radius: 30px; background:#fff;" class="btn ms-2">確定發送</button> -->
  335. </div>
  336. </div>
  337. </div>
  338. </form>
  339. <div id="qrcode-modal" class="modal" tabindex="-1">
  340. <div class="modal-dialog">
  341. <div class="modal-content">
  342. <div class="modal-header">
  343. <h5 class="modal-title">請掃描QRCode</h5>
  344. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  345. </div>
  346. <div class="modal-body">
  347. <div id="qr-reader" style="width:100%;"></div>
  348. </div>
  349. </div>
  350. </div>
  351. </div>
  352. <footer style="background: #484848;" class="py-4 w-100 px-0 mx-0">
  353. <p class="text-white text-center mb-0">Copyright 2021 版權所有 © Ark.Cards</p>
  354. </footer>
  355. <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  356. <script>
  357. AOS.init();
  358. </script>
  359. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  360. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  361. crossorigin="anonymous"></script>
  362. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  363. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  364. crossorigin="anonymous"></script>
  365. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  366. <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
  367. <script src="./goto.js"></script>
  368. <script src="./html5-qrcode.min.js"></script>
  369. <script>
  370. $(".qrcode").click(function () {
  371. $('#qrcode-modal').show();
  372. qrcode_scanner();
  373. });
  374. // 啟動QRCode Scanner
  375. function qrcode_scanner() {
  376. const html5QrCode = new Html5Qrcode("qr-reader");
  377. // decodedText: 0xd1acf1eb9c956d1e90b650dd56bed57a5df2fcae
  378. // decodedResult: decodedResult: {"decodedText":"0xd1acf1eb9c956d1e90b650dd56bed57a5df2fcae","result":{"text":"0xd1acf1eb9c956d1e90b650dd56bed57a5df2fcae","format":{"format":0,"formatName":"QR_CODE"}}}
  379. const qrCodeSuccessCallback = (decodedText, decodedResult) => {
  380. /* handle success */
  381. $('#address').val(decodedText);
  382. $('#qrcode-modal').hide();
  383. };
  384. const config = { fps: 10, qrbox: 300 };
  385. // If you want to prefer back camera
  386. html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
  387. }
  388. </script>
  389. </body>
  390. </html>