├── .gitignore ├── README.md ├── bower.json └── src ├── css ├── main.css └── semantic.min.css ├── fonts ├── Lato.woff ├── MaisonNeueWEB-Light.woff └── icons.woff ├── img ├── avatar │ ├── lgl.png │ ├── ljf.png │ ├── pym.png │ ├── zh.png │ └── zjh.png ├── banner.jpg ├── icon-app.png ├── icon-email.png ├── icon-server.png ├── icon-website.png ├── logo-githubdaily.png ├── logo-ljf.jpg ├── logo.png └── temp │ ├── s1.jpg │ ├── s2.jpg │ └── s3.jpg ├── index.html └── js ├── main.js └── sisyphus.min.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | bower_components 3 | temp -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 说明 2 | 3 | The EST Group 网站静态页面. 4 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "The EST Group", 3 | "description": "The EST Group - We design and build: the Future, Baby!", 4 | "version": "1.0.0", 5 | "homepage": "http://estgroupe.com/", 6 | "dependencies": { 7 | "jquery": "2.2.1", 8 | "semantic-ui": "2.1.8", 9 | "swiper": "3.3.1", 10 | "jquery-mousewheel": "3.1.13", 11 | "theaterjs": "1.4.2", 12 | "animate.css": "3.5.1" 13 | } 14 | } -------------------------------------------------------------------------------- /src/css/main.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'MaisonNeueWEB-Light'; 3 | src: url(../fonts/MaisonNeueWEB-Light.woff) format('woff'); 4 | font-style: normal; 5 | font-weight: 300; 6 | } 7 | 8 | @font-face { 9 | font-family: 'Icons'; 10 | src: url(../fonts/icons.woff) format('woff'); 11 | font-style: normal; 12 | font-weight: 100; 13 | } 14 | 15 | @font-face { 16 | font-family: 'Lato'; 17 | font-style: normal; 18 | font-weight: 100; 19 | src: local('Lato Hairline'), local('Lato-Hairline'), url(../fonts/Lato.woff) format('woff'); 20 | } 21 | 22 | body { font-family: 'MaisonNeueWEB-Light', 'Heiti SC', 'Microsoft YaHei', 'Open Sans', Arial, sans-serif; -webkit-tap-highlight-color: rgba(0,0,0,0); color: #333; background: #EBECED; font-weight: 100;} 23 | body > div { background-color: #fff;} 24 | h1 { margin: 0; font-size: 48px; line-height: 1; color: #fff;} 25 | #The-EST-Group h2 { margin: 80px 0 0; padding: 8% 0 1%; font-size: 32px; font-weight: 100; line-height: 1; color: #777;} 26 | p { margin: 0;} 27 | a { color: #444;} 28 | a:hover { color: #000;} 29 | .cf:before, .cf:after { content: ""; display: table;} 30 | .cf:after { clear: both;} 31 | :focus { outline: none;} 32 | .background-transition { transition: background-color .2s ease-out;} 33 | .color-transition a { transition: color .1s;} 34 | .deco-a a { position: relative;} 35 | .deco-a a:before { content: ''; position: absolute; top: auto; bottom: 1px; left: 0; width: 100%; height: 1px; background-color: #e3e3e3; transition: all .2s; backface-visibility: hidden; transform: scaleX(0);} 36 | .deco-a a:hover:before { background-color: #fff; transform: scaleX(1);} 37 | .deco-a.dark a:before { background-color: #444;} 38 | .deco-a.dark a:hover:before { background-color: #000;} 39 | .hover-rotate { transition: transform .7s;} 40 | .hover-rotate:hover { transform: rotate(360deg);} 41 | #The-EST-Group .page-btn { margin-top: 81px; font-weight: 100;} 42 | .swiper-pagination-bullet-active { background: #28A9A7;} 43 | .ui.button { font-family: 'MaisonNeueWEB-Light', 'Lantinghei SC', 'Open Sans', Arial;} 44 | #The-EST-Group .ui.button { font-weight: 100;} 45 | .modal.basic .circular.icon { margin-bottom: .5em; box-shadow: 0 0 0 1px rgb(255,255,255) inset;} 46 | 47 | #The-EST-Group .column:not(.page), #The-EST-Group .row { padding: 0;} 48 | @media only screen and (max-width: 767px) { 49 | #The-EST-Group .ui.stackable img { width: 100%;} 50 | #The-EST-Group .ui.stackable p { width: 100%;} 51 | } 52 | 53 | @media only screen and (min-width: 768px) { 54 | .swiper-container.main > .swiper-pagination { right: 20px;} 55 | .swiper-container.main > .swiper-pagination .swiper-pagination-bullet { width: 15px; height: 15px; border: solid 1px #000; background: none;} 56 | .swiper-container.main > .swiper-pagination .swiper-pagination-bullet-active { border-color: #28A9A7; background: #28A9A7;} 57 | } 58 | 59 | #head { position: fixed; z-index: 1000; left: 0; top: 0; right: 0; background: transparent;} 60 | #head .head { position: relative; z-index: 10; padding: 20px 0; line-height: 100%;} 61 | #head .logo { float: left; width: 41px; height: 41px; text-indent: -9999px; background: url(../img/logo.png) no-repeat; background-size: contain;} 62 | #head .nav { float: right; padding-right: 110px; line-height: 41px; white-space: nowrap;} 63 | #head .nav a { margin-left: 30px; color: #e3e3e3;} 64 | #head .nav a:hover { color: #fff;} 65 | #head.nf .nav a { color: #444;} 66 | #head.nf .nav a:hover { color: #000;} 67 | #head.nf .deco-a a:before { background-color: #444;} 68 | #head.nf .deco-a a:hover:before { background-color: #000;} 69 | #head.static { position: relative;} 70 | #head .language { position: absolute; z-index: 100; right: 0; top: 23px; width: 100px; height: 36px; color: #fff;} 71 | #head.nf .language { color: #444;} 72 | #head .language.ui.button { background: none;} 73 | #head .language .item { font-weight: 400;} 74 | #head .language .selected { background: none;} 75 | #head .language .selected:hover { background: rgba(0,0,0,.05);} 76 | 77 | #banner { height: 100%; background: url(../img/banner.jpg) right center no-repeat; background-size: cover;} 78 | #banner .page { height: 100%;} 79 | #banner .intro { position: absolute; left: 50%; top: 50%; min-width: 370px; text-align: center; transform: translate(-50%,-50%);} 80 | #banner .desc { margin-top: 40px;} 81 | #banner #i-wanna-say { float: left; width: 280px; height: 50px; padding: 0 20px; font-size: 16px; line-height: 50px; white-space: nowrap; text-align: left; background-color: #fff; cursor: default;} 82 | #banner .next { float: left; width: 50px; height: 50px; color: #666; background-color: #CACBCD;} 83 | #banner .next:hover { background-color: #B9B9BA;} 84 | #banner .next i { line-height: 50px;} 85 | #banner .page-btn { margin-top: 49px;} 86 | 87 | #services .column i { display: inline-block; width: 62%; padding-top:62%;} 88 | #services .app i { background: url(../img/icon-app.png) center no-repeat; background-size: contain;} 89 | #services .website i { background: url(../img/icon-website.png) center no-repeat; background-size: contain;} 90 | #services .server i { background: url(../img/icon-server.png) center no-repeat; background-size: contain;} 91 | #services .services { margin: 6% 0 3%;} 92 | #services .services p { margin-top: 9px; font-size: 16px;} 93 | #services .page-btn a { margin: 0 1em;} 94 | 95 | #projects h2 { padding-top: 4%;} 96 | #projects img { width: 63%;} 97 | #projects .projects { margin: 2% 0 3%;} 98 | #projects .projects p { width: 80%; margin-top: 9px; margin-left: auto; margin-right: auto; font-size: 16px;} 99 | #projects .projects p.desc { max-height:37px; overflow: hidden; margin-top: 7px; font-size: 13px; color: #666;} 100 | #projects .projects .column { margin-top: 3%; text-align: center;} 101 | #projects .projects img { border-radius: .3rem; box-shadow: 0 0 2px #ccc; cursor: zoom-in;} 102 | #projects .page-btn { margin-top: 30px;} 103 | 104 | #projects.projects { padding-bottom: 100px; background: #EBECED;} 105 | #projects.projects h2 { margin-top: 0;} 106 | #projects.projects .list { margin-top: 3%;} 107 | #projects.projects img { width: 100%; cursor: zoom-in; box-shadow: 0 0 1px #ccc;} 108 | #projects.projects strong { position: absolute; left: 0; max-width: 80px; font-weight: 100; color: #666; font-family: 'Lato', 'Lantinghei SC', 'Microsoft YaHei', Arial;} 109 | #projects.projects p { position: relative; margin-top: .7em; padding-left: 90px; line-height: 1.6;} 110 | #projects.projects .row { margin-top: 3em; padding: 2em;} 111 | #projects.projects .row:first-child { margin-top: .5em;} 112 | #projects.projects .row:last-child { border-bottom: none;} 113 | #projects.projects .name { margin-top: 0; font-size: 16px; font-weight: bold;} 114 | #projects.projects .name a { margin-right: 5px;} 115 | #projects.projects .name strong { font-size: 14px;} 116 | #projects.projects .ui.label { color: #a5673f; background: #EBECED;} 117 | #projects.projects em { font-style: normal; font-weight: normal; font-size: x-small; color: #777;} 118 | #projects.projects .eleven.column { padding-left: 5%;} 119 | 120 | #team .team { margin: 7% 0 3%;} 121 | #team .swiper-container { height: 400px;} 122 | #team .swiper-slide { width: 200px; height: 300px;} 123 | #team .avatar { width: 61.8%; height: 100%; margin-left: 19%; background-position: center 10px; background-size: 61.8%; background-repeat: no-repeat; background-color: #fff;} 124 | #team .caption { position: absolute; left: 0; bottom: 10px; width: 61.8%; margin-left: 19%;} 125 | #team .indication { position: absolute; left: 50%; bottom: 43px; margin-left: -15px; font-size: 24px; color: #999;} 126 | #team .pagenation { display: none; position: absolute; top: 150px; z-index: 9; width: 44px; height: 44px; font-size: 48px; line-height: 44px; color: #777; cursor: pointer; text-shadow: 1px 1px 2px #fff;} 127 | #team .pagenation:hover { color: #222;} 128 | #team .pagenation.prev { left: 0;} 129 | #team .pagenation.next { right: 0;} 130 | #team p { margin-top: 5px; font-size: 16px;} 131 | #team p.desc { font-size: 13px; line-height: 1.5; color: #666;} 132 | #team p.github { font-size: 21px;} 133 | #team .swiper-slide { background: #EBECED;} 134 | 135 | #contact .contact { margin-top: 7%;} 136 | #contact .contact p { margin-top: 1em; font-size: 16px; word-break: break-all;} 137 | #contact .contact .icon { position: relative; line-height: 2em !important; color: #777; box-shadow: 0 0 0 1px rgba(0,0,0,.1) inset;} 138 | #contact .contact .icon:hover { box-shadow: 0 0 0 1px rgba(0,0,0,.6) inset; color: rgba(0,0,0,.6);} 139 | #contact .contact .email .icon { animation-direction: alternate-reverse;} 140 | #contact .contact .ljf .icon, #contact .contact .githubdaily .icon { transition: box-shadow .2s ease-out;} 141 | #contact .contact .ljf .icon span { position: absolute; right: .1em; bottom: .1em; width: 30%; height: 30%; border-radius: 50%; background: url(../img/logo-ljf.jpg) center no-repeat; background-size: contain; transition: transform 1s; transform-origin: -.5em -.5em;} 142 | #contact .contact .githubdaily .icon span { position: absolute; right: 0; bottom: 0; width: 30%; height: 30%; border-radius: 50%; background: url(../img/logo-githubdaily.png) center no-repeat; background-size: contain; transition: transform 1s; transform-origin: -.5em -.5em;} 143 | #contact .contact .ljf .icon:hover span, #contact .contact .githubdaily .icon:hover span { transform: rotate(360deg);} 144 | 145 | #copy { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; padding-top: 17px; font-size: 13px; text-align: center; color: #e3e3e3; background: #222; box-sizing: content-box;} 146 | #copy .heart { font-size: 16px; color: #F3755F;} 147 | #copy .heart { animation-duration: 1s;} 148 | #copy .heart.quick { animation-duration: .4s;} 149 | #copy.copy { position: static;} 150 | #copy.copy.fixed { position: fixed;} 151 | 152 | .swiper-container.main { height: 100%;} 153 | .swiper-container.main > .swiper-wrapper > .swiper-slide:nth-of-type(2n) { background: #EBECED;} 154 | .swiper-slide { overflow: hidden; background: #fff;} 155 | 156 | #img-viewer img { max-width: 100%;} 157 | #img-viewer .image.content { padding-bottom: 2.5rem;} 158 | #img-viewer .image.content .image { margin-left: auto; margin-right: auto;} 159 | #img-viewer .title { position: absolute; left: 0; bottom: .8rem; width: 100%; text-align: center;} 160 | 161 | #backToTop { display: none; position: fixed; right: 40px; bottom: 100px; width: 44px; height: 44px; line-height: 28px; text-align: center; color: #777; border: solid 1px #777; border-radius: 50%; background: transparent; cursor: pointer; transition: all .2s ease-out;} 162 | #backToTop:hover { color: #222; border-color: #222;} 163 | #backToTop i { margin-right: 0; vertical-align: middle;} 164 | #backToTop i.fadeInUp { position: relative; top: -5px;} 165 | 166 | #tickets { padding-bottom: 100px; background: #EBECED;} 167 | #tickets h2 { margin-top: 0; padding-top: 4%;} 168 | #tickets .ui.segment { padding: 2em;} 169 | #tickets .tickets { margin-top: 3%;} 170 | #tickets input:focus, #tickets textarea:focus { border-color: #28A9A7;} 171 | #tickets .btns { margin-top: 3em; text-align: center;} 172 | #tickets .btns button { margin-left: 1em; margin-right: 1em;} 173 | #tickets .desc { margin-bottom: .8em; color: #777; font-size: 12px;} 174 | #tickets .field > label { margin-bottom: .6em; font-size: 1em; font-weight: normal;} 175 | #tickets .field { margin-bottom: 3em;} 176 | #tickets textarea { height: 6em; min-height: auto; line-height: 1.5;} 177 | #tickets input, #tickets textarea { font-size: .9em; font-family: 'MaisonNeueWEB-Light', 'Lantinghei SC', 'Open Sans', Arial;} 178 | #tickets .prompt.label { font-weight: normal;} 179 | #tickets .guide { margin-bottom: -5px; font-size: 12px; color: #777;} 180 | #tickets .guide span { color: #db2828;} 181 | #tickets-msg { width: 300px; margin-left: -150px;} 182 | #tickets-msg .header { padding-top: 2em; padding-bottom: 2em;} 183 | #tickets-msg .checkmark { color: #A3C293;} 184 | #tickets-msg .remove { color: #E0B4B4;} 185 | 186 | #nav-toggle { display: none;} 187 | 188 | @media only screen and (max-width: 767px) { 189 | h1 { font-size: 40px;} 190 | h2 { font-size: 30px;} 191 | #head .logo { margin-left: 10px;} 192 | #banner .intro { width: 100%; min-width: auto; font-size: 0;} 193 | #banner #i-wanna-say { display: inline-block; float: none; width: 236px; height: 44px; padding: 0 10px; font-size: 13px; line-height: 44px;} 194 | #banner .next { display: inline-block; float: none; width: 44px; height: 44px; font-size: 12px; line-height: 44px; vertical-align: top;} 195 | #nav-toggle { position: absolute; z-index: 9; display: block; right: 10px; top: 22px; width: 25px; height: 30px;} 196 | #nav-toggle.active { position: fixed;} 197 | #nav-toggle span { position: absolute; width: 100%; height: 2px; margin-top: 7px; background: #fff; transition: all .2s; transform-origin: right center;} 198 | #nav-toggle span:nth-child(2) { top: 9px;} 199 | #nav-toggle span:last-child { top: 18px;} 200 | #nav-toggle.active span:first-child { transform: rotate(-45deg);} 201 | #nav-toggle.active span:nth-child(2) { height: 0;} 202 | #nav-toggle.active span:last-child { transform: rotate(45deg);} 203 | #head .nav { position: fixed; right: 0; top: 0; bottom: 0; width: 61.8%; padding-top: 60px; background: #222; transition: transform .5s; transform: translatex(100%); white-space: normal;} 204 | #head .nav.active { transform: translatex(0);} 205 | #head .nav a { display: inline-block; width: 4em; white-space: nowrap;} 206 | #head .nav a:before { transform-origin: 0 0;} 207 | #head.nf #nav-toggle span { background: #444;} 208 | #head.nf #nav-toggle.active span { background: #fff;} 209 | #head.nf .nav a { color: #e3e3e3;} 210 | #head.nf .nav a:hover { color: #fff;} 211 | #head.nf .deco-a a:before { background-color: #e3e3e3;} 212 | #head.nf .deco-a a:hover:before { background-color: #fff;} 213 | .swiper-container.main > .swiper-pagination { top: auto; bottom: 30px;} 214 | #banner { background-position: center;} 215 | #team .swiper-container { height: 400px;} 216 | #team .swiper-slide { height: 300px;} 217 | #contact .contact .icon { font-size: 2em;} 218 | #backToTop { right: 20px; bottom: 81px;} 219 | #head .language { right: 30px;} 220 | #services .page-btn a { margin-left: .5em; margin-right: .5em; margin-bottom: .5em;} 221 | } -------------------------------------------------------------------------------- /src/fonts/Lato.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/fonts/Lato.woff -------------------------------------------------------------------------------- /src/fonts/MaisonNeueWEB-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/fonts/MaisonNeueWEB-Light.woff -------------------------------------------------------------------------------- /src/fonts/icons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/fonts/icons.woff -------------------------------------------------------------------------------- /src/img/avatar/lgl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/avatar/lgl.png -------------------------------------------------------------------------------- /src/img/avatar/ljf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/avatar/ljf.png -------------------------------------------------------------------------------- /src/img/avatar/pym.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/avatar/pym.png -------------------------------------------------------------------------------- /src/img/avatar/zh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/avatar/zh.png -------------------------------------------------------------------------------- /src/img/avatar/zjh.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/avatar/zjh.png -------------------------------------------------------------------------------- /src/img/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/banner.jpg -------------------------------------------------------------------------------- /src/img/icon-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/icon-app.png -------------------------------------------------------------------------------- /src/img/icon-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/icon-email.png -------------------------------------------------------------------------------- /src/img/icon-server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/icon-server.png -------------------------------------------------------------------------------- /src/img/icon-website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/icon-website.png -------------------------------------------------------------------------------- /src/img/logo-githubdaily.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/logo-githubdaily.png -------------------------------------------------------------------------------- /src/img/logo-ljf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/logo-ljf.jpg -------------------------------------------------------------------------------- /src/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/logo.png -------------------------------------------------------------------------------- /src/img/temp/s1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/temp/s1.jpg -------------------------------------------------------------------------------- /src/img/temp/s2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/temp/s2.jpg -------------------------------------------------------------------------------- /src/img/temp/s3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RyunPu/the-est-group-website/2b8d81c9d87a7217fc599da5de653988b709b673/src/img/temp/s3.jpg -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The EST Group - We design and build: the Future, Baby! 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |
21 | 22 | 23 |
24 | Home 25 | Services 26 | Projects 27 | Team 28 | Contact 29 |
30 |
31 | 39 |
40 |
41 | 42 |
43 |
44 | 58 | 59 |
60 |
61 |
62 |

Services

63 |
64 | 65 |
66 |
67 | 68 |

App Development

69 |
70 |
71 | 72 |

Website Development

73 |
74 |
75 | 76 |

Server Development

77 |
78 |
79 |
80 | 81 |
82 |
83 | Projects 84 | Hire Us 85 |
86 |
87 |
88 | 89 |
90 |
91 |
92 |

Projects

93 |
94 |
95 | 96 |
97 |
98 |
99 | 100 |

TianYinZaiXian

101 |

Web, Windows, Android, iOS

102 |
103 |
104 | 105 |

PHPHub

106 |

Web, Chrome App, iOS, Android

107 |
108 |
109 | 110 |

OralMaster

111 |

API, iOS, Android, IM

112 |
113 |
114 |
115 | 116 |
117 |
118 | More... 119 |
120 |
121 |
122 | 123 |
124 |
125 |
126 |

Team

127 |
128 | 129 |
130 |
131 |
132 |
133 |
134 |
135 |

Aufree

136 |

iOS Engineer

137 |

138 |
139 |
140 |
141 |
142 |
143 |

Summer

144 |

Product Designer

145 |

146 |
147 |
148 |
149 |
150 |
151 |

Monkey

152 |

Full Device Engineer

153 |

154 |
155 |
156 |
157 |
158 |
159 |

Kelvin

160 |

Android Engineer

161 |

162 |
163 |
164 |
165 |
166 |
167 |

Moamaoa

168 |

Front End Engineer

169 |

170 |
171 |
172 |
173 | 174 |
175 |
176 | 177 | 178 |
179 |
180 |
181 |
182 | 183 |
184 |
185 |
186 |

Contact

187 |
188 | 189 |
190 |
191 | 192 |

李锦发

193 |
194 | 198 |
199 | 200 |

GitHubDaily

201 |
202 |
203 |
204 | 205 |
206 | Made with by The EST Group 207 |
208 |
209 |
210 | 211 |
212 |
213 | 214 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 240 | 241 | 242 | 243 | -------------------------------------------------------------------------------- /src/js/main.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | var EST = { 3 | init: function() { 4 | if ($('.swiper-container').length) this.swipe(); // init swiper 5 | if ($('#i-wanna-say').length) this.play(); // init theater 6 | if ($('#tickets').length) this.bindForm(); // init hire us form 7 | this.toggle(); // init top menu 8 | this.show(); // init img modal 9 | this.animate(); // hover animation 10 | //this.beat(); // heart beat 11 | this.backToTop(); 12 | this.fixedFooter(); 13 | this.changeLanguage(); 14 | }, 15 | swipe: function() { 16 | var self = this; 17 | var swiper; 18 | var moving = false; 19 | var initialized = false; 20 | var href = location.href; 21 | var anchor = href.split('#'); 22 | var index; 23 | var mobile = /iphone|ipod|android|windows phone/i.test(navigator.userAgent); 24 | 25 | if (anchor.length > 1) index = self.getMenuIndex(anchor[1]); 26 | if (mobile) $('.swiper-no-swiping').removeClass('swiper-no-swiping'); 27 | 28 | self.swiper = new Swiper('.swiper-container.main', { 29 | initialSlide: index ? index : 0, 30 | pagination: '.main > .swiper-pagination', 31 | paginationClickable: true, 32 | direction: 'vertical', 33 | speed: 600, 34 | onInit: function() { 35 | initialized = true; 36 | }, 37 | onSlideChangeStart: function(obj) { 38 | var head = $('#head'); 39 | 40 | if (obj.activeIndex == 0) { 41 | head.removeClass('nf'); 42 | } else { 43 | head.addClass('nf'); 44 | } 45 | 46 | moving = true; 47 | }, 48 | onSlideChangeEnd: function() { 49 | moving = false; 50 | } 51 | }); 52 | 53 | $('.swiper-container.main').on('mousewheel', function(event) { 54 | if (initialized && !moving && Math.abs(event.deltaY) > 50) { 55 | if (event.deltaY < 0) { 56 | self.swiper.slideNext(); 57 | } else { 58 | self.swiper.slidePrev(); 59 | } 60 | } 61 | }); 62 | 63 | new Swiper('.team .swiper-container', { 64 | pagination: '.team .swiper-pagination', 65 | effect: 'coverflow', 66 | grabCursor: true, 67 | centeredSlides: true, 68 | slidesPerView: mobile ? 1 : 3, 69 | autoplay: 4000, 70 | loop: true, 71 | autoplayDisableOnInteraction: false, 72 | paginationClickable: true, 73 | nextButton: '.next', 74 | prevButton: '.prev', 75 | simulateTouch: true, 76 | noSwipingClass: 'nsp', 77 | coverflow: { 78 | rotate: 50, 79 | stretch: 0, 80 | depth: 100, 81 | modifier: 1, 82 | slideShadows: false 83 | } 84 | }); 85 | 86 | $('[data-swiper-class]').on('click', function() { 87 | self.swiper.slideTo(self.getMenuIndex($(this).data('swiper-class'))); 88 | }); 89 | }, 90 | getMenuIndex: function(anchor) { 91 | var self = this; 92 | var index; 93 | 94 | switch (anchor) { 95 | case 'home': 96 | index = 0; 97 | break; 98 | case 'services': 99 | index = 1; 100 | break; 101 | case 'projects': 102 | index = 2; 103 | break; 104 | case 'team': 105 | index = 3; 106 | break; 107 | case 'contact': 108 | index = 4; 109 | break; 110 | } 111 | 112 | return index; 113 | }, 114 | play: function() { 115 | var theater = new TheaterJS(); 116 | 117 | theater.describe('iWannaSay', .8, '#i-wanna-say'); 118 | theater 119 | .write('iWannaSay:We design and build: ', 800, 'Web Application', 200) 120 | .write(1000) 121 | .write(-15) 122 | .write('Mobile App') 123 | .write(1000) 124 | .write(-10) 125 | .write('Art ;-)') 126 | .write(1000) 127 | .write(-7) 128 | .write('Amazing Product') 129 | .write(1000) 130 | .write(-15) 131 | .write('the Future ;-)', 2000); 132 | 133 | $('#banner .next').on('click', function() { 134 | theater.play(true); 135 | }); 136 | }, 137 | toggle: function() { 138 | $('#nav-toggle').on('click', function() { 139 | var that = $(this); 140 | var active = that.is('.active'); 141 | var nav = that.next('.nav'); 142 | 143 | if (active) { 144 | that.removeClass('active'); 145 | nav.removeClass('active'); 146 | } else { 147 | that.addClass('active'); 148 | nav.addClass('active'); 149 | } 150 | }); 151 | 152 | $('#head .nav a').on('click', function() { 153 | if ($(this).parent('.nav').is('.active')) $('#nav-toggle').trigger('click'); 154 | }); 155 | }, 156 | show: function() { 157 | $('[data-modal-img]').on('click', function() { 158 | var imgViewer = $('#img-viewer'); 159 | var src = $(this).data('src') ? $(this).data('src') : $(this).attr('src'); 160 | var title = $(this).next('.title').html(); 161 | 162 | title = title ? title : $(this).parent('.column').next('.column').find('.name span').html(); 163 | 164 | imgViewer.find('img').attr('src', src); 165 | imgViewer.find('.title').html(title); 166 | 167 | imgViewer 168 | .modal('setting', 'transition', 'scale') 169 | .modal('show'); 170 | }); 171 | }, 172 | animate: function() { 173 | $('#contact .email .icon').hover( 174 | function() { 175 | $(this).addClass('tada'); 176 | }, 177 | function() { 178 | $(this).removeClass('tada'); 179 | } 180 | ); 181 | }, 182 | beat: function() { 183 | var quickMode = false; 184 | var heart = $('#copy .heart'); 185 | 186 | setInterval(function(){ 187 | if (quickMode) { 188 | heart.removeClass('quick'); 189 | quickMode = false; 190 | } else { 191 | heart.addClass('quick'); 192 | quickMode = true; 193 | } 194 | }, 1000); 195 | }, 196 | backToTop: function() { 197 | $(window).on('scroll', function() { 198 | if ($(this).scrollTop() > 100) { 199 | $('#backToTop').fadeIn(); 200 | } else { 201 | $('#backToTop').fadeOut(); 202 | } 203 | }); 204 | 205 | $('#backToTop').on('click', function(e) { 206 | $('html, body').animate({ 207 | scrollTop: 0 208 | }, 300); 209 | 210 | e.preventDefault(); 211 | }) 212 | .hover( 213 | function() { 214 | $(this).find('i').addClass('fadeInUp'); 215 | }, 216 | function() { 217 | $(this).find('i').removeClass('fadeInUp'); 218 | } 219 | ); 220 | }, 221 | fixedFooter: function() { 222 | var footer = $('#copy'); 223 | var top = footer.offset().top; 224 | var WH = $(window).height(); 225 | 226 | if (top <= WH) footer.addClass('fixed'); 227 | }, 228 | bindForm: function() { 229 | $('#tickets form') 230 | .form({ 231 | on: 'submit', 232 | inline: true, 233 | fields: { 234 | email: { 235 | identifier: 'email', 236 | rules: [ 237 | { 238 | type: 'empty', 239 | prompt: $('[data-validate="email"]').data('msg-empty') 240 | }, 241 | { 242 | type: 'email', 243 | prompt: $('[data-validate="email"]').data('msg-invalid') 244 | }, 245 | ] 246 | }, 247 | ot: { 248 | identifier: 'other-contact', 249 | rules: [{ 250 | type: 'empty', 251 | prompt: $('[data-validate="other-contact"]').data('msg-empty') 252 | }] 253 | }, 254 | si: { 255 | identifier: 'some-info', 256 | rules: [{ 257 | type: 'empty', 258 | prompt: $('[data-validate="some-info"]').data('msg-empty') 259 | }] 260 | }, 261 | pi: { 262 | identifier: 'project-info', 263 | rules: [{ 264 | type: 'empty', 265 | prompt: $('[data-validate="project-info"]').data('msg-empty') 266 | }] 267 | }, 268 | party: { 269 | identifier: 'party', 270 | rules: [{ 271 | type: 'empty', 272 | prompt: $('[data-validate="party"]').data('msg-empty') 273 | }] 274 | }, 275 | role: { 276 | identifier: 'role', 277 | rules: [{ 278 | type: 'empty', 279 | prompt: $('[data-validate="role"]').data('msg-empty') 280 | }] 281 | }, 282 | invoice: { 283 | identifier: 'invoice', 284 | rules: [{ 285 | type: 'empty', 286 | prompt: $('[data-validate="invoice"]').data('msg-empty') 287 | }] 288 | }, 289 | demand: { 290 | identifier: 'demand', 291 | rules: [{ 292 | type: 'empty', 293 | prompt: $('[data-validate="demand"]').data('msg-empty') 294 | }] 295 | }, 296 | platform: { 297 | identifier: 'platform', 298 | rules: [{ 299 | type: 'empty', 300 | prompt: $('[data-validate="platform"]').data('msg-empty') 301 | }] 302 | }, 303 | stage: { 304 | identifier: 'stage', 305 | rules: [{ 306 | type: 'empty', 307 | prompt: $('[data-validate="stage"]').data('msg-empty') 308 | }] 309 | }, 310 | design: { 311 | identifier: 'design', 312 | rules: [{ 313 | type: 'empty', 314 | prompt: $('[data-validate="design"]').data('msg-empty') 315 | }] 316 | }, 317 | operation: { 318 | identifier: 'operation', 319 | rules: [{ 320 | type: 'empty', 321 | prompt: $('[data-validate="operation"]').data('msg-empty') 322 | }] 323 | }, 324 | period: { 325 | identifier: 'period', 326 | rules: [{ 327 | type: 'empty', 328 | prompt: $('[data-validate="period"]').data('msg-empty') 329 | }] 330 | }, 331 | required: { 332 | identifier: 'required', 333 | rules: [{ 334 | type: 'empty', 335 | prompt: $('[data-validate="required"]').data('msg-empty') 336 | }] 337 | } 338 | } 339 | }) 340 | .on('reset', function() { 341 | $('#file-name').html(''); 342 | $(this).form('clear'); 343 | }) 344 | .sisyphus(); 345 | 346 | $('#file').on('change', function(e) { 347 | $('#file-name').html(this.value); 348 | }); 349 | 350 | if (typeof Global === 'object' && Global.ticketsMsg) { 351 | if (Global.ticketsMsg === 'success') { 352 | $('#tickets-msg').find('.circular').removeClass('remove').addClass('checkmark'); 353 | $('#tickets-msg').find('#tickets-msg-span').html($('#tickets-msg-span').data('success-msg')); 354 | } else if (Global.ticketsMsg === 'error') { 355 | $('#tickets-msg').find('.circular').removeClass('checkmark').addClass('remove'); 356 | $('#tickets-msg').find('#tickets-msg-span').html($('#tickets-msg-span').data('error-msg')); 357 | } 358 | 359 | $('#tickets-msg') 360 | .modal('setting', 'transition', 'scale') 361 | .modal('show'); 362 | } 363 | }, 364 | changeLanguage: function() { 365 | var self = this; 366 | var locale = self.getCookie('locale'); 367 | 368 | switch (locale) { 369 | case 'zh_cn': 370 | locale = '简体中文'; 371 | break; 372 | case 'en': 373 | locale = 'English'; 374 | break; 375 | default: 376 | locale = '简体中文'; 377 | break; 378 | } 379 | 380 | $('#language').dropdown({ 381 | onChange: function(text, value, $selectedItem) { 382 | var language; 383 | 384 | switch (value) { 385 | case '简体中文': 386 | language = 'zh_cn'; 387 | break; 388 | case 'English': 389 | language = 'en'; 390 | break; 391 | } 392 | 393 | self.setCookie('locale', language, 365); 394 | location.reload(); 395 | } 396 | }) 397 | .dropdown('set text', locale); 398 | }, 399 | getCookie: function(cname) { 400 | var name = cname + "=", 401 | ca = document.cookie.split(';'), 402 | c; 403 | 404 | for(var i = 0; i < ca.length; i++) { 405 | c = ca[i]; 406 | while (c.charAt(0) == ' ') c = c.substring(1); 407 | if (c.indexOf(name) == 0) return c.substring(name.length, c.length); 408 | } 409 | 410 | return ''; 411 | }, 412 | setCookie: function(cname, cvalue, exdays, domain) { 413 | var d = new Date(), 414 | expires, 415 | domain; 416 | 417 | d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); 418 | expires = "expires=" + d.toUTCString(); 419 | domain = domain ? domain : location.host; 420 | document.cookie = cname + "=" + cvalue + "; " + expires + ';domain=' + domain + ';path=/'; 421 | } 422 | }; 423 | 424 | EST.init(); 425 | }); -------------------------------------------------------------------------------- /src/js/sisyphus.min.js: -------------------------------------------------------------------------------- 1 | !function(a){a.fn.sisyphus=function(b){var c=a.map(this,function(b){return a(b).attr("id")+a(b).attr("name")}).join(),d=Sisyphus.getInstance(c);return d.protect(this,b),d};var b={};b.isAvailable=function(){if("object"==typeof a.jStorage)return!0;try{return localStorage.getItem}catch(b){return!1}},b.set=function(b,c){if("object"==typeof a.jStorage)a.jStorage.set(b,c+"");else try{localStorage.setItem(b,c+"")}catch(d){}},b.get=function(b){if("object"==typeof a.jStorage){var c=a.jStorage.get(b);return c?c.toString():c}return localStorage.getItem(b)},b.remove=function(b){"object"==typeof a.jStorage?a.jStorage.deleteKey(b):localStorage.removeItem(b)},Sisyphus=function(){function d(){return{setInstanceIdentifier:function(a){this.identifier=a},getInstanceIdentifier:function(){return this.identifier},setInitialOptions:function(c){var d={excludeFields:[],customKeySuffix:"",locationBased:!1,timeout:0,autoRelease:!0,onSave:function(){},onBeforeRestore:function(){},onRestore:function(){},onRelease:function(){}};this.options=this.options||a.extend(d,c),this.browserStorage=b},setOptions:function(b){this.options=this.options||this.setInitialOptions(b),this.options=a.extend(this.options,b)},protect:function(b,d){this.setOptions(d),b=b||{};var e=this;if(this.targets=this.targets||[],this.href=location.hostname+location.pathname+location.search+location.hash,this.targets=a.merge(this.targets,b),this.targets=a.unique(this.targets),this.targets=a(this.targets),!this.browserStorage.isAvailable())return!1;var f=e.options.onBeforeRestore.call(e);if((void 0===f||f)&&e.restoreAllData(),this.options.autoRelease&&e.bindReleaseData(),!c.started[this.getInstanceIdentifier()])if(e.isCKEditorPresent())var g=setInterval(function(){CKEDITOR.isLoaded&&(clearInterval(g),e.bindSaveData(),c.started[e.getInstanceIdentifier()]=!0)},100);else e.bindSaveData(),c.started[e.getInstanceIdentifier()]=!0},isCKEditorPresent:function(){return this.isCKEditorExists()?(CKEDITOR.isLoaded=!1,CKEDITOR.on("instanceReady",function(){CKEDITOR.isLoaded=!0}),!0):!1},isCKEditorExists:function(){return"undefined"!=typeof CKEDITOR},bindSaveData:function(){var b=this;b.options.timeout&&b.saveDataByTimeout(),b.targets.each(function(){var c=a(this).attr("id")+a(this).attr("name"),d=a(this).find(":input").not(":submit").not(":reset").not(":button").not(":file").not(":password");d.each(function(){if(-1!==a.inArray(this,b.options.excludeFields))return!0;var d=a(this),e=(b.options.locationBased?b.href:"")+c+d.attr("name")+b.options.customKeySuffix;(d.is(":text")||d.is("textarea"))&&(b.options.timeout||b.bindSaveDataImmediately(d,e)),b.bindSaveDataOnChange(d,e)})})},saveAllData:function(){var b=this;b.targets.each(function(){var c=a(this).attr("id")+a(this).attr("name"),d=a(this).find(":input").not(":submit").not(":reset").not(":button").not(":file").not(":password");d.each(function(){var d=a(this);if(-1!==a.inArray(this,b.options.excludeFields)||void 0===d.attr("name"))return!0;var e=(b.options.locationBased?b.href:"")+c+d.attr("name")+b.options.customKeySuffix,f=d.val();if(d.is(":checkbox"))-1!==d.attr("name").indexOf("[")?(f=[],a("[name='"+d.attr("name")+"']:checked").each(function(){f.push(a(this).val())})):f=d.is(":checked"),b.saveToBrowserStorage(e,f,!1);else if(d.is(":radio"))d.is(":checked")&&(f=d.val(),b.saveToBrowserStorage(e,f,!1));else if(b.isCKEditorExists()){var g;(g=CKEDITOR.instances[d.attr("name")]||CKEDITOR.instances[d.attr("id")])?(g.updateElement(),b.saveToBrowserStorage(e,d.val(),!1)):b.saveToBrowserStorage(e,f,!1)}else b.saveToBrowserStorage(e,f,!1)})}),b.options.onSave.call(b)},restoreAllData:function(){var b=this,c=!1;b.targets.each(function(){var d=a(this),e=a(this).attr("id")+a(this).attr("name"),f=d.find(":input").not(":submit").not(":reset").not(":button").not(":file").not(":password");f.each(function(){if(-1!==a.inArray(this,b.options.excludeFields))return!0;var d=a(this),f=(b.options.locationBased?b.href:"")+e+d.attr("name")+b.options.customKeySuffix,g=b.browserStorage.get(f);null!==g&&(b.restoreFieldsData(d,g),c=!0)})}),c&&b.options.onRestore.call(b)},restoreFieldsData:function(a,b){return void 0===a.attr("name")?!1:(a.is(":checkbox")&&"false"!==b&&-1===a.attr("name").indexOf("[")?a.attr("checked","checked"):a.is(":checkbox")&&"false"===b&&-1===a.attr("name").indexOf("[")?a.removeAttr("checked"):a.is(":radio")?a.val()===b&&a.attr("checked","checked"):-1===a.attr("name").indexOf("[")?a.val(b):(b=b.split(","),a.val(b)),void 0)},bindSaveDataImmediately:function(a,b){var c=this;if("onpropertychange"in a?a.get(0).onpropertychange=function(){c.saveToBrowserStorage(b,a.val())}:a.get(0).oninput=function(){c.saveToBrowserStorage(b,a.val())},this.isCKEditorExists()){var d;(d=CKEDITOR.instances[a.attr("name")]||CKEDITOR.instances[a.attr("id")])&&d.document.on("keyup",function(){d.updateElement(),c.saveToBrowserStorage(b,a.val())})}},saveToBrowserStorage:function(a,b,c){c=void 0===c?!0:c,this.browserStorage.set(a,b),c&&""!==b&&this.options.onSave.call(this)},bindSaveDataOnChange:function(a){var c=this;a.change(function(){c.saveAllData()})},saveDataByTimeout:function(){var a=this,b=a.targets;setTimeout(function(){function c(){a.saveAllData(),setTimeout(c,1e3*a.options.timeout)}return c}(b),1e3*a.options.timeout)},bindReleaseData:function(){var b=this;b.targets.each(function(){var d=a(this),e=d.find(":input").not(":submit").not(":reset").not(":button").not(":file").not(":password"),f=d.attr("id")+d.attr("name");a(this).bind("submit reset",function(){b.releaseData(f,e)})})},manuallyReleaseData:function(){var b=this;b.targets.each(function(){var d=a(this),e=d.find(":input").not(":submit").not(":reset").not(":button").not(":file").not(":password"),f=d.attr("id")+d.attr("name");b.releaseData(f,e)})},releaseData:function(b,c){var d=!1,e=this;c.each(function(){if(-1!==a.inArray(this,e.options.excludeFields))return!0;var c=a(this),f=(e.options.locationBased?e.href:"")+b+c.attr("name")+e.options.customKeySuffix;e.browserStorage.remove(f),d=!0}),d&&e.options.onRelease.call(e)}}}var c={instantiated:[],started:[]};return{getInstance:function(a){return c.instantiated[a]||(c.instantiated[a]=d(),c.instantiated[a].setInstanceIdentifier(a),c.instantiated[a].setInitialOptions()),a?c.instantiated[a]:c.instantiated[a]},free:function(){return c={},null},version:"1.1.103"}}()}(jQuery); --------------------------------------------------------------------------------