Merge branch 'master' of http://git.choozmo.com:3000/choozmo/NFTBoard into master

index.html

@@ -3295,16 +3295,19 @@
         <div class="container-fluid">
             <table id="mytab" class="table">
                 <thead class="llll">
-                    <tr>
+                    <tr class="small">
                         <th scope="col">#</th>
                         <th scope="col">Name</th>
                         <th scope="col">Assets</th>
-                        <th scope="col">Collecyion Net Worth</th>
-                        <th scope="col">Volume (All Time)</th>
-                        <th scope="col">Sales (All Time)</th>
+                        <th scope="col">Collection<br>Net Worth</th>
+                        <th scope="col">Volume(7d)</th>
+                        <th scope="col">Sales(7d)</th>
+                        <th scope="col">Volume(All Time)</th>
+                        <th scope="col">Sales(All Time)</th>
                         <th scope="col">Last 7 Days</th>
                     </tr>
                 </thead>
+<<<<<<< HEAD
                 <tbody>
                     <tr>
                         <th scope="row">1</th>
@@ -3356,9 +3359,12 @@
                     </tr>
 
                 </tbody>
+=======
+                <tbody id="pc"></tbody>
+>>>>>>> f0b3a782a99e534a20dc4cc90fd25109a1ad1792
             </table>
             <div class="sec07-table-button">
-                <button class="data-button">完整數據</button>
+                <button class="showdata data-button">完整數據</button>
             </div>
         </div>
     </section>
@@ -3382,50 +3388,11 @@
                         <th scope="col">Last 7 Days</th>
                     </tr>
                 </thead>
-                <tbody>
-                    <tr>
-                        <th scope="row">1</th>
-                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/cryptopunks.png"
-                                alt="">CryptoPunkse</td>
-                        <td>10000</td>
-                        <td><img class="data-line"
-                                src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/cryptopunks.png"
-                                alt=""></td>
-                    </tr>
-                    <tr>
-                        <th scope="row">2</th>
-                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/artblocks.png" alt="">Art
-                            Blocks</td>
-                        <td>50,357</td>
-                        <td><img class="data-line"
-                                src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/artblocks.png"
-                                alt=""></td>
-
-                    </tr>
-                    <tr>
-                        <th scope="row">3</th>
-                        <td><img src="https://s3.coinmarketcap.com/generated/nft/collections/sorare.png" alt="">Sorare
-                        </td>
-                        <td>310,463 </td>
-                        <td><img class="data-line"
-                                src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/sorare.png"
-                                alt=""></td>
-
-                    </tr>
-                    <tr>
-                        <th scope="row">4</th>
-                        <td> <img src="https://s3.coinmarketcap.com/generated/nft/collections/thesandbox.png" alt="">The
-                            Sandbox</td>
-                        <td>87,420 </td>
-                        <td><img class="data-line"
-                                src="https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/thesandbox.png"
-                                alt=""></td>
-                    </tr>
-
+                <tbody id="mobile">
                 </tbody>
             </table>
             <div class="sec07-table-button">
-                <button class="data-button">完整數據</button>
+                <button class="showdata data-button">完整數據</button>
             </div>
         </div>
     </section>
@@ -3460,6 +3427,64 @@
     <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>
+$(document).ready(function() {
+    function get_data(limit=5) {
+        var mobile_temp = '';
+        var pc_temp = '';
+
+        $.get("https://api.coinmarketcap.com/data-api/v3/nft/collections?start=0&limit=" + limit, function(result) {
+            for(var i=0; i < limit; i++) {
+                var obj = result.data.collections[i];
+                var rank = obj.rank;
+                var slug = obj.slug;
+                var logo = 'https://s3.coinmarketcap.com/generated/nft/collections/' + slug + '.png';
+                var website = obj.website;
+                var name = obj.name;
+                var assets = obj.transferUniqueAssetsAT;
+                var collection_net_worth = obj.netWorth;
+                var volume_7d = obj.volume7d;
+                var sales_7d = obj.sales7d;
+                var volume_all_time = obj.volumeAT;
+                var sales_all_time = obj.salesAT;
+                var last_7_days = 'https://s3.coinmarketcap.com/generated/sparklines/nft/collection/web/30d/' + slug +'.png';
+                
+                mobile_temp += ' \
+                    <tr> \
+                        <th scope="row">' + rank + '</th> \
+                        <td><a href="' + website + '" target="_blank" style="text-decoration: none;color:black;"><img class="me-2 img-fluid" src="' + logo + '" alt="' + name + '">' + name + '</a></td> \
+                        <td>' + assets + '</td> \
+                        <td><img class="data-line" src="' + last_7_days + '" alt="' + name + '"></td> \
+                    </tr>';
+                
+                pc_temp += ' \
+                    <tr class="small"> \
+                        <th scope="row">' + rank + '</th> \
+                        <td><a href="' + website + '" target="_blank" style="text-decoration: none;color:black;"><img class="me-2" src="' + logo + '" alt="' + name + '" style="height:40px;width:auto;">' + name + '</a></td> \
+                        <td>' + assets + '</td> \
+                        <td>' + collection_net_worth + '</td> \
+                        <td>' + volume_7d + '</td> \
+                        <td>' + sales_7d + '</td> \
+                        <td>' + volume_all_time + '</td> \
+                        <td>' + sales_all_time + '</td> \
+                        <td><img class="data-line" src="' + last_7_days + '" alt="' + name + '"></td> \
+                    </tr>';
+            }
+
+            $('#mobile').html(mobile_temp);
+            $('#pc').html(pc_temp);
+        });
+    }
+
+    get_data();
+        
+	// 完整數據
+    $('.showdata').click(function() {
+		get_data(100);
+	});
+});
+</script>
 </body>
 
 </html>