2024-06-13 18:53:41 +00:00
< template >
< ion -page >
< ion -header >
< ion -toolbar >
< ion -buttons slot = "start" >
< ion -back -button default -href = " / " > < / i o n - b a c k - b u t t o n >
< / i o n - b u t t o n s >
< ion -title > ThemeShowcase < / i o n - t i t l e >
< / i o n - t o o l b a r >
< / i o n - h e a d e r >
< ion -content :fullscreen ="true" >
< ion -header collapse = "condense" >
< ion -toolbar >
< ion -title size = "large" > ThemeShowcase < / i o n - t i t l e >
< / i o n - t o o l b a r >
< / i o n - h e a d e r >
< ion -grid >
< ion -row class = "column-standard2" >
< ion -col class = "bannerColumn" >
< / i o n - c o l >
< / i o n - r o w >
< ion -row class = "column-standard" >
< ion -col size = "auto" >
< img src = "../assets/Icon_ThemeShowcase.png" class = "icon" >
< / i o n - c o l >
< 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 > < / i o n - c o l u m n >
< / i o n - r o w >
< ion -row style = "padding: 0px;" >
2026-04-28 03:25:21 +00:00
< ion -column > < p class = "size-appname-icon" > version 1.0 ( Beta 2 ) < / p > < / i o n - c o l u m n >
2024-06-13 18:53:41 +00:00
< / i o n - r o w >
< ion -row style = "padding: 0px;" >
< ion -column > < ion -icon :icon ="logoAndroid" class = "size-appname-icon" / > < / i o n - c o l u m n >
< / i o n - r o w >
< / i o n - c o l >
< / i o n - r o w >
< ion -row class = "column-standard2" >
< ion -col >
2026-04-28 03:25:21 +00:00
< ion -button href = "https://f2.puffercat.xyz/PuffercatApps/ThemeShowcase-1.0b2.apk" expand = "full" shape = "round" style = "margin: 0px;" download = "PufferIcons-latest.apk" > Download < / i o n - b u t t o n >
2024-06-13 18:53:41 +00:00
< / i o n - c o l >
< / i o n - r o w >
2026-04-28 03:25:21 +00:00
< ion -row class = "column-extension" >
< ion -col >
< ion -button id = "alternateMirrors_ThemeShowcase" expand = "full" shape = "round" style = "margin: 0px;" > Alternate mirrors < / i o n - b u t t o n >
< / i o n - c o l >
< ion -col >
< ion -button id = "googlePlayEA_ThemeShowcase" expand = "full" shape = "round" style = "margin: 0px;" > Google Play < / i o n - b u t t o n >
< / i o n - c o l >
< / i o n - r o w >
< ion -modal ref = "modal" trigger = "alternateMirrors_ThemeShowcase" >
< ion -header >
< ion -toolbar >
< ion -title > Alternate mirrors < / i o n - t i t l e >
< ion -buttons slot = "end" >
< ion -button @click ="dismiss()" > Close < / ion -button >
< / i o n - b u t t o n s >
< / i o n - t o o l b a r >
< / i o n - h e a d e r >
< 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 < / i o n - l a b e l >
< 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 > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
2026-05-03 00:28:07 +00:00
< ion -label > < a href = "https://cdn.puffercat.xyz/c/puffercat-apps/apks/ThemeShowcase/ThemeShowcase-1.0b2.apk" > 🇳 🇱 puffercat . xyz - DigitalOcean < / a > < / i o n - l a b e l >
2026-04-28 03:25:21 +00:00
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://deimos.pufferc.at/mirror/ThemeShowcase-1.0b2.apk" > 🇸 🇪 deimos . pufferc . at - aeza < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://www.icloud.com/iclouddrive/0dc1MKbkknpFfAndorZ-BBdTA#ThemeShowcase-1" > iCloud Drive < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://1drv.ms/u/c/c6bbfc602e5efcd0/IQBWjyBlxrLWTp5ikzDVOw_zAdb6H5A05w8fVpz5PgxtmeE?e=UMl3hb" > OneDrive < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://drive.google.com/file/d/1GROivf_X95xFE66lOrTHbSZMrHsDM0we/view?usp=share_link" > Google Drive < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://pan.baidu.com/s/12kjAce8f3NxYGxK-OU0alw?pwd=ztzs" > 百度网盘 ( 提取码 ： ztzs ) < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://disk.yandex.ru/d/RFrpDvjxJyQqcg" > Яндекс Диск < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< 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 > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://app.box.com/s/of7hu7p6hceyk6xvsng7dtorkawthz6y" > Box < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://drive.proton.me/urls/H82GV8YBPM#Wmre4qOZzODv" > Proton Drive < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://pan.xunlei.com/s/VOrBPeGkXa4i9wv-zl6Bp9utA1?pwd=gjwj" > 迅雷云盘 ( 提取码 ： gjwj ) < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://1024terabox.com/s/1CTwe27O0aBY2Q1asgBBAQw" > Terabox < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://mega.nz/file/q5wVBKiT#29V11ruNfsvxMc_e8QjDofAtdKJhVaYJdQrxQiInwz8" > MEGA < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://pan.quark.cn/s/12099dbf747f" > 夸克网盘 < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< / i o n - l i s t >
< h2 style = "padding-left: 30px;" > ThemeShowcase 1.0 ( Beta 1 ) < / h2 >
< ion -label color = "medium" class = "tableLabel" style = "padding-left: 30px;" > SHA256 Checksum : 9 bbecb33d577e1dfb26491f456eed75f1658c91a95a74a2c3806b679a1b2ac26 < / i o n - l a b e l >
< 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 > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
2026-05-03 00:28:07 +00:00
< ion -label > < a href = "https://cdn.puffercat.xyz/c/puffercat-apps/apks/ThemeShowcase/ThemeShowcase-1.0b.apk" > 🇳 🇱 puffercat . xyz - DigitalOcean < / a > < / i o n - l a b e l >
2026-04-28 03:25:21 +00:00
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://deimos.pufferc.at/mirror/ThemeShowcase-1.0b.apk" > 🇸 🇪 deimos . pufferc . at - aeza < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://www.icloud.com/iclouddrive/06esiWCsrhr8f2YHXx0UjIiSA#ThemeShowcase-1" > iCloud Drive < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://1drv.ms/u/c/c6bbfc602e5efcd0/IQDW4qjhuycJSp-4Mqfr11lYAUYO-iEoIbsWlzBB-Pyk-tg?e=aLRQTX" > OneDrive < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://drive.google.com/file/d/1AauWIG6HuEHoVzoDx-g7TsJL1e8ryPch/view?usp=share_link" > Google Drive < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://pan.baidu.com/s/1RGYat1gN9Tr3PALx_uJPMw?pwd=ztzs" > 百度网盘 ( 提取码 ： ztzs ) < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://disk.yandex.ru/d/rkn4wXI5cwk3og" > Яндекс Диск < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< 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 > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://app.box.com/s/2paombc0rin2fwua6ymrslnl5p6appmn" > Box < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://drive.proton.me/urls/R31K5G9DCG#30J7GaScLdp2" > Proton Drive < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://pan.xunlei.com/s/VOrBPj5FhnZ2OUODS3GovMCFA1?pwd=zyyc" > 迅雷云盘 ( 提取码 ： zyyc ) < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://1024terabox.com/s/19ttrqa8gnrPAWloC98dtRQ" > Terabox < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://mega.nz/file/utgCHLZb#30Lo_t_RcJTv1pQOEcMR6A9m-djWK92MOGDzwQ9crUY" > MEGA < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< ion -item >
< ion -label > < a href = "https://pan.quark.cn/s/63945f16a0b7" > 夸克网盘 < / a > < / i o n - l a b e l >
< / i o n - i t e m >
< / i o n - l i s t >
< br >
< / i o n - c o n t e n t >
< / i o n - m o d a l >
< ion -modal ref = "modal2" trigger = "googlePlayEA_ThemeShowcase" >
< ion -header >
< ion -toolbar >
< ion -title > Google Play Early Access < / i o n - t i t l e >
< ion -buttons slot = "end" >
< ion -button @click ="dismiss2()" > Close < / ion -button >
< / i o n - b u t t o n s >
< / i o n - t o o l b a r >
< / i o n - h e a d e r >
< 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 >
< / i o n - c o n t e n t >
< / i o n - m o d a l >
2024-06-13 18:53:41 +00:00
< ion -row class = "column-standard" >
< ion -col >
2026-04-28 03:25:21 +00:00
< h4 > < strong > Changelog - 1.0 ( Beta 2 ) < / strong > < / h4 >
2024-06-13 18:53:41 +00:00
< ul >
2026-04-28 03:25:21 +00:00
< li > Updated target Android version to comply with Google Play requirements < / li >
< li > First release on Google Play < / li >
2024-06-13 18:53:41 +00:00
< / ul >
< / i o n - c o l >
< / i o n - r o w >
< 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 >
< / i o n - c o l >
< / i o n - r o w >
< 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 >
< / i o n - c o l >
< / i o n - r o w >
< 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 >
< / i o n - c o l >
< / i o n - r o w >
< / i o n - g r i d >
< / i o n - c o n t e n t >
< / i o n - p a g e >
< / 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' ,
2026-04-28 03:25:21 +00:00
components : { IonHeader , IonToolbar , IonTitle , IonContent , IonPage , IonCol , IonGrid , IonRow , IonButton , IonIcon , IonButtons , IonBackButton , IonModal } ,
2024-06-13 18:53:41 +00:00
setup ( ) {
return {
logoAndroid ,
arrowDown ,
logoPwa ,
ellipsisVertical
}
2026-04-28 03:25:21 +00:00
} ,
methods : {
dismiss ( ) {
( this . $refs . modal as InstanceType < typeof IonModal > ) . $el . dismiss ( ) ;
} ,
dismiss2 ( ) {
( this . $refs . modal2 as InstanceType < typeof IonModal > ) . $el . dismiss ( ) ;
} ,
2024-06-13 18:53:41 +00:00
}
} ) ;
< / script >
< style scoped >
. column - standard {
background - color : var ( -- ion - color - light - shade ) ;
color : var ( -- ion - color - light - contrast ) ;
padding : 15 px ;
border - radius : 25 px ;
margin : 5 px ;
margin - top : 15 px ;
} . icon {
width : 90 px ;
margin - right : 5 px ;
} ion - button {
-- box - shadow : 0 px ;
} . download - column {
text - align : right ;
display : flex ;
justify - content : right ;
align - items : center ;
} . description - column {
align - items : center ;
} . size - appname {
font - size : 20 px ;
} . size - appname - icon {
font - size : 15 px ;
} . logoAbout {
width : 125 px ;
margin : 10 px ;
margin - top : 20 px ;
} . 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 : 175 px ;
}
. bannerColumn {
height : 500 px ;
background - image : url ( "../assets/Banner_ThemeShowcase.png" ) ;
background - repeat : no - repeat ;
background - size : cover ;
background - position : center ;
border - radius : 25 px ;
}
@ media screen and ( max - width : 850 px ) {
. bannerColumn {
height : 200 px ;
}
}
. column - standard2 {
background - color : transparent ;
color : var ( -- ion - color - light - contrast ) ;
padding : 0 px ;
border - radius : 25 px ;
margin : 5 px ;
margin - top : 15 px ;
} ion - button {
-- box - shadow : 0 px ;
} . screenshot {
height : 600 px ;
border - radius : 30 px ;
} div . scrollScreenshots {
overflow : auto ;
white - space : nowrap ;
}
div . scrollScreenshots img {
display : inline - block ;
padding : 10 px ;
} . hidden - link {
text - decoration - line : none ;
color : var ( -- ion - color - light - contrast ) ;
2026-04-28 03:25:21 +00:00
} . guideNumberBackground {
background - image : linear - gradient ( to bottom , # 33 D198 , # 06986 A ) ;
height : 50 px ;
width : 50 px ;
border - radius : 100 % ;
text - align : center ;
align - items : center ;
justify - content : center ;
display : flex ;
font - size : 30 px ;
font - weight : bold ;
box - shadow : # 06986 a 0 px 2 px 10 px ;
color : white ;
} . guideSectionline {
height : 100 % ;
width : 2 px ;
background - color : # 33 D198 ;
} . guideSectionLineContainer {
width : 50 px ;
min - width : 50 px ;
display : flex ;
justify - content : center ;
} . guideSectionContainer {
display : flex ;
flex - direction : row ;
} . guideTextRegular {
font - size : 20 px ;
} . guideSectionContent {
width : 100 % ;
} . checksum {
font - family : monospace ;
} . guideImage {
height : auto ;
width : 300 px ;
border - radius : 20 px ;
} . column - extension {
background - color : transparent ;
color : var ( -- ion - color - light - contrast ) ;
padding : 0 px ;
border - radius : 25 px ;
margin : 5 px ;
margin - top : 5 px ;
}
2024-06-13 18:53:41 +00:00
< / style >
