Update About page

templates/about.php

@@ -1,3 +1,8 @@
+<?php
+
+require_once 'app/lib/Parsedown.php';
+
+?>
 <div class="row">
   <div class="col-lg-12">
     <div class="card">
@@ -8,13 +13,22 @@
           </div>
         </div><!-- ./row -->
       </div><!-- ./card-header -->
-      <div class="card-body text-center">
-        <h3><?php echo _("RaspAP") . " v" . RASPI_VERSION; ?></h3>
-        <h5><a href="https://github.com/billz/raspap-webgui/blob/master/LICENSE">GNU General Public License v3.0</a></h5>
-        <p><img class="authors" src="app/img/authors-8bit-200px.png"></p>
-        <p>RaspAP is a co-creation of <a href="https://github.com/billz">@billz</a> and <a href="https://github.com/sirlagz">@SirLagz</a><br />
-          with the contributions of our <a href="https://github.com/billz/raspap-webgui/graphs/contributors">community</a>.</p>
-          <p><i class="fab fa-github"></i> <a href="https://github.com/billz/raspap-webgui">https://github.com/billz/raspap-webgui</a></p>
+      <div class="card-body">
+
+        <!-- Nav tabs -->
+        <ul class="nav nav-tabs">
+          <li class="nav-item"><a class="nav-link active" href="#aboutgeneral" data-toggle="tab"><?php echo _("About"); ?></a></li>
+          <li class="nav-item"><a class="nav-link" href="#aboutsponsors" data-toggle="tab"><?php echo _("Sponsors"); ?></a></li>
+        </ul>
+        <!-- /.nav-tabs -->
+
+        <!-- Tab panes -->
+        <div class="tab-content">
+          <?php echo renderTemplate("about/general", $__template_data) ?>
+          <?php echo renderTemplate("about/sponsors", $__template_data) ?>
+        </div>
+        <!-- /.tab-content -->
+
       </div><!-- /.card-body -->
       <div class="card-footer"></div>
     </div><!-- /.card -->

templates/about/general.php

@@ -0,0 +1,22 @@
+<!-- about general tab -->
+<div class="tab-pane active" id="aboutgeneral">
+  <div class="row">
+    <div class="col-md-12">
+      <h1 class="mt-3"><?php echo _("RaspAP") . " v" . RASPI_VERSION; ?></h1>
+        <div class="ml-5"><img class="authors" src="app/img/raspAP-logo.png" style="width: 150px; height:150px"></div>
+        <div class="mt-3">RaspAP is a co-creation of <a href="https://github.com/billz">billz</a> and <a href="https://github.com/sirlagz">SirLagz</a>
+          with the contributions of our <a href="https://github.com/billz/raspap-webgui/graphs/contributors">developer community</a>
+          and <a href="https://crowdin.com/project/raspap">language translators</a>.</div>
+        <div class="mt-3">Learn more about joining the project as a <a href="https://github.com/billz/raspap-webgui/blob/master/CONTRIBUTING.md">code contributor</a>,
+        <a href="https://github.com/billz/raspap-webgui/wiki/Translations">translator</a> or <a href="https://github.com/billz/raspap-webgui/blob/master/BACKERS.md">financial sponsor</a>.</div>
+        <div class="mt-3 project-links">
+        <div class="row">
+          <div class="col-md-6">Project home <i class="fab fa-github"></i> <a href="https://github.com/billz/raspap-webgui">raspap-webgui</a></div>
+          <div class="col-md-6">Twitter <span style="color: #55acee"><i class="fab fa-twitter"></i></span> <a href="https://twitter.com/rasp_ap">@RaspAP</a></div>
+          <div class="col-md-6">Reddit <span style="color: #ff4500"><i class="fab fa-reddit"></i></span> <a href="https://www.reddit.com/r/RaspAP/">/r/raspap</a></div>
+          <div class="col-md-6">License <i class="fas fa-balance-scale"></i> <a href="https://github.com/billz/raspap-webgui/blob/master/LICENSE">GPL-3.0</a></div>
+        </div>
+        </div>
+    </div>
+  </div><!-- /.row -->
+</div><!-- /.tab-pane | general tab -->

templates/about/sponsors.php

@@ -0,0 +1,12 @@
+<!-- about sponsors tab -->
+<div class="tab-pane fade" id="aboutsponsors">
+  <div class="row">
+    <div class="col-md-12 mt-3">
+      <?php 
+      $Parsedown = new Parsedown();
+      $strContent = file_get_contents($_SERVER['DOCUMENT_ROOT'].'/BACKERS.md');
+      echo $Parsedown->text($strContent);
+      ?>
+    </div>
+  </div><!-- /.row -->
+</div><!-- /.tab-pane | sponsors tab -->