style: minor ui improvements on donate page (merge pull request #43 f…

…rom osarthak/update-donate) update donate ui && fix footer links margin
Ahwxorg · Sep 3, 2023 · 530fbf5 · 530fbf5
2 parents 66b66a5 + 7d260df
commit 530fbf5
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 12 deletions.
diff --git a/donate.php b/donate.php
@@ -7,16 +7,71 @@
     <title>LibreY - Donate</title>
     </head>
     <body>
-        <div class="misc-container">
-               <h1>Donate to the original developer of LibreX, a project LibreY tries to improve.</h1>
-               <h2>Bitcoin (BTC):</h2>
-               <p>bc1qs43kh6tvhch02dtsp7x7hcrwj8fwe4rzy7lp0h</p>
-               <img src="static/images/btc.png" alt="btc qr code" width="150" height="150"/>
-               <h2>Monero (XMR):</h2>
-               <p>41dGQr9EwZBfYBY3fibTtJZYfssfRuzJZDSVDeneoVcgckehK3BiLxAV4FvEVJiVqdiW996zvMxhFB8G8ot9nBFqQ84VkuC</p>
-               <img src="static/images/xmr.png" alt="xmr qr code" width="150" height="150"/>
-               <h1>Donate to the person that forked LibreX into LibreY</h1>
-               <a href="https://ahwx.org/donate.php">Click here</a>
+    <div class="donate-container">
+      <!-- librex dev -->
+      <h2>
+        Donate to the original developer of Libre<span class="Y">X</span>, a
+        project LibreY tries to improve.
+      </h2>
+
+      <div class="flexbox-column">
+        <div class="qr-box">
+          <div class="inner-wrap">
+            <h3>Bitcoin [BTC]</h3>
+            <p>bc1qs43kh6tvhch02dtsp7x7hcrwj8fwe4rzy7lp0h</p>
+          </div>
+
+          <img
+            src="/static/images/btc.png"
+            height="160"
+            width="160"
+            alt="btc qr code"
+          />
+        </div>
+        <div class="qr-box">
+          <div class="inner-wrap">
+            <h3>Monero [XMR]</h3>
+            <p>
+              41dGQr9EwZBfYBY3fibTtJZYfssfRuzJZDSVDeneoVcgckehK3BiLxAV4FvEVJiVqdiW996zvMxhFB8G8ot9nBFqQ84VkuC
+            </p>
+          </div>
+          <img
+            src="/static/images/xmr.png"
+            height="160"
+            width="160"
+            alt="xmr qr code"
+          />
         </div>
 
+        <hr class="small-line" />
+
+        <!-- librey dev -->
+        <h2>
+          Donate to the person that forked LibreX into Libre<span class="Y"
+            >Y</span
+          >
+        </h2>
+
+        <div class="flex-row">
+          <a href="https://ko-fi.com/Ahwxorg" target="_blank"
+            ><img
+              src="/static/images/kofi.png"
+              alt="kifi img"
+              height="50"
+              width="auto"
+          /></a>
+
+          <a href="https://www.buymeacoffee.com/ahwx" target="_blank">
+            <img
+              src="/static/images/buy-me-a-coffee.png"
+              height="50"
+              width="auto"
+              alt="buy-me-a-coffee img"
+          /></a>
+        </div>
+      </div>
+    </div>
+
+
+
 <?php require "misc/footer.php"; ?>
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -319,8 +319,7 @@ a[title] {
 }
 
 .footer-container a {
-    margin-left: 15px;
-    margin-right: 15px;
+    margin-right: 30px;
 }
 
 .hide {
@@ -339,6 +338,60 @@ a[title] {
     color: #ff79c6;
 }
 
+
+/* donate css start */
+
+.donate-container {
+  width: 700px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 100px;
+}
+
+.flexbox-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+}
+
+.inner-wrap {
+  width: 500px;
+  padding: 20px;
+}
+
+.qr-box {
+  background-color: var(--search-container-background-color);
+  border: 1px solid var(--search-container-background-border);
+  border-radius: 10px 0px 0px 10px;
+  width: 100%;
+
+  display: flex;
+  word-wrap: break-word;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flex-row {
+  width: 700px;
+  height: auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+hr.small-line {
+  /* background-color: #f1f3f4; */
+  border: 2px solid var(--main-fg);
+  height: 0px;
+  width: 100px;
+  margin: 30px;
+  border-radius: 2px;
+}
+/* donate css end */
+
+
 @media only screen and (max-width: 1320px) {
     .special-result-container {
         position: relative;
@@ -485,4 +538,53 @@ a[title] {
         margin-left: 20px;
     }
 
+   /* dontate css start*/
+
+  .donate-container {
+    margin-bottom: 100px;
+    width: 95%;
+    text-align: center;
+  }
+
+  .qr-box {
+    display: flex;
+    flex-direction: column;
+    word-wrap: break-word;
+    align-items: center;
+    justify-content: space-between;
+    word-wrap: break-word;
+    height: auto;
+  }
+
+  .qr-box {
+    border-radius: 10px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .inner-wrap {
+    width: 80%;
+    text-align: center;
+  }
+
+  .qr-box img {
+    width: 40%;
+    height: auto;
+    padding: 20px;
+  }
+
+  .flex-row {
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+    width: 0;
+  }
+
+  .flex-row a img {
+    width: 220px;
+    height: auto;
+  }
+  /* donate css end */
+
+
 }
diff --git a/static/images/buy-me-a-coffee.png b/static/images/buy-me-a-coffee.png
diff --git a/static/images/kofi.png b/static/images/kofi.png