|
|
@@ -19,7 +19,7 @@
|
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
</head>
|
|
|
|
|
|
-<body>
|
|
|
+<body>
|
|
|
<section id="sec01" class="sec01-collect container-fluid px-0 mx-0">
|
|
|
<img class="img-fluid" src="./img/banner.png" alt="">
|
|
|
<div style="position: relative;" class="card-img-overlay p-0 d-flex align-items-end">
|
|
|
@@ -33,6 +33,7 @@
|
|
|
<div class="sec05-moblie-header">
|
|
|
<h1 class="secn-title ps-2">NFT收藏品</h1>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="sec05-moblie-container row row-cols-1 row-cols-md-4 g-4">
|
|
|
<!-- <div class="col">
|
|
|
<div class="card h-100">
|
|
|
@@ -333,9 +334,10 @@
|
|
|
</section>
|
|
|
<div style="background: #484848;position: fixed; bottom:0px; z-index: 20;" class="sendbox w-100 pt-2">
|
|
|
<div class="p-2">
|
|
|
- <input style="border-radius: 10px; border:none;" class="p-2 w-100 mb-3" type="text" name="address" placeholder="請輸入您要發送的地址" required>
|
|
|
+ <input id="address" style="border-radius: 10px; border:none;" class="p-2 w-100 mb-3" type="text" name="address" placeholder="請輸入您要發送的地址" required>
|
|
|
<div class="text-end px-2">
|
|
|
<p class="text-start text-white mb-2">※一次只能發送一則NFT收藏品</p>
|
|
|
+ <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>
|
|
|
<button type="button" style="border:1px solid #fff; border-radius: 30px;" class="close btn text-white px-3">取消</button>
|
|
|
<input style="border-radius: 30px; background:#fff; border: none;" class="send-btn p-2 ms-1" type="submit" value="確定發送">
|
|
|
<!-- <button sty type="button" style="border-radius: 30px; background:#fff;" class="btn ms-2">確定發送</button> -->
|
|
|
@@ -343,16 +345,26 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
+
|
|
|
+ <div id="qrcode-modal" class="modal" tabindex="-1">
|
|
|
+ <div class="modal-dialog">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <h5 class="modal-title">請掃描QRCode</h5>
|
|
|
+ <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <div id="qr-reader" style="width:100%;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
|
|
|
<footer style="background: #484848;" class="py-4 w-100 px-0 mx-0">
|
|
|
<p class="text-white text-center mb-0">Copyright 2021 版權所有 © Ark.Cards</p>
|
|
|
</footer>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
|
|
|
<script>
|
|
|
AOS.init();
|
|
|
@@ -366,6 +378,32 @@
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
|
|
<script src="./goto.js"></script>
|
|
|
+
|
|
|
+ <script src="./html5-qrcode.min.js"></script>
|
|
|
+
|
|
|
+<script>
|
|
|
+$(".qrcode").click(function () {
|
|
|
+ $('#qrcode-modal').show();
|
|
|
+
|
|
|
+ qrcode_scanner();
|
|
|
+});
|
|
|
+
|
|
|
+// 啟動QRCode Scanner
|
|
|
+function qrcode_scanner() {
|
|
|
+ const html5QrCode = new Html5Qrcode("qr-reader");
|
|
|
+
|
|
|
+ // decodedText: 0xd1acf1eb9c956d1e90b650dd56bed57a5df2fcae
|
|
|
+ // decodedResult: decodedResult: {"decodedText":"0xd1acf1eb9c956d1e90b650dd56bed57a5df2fcae","result":{"text":"0xd1acf1eb9c956d1e90b650dd56bed57a5df2fcae","format":{"format":0,"formatName":"QR_CODE"}}}
|
|
|
+ const qrCodeSuccessCallback = (decodedText, decodedResult) => {
|
|
|
+ /* handle success */
|
|
|
+ $('#address').val(decodedText);
|
|
|
+ };
|
|
|
+ const config = { fps: 10, qrbox: 300 };
|
|
|
+
|
|
|
+ // If you want to prefer back camera
|
|
|
+ html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);
|
|
|
+}
|
|
|
+</script>
|
|
|
</body>
|
|
|
|
|
|
</html>
|
