versun/apps.apple.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
rxliuli
2025-11-04 05:03:50 +08:00
commit bce557cc2d
1396 changed files with 172991 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

188
src/components/ProductPageArcadeBanner.svelte Normal file
View File

@@ -0,0 +1,188 @@
<script lang="ts">
import AppleArcadeLogo from '~/components/icons/AppleArcadeLogo.svg';
import { getI18n } from '~/stores/i18n';
const i18n = getI18n();
</script>
<aside>
<div class="arcade-banner">
<div class="metadata-container">
<div class="logo-container">
<AppleArcadeLogo />
</div>
<h2>
{$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineOne')}
<br />
{$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineTwo')}
{$i18n.t('ASE.Web.AppStore.Arcade.UpsellFooter.LineThree')}
</h2>
<a href="https://www.apple.com/apple-arcade/" target="_blank">
<span>
{$i18n.t(
'ASE.Web.AppStore.Arcade.UpsellFooter.CallToActionText',
)}
</span>
{$i18n.t(
'ASE.Web.AppStore.Arcade.UpsellFooter.CallToActionDisclaimerMark',
)}
</a>
</div>
</div>
</aside>
<style lang="scss">
@use '@amp/web-shared-styles/app/core/globalvars' as *;
@use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
@use 'ac-sasskit/core/locale' as *;
@use 'ac-sasskit/modules/viewportcontent/core' as *;
@use 'amp/stylekit/core/viewports' as *;
.logo-container {
width: 62px;
margin-bottom: 10px;
line-height: 0;
@media (--range-xsmall-only) {
width: 48px;
margin-bottom: 8px;
}
}
.logo-container :global(path) {
color: var(--systemPrimary-onDark);
}
.metadata-container {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
height: 100%;
padding: 0 20px;
@media (--range-xsmall-only) {
align-items: flex-start;
justify-content: center;
}
}
h2 {
margin-bottom: 10px;
font: var(--title-1-emphasized);
@media (--range-xsmall-only) {
margin-bottom: 8px;
font: var(--title-3-emphasized);
}
}
a {
display: flex;
font: var(--title-3-emphasized);
@media (--range-xsmall-only) {
font: var(--body-emphasized);
}
}
a::after {
content: '↗';
font-weight: normal;
margin-inline-start: 4px;
}
a:hover {
text-decoration: none;
}
a:hover span {
text-decoration: underline;
}
aside {
width: 100%;
max-width: calc(viewport-content-for(xlarge));
height: 152px;
margin: 0 auto 32px;
padding: 0 var(--bodyGutter);
@media (--range-xsmall-only) {
max-width: 100%;
padding: 0;
}
}
.arcade-banner {
width: 100%;
height: 100%;
color: var(--systemPrimary-onDark);
border-radius: var(--global-border-radius-medium);
background: #000;
background-repeat: no-repeat;
background-position: right;
background-size: contain;
@media (prefers-color-scheme: dark) {
border: 1px solid var(--systemQuaternary-onDark);
}
@media (--range-xsmall-only) {
border-radius: 0;
background-image: url('/assets/images/arcade/upsell/banner-692@1x_LTR.png');
background-size: cover;
@include rtl {
background-image: url('/assets/images/arcade/upsell/banner-692@1x_RTL.png');
background-position: left;
}
@media (resolution >= 192dpi) {
background-image: url('/assets/images/arcade/upsell/banner-692@2x_LTR.png');
@include rtl {
background-image: url('/assets/images/arcade/upsell/banner-692@2x_RTL.png');
background-position: left;
}
}
}
@media (--range-small-only) {
background-image: url('/assets/images/arcade/upsell/banner-692@1x_LTR.png');
@include rtl {
background-image: url('/assets/images/arcade/upsell/banner-692@1x_RTL.png');
background-position: left;
}
@media (resolution >= 192dpi) {
background-image: url('/assets/images/arcade/upsell/banner-692@2x_LTR.png');
@include rtl {
background-image: url('/assets/images/arcade/upsell/banner-692@2x_RTL.png');
background-position: left;
}
}
}
@media (--range-medium-up) {
background-image: url('/assets/images/arcade/upsell/banner-980@1x_LTR.png');
@include rtl {
background-image: url('/assets/images/arcade/upsell/banner-980@1x_RTL.png');
background-position: left;
}
@media (resolution >= 192dpi) {
background-image: url('/assets/images/arcade/upsell/banner-980@2x_LTR.png');
@include rtl {
background-image: url('/assets/images/arcade/upsell/banner-980@2x_RTL.png');
background-position: left;
}
}
}
}
</style>