Add images for logo and splash screen

Also added project informations in the about page and updated the README

README.md

@@ -1,8 +1,11 @@
 # FE_Charts
 Fire Emblem Charts is a mobile application that allows you to view the statistics of the characters in the game Fire Emblem Three Houses in the form of graphics.
 
-## Setup the server
+## Setup the app
 
-Copy the `.env-example` file and rename it to `.env`, then set the value of each variables corresponding to your environments.
+- Change the variables in the `database.php` file to match the server.
+- Change the `BASE_URL` constant in the `database.js` file with the host corresponding to the server.
 
-Install the dependencies with `npm install`, then run the server with `npm start`
+## Updating the catalogue
+
+After updating the catalogue, you must add a new row in the `Tbl_Catalogue` table with the new version of the catalogue and the date of the update.

mobile/config.xml

@@ -20,9 +20,44 @@
         <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
             <application android:usesCleartextTraffic="true" />
         </edit-config>
+        <icon density="ldpi" src="icons/android/Icon-36.png" />
+        <icon density="ldpi" src="icons/android/Icon-48.png" />
+        <icon density="ldpi" src="icons/android/Icon-72.png" />
+        <icon density="ldpi" src="icons/android/Icon-96.png" />
+        <icon density="ldpi" src="icons/android/Icon-144.png" />
+        <icon density="ldpi" src="icons/android/Icon-192.png" />
+        <splash src="res/screen/android/splash-port-ldpi.jpg" density="port-ldpi"/>
+        <splash src="res/screen/android/splash-land-ldpi.jpg" density="land-ldpi"/>
+        <splash src="res/screen/android/splash-port-mdpi.jpg" density="port-mdpi"/>
+        <splash src="res/screen/android/splash-land-mdpi.jpg" density="land-mdpi"/>
+        <splash src="res/screen/android/splash-port-hdpi.jpg" density="port-hdpi"/>
+        <splash src="res/screen/android/splash-land-hdpi.jpg" density="land-hdpi"/>
+        <splash src="res/screen/android/splash-port-xhdpi.jpg" density="port-xhdpi"/>
+        <splash src="res/screen/android/splash-land-xhdpi.jpg" density="land-xhdpi"/>
+        <splash src="res/screen/android/splash-port-xxhdpi.jpg" density="port-xxhdpi"/>
+        <splash src="res/screen/android/splash-land-xxhdpi.jpg" density="land-xxhdpi"/>
+        <splash src="res/screen/android/splash-port-xxxhdpi.jpg" density="port-xxxhdpi"/>
+        <splash src="res/screen/android/splash-land-xxxhdpi.jpg" density="land-xxxhdpi"/>
     </platform>
     <platform name="ios">
         <allow-intent href="itms:*" />
         <allow-intent href="itms-apps:*" />
+        <icon src="icons/ios/Icon-29.png" height="29" width="29" />
+        <icon src="icons/ios/Icon-40.png" height="40" width="40" />
+        <icon src="icons/ios/Icon-50.png" height="50" width="50" />
+        <icon src="icons/ios/Icon-57.png" height="57" width="57" />
+        <icon src="icons/ios/Icon-58.png" height="58" width="58" />
+        <icon src="icons/ios/Icon-60.png" height="60" width="60" />
+        <icon src="icons/ios/Icon-72.png" height="72" width="72" />
+        <icon src="icons/ios/Icon-76.png" height="76" width="76" />
+        <icon src="icons/ios/Icon-80.png" height="80" width="80" />
+        <icon src="icons/ios/Icon-100.png" height="100" width="100" />
+        <icon src="icons/ios/Icon-114.png" height="114" width="114" />
+        <icon src="icons/ios/Icon-120.png" height="120" width="120" />
+        <icon src="icons/ios/Icon-144.png" height="144" width="144" />
+        <icon src="icons/ios/Icon-152.png" height="152" width="152" />
+        <icon src="icons/ios/Icon-167.png" height="167" width="167" />
+        <icon src="icons/ios/Icon-172.png" height="172" width="172" />
+        <icon src="icons/ios/Icon-180.png" height="180" width="180" />
     </platform>
 </widget>

mobile/package-lock.json

@@ -279,6 +279,11 @@
             "resolved": "https://registry.npmjs.org/cordova-plugin-network-information/-/cordova-plugin-network-information-2.0.2.tgz",
             "integrity": "sha512-NwO3qDBNL/vJxUxBTPNOA1HvkDf9eTeGH8JSZiwy1jq2W2mJKQEDBwqWkaEQS19Yd/MQTiw0cykxg5D7u4J6cQ=="
         },
+        "cordova-plugin-splashscreen": {
+            "version": "5.0.3",
+            "resolved": "https://registry.npmjs.org/cordova-plugin-splashscreen/-/cordova-plugin-splashscreen-5.0.3.tgz",
+            "integrity": "sha512-rnoDXMDfzoeHDBvsnu6JmzDE/pV5YJCAfc5hYX/Mb2BIXGgSjFJheByt0tU6kp3Wl40tSyFX4pYfBwFblBGyRg=="
+        },
         "cordova-plugin-whitelist": {
             "version": "1.3.4",
             "resolved": "https://registry.npmjs.org/cordova-plugin-whitelist/-/cordova-plugin-whitelist-1.3.4.tgz",

mobile/package.json

@@ -17,7 +17,8 @@
     "cordova-browser": "^6.0.0",
     "cordova-ios": "^5.1.1",
     "cordova-plugin-device": "^2.0.3",
-    "cordova-plugin-network-information": "^2.0.2"
+    "cordova-plugin-network-information": "^2.0.2",
+    "cordova-plugin-splashscreen": "^5.0.3"
   },
   "devDependencies": {
     "cordova-plugin-whitelist": "^1.3.4"
@@ -26,7 +27,8 @@
     "plugins": {
       "cordova-plugin-whitelist": {},
       "cordova-plugin-device": {},
-      "cordova-plugin-network-information": {}
+      "cordova-plugin-network-information": {},
+      "cordova-plugin-splashscreen": {}
     },
     "platforms": [
       "android",

mobile/www/css/index.css

@@ -20,4 +20,19 @@
 
 .data-table-title {
     text-align: center;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.logo {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+h1.about, h2.about, h3.about {
+    color: #1f3487;
+    margin-top: 0px;
 }

mobile/www/js/routes.js

@@ -80,7 +80,13 @@ routes = [
     },
     {
         path: '/about/',
-        templateUrl: './pages/about.html'
+        templateUrl: './pages/about.html',
+        on: {
+            pageAfterIn: (e, page) => {
+                if (feData.version)
+                    $$("#catalogue-version").text(feData.version);
+            },
+        }
     },
 ];
 

mobile/www/pages/about.html

@@ -12,9 +12,29 @@
             </div>
         </div>
         <div class="page-content">
-            <div class="block block-strong">
-                <p>Aboutpage</p>
+            <div class="block block-strong text-center">
+                <section>
+                    <img class="logo" src="/img/logo.png">
+                    <h1 class="about">Fire Emblem Charts</h1>
+                </section>
+                <section>
+                    <h3 class="about">Versions</h3>
+                    <p>App : 1.0.0</p>
+                    <p>Catalogue : <span id="catalogue-version"></span></p>
+                </section>
+                <section>
+                    <h3 class="about">About the app</h3>
+                        <p>
+                            Fire Emblem Charts is a mobile application that allows you to view the statistics of the
+                            characters in the game Fire Emblem Three Houses in the form of graphics.<br>
+                            <a class="link external" href="https://github.com/dario-cfpt/FE_Charts/">Source code</a>
+                        </p>
+                </section>
+                <section>
+                    <h3 class="about">Developer</h3>
+                    <p>Dario Genga</p>
+                </section>
             </div>
         </div>
     </div>
-</div>
+</div>