let appleClips;
appleClips = new CupertinoPane('ion-apple-clips', {
initialBreak: 'top',
breaks: {
top: { enabled: true, height: 370 },
middle: { enabled: false},
bottom: { enabled: false},
},
backdrop: true,
backdropOpacity: 0.4,
topperOverflow: false,
bottomClose: true,
buttonDestroy: true,
showDraggable: false,
bottomOffset: 8
});
window.onload = async function () {
await document.querySelector('ion-app').componentOnReady();
present();
}
function present() {
setTimeout(() => appleClips.present({animate: true}));
}
<html mode="ios">
<body>
<ion-app>
<ion-content>
<ion-header>
<ion-toolbar>
<ion-title>Better your business</ion-title>
</ion-toolbar>
</ion-header>
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/playground/img/nike-1.jpg?raw=true" />
<p class="main">
Stay competitive and strengthen your business with
opportunities that will help you reach your full potential.
</p>
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/playground/img/nike-2.jpg?raw=true" />
<p class="main">
Get the latest information, articles and insights in training, mindset, nutrition,
recovery and sleep from the Nike Performance Council – delivered direct
to your NTC inbox.
</p>
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/playground/img/nike-3.jpg?raw=true" />
<!-- apple-clips -->
<ion-apple-clips>
<div class="picture"></div>
<div class="content">
<div class="info">
<div class="left-side">
<h1>Nike Training Club</h1>
<p>Tap start to begin this <br> workout session.</p>
</div>
<div class="right-side">
<ion-button>Start</ion-button>
</div>
</div>
<div class="description">
<div class="powered">
<div class="icon">
<img src="https://github.com/roman-rr/cupertino-pane/blob/master/playground/img/nike-app.png?raw=true" alt="nike-app" />
</div>
<div class="title">
<div class="by">
Powered by
</div>
<div class="name">
Nike Training Club <div class="age">4+</div>
</div>
</div>
</div>
<div class="store">
App Store
<ion-icon name="chevron-forward-outline"></ion-icon>
</div>
</div>
</div>
</ion-apple-clips> <!-- End apple-clips -->
</ion-content>
</ion-app>
</body>
</html>
ion-content p.main {
text-align: center;
margin-left: 20px;
margin-right: 20px;
color: #717171;
font-size: 15px;
}
.pane {
overflow: hidden;
border-radius: 30px !important;
width: calc(100% - 16px) !important;
margin: auto;
left: 0;
right: 0;
height: auto !important;
background: transparent !important;
padding-top: 0px !important;
}
.pane .close-button {
background: rgb(235, 235, 235, 0.5) !important;
}
ion-apple-clips {
display: block;
margin: 0;
text-align: center;
background: transparent;
}
ion-apple-clips .picture {
background-image: url('https://github.com/roman-rr/cupertino-pane/blob/master/playground/img/app-clips.jpg?raw=true');
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
}
ion-apple-clips .content {
height: 170px;
background: rgba(255, 255, 255, .65) !important;
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
}
ion-apple-clips .content .info {
display: flex;
align-items: center;
height: 100px;
justify-content: space-between;
}
ion-apple-clips .content h1 {
margin-top: 0px;
font-size: 20px;
margin-bottom: 0px;
text-align: left;
}
ion-apple-clips .content p {
font-size: 13px;
margin: 0;
margin-top: 5px;
line-height: 18px;
}
ion-apple-clips .content .left-side {
text-align: left;
margin-left: 20px;
}
ion-apple-clips .content .right-side {
margin-right: 20px;
}
ion-apple-clips .description {
height: 70px;
border-top: 1px solid #bdbdbd;
margin-left: 20px;
margin-right: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
ion-apple-clips .description .powered {
display: flex;
align-items: center;
}
ion-apple-clips .description .title {
text-align: left;
}
.description .powered .icon {
margin-right: 10px;
}
.description .powered .icon img {
width: 28px;
border-radius: 8px;
display: block;
}
.description .powered .by {
font-size: 12px;
color: #6b6b6b;
}
.description .powered .name {
position: relative;
font-size: 13px;
}
.description .powered .name .age {
position: absolute;
right: -23px;
bottom: 0px;
font-size: 8px;
color: #6b6b6b;
border: 1px solid #6b6b6b;
border-radius: 3px;
padding: 1px 2px;
}
ion-apple-clips .description .store {
font-size: 12px;
display: flex;
color: #6b6b6b;
align-items: center;
justify-content: space-between;
width: 70px;
}
ion-apple-clips ion-button {
width: 90px;
font-size: 16px;
--border-radius: 40px;
}