From 898a50b46a9d0eb6430e9370b262a20dde5e86ee Mon Sep 17 00:00:00 2001 From: Generoso Martello Date: Thu, 20 Sep 2018 09:43:46 +0200 Subject: [PATCH] fix a few typos --- docs/app.bundle.js | 2 +- source/pages/about.html | 2 +- source/pages/home.html | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/app.bundle.js b/docs/app.bundle.js index aabfa9f..8388cae 100644 --- a/docs/app.bundle.js +++ b/docs/app.bundle.js @@ -1 +1 @@ -zuix.bundle([{componentId:"_res/style/style-1784725062",view:null,css:"/* CSS files add styling rules to your content */\n\nbody {\n font-family: \"Trebuchet MS\", Helvetica, sans-serif;\n font-size: 16px;\n margin: 0; padding: 0;\n background: #1a1a1a;\n -webkit-user-select:none;\n -moz-user-select:none;\n -ms-user-select:none;\n user-select:none;\n --overscroll-behavior-y: contain;\n}\n\nbutton:hover, a:hover {\n cursor: pointer;\n opacity: 0.8;\n}\n\na {\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -o-user-select: none;\n user-select: none;\n}\n\na, a:visited, a:hover {\n color: darkorange;\n text-decoration: none;\n}\n\n.noscroll {\n overflow: hidden;\n}\n",controller:null,using:"./index.css"},{componentId:"_res/script/script-605580544",view:null,css:null,controller:"if ('serviceWorker' in navigator) {\n const p = navigator.serviceWorker\n .register('./sw.js')\n .then(reg => console.log('PWA service-worker ready.', reg))\n .catch(err => console.error('Could not load service-worker.', err));\n}\n",using:"./service-worker.js"},{componentId:"https://zuixjs.github.io/zkit/lib/controllers/scroll_helper",controller:function(t){function o(){null!=v&&clearTimeout(v);const z=new Date().getTime();if(100z-w)){w=z;const _=t.view().get(),k="scroll-helper-visible";null!=h&&null!=f&&h.each(function(T,I){const S=this.position();let D=!1,j=0;if(null===I.offsetParent)return!1;null==j&&(j=0);const W={left:0,top:0,right:m.viewport.width,bottom:m.viewport.height,width:m.viewport.width,height:m.viewport.height};let C=I.getBoundingClientRect(),M=I.offsetParent;for(;null!==M&&M!==_;){const L=M.getBoundingClientRect();C={left:C.left+L.left,top:C.top+L.top,right:C.right+L.left,bottom:C.bottom+L.top,width:C.width,height:C.height},M=M.offsetParent}if(D=!(C.left>W.right-j||C.rightW.bottom-j||C.bottom=_||0==S)return u(z),void o();const D=I+33*(S/_);requestAnimationFrame(function(){u(D),c(z)})}function u(z){const _=t.view().get();_===document.body?(document.documentElement.scrollTop=z,document.body.scrollTop=z):_.scrollTop=z}function p(z,_){let k,T;return function(){const I=this,S=arguments;T?(clearTimeout(k),k=setTimeout(function(){Date.now()-T>=_&&(z.apply(I,S),T=Date.now())},_-(Date.now()-T))):(z.apply(I,S),T=Date.now())}}const m={timestamp:0,size:{width:0,height:0},viewport:{x:0,y:0,width:0,height:0}};let v,h,f,g=0;t.init=function(){t.options().html=!1,t.options().css=!1},t.create=function(){t.view().get()===document.body?0*{max-width:auto}[layout*=column][self*=top]{height:auto!important}[self~=size-]>*{height:auto}}[layout*=column]:not([layout*=row]) [self*=left],[layout*=row]:not([layout*=column]) [self*=top]{-ms-flex-item-align:start;align-self:flex-start}[self~=center]{-ms-flex-item-align:center;align-self:center}[layout*=column]:not([layout*=row]) [self*=right],[layout*=row]:not([layout*=column]) [self*=bottom]{-ms-flex-item-align:end;align-self:flex-end}[self*=stretch]{-ms-flex-item-align:stretch;align-self:stretch}[layout][self*=center]{margin-left:auto;margin-right:auto}[layout][self*=right]{margin-right:0}[layout][self*=left]{margin-left:0}[layout*=column] [self*=bottom]{margin-top:auto}[layout*=column] [self*=top]{margin-bottom:auto}[layout*=row] [self*=left]{margin-right:auto}[layout*=row] [self*=right]{margin-left:auto}[self~=size-1of5]{width:20%}[self~=size-1of4]{width:25%}[self~=size-1of3]{width:33.33333%}[self~=size-2of5]{width:40%}[self~=size-1of2]{width:50%}[self~=size-3of5]{width:60%}[self~=size-2of3]{width:66.6666%}[self~=size-3of4]{width:75%}[self~=size-4of5]{width:80%}[self~=size-1of1]{width:100%}[layout*=column][layout*=stretch-]>:not([self*=size-]),[layout*=row][layout*=-stretch]>:not([self*=size-]),[self~=size-x1]{-ms-flex:1 0 0%!important;flex:1 0 0%!important}[self~=size-x2]{-ms-flex:2 0 0%!important;flex:2 0 0%!important}[self~=size-x3]{-ms-flex:3 0 0%!important;flex:3 0 0%!important}[self~=size-x4]{-ms-flex:4 0 0%!important;flex:4 0 0%!important}[self~=size-x5]{-ms-flex:5 0 0%!important;flex:5 0 0%!important}[self~=size-x6]{-ms-flex:6 0 0%!important;flex:6 0 0%!important}[self~=size-x7]{-ms-flex:7 0 0%!important;flex:7 0 0%!important}[self~=size-x8]{-ms-flex:8 0 0%!important;flex:8 0 0%!important}[self~=size-x9]{-ms-flex:9 0 0%!important;flex:9 0 0%!important}[self*=size-auto]{-ms-flex:1 1 auto;flex:1 1 auto}[self*=size-x0]{-ms-flex:0 0 auto;flex:0 0 auto}[self~=size-xxlarge]{max-width:1440px;width:100%}[self~=size-xlarge]{max-width:1200px;width:100%}[self~=size-large]{max-width:960px;width:100%}[self~=size-larger]{max-width:840px;width:100%}[self~=size-medium]{max-width:720px;width:100%}[self~=size-smaller]{max-width:600px;width:100%}[self~=size-small]{max-width:480px;width:100%}[self~=size-xsmall]{max-width:360px;width:100%}[self~=size-xxsmall]{max-width:240px;width:100%}[self*=size-x]:not([self*=small]):not([self*=large]){-ms-flex-negative:1;flex-shrink:1}[self~=first]{-ms-flex-order:-1;order:-1}[self~=order-1]{-ms-flex-order:1;order:1}[self~=order-2]{-ms-flex-order:2;order:2}[self~=order-3]{-ms-flex-order:3;order:3}[self~=last]{-ms-flex-order:999;order:999}[layout*=column]:not([layout*=row])>*{-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto}@media screen and (max-width:64em){[layout*=lg-row]{-ms-flex-direction:row;flex-direction:row}[layout*=lg-column]{-ms-flex-direction:column;flex-direction:column}[layout*=lg-columns],[layout*=lg-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:52em){[layout*=md-row]{-ms-flex-direction:row;flex-direction:row}[layout*=md-column]{-ms-flex-direction:column;flex-direction:column}[layout*=md-columns],[layout*=md-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:40em){[layout*=sm-row]{-ms-flex-direction:row;flex-direction:row}[layout*=sm-column]{-ms-flex-direction:column;flex-direction:column}[layout*=sm-columns],[layout*=sm-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:64em){[self*=lg-full]{-ms-flex:1 1 100%!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=lg-half]{-ms-flex:1 1 50%!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=lg-first]{-ms-flex-order:-1;order:-1}[self~=lg-last]{-ms-flex-order:999;order:999}[self~=lg-hide]{display:none}[self~=lg-show]{display:inherit}}@media screen and (max-width:52em){[self*=md-full]{-ms-flex:1 1 100%!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=md-half]{-ms-flex:1 1 50%!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=md-first]{-ms-flex-order:-1;order:-1}[self~=md-last]{-ms-flex-order:999;order:999}[self~=md-hide]{display:none}[self~=md-show]{display:inherit}}@media screen and (max-width:40em){[self*=sm-full]{-ms-flex:1 1 100%!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=sm-half]{-ms-flex:1 1 50%!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=sm-first]{-ms-flex-order:-1;order:-1}[self~=sm-last]{-ms-flex-order:999;order:999}[self~=sm-hide]{display:none}[self~=sm-show]{display:inherit}}",controller:null,using:"//zuixjs.github.io/zkit/css/flex-layout-attribute.min.css"},{componentId:"layout/header",view:"
\n
WebFlix
\n
\n",css:". {\n position: fixed;\n top:0;\n left:0;\n right:0;\n height:auto;\n z-index: 100;\n}\n\n.header {\n height: 56px;\n max-height: 56px;\n}\n\n.logo {\n padding-left: 12px;\n padding-right: 12px;\n font-size: 220%;\n font-weight: 500;\n color: #dd3532;\n text-shadow:\n 1px 1px 0 #600,\n -1px -1px 0 #600,\n 1px -1px 0 #600,\n -1px 1px 0 #600,\n 1px 1px 0 #600;\n}\n",controller:function(){}},{componentId:"layout/footer",view:"\n\n\n\n",css:". {\n position: fixed;\n left:0; bottom:0; right: 0;\n height: 56px;\n background: #121212;\n color: white;\n border-top: solid 1px #711615;\n text-align: center;\n z-index: 100;\n overflow: hidden;\n}\n\nbutton {\n padding: 12px;\n max-height: 56px;\n margin-left: 8px;\n margin-right: 8px;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: rgba(0,0,0,0.5);\n -webkit-transition: all .3s; /* Safari */\n transition: all .3s;\n}\nbutton:hover {\n background: rgba(255,255,255,0.25);\n}\nbutton:focus {outline:0;}\nbutton i {\n color: #7c7c7c;\n font-size: 32px !important;\n}\nbutton:hover i, .active i {\n color: white;\n}\n.active {\n transform: scale(1.2);\n text-shadow:\n 1px 1px 0 #000,\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n}\n",controller:function(){}},{componentId:"pages/home",view:"
\n\n
\n
\n Bestseller\n •\n United States\n •\n Sci-fi\n •\n Action\n
\n
\n \n \n \n
\n
\n\n\n
\n\n\n
\n\n\n
\n\n\n\n

\n If you like this template give it a star ⭐ on GitHub,\n this will make the programmer happy 😄 that will probably continue to improve it 🚀\n

\n

\n Feature requests, critics and comments are also welcome 🌈 in the repository issue tracker 📑\n

\n\n\n\n\n\n
\n",css:". {\n /* temporary hack to test page scroll */\n /* height: 500vh; */\n color: white;\n padding-bottom: 96px;\n overflow-x: hidden;\n}\n\nh1 {\n font-size: 120%;\n text-align: left;\n margin-top: 28px;\n margin-left: 8px;\n margin-bottom: 8px;\n}\n\n.content {\n position: absolute;\n top: 0; left: 0;\n padding-bottom: 56px;\n width: 100vw;\n height: 90vh;\n background-image: linear-gradient(to bottom, rgba(0,0,0, 0.15), transparent 20%, transparent 70%, rgba(0,0,0, 0.5) 80%);\n}\n\n.categories, .options {\n padding: 8px;\n}\n\nbutton {\n padding-left: 6px;\n padding-right: 16px;\n font-size: 120%;\n font-weight: 500;\n min-height: 38px;\n}\nbutton div i {\n margin-right: 6px;\n}\n\nbutton.flat-btn {\n border: 0;\n background: transparent;\n height: 56px;\n width: 56px;\n padding: 0;\n text-align: center;\n vertical-align: middle;\n}\nbutton.flat-btn i {\n color: white;\n font-size: 36px;\n line-height: 56px;\n}\n\n.gallery {\n width: 100%;\n height: 180px;\n}\n\n.movie {\n padding: 4px;\n}\n.movie span.item {\n display: inline-block;\n width: 120px;\n height: 180px;\n border: solid 1px rgba(255,255,255,.1);\n background-image: linear-gradient(rgba(0,0,0,0.15) 0, transparent 48px, transparent 40%, black 99%);\n}\n.movie span.item:hover {\n cursor: pointer;\n opacity: 0.8;\n}\n\n.about-box {\n margin-top: 56px;\n margin-bottom: 48px;\n font-size: 140%;\n font-family: \"Benton Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif;\n line-height: 160%;\n}\n.about-box p {\n padding: 12px;\n}\n\n@media only screen and (min-device-width : 720px) {\n .gallery {\n height: 231px;\n }\n .movie span.item {\n width: 154px;\n height: 231px;\n }\n}\n",controller:function(t){function o(m){return c=m,u&&u.pictures(c.poster_path,c.backdrop_path),t.context}function s(){c.trailer&&(window.location.href=c.trailer)}function r(m){if(null==m)return void zuix.field("header-bar").css("background-color","rgba(18,18,18,"+p+")");let v=1;return"hit-top"===m.event?v=0:-m.info.viewport.y\n
Search
search\n\n",css:". {\n color: white;\n padding: 24px;\n}\n\n.message {\n color: darkgrey;\n min-height: 100vh;\n width: 100vw;\n font-size: 200%;\n}\n\n.message i {\n margin-left: 16px;\n color: darkgrey;\n font-size: 150%;\n}\n",controller:function(){}},{componentId:"pages/notifications",view:"
\n
Notifications
notifications\n
\n",css:". {\n color: white;\n}\n\n.message {\n color: darkgrey;\n min-height: 100vh;\n width: 100vw;\n font-size: 200%;\n}\n.message i {\n margin-left: 16px;\n color: darkgrey;\n font-size: 150%;\n}\n",controller:function(){}},{componentId:"pages/about",view:"
\n\n

About

\n\n

\n This web application template is built with zUIx.js.\n
\n Source code and documentation available from WebFlix repository.\n

\n\n

Other resources

\n
    \n
  • \n zKit
    \n a collection of components for modern web.\n
    • \n
  • \n HTML-PWA
    \n a progressive web app template optimized for mobile devices.\n
    • \n
  • \n Web Book
    \n a progressive web app template of a web book.\n
    • \n
\n\n

Disclaimer

\n

This product uses the TMDb API but is not endorsed or certified by TMDb.

\n\n
\n",css:". {\n color: white;\n padding: 24px;\n margin-top: 64px;\n margin-bottom: 64px;\n}\n\nh1 {\n color: darkgrey;\n}\n",controller:function(){}},{componentId:"pages/home/main_cover",view:"
\n
\n
\n",css:".cover-wrapper {\n overflow: hidden;\n margin-left: auto;\n margin-right: auto;\n height: 90vh;\n background-image: linear-gradient(to bottom, rgba(0,0,0, 0.3), transparent 20%, transparent 80%, rgba(0,0,0, 0.3) 90%);\n}\n.cover {\n height: 90vh;\n background-size: cover;\n background-repeat: no-repeat;\n background-position-x: center;\n /*transition: transform 150ms ease;*/\n}\n",controller:function(t){function o(h,f){return m=h,v=f,c(),t.context}function s(h){const f=-h.viewport.y/6;return u.css("transform","translateY("+f+"px)"),t.context}function r(h){p=h.matches,c()}function c(){p?m&&u.css("background-image","url(\""+m+"\")"):v&&u.css("background-image","url(\""+v+"\")")}let u,p=!1,m,v;t.create=function(){u=t.view(".cover");const h=window.matchMedia("(orientation: portrait)");h.matches&&(p=!0),h.addListener(r),t.expose("pictures",o),t.expose("translate",s)},t.destroy=function(){window.matchMedia("(orientation: portrait)").removeListener(r)}}},{componentId:"pages/home/list_top_rated",view:"

Top rated on WebFlix

\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n",css:null,controller:function(){}},{componentId:"pages/home/list_tv_series",view:"

TV Series

\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n",css:null,controller:function(){}},{componentId:"pages/home/list_comedy",view:"

Comedy Movies

\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n",css:null,controller:function(){}},{componentId:"pages/home/title_details",view:"
\n \n

\n
\n\n
\n
\n
\n

Movie title

\n
\n
\n

\n

Vote 7.5

\n
\n
\n\n
\n
\n add\n
\n
\n thumb_up\n
\n
\n share\n
\n
\n",css:". {\n position: fixed;\n z-index: 200;\n top: 0; left: 100vh;\n transition: left .2s ease-in-out;\n touch-action: none;\n width: 100vw;\n min-height: 100vh;\n background: #101010;\n color: white;\n}\n\nheader {\n position: fixed;\n top: 0; left: 0; right: 0; height: 56px;\n z-index: 200;\n}\nheader button {\n position: absolute;\n top: 0; left: 0;\n z-index: 10;\n border: 0;\n background: transparent;\n width: 56px;\n height: 56px;\n padding: 0;\n text-align: center;\n vertical-align: middle;\n}\nheader button i {\n color: white;\n font-weight: 700;\n font-size: 160%;\n line-height: 48px;\n}\nheader h1 {\n position: absolute;\n top: 14px;\n left: 56px;\n margin: 0;\n font-size: 160%;\n}\n\nmain {\n position: absolute;\n top:0;left:0; bottom: 0;\n width: 100%;\n padding-bottom: 72px;\n overflow-y: auto;\n}\n\nfooter {\n position: fixed;\n bottom: 0; left: 0; right: 0; height: 56px;\n background: #0a0a0a;\n border-top: solid 1px rgba(255,0,0,0.5);\n}\n\n.cover {\n background: black no-repeat;\n background-size: cover;\n background-position-x: center;\n position: relative;\n width: 100vw;\n height: 50vh;\n}\n\n.cover .background {\n position: absolute;\n left: 0; right: 0; top: 0; bottom: 0;\n background-image: linear-gradient(to bottom, rgba(0,0,0, 0.35) 1%, transparent 20%, transparent 80%, rgba(0,0,0, 0.35) 90%);\n}\n.cover h1 {\n z-index: 10;\n margin: 0;\n padding: 16px;\n font-size: 180%;\n text-shadow:\n 1px 1px 0 #000,\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n}\n\n[data-ui-field=\"overview\"] {\n font-size: 120%;\n line-height: 160%;\n padding: 16px;\n margin-top: 8px;\n margin-bottom: 0;\n color: whitesmoke;\n}\n\nh2 {\n color: darkgrey;\n}\n[data-ui-field=\"vote\"] {\n color: white;\n}\n\n@media only screen and (min-device-width : 720px) {\n [data-ui-field=\"overview\"] {\n font-size: 140%;\n line-height: 180%;\n }\n .cover h1 {\n font-size: 220%;\n }\n}\n",controller:function(t){function o(m){window.location.href="#details",t.view().show(),p.scrollStart(),setTimeout(function(){t.view().css("left",0)},10);const v="url(\""+m.backdrop_path+"\")";t.field("cover").css("background-image",v),t.field("title").html(m.title||m.original_name),t.field("overview").html(m.overview),t.field("vote").html(m.vote_average),t.trigger("page:show")}function s(){t.view().css("left","100vw").one("transitionend",function(){t.view().hide()}),t.trigger("page:hide")}let r,c,u,p;t.create=function(){r=t.view("header"),c=t.view("main").find("h1"),u=r.find("h1"),r.find("button").on("click",s),zuix.load("@lib/controllers/scroll_helper",{view:t.view("main"),on:{"scroll:change":function(m,v){switch(v.event){case"hit-top":r.css("background-color","rgba(33,33,33,0)"),u.css("opacity",0),c.css("opacity",1),t.field("cover").css("background-position-y",0);break;case"scroll":const h=v.info.viewport;h.y>-h.height/2.5&&t.field("cover").css("background-position-y",-(h.y/5)+"px");}}},ready:function(){p=this,this.watch(".watchable",function(m,v){const h=v.frame.dy/0.3;0.3>v.frame.dy&&(-0.3v.frame.dy&&u.css("opacity",-h)})}}),t.view().hide(),t.expose("show",o),t.expose("hide",s)}}},{componentId:"https://zuixjs.github.io/zkit/lib/controllers/view_pager",controller:function(t){function o(){null!=V&&clearTimeout(V),V=setTimeout(s,250)}function s(ve){if(!ve&&(se||null!=ce))return void o();pe.each(function(){this.css({position:"absolute",left:0,top:0})});const he=_(t.view().get());if(0===he.width||0===he.height){if(0===he.height&&t.view().position().visible){let xe=0;pe.each(function(we,ye){let be=_(ye);be.height>xe&&(xe=be.height)}),he.heightbe&&(be=0),H(this,X),P(this,fe,be),fe+=ye.width}else{let be=(he.width-ye.width)/2;0>be&&(be=0),H(this,X),P(this,be,fe),fe+=ye.height}("true"===this.attr("data-ui-lazyload")||0=pe.length()&&(he=pe.length()-1,ve=!0),w(he,X),!ve}function c(){let ve=!1,he=parseInt(J)-1;return 0>he&&(he=0,ve=!0),w(he,X),!ve}function u(){w(0,X)}function p(){w(pe.length()-1,X)}function m(){w(parseInt(J)+U,X),v()}function v(){if(h(),!0===Q){const he=t.view().position().visible;he?(!le&&zuix.componentize(t.view()),N=setTimeout(m,$)):N=setTimeout(v,500),le=he}}function h(){null!=N&&clearTimeout(N)}function f(ve,he){let fe=0;return pe.each(function(ge,xe){let we=k(this);fe=ge;const ye=_(xe),be={x:we.position.x,y:we.position.y,w:ye.width,h:ye.height};if(Z===R&&(be.x>ve||be.x+be.w>ve)||Z===q&&(be.y>he||be.y+be.h>he))return!1}),fe}function g(ve,he){let fe=t.view().position(),ge=f(ve.x-fe.x,ve.y-fe.y);w(ge,null==he?X:he)}function w(ve,he){G=J,0>ve?(U=F,ve=0):ve>=pe.length()?(U=O,ve=pe.length()-1):ve!==J&&(U=Jhe.duration)&&(he.duration=0.2)),j(ye,0,he)}else{let ye=ve.y;0he.duration)&&(he.duration=0.2)),j(0,ye,he)}de=!0}function _(ve){const he=ve.getBoundingClientRect(),fe=he.width||ve.offsetWidth,ge=ve.offsetHeight||he.height;return{width:fe,height:ge}}function k(ve){const he=ve.get().data=ve.get().data||{};return he.position=he.position||{x:0,y:0},he}function T(){ne&&(I(),null!=ue&&clearTimeout(ue),null!=ce&&clearInterval(ce),ce=setInterval(function(){oe&&pe.each(function(ve,he){const fe=window.getComputedStyle(he,null),ge={width:parseFloat(fe.width.replace("px","")),height:parseFloat(fe.height.replace("px",""))},xe=parseFloat(fe.left.replace("px","")),we=parseFloat(fe.top.replace("px",""));0xe+ge.width||0>we+ge.height||xe>re.width||we>re.height?"hidden"!==he.visibility()&&he.visibility("hidden"):"visible"!==he.visibility()&&he.visibility("visible"))}),zuix.componentize(t.view())},10))}function I(){ne&&null==ue&&clearInterval(ce)}function S(){se=!0,de=!1,pe.each(function(ve,he){const fe=k(this),ge=D(),xe=window.getComputedStyle(he,null);fe.position.x=parseFloat(xe.left.replace("px","")),fe.position.y=parseFloat(xe.top.replace("px","")),this.css("left",fe.position.x+"px"),this.css("top",fe.position.y+"px"),fe.dragStart={x:ge.marginLeft+fe.position.x,y:ge.marginTop+fe.position.y}})}function D(){const ve={w:0,h:0,marginLeft:0,marginTop:0};return pe.each(function(he,fe){const ge=_(fe);ve.w+=ge.width,ve.h+=ge.height}),Z===R&&ve.w\n \n \n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n",css:null,controller:function(t){function o(j,W,C){let M=new Date().getTime();g={event:j,cancel:function(){g.event.cancelBubble=!0,z||g.event.preventDefault()},startX:W,startY:C,startTime:M,shiftX:0,shiftY:0,endTime:0,stepX:0,stepY:0,stepTime:M,velocity:0,x:W,y:C,scrollIntent:function(){return f===m?"horizontal":!(f!==v)&&"vertical"}},I=u(g),t.trigger("gesture:touch",g)}function s(j,W,C){if(null!=g){g.event=j,g.x=W,g.y=C,g.shiftX=W-g.startX,g.shiftY=C-g.startY,g.endTime=new Date().getTime();let M=c();null!=M&&!1!==k&&(null!=T&&T!==g.direction?(k=!1,T="cancel"):(k=M,T=g.direction)),t.trigger("gesture:pan",g)}}function r(j){null!=g&&(I.update(),g.event=j,null==k&&(k=c()),null!=k&&!1!==k&&t.trigger(k,g)),t.trigger("gesture:release",g),f=p,T=null,k=null,g=null}function c(){let j=null;I.update();const W=2,C=180*Math.atan2(g.shiftY-g.stepY,g.shiftX-g.stepX)/Math.PI;return 0===g.shiftX&&0===g.shiftY&&g.startTime>D+100&&g.stepTime<750?(D=new Date().getTime(),j="gesture:tap"):(f===p||f===m)&&g.stepDistance>W&&(135<=C&&180>=C||-180<=C&&-135>=C)?(g.direction="left",j="gesture:swipe",f=m):(f===p||f===m)&&g.stepDistance>W&&(0<=C&&45>=C||-45<=C&&0>C)?(g.direction="right",j="gesture:swipe",f=m):(f===p||f===v)&&g.stepDistance>W&&45C?(g.direction="down",j="gesture:swipe",f=v):(f===p||f===v)&&g.stepDistance>W&&-135C&&(g.direction="up",j="gesture:swipe",f=v),g.stepDistance>W&&I.step(),j}function u(j){let W,C={time:0,x:0,y:0},M={time:0,x:0,y:0},L=function(){j.stepTime=j.endTime,j.stepX=j.shiftX,j.stepY=j.shiftY,j.stepSpeed=0,j.stepDistance=0},B=function(){W=j.direction,C.time=new Date().getTime(),C.x=j.x,C.y=j.y,j.velocity=0,j.distance=0,L()};return B(),{update:function(){if(M.time=new Date().getTime(),M.x=j.x,M.y=j.y,null!=W&&W!==j.direction)return void B();null==W&&j.direction!==W&&(W=j.direction);const Y=M.time-C.time;let P={x:M.x-C.x,y:M.y-C.y};const H=Math.sqrt(P.x*P.x+P.y*P.y);j.distance=H;let X=H/Y;j.velocity="left"===j.direction||"up"===j.direction?-X:X,j.stepTime=j.endTime-j.stepTime,P={x:j.shiftX-j.stepX,y:j.shiftY-j.stepY},j.stepDistance=Math.sqrt(P.x*P.x+P.y*P.y),j.stepSpeed=j.stepDistance/j.stepTime},step:L}}const p=0,m=1,v=2;let f=p,g,w=!1,z=!0,_=-1,k,T,I,S=!1,D=new Date().getTime();Math.sign=Math.sign||function(j){return(0j)||+j},t.init=function(){let j=t.view();const W=t.options();W.html=!1,W.css=!1,z=!1!==W.passive&&"false"!==j.attr("data-o-passive"),_=W.startGap||j.attr("data-o-startgap")},t.create=function(){t.view().on("dragstart",{handler:function(j){w||z||j.preventDefault()},passive:z}).on("mousedown",{handler:function(j){const W=zuix.$(j.target);1===j.which&&0===W.parent("[class*=\"no-gesture\"]").length()&&j.x>_?(S=!0,w=!1,W.get().draggable=!1,o(j,j.x,j.y)):w=!0},passive:z}).on("mousemove",{handler:function(j){!w&&S&&s(j,j.x,j.y)},passive:z}).on("mouseup",function(j){1!==j.which||w||(S=!1,r(j))}).on("touchstart",{handler:function(j){const W=zuix.$(j.target);0===W.parent("[class*=\"no-gesture\"]").length()&&j.touches[0].clientX>_?(w=!1,W.get().draggable=!1,o(j,j.touches[0].clientX,j.touches[0].clientY)):w=!0},passive:z}).on("touchmove",{handler:function(j){w||s(j,j.touches[0].clientX,j.touches[0].clientY)},passive:z}).on("touchend",function(j){w||r(j)})}}},{componentId:"controllers/movie_db",controller:function(t){t.init=function(){t.options().html=!1,t.options().css=!1},t.create=function(){const s=t.view().attr("title");t.view().css({"background-size":"cover","background-position-x":"center"}),0 console.log('PWA service-worker ready.', reg))\n .catch(err => console.error('Could not load service-worker.', err));\n}\n",using:"./service-worker.js"},{componentId:"https://zuixjs.github.io/zkit/lib/controllers/scroll_helper",controller:function(t){function o(){null!=v&&clearTimeout(v);const z=new Date().getTime();if(100z-w)){w=z;const _=t.view().get(),k="scroll-helper-visible";null!=h&&null!=f&&h.each(function(T,I){const S=this.position();let D=!1,j=0;if(null===I.offsetParent)return!1;null==j&&(j=0);const W={left:0,top:0,right:m.viewport.width,bottom:m.viewport.height,width:m.viewport.width,height:m.viewport.height};let C=I.getBoundingClientRect(),M=I.offsetParent;for(;null!==M&&M!==_;){const L=M.getBoundingClientRect();C={left:C.left+L.left,top:C.top+L.top,right:C.right+L.left,bottom:C.bottom+L.top,width:C.width,height:C.height},M=M.offsetParent}if(D=!(C.left>W.right-j||C.rightW.bottom-j||C.bottom=_||0==S)return u(z),void o();const D=I+33*(S/_);requestAnimationFrame(function(){u(D),c(z)})}function u(z){const _=t.view().get();_===document.body?(document.documentElement.scrollTop=z,document.body.scrollTop=z):_.scrollTop=z}function p(z,_){let k,T;return function(){const I=this,S=arguments;T?(clearTimeout(k),k=setTimeout(function(){Date.now()-T>=_&&(z.apply(I,S),T=Date.now())},_-(Date.now()-T))):(z.apply(I,S),T=Date.now())}}const m={timestamp:0,size:{width:0,height:0},viewport:{x:0,y:0,width:0,height:0}};let v,h,f,g=0;t.init=function(){t.options().html=!1,t.options().css=!1},t.create=function(){t.view().get()===document.body?0*{max-width:auto}[layout*=column][self*=top]{height:auto!important}[self~=size-]>*{height:auto}}[layout*=column]:not([layout*=row]) [self*=left],[layout*=row]:not([layout*=column]) [self*=top]{-ms-flex-item-align:start;align-self:flex-start}[self~=center]{-ms-flex-item-align:center;align-self:center}[layout*=column]:not([layout*=row]) [self*=right],[layout*=row]:not([layout*=column]) [self*=bottom]{-ms-flex-item-align:end;align-self:flex-end}[self*=stretch]{-ms-flex-item-align:stretch;align-self:stretch}[layout][self*=center]{margin-left:auto;margin-right:auto}[layout][self*=right]{margin-right:0}[layout][self*=left]{margin-left:0}[layout*=column] [self*=bottom]{margin-top:auto}[layout*=column] [self*=top]{margin-bottom:auto}[layout*=row] [self*=left]{margin-right:auto}[layout*=row] [self*=right]{margin-left:auto}[self~=size-1of5]{width:20%}[self~=size-1of4]{width:25%}[self~=size-1of3]{width:33.33333%}[self~=size-2of5]{width:40%}[self~=size-1of2]{width:50%}[self~=size-3of5]{width:60%}[self~=size-2of3]{width:66.6666%}[self~=size-3of4]{width:75%}[self~=size-4of5]{width:80%}[self~=size-1of1]{width:100%}[layout*=column][layout*=stretch-]>:not([self*=size-]),[layout*=row][layout*=-stretch]>:not([self*=size-]),[self~=size-x1]{-ms-flex:1 0 0%!important;flex:1 0 0%!important}[self~=size-x2]{-ms-flex:2 0 0%!important;flex:2 0 0%!important}[self~=size-x3]{-ms-flex:3 0 0%!important;flex:3 0 0%!important}[self~=size-x4]{-ms-flex:4 0 0%!important;flex:4 0 0%!important}[self~=size-x5]{-ms-flex:5 0 0%!important;flex:5 0 0%!important}[self~=size-x6]{-ms-flex:6 0 0%!important;flex:6 0 0%!important}[self~=size-x7]{-ms-flex:7 0 0%!important;flex:7 0 0%!important}[self~=size-x8]{-ms-flex:8 0 0%!important;flex:8 0 0%!important}[self~=size-x9]{-ms-flex:9 0 0%!important;flex:9 0 0%!important}[self*=size-auto]{-ms-flex:1 1 auto;flex:1 1 auto}[self*=size-x0]{-ms-flex:0 0 auto;flex:0 0 auto}[self~=size-xxlarge]{max-width:1440px;width:100%}[self~=size-xlarge]{max-width:1200px;width:100%}[self~=size-large]{max-width:960px;width:100%}[self~=size-larger]{max-width:840px;width:100%}[self~=size-medium]{max-width:720px;width:100%}[self~=size-smaller]{max-width:600px;width:100%}[self~=size-small]{max-width:480px;width:100%}[self~=size-xsmall]{max-width:360px;width:100%}[self~=size-xxsmall]{max-width:240px;width:100%}[self*=size-x]:not([self*=small]):not([self*=large]){-ms-flex-negative:1;flex-shrink:1}[self~=first]{-ms-flex-order:-1;order:-1}[self~=order-1]{-ms-flex-order:1;order:1}[self~=order-2]{-ms-flex-order:2;order:2}[self~=order-3]{-ms-flex-order:3;order:3}[self~=last]{-ms-flex-order:999;order:999}[layout*=column]:not([layout*=row])>*{-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto}@media screen and (max-width:64em){[layout*=lg-row]{-ms-flex-direction:row;flex-direction:row}[layout*=lg-column]{-ms-flex-direction:column;flex-direction:column}[layout*=lg-columns],[layout*=lg-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:52em){[layout*=md-row]{-ms-flex-direction:row;flex-direction:row}[layout*=md-column]{-ms-flex-direction:column;flex-direction:column}[layout*=md-columns],[layout*=md-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:40em){[layout*=sm-row]{-ms-flex-direction:row;flex-direction:row}[layout*=sm-column]{-ms-flex-direction:column;flex-direction:column}[layout*=sm-columns],[layout*=sm-rows]{-ms-flex-wrap:wrap;flex-wrap:wrap}}@media screen and (max-width:64em){[self*=lg-full]{-ms-flex:1 1 100%!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=lg-half]{-ms-flex:1 1 50%!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=lg-first]{-ms-flex-order:-1;order:-1}[self~=lg-last]{-ms-flex-order:999;order:999}[self~=lg-hide]{display:none}[self~=lg-show]{display:inherit}}@media screen and (max-width:52em){[self*=md-full]{-ms-flex:1 1 100%!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=md-half]{-ms-flex:1 1 50%!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=md-first]{-ms-flex-order:-1;order:-1}[self~=md-last]{-ms-flex-order:999;order:999}[self~=md-hide]{display:none}[self~=md-show]{display:inherit}}@media screen and (max-width:40em){[self*=sm-full]{-ms-flex:1 1 100%!important;flex:1 1 100%!important;width:100%;max-width:100%}[self*=sm-half]{-ms-flex:1 1 50%!important;flex:1 1 50%!important;width:50%;max-width:50%}[self~=sm-first]{-ms-flex-order:-1;order:-1}[self~=sm-last]{-ms-flex-order:999;order:999}[self~=sm-hide]{display:none}[self~=sm-show]{display:inherit}}",controller:null,using:"//zuixjs.github.io/zkit/css/flex-layout-attribute.min.css"},{componentId:"layout/header",view:"
\n
WebFlix
\n
\n",css:". {\n position: fixed;\n top:0;\n left:0;\n right:0;\n height:auto;\n z-index: 100;\n}\n\n.header {\n height: 56px;\n max-height: 56px;\n}\n\n.logo {\n padding-left: 12px;\n padding-right: 12px;\n font-size: 220%;\n font-weight: 500;\n color: #dd3532;\n text-shadow:\n 1px 1px 0 #600,\n -1px -1px 0 #600,\n 1px -1px 0 #600,\n -1px 1px 0 #600,\n 1px 1px 0 #600;\n}\n",controller:function(){}},{componentId:"layout/footer",view:"\n\n\n\n",css:". {\n position: fixed;\n left:0; bottom:0; right: 0;\n height: 56px;\n background: #121212;\n color: white;\n border-top: solid 1px #711615;\n text-align: center;\n z-index: 100;\n overflow: hidden;\n}\n\nbutton {\n padding: 12px;\n max-height: 56px;\n margin-left: 8px;\n margin-right: 8px;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: rgba(0,0,0,0.5);\n -webkit-transition: all .3s; /* Safari */\n transition: all .3s;\n}\nbutton:hover {\n background: rgba(255,255,255,0.25);\n}\nbutton:focus {outline:0;}\nbutton i {\n color: #7c7c7c;\n font-size: 32px !important;\n}\nbutton:hover i, .active i {\n color: white;\n}\n.active {\n transform: scale(1.2);\n text-shadow:\n 1px 1px 0 #000,\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n}\n",controller:function(){}},{componentId:"pages/home",view:"
\n\n
\n
\n Bestseller\n •\n United States\n •\n Sci-fi\n •\n Action\n
\n
\n \n \n \n
\n
\n\n\n
\n\n\n
\n\n\n
\n\n
\n\n

\n If you like this template give it a star ⭐ on GitHub,\n this will make the programmer happy 😄 that will probably continue to improve it 🚀\n

\n

\n Feature requests, critics and comments are also welcome 🌈 in the repository issue tracker 📑\n

\n\n
\n\n\n\n
\n",css:". {\n /* temporary hack to test page scroll */\n /* height: 500vh; */\n color: white;\n padding-bottom: 96px;\n overflow-x: hidden;\n}\n\nh1 {\n font-size: 120%;\n text-align: left;\n margin-top: 28px;\n margin-left: 8px;\n margin-bottom: 8px;\n}\n\n.content {\n position: absolute;\n top: 0; left: 0;\n padding-bottom: 56px;\n width: 100vw;\n height: 90vh;\n background-image: linear-gradient(to bottom, rgba(0,0,0, 0.15), transparent 20%, transparent 70%, rgba(0,0,0, 0.5) 80%);\n}\n\n.categories, .options {\n padding: 8px;\n}\n\nbutton {\n padding-left: 6px;\n padding-right: 16px;\n font-size: 120%;\n font-weight: 500;\n min-height: 38px;\n}\nbutton div i {\n margin-right: 6px;\n}\n\nbutton.flat-btn {\n border: 0;\n background: transparent;\n height: 56px;\n width: 56px;\n padding: 0;\n text-align: center;\n vertical-align: middle;\n}\nbutton.flat-btn i {\n color: white;\n font-size: 36px;\n line-height: 56px;\n}\n\n.gallery {\n width: 100%;\n height: 180px;\n}\n\n.movie {\n padding: 4px;\n}\n.movie span.item {\n display: inline-block;\n width: 120px;\n height: 180px;\n border: solid 1px rgba(255,255,255,.1);\n background-image: linear-gradient(rgba(0,0,0,0.15) 0, transparent 48px, transparent 40%, black 99%);\n}\n.movie span.item:hover {\n cursor: pointer;\n opacity: 0.8;\n}\n\n.about-box {\n margin-top: 56px;\n margin-bottom: 48px;\n font-size: 140%;\n font-family: \"Benton Sans\", \"Helvetica Neue\", helvetica, arial, sans-serif;\n line-height: 160%;\n}\n.about-box p {\n padding: 12px;\n}\n\n@media only screen and (min-device-width : 720px) {\n .gallery {\n height: 231px;\n }\n .movie span.item {\n width: 154px;\n height: 231px;\n }\n}\n",controller:function(t){function o(m){return c=m,u&&u.pictures(c.poster_path,c.backdrop_path),t.context}function s(){c.trailer&&(window.location.href=c.trailer)}function r(m){if(null==m)return void zuix.field("header-bar").css("background-color","rgba(18,18,18,"+p+")");let v=1;return"hit-top"===m.event?v=0:-m.info.viewport.y\n
Search
search\n\n",css:". {\n color: white;\n padding: 24px;\n}\n\n.message {\n color: darkgrey;\n min-height: 100vh;\n width: 100vw;\n font-size: 200%;\n}\n\n.message i {\n margin-left: 16px;\n color: darkgrey;\n font-size: 150%;\n}\n",controller:function(){}},{componentId:"pages/notifications",view:"
\n
Notifications
notifications\n
\n",css:". {\n color: white;\n}\n\n.message {\n color: darkgrey;\n min-height: 100vh;\n width: 100vw;\n font-size: 200%;\n}\n.message i {\n margin-left: 16px;\n color: darkgrey;\n font-size: 150%;\n}\n",controller:function(){}},{componentId:"pages/about",view:"
\n\n

About

\n\n

\n This web application template is built with zUIx.js.\n
\n Source code and documentation available from WebFlix repository.\n

\n\n

Other resources

\n
    \n
  • \n zKit
    \n a collection of components for modern web.\n
    • \n
  • \n HTML-PWA
    \n a progressive web app template optimized for mobile devices.\n
    • \n
  • \n Web Book
    \n a progressive web app template of a web book.\n
    • \n
\n\n

Disclaimer

\n

This product uses the TMDb API but is not endorsed or certified by TMDb.

\n\n
\n",css:". {\n color: white;\n padding: 24px;\n margin-top: 64px;\n margin-bottom: 64px;\n}\n\nh1 {\n color: darkgrey;\n}\n",controller:function(){}},{componentId:"pages/home/main_cover",view:"
\n
\n
\n",css:".cover-wrapper {\n overflow: hidden;\n margin-left: auto;\n margin-right: auto;\n height: 90vh;\n background-image: linear-gradient(to bottom, rgba(0,0,0, 0.3), transparent 20%, transparent 80%, rgba(0,0,0, 0.3) 90%);\n}\n.cover {\n height: 90vh;\n background-size: cover;\n background-repeat: no-repeat;\n background-position-x: center;\n /*transition: transform 150ms ease;*/\n}\n",controller:function(t){function o(h,f){return m=h,v=f,c(),t.context}function s(h){const f=-h.viewport.y/6;return u.css("transform","translateY("+f+"px)"),t.context}function r(h){p=h.matches,c()}function c(){p?m&&u.css("background-image","url(\""+m+"\")"):v&&u.css("background-image","url(\""+v+"\")")}let u,p=!1,m,v;t.create=function(){u=t.view(".cover");const h=window.matchMedia("(orientation: portrait)");h.matches&&(p=!0),h.addListener(r),t.expose("pictures",o),t.expose("translate",s)},t.destroy=function(){window.matchMedia("(orientation: portrait)").removeListener(r)}}},{componentId:"pages/home/list_top_rated",view:"

Top rated on WebFlix

\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n",css:null,controller:function(){}},{componentId:"pages/home/list_tv_series",view:"

TV Series

\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n",css:null,controller:function(){}},{componentId:"pages/home/list_comedy",view:"

Comedy Movies

\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n",css:null,controller:function(){}},{componentId:"pages/home/title_details",view:"
\n \n

\n
\n\n
\n
\n
\n

Movie title

\n
\n
\n

\n

Vote 7.5

\n
\n
\n\n
\n
\n add\n
\n
\n thumb_up\n
\n
\n share\n
\n
\n",css:". {\n position: fixed;\n z-index: 200;\n top: 0; left: 100vh;\n transition: left .2s ease-in-out;\n touch-action: none;\n width: 100vw;\n min-height: 100vh;\n background: #101010;\n color: white;\n}\n\nheader {\n position: fixed;\n top: 0; left: 0; right: 0; height: 56px;\n z-index: 200;\n}\nheader button {\n position: absolute;\n top: 0; left: 0;\n z-index: 10;\n border: 0;\n background: transparent;\n width: 56px;\n height: 56px;\n padding: 0;\n text-align: center;\n vertical-align: middle;\n}\nheader button i {\n color: white;\n font-weight: 700;\n font-size: 160%;\n line-height: 48px;\n}\nheader h1 {\n position: absolute;\n top: 14px;\n left: 56px;\n margin: 0;\n font-size: 160%;\n}\n\nmain {\n position: absolute;\n top:0;left:0; bottom: 0;\n width: 100%;\n padding-bottom: 72px;\n overflow-y: auto;\n}\n\nfooter {\n position: fixed;\n bottom: 0; left: 0; right: 0; height: 56px;\n background: #0a0a0a;\n border-top: solid 1px rgba(255,0,0,0.5);\n}\n\n.cover {\n background: black no-repeat;\n background-size: cover;\n background-position-x: center;\n position: relative;\n width: 100vw;\n height: 50vh;\n}\n\n.cover .background {\n position: absolute;\n left: 0; right: 0; top: 0; bottom: 0;\n background-image: linear-gradient(to bottom, rgba(0,0,0, 0.35) 1%, transparent 20%, transparent 80%, rgba(0,0,0, 0.35) 90%);\n}\n.cover h1 {\n z-index: 10;\n margin: 0;\n padding: 16px;\n font-size: 180%;\n text-shadow:\n 1px 1px 0 #000,\n -1px -1px 0 #000,\n 1px -1px 0 #000,\n -1px 1px 0 #000,\n 1px 1px 0 #000;\n}\n\n[data-ui-field=\"overview\"] {\n font-size: 120%;\n line-height: 160%;\n padding: 16px;\n margin-top: 8px;\n margin-bottom: 0;\n color: whitesmoke;\n}\n\nh2 {\n color: darkgrey;\n}\n[data-ui-field=\"vote\"] {\n color: white;\n}\n\n@media only screen and (min-device-width : 720px) {\n [data-ui-field=\"overview\"] {\n font-size: 140%;\n line-height: 180%;\n }\n .cover h1 {\n font-size: 220%;\n }\n}\n",controller:function(t){function o(m){window.location.href="#details",t.view().show(),p.scrollStart(),setTimeout(function(){t.view().css("left",0)},10);const v="url(\""+m.backdrop_path+"\")";t.field("cover").css("background-image",v),t.field("title").html(m.title||m.original_name),t.field("overview").html(m.overview),t.field("vote").html(m.vote_average),t.trigger("page:show")}function s(){t.view().css("left","100vw").one("transitionend",function(){t.view().hide()}),t.trigger("page:hide")}let r,c,u,p;t.create=function(){r=t.view("header"),c=t.view("main").find("h1"),u=r.find("h1"),r.find("button").on("click",s),zuix.load("@lib/controllers/scroll_helper",{view:t.view("main"),on:{"scroll:change":function(m,v){switch(v.event){case"hit-top":r.css("background-color","rgba(33,33,33,0)"),u.css("opacity",0),c.css("opacity",1),t.field("cover").css("background-position-y",0);break;case"scroll":const h=v.info.viewport;h.y>-h.height/2.5&&t.field("cover").css("background-position-y",-(h.y/5)+"px");}}},ready:function(){p=this,this.watch(".watchable",function(m,v){const h=v.frame.dy/0.3;0.3>v.frame.dy&&(-0.3v.frame.dy&&u.css("opacity",-h)})}}),t.view().hide(),t.expose("show",o),t.expose("hide",s)}}},{componentId:"https://zuixjs.github.io/zkit/lib/controllers/view_pager",controller:function(t){function o(){null!=V&&clearTimeout(V),V=setTimeout(s,250)}function s(ve){if(!ve&&(se||null!=ce))return void o();pe.each(function(){this.css({position:"absolute",left:0,top:0})});const he=_(t.view().get());if(0===he.width||0===he.height){if(0===he.height&&t.view().position().visible){let xe=0;pe.each(function(we,ye){let be=_(ye);be.height>xe&&(xe=be.height)}),he.heightbe&&(be=0),H(this,X),P(this,fe,be),fe+=ye.width}else{let be=(he.width-ye.width)/2;0>be&&(be=0),H(this,X),P(this,be,fe),fe+=ye.height}("true"===this.attr("data-ui-lazyload")||0=pe.length()&&(he=pe.length()-1,ve=!0),w(he,X),!ve}function c(){let ve=!1,he=parseInt(J)-1;return 0>he&&(he=0,ve=!0),w(he,X),!ve}function u(){w(0,X)}function p(){w(pe.length()-1,X)}function m(){w(parseInt(J)+U,X),v()}function v(){if(h(),!0===Q){const he=t.view().position().visible;he?(!le&&zuix.componentize(t.view()),N=setTimeout(m,$)):N=setTimeout(v,500),le=he}}function h(){null!=N&&clearTimeout(N)}function f(ve,he){let fe=0;return pe.each(function(ge,xe){let we=k(this);fe=ge;const ye=_(xe),be={x:we.position.x,y:we.position.y,w:ye.width,h:ye.height};if(Z===R&&(be.x>ve||be.x+be.w>ve)||Z===q&&(be.y>he||be.y+be.h>he))return!1}),fe}function g(ve,he){let fe=t.view().position(),ge=f(ve.x-fe.x,ve.y-fe.y);w(ge,null==he?X:he)}function w(ve,he){G=J,0>ve?(U=F,ve=0):ve>=pe.length()?(U=O,ve=pe.length()-1):ve!==J&&(U=Jhe.duration)&&(he.duration=0.2)),j(ye,0,he)}else{let ye=ve.y;0he.duration)&&(he.duration=0.2)),j(0,ye,he)}de=!0}function _(ve){const he=ve.getBoundingClientRect(),fe=he.width||ve.offsetWidth,ge=ve.offsetHeight||he.height;return{width:fe,height:ge}}function k(ve){const he=ve.get().data=ve.get().data||{};return he.position=he.position||{x:0,y:0},he}function T(){ne&&(I(),null!=ue&&clearTimeout(ue),null!=ce&&clearInterval(ce),ce=setInterval(function(){oe&&pe.each(function(ve,he){const fe=window.getComputedStyle(he,null),ge={width:parseFloat(fe.width.replace("px","")),height:parseFloat(fe.height.replace("px",""))},xe=parseFloat(fe.left.replace("px","")),we=parseFloat(fe.top.replace("px",""));0xe+ge.width||0>we+ge.height||xe>re.width||we>re.height?"hidden"!==he.visibility()&&he.visibility("hidden"):"visible"!==he.visibility()&&he.visibility("visible"))}),zuix.componentize(t.view())},10))}function I(){ne&&null==ue&&clearInterval(ce)}function S(){se=!0,de=!1,pe.each(function(ve,he){const fe=k(this),ge=D(),xe=window.getComputedStyle(he,null);fe.position.x=parseFloat(xe.left.replace("px","")),fe.position.y=parseFloat(xe.top.replace("px","")),this.css("left",fe.position.x+"px"),this.css("top",fe.position.y+"px"),fe.dragStart={x:ge.marginLeft+fe.position.x,y:ge.marginTop+fe.position.y}})}function D(){const ve={w:0,h:0,marginLeft:0,marginTop:0};return pe.each(function(he,fe){const ge=_(fe);ve.w+=ge.width,ve.h+=ge.height}),Z===R&&ve.w\n \n \n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n",css:null,controller:function(t){function o(j,W,C){let M=new Date().getTime();g={event:j,cancel:function(){g.event.cancelBubble=!0,z||g.event.preventDefault()},startX:W,startY:C,startTime:M,shiftX:0,shiftY:0,endTime:0,stepX:0,stepY:0,stepTime:M,velocity:0,x:W,y:C,scrollIntent:function(){return f===m?"horizontal":!(f!==v)&&"vertical"}},I=u(g),t.trigger("gesture:touch",g)}function s(j,W,C){if(null!=g){g.event=j,g.x=W,g.y=C,g.shiftX=W-g.startX,g.shiftY=C-g.startY,g.endTime=new Date().getTime();let M=c();null!=M&&!1!==k&&(null!=T&&T!==g.direction?(k=!1,T="cancel"):(k=M,T=g.direction)),t.trigger("gesture:pan",g)}}function r(j){null!=g&&(I.update(),g.event=j,null==k&&(k=c()),null!=k&&!1!==k&&t.trigger(k,g)),t.trigger("gesture:release",g),f=p,T=null,k=null,g=null}function c(){let j=null;I.update();const W=2,C=180*Math.atan2(g.shiftY-g.stepY,g.shiftX-g.stepX)/Math.PI;return 0===g.shiftX&&0===g.shiftY&&g.startTime>D+100&&g.stepTime<750?(D=new Date().getTime(),j="gesture:tap"):(f===p||f===m)&&g.stepDistance>W&&(135<=C&&180>=C||-180<=C&&-135>=C)?(g.direction="left",j="gesture:swipe",f=m):(f===p||f===m)&&g.stepDistance>W&&(0<=C&&45>=C||-45<=C&&0>C)?(g.direction="right",j="gesture:swipe",f=m):(f===p||f===v)&&g.stepDistance>W&&45C?(g.direction="down",j="gesture:swipe",f=v):(f===p||f===v)&&g.stepDistance>W&&-135C&&(g.direction="up",j="gesture:swipe",f=v),g.stepDistance>W&&I.step(),j}function u(j){let W,C={time:0,x:0,y:0},M={time:0,x:0,y:0},L=function(){j.stepTime=j.endTime,j.stepX=j.shiftX,j.stepY=j.shiftY,j.stepSpeed=0,j.stepDistance=0},B=function(){W=j.direction,C.time=new Date().getTime(),C.x=j.x,C.y=j.y,j.velocity=0,j.distance=0,L()};return B(),{update:function(){if(M.time=new Date().getTime(),M.x=j.x,M.y=j.y,null!=W&&W!==j.direction)return void B();null==W&&j.direction!==W&&(W=j.direction);const Y=M.time-C.time;let P={x:M.x-C.x,y:M.y-C.y};const H=Math.sqrt(P.x*P.x+P.y*P.y);j.distance=H;let X=H/Y;j.velocity="left"===j.direction||"up"===j.direction?-X:X,j.stepTime=j.endTime-j.stepTime,P={x:j.shiftX-j.stepX,y:j.shiftY-j.stepY},j.stepDistance=Math.sqrt(P.x*P.x+P.y*P.y),j.stepSpeed=j.stepDistance/j.stepTime},step:L}}const p=0,m=1,v=2;let f=p,g,w=!1,z=!0,_=-1,k,T,I,S=!1,D=new Date().getTime();Math.sign=Math.sign||function(j){return(0j)||+j},t.init=function(){let j=t.view();const W=t.options();W.html=!1,W.css=!1,z=!1!==W.passive&&"false"!==j.attr("data-o-passive"),_=W.startGap||j.attr("data-o-startgap")},t.create=function(){t.view().on("dragstart",{handler:function(j){w||z||j.preventDefault()},passive:z}).on("mousedown",{handler:function(j){const W=zuix.$(j.target);1===j.which&&0===W.parent("[class*=\"no-gesture\"]").length()&&j.x>_?(S=!0,w=!1,W.get().draggable=!1,o(j,j.x,j.y)):w=!0},passive:z}).on("mousemove",{handler:function(j){!w&&S&&s(j,j.x,j.y)},passive:z}).on("mouseup",function(j){1!==j.which||w||(S=!1,r(j))}).on("touchstart",{handler:function(j){const W=zuix.$(j.target);0===W.parent("[class*=\"no-gesture\"]").length()&&j.touches[0].clientX>_?(w=!1,W.get().draggable=!1,o(j,j.touches[0].clientX,j.touches[0].clientY)):w=!0},passive:z}).on("touchmove",{handler:function(j){w||s(j,j.touches[0].clientX,j.touches[0].clientY)},passive:z}).on("touchend",function(j){w||r(j)})}}},{componentId:"controllers/movie_db",controller:function(t){t.init=function(){t.options().html=!1,t.options().css=!1},t.create=function(){const s=t.view().attr("title");t.view().css({"background-size":"cover","background-position-x":"center"}),0About

- This web application template is built with zUIx.js. + This web application template is built with zuix.js.
Source code and documentation available from WebFlix repository.

diff --git a/source/pages/home.html b/source/pages/home.html index f5a8ca8..b11cc4b 100644 --- a/source/pages/home.html +++ b/source/pages/home.html @@ -40,7 +40,7 @@
- +

If you like this template give it a star ⭐ on GitHub, @@ -50,7 +50,7 @@ Feature requests, critics and comments are also welcome 🌈 in the repository issue tracker 📑

- +