Add ThemeShowcase

.gitignore

@@ -17,6 +17,7 @@ $RECYCLE.BIN/
 log.txt
 npm-debug.log*
 
+/.yarn
 /.idea
 /.ionic
 /.sass-cache

src/router/index.ts

@@ -12,6 +12,7 @@ import WallCat from '../views/WallCat.vue'
 import Tipper3 from '../views/Tipper3.vue'
 import BetterAperture from '../views/BetterAperture.vue'
 import Duo from '../views/Duo.vue'
+import ThemeShowcase from '@/views/ThemeShowcase.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -76,6 +77,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Duo',
     component: Duo,
   },
+  {
+    path: '/details/ThemeShowcase',
+    name: 'ThemeShowcase',
+    component: ThemeShowcase,
+  },
 ]
 
 const router = createRouter({

src/views/Apps.vue

@@ -89,6 +89,25 @@
         </ion-toolbar>
       </ion-header>
       <ion-grid>
+        <ion-row class="column-standard">
+    <ion-col size="auto" button @click="() => router.push('/details/ThemeShowcase')">
+      <img src="../assets/Icon_ThemeShowcase.png" class="icon">
+    </ion-col>
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/ThemeShowcase')">
+        <ion-row>
+          <ion-column><h4 class="size-appname">ThemeShowcase</h4></ion-column>
+        </ion-row>
+        <ion-row>
+          <ion-column button @click="() => router.push('/details/ThemeShowcase')"><ion-icon :icon="logoAndroid" class="size-appname-icon hidden-link"/></ion-column>
+        </ion-row>
+    </ion-col>
+    <ion-col>
+
+    </ion-col>
+    <ion-col class="download-column">
+      <ion-button shape="round" href="https://f2.puffercat.xyz/PuffercatApps/ThemeShowcase-1.0b.apk"><ion-icon :icon="arrowDown" /></ion-button>
+    </ion-col>
+  </ion-row>
 <ion-row class="column-standard">
     <ion-col size="auto" button @click="() => router.push('/details/PufferIcons')">
       <img src="../assets/Icon_PufferIcons.png" class="icon">

src/views/ThemeShowcase.vue

@@ -0,0 +1,213 @@
+<template>
+    <ion-page>
+      <ion-header>
+        <ion-toolbar>
+    <ion-buttons slot="start">
+    <ion-back-button default-href="/"></ion-back-button>
+  </ion-buttons>
+          <ion-title>ThemeShowcase</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content :fullscreen="true">
+        <ion-header collapse="condense">
+          <ion-toolbar>
+            <ion-title size="large">ThemeShowcase</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-grid>
+    <ion-row class="column-standard2">
+      <ion-col class="bannerColumn">
+        
+      </ion-col>
+    </ion-row>
+    <ion-row class="column-standard">
+      <ion-col size="auto">
+        <img src="../assets/Icon_ThemeShowcase.png" class="icon">
+      </ion-col>
+      <ion-col size="auto" class="description-column">
+          <ion-row style="padding: 0px; margin: 0px;">
+            <ion-column style="padding: 0px; margin: 0px;"><p class="size-appname" style="padding: 0px; margin: 0px;"><strong>ThemeShowcase</strong></p></ion-column>
+          </ion-row>
+          <ion-row style="padding: 0px;">
+            <ion-column><p class="size-appname-icon">version 1.0 (Beta)</p></ion-column>
+          </ion-row>
+          <ion-row style="padding: 0px;">
+            <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
+          </ion-row>
+      </ion-col>
+    </ion-row>
+    <ion-row class="column-standard2">
+      <ion-col>
+        <ion-button href="https://f2.puffercat.xyz/PuffercatApps/ThemeShowcase-1.0b.apk" expand="full" shape="round" style="margin: 0px;" download="PufferIcons-latest.apk">Download</ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row class="column-standard">
+      <ion-col>
+        <h4><strong>Changelog - 1.0 (Beta)</strong></h4>
+        <ul>
+            <li>Initial release</li>
+        </ul>
+    </ion-col>
+    </ion-row>
+    <ion-row class="column-standard">
+      <ion-col>
+        <h4><strong>Description</strong></h4>
+        <p>ThemeShowcase is an app that allows you to preview all standard themes for XML layouts.</p>
+    </ion-col>
+    </ion-row>
+    <ion-row class="column-standard">
+      <ion-col>
+        <h4><strong>Screenshots</strong></h4>
+        <div class="scrollScreenshots">
+        <img src="../assets/Screenshot_ThemeShowcase_1.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_2.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_3.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_4.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_5.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_6.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_7.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_8.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_9.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_10.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_11.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_12.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_13.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_14.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_15.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_16.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_17.png" class="screenshot">
+        <img src="../assets/Screenshot_ThemeShowcase_18.png" class="screenshot">
+        </div>
+        <br>
+    </ion-col>
+    </ion-row>
+    <ion-row class="column-standard">
+      <ion-col>
+        <h4><strong>Links</strong></h4>
+        <a href="https://pufferrom.t.me" class="">Telegram channel (releases)</a>
+        <br>
+        <a href="https://puffercatchannel.t.me" class="">Telegram channel (general)</a>
+        <br>
+        <a href="https://puffercatrom.t.me" class="">Support group</a>
+        <br>
+        <a href="https://github.com/KZacharski/ThemeShowcase" class="">GitHub repo (coming soon)</a>
+        <br>
+        <br>
+    </ion-col>
+    </ion-row>
+  </ion-grid>
+      </ion-content>
+    </ion-page>
+  </template>
+  
+  <script lang="ts">
+  import { defineComponent } from 'vue';
+  import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid, IonRow, IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton,
+      IonModal,
+      IonItem,
+      IonList,
+      IonAvatar,
+      IonImg,
+      IonLabel } from '@ionic/vue';
+  import ExploreContainer from '@/components/ExploreContainer.vue';
+  import { logoAndroid, arrowDown, logoPwa, ellipsisVertical } from 'ionicons/icons';
+  
+  export default  defineComponent({
+    name: 'Tab1Page',
+    components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonIcon, IonButtons, IonBackButton},
+    setup() {
+      return {
+        logoAndroid,
+        arrowDown,
+        logoPwa,
+        ellipsisVertical
+      }
+    }
+  });
+  </script>
+  
+  <style scoped>
+    .column-standard {
+      background-color: var(--ion-color-light-shade);
+      color: var(--ion-color-light-contrast);
+      padding: 15px;
+      border-radius: 25px;
+      margin: 5px;
+      margin-top: 15px;
+    } .icon {
+      width: 90px;
+      margin-right: 5px;
+    } ion-button {
+      --box-shadow: 0px;
+    } .download-column {
+      text-align: right;
+      display: flex;
+      justify-content: right;
+      align-items: center;
+    } .description-column {
+      align-items: center;
+    } .size-appname {
+    font-size: 20px;
+  } .size-appname-icon {
+    font-size: 15px;
+  } .logoAbout {
+    width: 125px;
+    margin: 10px;
+    margin-top: 20px;
+  } .modalContent {
+    text-align: center;
+      display: flex;
+      justify-content: center;
+  } .tableLabel {
+    text-align: left;
+  } .vueLogoLight {
+    display: inline;
+  } .vueLogoDark {
+    display: none;
+  } @media (prefers-color-scheme: dark) {
+    .vueLogoLight {
+      display: none;
+    } .vueLogoDark {
+      display: inline;
+    }
+  } .aboutFrameworkLogo {
+    width: 175px;
+  }
+  .bannerColumn {
+    height: 500px;
+    background-image: url("../assets/Banner_ThemeShowcase.png");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    border-radius: 25px;
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+}
+  .column-standard2 {
+      background-color: transparent;
+      color: var(--ion-color-light-contrast);
+    padding: 0px;
+      border-radius: 25px;
+      margin: 5px;
+      margin-top: 15px;
+    } ion-button {
+    --box-shadow: 0px;
+  } .screenshot {
+    height: 600px;
+    border-radius: 30px;
+  } div.scrollScreenshots {
+  overflow: auto;
+  white-space: nowrap;
+}
+
+div.scrollScreenshots img {
+  display: inline-block;
+  padding: 10px;
+} .hidden-link {
+    text-decoration-line: none;
+    color: var(--ion-color-light-contrast);
+  }
+  </style>