From f2294d7da063e05ee81befb27173b791bccdc2c8 Mon Sep 17 00:00:00 2001
From: ManeraKai <manerakai@protonmail.com>
Date: Tue, 28 Jun 2022 10:31:34 +0300
Subject: fixing & refining About Page #368

---
 src/pages/options/index.html        | 31 ++++++++++++++++++++++++++++++-
 src/pages/options/index.pug         |  1 +
 src/pages/options/widgets/about.pug | 35 +++++++++++++++++------------------
 3 files changed, 48 insertions(+), 19 deletions(-)

(limited to 'src/pages/options')

diff --git a/src/pages/options/index.html b/src/pages/options/index.html
index f438ad02..6d97cfac 100644
--- a/src/pages/options/index.html
+++ b/src/pages/options/index.html
@@ -50,11 +50,16 @@
                   <path d="M20.5 3l-.16.03L15 5.1 9 3 3.36 4.9c-.21.07-.36.25-.36.48V20.5c0 .28.22.5.5.5l.16-.03L9 18.9l6 2.1 5.64-1.9c.21-.07.36-.25.36-.48V3.5c0-.28-.22-.5-.5-.5zM10 5.47l4 1.4v11.66l-4-1.4V5.47zm-5 .99l3-1.01v11.7l-3 1.16V6.46zm14 11.08l-3 1.01V6.86l3-1.16v11.84z"></path>
                 </svg><a href="#maps" data-localise="__MSG_maps__">Maps</a>
           </div>
-          <div class="title"> 
+          <div class="title">
                 <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
                   <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"></path>
                 </svg><a href="#sendTargets" data-localise="__MSG_sendFiles__">Send Files</a>
           </div>
+          <div class="title">
+                <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="currentColor">
+                  <path d="M11 17h2v-6h-2Zm1-8q.425 0 .713-.288Q13 8.425 13 8t-.287-.713Q12.425 7 12 7t-.712.287Q11 7.575 11 8t.288.712Q11.575 9 12 9Zm0 13q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3a.35 2.325 5.675Q8.65 20 12 20Zm0-8Z"></path>
+                </svg><a href="#about" data-localise="__MSG_about">About</a>
+          </div>
         </section>
     <div id="pages">
       <section class="option-block" id="general_page">
@@ -1994,6 +1999,30 @@
         </div>
         <script type="module" src="./widgets/sendTargets.js"></script>
       </section>
+      <section class="option-block" id="about_page"> 
+        <div class="some-block option-block">
+          <h1 data-localise="__MSG_about__">About</h1>
+        </div>
+        <hr>
+        <div class="about">
+          <div class="some-block option-block">
+            <h4>Donate: ♥️</h4>
+            <h4><a href='https://libredirect.github.io/donate'>https://libredirect.github.io/donate</a> </h4>
+          </div>
+          <div class="some-block option-block">
+            <h4>FAQ:</h4>
+            <h4><a href='https://libredirect.github.io/faq'>https://libredirect.github.io/faq</a></h4>
+          </div>
+          <div class="some-block option-block">
+            <h4>Docs:</h4>
+            <h4><a href='https://libredirect.github.io/docs'>https://libredirect.github.io/docs</a></h4>
+          </div>
+          <div class="some-block option-block">
+            <h4>Source Code:</h4>
+            <h4><a href='https://libredirect.github.io/source_code'>https://libredirect.github.io/source_code</a></h4>
+          </div>
+        </div>
+      </section>
     </div>
   </body>
   <script type="module" src="./index.js"></script>
diff --git a/src/pages/options/index.pug b/src/pages/options/index.pug
index 9198c0f3..553f918f 100644
--- a/src/pages/options/index.pug
+++ b/src/pages/options/index.pug
@@ -31,5 +31,6 @@ html#elementToShowWithJavaScript(lang="en")
             include ./widgets/translate.pug
             include ./widgets/maps.pug
             include ./widgets/sendTargets.pug
+            include ./widgets/about.pug
 
     script(type="module" src="./index.js")
\ No newline at end of file
diff --git a/src/pages/options/widgets/about.pug b/src/pages/options/widgets/about.pug
index 67897e70..954522bb 100644
--- a/src/pages/options/widgets/about.pug
+++ b/src/pages/options/widgets/about.pug
@@ -1,18 +1,17 @@
-doctype html
-
-img(src='./assets/images/libredirect.png')
-| Libredirect Icon
-img
-
-p
-  | Homepage -  
-  a(href='https://libredirect.github.io/') https://libredirect.github.io
-p
-  | FAQ - 
-  a(href='https://libredirect.github.io/faq.html') https://libredirect.github.io/faq.html
-p
-  | Docs - 
-  a(href='https://libredirect.github.io/docs.html') https://libredirect.github.io/docs.html
-p
-  | Github - 
-  a(href='https://github.com/libredirect/libredirect') https://github.com/libredirect/libredirect
+section#about_page.option-block 
+  .some-block.option-block
+    h1(data-localise="__MSG_about__") About
+  hr
+  .about
+    .some-block.option-block
+      h4 Donate: ♥️
+      h4 <a href='https://libredirect.github.io/donate'>https://libredirect.github.io/donate</a> 
+    .some-block.option-block
+      h4 FAQ:
+      h4 <a href='https://libredirect.github.io/faq'>https://libredirect.github.io/faq</a>
+    .some-block.option-block
+      h4 Docs:
+      h4 <a href='https://libredirect.github.io/docs'>https://libredirect.github.io/docs</a>
+    .some-block.option-block
+      h4 Source Code:
+      h4 <a href='https://libredirect.github.io/source_code'>https://libredirect.github.io/source_code</a>
\ No newline at end of file
-- 
cgit 1.4.1