hahahahahahahahah

Bump webpack from 5.87.0 to 5.94.0

.gitignore

@@ -17,6 +17,7 @@ $RECYCLE.BIN/
 log.txt
 npm-debug.log*
 
+/.yarn
 /.idea
 /.ionic
 /.sass-cache
@@ -31,3 +32,4 @@ npm-debug.log*
 /plugins
 /www
 /android
+yarn.lock

.vscode/extensions.json

@@ -1,5 +1,5 @@
 {
-    "recommendations": [
-        "ionic.ionic"
-    ]
-}
+  "recommendations": [
+    "Webnative.webnative"
+  ]
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Kacper Zacharski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package.json

@@ -11,21 +11,22 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@babel/core": "^7.29.0",
     "@capacitor/android": "4.5.0",
     "@capacitor/app": "4.1.1",
     "@capacitor/core": "4.5.0",
     "@capacitor/haptics": "4.1.0",
     "@capacitor/keyboard": "4.1.0",
     "@capacitor/status-bar": "4.1.0",
-    "@ionic/core": "^7.0.0-rc.5",
-    "@ionic/vue": "^7.0.0-rc.5",
-    "@ionic/vue-router": "^7.0.0-rc.5",
+    "@ionic/core": "latest",
+    "@ionic/vue": "latest",
+    "@ionic/vue-router": "latest",
     "@vue/cli-plugin-pwa": "^5.0.8",
     "core-js": "^3.6.5",
     "ionicons": "^6.0.3",
     "register-service-worker": "^1.7.2",
-    "vue": "^3.2.47",
-    "vue-router": "^4.1.6"
+    "vue": "latest",
+    "vue-router": "latest"
   },
   "devDependencies": {
     "@capacitor/cli": "4.8.0",
@@ -38,16 +39,17 @@
     "@vue/cli-plugin-router": "~5.0.0-rc.1",
     "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
     "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
-    "@vue/cli-service": "5.0.8",
+    "@vue/cli-service": "^5.0.9",
     "@vue/eslint-config-typescript": "^9.1.0",
     "@vue/test-utils": "^2.0.0-rc.16",
     "@vue/vue3-jest": "^27.0.0-alpha.3",
     "babel-jest": "^27.3.1",
-    "cypress": "^8.7.0",
+    "cypress": "^13.11.0",
     "eslint": "^8.4.1",
     "eslint-plugin-vue": "^8.2.0",
     "jest": "^27.3.1",
     "ts-jest": "^27.0.7",
-    "typescript": "^4.3.5"
-  }
+    "typescript": "5"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/main.js

@@ -0,0 +1,26 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+import { IonicVue } from '@ionic/vue';
+/* Core CSS required for Ionic components to work properly */
+import '@ionic/vue/css/core.css';
+/* Basic CSS for apps built with Ionic */
+import '@ionic/vue/css/normalize.css';
+import '@ionic/vue/css/structure.css';
+import '@ionic/vue/css/typography.css';
+/* Optional CSS utils that can be commented out */
+import '@ionic/vue/css/padding.css';
+import '@ionic/vue/css/float-elements.css';
+import '@ionic/vue/css/text-alignment.css';
+import '@ionic/vue/css/text-transformation.css';
+import '@ionic/vue/css/flex-utils.css';
+import '@ionic/vue/css/display.css';
+/* Theme variables */
+import './theme/variables.css';
+const app = createApp(App)
+    .use(IonicVue)
+    .use(router);
+router.isReady().then(() => {
+    app.mount('#app');
+});
+//# sourceMappingURL=main.js.map

src/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,GAAG,MAAM,WAAW,CAAA;AAC3B,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,6DAA6D;AAC7D,OAAO,yBAAyB,CAAC;AAEjC,yCAAyC;AACzC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,+BAA+B,CAAC;AAEvC,kDAAkD;AAClD,OAAO,4BAA4B,CAAC;AACpC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,wCAAwC,CAAC;AAChD,OAAO,+BAA+B,CAAC;AACvC,OAAO,4BAA4B,CAAC;AAEpC,qBAAqB;AACrB,OAAO,uBAAuB,CAAC;AAE/B,MAAM,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC;KACvB,GAAG,CAAC,QAAQ,CAAC;KACb,GAAG,CAAC,MAAM,CAAC,CAAC;AAEf,MAAM,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;IACzB,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AACpB,CAAC,CAAC,CAAC"}

src/registerServiceWorker.js

@@ -0,0 +1,29 @@
+/* eslint-disable no-console */
+import { register } from 'register-service-worker';
+if (process.env.NODE_ENV === 'production') {
+    register(`${process.env.BASE_URL}service-worker.js`, {
+        ready() {
+            console.log('App is being served from cache by a service worker.\n' +
+                'For more details, visit https://goo.gl/AFskqB');
+        },
+        registered() {
+            console.log('Service worker has been registered.');
+        },
+        cached() {
+            console.log('Content has been cached for offline use.');
+        },
+        updatefound() {
+            console.log('New content is downloading.');
+        },
+        updated() {
+            console.log('New content is available; please refresh.');
+        },
+        offline() {
+            console.log('No internet connection found. App is running in offline mode.');
+        },
+        error(error) {
+            console.error('Error during service worker registration:', error);
+        }
+    });
+}
+//# sourceMappingURL=registerServiceWorker.js.map

src/registerServiceWorker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerServiceWorker.js","sourceRoot":"","sources":["registerServiceWorker.ts"],"names":[],"mappings":"AAAA,+BAA+B;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAElD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;IAC1C,QAAQ,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,QAAQ,mBAAmB,EAAE;QACnD,KAAK;YACH,OAAO,CAAC,GAAG,CACT,uDAAuD;gBACvD,+CAA+C,CAChD,CAAA;QACH,CAAC;QACD,UAAU;YACR,OAAO,CAAC,GAAG,CAAC,qCAAqC,CAAC,CAAA;QACpD,CAAC;QACD,MAAM;YACJ,OAAO,CAAC,GAAG,CAAC,0CAA0C,CAAC,CAAA;QACzD,CAAC;QACD,WAAW;YACT,OAAO,CAAC,GAAG,CAAC,6BAA6B,CAAC,CAAA;QAC5C,CAAC;QACD,OAAO;YACL,OAAO,CAAC,GAAG,CAAC,2CAA2C,CAAC,CAAA;QAC1D,CAAC;QACD,OAAO;YACL,OAAO,CAAC,GAAG,CAAC,+DAA+D,CAAC,CAAA;QAC9E,CAAC;QACD,KAAK,CAAE,KAAK;YACV,OAAO,CAAC,KAAK,CAAC,2CAA2C,EAAE,KAAK,CAAC,CAAA;QACnE,CAAC;KACF,CAAC,CAAA;AACJ,CAAC"}

src/router/index.js

@@ -0,0 +1,74 @@
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import TabsPage from '../views/TabsPage.vue';
+import PufferIcons from '../views/PufferIcons.vue';
+import Puffercat_Apps from '../views/Puffercat_Apps.vue';
+import Shapes from '../views/Shapes.vue';
+import Blurry_Wallpapers from '../views/Blurry_Wallpapers.vue';
+import WallCat from '../views/WallCat.vue';
+import BetterAperture from '../views/BetterAperture.vue';
+import ThemeShowcase from '@/views/ThemeShowcase.vue';
+const routes = [
+    {
+        path: '/',
+        redirect: '/tabs/apps'
+    },
+    {
+        path: '/tabs/',
+        component: TabsPage,
+        children: [
+            {
+                path: '',
+                redirect: '/tabs/apps'
+            },
+            {
+                path: 'apps',
+                component: () => import('@/views/Apps.vue')
+            },
+            {
+                path: 'soon',
+                component: () => import('@/views/ComingSoon.vue')
+            }
+        ]
+    },
+    {
+        path: '/details/PufferIcons',
+        name: 'PufferIcons',
+        component: PufferIcons,
+    },
+    {
+        path: '/details/Puffercat_Apps',
+        name: 'Puffercat Apps',
+        component: Puffercat_Apps,
+    },
+    {
+        path: '/details/Shapes',
+        name: 'Shapes',
+        component: Shapes,
+    },
+    {
+        path: '/details/Blurry_Wallpapers',
+        name: 'Blurry Wallpapers',
+        component: Blurry_Wallpapers,
+    },
+    {
+        path: '/details/WallCat',
+        name: 'WallCat',
+        component: WallCat,
+    },
+    {
+        path: '/details/BetterAperture',
+        name: 'BetterAperture',
+        component: BetterAperture,
+    },
+    {
+        path: '/details/ThemeShowcase',
+        name: 'ThemeShowcase',
+        component: ThemeShowcase,
+    },
+];
+const router = createRouter({
+    history: createWebHistory(process.env.BASE_URL),
+    routes
+});
+export default router;
+//# sourceMappingURL=index.js.map

src/router/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAEnE,OAAO,QAAQ,MAAM,uBAAuB,CAAA;AAE5C,OAAO,WAAW,MAAM,0BAA0B,CAAA;AAClD,OAAO,cAAc,MAAM,6BAA6B,CAAA;AACxD,OAAO,MAAM,MAAM,qBAAqB,CAAA;AACxC,OAAO,iBAAiB,MAAM,gCAAgC,CAAA;AAG9D,OAAO,OAAO,MAAM,sBAAsB,CAAA;AAE1C,OAAO,cAAc,MAAM,6BAA6B,CAAA;AAExD,OAAO,aAAa,MAAM,2BAA2B,CAAC;AAEtD,MAAM,MAAM,GAA0B;IACpC;QACE,IAAI,EAAE,GAAG;QACT,QAAQ,EAAE,YAAY;KACvB;IACD;QACE,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE;YACR;gBACE,IAAI,EAAE,EAAE;gBACR,QAAQ,EAAE,YAAY;aACvB;YACD;gBACE,IAAI,EAAE,MAAM;gBACZ,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,kBAAkB,CAAC;aAC5C;YACD;gBACE,IAAI,EAAE,MAAM;gBACZ,SAAS,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC;aAClD;SACF;KACF;IACD;QACE,IAAI,EAAE,sBAAsB;QAC5B,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,WAAW;KACvB;IACD;QACE,IAAI,EAAE,yBAAyB;QAC/B,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,cAAc;KAC1B;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,MAAM;KAClB;IACD;QACE,IAAI,EAAE,4BAA4B;QAClC,IAAI,EAAE,mBAAmB;QACzB,SAAS,EAAE,iBAAiB;KAC7B;IACD;QACE,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,OAAO;KACnB;IACD;QACE,IAAI,EAAE,yBAAyB;QAC/B,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,cAAc;KAC1B;IACD;QACE,IAAI,EAAE,wBAAwB;QAC9B,IAAI,EAAE,eAAe;QACrB,SAAS,EAAE,aAAa;KACzB;CACF,CAAA;AAED,MAAM,MAAM,GAAG,YAAY,CAAC;IAC1B,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;IAC/C,MAAM;CACP,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
+import type { RouteRecordRaw, Router } from 'vue-router';
 import TabsPage from '../views/TabsPage.vue'
 import Apps from '../views/Apps.vue'
 import PufferIcons from '../views/PufferIcons.vue'
@@ -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> = [
   {
@@ -56,11 +57,6 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Blurry Wallpapers',
     component: Blurry_Wallpapers,
   },
-  {
-    path: '/details/PufferIcons_Filled',
-    name: 'PufferIcons Filled',
-    component: PufferIcons_Filled,
-  },
   {
     path: '/details/WallCat',
     name: 'WallCat',
@@ -72,9 +68,9 @@ const routes: Array<RouteRecordRaw> = [
     component: BetterAperture,
   },
   {
-    path: '/details/Duo',
-    name: 'Duo',
-    component: Duo,
+    path: '/details/ThemeShowcase',
+    name: 'ThemeShowcase',
+    component: ThemeShowcase,
   },
 ]
 

src/views/Apps.vue

@@ -24,7 +24,7 @@
         <ion-content class="ion-padding modalContent">
           <img src="../assets/Icon_Puffercat_Apps.png" class="logoAbout">
           <h1>Puffercat Apps</h1>
-          <h4>v1.0.0-b4 (Beta 4)</h4>
+          <h4>v1.0.0-b7 (Beta 7)</h4>
           <br>
           <br>
           <div class="tableLabel">
@@ -49,7 +49,7 @@
       <ion-label><a href="https://puffercat.t.me">Telegram profile</a></ion-label>
     </ion-item>
     <ion-item>
-      <ion-label><a href="mailto:puffercatt+pufferapps@gmail.com">E-Mail</a></ion-label>
+      <ion-label><a href="mailto:apps@puffercat.xyz">E-Mail</a></ion-label>
     </ion-item>
   </ion-list>
   <br>
@@ -65,10 +65,7 @@
       <ion-label><a href="https://ionicframework.com"><img src="../assets/Logo_Ionic.png" class="aboutFrameworkLogo"></a></ion-label>
     </ion-item>
     <ion-item>
-      <ion-label><a href="https://vercel.com/">
-        <img src="../assets/Logo_Vercel.png" class="vueLogoLight aboutFrameworkLogo">
-        <img src="../assets/Logo_Vercel_Dark.png" class="vueLogoDark aboutFrameworkLogo">
-      </a></ion-label>
+      <ion-label><a href="https://netlify.com"><img src="../assets/Logo_Netlify.png" class="aboutFrameworkLogo"></a></ion-label>
     </ion-item>
   </ion-list>
   <br><br><br>
@@ -89,6 +86,44 @@
         </ion-toolbar>
       </ion-header>
       <ion-grid>
+        <ion-row class="column-standard">
+    <ion-col size="auto" button @click="() => router.push('/details/WallCat')">
+      <img src="../assets/Icon_WallCat.png" class="icon">
+    </ion-col>
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/WallCat')">
+        <ion-row>
+          <ion-column><h4 class="size-appname">WallCat</h4></ion-column>
+        </ion-row>
+        <ion-row>
+          <ion-column button @click="() => router.push('/details/WallCat')"><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/WallCat-1.0.1.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/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.0b2.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">
@@ -138,13 +173,17 @@
             <img src="../assets/Puffercat_Apps_Guide_1.png" class="installGuideImage">
             <p>2. Open the menu (on the browser's bar, not on the website)</p>
             <img src="../assets/Puffercat_Apps_Guide_2.png" class="installGuideImage">
-            <p>3. Select "Install app" or "Add to home screen"</p>
+            <p>3. Select "Add to home screen"</p>
             <img src="../assets/Puffercat_Apps_Guide_3.png" class="installGuideImage">
             <p>4. Select "Install"</p>
             <img src="../assets/Puffercat_Apps_Guide_4.png" class="installGuideImage">
-            <p>5. Done. You should get this notification and a new icon should show up on your home screen</p>
+            <p>5. Select "Install" once again</p>
             <img src="../assets/Puffercat_Apps_Guide_5.png" class="installGuideImage">
+            <p>6. Done. You should get this notification and a new icon should show up on your home screen</p>
             <img src="../assets/Puffercat_Apps_Guide_6.png" class="installGuideImage">
+            <img src="../assets/Puffercat_Apps_Guide_7.png" class="installGuideImage">
+            <p>Now you can use Puffercat Apps like an app</p>
+            <img src="../assets/Puffercat_Apps_Guide_8.png" class="installGuideImage">
             <br><br><br><br><br><br>
         </ion-content>
       </ion-modal>

src/views/BetterAperture.vue

@@ -40,9 +40,6 @@
       <ion-col>
         <ion-button href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/BetterAperture/betteraperture-1.0.0.apk" expand="full" shape="round" style="margin: 0px;" download="BetterAperture-latest.apk">Download</ion-button>
       </ion-col>
-      <ion-col>
-        <ion-button href="https://play.google.com/store/apps/details?id=xyz.puffercat.betteraperture" expand="full" shape="round" style="margin: 0px;">Google Play</ion-button>
-      </ion-col>
     </ion-row>
     <ion-row class="column-standard">
       <ion-col>

src/views/Blurry_Wallpapers.vue

@@ -40,9 +40,6 @@
       <ion-col>
         <ion-button href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Blurry_Wallpapers/blurry-wallpapers-1.0.4.apk" expand="full" shape="round" style="margin: 0px;" download="Blurry-wallpapers-latest.apk">Download</ion-button>
       </ion-col>
-      <ion-col>
-        <ion-button href="https://play.google.com/store/apps/details?id=xyz.puffercat.blurrywalls.android" expand="full" shape="round" style="margin: 0px;">Google Play</ion-button>
-      </ion-col>
     </ion-row>
     <ion-row class="column-standard">
       <ion-col>

src/views/ComingSoon.vue

@@ -24,7 +24,7 @@
         <ion-content class="ion-padding modalContent">
           <img src="../assets/Icon_Puffercat_Apps.png" class="logoAbout">
           <h1>Puffercat Apps</h1>
-          <h4>v1.0.0-b4 (Beta 4)</h4>
+          <h4>v1.0.0-b7 (Beta 7)</h4>
           <br>
           <br>
           <div class="tableLabel">
@@ -49,7 +49,7 @@
       <ion-label><a href="https://puffercat.t.me">Telegram profile</a></ion-label>
     </ion-item>
     <ion-item>
-      <ion-label><a href="mailto:puffercatt+pufferapps@gmail.com">E-Mail</a></ion-label>
+      <ion-label><a href="mailto:apps@puffercat.xyz">E-Mail</a></ion-label>
     </ion-item>
   </ion-list>
   <br>
@@ -65,10 +65,7 @@
       <ion-label><a href="https://ionicframework.com"><img src="../assets/Logo_Ionic.png" class="aboutFrameworkLogo"></a></ion-label>
     </ion-item>
     <ion-item>
-      <ion-label><a href="https://vercel.com/">
-        <img src="../assets/Logo_Vercel.png" class="vueLogoLight aboutFrameworkLogo">
-        <img src="../assets/Logo_Vercel_Dark.png" class="vueLogoDark aboutFrameworkLogo">
-      </a></ion-label>
+      <ion-label><a href="https://netlify.com"><img src="../assets/Logo_Netlify.png" class="aboutFrameworkLogo"></a></ion-label>
     </ion-item>
   </ion-list>
   <br><br><br>
@@ -88,60 +85,26 @@
           <ion-title size="large">Coming Soon</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-grid>
-  <ion-row class="column-standard">
-    <ion-col size="auto">
-      <a href="/details/PufferIcons_Filled" class="hidden-link"><img src="../assets/Icon_PufferIcons_Filled.png" class="icon"></a>
-    </ion-col>
-    <ion-col size="auto" class="description-column">
-        <ion-row>
-          <a href="/details/PufferIcons_Filled" class="hidden-link"><ion-column><h4 class="size-appname">PufferIcons Filled</h4></ion-column></a>
-        </ion-row>
-        <ion-row>
-          <a href="/details/PufferIcons_Filled" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
-        </ion-row>
-    </ion-col>
-    <ion-col class="download-column">
-      <ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
-    </ion-col>
-  </ion-row>
-  <ion-row class="column-standard">
-    <ion-col size="auto">
-      <a href="/details/WallCat" class="hidden-link"><img src="../assets/Icon_WallCat.png" class="icon"></a>
-    </ion-col>
-    <ion-col size="auto" class="description-column">
-        <ion-row>
-          <a href="/details/WallCat" class="hidden-link"><ion-column><h4 class="size-appname">WallCat</h4></ion-column></a>
-        </ion-row>
-        <ion-row>
-          <a href="/details/WallCat" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
-        </ion-row>
-    </ion-col>
-    <ion-col class="download-column">
-      <ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
-    </ion-col>
-  </ion-row>
-  <ion-row class="column-standard">
-    <ion-col size="auto">
-      <a href="/details/Duo" class="hidden-link"><img src="../assets/Icon_Duo.png" class="icon"></a>
-    </ion-col>
-    <ion-col size="auto" class="description-column">
-        <ion-row>
-          <a href="/details/Duo" class="hidden-link"><ion-column><h4 class="size-appname">Duo</h4></ion-column></a>
-        </ion-row>
-        <ion-row>
-          <a href="/details/Duo" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
-        </ion-row>
-    </ion-col>
-    <ion-col class="download-column">
-      <ion-button shape="round" disabled="true"><ion-icon :icon="arrowDown" /></ion-button>
-    </ion-col>
-  </ion-row>
-</ion-grid>
+        <ion-content class="ion-padding emptyStateContainer">
+        <div class="emptyStateContainer">
+        <div class="emptyStateContent">
+        <ion-icon slot="icon-only" :icon="timeOutline" class="emptyStateIcon"></ion-icon>
+        <h3 class="emptyStateText">No upcoming apps</h3>
+        </div>
+        </div>
+        </ion-content>
     </ion-content>
   </ion-page>
 </template>
 
+
+
+<script setup lang="ts">
+
+
+const router = useRouter();
+</script>
+
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid, IonRow, IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton,
@@ -152,23 +115,12 @@ import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid,
     IonImg,
     IonLabel, IonPopover } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
-import { logoAndroid, arrowDown, logoPwa, ellipsisVertical } from 'ionicons/icons';
+import { logoAndroid, arrowDown, logoPwa, ellipsisVertical, timeOutline } from 'ionicons/icons';
+import { useRouter } from 'vue-router';
+import { Icon } from 'ionicons/dist/types/components/icon/icon';
 
-export default  defineComponent({
-  name: 'Tab1Page',
-  components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonButtons, IonIcon,
-      IonModal,
-      IonItem,
-      IonList, IonPopover },
-  setup() {
-    return {
-      logoAndroid,
-      arrowDown,
-      logoPwa,
-      ellipsisVertical
-    }
-  },
-    methods: {
+export default defineComponent ({
+  methods: {
       dismiss() {
         (this.$refs.modal as InstanceType<typeof IonModal>).$el.dismiss();
       },
@@ -214,16 +166,39 @@ export default  defineComponent({
   display: inline;
 } .vueLogoDark {
   display: none;
-} @media (prefers-color-scheme: dark) {
-  .vueLogoLight {
-    display: none;
-  } .vueLogoDark {
-    display: inline;
-  }
 } .aboutFrameworkLogo {
   width: 175px;
 } .hidden-link {
     text-decoration-line: none;
     color: var(--ion-color-light-contrast);
   }
+  .emptyStateContainer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  } .emptyStateContent {
+    display: flex;
+    flex-direction: column;
+     align-items: center;
+    justify-content: center;
+  } .emptyStateIcon {
+    font-size:125px;
+    color: #B7B7B7;
+  } .emptyStateText {
+    font-size: 30px;
+    color: #B7B7B7;
+  }
+ @media (prefers-color-scheme: dark) {
+  .vueLogoLight {
+    display: none;
+  } .vueLogoDark {
+    display: inline;
+  } .emptyStateIcon {
+    color: #4e4e4e;
+  } .emptyStateText {
+    color: #4e4e4e;
+  }
+} 
 </style>

src/views/Duo.vue

@@ -1,192 +0,0 @@
-<template>
-    <ion-page>
-      <ion-header>
-        <ion-toolbar>
-    <ion-buttons slot="start">
-    <ion-back-button default-href="/tabs/soon"></ion-back-button>
-  </ion-buttons>
-          <ion-title>Duo</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content :fullscreen="true">
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-title size="large">Duo</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_Duo.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>Duo</strong></p></ion-column>
-          </ion-row>
-          <ion-row style="padding: 0px;">
-            <ion-column><p class="size-appname-icon"></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 disabled="true" expand="full" shape="round" style="margin: 0px;">Coming Soon</ion-button>
-      </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Description</strong></h4>
-        A vibrant, light and glowing duo-tone icon pack<br>
-<br>
-    </ion-col>
-    </ion-row>
-   <!-- <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Screenshots (early development)</strong></h4>
-        <div class="scrollScreenshots">
-        <img src="../assets/Screenshot_WallCat_1.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_2.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_3.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_4.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_5.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_6.jpg" class="screenshot">
-        </div>
-        <br>
-    </ion-col>
-    </ion-row>-->
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Links</strong></h4>
-        <a href="mailto:puffercatt+duo@gmail.com" class="">E-mail</a>
-        <br>
-        <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>
-        <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_Duo.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>

src/views/PufferIcons_Filled.vue

@@ -1,193 +0,0 @@
-<template>
-    <ion-page>
-      <ion-header>
-        <ion-toolbar>
-    <ion-buttons slot="start">
-    <ion-back-button default-href="/tabs/soon"></ion-back-button>
-  </ion-buttons>
-          <ion-title>PufferIcons Filled</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content :fullscreen="true">
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-title size="large">PufferIcons Filled</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_PufferIcons_Filled.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>PufferIcons Filled</strong></p></ion-column>
-          </ion-row>
-          <ion-row style="padding: 0px;">
-            <ion-column><p class="size-appname-icon"></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 disabled="true" expand="full" shape="round" style="margin: 0px;">Coming Soon</ion-button>
-      </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Description</strong></h4>
-        <strong>Notes:
-Ignore Google Play Protect, my signature is different than original Lawnicons, but I can't change the package name because then Lawnchair would stop recognizing this app as Lawnicons.</strong><br>
-PufferIcons is fork of Rkicons, a fork Lawnicons which is an add-on for adding themed icons to Lawnchair 12 Alpha 5 and above. This addon is now the source of all themed icons, for simplicity.<br>
-<br>
-PufferIcons Filled as well as Rkicons are filled while PufferIcons and Lawnicons are outlined.<br>
-<br>
-    </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Screenshots (early development)</strong></h4>
-        <div class="scrollScreenshots">
-        <img src="../assets/Screenshot_PufferIcons_Filled_1.png" class="screenshot">
-        <img src="../assets/Screenshot_PufferIcons_Filled_2.png" class="screenshot">
-        <img src="../assets/Screenshot_PufferIcons_Filled_3.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/Puffercatt/PufferIcons-Filled" class="">GitHub repo</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_PufferIcons_Filled.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>

src/views/Puffercat_Apps.vue

@@ -29,7 +29,7 @@
             <ion-column style="padding: 0px; margin: 0px;"><p class="size-appname" style="padding: 0px; margin: 0px;"><strong>Puffercat Apps</strong></p></ion-column>
           </ion-row>
           <ion-row style="padding: 0px;">
-            <ion-column><p class="size-appname-icon">version 1.0.0-b4 (Beta 4)</p></ion-column>
+            <ion-column><p class="size-appname-icon">version 1.0.0-b7 (Beta 7)</p></ion-column>
           </ion-row>
           <ion-row style="padding: 0px;">
             <ion-column><ion-icon :icon="logoPwa" class="size-appname-icon"/></ion-column>
@@ -55,13 +55,17 @@
             <img src="../assets/Puffercat_Apps_Guide_1.png" class="installGuideImage">
             <p>2. Open the menu (on the browser's bar, not on the website)</p>
             <img src="../assets/Puffercat_Apps_Guide_2.png" class="installGuideImage">
-            <p>3. Select "Install app" or "Add to home screen"</p>
+            <p>3. Select "Add to home screen"</p>
             <img src="../assets/Puffercat_Apps_Guide_3.png" class="installGuideImage">
             <p>4. Select "Install"</p>
             <img src="../assets/Puffercat_Apps_Guide_4.png" class="installGuideImage">
-            <p>5. Done. You should get this notification and a new icon should show up on your home screen</p>
+            <p>5. Select "Install" once again</p>
             <img src="../assets/Puffercat_Apps_Guide_5.png" class="installGuideImage">
+            <p>6. Done. You should get this notification and a new icon should show up on your home screen</p>
             <img src="../assets/Puffercat_Apps_Guide_6.png" class="installGuideImage">
+            <img src="../assets/Puffercat_Apps_Guide_7.png" class="installGuideImage">
+            <p>Now you can use Puffercat Apps like an app</p>
+            <img src="../assets/Puffercat_Apps_Guide_8.png" class="installGuideImage">
             <br><br><br><br><br><br>
         </ion-content>
       </ion-modal>
@@ -69,12 +73,12 @@
     </ion-row>
     <ion-row class="column-standard">
       <ion-col>
-        <h4><strong>Changelog - 1.0.0-b4</strong></h4>
+        <h4><strong>Changelog - 1.0.0-b7</strong></h4>
         <ul>
-            <li>Fixed dependency security vulnerabilities</li>
-            <li>Updated to Ionic 7</li>
-            <li>Fixed nav on the apps page</li>
-            <li>Made the banners less cut off on desktop</li>
+            <li><a href="https://x.com/rauchg/status/1972669025525158031">Switched hosting providers from Vercel to Netlify</a></li>
+            <li>Added Alternate mirrors, AppGallery and Google Play links to WallCat and ThemeShowcase</li>
+            <li>Created an empty state page</li>
+            <li>Updated to Ionic 8</li>
         </ul>
     </ion-col>
     </ion-row>
@@ -89,10 +93,10 @@ The full catalog of apps created by Puffercat as well as ones currently in devel
       <ion-col>
         <h4><strong>Screenshots</strong></h4>
         <div class="scrollScreenshots">
-        <img src="../assets/Screenshot_Puffercat_Apps_1.png" class="screenshot">
-        <img src="../assets/Screenshot_Puffercat_Apps_2.png" class="screenshot">
-        <img src="../assets/Screenshot_Puffercat_Apps_3.png" class="screenshot">
-        <img src="../assets/Screenshot_Puffercat_Apps_4.png" class="screenshot">
+        <img src="../assets/Screenshot_Puffercat_Apps_1.jpg" class="screenshot">
+        <img src="../assets/Screenshot_Puffercat_Apps_2.jpg" class="screenshot">
+        <img src="../assets/Screenshot_Puffercat_Apps_3.jpg" class="screenshot">
+        <img src="../assets/Screenshot_Puffercat_Apps_4.jpg" class="screenshot">
         <img src="../assets/Screenshot_Puffercat_Apps_5.png" class="screenshot">
         <img src="../assets/Screenshot_Puffercat_Apps_6.png" class="screenshot">
         <img src="../assets/Screenshot_Puffercat_Apps_7.png" class="screenshot">
@@ -114,7 +118,7 @@ The full catalog of apps created by Puffercat as well as ones currently in devel
         <br>
         <a href="https://twitter.com/@puffercatt" class="">Twitter</a>
         <br>
-        <a href="mailto:puffercatt+pufferapps@gmail.com" class="">E-mail</a>
+        <a href="mailto:apps@puffercat.xyz" class="">E-mail</a>
         <br>
         <a href="https://github.com/KZacharski/PuffercatApps" class="">GitHub repo</a>
         <br>

src/views/Shapes.vue

@@ -40,9 +40,6 @@
       <ion-col>
         <ion-button href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Shapes/shapes-1.0.5.apk" expand="full" shape="round" style="margin: 0px;" download="Shapes-latest.apk">Download</ion-button>
       </ion-col>
-      <ion-col>
-        <ion-button href="https://play.google.com/store/apps/details?id=xyz.puffercat.shapes.android" expand="full" shape="round" style="margin: 0px;">Google Play</ion-button>
-      </ion-col>
     </ion-row>
     <ion-row class="column-standard">
       <ion-col>

src/views/ThemeShowcase.vue

@@ -0,0 +1,426 @@
+<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 2)</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.0b2.apk" expand="full" shape="round" style="margin: 0px;" download="PufferIcons-latest.apk">Download</ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row class="column-extension">
+      <ion-col>
+        <ion-button id="alternateMirrors_ThemeShowcase" expand="full" shape="round" style="margin: 0px;">Alternate mirrors</ion-button>
+      </ion-col>
+      <ion-col>
+        <ion-button id="googlePlayEA_ThemeShowcase" expand="full" shape="round" style="margin: 0px;">Google Play</ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-modal ref="modal" trigger="alternateMirrors_ThemeShowcase">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Alternate mirrors</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h2 style="padding-left: 30px;">ThemeShowcase 1.0 (Beta 2)</h2>
+          <ion-label color="medium" class="tableLabel checksum" style="padding-left: 30px;">SHA256 Checksum: cb28eee022526c9745ebfe815060a090e59f5b48af15483afdd51e6b8c1b9f23</ion-label>
+          <ion-list :inset="true" style="border-radius: 25px;">
+    <ion-item>
+      <ion-label><a href="https://f2.puffercat.xyz/PuffercatApps/ThemeShowcase-1.0b2.apk">🇩🇪 2.puffercat.xyz - Contabo (Default)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/ThemeShowcase/ThemeShowcase-1.0b2.apk">🇳🇱 puffercat.xyz - DigitalOcean</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://deimos.pufferc.at/mirror/ThemeShowcase-1.0b2.apk">🇸🇪 deimos.pufferc.at - aeza</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://www.icloud.com/iclouddrive/0dc1MKbkknpFfAndorZ-BBdTA#ThemeShowcase-1">iCloud Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://1drv.ms/u/c/c6bbfc602e5efcd0/IQBWjyBlxrLWTp5ikzDVOw_zAdb6H5A05w8fVpz5PgxtmeE?e=UMl3hb">OneDrive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://drive.google.com/file/d/1GROivf_X95xFE66lOrTHbSZMrHsDM0we/view?usp=share_link">Google Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://pan.baidu.com/s/12kjAce8f3NxYGxK-OU0alw?pwd=ztzs">百度网盘 (提取码：ztzs)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://disk.yandex.ru/d/RFrpDvjxJyQqcg">Яндекс Диск</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://www.dropbox.com/scl/fi/5kavzp5397ztug2o9d18a/ThemeShowcase-1.0b2.apk?rlkey=tkbaf8ts5bl5ipol5u3r8sgnk&st=k4u1n12s&dl=0">Dropbox</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://app.box.com/s/of7hu7p6hceyk6xvsng7dtorkawthz6y">Box</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://drive.proton.me/urls/H82GV8YBPM#Wmre4qOZzODv">Proton Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://pan.xunlei.com/s/VOrBPeGkXa4i9wv-zl6Bp9utA1?pwd=gjwj">迅雷云盘 (提取码：gjwj)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://1024terabox.com/s/1CTwe27O0aBY2Q1asgBBAQw">Terabox</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://mega.nz/file/q5wVBKiT#29V11ruNfsvxMc_e8QjDofAtdKJhVaYJdQrxQiInwz8">MEGA</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://pan.quark.cn/s/12099dbf747f">夸克网盘</a></ion-label>
+    </ion-item>
+  </ion-list>
+  <h2 style="padding-left: 30px;">ThemeShowcase 1.0 (Beta 1)</h2>
+  <ion-label color="medium" class="tableLabel" style="padding-left: 30px;">SHA256 Checksum: 9bbecb33d577e1dfb26491f456eed75f1658c91a95a74a2c3806b679a1b2ac26</ion-label>
+          <ion-list :inset="true" style="border-radius: 25px;">
+    <ion-item>
+      <ion-label><a href="https://f2.puffercat.xyz/PuffercatApps/ThemeShowcase-1.0b.apk">🇩🇪 2.puffercat.xyz - Contabo (Default)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/ThemeShowcase/ThemeShowcase-1.0b.apk">🇳🇱 puffercat.xyz - DigitalOcean</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://deimos.pufferc.at/mirror/ThemeShowcase-1.0b.apk">🇸🇪 deimos.pufferc.at - aeza</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://www.icloud.com/iclouddrive/06esiWCsrhr8f2YHXx0UjIiSA#ThemeShowcase-1">iCloud Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://1drv.ms/u/c/c6bbfc602e5efcd0/IQDW4qjhuycJSp-4Mqfr11lYAUYO-iEoIbsWlzBB-Pyk-tg?e=aLRQTX">OneDrive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://drive.google.com/file/d/1AauWIG6HuEHoVzoDx-g7TsJL1e8ryPch/view?usp=share_link">Google Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://pan.baidu.com/s/1RGYat1gN9Tr3PALx_uJPMw?pwd=ztzs">百度网盘 (提取码：ztzs)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://disk.yandex.ru/d/rkn4wXI5cwk3og">Яндекс Диск</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://www.dropbox.com/scl/fi/yvzjcbwpn2p5ko2ni2kph/ThemeShowcase-1.0b.apk?rlkey=mdz2d6srgmkglo071pgy8kewe&st=jy7xgo9w&dl=0">Dropbox</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://app.box.com/s/2paombc0rin2fwua6ymrslnl5p6appmn">Box</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://drive.proton.me/urls/R31K5G9DCG#30J7GaScLdp2">Proton Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://pan.xunlei.com/s/VOrBPj5FhnZ2OUODS3GovMCFA1?pwd=zyyc">迅雷云盘 (提取码：zyyc)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://1024terabox.com/s/19ttrqa8gnrPAWloC98dtRQ">Terabox</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://mega.nz/file/utgCHLZb#30Lo_t_RcJTv1pQOEcMR6A9m-djWK92MOGDzwQ9crUY">MEGA</a></ion-label>
+    </ion-item>
+     <ion-item>
+      <ion-label><a href="https://pan.quark.cn/s/63945f16a0b7">夸克网盘</a></ion-label>
+    </ion-item>
+  </ion-list>
+  <br>
+        </ion-content>
+      </ion-modal>
+      <ion-modal ref="modal2" trigger="googlePlayEA_ThemeShowcase">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Google Play Early Access</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss2()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+        <p class="guideTextRegular">Due to Google's "production application" requirements, this app is not yet able to be published on Google Play. You can join the closed testing program to access the app now and help fulfill the requirements to get fully published.</p>
+          <div class="guideNumberBackground">1</div>
+          <div class="guideSectionContainer">
+            <div class="guideSectionLineContainer">
+              <div class="guideSectionline"></div>
+            </div>
+            <div class="guideSectionContent">
+              <p class="guideTextRegular">Join <a href="https://groups.google.com/g/pfrmedia-beta">this</a> Google group. Make sure you're using the same Google account as the one you'll download the app on.</p>
+              <img src="../assets/WallCat_GPLAY_Guide_1.png" class="guideImage">
+            </div>
+          </div>
+          <div class="guideNumberBackground">2</div>
+          <div class="guideSectionContainer">
+            <div class="guideSectionLineContainer">
+              <div class="guideSectionline"></div>
+            </div>
+            <div class="guideSectionContent">
+              <p class="guideTextRegular">Go <a href="https://play.google.com/store/apps/details?id=xyz.puffercat.themeshowcase">here</a> to download the app. Ensure the account you're using on Google Play is the same one you joined the group on.</p>
+              <img src="../assets/ThemeShowcase_GPLAY_Guide_2.jpg" class="guideImage">
+            </div>
+          </div>
+          <div class="guideNumberBackground">3</div>
+          <div class="guideSectionContainer">
+            <div class="guideSectionLineContainer">
+              <div class="guideSectionline"></div>
+            </div>
+            <div class="guideSectionContent">
+              <p class="guideTextRegular">Please use the "Private feedback to developer" function to help the app get published (Google uses this as a metric of app's production readiness)</p>
+              <img src="../assets/ThemeShowcase_GPLAY_Guide_3.png" class="guideImage">
+            </div>
+          </div>
+        </ion-content>
+      </ion-modal>
+    <ion-row class="column-standard">
+      <ion-col>
+        <h4><strong>Changelog - 1.0 (Beta 2)</strong></h4>
+        <ul>
+            <li>Updated target Android version to comply with Google Play requirements</li>
+            <li>First release on Google Play</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, IonModal},
+    setup() {
+      return {
+        logoAndroid,
+        arrowDown,
+        logoPwa,
+        ellipsisVertical
+      }
+    },
+    methods: {
+      dismiss() {
+        (this.$refs.modal as InstanceType<typeof IonModal>).$el.dismiss();
+      },
+      dismiss2() {
+        (this.$refs.modal2 as InstanceType<typeof IonModal>).$el.dismiss();
+      },
+    }
+  });
+  </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);
+  } .guideNumberBackground {
+    background-image: linear-gradient(to bottom, #33D198, #06986A);
+    height: 50px;
+    width: 50px;
+    border-radius: 100%;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    font-size: 30px;
+    font-weight: bold;
+    box-shadow: #06986a 0px 2px 10px;
+    color: white;
+  } .guideSectionline {
+    height: 100%;
+    width: 2px;
+    background-color: #33D198;
+  } .guideSectionLineContainer {
+    width: 50px;
+    min-width: 50px;
+    display: flex;
+    justify-content: center;
+  } .guideSectionContainer {
+    display: flex;
+    flex-direction: row;
+  } .guideTextRegular {
+    font-size: 20px;
+  } .guideSectionContent {
+    width: 100%;
+  } .checksum {
+    font-family: monospace;
+  } .guideImage {
+    height: auto;
+    width: 300px;
+    border-radius: 20px;
+  } .column-extension {
+      background-color: transparent;
+      color: var(--ion-color-light-contrast);
+    padding: 0px;
+      border-radius: 25px;
+      margin: 5px;
+      margin-top: 5px;
+    }
+  </style>

src/views/WallCat.vue

@@ -3,7 +3,7 @@
       <ion-header>
         <ion-toolbar>
     <ion-buttons slot="start">
-    <ion-back-button default-href="/tabs/soon"></ion-back-button>
+    <ion-back-button default-href="/"></ion-back-button>
   </ion-buttons>
           <ion-title>WallCat</ion-title>
         </ion-toolbar>
@@ -17,7 +17,6 @@
         <ion-grid>
     <ion-row class="column-standard2">
       <ion-col class="bannerColumn">
-        
       </ion-col>
     </ion-row>
     <ion-row class="column-standard">
@@ -29,7 +28,7 @@
             <ion-column style="padding: 0px; margin: 0px;"><p class="size-appname" style="padding: 0px; margin: 0px;"><strong>WallCat</strong></p></ion-column>
           </ion-row>
           <ion-row style="padding: 0px;">
-            <ion-column><p class="size-appname-icon"></p></ion-column>
+            <ion-column><p class="size-appname-icon">version 1.0.1</p></ion-column>
           </ion-row>
           <ion-row style="padding: 0px;">
             <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
@@ -38,8 +37,183 @@
     </ion-row>
     <ion-row class="column-standard2">
       <ion-col>
-        <ion-button disabled="true" expand="full" shape="round" style="margin: 0px;">Coming Soon</ion-button>
+        <ion-button href="https://f2.puffercat.xyz/PuffercatApps/WallCat-1.0.1.apk" expand="full" shape="round" style="margin: 0px;" download="WallCat-latest.apk">Download</ion-button>
       </ion-col>
+      <ion-col>
+        <ion-button id="alternateMirrors_WallCat" expand="full" shape="round" style="margin: 0px;">Alternate mirrors</ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-row class="column-extension">
+      <ion-col>
+        <ion-button id="googlePlayEA_WallCat" expand="full" shape="round" style="margin: 0px;">Google Play</ion-button>
+      </ion-col>
+      <ion-col>
+        <ion-button href="https://pfr.cat/out/hwwc?utm_source=puffercatapps" expand="full" shape="round" style="margin: 0px;">Huawei AppGallery</ion-button>
+      </ion-col>
+    </ion-row>
+    <ion-modal ref="modal" trigger="alternateMirrors_WallCat">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Alternate mirrors</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+          <h2 style="padding-left: 30px;">WallCat 1.0.1</h2>
+          <ion-label color="medium" class="tableLabel checksum" style="padding-left: 30px;">SHA256 Checksum: 14e8a11e5d5c7fcee7fd9bc3cda1e0fd838f8de8fad2b76ceed1adfd42c8904d</ion-label>
+          <ion-list :inset="true" style="border-radius: 25px;">
+    <ion-item>
+      <ion-label><a href="https://f2.puffercat.xyz/PuffercatApps/WallCat-1.0.1.apk">🇩🇪 2.puffercat.xyz - Contabo (Default)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/WallCat/WallCat-1.0.1.apk">🇳🇱 puffercat.xyz - DigitalOcean</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://deimos.pufferc.at/mirror/WallCat-1.0.1.apk">🇸🇪 deimos.pufferc.at - aeza</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://www.icloud.com/iclouddrive/0d2SL-WxHw7dBwlV_t5ZPAEpQ#WallCat-1.0">iCloud Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://1drv.ms/u/c/c6bbfc602e5efcd0/IQBctXMDf9yJRoDbmIFGm-KPAfPU47FnwZOhblk60lZ9yas?e=pGD23i">OneDrive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://drive.google.com/file/d/1AWPu8U4ovSQxka88Bh_NA3CSlgMEfL2I/view?usp=share_link">Google Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://pan.baidu.com/s/1D6vWEnmzL_i0YZlrLyTwYw?pwd=wall">百度网盘 (提取码：wall)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://disk.yandex.ru/d/9VehTxAMUmrfzQ">Яндекс Диск</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://www.dropbox.com/scl/fi/hcr8w738c097i8ezm137s/WallCat-1.0.1.apk?rlkey=l13twc95c14tzsnk7zge2ng25&e=1&st=mq0thlil&bmus=1&dl=0">Dropbox</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://app.box.com/s/ccbob8n62hjp10pztr2yp9kxk11fqtsf">Box</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://drive.proton.me/urls/0DK70Z0W8W#N2nfQutAxaGU">Proton Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://pan.xunlei.com/s/VOqblom-krpxYVdRXssZoIKpA1?pwd=hwqu">迅雷云盘 (提取码：hwqu)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://1024terabox.com/s/1boNL4z2-cHZ7ddda1QykVg">Terabox</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://mega.nz/file/KtIRhZpC#YlAZsk1KiVVX_3QfIzokjDIFk0-7KPxgyM3QR4T_Dy8">MEGA</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://pan.quark.cn/s/ffaf9a924042">夸克网盘</a></ion-label>
+    </ion-item>
+  </ion-list>
+  <h2 style="padding-left: 30px;">WallCat 1.0.0</h2>
+  <ion-label color="medium" class="tableLabel" style="padding-left: 30px;">SHA256 Checksum: b1159ec3a89e5bce08df76a8c7a151d8a7965ddbcc868be7ab0392ff08e3e6db</ion-label>
+          <ion-list :inset="true" style="border-radius: 25px;">
+    <ion-item>
+      <ion-label><a href="https://f2.puffercat.xyz/PuffercatApps/WallCat-1.0.apk">🇩🇪 2.puffercat.xyz - Contabo (Default)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/WallCat/WallCat-1.0.apk">🇳🇱 puffercat.xyz - DigitalOcean</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://deimos.pufferc.at/mirror/WallCat-1.0.apk">🇸🇪 deimos.pufferc.at - aeza</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://www.icloud.com/iclouddrive/071WiIXKqfEbErB8uwMpQsZ_A#WallCat-1">iCloud Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://1drv.ms/u/c/c6bbfc602e5efcd0/Eafn9A-CP-pFrxUdxGdbMLEBdyDYUO_S0fmiNEKWMdRrNQ">OneDrive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://drive.google.com/file/d/1dNoPjL0bPx5ewFl61vpQanHHPBflsWdL/view?usp=share_link">Google Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://pan.baidu.com/s/1e_aJvbCUZthaGvBFOS5HhA?pwd=wall">百度网盘 (提取码：wall)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://disk.yandex.ru/d/vA-UW4VqIEx5Wg">Яндекс Диск</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://www.dropbox.com/scl/fi/19gutjtv8gson039k4akh/WallCat-1.0.apk?rlkey=mpgdljgz4mgf9ydp1zsp4tpz6&st=uoh44c0i&dl=0">Dropbox</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://app.box.com/s/q8pdckfn4ltdkrw8w4ybeq0wysx12m5g">Box</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://drive.proton.me/urls/2QBSGT252R#le16Bsi3CqlN">Proton Drive</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://pan.xunlei.com/s/VOP62jYPNlevTgYvIlxZ-mznA1?pwd=dexu">迅雷云盘 (提取码：dexu)</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://1024terabox.com/s/1pKUQkFv9ttsFOc2EgXy5Lw">Terabox</a></ion-label>
+    </ion-item>
+    <ion-item>
+      <ion-label><a href="https://mega.nz/file/DwxnwLIS#BQwbFp9QZlT25Lb476UJX6__9-XCwTJd1VfHJ5hnFTo">MEGA</a></ion-label>
+    </ion-item>
+     <ion-item>
+      <ion-label><a href="https://pan.quark.cn/s/4944d7713e68">夸克网盘</a></ion-label>
+    </ion-item>
+  </ion-list>
+  <br>
+        </ion-content>
+      </ion-modal>
+      <ion-modal ref="modal2" trigger="googlePlayEA_WallCat">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Google Play Early Access</ion-title>
+            <ion-buttons slot="end">
+              <ion-button @click="dismiss2()">Close</ion-button>
+            </ion-buttons>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content class="ion-padding">
+        <p class="guideTextRegular">Due to Google's "production application" requirements, this app is not yet able to be published on Google Play. You can join the closed testing program to access the app now and help fulfill the requirements to get fully published.</p>
+          <div class="guideNumberBackground">1</div>
+          <div class="guideSectionContainer">
+            <div class="guideSectionLineContainer">
+              <div class="guideSectionline"></div>
+            </div>
+            <div class="guideSectionContent">
+              <p class="guideTextRegular">Join <a href="https://groups.google.com/g/pfrmedia-beta">this</a> Google group. Make sure you're using the same Google account as the one you'll download the app on.</p>
+              <img src="../assets/WallCat_GPLAY_Guide_1.png" class="guideImage">
+            </div>
+          </div>
+          <div class="guideNumberBackground">2</div>
+          <div class="guideSectionContainer">
+            <div class="guideSectionLineContainer">
+              <div class="guideSectionline"></div>
+            </div>
+            <div class="guideSectionContent">
+              <p class="guideTextRegular">Go <a href="https://play.google.com/store/apps/details?id=xyz.puffercat.wallcat">here</a> to download the app. Ensure the account you're using on Google Play is the same one you joined the group on.</p>
+              <img src="../assets/WallCat_GPLAY_Guide_2.png" class="guideImage">
+            </div>
+          </div>
+          <div class="guideNumberBackground">3</div>
+          <div class="guideSectionContainer">
+            <div class="guideSectionLineContainer">
+              <div class="guideSectionline"></div>
+            </div>
+            <div class="guideSectionContent">
+              <p class="guideTextRegular">Please use the "Private feedback to developer" function to help the app get published (Google uses this as a metric of app's production readiness)</p>
+              <img src="../assets/WallCat_GPLAY_Guide_3.png" class="guideImage">
+            </div>
+          </div>
+        </ion-content>
+      </ion-modal>
+      <ion-row class="column-standard">
+      <ion-col>
+        <h4><strong>Changelog - 1.0.1</strong></h4>
+        <ul>
+            <li>Updated Frames dashboard from v3.6.2 to v3.7.0</li>
+            <li>First release on Google Play and AppGallery</li>
+            <li>Last release to support Android 5 due to Frames dashboard dropping Android 5 in version 3.7.1 :(</li>
+        </ul>
+    </ion-col>
     </ion-row>
     <ion-row class="column-standard">
       <ion-col>
@@ -47,28 +221,36 @@
         A wallpaper app by Puffercat<br>
         <br>
         Includes collections:<br>
-        • Waves<br>
+        • Smudges<br>
         • Landscapes<br>
+        • Waves<br>
+        • Beam<br>
         • Glass<br>
         • Depth<br>
         • Flat shapes<br>
+        • Photo<br>
         • Aurora<br>
         • Glow<br>
-        <br>
-        More coming soon<br>
+        As well as some wallpapers I made for my other projects<br>
 <br>
     </ion-col>
     </ion-row>
     <ion-row class="column-standard">
       <ion-col>
-        <h4><strong>Screenshots (early development)</strong></h4>
+        <h4><strong>Screenshots</strong></h4>
         <div class="scrollScreenshots">
         <img src="../assets/Screenshot_WallCat_1.png" class="screenshot">
         <img src="../assets/Screenshot_WallCat_2.png" class="screenshot">
         <img src="../assets/Screenshot_WallCat_3.png" class="screenshot">
         <img src="../assets/Screenshot_WallCat_4.png" class="screenshot">
         <img src="../assets/Screenshot_WallCat_5.png" class="screenshot">
-        <img src="../assets/Screenshot_WallCat_6.jpg" class="screenshot">
+        <img src="../assets/Screenshot_WallCat_6.png" class="screenshot">
+        <img src="../assets/Screenshot_WallCat_7.png" class="screenshot">
+        <img src="../assets/Screenshot_WallCat_8.png" class="screenshot">
+        <img src="../assets/Screenshot_WallCat_9.png" class="screenshot">
+        <img src="../assets/Screenshot_WallCat_10.png" class="screenshot">
+        <img src="../assets/Screenshot_WallCat_11.png" class="screenshot">
+        <img src="../assets/Screenshot_WallCat_12.png" class="screenshot">
         </div>
         <br>
     </ion-col>
@@ -76,15 +258,15 @@
     <ion-row class="column-standard">
       <ion-col>
         <h4><strong>Links</strong></h4>
-        <a href="https://puffercat.gumroad.com" class="">Wallpapers</a>
+        <a href="https://wallcat.app?utm_source=PuffercatApps" class="">Website</a>
         <br>
-        <a href="mailto:puffercatt+wallcat@gmail.com" class="">E-mail</a>
+        <a href="mailto:meow@wallcat.app" class="">E-mail</a>
         <br>
-        <a href="https://pufferrom.t.me" class="">Telegram channel (releases)</a>
+        <a href="https://twitter.com/WallCatApp" class="">Twitter</a>
         <br>
-        <a href="https://puffercatchannel.t.me" class="">Telegram channel (general)</a>
+        <a href="https://wallcat.app/privacy">Privacy Policy</a>
         <br>
-        <a href="https://puffercatrom.t.me" class="">Support group</a>
+        <a href="https://wallcat.app/tos">Terms of Service</a>
         <br>
         <br>
     </ion-col>
@@ -108,7 +290,7 @@
   
   export default  defineComponent({
     name: 'Tab1Page',
-    components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonIcon, IonButtons, IonBackButton},
+    components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonIcon, IonButtons, IonBackButton, IonModal},
     setup() {
       return {
         logoAndroid,
@@ -116,6 +298,14 @@
         logoPwa,
         ellipsisVertical
       }
+    },
+    methods: {
+      dismiss() {
+        (this.$refs.modal as InstanceType<typeof IonModal>).$el.dismiss();
+      },
+      dismiss2() {
+        (this.$refs.modal2 as InstanceType<typeof IonModal>).$el.dismiss();
+      },
     }
   });
   </script>
@@ -193,7 +383,14 @@
   } div.scrollScreenshots {
   overflow: auto;
   white-space: nowrap;
-}
+} .column-extension {
+      background-color: transparent;
+      color: var(--ion-color-light-contrast);
+    padding: 0px;
+      border-radius: 25px;
+      margin: 5px;
+      margin-top: 5px;
+    }
 
 div.scrollScreenshots img {
   display: inline-block;
@@ -201,5 +398,40 @@ div.scrollScreenshots img {
 } .hidden-link {
     text-decoration-line: none;
     color: var(--ion-color-light-contrast);
+  } .guideNumberBackground {
+    background-image: linear-gradient(to bottom, #33D198, #06986A);
+    height: 50px;
+    width: 50px;
+    border-radius: 100%;
+    text-align: center;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    font-size: 30px;
+    font-weight: bold;
+    box-shadow: #06986a 0px 2px 10px;
+    color: white;
+  } .guideSectionline {
+    height: 100%;
+    width: 2px;
+    background-color: #33D198;
+  } .guideSectionLineContainer {
+    width: 50px;
+    min-width: 50px;
+    display: flex;
+    justify-content: center;
+  } .guideSectionContainer {
+    display: flex;
+    flex-direction: row;
+  } .guideTextRegular {
+    font-size: 20px;
+  } .guideSectionContent {
+    width: 100%;
+  } .checksum {
+    font-family: monospace;
+  } .guideImage {
+    height: auto;
+    width: 300px;
+    border-radius: 20px;
   }
   </style>

tests/unit/example.spec.js

@@ -0,0 +1,9 @@
+import { mount } from '@vue/test-utils';
+import Tab1Page from '@/views/Apps.vue';
+describe('Tab1Page.vue', () => {
+    it('renders tab 1 Tab1Page', () => {
+        const wrapper = mount(Tab1Page);
+        expect(wrapper.text()).toMatch('Tab 1 page');
+    });
+});
+//# sourceMappingURL=example.spec.js.map

tests/unit/example.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"example.spec.js","sourceRoot":"","sources":["example.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,QAAQ,MAAM,kBAAkB,CAAA;AAEvC,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,wBAAwB,EAAE,GAAG,EAAE;QAChC,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAA;QAC/B,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}