update

ArkCard-web/goto.js

@@ -7,10 +7,10 @@
 // });
 
 $(".sendbox").hide();
-$(document).on("click",".collectcontent",function (event) {
+$(document).on("click", ".collectcontent", function (event) {
   $(".sendbox").show(500);
   $(this).addClass("select");
-  $(".select").siblings().removeClass('select'); 
+  $(".select").siblings().removeClass('select');
 });
 
 $(document).on("click", ".close", function (event) {
@@ -23,56 +23,68 @@ $(document).on("click", ".close", function (event) {
 $(document).ready(function () {
   collecturl = location.search;
   getcollect = collecturl.split("?")
-  console.log(getcollect[0]);
-  console.log(getcollect[1]);
   var collectuserid = getcollect[1];
-    $.ajax({
-      method: "GET",
-      url: "https://api.ptt.cx:8228/collection/" + collectuserid + "",
-      // url:"https://api.ptt.cx:8228/collection/Uf161c92b16f84357987a78c2b4b47719",
-      dataType: "json",
-    })
-      .done(function (msg) {
-        console.log(msg);
-        // console.log(Object.keys(msg).length);
-        let msgLen =Object.keys(msg).length;
-        console.log(msgLen)
-        var collectcontent = '';
-        for(var i = 0; i < msgLen; i++){
-        collectcontent+='\
+  $.ajax({
+    method: "GET",
+    url: "https://api.ptt.cx:8228/collection/" + collectuserid + "",
+    // url: "https://api.ptt.cx:8228/collection/Uf161c92b16f84357987a78c2b4b47719",
+    dataType: "json",
+  })
+    .done(function (msg) {
+      console.log(msg);
+      // console.log(Object.keys(msg).length);
+      let msgLen = Object.keys(msg).length;
+      console.log(msgLen)
+      var collectcontent = '';
+      for (var i = 0; i < msgLen; i++) {
+        collectcontent += '\
           <div class="collectcontent col">\
-          <input style="display: none;" type="checkbox" value="'+msg[i].id+'" name="nftid" id="'+msg[i].id+'">\
-          <label for="'+msg[i].id+'">\
+          <input style="display: none;" type="checkbox" value="'+ msg[i].id + '" name="nftid" id="' + msg[i].id + '">\
+          <label for="'+ msg[i].id + '">\
           <div class="collectcard card h-100">\
               <a target="_blank">\
-                  <img src="'+msg[i].imgurl+'"class="card-img-top" alt="...">\
+                  <img src="'+ msg[i].imgurl + '"class="card-img-top" alt="...">\
               </a>\
               <div class="card-body p-2">\
                   <a target="_blank">\
-                      <h5 class="card-title pt-3">'+msg[i].title+'</h5>\
+                      <h5 class="card-title pt-3">'+ msg[i].title + '</h5>\
                   </a>\
                   <p class="card-text">\
-                     '+msg[i].context+' \
+                     '+ msg[i].context + ' \
                   </p>\
                   <p class="card-text row">\
                       <small class="text-muted col-6 px-1">\
                           <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "\
-                              src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>'+msg[i].cost+'</span>\
+                              src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>'+ msg[i].cost + '</span>\
                       </small>\
                       <small class="price col-6 px-0 text-center">\
-                          <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>'+msg[i].likes+'</span></small>\
+                          <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>'+ msg[i].likes + '</span></small>\
                       </p>\
               </div>\
           </div>\
           </label>\
         </div>';
-        }
+      }
 
-        $('.sec05-moblie-container').html(collectcontent);
-       
-      });
-  
+      $('.sec05-moblie-container').html(collectcontent);
+
+    });
+
+});
+
+$(".buybox").hide();
+$(document).on("click", ".nftmall", function (event) {
+  $(".buybox").show(500);
+  $(this).addClass("select");
+  $(".select").siblings().removeClass('select');
+});
+
+$(document).on("click", ".close", function (event) {
+  // $(this).siblings('.collectcard').removeClass('select'); 
+  $(".buybox").hide(500);
+  $(".nftmall").removeClass("select");
 });
+
 $.fn.serializeObject = function () {
   var o = {};
   var a = this.serializeArray();
@@ -123,7 +135,98 @@ $(".collect-send").submit(function (e) {
     });
   return false;
 });
-console.log(1);
+
+
+
+// 購買頁面
+$(document).ready(function () {
+  collecturl = location.search;
+  getcollect = collecturl.split("?")
+  var collectuserid = getcollect[1];
+  $.ajax({
+    method: "GET",
+    url: "https://api.ptt.cx:8228/shop/" + collectuserid + "",
+    // url: "https://api.ptt.cx:8228/shop/Uf161c92b16f84357987a78c2b4b47719",
+    dataType: "json",
+  })
+    .done(function (msg) {
+      console.log(msg);
+      // console.log(Object.keys(msg).length);
+      let msgLen = Object.keys(msg).length;
+      console.log(msgLen);
+      var nftmall = '';
+      var buybox = '';
+      for (var i = 0; i < msgLen; i++) {
+        nftmall += '\
+          <div class="nftmall col">\
+          <input style="display: none;" type="checkbox" value="'+ msg[i].id + '" name="nftidval" class="nftname" id="' + msg[i].id + '">\
+          <label for="'+ msg[i].id + '">\
+          <div class="collectcard card h-100">\
+              <a target="_blank">\
+                  <img src="'+ msg[i].imgurl + '"class="card-img-top" alt="...">\
+              </a>\
+              <div class="card-body p-2">\
+                  <a target="_blank">\
+                      <h5 class="card-title pt-3">'+ msg[i].title + '</h5>\
+                  </a>\
+                  <p class="card-text">\
+                     '+ msg[i].context + ' \
+                  </p>\
+                  <p class="card-text row">\
+                      <small class="text-muted col-6 px-1">\
+                          <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "\
+                              src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>'+ msg[i].cost + '</span>\
+                      </small>\
+                      <small class="price col-6 px-0 text-center">\
+                          <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>'+ msg[i].likes + '</span></small>\
+                      </p>\
+              </div>\
+          </div>\
+          </label>\
+        </div>';
+      }
+      $('.sec06-nft-mall').html(nftmall);
+
+    });
+
+});
+
+var data = document.getElementById('comments').value;
+
+$(".nft-buy").submit(function (e) {
+  /*	var formRef = $('#form1').serializeArray();
+    var jsonString = JSON.stringify(formRef);*/
+  var jsonInfo = $('.nft-buy').serializeObject();
+  var jsonString = JSON.stringify(jsonInfo);
+  console.log(jsonString);
+  let k = jsonInfo;
+  let nftproduct = k.nftidval;
+  console.log(nftproduct);
+ 
+  $.ajax({
+    type: 'GET',
+    url: "https://api.ptt.cx:8228/shop/" + collectuserid + "/" + nftproduct + "",
+    data: jsonString,
+    dataType: 'json',
+    success: function (data) {
+      console.log('購買成功: ' + data);
+      alert("購買成功");
+      // location.reload();
+    },
+    beforeSend: function () {
+      console.log('beforeSend');
+    },
+    complete: function () {
+      console.log('complete');
+    },
+    error: function (jqXHR, textStatus, errorThrown) {
+      console.log(JSON.stringify(jqXHR));
+      console.log("AJAX errr: " + textStatus + ' : ' + errorThrown);
+      console.log('送出失敗: ' + jqXHR.responseText);
+    }
+  });
+  return false;
+});
 
 // $(document).ready(function () {
 //   function get_data(){
@@ -141,12 +244,10 @@ console.log(1);
 //  });
 //  console.log(location.href);
 
-
+// Qrcode頁面
 $(document).ready(function () {
   url = location.search;
   getSearch = url.split("?")
-  console.log(getSearch[0]);
-  console.log(getSearch[1]);
   var userid = getSearch[1];
   function get_data() {
     $.ajax({

ArkCard-web/nftmall.html

@@ -0,0 +1,373 @@
+<!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">
+    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
+    <META HTTP-EQUIV="Expires" CONTENT="-1">
+    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
+    <title>ARK.Cards</title>
+
+    
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
+    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
+    <link rel="stylesheet" href="./style.css">
+</head>
+
+<body>
+    <section id="sec01" class="sec01 container-fluid px-0 mx-0 mb-5">
+        <div class="card bg-transparent text-white border-0">
+            <img src="./img/1618431559-GettyImages-1309739877.jpg" class="img-fluid" alt="...">
+            <div style="position: relative;" class="card-img-overlay p-0 d-flex align-items-end justify-content-center">
+                <h5 style="background: rgba(0,0,0,0.7); font-size: 16px; position: absolute; z-index: 20;" class="card-title p-4 w-50 text-center fw-bold">NFT商城</h5>
+                    
+            </div>
+        </div>
+    </section>
+    <form class="nft-buy" name="buynft" action="" id="comments">
+        <section id="sec05-moblie" class="sec05 my-4">
+            <div class="sec05-moblie container-fluid">
+                <div class="sec05-moblie-header">
+                    <h1 class="secn-title ps-2">NFT商品</h1>
+                </div>
+                <p class="text-start mb-2">※點選您喜歡的nft商品即可購買</p>
+
+                <div class="sec06-nft-mall row row-cols-1 row-cols-md-4 g-4">
+                    <!-- <div class="col">
+                        <div class="card h-100">
+                            <a target="_blank" href="">
+                                <img src="./img/sec05/sec05-1.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body p-2">
+                                <a target="_blank" href="">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <a target="_blank" href="">
+                                <img src="./img/sec05/sec05-2.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body p-2">
+                                <a target="_blank" href="">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <a target="_blank" href="./artist-course.html">
+                                <img src="./img/sec05/sec05-3.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body p-2">
+                                <a target="_blank" href="./artist-course.html">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <a target="_blank" href="./artist-course.html">
+                                <img src="./img/sec05/sec05-4.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body p-2">
+                                <a target="_blank" href="./artist-course.html">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div> -->
+                </div>
+            </div>
+            <!-- <div class="sec05-moblie container-fluid">
+                <div class="sec05-moblie-header">
+                    <h1 class="secn-title ps-2">運動</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">
+                            <a target="_blank" href="./artist-course.html">
+                                <img src="./img/sec05/5.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body">
+                                <a target="_blank" href="./artist-course.html">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <a target="_blank" href="./artist-course.html">
+                                <img src="./img/sec05/6.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body">
+                                <a target="_blank" href="./artist-course.html">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <a target="_blank" href="./artist-course.html">
+                                <img src="./img/sec05/7.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body">
+                                <a target="_blank" href="./artist-course.html">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <a target="_blank" href="./artist-course.html">
+                                <img src="./img/sec05/8.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body">
+                                <a target="_blank" href="./artist-course.html">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+    
+    
+            </div>
+            <div class="sec05-moblie container-fluid">
+                <div class="sec05-moblie-header">
+                    <h1 class="secn-title ps-2">藝術</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">
+                            <a target="_blank" href="./artist-course.html">
+                                <img src="./img/sec05/9.png" class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body">
+                                <a target="_blank" href="./artist-course.html">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <a target="_blank" href="./artist-course.html">
+                                <img src="./img/sec05/10.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body">
+                                <a target="_blank" href="./artist-course.html">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <a target="_blank" href="./artist-course.html">
+                                <img src="./img/sec05/11.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body">
+                                <a target="_blank" href="./artist-course.html">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col">
+                        <div class="card h-100">
+                            <a target="_blank" href="./artist-course.html">
+                                <img src="./img/sec05/12.png"class="card-img-top" alt="...">
+                            </a>
+                            <div class="card-body">
+                                <a target="_blank" href="./artist-course.html">
+                                    <h5 class="card-title">Lorem ipsum.</h5>
+                                </a>
+                                <p class="card-text">
+                                    Lorem ipsum dolor sit amet, 
+                                </p>
+                                <p class="card-text row">
+                                    <small class="text-muted col-6 px-1">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 10px; object-fit: cover; "
+                                            src="./img/sec05/Icon awesome-ethereum.png" alt=""><span>333</span>
+                                    </small>
+                                    <small class="price col-6 px-0 text-center">
+                                        <img class="mb-1 mx-1 d-inline" style="width: 12px; object-fit: cover; " src="./img/sec05/like.png" alt=""><span>333</span></small>
+                                    </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+    
+    
+            </div> -->
+        </section>
+        <div style="background: #484848;position: fixed; bottom:0px; z-index: 20;" class="buybox w-100 pt-2">
+            <div class="p-2">
+                <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="close btn text-white px-3">取消</button>
+                    <input style="border-radius: 30px; background:#fff; border: none;" class="send-btn px-3 ms-1 py-2" type="submit" value="購買">
+                </div>
+            </div>';
+        </div>
+    </form>
+  
+
+    <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();
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+        crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+        crossorigin="anonymous"></script>
+    <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>
+</body>
+
+</html>

ArkCard-web/style.css

@@ -73,4 +73,9 @@
   top: -30px;
   z-index: 30;
 }
+
+.select {
+  -webkit-filter: brightness(50%);
+          filter: brightness(50%);
+}
 /*# sourceMappingURL=style.css.map */

ArkCard-web/style.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAAA,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;CACzB;;AAED,AACI,MADE,CACF,CAAC,EADE,MAAM,CACT,CAAC,CAAA;EACG,eAAe,EAAE,IAAI;EACrB,KAAK,EAAC,IAAI;EACV,aAAa,EAAE,gBAAgB;CAClC;;AALL,AAMI,MANE,CAMF,EAAE,EANC,MAAM,CAMT,EAAE,CAAA;EACE,aAAa,EAAE,gBAAgB;CAClC;;AAGL,AACI,MADE,CACF,UAAU,CAAA;EACN,KAAK,EAAE,IAAI;CACd;;AAHL,AAII,MAJE,CAIF,WAAW,CAAA;EACP,WAAW,EAAE,GAAG;CACnB;;AANL,AAOI,MAPE,CAOF,EAAE,CAAA;EACE,UAAU,EAAC,OAAO;EAClB,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,MAAM;EACd,OAAO,EAAE,YAAY;CACxB;;AAGL,AACI,cADU,CACV,EAAE,CAAA;EACE,aAAa,EAAE,eAAe;EAC9B,aAAa,EAAE,aAAa;CAC/B;;AAGL,AAEI,MAFE,CAEF,oBAAoB,CAAA;EAChB,WAAW,EAAC,cAAc;CAC7B;;AAJL,AAKI,MALE,CAKF,uBAAuB,CAAC;EACpB,WAAW,EAAE,IAAI;CAyBpB;;AA/BL,AAOQ,MAPF,CAKF,uBAAuB,CAEnB,OAAO,CAAA;EACH,MAAM,EAAE,eAAe;CAC1B;;AATT,AAaY,MAbN,CAKF,uBAAuB,CAKnB,IAAI,CAGA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,OAAO;CAClB;;AAlBb,AAoBgB,MApBV,CAKF,uBAAuB,CAKnB,IAAI,CASA,KAAK,CACD,WAAW,CAAC;EACR,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,KAAK;CACnB;;AAEG,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAzBvD,AAwBgB,MAxBV,CAKF,uBAAuB,CAKnB,IAAI,CASA,KAAK,CAKD,UAAU,CAAC;IAEH,SAAS,EAAE,IAAI;GAEtB;;;AAOjB,AAAA,aAAa,CAAA;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAC,KAAK;EACT,OAAO,EAAE,EAAE;CACZ",
+    "mappings": "AAAA,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,UAAU;CACzB;;AAED,AACI,MADE,CACF,CAAC,EADE,MAAM,CACT,CAAC,CAAA;EACG,eAAe,EAAE,IAAI;EACrB,KAAK,EAAC,IAAI;EACV,aAAa,EAAE,gBAAgB;CAClC;;AALL,AAMI,MANE,CAMF,EAAE,EANC,MAAM,CAMT,EAAE,CAAA;EACE,aAAa,EAAE,gBAAgB;CAClC;;AAGL,AACI,MADE,CACF,UAAU,CAAA;EACN,KAAK,EAAE,IAAI;CACd;;AAHL,AAII,MAJE,CAIF,WAAW,CAAA;EACP,WAAW,EAAE,GAAG;CACnB;;AANL,AAOI,MAPE,CAOF,EAAE,CAAA;EACE,UAAU,EAAC,OAAO;EAClB,MAAM,EAAE,GAAG;EACX,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,MAAM;EACd,OAAO,EAAE,YAAY;CACxB;;AAGL,AACI,cADU,CACV,EAAE,CAAA;EACE,aAAa,EAAE,eAAe;EAC9B,aAAa,EAAE,aAAa;CAC/B;;AAGL,AAEI,MAFE,CAEF,oBAAoB,CAAA;EAChB,WAAW,EAAC,cAAc;CAC7B;;AAJL,AAKI,MALE,CAKF,uBAAuB,CAAC;EACpB,WAAW,EAAE,IAAI;CAyBpB;;AA/BL,AAOQ,MAPF,CAKF,uBAAuB,CAEnB,OAAO,CAAA;EACH,MAAM,EAAE,eAAe;CAC1B;;AATT,AAaY,MAbN,CAKF,uBAAuB,CAKnB,IAAI,CAGA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,OAAO;CAClB;;AAlBb,AAoBgB,MApBV,CAKF,uBAAuB,CAKnB,IAAI,CASA,KAAK,CACD,WAAW,CAAC;EACR,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,KAAK;CACnB;;AAEG,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAzBvD,AAwBgB,MAxBV,CAKF,uBAAuB,CAKnB,IAAI,CASA,KAAK,CAKD,UAAU,CAAC;IAEH,SAAS,EAAE,IAAI;GAEtB;;;AAOjB,AAAA,aAAa,CAAA;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAC,KAAK;EACT,OAAO,EAAE,EAAE;CACZ;;AACD,AAAA,OAAO,CAAA;EACH,MAAM,EAAE,eAAe;CAC1B",
     "sources": [
         "style.scss"
     ],

ArkCard-web/style.scss

@@ -77,4 +77,7 @@
   position: relative;
   top:-30px;
   z-index: 30;
+}
+.select{
+    filter: brightness(50%);
 }