hahahahahahahahah

Bump webpack from 5.87.0 to 5.94.0

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/no-deprecated-slot-attribute': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
+    'vue/multi-word-component-names': 'off', 
   },
   overrides: [
     {

.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": [
+  "recommendations": [
-        "ionic.ionic"
+    "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,23 +11,25 @@
     "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/vue": "^6.0.0",
+    "@ionic/core": "latest",
-    "@ionic/vue-router": "^6.0.0",
+    "@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.21",
+    "vue": "latest",
-    "vue-router": "^4.0.12"
+    "vue-router": "latest"
   },
   "devDependencies": {
-    "@capacitor/cli": "4.5.0",
+    "@capacitor/cli": "4.8.0",
     "@types/jest": "^27.0.2",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
@@ -37,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

public/index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8" />
     <title>Puffercat Apps</title>
 
+<script defer file-types="apk" data-domain="apps.puffercat.xyz" src="https://analytics.puffercat.xyz/js/script.file-downloads.outbound-links.js"></script>
+    
     <base href="/" />
 
     <meta name="color-scheme" content="light dark" />

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'
@@ -11,6 +11,8 @@ import PufferIcons_Filled from '../views/PufferIcons_Filled.vue'
 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> = [
   {
@@ -55,31 +57,21 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Blurry Wallpapers',
     component: Blurry_Wallpapers,
   },
-  {
-    path: '/details/Tipper_by_myCALC',
-    name: 'Tipper by myCALC',
-    component: Tipper_by_myCALC,
-  },
-  {
-    path: '/details/PufferIcons_Filled',
-    name: 'PufferIcons Filled',
-    component: PufferIcons_Filled,
-  },
   {
     path: '/details/WallCat',
     name: 'WallCat',
     component: WallCat,
   },
-  {
-    path: '/details/Tipper3',
-    name: 'Tipper3',
-    component: Tipper3,
-  },
   {
     path: '/details/BetterAperture',
     name: 'BetterAperture',
     component: BetterAperture,
   },
+  {
+    path: '/details/ThemeShowcase',
+    name: 'ThemeShowcase',
+    component: ThemeShowcase,
+  },
 ]
 
 const router = createRouter({

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-b2 (Beta 2)</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/">
+      <ion-label><a href="https://netlify.com"><img src="../assets/Logo_Netlify.png" class="aboutFrameworkLogo"></a></ion-label>
-        <img src="../assets/Logo_Vercel.png" class="vueLogoLight aboutFrameworkLogo">
-        <img src="../assets/Logo_Vercel_Dark.png" class="vueLogoDark aboutFrameworkLogo">
-      </a></ion-label>
     </ion-item>
   </ion-list>
   <br><br><br>
@@ -89,16 +86,54 @@
         </ion-toolbar>
       </ion-header>
       <ion-grid>
-<ion-row class="column-standard">
+        <ion-row class="column-standard">
-    <ion-col size="auto">
+    <ion-col size="auto" button @click="() => router.push('/details/WallCat')">
-      <a href="/details/PufferIcons"><img src="../assets/Icon_PufferIcons.png" class="icon"></a>
+      <img src="../assets/Icon_WallCat.png" class="icon">
     </ion-col>
-    <ion-col size="auto" class="description-column">
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/WallCat')">
         <ion-row>
-          <ion-column><a href="/details/PufferIcons" class="hidden-link"><h4 class="size-appname">PufferIcons</h4></a></ion-column>
+          <ion-column><h4 class="size-appname">WallCat</h4></ion-column>
         </ion-row>
         <ion-row>
-          <a href="/details/PufferIcons"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon hidden-link"/></ion-column></a>
+          <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">
+    </ion-col>
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/PufferIcons')">
+        <ion-row>
+          <ion-column><h4 class="size-appname">PufferIcons</h4></ion-column>
+        </ion-row>
+        <ion-row>
+          <ion-column button @click="() => router.push('/details/PufferIcons')"><ion-icon :icon="logoAndroid" class="size-appname-icon hidden-link"/></ion-column>
         </ion-row>
     </ion-col>
     <ion-col>
@@ -109,15 +144,15 @@
     </ion-col>
   </ion-row>
   <ion-row class="column-standard">
-    <ion-col size="auto">
+    <ion-col size="auto" button @click="() => router.push('/details/Puffercat_Apps')">
-      <a href="/details/Puffercat_Apps"><img src="../assets/Icon_Puffercat_Apps.png" class="icon"></a>
+      <img src="../assets/Icon_Puffercat_Apps.png" class="icon">
     </ion-col>
     <ion-col size="auto" class="description-column">
         <ion-row>
-          <a href="/details/Puffercat_Apps" class="hidden-link"><ion-column><h4 class="size-appname">Puffercat Apps</h4></ion-column></a>
+          <ion-column button @click="() => router.push('/details/Puffercat_Apps')"><h4 class="size-appname">Puffercat Apps</h4></ion-column>
         </ion-row>
         <ion-row>
-          <a href="/details/Puffercat_Apps" class="hidden-link"><ion-column><ion-icon :icon="logoPwa" class="size-appname-icon"/></ion-column></a>
+          <ion-column button @click="() => router.push('/details/Puffercat_Apps')"><ion-icon :icon="logoPwa" class="size-appname-icon"/></ion-column>
         </ion-row>
     </ion-col>
     <ion-col class="download-column">
@@ -138,28 +173,32 @@
             <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>
     </ion-col>
   </ion-row>
   <ion-row class="column-standard">
-    <ion-col size="auto">
+    <ion-col size="auto" button @click="() => router.push('/details/BetterAperture')">
-      <a href="/details/BetterAperture" class="hidden-link"><img src="../assets/Icon_BetterAperture.png" class="icon"></a>
+      <img src="../assets/Icon_BetterAperture.png" class="icon">
     </ion-col>
-    <ion-col size="auto" class="description-column">
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/BetterAperture')">
         <ion-row>
-          <a href="/details/BetterAperture" class="hidden-link"><ion-column><h4 class="size-appname">BetterAperture</h4></ion-column></a>
+          <ion-column><h4 class="size-appname">BetterAperture</h4></ion-column>
         </ion-row>
         <ion-row>
-          <a href="/details/BetterAperture" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
+          <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
         </ion-row>
     </ion-col>
     <ion-col class="download-column">
@@ -167,51 +206,35 @@
     </ion-col>
   </ion-row>
   <ion-row class="column-standard">
-    <ion-col size="auto">
+    <ion-col size="auto" button @click="() => router.push('/details/Shapes')">
-      <a href="/details/Shapes" class="hidden-link"><img src="../assets/Icon_Shapes.png" class="icon"></a>
+      <img src="../assets/Icon_Shapes.png" class="icon">
     </ion-col>
-    <ion-col size="auto" class="description-column">
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/Shapes')">
         <ion-row>
-          <a href="/details/Shapes" class="hidden-link"><ion-column><h4 class="size-appname">Shapes</h4></ion-column></a>
+          <ion-column><h4 class="size-appname">Shapes</h4></ion-column>
         </ion-row>
         <ion-row>
-          <a href="/details/Shapes" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
+          <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
         </ion-row>
     </ion-col>
     <ion-col class="download-column">
-      <ion-button shape="round" href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Shapes/shapes-1.0.4.apk"><ion-icon :icon="arrowDown" /></ion-button>
+      <ion-button shape="round" href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Shapes/shapes-1.0.5.apk"><ion-icon :icon="arrowDown" /></ion-button>
     </ion-col>
   </ion-row>
   <ion-row class="column-standard">
-    <ion-col size="auto">
+    <ion-col size="auto" button @click="() => router.push('/details/Blurry_Wallpapers')">
-      <a href="/details/Blurry_Wallpapers" class="hidden-link"><img src="../assets/Icon_Blurry.png" class="icon"></a>
+      <img src="../assets/Icon_Blurry.png" class="icon">
     </ion-col>
-    <ion-col size="auto" class="description-column">
+    <ion-col size="auto" class="description-column" button @click="() => router.push('/details/Blurry_Wallpapers')">
         <ion-row>
-          <a href="/details/Blurry_Wallpapers" class="hidden-link"><ion-column><h4 class="size-appname">Blurry Wallpapers</h4></ion-column></a>
+          <ion-column><h4 class="size-appname">Blurry Wallpapers</h4></ion-column>
         </ion-row>
         <ion-row>
-          <a href="/details/Blurry_Wallpapers" class="hidden-link"><ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column></a>
+          <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
         </ion-row>
     </ion-col>
     <ion-col class="download-column">
-      <ion-button shape="round" href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Blurry_Wallpapers/blurry-wallpapers-1.0.3.apk"><ion-icon :icon="arrowDown" /></ion-button>
+      <ion-button shape="round" href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Blurry_Wallpapers/blurry-wallpapers-1.0.4.apk"><ion-icon :icon="arrowDown" /></ion-button>
-    </ion-col>
-  </ion-row>
-  <ion-row class="column-bottom">
-    <ion-col size="auto">
-      <a href="/details/Tipper_by_myCALC" class="hidden-link"><img src="../assets/Icon_Tipper.png" class="icon"></a>
-    </ion-col>
-    <ion-col size="auto" class="description-column">
-        <ion-row>
-          <a href="/details/Tipper_by_myCALC" class="hidden-link"><ion-column><h4 class="size-appname">Tipper by myCALC</h4></ion-column></a>
-        </ion-row>
-        <ion-row>
-          <a href="/details/Tipper_by_myCALC" 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" href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Tipper_by_myCALC/tipper-by-mycalc-1.1-dev.apk"><ion-icon :icon="arrowDown" /></ion-button>
     </ion-col>
   </ion-row>
 </ion-grid>
@@ -219,6 +242,12 @@
   </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,
@@ -230,22 +259,10 @@ import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonCol, IonGrid,
     IonLabel, IonPopover } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
 import { logoAndroid, arrowDown, logoPwa, ellipsisVertical } from 'ionicons/icons';
+import { useRouter } from 'vue-router';
 
-export default  defineComponent({
+export default defineComponent ({
-  name: 'Tab1Page',
+  methods: {
-  components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonButtons, IonIcon,
-      IonModal,
-      IonItem,
-      IonList, IonPopover },
-  setup() {
-    return {
-      logoAndroid,
-      arrowDown,
-      logoPwa,
-      ellipsisVertical
-    }
-  },
-    methods: {
       dismiss() {
         (this.$refs.modal as InstanceType<typeof IonModal>).$el.dismiss();
       },

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="" disabled="true" expand="full" shape="round" style="margin: 0px;">Google Play</ion-button>
-      </ion-col>
     </ion-row>
     <ion-row class="column-standard">
       <ion-col>
@@ -185,13 +182,18 @@ Join the support group on Telegram: <a href="https://puffercatrom.t.me">https://
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_BetterAperture.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

src/views/Blurry_Wallpapers.vue

@@ -29,7 +29,7 @@
             <ion-column style="padding: 0px; margin: 0px;"><p class="size-appname" style="padding: 0px; margin: 0px;"><strong>Blurry Wallpapers</strong></p></ion-column>
           </ion-row>
           <ion-row style="padding: 0px;">
-            <ion-column><p class="size-appname-icon">version 1.0.3</p></ion-column>
+            <ion-column><p class="size-appname-icon">version 1.0.4</p></ion-column>
           </ion-row>
           <ion-row style="padding: 0px;">
             <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
@@ -38,19 +38,16 @@
     </ion-row>
     <ion-row class="column-standard2">
       <ion-col>
-        <ion-button href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Blurry_Wallpapers/blurry-wallpapers-1.0.3.apk" expand="full" shape="round" style="margin: 0px;" download="Blurry-wallpapers-latest.apk">Download</ion-button>
+        <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>
-        <h4><strong>Changelog - 1.0.3</strong></h4>
+        <h4><strong>Changelog - 1.0.4</strong></h4>
         <ul>
-            <li>Added an Android 13 themed icon</li>
+            <li>Added a legacy icon</li>
-            <li>Added a splash screen</li>
+            <li>Changed the icon format to webp</li>
-            <li>Disabled IAP support</li>
+            <li>Updated the about page</li>
         </ul>
     </ion-col>
     </ion-row>
@@ -173,13 +170,18 @@ Blurry wallpapers with and without grain. The collection will be frequently upda
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_Blurry_Wallpapers.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

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-b2 (Beta 2)</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/">
+      <ion-label><a href="https://netlify.com"><img src="../assets/Logo_Netlify.png" class="aboutFrameworkLogo"></a></ion-label>
-        <img src="../assets/Logo_Vercel.png" class="vueLogoLight aboutFrameworkLogo">
-        <img src="../assets/Logo_Vercel_Dark.png" class="vueLogoDark 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-content class="ion-padding emptyStateContainer">
-  <ion-row class="column-standard">
+        <div class="emptyStateContainer">
-    <ion-col size="auto">
+        <div class="emptyStateContent">
-      <a href="/details/PufferIcons_Filled" class="hidden-link"><img src="../assets/Icon_PufferIcons_Filled.png" class="icon"></a>
+        <ion-icon slot="icon-only" :icon="timeOutline" class="emptyStateIcon"></ion-icon>
-    </ion-col>
+        <h3 class="emptyStateText">No upcoming apps</h3>
-    <ion-col size="auto" class="description-column">
+        </div>
-        <ion-row>
+        </div>
-          <a href="/details/PufferIcons_Filled" class="hidden-link"><ion-column><h4 class="size-appname">PufferIcons Filled</h4></ion-column></a>
+        </ion-content>
-        </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/Tipper3" class="hidden-link"><img src="../assets/Icon_Tipper3.png" class="icon"></a>
-    </ion-col>
-    <ion-col size="auto" class="description-column">
-        <ion-row>
-          <a href="/details/Tipper3" class="hidden-link"><ion-column><h4 class="size-appname">Tipper3</h4></ion-column></a>
-        </ion-row>
-        <ion-row>
-         <a href="/details/Tipper3" 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>
   </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({
+export default defineComponent ({
-  name: 'Tab1Page',
+  methods: {
-  components: {IonHeader, IonToolbar, IonTitle, IonContent, IonPage, IonCol, IonGrid, IonRow, IonButton, IonButtons, IonIcon,
-      IonModal,
-      IonItem,
-      IonList, IonPopover },
-  setup() {
-    return {
-      logoAndroid,
-      arrowDown,
-      logoPwa,
-      ellipsisVertical
-    }
-  },
-    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/PufferIcons.vue

@@ -164,14 +164,21 @@ Lawnicons is an add-on for adding themed icons to Lawnchair 12 Alpha 5 and above
     }
   } .aboutFrameworkLogo {
     width: 175px;
-  } .bannerColumn {
+  }
-    height: 200px;
+  .bannerColumn {
+    height: 500px;
     background-image: url("../assets/Banner_PufferIcons.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+}
+  .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

src/views/PufferIcons_Filled.vue

@@ -1,188 +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: 200px;
-    background-image: url("../assets/Banner_PufferIcons_Filled.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    border-radius: 25px;
-  } .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-b2 (Beta 2)</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,9 +73,12 @@
     </ion-row>
     <ion-row class="column-standard">
       <ion-col>
-        <h4><strong>Changelog - 1.0.0-b2</strong></h4>
+        <h4><strong>Changelog - 1.0.0-b7</strong></h4>
         <ul>
-            <li>Added BetterAperture</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>
@@ -86,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_1.jpg" class="screenshot">
-        <img src="../assets/Screenshot_Puffercat_Apps_2.png" class="screenshot">
+        <img src="../assets/Screenshot_Puffercat_Apps_2.jpg" class="screenshot">
-        <img src="../assets/Screenshot_Puffercat_Apps_3.png" class="screenshot">
+        <img src="../assets/Screenshot_Puffercat_Apps_3.jpg" class="screenshot">
-        <img src="../assets/Screenshot_Puffercat_Apps_4.png" 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">
@@ -111,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>
@@ -201,13 +208,18 @@ The full catalog of apps created by Puffercat as well as ones currently in devel
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_Puffercat_Apps.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

src/views/Shapes.vue

@@ -29,7 +29,7 @@
             <ion-column style="padding: 0px; margin: 0px;"><p class="size-appname" style="padding: 0px; margin: 0px;"><strong>Shapes</strong></p></ion-column>
           </ion-row>
           <ion-row style="padding: 0px;">
-            <ion-column><p class="size-appname-icon">version 1.0.4</p></ion-column>
+            <ion-column><p class="size-appname-icon">version 1.0.5</p></ion-column>
           </ion-row>
           <ion-row style="padding: 0px;">
             <ion-column><ion-icon :icon="logoAndroid" class="size-appname-icon"/></ion-column>
@@ -38,17 +38,16 @@
     </ion-row>
     <ion-row class="column-standard2">
       <ion-col>
-        <ion-button href="https://cdn.puffercat.xyz/c/puffercat-apps/apks/Shapes/shapes-1.0.4.apk" expand="full" shape="round" style="margin: 0px;" download="Shapes-latest.apk">Download</ion-button>
+        <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>
-        <h4><strong>Changelog - 1.0.4</strong></h4>
+        <h4><strong>Changelog - 1.0.5</strong></h4>
         <ul>
-            <li>Disabled IAP support</li>
+            <li>Added a legacy icon</li>
+            <li>Changed the icon format to webp</li>
+            <li>Updated the about page</li>
         </ul>
     </ion-col>
     </ion-row>
@@ -179,13 +178,18 @@ Shapes is a collection of monet-compliant wallpapers available in many colors<br
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_Shapes.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;

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/Tipper3.vue

@@ -1,187 +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>Tipper3</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content :fullscreen="true">
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-title size="large">Tipper3</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_Tipper3.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>Tipper3</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>
-        The replacement for Tipper by myCALC. A tip calculator designed with Google's Material Design 3 guidelines and Material you that feels native to Android.<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+tipper3@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: 200px;
-    background-image: url("../assets/Banner_Tipper3.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    border-radius: 25px;
-  } .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/Tipper_by_myCALC.vue

@@ -1,200 +0,0 @@
-<template>
-    <ion-page>
-      <ion-header>
-        <ion-toolbar>
-    <ion-buttons slot="start">
-    <ion-back-button default-href="/"></ion-back-button>
-  </ion-buttons>
-          <ion-title>Tipper by myCALC</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content :fullscreen="true">
-        <ion-header collapse="condense">
-          <ion-toolbar>
-            <ion-title size="large">Tipper by myCALC</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_Tipper.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>Tipper by myCALC</strong></p></ion-column>
-          </ion-row>
-          <ion-row style="padding: 0px;">
-            <ion-column><p class="size-appname-icon">version 1.1-dev</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://cdn.puffercat.xyz/c/puffercat-apps/apks/Tipper_by_myCALC/tipper-by-mycalc-1.1-dev.apk" expand="full" shape="round" style="margin: 0px;" download="Tipper-latest.apk">Download</ion-button>
-      </ion-col>
-      <ion-col>
-        <ion-button href="https://play.google.com/store/apps/details?id=pl.kacperzacharski.puffercat.tipper" expand="full" shape="round" style="margin: 0px;">Google Play</ion-button>
-      </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Changelog - 1.1-dev</strong></h4>
-        <ul>
-            <li>Added Material Design 3 support</li>
-        </ul>
-    </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Description</strong></h4>
-        Minimal and easy to use open-source tip calculator.<br>
-Tipper by myCALC is a modern and simple tip calculating app.<br>
-Works with a lot of currencies.<br>
-<br>
-    </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Screenshots</strong></h4>
-        <div class="scrollScreenshots">
-        <img src="../assets/Screenshot_Tipper_1.webp" class="screenshot">
-        <img src="../assets/Screenshot_Tipper_2.webp" class="screenshot">
-        <img src="../assets/Screenshot_Tipper_3.webp" class="screenshot">
-        <img src="../assets/Screenshot_Tipper_4.webp" class="screenshot">
-        <img src="../assets/Screenshot_Tipper_5.webp" class="screenshot">
-        <img src="../assets/Screenshot_Tipper_6.webp" class="screenshot">
-        </div>
-        <br>
-    </ion-col>
-    </ion-row>
-    <ion-row class="column-standard">
-      <ion-col>
-        <h4><strong>Links</strong></h4>
-        <a href="mailto:puffercatt+mycalc@gmail.com" class="">E-mail</a>
-        <br>
-        <a href="https://cdn.puffercat.xyz/c/mycalc/tipper-privacy/" class="">Privacy policy</a>
-        <br>
-        <a href="https://github.com/KZacharski/tipperbymycalc" 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: 200px;
-    background-image: url("../assets/Banner_Tipper.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-    border-radius: 25px;
-  } .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;
-    width: auto;
-    border-radius: 30px;
-  } div.scrollScreenshots {
-  overflow: auto;
-  white-space: nowrap;
-  object-fit: none;
-}
-
-div.scrollScreenshots img {
-  display: inline-block;
-  padding: 10px;
-} .hidden-link {
-    text-decoration-line: none;
-    color: var(--ion-color-light-contrast);
-  }
-  </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>
+        As well as some wallpapers I made for my other projects<br>
-        More coming soon<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>
@@ -167,13 +357,18 @@
   } .aboutFrameworkLogo {
     width: 175px;
   } .bannerColumn {
-    height: 200px;
+    height: 500px;
     background-image: url("../assets/Banner_WallCat.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     border-radius: 25px;
-  } .column-standard2 {
+  }
+  @media screen and (max-width: 850px) {
+    .bannerColumn {
+        height: 200px;
+    }
+} .column-standard2 {
       background-color: transparent;
       color: var(--ion-color-light-contrast);
     padding: 0px;
@@ -188,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;
@@ -196,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/e2e/.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     'cypress/globals': true
   },
   rules: {
+    'vue/multi-word-component-names': 'off', 
     strict: 'off'
   }
 }

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"}