add donation info card, adsense

SethClydesdale · Dec 13, 2024 · 0649167 · 0649167
1 parent e5b62f6
commit 0649167
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 5 deletions.
diff --git a/donate/index.html b/donate/index.html
@@ -37,19 +37,24 @@ <h1><a href="../" id="home-link">Colloquial Kansai Dictionary</a></h1>
     <div id="content">
       <div class="content-block">
         <h2 class="title center" id="genki-Donate">Donate</h2>
+        <div class="info-box">
+          <div class="info-icon"><i class="fa">&#xf05a;</i></div>
+          <div class="info-text">If you're a student or someone struggling to make ends meet, please don't worry about donating and consider saving the money for your own expenses. The thought or your vocal support are more than enough!</div>
+        </div>
+
         <p>Colloquial Kansai Dictionary wouldn't be possible without <strong>Colloquial Kansai Japanese</strong> by DC Palter, so please consider purchasing a copy of the book to support the author if you haven't yet. You can find out where to purchase the book via the publisher's website below.</p>
 
         <ul>
           <li><a href="https://www.tuttlepublishing.com/language-books/japanese/phrasebooks/colloquial-kansai-japanese" target="_blank"><strong>Tuttle Publishing</strong></a></li>
         </ul><br>
 
-        <p><a href="https://github.com/SethClydesdale">Seth Clydesdale</a> created Colloquial Kansai Dictionary to help make it easier to look up and review points for Colloquial Kansai Japanese. As an open source developer, my only source of income for my works are donations. So if you found this project helpful and would like to support my work, please see below for the different ways that you can contribute.</p>
+        <p><a href="https://github.com/SethClydesdale">Seth Clydesdale</a> created Colloquial Kansai Dictionary to help make it easier to look up and review points for Colloquial Kansai Japanese. If you found this project helpful and would like to support my work, please see below for the different ways that you can contribute.</p>
 
         <ul>
           <li>Sponsor me on <a href="https://github.com/sponsors/SethClydesdale"><strong>GitHub</strong></a>.</li>
           <li>Send me a tip via <a href="https://paypal.me/sethc95/"><strong>PayPal</strong></a>.</li>
           <li>Buy me a coffee via <a href="https://ko-fi.com/sethc95"><strong>Ko-fi</strong></a>.</li>
-          <li>Buy me a gift from my Amazon Wishlist: <a href="https://www.amazon.com/hz/wishlist/ls/S7YILFHYK0IZ"><strong>US</strong></a> | <a href="https://www.amazon.jp/hz/wishlist/ls/31FKBIJPAGBAL"><strong>JP</strong></a>.</li>
+          <li>Buy me a gift from my <a href="https://www.amazon.com/hz/wishlist/ls/S7YILFHYK0IZ"><strong>Amazon Wishlist</strong></a>.</li>
         </ul>
 
         <p>You can also support my work in other ways.</p>

diff --git a/resources/css/stylesheet.css b/resources/css/stylesheet.css
@@ -1335,11 +1335,44 @@ ruby rt {
   z-index:9999;
 }
 
+.info-box {
+  color:#333;
+  background:#EFF;
+  border:1px solid #17A;
+  position:relative;
+  padding:5px;
+  padding-left:35px;
+  margin:5px auto;
+  text-align:left;
+  width:80%;
+  max-width:600px;
+}
+.info-icon {
+  color:#EFF;
+  background:#17A;
+  font-size:20px;
+  width:30px;
+  text-align:center;
+  position:absolute;
+  top:0;
+  left:0;
+  bottom:0;
+  display:flex;
+  justify-content:center;
+  align-items:center;
+}
+
 /* OS FIXES:DISABLED */
 /*.os-linux #quick-jisho-toggle {
   line-height:normal;
 }*/
 
+/* ADS */
+.ad-container {
+  text-align:center;
+  margin:20px 0;
+}
+
 
 /* RESPONSIVENESS */
 @media (max-width:1000px) {