diff --git a/res/minjs_v000/home.min.js b/res/minjs_v000/home.min.js index 0d60f76..f6f2e4c 100644 --- a/res/minjs_v000/home.min.js +++ b/res/minjs_v000/home.min.js @@ -1,2 +1,2 @@ -"use strict";import{a as u,button as h,checkbox as f,div as g,h1 as b,h2 as v,img as C,input as w,mountableStylesheet as y,p as x,span as I}from"../minjs_v000/domHelper.min.js";import{fetchApi as _,isMobile as k}from"../lib/lib.js";export default function(t){console.log("Home Init");const e=y("./res/pages/home.css");let n;const l=function(){let c;const d=[C("res/assets/icon/icon_64.svg",""),C("https://sticker-assets.dcard.tw/images/4d5acaf6-fb1c-4110-8538-6d2d651b410a/full.png",""),C("https://sticker-assets.dcard.tw/images/b5c7eddc-8dd9-40e9-ba4b-358323a45713/full.png",""),C("https://sticker-assets.dcard.tw/images/84eddd38-497c-41d6-8845-ec8b57498c6a/full.png",""),C("https://sticker-assets.dcard.tw/images/102eb5ae-3f1e-4b28-8866-905a64f87c9b/full.png","")];let p=0,m=0;const u=g("rippleable",{onclick:e=>{var t,n=(e=e).currentTarget,l=document.createElement("div"),s=Math.sqrt(n.clientWidth*n.clientWidth+n.clientHeight*n.clientHeight),o=(l.style.width=l.style.height=2*s+"px",n.getBoundingClientRect&&n.getBoundingClientRect()),e=(o?(l.style.top=e.pageY-(o.top+s)+"px",l.style.left=e.pageX-(o.left+s)+"px"):l.style.top=l.style.left="0",l.classList.add("ripple"),n.getElementsByClassName("ripple")),a=Date.now&&Date.now()||-1,i=(l.createTime=a,[]);for(const r of e)(-1===a||600{c=e,p=c.data.iconImageStyle||0,u.appendChild(d[p])},onPageOpen:()=>setTimeout(t,700),onPageClose:()=>e.style.width="0"},b(null,"title",u,C("./res/assets/page_home/logo_text.svg","NCKU"),e),x(null,"description",I("結合 NCKU HUB・UrSchool・成大選課系統","l1"),I("眾多功能，提供更好的選課環境。","l2")),g("quickSearch",w("searchInput","Search...",null,null),h(null,null,null,C("./res/assets/search_icon.svg",""),I("課程查詢"))));function t(){e.style.width=e.firstElementChild.offsetWidth+"px",setTimeout(()=>e.style.width=null,400)}}(),s=function(){const e=[f(null,!0,null,I("英語授課")),f("gray",!0,null,I("大學國文")),f(null,!0,null,I("新聞傳播學程")),f("gray",!0,null,I("生物科技學程")),f("gray",!0,null,I("外國語言")),f(null,!0,null,I("Coursera"))];let a=-200,i=-200,t;for(const f of e)f.direction=2*Math.random()*Math.PI,f.speed=1.5*Math.random()+.2,f.x=0,f.y=0,f.angle=Math.random()<.5?5:-5,f.scale="scale("+(.5*Math.random()+.7)+")",f.style.transform="translate("+f.x+"px,"+f.y+"px) "+f.scale;return g("filterFeature",{startAnimation:()=>t=setInterval(n,100),stopAnimation:()=>clearInterval(t)},g("animationBox",e,{onmousemove:function(e){var t=e.currentTarget.getBoundingClientRect();a=e.pageX-t.left,i=e.pageY-t.top}}),v("搜尋結果篩選"),C("./res/assets/filter_menu_icon.svg",""),x("可以自由選擇篩選條件，提供衝堂、精選節次、班別等篩選器，讓你選課不卡卡！"));function n(){for(const o of e){let e=0,t=0;var n=a-o.offsetLeft-o.offsetWidth/2,l=i-o.offsetTop-o.offsetHeight/2,s=Math.sqrt(n*n+l*l),n=(s<200&&(e=-n/s*(200-s)*.5,t=-l/s*(200-s)*.5),o.direction+=o.angle/180*Math.PI,Math.cos(o.direction)*o.speed),l=Math.sin(o.direction)*o.speed;o.x+=n,o.y+=l,o.style.transform="translate("+(o.x+e)+"px,"+(o.y+t)+"px) "+o.scale}}}(),o=g("siteInfo",l,s),a=g("scrollDownIndicator",{onclick:function(){k()?this.lastElementChild.scrollIntoView&&this.lastElementChild.scrollIntoView({behavior:"smooth"}):this.scrollIntoView&&this.scrollIntoView({behavior:"smooth"})}},C("./res/assets/down_arrow_icon.svg","","scrollDownArrow")),i=g("newsPanel",b("最新消息","title"),g("splitLine"),g("items")),r=g("bulletinPanel",b("資訊","title"),g("splitLine"),g("items"));let c=!1;const d={enrollmentAnnouncement:"選課公告",enrollmentInformation:"選課資訊",enrollmentFAQs:"選課FAQs",exploringTainan:"踏溯台南路線選擇系統",serviceRecommended:"服務學習推薦專區",contactInformation:"課程資訊服務聯絡窗口"},p=document.createElement("link");function m(){var e=t.element.scrollTop/o.offsetHeight;c=.5{if(null!=e&&e.success&&e.data){var e=e.data,t=i.lastElementChild;for(const o of e.news){var n=o.contents.map(e=>e instanceof Object?u(e.content,e.url,null,null,{target:"_blank"}):I(e));t.appendChild(g("news",I(o.department,"department"),x(null,"content",n),I(o.date,"date")))}var l=r.lastElementChild,s=e.bulletin;l.appendChild(u("原選課系統","https://course.ncku.edu.tw/","bulletin",null,{target:"_blank"}));for(const a in s)l.appendChild(u(d[a],s[a],"bulletin",null,{target:"_blank"}))}})},onPageClose:function(){console.log("Home Close"),e.disable(),document.head.removeChild(p),l.onPageClose(),s.stopAnimation(),t.element.removeEventListener("scroll",m)},onPageOpen:function(){console.log("Home Open"),e.enable(),document.head.appendChild(p),l.onPageOpen(),s.startAnimation(),t.element.addEventListener("scroll",m)}},o,g("panels",i,r))} +"use strict";import{a as p,button as n,checkbox as l,div as f,h1 as g,h2 as d,img as b,input as s,mountableStylesheet as v,p as _,span as w}from"../minjs_v000/domHelper.min.js";import{fetchApi as C,isMobile as y}from"../lib/lib.js";export default function(t){console.log("Home Init");const e=v("./res/pages/home.css");let n;const l=new k,s=new I,o=new L,i=f("siteInfo",l.element,s.element,o.element),a=f("scrollDownIndicator",{onclick:function(){y()?this.lastElementChild.scrollIntoView&&this.lastElementChild.scrollIntoView({behavior:"smooth"}):this.scrollIntoView&&this.scrollIntoView({behavior:"smooth"})}},b("./res/assets/down_arrow_icon.svg","","scrollDownArrow")),c=f("newsPanel",g("最新消息","title"),f("splitLine"),f("items")),r=f("bulletinPanel",g("資訊","title"),f("splitLine"),f("items"));let d=!1;const h={enrollmentAnnouncement:"選課公告",enrollmentInformation:"選課資訊",enrollmentFAQs:"選課FAQs",exploringTainan:"踏溯台南路線選擇系統",serviceRecommended:"服務學習推薦專區",contactInformation:"課程資訊服務聯絡窗口"},u=document.createElement("link");function m(){var e=t.element.scrollTop/i.offsetHeight;d=.5{if(null!=e&&e.success&&e.data){var e=e.data,t=c.lastElementChild;for(const o of e.news){var n=o.contents.map(e=>e instanceof Object?p(e.content,e.url,null,null,{target:"_blank"}):w(e));t.appendChild(f("news",w(o.department,"department"),_(null,"content",n),w(o.date,"date")))}var l=r.lastElementChild,s=e.bulletin;l.appendChild(p("原選課系統","https://course.ncku.edu.tw/","bulletin",null,{target:"_blank"}));for(const i in s)l.appendChild(p(h[i],s[i],"bulletin",null,{target:"_blank"}))}})},onPageClose:function(){console.log("Home Close"),e.disable(),document.head.removeChild(u),l.onPageClose(),s.stopAnimation(),o.stopAnimation(),t.element.removeEventListener("scroll",m)},onPageOpen:function(){console.log("Home Open"),e.enable(),document.head.appendChild(u),l.onPageOpen(),s.startAnimation(),o.startAnimation(),t.element.addEventListener("scroll",m)}},i,f("panels",c,r))}function k(){let r;const d=[()=>b("res/assets/icon/icon_64.svg",""),()=>b("https://sticker-assets.dcard.tw/images/4d5acaf6-fb1c-4110-8538-6d2d651b410a/full.png",""),()=>b("https://sticker-assets.dcard.tw/images/b5c7eddc-8dd9-40e9-ba4b-358323a45713/full.png",""),()=>b("https://sticker-assets.dcard.tw/images/84eddd38-497c-41d6-8845-ec8b57498c6a/full.png",""),()=>b("https://sticker-assets.dcard.tw/images/102eb5ae-3f1e-4b28-8866-905a64f87c9b/full.png","")];let h=0,u=0;const m=f("rippleable",{onclick:e=>{var t,n=(e=e).currentTarget,l=document.createElement("div"),s=Math.sqrt(n.clientWidth*n.clientWidth+n.clientHeight*n.clientHeight),o=(l.style.width=l.style.height=2*s+"px",n.getBoundingClientRect&&n.getBoundingClientRect()),e=(o?(l.style.top=e.pageY-(o.top+s)+"px",l.style.left=e.pageX-(o.left+s)+"px"):l.style.top=l.style.left="0",l.classList.add("ripple"),n.getElementsByClassName("ripple")),i=Date.now&&Date.now()||-1,a=(l.createTime=i,[]);for(const c of e)(-1===i||600e.style.width=null,400)}this.init=function(e){r=e,h=r.data.iconImageStyle||0,d[h]instanceof Function&&(d[h]=d[h]()),m.appendChild(d[h])},this.onPageOpen=()=>setTimeout(t,700),this.onPageClose=()=>e.style.width="0",this.element=f("main",g(null,"title",m,b("./res/assets/page_home/logo_text.svg","NCKU"),e),_(null,"description",w("結合 NCKU HUB・UrSchool・成大選課系統","l1"),w("眾多功能，提供更好的選課環境。","l2")),f("quickSearch",s("searchInput","Search...",null,null),n(null,null,null,b("./res/assets/search_icon.svg",""),w("課程查詢"))))}function I(){const e=[l(null,!0,null,w("英語授課")),l("gray",!0,null,w("大學國文")),l(null,!0,null,w("新聞傳播學程")),l("gray",!0,null,w("生物科技學程")),l("gray",!0,null,w("外國語言")),l(null,!0,null,w("Coursera"))],i=200;let a=-i,c=-i,t;for(const l of e)l.direction=2*Math.random()*Math.PI,l.speed=1.5*Math.random()+.2,l.x=0,l.y=0,l.angle=Math.random()<.5?5:-5,l.scale="scale("+(.5*Math.random()+.7)+")",l.style.transform="translate("+l.x+"px,"+l.y+"px) "+l.scale;function n(){for(const o of e){let e=0,t=0;var n=a-o.offsetLeft-o.offsetWidth/2,l=c-o.offsetTop-o.offsetHeight/2,s=Math.sqrt(n*n+l*l),n=(st=setInterval(n,100),this.stopAnimation=()=>clearInterval(t),this.element=f("filterFeature",f("animationBox",e,{onmousemove:function(e){var t=e.currentTarget.getBoundingClientRect();a=e.pageX-t.left,c=e.pageY-t.top}}),d("搜尋結果篩選"),b("./res/assets/filter_menu_icon.svg",""),_("可以自由選擇篩選條件，提供衝堂、精選節次、班別等篩選器，讓你選課不卡卡！"))}function L(){const n=this.element=f("introduction",f("block",{onwheel:function(e){t&&(e.preventDefault(),c||(l=n.scrollLeft),c=!0,n.scrollTo?((l+=e.deltaY)<0&&(l=0),n.scrollWidth-n.clientWidth-l<0&&(l=n.scrollWidth-n.clientWidth),n.scrollLeft!==l&&n.scrollTo({left:l,behavior:"smooth"})):n.scrollLeft+=e.deltaY)}},b("./res/assets/page_home/schedule_download_function.png"),d("課表下載","title"),_("提供預排課表檢視和自訂課表下載功能，成為排課大師！")),f("block bg1",b("./res/assets/page_home/add_course_function.png"),d("支援預排、選課","title"),_("登入後與成大連動，可進行預排、志願登記、單科加選等操作。")),f("block bg2",b("./res/assets/page_home/ncku_hub_comment_function.png"),d("NCKU HUB評論","title"),_("引入NCKU HUB，提供更人性化的評論查詢")),f("block",b("./res/assets/page_home/sort_function.png"),d("排序功能","title"),_("對搜尋結果的任意欄位進行排序，找到你的課程！")),f("block bg1",b("./res/assets/page_home/category_filter_function.png"),d("搜尋結果篩選","title"),_("可以自由選擇篩選條件，提供衝堂、精確節次、班別等篩選器")),f("block bg2",b("./res/assets/page_home/urschool_instructor_info_function.png"),d("UrSchool教授評價","title"),_("點擊教師姓名查看講師評價、詳細資料及評論")));let t=!1,l=0,s=0,o=0,i=0,a=!1,c=!0,e=null;function r(){var e=Date.now(),t=e-s;n.scrollLeft!==i?(i=n.scrollLeft,c=!0,s=e):c?2e3e=setInterval(r,100),this.stopAnimation=function(){clearInterval(e)}} //# sourceMappingURL=home.min.js.map \ No newline at end of file diff --git a/res/pages/home.css b/res/pages/home.css index 58087d0..ca84c7e 100644 --- a/res/pages/home.css +++ b/res/pages/home.css @@ -1 +1 @@ -.home>.siteInfo{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.home>.siteInfo>.main{min-height:100vh;margin-top:-50px;padding:250px 0 0 10%;box-sizing:border-box}.home>.siteInfo>.main>.title{margin:0}.home>.siteInfo>.main>.title>.rippleable{display:inline-block;margin-right:40px}.home>.siteInfo>.main>.title>.rippleable>img{height:90px;vertical-align:bottom}.home>.siteInfo>.main>.title>span{font-size:60px;line-height:1em}.home>.siteInfo>.main>.title>.slideOut{display:inline-block;overflow:hidden;position:relative;transition:width 400ms ease-out;-o-transition:width 400ms ease-out;-ms-transition:width 400ms ease-out;-moz-transition:width 400ms ease-out;-webkit-transition:width 400ms ease-out}.home>.siteInfo>.main>.title>.slideOut.open{width:4em}.home>.siteInfo>.main>.title>.slideOut::before{content:"";height:100%;width:.1em;background:linear-gradient(to right, #1B1F24, #1B1F2400);display:block;position:absolute;left:0}.home>.siteInfo>.main>.title>.slideOut>img{height:100%;float:right;padding-left:.4em}.home>.siteInfo>.main>.description{margin-bottom:55px}.home>.siteInfo>.main>.description>span{display:block;margin-top:24px}.home>.siteInfo>.main>.description>.l1{font-size:2rem;letter-spacing:3.2px}.home>.siteInfo>.main>.description>.l2{font-size:3rem;font-weight:700;letter-spacing:4.8px}.home>.siteInfo>.main>.quickSearch{background:#303338;display:inline-block;height:100px;border-radius:5px;position:relative;padding-right:230px}.home>.siteInfo>.main>.quickSearch>.searchInput{background:none;width:100%;height:100%;font-size:32px;padding:25px 0 25px 50px;border-radius:0;box-shadow:none;letter-spacing:3.2px}.home>.siteInfo>.main>.quickSearch>button{background:#155cff;height:100%;width:230px;font-size:32px;border-radius:5px;display:block;cursor:pointer;position:absolute;top:0;right:0;font-weight:700}.home>.siteInfo>.main>.quickSearch>button>img{display:inline-block;vertical-align:middle}.home>.siteInfo>.main>.quickSearch>button>span{margin-left:10px}.home>.siteInfo>.filterFeature{width:80%;max-width:1200px;margin:0 auto;padding:30px 5px;overflow:hidden;box-sizing:border-box;font-size:30px}.home>.siteInfo>.filterFeature>.animationBox{background:#262b32;padding:50px 20px;border-radius:10px;position:relative;text-align:center;overflow:hidden}.home>.siteInfo>.filterFeature>.animationBox>.checkbox{margin:20px 5%;filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));display:inline-block;white-space:nowrap;transition:transform 100ms linear;-o-transition:transform 100ms linear;-ms-transition:transform 100ms linear;-moz-transition:transform 100ms linear;-webkit-transition:transform 100ms linear}.home>.siteInfo>.filterFeature>.animationBox>.checkbox.gray>.checkmark{background:#bdbdbd}.home>.siteInfo>.filterFeature>h2{font-size:3rem;margin:30px 0 0 50px}.home>.siteInfo>.filterFeature>p{max-width:500px;font-size:1.5rem;margin-left:50px}.home>.siteInfo>.filterFeature>img{width:180px;height:180px;margin:-3rem 100px 0 0;float:right}.home>.siteInfo>.toCourseSearchLink{font-size:30px;white-space:nowrap;display:block;text-align:center}.home>.siteInfo>.toCourseSearchLink::before{color:#adff2f;content:">";margin:0 5px 0 0}.home>.siteInfo>.toCourseSearchLink::after{color:#adff2f;content:"<";margin:0 0 0 5px}.home>.siteInfo>.toCourseSearchLink>span{margin:0;animation:LinkAnimation forwards infinite 1000ms}@keyframes LinkAnimation{50%{margin:0 10px}}.home>.siteInfo>.introduction{max-width:100%;padding:5px;display:inline-block;overflow:auto;white-space:nowrap;vertical-align:top;-ms-overflow-style:none;scrollbar-width:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.home>.siteInfo>.introduction::-webkit-scrollbar{display:none}.home>.siteInfo>.introduction>.block{background:#212121;width:450px;border-radius:20px;overflow:hidden;padding:10px;margin:5px;display:inline-block;vertical-align:top;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}@media only screen and (max-width: 700px){.home>.siteInfo>.introduction>.block{width:400px}}.home>.siteInfo>.introduction>.block>img{float:left;width:150px;height:150px;border-radius:100%;margin-right:5px;border:#fff 2px solid}.home>.siteInfo>.introduction>.block>.title{font-size:30px;margin:10px 0;white-space:pre-wrap}.home>.siteInfo>.introduction>.block>p{font-size:18px}.home>.siteInfo>.introduction>.block>p.small{color:#757575;font-size:14px}@media only screen and (max-width: 700px){.home>.siteInfo>.main>.description .l1{font-size:1.5rem}.home>.siteInfo>.main>.description .l2{font-size:2rem}.home>.siteInfo>.filterFeature{width:100%;font-size:20px}.home>.siteInfo>.filterFeature>.animationBox{padding:10px}.home>.siteInfo>.filterFeature>h2{font-size:2rem;margin-top:10px;margin-left:10px}.home>.siteInfo>.filterFeature>p{font-size:1.2rem;margin-left:10px}.home>.siteInfo>.filterFeature img{width:100px;height:100px;margin:0}.home>.siteInfo>.main{padding:10vh 0 0 15px}.home>.siteInfo>.main>.title>.rippleable{display:block;margin-bottom:10px}.home>.siteInfo>.main>.title>img,.home>.siteInfo>.main>.title>.slideOut{height:40px}.home>.siteInfo>.main>.quickSearch{height:80px;padding-right:80px;margin-right:15px}.home>.siteInfo>.main>.quickSearch>button{width:80px}.home>.siteInfo>.main>.quickSearch>button>span{display:none}}.home>.scrollDownIndicator{background:linear-gradient(rgba(0, 0, 0, 0), #1B1F24);width:100%;height:100px;position:absolute;padding:0 15%;bottom:0;cursor:pointer;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:none}.home>.scrollDownIndicator>.scrollDownArrow{width:20px;height:20px;position:absolute;left:0;right:0;margin:0 auto;bottom:20px;animation:ScrollDownArrowAnimation forwards infinite 2000ms;transition:opacity 200ms;-o-transition:opacity 200ms;-ms-transition:opacity 200ms;-moz-transition:opacity 200ms;-webkit-transition:opacity 200ms}@keyframes ScrollDownArrowAnimation{50%{bottom:10px}}.home>.scrollDownIndicator>.title{line-height:45px;font-size:35px;position:absolute;left:15%;right:15%;bottom:0;margin:0 auto;text-align:center;white-space:nowrap;transition:right 500ms;-o-transition:right 500ms;-ms-transition:right 500ms;-moz-transition:right 500ms;-webkit-transition:right 500ms}@media only screen and (max-width: 700px){.home>.scrollDownIndicator{padding:5px 5px 0 5px}.home>.scrollDownIndicator>.title{left:5px;right:5px}}.home>.scrollDownIndicator.toLeft>.scrollDownArrow{opacity:0}.home>.scrollDownIndicator.toLeft>.title{right:100%}.home>.panels{background:#1b1f24;padding:0 15% 15%;position:relative}@media only screen and (max-width: 700px){.home>.panels{padding:0 5px 0 5px}}.home>.panels .title{margin:0;line-height:45px;font-size:35px}.home>.panels .splitLine{border-bottom:#fff 2px solid;margin-bottom:10px}.home>.panels>.newsPanel{margin-bottom:20px}.home>.panels>.newsPanel>.items>.news{background:rgba(217,217,217,.1176470588);box-shadow:1px 1px 5px 1px rgba(0,0,0,.3137254902);padding:10px;border-radius:10px;margin-bottom:10px;overflow:hidden}.home>.panels>.newsPanel>.items>.news>.department{background:#828282;padding:5px;border-radius:10px;margin-bottom:5px;display:inline-block}.home>.panels>.newsPanel>.items>.news>.content>span{display:block;margin-bottom:5px}.home>.panels>.newsPanel>.items>.news>.content>a{text-decoration:underline}.home>.panels>.newsPanel>.items>.news>.content>a::after{content:"";background:url("/NCKUpp/res/assets/new_tab_icon.svg") no-repeat 0 0/1em;width:1em;height:1em;display:inline-block;vertical-align:middle;margin-left:5px}.home>.panels>.newsPanel>.items>.news>.date{float:right;color:gray}.home>.panels>.bulletinPanel>.items>.bulletin{background:rgba(217,217,217,.1176470588);padding:5px;border-radius:10px;margin-bottom:5px;display:block;text-decoration:underline;box-shadow:1px 1px 5px 1px rgba(0,0,0,.3137254902)}.home>.panels>.bulletinPanel>.items>.bulletin::after{content:"";background:url("/NCKUpp/res/assets/new_tab_icon.svg") no-repeat 0 0/1em;width:1em;height:1em;display:inline-block;vertical-align:middle;margin-left:5px}.rippleable{position:relative;overflow:hidden}.rippleable>.ripple{background-color:#1B1F2460;border-radius:50%;position:absolute;animation:ripple 600ms linear;transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0)}@keyframes ripple{30%{opacity:1}100%{transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);opacity:0}}/*# sourceMappingURL=home.css.map */ +.home>.siteInfo{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.home>.siteInfo>.main{min-height:100vh;margin-top:-50px;padding:250px 0 0 10%;box-sizing:border-box}.home>.siteInfo>.main>.title{margin:0}.home>.siteInfo>.main>.title>.rippleable{display:inline-block;margin-right:20px}.home>.siteInfo>.main>.title>.rippleable>img{width:90px;height:90px;vertical-align:bottom}.home>.siteInfo>.main>.title>span{font-size:60px;line-height:1em}.home>.siteInfo>.main>.title>.slideOut{display:inline-block;overflow:hidden;position:relative;transition:width 400ms ease-out;-o-transition:width 400ms ease-out;-ms-transition:width 400ms ease-out;-moz-transition:width 400ms ease-out;-webkit-transition:width 400ms ease-out}.home>.siteInfo>.main>.title>.slideOut.open{width:4em}.home>.siteInfo>.main>.title>.slideOut::before{content:"";height:100%;width:.1em;background:linear-gradient(to right, #1B1F24, #1B1F2400);display:block;position:absolute;left:0}.home>.siteInfo>.main>.title>.slideOut>img{height:100%;float:right;padding-left:.4em}.home>.siteInfo>.main>.description{margin-bottom:55px}.home>.siteInfo>.main>.description>span{display:block;margin-top:24px}.home>.siteInfo>.main>.description>.l1{font-size:2rem;letter-spacing:3.2px}.home>.siteInfo>.main>.description>.l2{font-size:3rem;font-weight:700;letter-spacing:4.8px}.home>.siteInfo>.main>.quickSearch{background:#303338;display:inline-block;height:100px;border-radius:5px;position:relative;padding-right:230px}.home>.siteInfo>.main>.quickSearch>.searchInput{background:none;width:100%;height:100%;font-size:32px;padding:25px 0 25px 50px;border-radius:0;box-shadow:none;letter-spacing:3.2px}.home>.siteInfo>.main>.quickSearch>button{background:#155cff;height:100%;width:230px;font-size:32px;border-radius:5px;display:block;cursor:pointer;position:absolute;top:0;right:0;font-weight:700}.home>.siteInfo>.main>.quickSearch>button>img{display:inline-block;vertical-align:middle}.home>.siteInfo>.main>.quickSearch>button>span{margin-left:10px}.home>.siteInfo>.filterFeature{width:80%;max-width:1200px;margin:0 auto;padding:30px 5px;overflow:hidden;box-sizing:border-box;font-size:30px}.home>.siteInfo>.filterFeature>.animationBox{background:#262b32;padding:50px 20px;border-radius:10px;position:relative;text-align:center;overflow:hidden}.home>.siteInfo>.filterFeature>.animationBox>.checkbox{margin:20px 5%;filter:drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.2));display:inline-block;white-space:nowrap;transition:transform 100ms linear;-o-transition:transform 100ms linear;-ms-transition:transform 100ms linear;-moz-transition:transform 100ms linear;-webkit-transition:transform 100ms linear}.home>.siteInfo>.filterFeature>.animationBox>.checkbox.gray>.checkmark{background:#bdbdbd}.home>.siteInfo>.filterFeature>h2{font-size:3rem;margin:30px 0 0 50px}.home>.siteInfo>.filterFeature>p{max-width:500px;font-size:1.5rem;margin-left:50px}.home>.siteInfo>.filterFeature>img{width:180px;height:180px;margin:-3rem 100px 0 0;float:right}.home>.siteInfo>.toCourseSearchLink{font-size:30px;white-space:nowrap;display:block;text-align:center}.home>.siteInfo>.toCourseSearchLink::before{color:#adff2f;content:">";margin:0 5px 0 0}.home>.siteInfo>.toCourseSearchLink::after{color:#adff2f;content:"<";margin:0 0 0 5px}.home>.siteInfo>.toCourseSearchLink>span{margin:0;animation:LinkAnimation forwards infinite 1000ms}@keyframes LinkAnimation{50%{margin:0 10px}}.home>.siteInfo>.introduction{color:#1b1f24;max-width:100%;display:inline-block;overflow:auto;white-space:nowrap;vertical-align:top;text-align:center;-ms-overflow-style:none;scrollbar-width:none;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.home>.siteInfo>.introduction::-webkit-scrollbar{display:none}.home>.siteInfo>.introduction>.block{background:#6c99ff;width:300px;height:400px;border-radius:20px;overflow:hidden;padding:50px 20px 20px 20px;margin:30px;display:inline-block;vertical-align:top;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}@media only screen and (max-width: 700px){.home>.siteInfo>.introduction>.block{width:400px}}.home>.siteInfo>.introduction>.block.bg1{background:#fdff9a}.home>.siteInfo>.introduction>.block.bg2{background:#bdbdbd}.home>.siteInfo>.introduction>.block>img{width:150px;height:150px;border-radius:100%;display:inline-block;border:#fff 2px solid}.home>.siteInfo>.introduction>.block>.title{font-size:30px;margin:10px 0;white-space:pre-wrap}.home>.siteInfo>.introduction>.block>p{font-size:18px}.home>.siteInfo>.introduction>.block>p.small{color:#aaa;font-size:12px}@media only screen and (max-width: 700px){.home>.siteInfo>.main>.description .l1{font-size:1.5rem}.home>.siteInfo>.main>.description .l2{font-size:2rem}.home>.siteInfo>.filterFeature{width:100%;font-size:20px}.home>.siteInfo>.filterFeature>.animationBox{padding:10px}.home>.siteInfo>.filterFeature>h2{font-size:2rem;margin-top:10px;margin-left:10px}.home>.siteInfo>.filterFeature>p{font-size:1.2rem;margin-left:10px}.home>.siteInfo>.filterFeature img{width:100px;height:100px;margin:0}.home>.siteInfo>.main{padding:10vh 0 0 15px}.home>.siteInfo>.main>.title>.rippleable{display:block;margin-bottom:10px}.home>.siteInfo>.main>.title>img,.home>.siteInfo>.main>.title>.slideOut{height:40px}.home>.siteInfo>.main>.quickSearch{height:80px;padding-right:80px;margin-right:15px}.home>.siteInfo>.main>.quickSearch>button{width:80px}.home>.siteInfo>.main>.quickSearch>button>span{display:none}}.home>.scrollDownIndicator{background:linear-gradient(rgba(0, 0, 0, 0), #1B1F24);width:100%;height:100px;position:absolute;padding:0 15%;bottom:0;cursor:pointer;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:none}.home>.scrollDownIndicator>.scrollDownArrow{width:20px;height:20px;position:absolute;left:0;right:0;margin:0 auto;bottom:20px;animation:ScrollDownArrowAnimation forwards infinite 2000ms;transition:opacity 200ms;-o-transition:opacity 200ms;-ms-transition:opacity 200ms;-moz-transition:opacity 200ms;-webkit-transition:opacity 200ms}@keyframes ScrollDownArrowAnimation{50%{bottom:10px}}.home>.scrollDownIndicator>.title{line-height:45px;font-size:35px;position:absolute;left:15%;right:15%;bottom:0;margin:0 auto;text-align:center;white-space:nowrap;transition:right 500ms;-o-transition:right 500ms;-ms-transition:right 500ms;-moz-transition:right 500ms;-webkit-transition:right 500ms}@media only screen and (max-width: 700px){.home>.scrollDownIndicator{padding:5px 5px 0 5px}.home>.scrollDownIndicator>.title{left:5px;right:5px}}.home>.scrollDownIndicator.toLeft>.scrollDownArrow{opacity:0}.home>.scrollDownIndicator.toLeft>.title{right:100%}.home>.panels{background:#1b1f24;padding:0 15% 15%;position:relative}@media only screen and (max-width: 700px){.home>.panels{padding:0 5px 0 5px}}.home>.panels .title{margin:0;line-height:45px;font-size:35px}.home>.panels .splitLine{border-bottom:#fff 2px solid;margin-bottom:10px}.home>.panels>.newsPanel{margin-bottom:20px}.home>.panels>.newsPanel>.items>.news{background:rgba(217,217,217,.1176470588);box-shadow:1px 1px 5px 1px rgba(0,0,0,.3137254902);padding:10px;border-radius:10px;margin-bottom:10px;overflow:hidden}.home>.panels>.newsPanel>.items>.news>.department{background:#828282;padding:5px;border-radius:10px;margin-bottom:5px;display:inline-block}.home>.panels>.newsPanel>.items>.news>.content>span{display:block;margin-bottom:5px}.home>.panels>.newsPanel>.items>.news>.content>a{text-decoration:underline}.home>.panels>.newsPanel>.items>.news>.content>a::after{content:"";background:url("/NCKUpp/res/assets/new_tab_icon.svg") no-repeat 0 0/1em;width:1em;height:1em;display:inline-block;vertical-align:middle;margin-left:5px}.home>.panels>.newsPanel>.items>.news>.date{float:right;color:gray}.home>.panels>.bulletinPanel>.items>.bulletin{background:rgba(217,217,217,.1176470588);padding:5px;border-radius:10px;margin-bottom:5px;display:block;text-decoration:underline;box-shadow:1px 1px 5px 1px rgba(0,0,0,.3137254902)}.home>.panels>.bulletinPanel>.items>.bulletin::after{content:"";background:url("/NCKUpp/res/assets/new_tab_icon.svg") no-repeat 0 0/1em;width:1em;height:1em;display:inline-block;vertical-align:middle;margin-left:5px}.rippleable{position:relative;overflow:hidden}.rippleable>.ripple{background-color:#1B1F2460;border-radius:50%;position:absolute;animation:ripple 600ms linear;transform:scale(0);-o-transform:scale(0);-ms-transform:scale(0);-moz-transform:scale(0);-webkit-transform:scale(0)}@keyframes ripple{30%{opacity:1}100%{transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);-webkit-transform:scale(1);opacity:0}}/*# sourceMappingURL=home.css.map */ diff --git a/res/pages/home.css.map b/res/pages/home.css.map index a30586a..df117ed 100644 --- a/res/pages/home.css.map +++ b/res/pages/home.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["home.scss","../variables.scss"],"names":[],"mappings":"AAMI,gBC4EA,sBACA,2BACA,8BDtEI,sBACI,iBACA,iBACA,sBACA,sBAEA,6BACI,SAEA,yCACI,qBACA,kBAEA,6CACI,YACA,sBAIR,kCACI,eACA,gBAGJ,uCACI,qBACA,gBACA,kBC2BhB,WD1BoC,qBC2BpC,cD3BoC,qBC4BpC,eD5BoC,qBC6BpC,gBD7BoC,qBC8BpC,mBD9BoC,qBAEpB,4CACI,UAGJ,+CACI,WACA,YACA,WACA,yDACA,cACA,kBACA,OAGJ,2CACI,YACA,YACA,kBAKZ,mCACI,mBAEA,wCACI,cACA,gBAGJ,uCACI,eACA,qBAGJ,uCACI,eACA,gBACA,qBAIR,mCACI,mBACA,qBACA,aACA,kBACA,kBACA,oBAEA,gDACI,gBACA,WACA,YACA,eACA,yBACA,gBACA,gBACA,qBAIJ,0CACI,WCtGV,QDuGU,YACA,YACA,eACA,kBACA,cACA,eACA,kBACA,MACA,QACA,gBAEA,8CACI,qBACA,sBAGJ,+CACI,iBAOhB,+BACI,UACA,iBACA,cACA,iBACA,gBACA,sBACA,eAGA,6CACI,mBACA,kBACA,mBACA,kBACA,kBACA,gBAEA,uDACI,eACA,0DACA,qBACA,mBCtFhB,WDuFoC,uBCtFpC,cDsFoC,uBCrFpC,eDqFoC,uBCpFpC,gBDoFoC,uBCnFpC,mBDmFoC,uBAEpB,uEACI,mBAKZ,kCACI,eACA,qBAGJ,iCACI,gBACA,iBACA,iBAGJ,mCACI,YACA,aACA,uBACA,YAIR,oCACI,eACA,mBACA,cACA,kBAEA,4CACI,cACA,YACA,iBAGJ,2CACI,cACA,YACA,iBAGJ,yCACI,SACA,iDAGJ,yBACI,IACI,eAKZ,8BACI,eACA,YACA,qBACA,cACA,mBACA,mBC9HR,wBACA,qBAXA,sBACA,2BACA,8BAKA,iDACI,aDoII,qCACI,WC7MA,QD8MA,YAEA,mBACA,gBACA,aACA,WACA,qBACA,mBCrJZ,sBACA,2BACA,8BDsJY,0CAZJ,qCAaQ,aAGJ,yCACI,WACA,YACA,aACA,mBACA,iBACA,sBAGJ,4CACI,eACA,cACA,qBAGJ,uCACI,eAGJ,6CACI,MCnPJ,QDoPI,eAKZ,0CAEQ,uCACI,iBAGJ,uCACI,eAIR,+BACI,WACA,eAEA,6CACI,aAGJ,kCACI,eACA,gBACA,iBAGJ,iCACI,iBACA,iBAGJ,mCACI,YACA,aACA,SAIR,sBACI,sBAEA,yCACI,cACA,mBAGJ,wEACI,YAGJ,mCACI,YACA,mBACA,kBAEA,0CACI,WAEA,+CACI,cAQxB,2BACI,sDACA,WACA,aACA,kBACA,cACA,SACA,eC/PJ,sBACA,2BACA,8BD+PI,aAEA,4CACI,WACA,YACA,kBACA,OACA,QACA,cACA,YACA,4DCzRR,WD0R4B,cCzR5B,cDyR4B,cCxR5B,eDwR4B,cCvR5B,gBDuR4B,cCtR5B,mBDsR4B,cAGxB,oCACI,IACI,aAIR,kCACI,iBACA,eACA,kBACA,SACA,UACA,SACA,cACA,kBACA,mBC5SR,WD6S4B,YC5S5B,cD4S4B,YC3S5B,eD2S4B,YC1S5B,gBD0S4B,YCzS5B,mBDyS4B,YAGxB,0CA1CJ,2BA2CQ,sBAEA,kCACI,SACA,WAKJ,mDACI,UAGJ,yCACI,WAKZ,cACI,WCrYK,QDuYL,kBACA,kBAEA,0CANJ,cAOQ,qBAGJ,qBACI,SACA,iBACA,eAGJ,yBACI,6BACA,mBAGJ,yBACI,mBAEA,sCACI,WA/ZK,8BCsDjB,mDD2WY,aACA,mBACA,mBACA,gBAEA,kDACI,WAtaC,QAuaD,YACA,mBACA,kBACA,qBAGJ,oDACI,cACA,kBAGJ,iDACI,0BAEA,wDACI,WACA,wEACA,UACA,WACA,qBACA,sBACA,gBAIR,4CACI,YACA,WAMR,8CACI,WA1cK,8BA2cL,YACA,mBACA,kBACA,cACA,0BCzZZ,mDD4ZY,qDACI,WACA,wEACA,UACA,WACA,qBACA,sBACA,gBAOpB,YACI,kBACA,gBAEA,oBACI,2BACA,kBACA,kBACA,8BC9aJ,UD+auB,SC9avB,aD8auB,SC7avB,cD6auB,SC5avB,eD4auB,SC3avB,kBD2auB,SAI3B,kBACI,IACI,UAEJ,KCvbA,UDwbuB,SCvbvB,aDubuB,SCtbvB,cDsbuB,SCrbvB,eDqbuB,SCpbvB,kBDobuB,SACnB","file":"home.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["home.scss","../variables.scss"],"names":[],"mappings":"AAMI,gBC4EA,sBACA,2BACA,8BDtEI,sBACI,iBACA,iBACA,sBACA,sBAEA,6BACI,SAEA,yCACI,qBACA,kBAEA,6CACI,WACA,YACA,sBAIR,kCACI,eACA,gBAGJ,uCACI,qBACA,gBACA,kBC0BhB,WDzBoC,qBC0BpC,cD1BoC,qBC2BpC,eD3BoC,qBC4BpC,gBD5BoC,qBC6BpC,mBD7BoC,qBAEpB,4CACI,UAGJ,+CACI,WACA,YACA,WACA,yDACA,cACA,kBACA,OAGJ,2CACI,YACA,YACA,kBAKZ,mCACI,mBAEA,wCACI,cACA,gBAGJ,uCACI,eACA,qBAGJ,uCACI,eACA,gBACA,qBAIR,mCACI,mBACA,qBACA,aACA,kBACA,kBACA,oBAEA,gDACI,gBACA,WACA,YACA,eACA,yBACA,gBACA,gBACA,qBAIJ,0CACI,WCvGV,QDwGU,YACA,YACA,eACA,kBACA,cACA,eACA,kBACA,MACA,QACA,gBAEA,8CACI,qBACA,sBAGJ,+CACI,iBAOhB,+BACI,UACA,iBACA,cACA,iBACA,gBACA,sBACA,eAGA,6CACI,mBACA,kBACA,mBACA,kBACA,kBACA,gBAEA,uDACI,eACA,0DACA,qBACA,mBCvFhB,WDwFoC,uBCvFpC,cDuFoC,uBCtFpC,eDsFoC,uBCrFpC,gBDqFoC,uBCpFpC,mBDoFoC,uBAEpB,uEACI,mBAKZ,kCACI,eACA,qBAGJ,iCACI,gBACA,iBACA,iBAGJ,mCACI,YACA,aACA,uBACA,YAIR,oCACI,eACA,mBACA,cACA,kBAEA,4CACI,cACA,YACA,iBAGJ,2CACI,cACA,YACA,iBAGJ,yCACI,SACA,iDAGJ,yBACI,IACI,eAKZ,8BACI,cACA,eACA,qBACA,cACA,mBACA,mBACA,kBChIR,wBACA,qBAXA,sBACA,2BACA,8BAKA,iDACI,aDsII,qCACI,mBACA,YACA,aACA,mBACA,gBACA,4BACA,YACA,qBACA,mBCvJZ,sBACA,2BACA,8BDwJY,0CAZJ,qCAaQ,aAGJ,yCACI,mBAGJ,yCACI,mBAGJ,yCACI,YACA,aACA,mBACA,qBACA,sBAGJ,4CACI,eACA,cACA,qBAGJ,uCACI,eAGJ,6CACI,WACA,eAKZ,0CAEQ,uCACI,iBAGJ,uCACI,eAIR,+BACI,WACA,eAEA,6CACI,aAGJ,kCACI,eACA,gBACA,iBAGJ,iCACI,iBACA,iBAGJ,mCACI,YACA,aACA,SAIR,sBACI,sBAEA,yCACI,cACA,mBAGJ,wEACI,YAGJ,mCACI,YACA,mBACA,kBAEA,0CACI,WAEA,+CACI,cAQxB,2BACI,sDACA,WACA,aACA,kBACA,cACA,SACA,eCxQJ,sBACA,2BACA,8BDwQI,aAEA,4CACI,WACA,YACA,kBACA,OACA,QACA,cACA,YACA,4DClSR,WDmS4B,cClS5B,cDkS4B,cCjS5B,eDiS4B,cChS5B,gBDgS4B,cC/R5B,mBD+R4B,cAGxB,oCACI,IACI,aAIR,kCACI,iBACA,eACA,kBACA,SACA,UACA,SACA,cACA,kBACA,mBCrTR,WDsT4B,YCrT5B,cDqT4B,YCpT5B,eDoT4B,YCnT5B,gBDmT4B,YClT5B,mBDkT4B,YAGxB,0CA1CJ,2BA2CQ,sBAEA,kCACI,SACA,WAKJ,mDACI,UAGJ,yCACI,WAKZ,cACI,WC9YK,QDgZL,kBACA,kBAEA,0CANJ,cAOQ,qBAGJ,qBACI,SACA,iBACA,eAGJ,yBACI,6BACA,mBAGJ,yBACI,mBAEA,sCACI,WAxaK,8BCsDjB,mDDoXY,aACA,mBACA,mBACA,gBAEA,kDACI,WA/aC,QAgbD,YACA,mBACA,kBACA,qBAGJ,oDACI,cACA,kBAGJ,iDACI,0BAEA,wDACI,WACA,wEACA,UACA,WACA,qBACA,sBACA,gBAIR,4CACI,YACA,WAMR,8CACI,WAndK,8BAodL,YACA,mBACA,kBACA,cACA,0BClaZ,mDDqaY,qDACI,WACA,wEACA,UACA,WACA,qBACA,sBACA,gBAOpB,YACI,kBACA,gBAEA,oBACI,2BACA,kBACA,kBACA,8BCvbJ,UDwbuB,SCvbvB,aDubuB,SCtbvB,cDsbuB,SCrbvB,eDqbuB,SCpbvB,kBDobuB,SAI3B,kBACI,IACI,UAEJ,KChcA,UDicuB,SChcvB,aDgcuB,SC/bvB,cD+buB,SC9bvB,eD8buB,SC7bvB,kBD6buB,SACnB","file":"home.css"} \ No newline at end of file diff --git a/res/pages/home.js b/res/pages/home.js index 7c6d448..1e27601 100644 --- a/res/pages/home.js +++ b/res/pages/home.js @@ -12,12 +12,13 @@ export default function (router) { const styles = mountableStylesheet('./res/pages/home.css'); let /**@type{PageStorage}*/pageStorage; - const mainBoxElement = mainBox(); - const filterFeatureBoxElement = filterFeatureBox(); + const mainBoxElement = new MainBox(); + const filterFeatureBoxElement = new FilterFeatureBox(); + const featureIntroduction = new FeatureIntroduction(); const siteInfo = div('siteInfo', - mainBoxElement, - filterFeatureBoxElement, - // featureIntroduction(), + mainBoxElement.element, + filterFeatureBoxElement.element, + featureIntroduction.element, // a(null, './?page=CourseSearch', 'toCourseSearchLink', toCourseSearchBtnClick, span('前往課程查詢')), ); const scrollDownIndicator = div('scrollDownIndicator', {onclick: scrollDown}, @@ -70,6 +71,7 @@ export default function (router) { mainBoxElement.onPageOpen(); filterFeatureBoxElement.startAnimation(); + featureIntroduction.startAnimation(); router.element.addEventListener('scroll', onscroll); } @@ -80,6 +82,7 @@ export default function (router) { mainBoxElement.onPageClose(); filterFeatureBoxElement.stopAnimation(); + featureIntroduction.stopAnimation(); router.element.removeEventListener('scroll', onscroll); } @@ -149,16 +152,16 @@ export default function (router) { ); }; -function mainBox() { +function MainBox() { let pageStorage; // Main title const iconImages = [ - img('res/assets/icon/icon_64.svg', ''), + () => img('res/assets/icon/icon_64.svg', ''), // 腸太郎萬歲 \o/ \o/ \o/ - img('https://sticker-assets.dcard.tw/images/4d5acaf6-fb1c-4110-8538-6d2d651b410a/full.png', ''), - img('https://sticker-assets.dcard.tw/images/b5c7eddc-8dd9-40e9-ba4b-358323a45713/full.png', ''), - img('https://sticker-assets.dcard.tw/images/84eddd38-497c-41d6-8845-ec8b57498c6a/full.png', ''), - img('https://sticker-assets.dcard.tw/images/102eb5ae-3f1e-4b28-8866-905a64f87c9b/full.png', ''), + () => img('https://sticker-assets.dcard.tw/images/4d5acaf6-fb1c-4110-8538-6d2d651b410a/full.png', ''), + () => img('https://sticker-assets.dcard.tw/images/b5c7eddc-8dd9-40e9-ba4b-358323a45713/full.png', ''), + () => img('https://sticker-assets.dcard.tw/images/84eddd38-497c-41d6-8845-ec8b57498c6a/full.png', ''), + () => img('https://sticker-assets.dcard.tw/images/102eb5ae-3f1e-4b28-8866-905a64f87c9b/full.png', ''), ]; let iconImageStyle = 0; let clickCount = 0; @@ -171,22 +174,25 @@ function mainBox() { iconImageStyle = 0; pageStorage.data['iconImageStyle'] = iconImageStyle; pageStorage.save(); + if (iconImages[iconImageStyle] instanceof Function) + iconImages[iconImageStyle] = iconImages[iconImageStyle](); iconImageParent.replaceChild(iconImages[iconImageStyle], iconImageParent.firstChild); } }, }); const titleAnimation = span(null, 'slideOut', img('./res/assets/page_home/logo_plusplus_text.svg', '++'), {style: 'width:0'}); - return div('main', { - init: (pageStorage_) => { - pageStorage = pageStorage_; - // Load iconImage style - iconImageStyle = pageStorage.data['iconImageStyle'] || 0; - iconImageParent.appendChild(iconImages[iconImageStyle]); - }, - onPageOpen: () => setTimeout(expandTitle, 700), - onPageClose: () => titleAnimation.style.width = '0' - }, + this.init = function (pageStorage_) { + pageStorage = pageStorage_; + // Load iconImage style + iconImageStyle = pageStorage.data['iconImageStyle'] || 0; + if (iconImages[iconImageStyle] instanceof Function) + iconImages[iconImageStyle] = iconImages[iconImageStyle](); + iconImageParent.appendChild(iconImages[iconImageStyle]); + }; + this.onPageOpen = () => setTimeout(expandTitle, 700); + this.onPageClose = () => titleAnimation.style.width = '0'; + this.element = div('main', h1(null, 'title', iconImageParent, img('./res/assets/page_home/logo_text.svg', 'NCKU'), titleAnimation), p(null, 'description', span('結合 NCKU HUB・UrSchool・成大選課系統', 'l1'), @@ -235,7 +241,7 @@ function mainBox() { } } -function filterFeatureBox() { +function FilterFeatureBox() { const checkboxes = [ checkbox(null, true, null, span('英語授課')), checkbox('gray', true, null, span('大學國文')), @@ -262,10 +268,9 @@ function filterFeatureBox() { checkbox.y + 'px) ' + checkbox.scale; } - return div('filterFeature', { - startAnimation: () => interval = setInterval(animation, 100), - stopAnimation: () => clearInterval(interval) - }, + this.startAnimation = () => interval = setInterval(animation, 100); + this.stopAnimation = () => clearInterval(interval); + this.element = div('filterFeature', div('animationBox', checkboxes, {onmousemove: onmousemove}), h2('搜尋結果篩選'), img('./res/assets/filter_menu_icon.svg', ''), @@ -302,39 +307,38 @@ function filterFeatureBox() { } } -function featureIntroduction() { +function FeatureIntroduction() { // Feature introduction - const introduction = div('introduction', + const element = this.element = div('introduction', div('block', {onwheel: onwheel}, - img('./res/assets/page_home/sort_function.png'), - h2('排序功能', 'title'), - p('可對搜尋結果的任意欄位進行排序') + img('./res/assets/page_home/schedule_download_function.png'), + h2('課表下載', 'title'), + p('提供預排課表檢視和自訂課表下載功能，成為排課大師！') ), - div('block', + div('block bg1', + img('./res/assets/page_home/add_course_function.png'), + h2('支援預排、選課', 'title'), + p('登入後與成大連動，可進行預排、志願登記、單科加選等操作。'), + ), + div('block bg2', img('./res/assets/page_home/ncku_hub_comment_function.png'), h2('NCKU HUB評論', 'title'), - p('點擊課程評分即可查看評論') + p('引入NCKU HUB，提供更人性化的評論查詢') ), div('block', - img('./res/assets/page_home/urschool_instructor_info_function.png'), - h2('UrSchool教授評價', 'title'), - p('點擊教師姓名查看講師評價、詳細資料及評論') + img('./res/assets/page_home/sort_function.png'), + h2('排序功能', 'title'), + p('對搜尋結果的任意欄位進行排序，找到你的課程！') ), - div('block', + div('block bg1', img('./res/assets/page_home/category_filter_function.png'), h2('搜尋結果篩選', 'title'), p('可以自由選擇篩選條件，提供衝堂、精確節次、班別等篩選器') ), - div('block', - img('./res/assets/page_home/schedule_download_function.png'), - h2('課表下載', 'title'), - p('提供預排課表檢視，課表下載功能，下載漂亮的課表🥰') - ), - div('block', - img('./res/assets/page_home/add_course_function.png'), - h2('支援預排、選課', 'title'), - p('登入後可跟選課網站連動，進行預排、志願登記、單科加選等操作'), - p('搶課一律以成大系統為主，若使用本網站搶課未成功一概不負責', 'small') + div('block bg2', + img('./res/assets/page_home/urschool_instructor_info_function.png'), + h2('UrSchool教授評價', 'title'), + p('點擊教師姓名查看講師評價、詳細資料及評論') ) ); @@ -343,24 +347,24 @@ function featureIntroduction() { let lastScrollTime = 0; let introductionAnimationRollingTemp = 0, introductionAnimationLastScrollPos = 0; let introductionAnimationDirection = false, introductionAnimationPause = true; - let pageOpened = false; - introduction.onmouseenter = function () { + let animation = null; + this.onmouseenter = function () { introductionHover = true; }; - introduction.onmouseleave = function () { + this.onmouseleave = function () { introductionHover = false; }; + this.startAnimation = () => animation = setInterval(animationUpdate, 100); - function introductionAnimation() { + function animationUpdate() { const now = Date.now(); const time = now - lastScrollTime; // Interrupt by user - if (introduction.scrollLeft !== introductionAnimationLastScrollPos) { - introductionAnimationLastScrollPos = introduction.scrollLeft; + if (element.scrollLeft !== introductionAnimationLastScrollPos) { + introductionAnimationLastScrollPos = element.scrollLeft; introductionAnimationPause = true; lastScrollTime = now; - requestAnimationFrame(introductionAnimation); return; } // Pausing @@ -369,25 +373,22 @@ function featureIntroduction() { introductionAnimationPause = false; lastScrollTime = now; } - requestAnimationFrame(introductionAnimation); return; } // Update scroll lastScrollTime = now; - introductionAnimationRollingTemp += time / 1000 * 40; + introductionAnimationRollingTemp += time / 1000 * 100; if (introductionAnimationRollingTemp > 1) { - if (introductionAnimationDirection) - introduction.scrollLeft -= 1; - else - introduction.scrollLeft += 1; - introductionAnimationLastScrollPos = introduction.scrollLeft; + const scrollLeft = introductionAnimationDirection ? -1 : 1; + element.scrollLeft += scrollLeft; + introductionAnimationLastScrollPos = element.scrollLeft; introductionAnimationRollingTemp %= 1; } - if (introduction.scrollLeft === 0) + if (element.scrollLeft === 0) introductionAnimationDirection = false; - else if (introduction.scrollWidth - introduction.clientWidth - introduction.scrollLeft < 1) { + else if (element.scrollWidth - element.clientWidth - element.scrollLeft < 1) { introductionAnimationDirection = true; introductionAnimationPause = true; // if (introduction.scrollTo) { @@ -395,32 +396,31 @@ function featureIntroduction() { // } else // introduction.scrollLeft = 0; } - - if (pageOpened) - requestAnimationFrame(introductionAnimation); } + this.stopAnimation = function () { + clearInterval(animation); + }; + function onwheel(e) { if (introductionHover) { e.preventDefault(); if (!introductionAnimationPause) - introductionScrollTarget = introduction.scrollLeft; + introductionScrollTarget = element.scrollLeft; introductionAnimationPause = true; - if (introduction.scrollTo) { + if (element.scrollTo) { introductionScrollTarget += e.deltaY; if (introductionScrollTarget < 0) { introductionScrollTarget = 0; } - if (introduction.scrollWidth - introduction.clientWidth - introductionScrollTarget < 0) { - introductionScrollTarget = introduction.scrollWidth - introduction.clientWidth; + if (element.scrollWidth - element.clientWidth - introductionScrollTarget < 0) { + introductionScrollTarget = element.scrollWidth - element.clientWidth; } - if (introduction.scrollLeft !== introductionScrollTarget) - introduction.scrollTo({left: introductionScrollTarget, behavior: 'smooth'}); + if (element.scrollLeft !== introductionScrollTarget) + element.scrollTo({left: introductionScrollTarget, behavior: 'smooth'}); } else { - introduction.scrollLeft += e.deltaY; + element.scrollLeft += e.deltaY; } } } - - return introduction; } \ No newline at end of file diff --git a/res/pages/home.scss b/res/pages/home.scss index c410ceb..6f82b37 100644 --- a/res/pages/home.scss +++ b/res/pages/home.scss @@ -23,9 +23,10 @@ $object-layer2-dark: #828282; > .rippleable { display: inline-block; - margin-right: 40px; + margin-right: 20px; > img { + width: 90px; height: 90px; vertical-align: bottom; } @@ -211,23 +212,24 @@ $object-layer2-dark: #828282; } > .introduction { + color: #1B1F24; max-width: 100%; - padding: 5px; display: inline-block; overflow: auto; white-space: nowrap; vertical-align: top; + text-align: center; @include hide-scroll-bar; @include box-sizing-border; > .block { - background: $pure-gray-900; - width: 450px; - //max-width: 100%; + background: #6C99FF; + width: 300px; + height: 400px; border-radius: 20px; overflow: hidden; - padding: 10px; - margin: 5px; + padding: 50px 20px 20px 20px; + margin: 30px; display: inline-block; vertical-align: top; @include box-sizing-border; @@ -236,12 +238,19 @@ $object-layer2-dark: #828282; width: 400px; } + &.bg1 { + background: #FDFF9A; + } + + &.bg2 { + background: #BDBDBD; + } + > img { - float: left; width: 150px; height: 150px; border-radius: 100%; - margin-right: 5px; + display: inline-block; border: white 2px solid; } @@ -256,8 +265,8 @@ $object-layer2-dark: #828282; } > p.small { - color: $pure-gray-600; - font-size: 14px; + color: #aaa; + font-size: 12px; } } } diff --git a/res/pages/stuIdSysGrades.js b/res/pages/stuIdSysGrades.js index 528079d..ca0d304 100644 --- a/res/pages/stuIdSysGrades.js +++ b/res/pages/stuIdSysGrades.js @@ -111,7 +111,7 @@ export default function (router, loginState) { }; function MyGrades(router) { - const loadingState = new Signal(true); + const loadingState = new Signal(false); const normalDistImgWindow = new PopupWindow({root: router.element}); let stuIdLoadingCount = 0; let stuIdLoading = false;