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 @@ ...@@ -31,11 +31,39 @@
} }
.swiper-container{ .swiper-container{
width: 10rem; width: 10rem;
height: 18.986rem; height: 16.986rem;
} }
.swiper-container .swiper-slide,.swiper-container .swiper-slide img{ .swiperImg{
width: 100%; background: url(https://footseen.com/img/img1.jpg) no-repeat;
height: 100%; 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{ .anBg,.anBg2{
background: url(https://footseen.com/img/anbg.png) no-repeat; background: url(https://footseen.com/img/anbg.png) no-repeat;
...@@ -43,7 +71,7 @@ ...@@ -43,7 +71,7 @@
width: 9.146rem; width: 9.146rem;
height: 7.573rem; height: 7.573rem;
position: relative; position: relative;
margin: -3.5rem auto 0; margin: -4.5rem auto 0;
z-index: 100; z-index: 100;
} }
.anBg2{ .anBg2{
...@@ -146,6 +174,46 @@ ...@@ -146,6 +174,46 @@
.mBottom{ .mBottom{
display: none; 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> </style>
</head> </head>
<body> <body>
...@@ -160,34 +228,34 @@ ...@@ -160,34 +228,34 @@
<div class="swiper-container swiper-container1 L_Ar"> <div class="swiper-container swiper-container1 L_Ar">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<img src="https://footseen.com/img/img1.jpg"/> <div class="swiperImg swiperImg1"></div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="https://footseen.com/img/img2.jpg"/> <div class="swiperImg swiperImg2"></div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="https://footseen.com/img/img3.jpg"/> <div class="swiperImg swiperImg3"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="swiper-container swiper-container2 L_En"> <div class="swiper-container swiper-container2 L_En">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<img src="https://footseen.com/img/img1_en.jpg"/> <div class="swiperImg swiperImg4"></div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="https://footseen.com/img/img2_en.jpg"/> <div class="swiperImg swiperImg5"></div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="https://footseen.com/img/img3_en.jpg"/> <div class="swiperImg swiperImg6"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="anBg L_Ar"> <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>
<div class="anBg anBg2 L_En"> <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>
<div class="mBottom"> <div class="mBottom">
<p>www.footseen.com</p> <p>www.footseen.com</p>
...@@ -224,7 +292,7 @@ $('.mBottom').show(); ...@@ -224,7 +292,7 @@ $('.mBottom').show();
} }
$('.topUp').on('click',function(){ $('.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> </script>
</html> </html>
ios.html
...@@ -31,19 +31,48 @@ ...@@ -31,19 +31,48 @@
} }
.swiper-container{ .swiper-container{
width: 10rem; width: 10rem;
height: 18.986rem; height: 16.986rem;
} }
.swiper-container .swiper-slide,.swiper-container .swiper-slide img{ .swiperImg{
width: 100%; background: url(img/img1.jpg) no-repeat;
height: 100%; 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{ .iosBg,.iosBg2{
background: url(img/iosbg.png) no-repeat; background: url(img/iosbg.png) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
width: 9.146rem; width: 9.146rem;
height: 24.413rem; height: 24.413rem;
position: relative; position: relative;
margin: -3.5rem auto 0; margin: -4rem auto 0;
z-index: 50; z-index: 50;
} }
.iosBg2{ .iosBg2{
...@@ -137,6 +166,46 @@ ...@@ -137,6 +166,46 @@
.mBottom{ .mBottom{
display: none; 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> </style>
</head> </head>
<body> <body>
...@@ -151,35 +220,35 @@ ...@@ -151,35 +220,35 @@
<div class="swiper-container swiper-container1 L_Ar"> <div class="swiper-container swiper-container1 L_Ar">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<img src="img/img1.jpg"/> <div class="swiperImg swiperImg1"></div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="img/img2.jpg"/> <div class="swiperImg swiperImg2"></div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="img/img3.jpg"/> <div class="swiperImg swiperImg3"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="swiper-container swiper-container2 L_En"> <div class="swiper-container swiper-container2 L_En">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide"> <div class="swiper-slide">
<img src="img/img1_en.jpg"/> <div class="swiperImg swiperImg4"></div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="img/img2_en.jpg"/> <div class="swiperImg swiperImg5"></div>
</div> </div>
<div class="swiper-slide"> <div class="swiper-slide">
<img src="img/img3_en.jpg"/> <div class="swiperImg swiperImg6"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="iosBg iosBg1 L_Ar"> <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> <span class="iosText">ثقةPeach</span>
</div> </div>
<div class="iosBg iosBg2 L_En"> <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> <span class="iosText">Trust Peach</span>
</div> </div>
<div class="mBottom"> <div class="mBottom">
...@@ -211,7 +280,7 @@ ...@@ -211,7 +280,7 @@
} }
}, data); }, data);
$('.topUp').on('click',function(){ $('.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> </script>
</html> </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