435 lines
16 KiB
Plaintext
435 lines
16 KiB
Plaintext
@using Church.Net.Entity
|
||
@model System.Collections.Generic.IList<Church.Net.Entity.NewVisitor>
|
||
@{
|
||
Layout = null;
|
||
}
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>新生命靈糧堂，歡迎你</title>
|
||
<link rel="shortcut icon" href="/favicon.ico">
|
||
<style class="cp-pen-styles">
|
||
*, *:before, *:after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
body {
|
||
background: #15181A;
|
||
font-family: "Open Sans", Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
.skw-pages {
|
||
overflow: hidden;
|
||
position: relative;
|
||
height: 100vh;
|
||
}
|
||
|
||
.skw-page {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.skw-page__half {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 50%;
|
||
height: 100vh;
|
||
-webkit-transition: -webkit-transform 1s;
|
||
transition: transform 1s;
|
||
}
|
||
|
||
.skw-page__half--left {
|
||
left: 0;
|
||
-webkit-transform: translate3d(-32.4vh, 100%, 0);
|
||
transform: translate3d(-32.4vh, 100%, 0);
|
||
}
|
||
|
||
.skw-page__half--right {
|
||
left: 50%;
|
||
-webkit-transform: translate3d(32.4vh, -100%, 0);
|
||
transform: translate3d(32.4vh, -100%, 0);
|
||
}
|
||
|
||
.skw-page.active .skw-page__half {
|
||
-webkit-transform: translate3d(0, 0, 0);
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
|
||
.skw-page__skewed {
|
||
overflow: hidden;
|
||
position: absolute;
|
||
top: 0;
|
||
width: 140%;
|
||
height: 100%;
|
||
-webkit-transform: skewX(-18deg);
|
||
-ms-transform: skewX(-18deg);
|
||
transform: skewX(-18deg);
|
||
background: #000;
|
||
}
|
||
|
||
.skw-page__half--left .skw-page__skewed {
|
||
left: -40%;
|
||
}
|
||
|
||
.skw-page__half--right .skw-page__skewed {
|
||
right: -40%;
|
||
}
|
||
|
||
.skw-page__content {
|
||
display: -webkit-box;
|
||
display: -webkit-flex;
|
||
display: -ms-flexbox;
|
||
display: flex;
|
||
-webkit-box-align: center;
|
||
-webkit-align-items: center;
|
||
-ms-flex-align: center;
|
||
align-items: center;
|
||
-webkit-box-pack: center;
|
||
-webkit-justify-content: center;
|
||
-ms-flex-pack: center;
|
||
justify-content: center;
|
||
-webkit-flex-flow: column wrap;
|
||
-ms-flex-flow: column wrap;
|
||
flex-flow: column wrap;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 0 30%;
|
||
color: #fff;
|
||
-webkit-transform: skewX(18deg);
|
||
-ms-transform: skewX(18deg);
|
||
transform: skewX(18deg);
|
||
-webkit-transition: -webkit-transform 1s, opacity 1s;
|
||
transition: transform 1s, opacity 1s;
|
||
background-size: cover;
|
||
}
|
||
|
||
.skw-page__half--left .skw-page__content {
|
||
padding-left: 30%;
|
||
padding-right: 30%;
|
||
-webkit-transform-origin: 100% 0;
|
||
-ms-transform-origin: 100% 0;
|
||
transform-origin: 100% 0;
|
||
}
|
||
|
||
.skw-page__half--right .skw-page__content {
|
||
padding-left: 30%;
|
||
padding-right: 30%;
|
||
-webkit-transform-origin: 0 100%;
|
||
-ms-transform-origin: 0 100%;
|
||
transform-origin: 0 100%;
|
||
}
|
||
|
||
.skw-page.inactive .skw-page__content {
|
||
opacity: 0.5;
|
||
-webkit-transform: skewX(18deg) scale(0.95);
|
||
-ms-transform: skewX(18deg) scale(0.95);
|
||
transform: skewX(18deg) scale(0.95);
|
||
}
|
||
|
||
.skw-page__heading {
|
||
margin-bottom: 15px;
|
||
text-transform: uppercase;
|
||
font-size: 25px;
|
||
text-align: center;
|
||
}
|
||
|
||
.skw-page__description {
|
||
font-size: 18px;
|
||
text-align: center;
|
||
}
|
||
|
||
.skw-page__link {
|
||
color: #FFA0A0;
|
||
}
|
||
|
||
.visitorName {
|
||
white-space: nowrap;
|
||
font-size: 70px;
|
||
}
|
||
|
||
.welcomeText {
|
||
white-space: nowrap;
|
||
font-size: 50px;
|
||
}
|
||
/*.skw-page-1 .skw-page__half--left .skw-page__content {
|
||
background-image: url("https://unsplash.it/1200/800?image=823");
|
||
}
|
||
|
||
.skw-page-1 .skw-page__half--right .skw-page__content {
|
||
background: #E74C3C;
|
||
}
|
||
|
||
.skw-page-2 .skw-page__half--left .skw-page__content {
|
||
background: #E74C3C;
|
||
}
|
||
|
||
.skw-page-2 .skw-page__half--right .skw-page__content {
|
||
background-image: url("https://unsplash.it/1200/800?image=723");
|
||
}
|
||
|
||
.skw-page-3 .skw-page__half--left .skw-page__content {
|
||
background-image: url("https://unsplash.it/1200/800?image=623");
|
||
}
|
||
|
||
.skw-page-3 .skw-page__half--right .skw-page__content {
|
||
background: #E74C3C;
|
||
}
|
||
|
||
.skw-page-4 .skw-page__half--left .skw-page__content {
|
||
background: #E74C3C;
|
||
}
|
||
|
||
.skw-page-4 .skw-page__half--right .skw-page__content {
|
||
background-image: url("https://unsplash.it/1200/800?image=523");
|
||
}
|
||
|
||
.skw-page-5 .skw-page__half--left .skw-page__content {
|
||
background-image: url("https://unsplash.it/1200/800?image=423");
|
||
}
|
||
|
||
.skw-page-5 .skw-page__half--right .skw-page__content {
|
||
background: #E74C3C;
|
||
}*/
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="skw-pages">
|
||
|
||
<div class="skw-page skw-page-1 active">
|
||
<div class="skw-page__half skw-page__half--left">
|
||
|
||
<div class="skw-page__skewed" style="background: #E74C3C">
|
||
<div class="skw-page__content">
|
||
<h2 class="skw-page__heading visitorName">讓我們歡迎</h2>
|
||
<p class="skw-page__description">Welcome</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skw-page__half skw-page__half--right">
|
||
|
||
<div class="skw-page__skewed" style="background: #ffffff">
|
||
<div class="skw-page__content" style='color: #E74C3C;'>
|
||
<h2 class="skw-page__heading visitorName">新來到的朋友</h2>
|
||
<p class="skw-page__description">Our New Friends</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@foreach (var visitor in Model)
|
||
{
|
||
|
||
<div class="skw-page skw-page-@Html.Raw(Model.IndexOf(visitor) + 2)">
|
||
@if ((Model.IndexOf(visitor) % 2) == 0)
|
||
{
|
||
|
||
|
||
|
||
<div class="skw-page__half skw-page__half--left">
|
||
<div class="skw-page__skewed">
|
||
<div class="skw-page__content" style="background: url(/NewVisitorsPics/@(visitor.Id).jpg) center center; background-size: cover;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="skw-page__half skw-page__half--right">
|
||
<div class="skw-page__skewed">
|
||
<div class="skw-page__content" style="background: #E74C3C">
|
||
<h2 class="skw-page__heading welcomeText">歡迎 </h2>
|
||
<h2 class="skw-page__heading visitorName"> @visitor.LastName @visitor.FirstName</h2>
|
||
<h2 class="skw-page__heading welcomeText"> @(visitor.Gender == Enumeration.Gender.Male ? "弟兄" : "姊妹")</h2>
|
||
<p class="skw-page__description">@visitor.Note</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
else
|
||
{
|
||
<div class="skw-page__half skw-page__half--left">
|
||
<div class="skw-page__skewed" style="background: #E74C3C">
|
||
<div class="skw-page__content">
|
||
<h2 class="skw-page__heading welcomeText">歡迎 </h2>
|
||
<h2 class="skw-page__heading visitorName"> @visitor.LastName @visitor.FirstName</h2>
|
||
<h2 class="skw-page__heading welcomeText"> @(visitor.Gender == Enumeration.Gender.Male ? "弟兄" : "姊妹")</h2>
|
||
<p class="skw-page__description">@visitor.Note</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skw-page__half skw-page__half--right">
|
||
<div class="skw-page__skewed">
|
||
<div class="skw-page__content" style="background: url(/NewVisitorsPics/@(visitor.Id).jpg) center center; background-size: cover;"></div>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
</div>
|
||
}
|
||
|
||
|
||
|
||
<div class="skw-page skw-page-@Html.Raw(Model.Count+ 2)">
|
||
@if ((Model.Count % 2) == 0)
|
||
{
|
||
|
||
<div class="skw-page__half skw-page__half--left">
|
||
<div class="skw-page__skewed">
|
||
<div class="skw-page__content" style="background: url(/Images/SeekNewVisitor.jpg) center center; background-size: cover;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="skw-page__half skw-page__half--right">
|
||
<div class="skw-page__skewed">
|
||
<div class="skw-page__content" style="background: #E74C3C">
|
||
<h2 class="skw-page__heading welcomeText">歡迎 </h2>
|
||
<h2 class="skw-page__heading visitorName"> 其他新朋友</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
else
|
||
{
|
||
<div class="skw-page__half skw-page__half--left">
|
||
<div class="skw-page__skewed" style="background: #E74C3C">
|
||
<div class="skw-page__content">
|
||
<h2 class="skw-page__heading welcomeText">歡迎 </h2>
|
||
<h2 class="skw-page__heading visitorName">其他新朋友</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skw-page__half skw-page__half--right">
|
||
<div class="skw-page__skewed">
|
||
<div class="skw-page__content" style="background: url(/Images/SeekNewVisitor.jpg) center center; background-size: cover;"></div>
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
<div class="skw-page skw-page-@Html.Raw(Model.Count+ 3)">
|
||
<div class="skw-page__half skw-page__half--left">
|
||
<div class="skw-page__skewed" style="background: @Html.Raw((Model.Count+1) %2 ==0 ? "#ffffff" : "#E74C3C") ">
|
||
<div class="skw-page__content" @Html.Raw((Model.Count + 1) % 2 ==0 ? "style='color: #E74C3C;'" : "")>
|
||
<h2 class="skw-page__heading visitorName">一次歡迎</h2>
|
||
<p class="skw-page__description">Once Welcome</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skw-page__half skw-page__half--right">
|
||
|
||
<div class="skw-page__skewed" style="background: @Html.Raw((Model.Count+1)%2 !=0 ? "#ffffff" : "#E74C3C")">
|
||
<div class="skw-page__content" @Html.Raw((Model.Count + 1) % 2 !=0 ? "style='color: #E74C3C;'" : "")>
|
||
<h2 class="skw-page__heading visitorName">永遠歡迎</h2>
|
||
<p class="skw-page__description">Always Welcome</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@*<div class="skw-page skw-page-1 active">
|
||
<div class="skw-page__half skw-page__half--left">
|
||
<div class="skw-page__skewed">
|
||
<div class="skw-page__content"></div>
|
||
</div>
|
||
</div>
|
||
<div class="skw-page__half skw-page__half--right">
|
||
<div class="skw-page__skewed">
|
||
<div class="skw-page__content">
|
||
<h2 class="skw-page__heading">Skewed One Page Scroll</h2>
|
||
<p class="skw-page__description">Demo Page</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skw-page skw-page-2">
|
||
<div class="skw-page__half skw-page__half--left">
|
||
<div class="skw-page__skewed">
|
||
<div class="skw-page__content">
|
||
<h2 class="skw-page__heading">Page 2</h2>
|
||
<p class="skw-page__description">Lorem ipsum dolor sit amet</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="skw-page__half skw-page__half--right">
|
||
<div class="skw-page__skewed">
|
||
<div class="skw-page__content"></div>
|
||
</div>
|
||
</div>
|
||
</div>*@
|
||
</div>
|
||
|
||
@Scripts.Render("~/bundles/jquery")
|
||
|
||
<script>
|
||
$(document).ready(function () {
|
||
|
||
var curPage = 1;
|
||
var numOfPages = $(".skw-page").length;
|
||
var animTime = 1000;
|
||
var scrolling = false;
|
||
var pgPrefix = ".skw-page-";
|
||
|
||
function pagination() {
|
||
scrolling = true;
|
||
|
||
$(pgPrefix + curPage).removeClass("inactive").addClass("active");
|
||
$(pgPrefix + (curPage - 1)).addClass("inactive");
|
||
$(pgPrefix + (curPage + 1)).removeClass("active");
|
||
|
||
setTimeout(function () {
|
||
scrolling = false;
|
||
}, animTime);
|
||
};
|
||
|
||
function navigateUp() {
|
||
if (curPage === 1) return;
|
||
curPage--;
|
||
pagination();
|
||
};
|
||
|
||
function navigateDown() {
|
||
if (curPage === numOfPages) return;
|
||
curPage++;
|
||
pagination();
|
||
};
|
||
|
||
$(document).on("mousewheel DOMMouseScroll", function (e) {
|
||
if (scrolling) return;
|
||
if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
|
||
navigateUp();
|
||
} else {
|
||
navigateDown();
|
||
}
|
||
});
|
||
|
||
$(document).on("keydown", function (e) {
|
||
if (scrolling) return;
|
||
if (e.which === 38) {
|
||
navigateUp();
|
||
} else if (e.which === 40) {
|
||
navigateDown();
|
||
}
|
||
});
|
||
|
||
});
|
||
</script>
|
||
<script type="text/javascript">
|
||
|
||
var _gaq = _gaq || [];
|
||
_gaq.push(['_setAccount', 'UA-36251023-1']);
|
||
_gaq.push(['_setDomainName', 'jqueryscript.net']);
|
||
_gaq.push(['_trackPageview']);
|
||
|
||
(function () {
|
||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||
})();
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |