Skip to content

libai / footsen

Go to a project
Commit 4228dad3 by dabai
Options

footseen

parent 90b4837e
Inline Side-by-side
Showing with 166 additions and 28 deletions
img/btn.png
img/btn.png

5.44 KB | W: | H:

img/btn.png

4.84 KB | W: | H:

img/btn.png
img/btn.png
img/btn.png
img/btn.png
  • 2-up
  • Swipe
  • Onion skin
img/btn_en.png
img/btn_en.png

5.67 KB | W: | H:

img/btn_en.png

5.1 KB | W: | H:

img/btn_en.png
img/btn_en.png
img/btn_en.png
img/btn_en.png
  • 2-up
  • Swipe
  • Onion skin
index.html
......@@ -31,11 +31,39 @@
}
.swiper-container{
width: 10rem;
height: 18.986rem;
height: 16.986rem;
}
.swiper-container .swiper-slide,.swiper-container .swiper-slide img{
width: 100%;
height: 100%;
.swiperImg{
background: url(https://footseen.com/img/img1.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
width: 10rem;
height: 16.986rem;
}
.swiperImg2{
background: url(https://footseen.com/img/img2.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
}
.swiperImg3{
background: url(https://footseen.com/img/img3.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
}
.swiperImg4{
background: url(https://footseen.com/img/img1_en.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
}
.swiperImg5{
background: url(https://footseen.com/img/img2_en.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
}
.swiperImg6{
background: url(https://footseen.com/img/img3_en.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
}
.anBg,.anBg2{
background: url(https://footseen.com/img/anbg.png) no-repeat;
......@@ -43,7 +71,7 @@
width: 9.146rem;
height: 7.573rem;
position: relative;
margin: -3.5rem auto 0;
margin: -4.5rem auto 0;
z-index: 100;
}
.anBg2{
......@@ -146,6 +174,46 @@
.mBottom{
display: none;
}
.heartbeat {
animation-name: heartbeat;
-webkit-animation-name: heartbeat;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
visibility: visible!important;
}
@keyframes heartbeat {
0% {
transform: scale(1)
}
10% {
transform: scale(1.05)
}
20% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
@-webkit-keyframes heartbeat {
0% {
transform: scale(1)
}
10% {
transform: scale(1.05)
}
20% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
</style>
</head>
<body>
......@@ -160,34 +228,34 @@
<div class="swiper-container swiper-container1 L_Ar">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://footseen.com/img/img1.jpg"/>
<div class="swiperImg swiperImg1"></div>
</div>
<div class="swiper-slide">
<img src="https://footseen.com/img/img2.jpg"/>
<div class="swiperImg swiperImg2"></div>
</div>
<div class="swiper-slide">
<img src="https://footseen.com/img/img3.jpg"/>
<div class="swiperImg swiperImg3"></div>
</div>
</div>
</div>
<div class="swiper-container swiper-container2 L_En">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://footseen.com/img/img1_en.jpg"/>
<div class="swiperImg swiperImg4"></div>
</div>
<div class="swiper-slide">
<img src="https://footseen.com/img/img2_en.jpg"/>
<div class="swiperImg swiperImg5"></div>
</div>
<div class="swiper-slide">
<img src="https://footseen.com/img/img3_en.jpg"/>
<div class="swiperImg swiperImg6"></div>
</div>
</div>
</div>
<div class="anBg L_Ar">
<img class="anBtn anBtn1" src="https://footseen.com/img/btn.png" />
<img class="anBtn anBtn1 heartbeat" src="https://footseen.com/img/btn.png" />
</div>
<div class="anBg anBg2 L_En">
<img class="anBtn anBtn2" src="https://footseen.com/img/btn_en.png" />
<img class="anBtn anBtn2 heartbeat" src="https://footseen.com/img/btn_en.png" />
</div>
<div class="mBottom">
<p>www.footseen.com</p>
......@@ -224,7 +292,7 @@ $('.mBottom').show();
}
$('.topUp').on('click',function(){
window.location.href = 'http://www.yabolive.tv/footseen/phonepay/applepay.html?lang='+sessionStorage.lang;
window.location.href = 'http://www.yabolive.tv/footseen/phonepay/applepay.html?lang='+sessionStorage.lang+'&gofrom=web';
})
</script>
</html>
ios.html
......@@ -31,19 +31,48 @@
}
.swiper-container{
width: 10rem;
height: 18.986rem;
height: 16.986rem;
}
.swiper-container .swiper-slide,.swiper-container .swiper-slide img{
width: 100%;
height: 100%;
.swiperImg{
background: url(img/img1.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
width: 10rem;
height: 16.986rem;
}
.swiperImg2{
background: url(img/img2.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
}
.swiperImg3{
background: url(img/img3.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
}
.swiperImg4{
background: url(img/img1_en.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
}
.swiperImg5{
background: url(img/img2_en.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
}
.swiperImg6{
background: url(img/img3_en.jpg) no-repeat;
background-size: 10rem 18.986rem;
background-position: 0 -2rem;
}
.iosBg,.iosBg2{
background: url(img/iosbg.png) no-repeat;
background-size: 100% 100%;
width: 9.146rem;
height: 24.413rem;
position: relative;
margin: -3.5rem auto 0;
margin: -4rem auto 0;
z-index: 50;
}
.iosBg2{
......@@ -137,6 +166,46 @@
.mBottom{
display: none;
}
.heartbeat {
animation-name: heartbeat;
-webkit-animation-name: heartbeat;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
visibility: visible!important;
}
@keyframes heartbeat {
0% {
transform: scale(1)
}
10% {
transform: scale(1.05)
}
20% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
@-webkit-keyframes heartbeat {
0% {
transform: scale(1)
}
10% {
transform: scale(1.05)
}
20% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
</style>
</head>
<body>
......@@ -151,35 +220,35 @@
<div class="swiper-container swiper-container1 L_Ar">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/img1.jpg"/>
<div class="swiperImg swiperImg1"></div>
</div>
<div class="swiper-slide">
<img src="img/img2.jpg"/>
<div class="swiperImg swiperImg2"></div>
</div>
<div class="swiper-slide">
<img src="img/img3.jpg"/>
<div class="swiperImg swiperImg3"></div>
</div>
</div>
</div>
<div class="swiper-container swiper-container2 L_En">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="img/img1_en.jpg"/>
<div class="swiperImg swiperImg4"></div>
</div>
<div class="swiper-slide">
<img src="img/img2_en.jpg"/>
<div class="swiperImg swiperImg5"></div>
</div>
<div class="swiper-slide">
<img src="img/img3_en.jpg"/>
<div class="swiperImg swiperImg6"></div>
</div>
</div>
</div>
<div class="iosBg iosBg1 L_Ar">
<img class="iosBtn iosBtn1" src="img/btn.png" />
<img class="iosBtn iosBtn1 heartbeat" src="img/btn.png" />
<span class="iosText">ثقةPeach</span>
</div>
<div class="iosBg iosBg2 L_En">
<img class="iosBtn iosBtn2" src="img/btn_en.png" />
<img class="iosBtn iosBtn2 heartbeat" src="img/btn_en.png" />
<span class="iosText">Trust Peach</span>
</div>
<div class="mBottom">
......@@ -211,7 +280,7 @@
}
}, data);
$('.topUp').on('click',function(){
window.location.href = 'http://www.yabolive.tv/footseen/phonepay/applepay.html?lang='+sessionStorage.lang;
window.location.href = 'http://www.yabolive.tv/footseen/phonepay/applepay.html?lang='+sessionStorage.lang+'&gofrom=web';
})
</script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment