⚡ feat : add direct link for each project

heynzar · Dec 28, 2024 · 5f8eb6c · 5f8eb6c
1 parent f82ec75
commit 5f8eb6c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -126,21 +126,35 @@ <h3>Customize your preferences.</h3>
     <section id="info-section" class="hidden">
       <main class="main-dialog">
         <header class="flex-row-between">
-          <span></span>
+          <h2 id="info-title">About</h2>
           <button id="x-info" class="button-secondary">✖</button>
         </header>
-        <div>
+        <div id="info-main">
           <h3>
+            Arehna is a Sadaqa Jaria (ongoing charity). <br />
             Your support helps us improve Arehna and bring it to more people.
           </h3>
-          <span>جَزَاكَ ٱللَّٰهُ خَيْرًا</span>
+          <div class="flex-row-between">
+            <button id="support-arehna" class="key__button_1 max-content">
+              <a href="https://buymeacoffee.com/heynzar" target="_blank"
+                >Support Arehna</a
+              >
+            </button>
+            <h4>جَزَاكَ ٱللَّٰهُ خَيْرًا</h4>
+          </div>
         </div>
 
         <footer id="info-footer">
-          <a href="https://arehna.nzar.dev/" target="_blank">arehna.nzar.dev</a>
+          <span
+            >🔗
+            <a href="https://arehna.nzar.dev/" target="_blank">
+              arehna.nzar.dev</a
+            ></span
+          >
+
           <span
             >Developed by
-            <a href="https://nzar.dev/" target="_blank">nzar</a></span
+            <a href="https://nzar.dev/" target="_blank">Nzar</a></span
           >
         </footer>
       </main>

diff --git a/style.css b/style.css
@@ -141,7 +141,8 @@ section {
   margin-bottom: 16px;
 }
 
-#app-settings h2 {
+#app-settings h2,
+#info-title {
   font-size: 1.4rem;
   font-weight: 600;
 }
@@ -399,6 +400,21 @@ footer {
   color: white;
 }
 
+#info-main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: baseline;
+  gap: 20px;
+  margin: 5px 0px 25px 0px;
+}
+
+#info-main h3,
+h4 {
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
 #info-footer {
   width: 100%;
   display: flex;
@@ -407,7 +423,27 @@ footer {
   padding: 10px 0px 0px 0px;
 }
 
-#info-footer span,
-a {
+#info-footer span {
   font-size: 0.8rem;
 }
+
+#info-footer a {
+  font-size: 0.8rem;
+  color: white;
+  transition: color 0.2s ease;
+}
+
+#info-footer a:hover {
+  color: #888;
+}
+
+.max-content {
+  max-width: max-content;
+  font-size: 1rem;
+  padding: 0px 12px;
+}
+
+#support-arehna a {
+  color: #2a2a2a;
+  text-decoration: none;
+}