From 5fb5c87cc6bc36bc7d1344c2b8c14b960213fc79 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Sun, 15 Dec 2024 09:59:11 +1100
Subject: [PATCH] Add google adsense

---
 www/.nvmrc                 |  1 +
 www/pages/badges/index.vue | 51 ++++++++++++++++++++++++++------------
 www/pages/index.vue        | 17 +++++++++++++
 www/pages/stats/_id.vue    | 16 ++++++++++++
 4 files changed, 69 insertions(+), 16 deletions(-)
 create mode 100644 www/.nvmrc

diff --git a/www/.nvmrc b/www/.nvmrc
new file mode 100644
index 0000000..67e145b
--- /dev/null
+++ b/www/.nvmrc
@@ -0,0 +1 @@
+v20.18.0
diff --git a/www/pages/badges/index.vue b/www/pages/badges/index.vue
index 1a1c315..cc6e7b4 100644
--- a/www/pages/badges/index.vue
+++ b/www/pages/badges/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="my-badges-container container">
     <b-container fluid="lg">
-      <b-row class="badges ">
-        <b-col lg="12">
+      <b-row class="badges">
+        <b-col lg="3" md="6" sm="12" v-for="badge in badges" :key="badge.ulid" class="mb-4">
           <b-card
             border-variant="primary"
             header-bg-variant="primary"
@@ -11,20 +11,13 @@
             :header="badge.label"
             :sub-title="badgeCreated(badge.CreatedAt)"
             bg-variant="light"
-            v-for="badge in badges"
-            :key="badge.ulid"
-            class="my-badge"
+            class="my-badge h-100"
           >
-            <b-card-text> </b-card-text>
-
             <b-card-text>
-              <b-link :href="statsUrl(badge)"><img :src="badgeUrl(badge)" class="my-badge" /></b-link>
+              <b-link :href="statsUrl(badge)">
+                <img :src="badgeUrl(badge)" class="img-fluid my-badge" alt="Badge" />
+              </b-link>
             </b-card-text>
-
-            <a href="#" class="card-link" style="display:none"><svg></svg></a>
-            <b-link href="#" class="card-link" style="display:none"
-              >Another link</b-link
-            >
           </b-card>
         </b-col>
       </b-row>
@@ -71,9 +64,35 @@ export default {
 </script>
 <style lang="scss">
 .my-badges-container {
-  .badges {
-    .my-badge {
-      margin-top: 4vh;
+  padding: 4rem 0;
+  background-color: #f8f9fa;
+
+  h2 {
+    color: #343a40;
+    font-weight: 600;
+  }
+
+  .badge-card {
+    transition: transform 0.3s ease-in-out;
+    border: none;
+    overflow: hidden;
+
+    &:hover {
+      transform: translateY(-5px);
+    }
+
+    .card-header {
+      border-bottom: none;
+    }
+
+    .badge-link {
+      display: block;
+      text-align: center;
+    }
+
+    .badge-image {
+      max-width: 200px;
+      margin: 0 auto;
     }
   }
 }
diff --git a/www/pages/index.vue b/www/pages/index.vue
index cc2e79e..9a536c9 100644
--- a/www/pages/index.vue
+++ b/www/pages/index.vue
@@ -163,6 +163,23 @@
           >
         </b-col>
       </b-row>
+      <b-row class="mt-5">
+        <b-col>
+          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2599506592075808"
+               crossorigin="anonymous"></script>
+          <!-- badger -->
+          <ins class="adsbygoogle"
+               style="display:block"
+               data-ad-client="ca-pub-2599506592075808"
+               data-ad-slot="9291316096"
+               data-ad-format="auto"
+               data-full-width-responsive="true"></ins>
+          <script>
+               (adsbygoogle = window.adsbygoogle || []).push({});
+          </script>
+        </b-col>
+      </b-row>
+
     </b-container>
   </div>
 </template>
diff --git a/www/pages/stats/_id.vue b/www/pages/stats/_id.vue
index 6b691f7..7a532ba 100644
--- a/www/pages/stats/_id.vue
+++ b/www/pages/stats/_id.vue
@@ -25,6 +25,22 @@
           </b-button>
         </b-col>
       </b-row>
+      <b-row class="mt-5">
+        <b-col>
+          <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2599506592075808"
+               crossorigin="anonymous"></script>
+          <!-- badger -->
+          <ins class="adsbygoogle"
+               style="display:block"
+               data-ad-client="ca-pub-2599506592075808"
+               data-ad-slot="9291316096"
+               data-ad-format="auto"
+               data-full-width-responsive="true"></ins>
+          <script>
+               (adsbygoogle = window.adsbygoogle || []).push({});
+          </script>
+        </b-col>
+      </b-row>
     </b-container>
   </div>
 </template>