diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..4b4cb0e --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml new file mode 100644 index 0000000..3b31283 --- /dev/null +++ b/.idea/inspectionProfiles/profiles_settings.xml @@ -0,0 +1,7 @@ + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 8907315..f1aa99f 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -3,11 +3,6 @@ - - - - - @@ -29,11 +24,23 @@ - - + + + + + + + + + + + + + + - - + + @@ -42,48 +49,51 @@ - - - + + + + + + - - + + - - + + - - + + - - + + - - + + - + - - + + - - + + @@ -97,13 +107,25 @@ @@ -122,10 +144,10 @@ - @@ -152,6 +174,7 @@ + @@ -188,6 +211,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + - + + + + @@ -279,10 +354,6 @@ - - + + + + + + + + + + + + + + + + + + project + + + + + + + + + + + + + + + @@ -361,36 +463,44 @@ - + + + + + + + + + - - + - + + + - - + - @@ -411,43 +521,145 @@ - + - - - + + - + - - + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + - - + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - @@ -455,7 +667,9 @@ - + + + @@ -463,7 +677,6 @@ - @@ -478,7 +691,6 @@ - @@ -489,41 +701,84 @@ - + - - - + + - + - - - + + - + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + - - + + - + - + @@ -531,8 +786,61 @@ - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/Http/Controllers/Auth/AuthController.php b/app/Http/Controllers/Auth/AuthController.php index 907516e..3a73fa3 100644 --- a/app/Http/Controllers/Auth/AuthController.php +++ b/app/Http/Controllers/Auth/AuthController.php @@ -48,10 +48,10 @@ public function __construct() public function postLogin(){ $name = $_GET['username']; $password = $_GET['password']; - //$remember = $_GET['remember']; + $remember = $_GET['remember']; $data = array('name'=>$name,'password'=>$password); - if (\Auth::attempt($data)){ + if (\Auth::attempt($data,$remember)){ $privilege = \DB::table('users') ->where('name', '=',$name) ->pluck('privilege'); diff --git a/app/Http/routes.php b/app/Http/routes.php index f3466c9..c383ca0 100644 --- a/app/Http/routes.php +++ b/app/Http/routes.php @@ -10,50 +10,73 @@ | and give it the controller to call when that URI is requested. | */ +//Route::group(['middleware'=>'auth'], function(){//中间件,拦截,用于身份验证 -Route::get('/', function () { - return view('login'); -}); + Route::get('/', function () { + return view('index'); + }); -Route::get('/test', function () { - return view('test'); -}); + Route::get('/test', function () { + return view('test'); + }); + + Route::get('/register', function () { + return view('auth.register'); + }); + + Route::get('/home', function () { + return view('home'); + }); + + /* + * 数据库方面的操作 + */ + + //注册用户 + Route::get('/db/addUser', function() { + $name=$_GET['username']; + $password=$_GET['password']; + $privilege='user'; + $id = DB::table('users') + ->insertGetId( + array( + 'name' => $name, + 'password' => Hash::make($password), + 'privilege' => $privilege + ) + ); + return $id; + }); -/* - * 数据库方面的操作 - */ -//注册用户 -Route::get('/db/addUser', function() { - $name=$_GET['username']; - $email=$_GET['email']; - $privilege=$_GET['privilege']; - $password=$_GET['password']; - $id = DB::table('users') - ->insertGetId( + //查看是否有用户存在 + Route::get('/db/checkUser', function() { + $name = $_GET['username']; + $result = DB::table('users')->where('name','=',$name)->first(); + if ($result != NULL){ + return 0; + }else return 1; + }); + + + //登录验证密码 + Route::get('/db/checkPwd', function() { + $name=$_SESSION['editPwdUserName']; + $inputPwd = $_GET['inputPwd']; + + if (\Auth::validate( array( - 'name' => $name, - 'email' => $email, - 'privilege' => $privilege, - 'password' => Hash::make($password) - ) - ); -}); -//登录验证密码 -Route::get('/db/checkPwd', function() { - $name=$_SESSION['editPwdUserName']; - $inputPwd = $_GET['inputPwd']; - - if (\Auth::validate( - array( - 'name'=>$name, - 'password'=>$inputPwd))){ - return 1;//登录成功 - }else{ - return 0;//登录失败 - } -}); + 'name'=>$name, + 'password'=>$inputPwd))){ + return 1;//登录成功 + }else{ + return 0;//登录失败 + } + }); + +//}); + /* * 身份验证方面的操作 diff --git a/database/migrations/2014_10_12_000000_create_users_table.php b/database/migrations/2014_10_12_000000_create_users_table.php index 17ec4ae..39c2850 100644 --- a/database/migrations/2014_10_12_000000_create_users_table.php +++ b/database/migrations/2014_10_12_000000_create_users_table.php @@ -14,9 +14,9 @@ public function up() { Schema::create('users', function (Blueprint $table) { $table->increments('id'); - $table->string('name'); + $table->string('name')->unique(); $table->string('privilege'); - $table->string('email')->unique(); + $table->string('email'); $table->string('password'); $table->rememberToken(); $table->timestamps(); @@ -53,6 +53,12 @@ public function up() 'privilege' => 'user', 'email' => 'gyf@163.com', 'password' => Hash::make('123') + ), + array( + 'name' => 'hxt', + 'privilege' => 'user', + 'email' => 'hxt@126.com', + 'password' => Hash::make('123') ) ) ); diff --git a/public/css/auth.css b/public/css/auth.css new file mode 100644 index 0000000..dc7bda4 --- /dev/null +++ b/public/css/auth.css @@ -0,0 +1,267 @@ + +/* reset */ +html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} +article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} +ol,ul{list-style:none;margin:0px;padding:0px;} +blockquote,q{quotes:none;} +blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} +table{border-collapse:collapse;border-spacing:0;} +/* start editing from here */ +a{text-decoration:none;} +.txt-rt{text-align:right;}/* text align right */ +.txt-lt{text-align:left;}/* text align left */ +.txt-center{text-align:center;}/* text align center */ +.float-rt{float:right;}/* float right */ +.float-lt{float:left;}/* float left */ +.clear{clear:both;}/* clear float */ +.pos-relative{position:relative;}/* Position Relative */ +.pos-absolute{position:absolute;}/* Position Absolute */ +.vertical-base{ vertical-align:baseline;}/* vertical align baseline */ +.vertical-top{ vertical-align:top;}/* vertical align top */ +nav.vertical ul li{ display:block;}/* vertical menu */ +nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ +img{max-width:100%;} +body{ + background: url(../images/bg1.jpg) no-repeat 0px 0px; + font-family: 'Open Sans', sans-serif; + background-size:cover; + -webkit-background-size:cover; + -moz-background-size:cover; + -o-background-size:cover; + min-height:1050px; +} +.title-maobixingshu{ + font-size:70px; + text-align:center; +} +body a,form li,input[type="submit"],.sixth-login input[type="submit"],.third-login input[type="submit"]{ + transition: 0.1s all; + -webkit-transition: 0.1s all; + -moz-transition: 0.1s all; + -o-transition: 0.1s all; +} +h1 { + font-family: 'Exo 2', sans-serif; + text-align: center; + padding-top: 4em; + font-weight: 400; + color: #2B2B36; + font-size: 2em; +} +.auth-form { + background: #2b2b36; + position: relative; + width: 30%; + margin: 3% auto 0 auto; + text-align: center; + border-radius: 15px; + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + -o-border-radius: 15px; +} +.head img { + width: 100%; +} +.avtar img { + margin: 2em 0 0; +} +.head-info { + padding: 5px 0; + text-align: center; + font-weight: 600; + font-size: 2em; + color: #fff; + background: #23232e; + height: 50px; + border-top-left-radius: 10px; + -webkit-border-top-left-radius: 10px; + -moz-border-top-left-radius: 10px; + -o-border-top-left-radius: 10px; + border-top-right-radius: 10px; + -webkit-border-top-right-radius: 10px; + -moz-border-top-right-radius: 10px; + -o-border-top-right-radius: 10p +} +label.lbl-1 { + background: #6756ea; + width: 20px; + height: 20px; + display: block; + float: right; + border-radius: 50%; + margin: 16px 10px 0px 0px; +} +label.lbl-2 { + background: #ea569a; + width: 20px; + height: 20px; + display: block; + float: right; + border-radius: 50%; + margin: 16px 10px 0px 0px; +} +label.lbl-3 { + background: #f1c85f; + width: 20px; + height: 20px; + display: block; + float: right; + border-radius: 50%; + margin: 16px 10px 0px 0px; +} +/*--copyrights--*/ +.copy-rights{ + text-align: center; + margin-top: 8em; +} +.copy-rights p{ + color:#FFF; + font-size: 1em; + line-height:1.8em; +} +.copy-rights p a{ + color:#ff2a75; + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; + text-decoration:none; +} +.copy-rights p a:hover{ + color:#3faa53; + text-decoration:none; + transition: 0.1s all; + -webkit-transition: 0.1s all; + -moz-transition: 0.1s all; + -o-transition: 0.1s all; +} + +@media (max-width:1440px){ + body { + min-height: 811px; + } +} +@media (max-width:1366px){ + .copy-rights { + margin-top: 3em; + } + body { + min-height: 768px; + } +} +@media (max-width:1280px){ + body { + min-height: 711px; + } + .copy-rights { + margin-top: 0.5em; + } +} +@media (max-width:1024px){ + .auth-form { + width: 37%; + } + .copy-rights { + margin-top: 3em; + } + h1 { + padding-top: 2em; + } + body { + min-height: 675px; + } +} +@media (max-width:768px){ + .auth-form { + width: 50%; + margin: 12% auto 0 auto; + } + body { + min-height: 929px; + } +} +@media (max-width:640px){ + .auth-form { + width: 60%; + margin: 20% auto 0 auto; + } +} +@media (max-width:480px){ + .auth-form { + width: 80%; + } +} +@media (max-width:320px){ + h1 { + padding-top: 1em; + font-size: 1.5em; + } + .auth-form { + width: 90%; + margin: 10% auto 0 auto; + } + .avtar img { + margin: 1.1em 0 0; + } + .head-info { + height: 35px; + } + label.lbl-1 { + margin: 8px 10px 0px 0px; + } + label.lbl-2 { + margin: 8px 10px 0px 0px; + } + label.lbl-3 { + margin: 8px 10px 0px 0px; + } + .close { + left: 16px; + top: 13px; + } + .copy-rights { + margin-top: 2em; + } + body { + min-height: 504px; + } + input[type="submit"] { + font-size: 28px; + padding: 10px 0; + } +} + +input[type="submit"]{ + font-size: 30px; + color: #fff; + outline: none; + border: none; + background: #3ea751; + width: 100%; + padding: 18px 0; + border-bottom-left-radius: 15px; + -webkit-border-bottom-left-radius: 15px; + -moz-border-bottom-left-radius: 15px; + -o-border-bottom-left-radius: 15px; + border-bottom-right-radius: 15px; + -webkit-border-bottom-right-radius: 15px; + -moz-border-bottom-right-radius: 15px; + -o-border-bottom-right-radius: 15px; + cursor: pointer; +} +input[type="submit"]:hover { + background: #ff2775; + border-bottom-left-radius: 15px; + -webkit-border-bottom-left-radius: 15px; + -moz-border-bottom-left-radius: 15px; + -o-border-bottom-left-radius: 15px; + border-bottom-right-radius: 15px; + -webkit-border-bottom-right-radius: 15px; + -moz-border-bottom-right-radius: 15px; + -o-border-bottom-right-radius: 15px; + transition: 1s all; + -webkit-transition: 1s all; + -moz-transition: 1s all; + -o-transition: 1s all; +} diff --git a/public/css/content.css b/public/css/content.css new file mode 100644 index 0000000..ca62dbd --- /dev/null +++ b/public/css/content.css @@ -0,0 +1,298 @@ +body{ + font-family: "宋体"; +} + +.header { + opacity:0.7; + position: fixed; + top: 0px; + background-color: #fff; + width: 100%; + z-index:9999; + padding: 10px 0px; +} + +.header-content{ + margin-left: 70px; + margin-right: 70px; +} + +#login{ + position: absolute; + width: 100px; + height: 30px; + margin-left: 20px; + /*border: 1px solid #000;*/ + right: 0px; + top: 25px; + text-align: center; + /*font-family: "gangbikaiti";*/ +} + +#login a:hover{ + color: #000; + text-decoration: none; +} + +.header-main { + padding: 0px 10px 0px 10px; + /*border: 1px solid #000;*/ +} +.logo a { + font-size: 2em; + font-weight: 700; + color: #000; + margin: 0em; +} + +.logo h1{ + font-size: 40px; + font-weight: 700; + color: #000; + margin: 0em; +} + +.logo a:hover { + text-decoration:none; +} +.header-left { + float: left; + padding: 5px 0px 5px 0px; +} +.header-right { + float: right; + width: 300px; + text-align: center; + padding: 10px 10px 0px 0px; + font-family: "微软雅黑"; +} +.header-right a{ + text-decoration: none; + +} + +span.menu{ + display:none; + } +.search { + width: 70%; + background: #EBEBEB; + border-radius: 20px; + display: inline-block; + margin-right: 20px; +} +.search input[type="text"] { + border: none; + background: none; + outline: none; + width: 80%; + padding: 8px 0px 8px 12px; + -webkit-appearance: none; + font-size: 14px; + font-weight: 400; + color: #777; +} +.search input[type="submit"] { + background:url(../images/search.png)no-repeat; + height:18px; + border: none; + width: 16%; + outline: none; + vertical-align:middle; +} +.logo { + margin: 0px 45px 0px 0px; + display: inline-block; +} +.logo a { + display: block; +} + +@media(max-width:640px){ +.logo { + margin: 0px 5px 0px 0px; +} +.logo img { + width: 75%; +} +.header-left { + margin: 0px 0px 0px 0px; + padding: 0px 0px 0px 0px; +} +.search input[type="text"] { + padding: 6px 0px 6px 10px; +} +} +@media(max-width:480px){ +.top-nav { + float: right; +} +.header-left { + margin: 7px 0px 0px 0px; +} +span.dot { + display: none; +} +.search { + display: none; +} +span.ser-img { + display: none; +} +.header-left { + float: none; +} +.header-right { + float: none; +} + +.top-nav ul { + padding: 4px 0px 0px 0px; +} +.header-main { + padding: 0px 0px 0px 0px; +} +} +@media(max-width:320px){ + .header-right { + float: none; + padding: 10px 0px 0px 0px; + text-align: left; + } + .top-nav ul { + padding: 3px 0px 0px 0px; + } + .header-left img { + width: 65%; + } + .caption { + top: 15%; + } + span.roundplay-bwn { + width: 32px; + background-size: 100%; + } + .top-nav ul li a { + font-size: 16px; + padding: 0px 3px; + } +} + +/*--footer start here--*/ +.footer { + /*position: fixed;*/ + margin-bottom: 0px; + padding: 5px 0px; +} + +.footer{ + width: 90%; + margin-left: 50px; +} + +.footer p { + font-size: 16px; + color: #000; + text-align: center; +} + + +/*导航效果*/ +.top-nav { + display: inline-block; + height: 29px; + width: 500px; + font-family: "微软雅黑"; +} + +.top-nav ul { + padding: 0px; + list-style: none; +} + +.top-nav ul li { + display: inline-block; +} + +.top-nav ul li a { + font-size: 17px; + font-weight: 400; + padding:0px 10px; + color: #777; +} + +.top-nav ul li a:hover, .top-nav ul li a.active { + color:#3488d0; +} + +.res { + width:420px; + height:36px; + margin:0 auto; +} + +.res li{ + float:left; + width: 130px; + text-align:center; + +} + +.res li ul li{ + background: #fff; + line-height: 28px; + border-bottom: 1px solid #fff; + +} + +/*设置导航栏字体大小*/ +.res li ul a{ + font-size: 13px; +} + +.res a { + display:block + +} + +.res li ul li a:hover { + display:block; + background: #CCC; + border-bottom: 1px solid #BBB; +} + +.res ul{ + display:none; + margin-top: 0px; +} + +.topLine:hover{ + height: 30px; + border-top: 2px solid #CCC; +} + + +.res li:hover ul{ + display:block; + position:absolute; + width:100px; + top:46px; +} + + + +.res li:hover ul li{ + line-height: 28px; + background: #fff; +} + +/*列表第一行设置10像素的上间距*/ +.spec{ + padding-top: 30px; +} + +a:link {text-decoration:none;} +a:visited {text-decoration:none;} +a:hover {text-decoration:none;} +a:active {text-decoration:none;} + diff --git a/public/css/home.css b/public/css/home.css new file mode 100644 index 0000000..3d68e7b --- /dev/null +++ b/public/css/home.css @@ -0,0 +1,116 @@ +/*左侧导航栏*/ +#contentLeft { + position: fixed; + z-index: 10; + width: 250px; + height: 87.3%; + top: 85px; + background-color: rgb(241,241,241); + padding-top: 200px; +} + +#leftNavigation { +list-style: none; + padding: 0; + margin: 2rem 0; +} + +#leftNavigation li{ + height: 50px; + padding-top: 10px; +} + +#leftNavigation li a { + line-height: 50px; + font-size: 0.875rem; + + text-decoration: none; + display: block; + padding: 0.8rem 1rem 0.8rem 3rem; + color: #000; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + -webkit-transition: color 0.2s ease; + transition: color 0.2s ease; +} + +#leftNavigation li a, #leftNavigation li a .leftNavIcon { + line-height: 120%; +} + +#leftNavigation li a .leftNavIcon { + position: absolute; + top: 0; + left: 0; + width: 3rem; + padding: 0.8rem 0; + text-align: center; +} + +#leftNavigation li:hover{ + background-color: #CCCCCC; +} + + +/*纪念册页面标题*/ +/*.book-set{ + float: left; + border: 1px solid #000; + width: 200px; + height: 250px; + margin-left: 100px; + border-radius: 15px; + overflow: hidden; +} + +.book-set img{ + position: absolute; + width: 200px; + height: 250px; + z-index: -22; + border-radius: 15px; +}*/ + + + +.free-wall { + margin: 15px; + border: 1px solid #000; + border: 1px solid #000; + margin-top: 85px; + margin-left: 260px; + width: 1080px; + height: 80%; +} +.book-set { + width: 221.2px; + border: 1px solid #000; +} +.info { + padding: 15px; + color: #333; +} +.book-set img { + margin: 0px; + padding: 0px; + display: block; +} + + + + + +.test{ + width: 80%; + height: 80%; + margin-top: 20%; + margin-left: 10%; + background-color: #999; + display: none; +} + +.test p{ + margin-top: 10px; + margin-left: 10px; +} diff --git a/public/css/index.css b/public/css/index.css new file mode 100644 index 0000000..881d874 --- /dev/null +++ b/public/css/index.css @@ -0,0 +1,370 @@ + +h4, h5, h6, +h1, h2, h3 {margin-top: 0;} +ul, ol {margin: 0;} +p {margin: 0;} +html, body{ + + font-size: 100%; + background:#fff; +} + +/*--banner start here--*/ +.banner { + background: url(../images/mo.jpg)no-repeat; + min-height: 550px; + background-size: cover; +} +.banner1 { + background: url(../images/b3.jpg)no-repeat; + min-height: 550px; + background-size: cover; +} +.banner2 { + background: url(../images/b2.jpg)no-repeat; + min-height: 550px; + background-size: cover; +} + +/*--- slider-css --*/ +.slider { + position: relative; + /*top: 80px;*/ + padding-top: 75px; +} +.rslides { + position: relative; + list-style: none; + overflow: hidden; + width: 100%; + padding: 0; + margin: 0; + } +.rslides li { + -webkit-backface-visibility: hidden; + position: absolute; + display: none; + width: 100%; + left: 0; + top: 0; + } +.rslides li:first-child { + position: relative; + display: block; + float: left; + } +.rslides img { + display: block; + height: auto; + float: left; + width: 100%; + border: 0; + } +.caption p{ + color: #FFF; + line-height: 1.5em; + font-size: 0.875em; + margin:3em 0 1.5em 0; +} +a.morebtn{ + background:#3D3D3D; + padding:0.8em 0; + display:block; + font-size:0.875em; + text-transform:uppercase; + color:#FFF; + width:20%; + margin:0 auto; + transition:0.5s all ease; + -webkit-transition:0.5s all ease; + -moz-transition:0.5s all ease; + -o-transition:0.5s all ease; + -ms-transition:0.5s all ease; +} +a.morebtn:hover{ + background:#585686; +} +.callbacks_tabs a:after { + content: "\f111"; + font-size: 0; + font-family: FontAwesome; + visibility: visible; + display: block; + height: 14px; + width: 14px; + display: inline-block; + border: 2px solid #fff; + border-radius: 19px; +} +.callbacks_tabs a:before { + content: "\f111"; + font-size: 0; + font-family: FontAwesome; + visibility: visible; + display: block; + position: absolute; + left: 57px; +} +.callbacks_here a:after{ + background:#fff; +} +.callbacks_tabs li:nth-child(1) a:before{ + content:none; +} +.callbacks_tabs a{ + visibility:hidden; +} +.callbacks_tabs li{ + display:inline-block; +} +ul.callbacks_tabs.callbacks1_tabs { + position: absolute; + bottom: 14px; + z-index: 999; + right:35px; + top:485px; +} +/*-- responsive-mediaquries --*/ +@media(max-width:1024px){ + .caption { + width: 63%; + top: 38%; + left: 19%; + } +ul.callbacks_tabs.callbacks1_tabs { + top: 425px; +} +.banner { + min-height: 490px; +} +.banner1 { + min-height: 490px; +} +.banner2 { + min-height: 490px; +} +} +@media(max-width:768px){ + .caption { + width: 70%; + top: 30%; + left: 13%; + } + .caption h3{ + font-size:2em; + } + a.morebtn { + width: 26%; + } +span.bg-small { + width: 28%; + height: 25px; + top: 44px; + left: -30px; +} +span.bg-large { + width: 35%; + height: 40px; + top: 104px; + left: -30px; +} +.caption p { + margin: 2em 0 1.5em 0; +} +ul.callbacks_tabs.callbacks1_tabs { + top: 300px; +} +.callbacks_tabs a:after { + height: 14px; + width: 14px; +} +.callbacks_tabs a:before { + left: 55px; +} +.banner { + min-height: 360px; +} +.banner1 { + min-height: 360px; +} +.banner2 { + min-height: 360px; +} +} +@media(max-width:640px){ + .caption { + width: 70%; + top: 28%; + left: 13%; + } + .caption h3{ + font-size:1.8em; + } + a.morebtn { + width: 30%; + } + .callbacks_tabs a:after { + height: 10px; + width: 10px; + } + .callbacks_tabs a:before { + left: 53.5px; +} +span.bg-small { + top: 40px; + left: -30px; +} +span.bg-large { + top: 93px; + left: -30px; +} +.banner { + min-height: 300px; +} +.banner1 { + min-height: 300px; +} +.banner2 { + min-height: 300px; +} +ul.callbacks_tabs.callbacks1_tabs { + top: 230px; +} +} +@media(max-width:480px){ + .caption { + width: 70%; + top: 23%; + left: 13%; + } + .caption p{ + height:25px; + overflow:hidden; + margin:0.5em 0; + } + .caption h3{ + font-size:1.6em; + } + a.morebtn { + width: 40%; + font-size:0.8em; + } + .callbacks_tabs a:after { + height:10px; + width: 10px; + } + ul.callbacks_tabs.callbacks1_tabs { + top:175px; + } + span.bg-small { + top: 33px; + left: -20px; +} + span.bg-large { + width: 35%; + height: 27px; + top: 80px; + left: -20px; +} +.banner { + min-height: 230px; + } + .banner1 { + min-height: 230px; + } + .banner2 { + min-height: 230px; + } +} +@media (max-width:320px){ + #slider3-pager a { + width: 15%; + } + .rslides_tabs { + bottom: 25px; + } + .caption { + top: 25%; + } + .caption p{ + font-size: 0.8em; + height: 17px; + overflow: hidden; + padding: 0.2em 0 0em; + margin-bottom: 0.2em; + } + a.readmorebtn{ + font-size:0.75em; + width:50%; + margin-top:0.5em; + padding:0.5em; + } + .caption h3 { + font-size: 1em; + } + ul.callbacks_tabs.callbacks1_tabs { + top: 115px; +} +.banner { + min-height: 170px; + } + .banner1 { + min-height: 170px; + } + .banner2 { + min-height: 170px; + } + .header { + padding: 10px 0px; +} +span.roundplay-bwn { + width: 25px; + height: 25px; + background-size: 100%; +} + +/* Self Clearing Goodness */ +.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } +.clearfix:before, +.clearfix:after, +.row:before, +.row:after { + content: '\0020'; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; } +.row:after, +.clearfix:after { + clear: both; } +.row, +.clearfix { + zoom: 1; } + +.clear { + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + width: 0; + height: 0; +} + +.b-animate img { + margin-top: 35%; +} +.port-nav-left p { + width: 87%; +} +} + +/*--port folio end here--*/ + +/*--footer end here--*/ +/*--about start here--*/ +.about { + background: #EBEBEB; + padding: 50px 0px 50px 0px; +} + diff --git a/public/css/login.css b/public/css/login.css index f7b044b..637c02b 100644 --- a/public/css/login.css +++ b/public/css/login.css @@ -1,40 +1,8 @@ - -/* reset */ -html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} -article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} -ol,ul{list-style:none;margin:0px;padding:0px;} -blockquote,q{quotes:none;} -blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;} -table{border-collapse:collapse;border-spacing:0;} -/* start editing from here */ -a{text-decoration:none;} -.txt-rt{text-align:right;}/* text align right */ -.txt-lt{text-align:left;}/* text align left */ -.txt-center{text-align:center;}/* text align center */ -.float-rt{float:right;}/* float right */ -.float-lt{float:left;}/* float left */ -.clear{clear:both;}/* clear float */ -.pos-relative{position:relative;}/* Position Relative */ -.pos-absolute{position:absolute;}/* Position Absolute */ -.vertical-base{ vertical-align:baseline;}/* vertical align baseline */ -.vertical-top{ vertical-align:top;}/* vertical align top */ -nav.vertical ul li{ display:block;}/* vertical menu */ -nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ -img{max-width:100%;} -/*end reset*/ -/****-----start-body----****/ -body{ - background: url(../images/bg1.jpg) no-repeat 0px 0px; - font-family: 'Open Sans', sans-serif; - background-size:cover; - -webkit-background-size:cover; - -moz-background-size:cover; - -o-background-size:cover; - min-height:1050px; -} -.title-maobixingshu{ - font-size:70px; - text-align:center; +input[type="text"]{ + transition: 0.1s all; + -webkit-transition: 0.1s all; + -moz-transition: 0.1s all; + -o-transition: 0.1s all; } .login-font{ font-weight:bold; @@ -42,15 +10,31 @@ body{ .rmbMeArea{ font-size:14px; color:white; - font-family:"Microsoft YaHei"; float:left; margin-left:19%; margin-top:0px; margin-bottom:20px; } +.registerArea{ + font-size:14px; + margin-left:10%; + color:white; +} +.registerArea > a:hover { + color:#6756ea; +} + +.registerArea > a { + color:#f1c85f; +} + .errMsg{ - color:red; + margin-top:15px; + margin-left:19%; + margin-bottom:15px; + float:left; } + .text{ font-size:18px; } @@ -58,54 +42,7 @@ body{ margin: 0 auto; width: 80%; } -body a,form li,input[type="submit"],input[type="text"],.sixth-login input[type="submit"],.third-login input[type="submit"]{ - transition: 0.1s all; - -webkit-transition: 0.1s all; - -moz-transition: 0.1s all; - -o-transition: 0.1s all; -} -h1 { - font-family: 'Exo 2', sans-serif; - text-align: center; - padding-top: 4em; - font-weight: 400; - color: #2B2B36; - font-size: 2em; -} -.login-form { - background: #2b2b36; - position: relative; - width: 30%; - margin: 3% auto 0 auto; - text-align: center; - border-radius: 15px; - -webkit-border-radius: 15px; - -moz-border-radius: 15px; - -o-border-radius: 15px; -} -.head img { - width: 100%; -} -.avtar img { - margin: 2em 0 0; -} -.head-info { - padding: 5px 0; - text-align: center; - font-weight: 600; - font-size: 2em; - color: #fff; - background: #23232e; - height: 50px; - border-top-left-radius: 10px; - -webkit-border-top-left-radius: 10px; - -moz-border-top-left-radius: 10px; - -o-border-top-left-radius: 10px; - border-top-right-radius: 10px; - -webkit-border-top-right-radius: 10px; - -moz-border-top-right-radius: 10px; - -o-border-top-right-radius: 10p -} + input[type="text"] { width: 70%; padding: 1em 2em 1em 3em; @@ -128,228 +65,25 @@ input[type="text"] { border: none; font-weight: 100; border-bottom: 1px solid#484856; - margin-bottom: 3em; - } -.key { - background: url(../images/pass.png) no-repeat 447px 17px; -} -input[type="submit"]{ - font-size: 30px; - color: #fff; - outline: none; - border: none; - background: #3ea751; - width: 100%; - padding: 18px 0; - border-bottom-left-radius: 15px; - -webkit-border-bottom-left-radius: 15px; - -moz-border-bottom-left-radius: 15px; - -o-border-bottom-left-radius: 15px; - border-bottom-right-radius: 15px; - -webkit-border-bottom-right-radius: 15px; - -moz-border-bottom-right-radius: 15px; - -o-border-bottom-right-radius: 15px; - cursor: pointer; -} -input[type="submit"]:hover { - background: #ff2775; - border-bottom-left-radius: 15px; - -webkit-border-bottom-left-radius: 15px; - -moz-border-bottom-left-radius: 15px; - -o-border-bottom-left-radius: 15px; - border-bottom-right-radius: 15px; - -webkit-border-bottom-right-radius: 15px; - -moz-border-bottom-right-radius: 15px; - -o-border-bottom-right-radius: 15px; - transition: 1s all; - -webkit-transition: 1s all; - -moz-transition: 1s all; - -o-transition: 1s all; -} -label.lbl-1 { - background: #6756ea; - width: 20px; - height: 20px; - display: block; - float: right; - border-radius: 50%; - margin: 16px 10px 0px 0px; -} -label.lbl-2 { - background: #ea569a; - width: 20px; - height: 20px; - display: block; - float: right; - border-radius: 50%; - margin: 16px 10px 0px 0px; -} -label.lbl-3 { - background: #f1c85f; - width: 20px; - height: 20px; - display: block; - float: right; - border-radius: 50%; - margin: 16px 10px 0px 0px; -} -/*--copyrights--*/ -.copy-rights{ - text-align: center; - margin-top: 8em; -} -.copy-rights p{ - color:#FFF; - font-size: 1em; - line-height:1.8em; -} -.copy-rights p a{ - color:#ff2a75; - -webkit-transition: all 0.3s ease-out; - -moz-transition: all 0.3s ease-out; - -ms-transition: all 0.3s ease-out; - -o-transition: all 0.3s ease-out; - transition: all 0.3s ease-out; - text-decoration:none; -} -.copy-rights p a:hover{ - color:#3faa53; - text-decoration:none; - transition: 0.1s all; - -webkit-transition: 0.1s all; - -moz-transition: 0.1s all; - -o-transition: 0.1s all; -} -/*--/copyrights--*/ -/*--start-responsive-design--*/ -@media (max-width:1440px){ - .key { - background: url(../images/pass.png) no-repeat 376px 17px; - } - - body { - min-height: 811px; - } -} -@media (max-width:1366px){ - .key { - background: url(../images/pass.png) no-repeat 358px 19px; - } - .copy-rights { - margin-top: 3em; - } - body { - min-height: 768px; - } -} -@media (max-width:1280px){ - .key { - background: url(../images/pass.png) no-repeat 336px 18px; - } - body { - min-height: 711px; - } - .copy-rights { - margin-top: 0.5em; - } -} -@media (max-width:1024px){ - .login-form { - width: 37%; - } - .key { - background: url(../images/pass.png) no-repeat 339px 18px; - } - .copy-rights { - margin-top: 3em; - } - h1 { - padding-top: 2em; - } - body { - min-height: 675px; - } -} -@media (max-width:768px){ - .login-form { - width: 50%; - margin: 12% auto 0 auto; - } - .key { - background: url(../images/pass.png) no-repeat 342px 18px; - } - body { - min-height: 929px; - } -} -@media (max-width:640px){ - .login-form { - width: 60%; - margin: 20% auto 0 auto; - } - .key { - background: url(../images/pass.png) no-repeat 342px 19px; - } -} -@media (max-width:480px){ - .login-form { - width: 80%; - } + margin-bottom: 35px; } + @media (max-width:320px){ - h1 { - padding-top: 1em; - font-size: 1.5em; - } - .login-form { - width: 90%; - margin: 10% auto 0 auto; - } input[type="text"] { - width: 62%; - padding: 1.2em 2em .5em 2.5em; + width: 60%; + padding: 1.2em 2em .4em 2.5em; font-size: 17px; margin-top: .5em; } input[type="password"] { - width: 62%; - padding: 1.2em 2em .5em 2.5em; + width: 60%; + padding: 1.2em 2em .4em 2.5em; font-size: 17px; margin-top: .5em; margin-bottom: 2em; - background: url(../images/key.png) no-repeat 8px 23px; - } - .key { - background: url(../images/pass.png) no-repeat 235px 27px; + background: url(../images/key.png) no-repeat 8px 23px; } .avtar img { margin: 1.1em 0 0; } - .head-info { - height: 35px; - } - label.lbl-1 { - margin: 8px 10px 0px 0px; - } - label.lbl-2 { - margin: 8px 10px 0px 0px; - } - label.lbl-3 { - margin: 8px 10px 0px 0px; - } - .close { - left: 16px; - top: 13px; - } - .copy-rights { - margin-top: 2em; - } - body { - min-height: 504px; - } - input[type="submit"] { - font-size: 28px; - padding: 10px 0; - } } -/*--end-responsive-design--*/ \ No newline at end of file diff --git a/public/css/register.css b/public/css/register.css new file mode 100644 index 0000000..8227ff8 --- /dev/null +++ b/public/css/register.css @@ -0,0 +1,31 @@ +input[type="text"] { + width: 70%; + padding: 1em 2em 1em 3em; + color: #9199aa; + font-size: 18px; + outline: none; + background: url(../images/adm.png) no-repeat 10px 15px; + border: none; + font-weight: 100; + border-bottom: 1px solid#484856; + margin-top: 0.4em; +} +input[type="password"]{ + width: 70%; + padding: 1em 2em 1em 3em; + color: #dd3e3e; + font-size: 18px; + outline: none; + background: url(../images/key.png) no-repeat 10px 23px; + border: none; + font-weight: 100; + border-bottom: 1px solid#484856; + margin-top: 0.4em; +} +.errMsg{ + font-size:15px; + margin-top:30px; + margin-left:60px; + margin-bottom:20px; + float:left; +} \ No newline at end of file diff --git a/public/images/b2.jpg b/public/images/b2.jpg new file mode 100644 index 0000000..2c33d94 Binary files /dev/null and b/public/images/b2.jpg differ diff --git a/public/images/b3.jpg b/public/images/b3.jpg new file mode 100644 index 0000000..ca13d7f Binary files /dev/null and b/public/images/b3.jpg differ diff --git a/public/images/close.png b/public/images/close.png deleted file mode 100644 index 52cc293..0000000 Binary files a/public/images/close.png and /dev/null differ diff --git a/public/images/fire.jpg b/public/images/fire.jpg new file mode 100644 index 0000000..9751d0e Binary files /dev/null and b/public/images/fire.jpg differ diff --git a/public/images/mo.jpg b/public/images/mo.jpg new file mode 100644 index 0000000..d06a1ce Binary files /dev/null and b/public/images/mo.jpg differ diff --git a/public/images/search.png b/public/images/search.png new file mode 100644 index 0000000..e060b56 Binary files /dev/null and b/public/images/search.png differ diff --git a/public/js/freewall.js b/public/js/freewall.js new file mode 100644 index 0000000..7acae37 --- /dev/null +++ b/public/js/freewall.js @@ -0,0 +1,1273 @@ +// created by Minh Nguyen; +// version 1.04; + +(function($) { + + // for zeptojs; + $.isNumeric == null && ($.isNumeric = function(src) { + return src != null && src.constructor === Number; + }); + + $.isFunction == null && ($.isFunction = function(src) { + return src != null && src instanceof Function; + }); + + var $W = $(window); + var $D = $(document); + + var layoutManager = { + // default setting; + defaultConfig: { + animate: false, + cache: true, // cache the size of blocks for performance; + cellW: 100, // function(container) {return 100;} + cellH: 100, // function(container) {return 100;} + delay: 0, // slowdown active block; + engine: 'giot', // 'giot' is a person name; + fixSize: null, // resize + adjust = fill gap; + //fixSize: 0, allow adjust size = no fill gap; + //fixSize: 1, no resize + no adjust = no fill gap; + gutterX: 15, // width spacing between blocks; + gutterY: 15, // height spacing between blocks; + selector: '> div', + draggable: false, + rightToLeft: false, + bottomToTop: false, + onGapFound: function() {}, + onComplete: function() {}, + onResize: function() {}, + onBlockReady: function() {}, + onBlockFinish: function() {}, + onBlockActive: function() {} + }, + plugin: {}, + totalGrid: 1, + transition: false, + loadBlock: function(item, setting) { + var runtime = setting.runtime; + var gutterX = runtime.gutterX; + var gutterY = runtime.gutterY; + var cellH = runtime.cellH; + var cellW = runtime.cellW; + var block = null; + var $item = $(item); + var active = $item.data("active"); + var fixPos = $item.attr('data-position'); + var fixSize = parseInt($item.attr('data-fixSize')); + var blockId = runtime.lastId++ + '-' + runtime.totalGrid; + + //ignore dragging block; + if ($item.hasClass('fw-float')) return; + $item.attr({id: blockId, 'data-delay': item.index}); + + //remove animation for speed render; + if (setting.animate && this.transition) { + this.setTransition(item, ""); + } + + isNaN(fixSize) && (fixSize = null); + (fixSize == null) && (fixSize = setting.fixSize); + var makeRound = (fixSize == 1) ? "ceil" : "round"; + // store original size; + + $item.attr('data-height') == null && $item.attr('data-height', $item.height()); + $item.attr('data-width') == null && $item.attr('data-width', $item.width()); + var height = 1 * $item.attr('data-height'); + var width = 1 * $item.attr('data-width'); + + if (!setting.cache) { + item.style.width = ""; + width = $item.width(); + + item.style.height = ""; + height = $item.height(); + } + + var col = !width ? 0 : Math[makeRound]((width + gutterX) / cellW); + var row = !height ? 0 : Math[makeRound]((height + gutterY) / cellH); + + // estimate size; + if (!fixSize && setting.cellH == 'auto') { + $item.width(cellW * col - gutterX); + item.style.height = ""; + height = $item.height(); + row = !height ? 0 : Math.round((height + gutterY) / cellH); + } + + if (!fixSize && setting.cellW == 'auto') { + $item.height(cellH * row - gutterY); + item.style.width = ""; + width = $item.width(); + col = !width ? 0 : Math.round((width + gutterX) / cellW); + } + + // for none resize block; + if ((fixSize != null) && (col > runtime.limitCol || row > runtime.limitRow)) { + block = null; + } else { + // get smallest width and smallest height of block; + // using for image runtime; + row && row < runtime.minHoB && (runtime.minHoB = row); + col && col < runtime.minWoB && (runtime.minWoB = col); + + // get biggest width and biggest height of block; + row > runtime.maxHoB && (runtime.maxHoB = row); + col > runtime.maxWoB && (runtime.maxWoB = col); + + width == 0 && (col = 0); + height == 0 && (row = 0); + + block = { + id: blockId, + width: col, + height: row, + fixSize: fixSize + }; + + // for fix position; + if (fixPos) { + fixPos = fixPos.split("-"); + block.y = 1 * fixPos[0]; + block.x = 1 * fixPos[1]; + block.width = fixSize != null ? col : Math.min(col, runtime.limitCol - block.x); + block.height = fixSize != null ? row : Math.min(row, runtime.limitRow - block.y); + var holeId = block.y + "-" + block.x + "-" + block.width + "-" + block.height; + if (active) { + runtime.holes[holeId] = { + id: block.id, + top: block.y, + left: block.x, + width: block.width, + height: block.height + }; + this.setBlock(block, setting); + } else { + delete runtime.holes[holeId]; + } + + } + } + + // for css animation; + if ($item.attr("data-state") == null) { + $item.attr("data-state", "init"); + } else { + $item.attr("data-state", "move"); + } + + setting.onBlockReady.call(item, block, setting); + + return (fixPos && active) ? null : block; + }, + setBlock: function(block, setting) { + var runtime = setting.runtime; + var gutterX = runtime.gutterX; + var gutterY = runtime.gutterY; + var height = block.height; + var width = block.width; + var cellH = runtime.cellH; + var cellW = runtime.cellW; + var x = block.x; + var y = block.y; + + if (setting.rightToLeft) { + x = runtime.limitCol - x - width; + } + if (setting.bottomToTop) { + y = runtime.limitRow - y - height; + } + + var realBlock = { + fixSize: block.fixSize, + top: y * cellH, + left: x * cellW, + width: cellW * width - gutterX, + height: cellH * height - gutterY + }; + + realBlock.top = 1 * realBlock.top.toFixed(2); + realBlock.left = 1 * realBlock.left.toFixed(2); + realBlock.width = 1 * realBlock.width.toFixed(2); + realBlock.height = 1 * realBlock.height.toFixed(2); + + //runtime.length += 1; + block.id && (runtime.blocks[block.id] = realBlock); + + // for append feature; + return realBlock; + }, + showBlock: function(item, setting) { + var runtime = setting.runtime; + var method = setting.animate && !this.transition ? 'animate' : 'css'; + var block = runtime.blocks[item.id]; + var $item = $(item); + var self = this; + var start = $item.attr("data-state") != "move"; + var trans = start ? "width 0.5s, height 0.5s" : "top 0.5s, left 0.5s, width 0.5s, height 0.5s, opacity 0.5s"; + + item.delay && clearTimeout(item.delay); + //ignore dragging block; + if ($item.hasClass('fw-float')) return; + + // kill the old transition; + self.setTransition(item, ""); + item.style.position = "absolute"; + setting.onBlockActive.call(item, block, setting); + + function action() { + // start to arrange; + start && $item.attr("data-state", "start"); + // add animation by using css3 transition; + if (setting.animate && self.transition) { + self.setTransition(item, trans); + } + + // for hidden block; + if (!block) { + //var position = $item.position(); <= make speed so slow; + var height = parseInt(item.style.height) || 0; + var width = parseInt(item.style.width) || 0; + var left = parseInt(item.style.left) || 0; + var top = parseInt(item.style.top) || 0; + $item[method]({ + left: left + width / 2, + top: top + height / 2, + width: 0, + height: 0, + opacity: 0 + }); + } else { + if (block.fixSize) { + block.height = 1 * $item.attr("data-height"); + block.width = 1 * $item.attr("data-width"); + } + + $item["css"]({ + opacity: 1, + width: block.width, + height: block.height + }); + + // for animating by javascript; + $item[method]({ + top: block.top, + left: block.left + }); + + if ($item.attr('data-nested') != null) { + self.nestedGrid(item, setting); + } + } + + runtime.length -= 1; + + setting.onBlockFinish.call(item, block, setting); + + runtime.length == 0 && setting.onComplete.call(item, block, setting); + } + + setting.delay > 0 ? (item.delay = setTimeout(action, setting.delay * $item.attr("data-delay"))) : action(); + }, + nestedGrid: function(item, setting) { + var innerWall, $item = $(item), runtime = setting.runtime; + var gutterX = $item.attr("data-gutterX") || setting.gutterX; + var gutterY = $item.attr("data-gutterY") || setting.gutterY; + var method = $item.attr("data-method") || "fitZone"; + var nested = $item.attr('data-nested') || "> div"; + var cellH = $item.attr("data-cellH") || setting.cellH; + var cellW = $item.attr("data-cellW") || setting.cellW; + var block = runtime.blocks[item.id]; + + if (block) { + innerWall = new freewall($item); + innerWall.reset({ + cellH: cellH, + cellW: cellW, + gutterX: 1 * gutterX, + gutterY: 1 * gutterY, + selector: nested + }); + + switch (method) { + case "fitHeight": + innerWall[method](block.height); + break; + case "fitWidth": + innerWall[method](block.width); + break; + case "fitZone": + innerWall[method](block.width, block.height); + break; + } + } + }, + adjustBlock: function(block, setting) { + var runtime = setting.runtime; + var gutterX = runtime.gutterX; + var gutterY = runtime.gutterY; + var $item = $("#" + block.id); + var cellH = runtime.cellH; + var cellW = runtime.cellW; + + if (setting.cellH == 'auto') { + $item.width(block.width * cellW - gutterX); + $item[0].style.height = ""; + block.height = Math.round(($item.height() + gutterY) / cellH); + } + }, + adjustUnit: function(width, height, setting) { + var gutterX = setting.gutterX; + var gutterY = setting.gutterY; + var runtime = setting.runtime; + var cellW = setting.cellW; + var cellH = setting.cellH; + + $.isFunction(cellW) && (cellW = cellW(width)); + cellW = 1 * cellW; + !$.isNumeric(cellW) && (cellW = 1); + + $.isFunction(cellH) && (cellH = cellH(height)); + cellH = 1 * cellH; + !$.isNumeric(cellH) && (cellH = 1); + + if ($.isNumeric(width)) { + // adjust cell width via container; + cellW < 1 && (cellW = cellW * width); + + // estimate total columns; + var limitCol = Math.max(1, Math.floor(width / cellW)); + + // adjust unit size for fit width; + if (!$.isNumeric(gutterX)) { + gutterX = (width - limitCol * cellW) / Math.max(1, (limitCol - 1)); + gutterX = Math.max(0, gutterX); + } + + limitCol = Math.floor((width + gutterX) / cellW); + runtime.cellW = (width + gutterX) / Math.max(limitCol, 1); + runtime.cellS = runtime.cellW / cellW; + runtime.gutterX = gutterX; + runtime.limitCol = limitCol; + } + + if ($.isNumeric(height)) { + // adjust cell height via container; + cellH < 1 && (cellH = cellH * height); + + // estimate total rows; + var limitRow = Math.max(1, Math.floor(height / cellH)); + + // adjust size unit for fit height; + if (!$.isNumeric(gutterY)) { + gutterY = (height - limitRow * cellH) / Math.max(1, (limitRow - 1)); + gutterY = Math.max(0, gutterY); + } + + limitRow = Math.floor((height + gutterY) / cellH); + runtime.cellH = (height + gutterY) / Math.max(limitRow, 1); + runtime.cellS = runtime.cellH / cellH; + runtime.gutterY = gutterY; + runtime.limitRow = limitRow; + } + + if (!$.isNumeric(width)) { + // adjust cell width via cell height; + cellW < 1 && (cellW = runtime.cellH); + runtime.cellW = cellW != 1 ? cellW * runtime.cellS : 1; + runtime.gutterX = gutterX; + runtime.limitCol = 666666; + } + + if (!$.isNumeric(height)) { + // adjust cell height via cell width; + cellH < 1 && (cellH = runtime.cellW); + runtime.cellH = cellH != 1 ? cellH * runtime.cellS : 1; + runtime.gutterY = gutterY; + runtime.limitRow = 666666; + } + }, + resetGrid: function(runtime) { + runtime.blocks = {}; + runtime.length = 0; + runtime.cellH = 0; + runtime.cellW = 0; + runtime.lastId = 1; + runtime.matrix = {}; + runtime.totalCol = 0; + runtime.totalRow = 0; + }, + setDraggable: function(item, option) { + var isTouch = false; + var config = { + startX: 0, //start clientX; + startY: 0, + top: 0, + left: 0, + handle: null, + onDrop: function() {}, + onDrag: function() {}, + onStart: function() {} + }; + + $(item).each(function() { + var setting = $.extend({}, config, option); + var handle = setting.handle || this; + var ele = this; + var $E = $(ele); + var $H = $(handle); + + var posStyle = $E.css("position"); + posStyle != "absolute" && $E.css("position", "relative"); + + + function mouseDown(evt) { + evt.stopPropagation(); + evt = evt.originalEvent; + + if (evt.touches) { + isTouch = true; + evt = evt.changedTouches[0]; + } + + if (evt.button != 2 && evt.which != 3) { + setting.onStart.call(ele, evt); + + setting.startX = evt.clientX; + setting.startY = evt.clientY; + setting.top = parseInt($E.css("top")) || 0; + setting.left = parseInt($E.css("left")) || 0; + + $D.bind("mouseup touchend", mouseUp); + $D.bind("mousemove touchmove", mouseMove); + } + + return false; + }; + + + function mouseMove(evt) { + evt = evt.originalEvent; + isTouch && (evt = evt.changedTouches[0]); + + $E.css({ + top: setting.top - (setting.startY - evt.clientY), + left: setting.left - (setting.startX - evt.clientX) + }); + + setting.onDrag.call(ele, evt); + }; + + function mouseUp(evt) { + evt = evt.originalEvent; + isTouch && (evt = evt.changedTouches[0]); + + setting.onDrop.call(ele, evt); + + $D.unbind("mouseup touchend", mouseUp); + $D.unbind("mousemove touchmove", mouseMove); + }; + + // ignore drag drop on text field; + $E.find("iframe, form, input, textarea, .ignore-drag") + .each(function() { + $(this).on("touchstart mousedown", function(evt) { + evt.stopPropagation(); + }); + }); + + $D.unbind("mouseup touchend", mouseUp); + $D.unbind("mousemove touchmove", mouseMove); + $H.unbind("mousedown touchstart").bind("mousedown touchstart", mouseDown); + + }); + }, + setTransition: function(item, trans) { + var style = item.style; + var $item = $(item); + + // remove animation; + if (!this.transition && $item.stop) { + $item.stop(); + } else if (style.webkitTransition != null) { + style.webkitTransition = trans; + } else if (style.MozTransition != null) { + style.MozTransition = trans; + } else if (style.msTransition != null) { + style.msTransition = trans; + } else if (style.OTransition != null) { + style.OTransition = trans; + } else { + style.transition = trans; + } + }, + getFreeArea: function(t, l, runtime) { + var maxY = Math.min(t + runtime.maxHoB, runtime.limitRow); + var maxX = Math.min(l + runtime.maxWoB, runtime.limitCol); + var minX = maxX; + var minY = maxY; + var matrix = runtime.matrix; + + // find limit zone by horizon; + for (var y = t; y < minY; ++y) { + for (var x = l; x < maxX; ++x) { + if (matrix[y + '-' + x]) { + (l < x && x < minX) && (minX = x); + } + } + } + + // find limit zone by vertical; + for (var y = t; y < maxY; ++y) { + for (var x = l; x < minX; ++x) { + if (matrix[y + '-' + x]) { + (t < y && y < minY) && (minY = y); + } + } + } + + return { + top: t, + left: l, + width: minX - l, + height: minY - t + }; + + }, + setWallSize: function(runtime, container) { + var totalRow = runtime.totalRow; + var totalCol = runtime.totalCol; + var gutterY = runtime.gutterY; + var gutterX = runtime.gutterX; + var cellH = runtime.cellH; + var cellW = runtime.cellW; + var totalWidth = Math.max(0, cellW * totalCol - gutterX); + var totalHeight = Math.max(0, cellH * totalRow - gutterY); + + container.attr({ + 'data-total-col': totalCol, + 'data-total-row': totalRow, + 'data-wall-width': Math.ceil(totalWidth), + 'data-wall-height': Math.ceil(totalHeight) + }); + + if (runtime.limitCol < runtime.limitRow) { + // do not set height with nesting grid; + !container.attr("data-height") && container.height(Math.ceil(totalHeight)); + } + } + }; + + + + var engine = { + // Giot just a person name; + giot: function(items, setting) { + var runtime = setting.runtime, + row = runtime.limitRow, + col = runtime.limitCol, + x = 0, + y = 0, + maxX = runtime.totalCol, + maxY = runtime.totalRow, + wall = {}, + holes = runtime.holes, + block = null, + matrix = runtime.matrix, + bigLoop = Math.max(col, row), + freeArea = null, + misBlock = null, + fitWidth = col < row ? 1 : 0, + lastBlock = null, + smallLoop = Math.min(col, row); + + // fill area with top, left, width, height; + function fillMatrix(id, t, l, w, h) { + for (var y = t; y < t + h;) { + for (var x = l; x < l + w;) { + matrix[y + '-' + x] = id; + ++x > maxX && (maxX = x); + } + ++y > maxY && (maxY = y); + } + } + + // set a hole on the wall; + for (var i in holes) { + if (holes.hasOwnProperty(i)) { + fillMatrix(holes[i]["id"] || true, holes[i]['top'], holes[i]['left'], holes[i]['width'], holes[i]['height']); + } + } + + + for (var b = 0; b < bigLoop; ++b) { + if (!items.length) break; + fitWidth ? (y = b) : (x = b); + lastBlock = null; + + for (var s = 0; s < smallLoop; ++s) { + if (!items.length) break; + fitWidth ? (x = s) : (y = s); + if (runtime.matrix[y + '-' + x]) continue; + freeArea = layoutManager.getFreeArea(y, x, runtime); + block = null; + for (var i = 0; i < items.length; ++i) { + if (items[i].height > freeArea.height) continue; + if (items[i].width > freeArea.width) continue; + block = items.splice(i, 1)[0]; + break; + } + + // trying resize the other block to fit gap; + if (block == null && setting.fixSize == null) { + // resize near block to fill gap; + if (lastBlock && !fitWidth && runtime.minHoB > freeArea.height) { + lastBlock.height += freeArea.height; + fillMatrix(lastBlock.id, lastBlock.y, lastBlock.x, lastBlock.width, lastBlock.height); + layoutManager.setBlock(lastBlock, setting); + continue; + } else if (lastBlock && fitWidth && runtime.minWoB > freeArea.width) { + lastBlock.width += freeArea.width; + fillMatrix(lastBlock.id, lastBlock.y, lastBlock.x, lastBlock.width, lastBlock.height); + layoutManager.setBlock(lastBlock, setting); + continue; + } else { + // get other block fill to gap; + for (var i = 0; i < items.length; ++i) { + if (items[i]['fixSize'] != null) continue; + block = items.splice(i, 1)[0]; + if (fitWidth) { + block.width = freeArea.width; + if (setting.cellH == 'auto') { + layoutManager.adjustBlock(block, setting); + } + // for fitZone; + block.height = Math.min(block.height, freeArea.height); + } else { + block.height = freeArea.height; + // for fitZone; + block.width = Math.min(block.width, freeArea.width); + } + break; + } + } + } + + if (block != null) { + wall[block.id] = { + id: block.id, + x: x, + y: y, + width: block.width, + height: block.height, + fixSize: block.fixSize + }; + + // keep success block for next round; + lastBlock = wall[block.id]; + + fillMatrix(lastBlock.id, lastBlock.y, lastBlock.x, lastBlock.width, lastBlock.height); + layoutManager.setBlock(lastBlock, setting); + } else { + // get expect area; + var misBlock = { + x: x, + y: y, + fixSize: 0 + }; + if (fitWidth) { + misBlock.width = freeArea.width; + misBlock.height = 0; + var lastX = x - 1; + var lastY = y; + + while (matrix[lastY + '-' + lastX]) { + matrix[lastY + '-' + x] = true; + misBlock.height += 1; + lastY += 1; + } + } else { + misBlock.height = freeArea.height; + misBlock.width = 0; + var lastY = y - 1; + var lastX = x; + + while (matrix[lastY + '-' + lastX]) { + matrix[y + '-' + lastX] = true; + misBlock.width += 1; + lastX += 1; + } + } + setting.onGapFound(layoutManager.setBlock(misBlock, setting), setting); + } + } + + } + + runtime.matrix = matrix; + runtime.totalRow = maxY; + runtime.totalCol = maxX; + } + }; + + + + window.freewall = function(selector) { + + var container = $(selector); + if (container.css('position') == 'static') { + container.css('position', 'relative'); + } + var MAX = Number.MAX_VALUE; + var klass = this; + // increase the instance index; + layoutManager.totalGrid += 1; + + var setting = $.extend({}, layoutManager.defaultConfig); + var runtime = { + blocks: {}, // store all items; + events: {}, // store custome events; + matrix: {}, + holes: {}, // forbidden zone; + + cellW: 0, + cellH: 0, // unit adjust; + cellS: 1, // unit scale; + + filter: '', // filter selector; + + lastId: 0, + length: 0, + + maxWoB: 0, // max width of block; + maxHoB: 0, + minWoB: MAX, + minHoB: MAX, // min height of block; + + running: 0, // flag to check layout arranging; + + gutterX: 15, + gutterY: 15, + + totalCol: 0, + totalRow: 0, + + limitCol: 666666, // maximum column; + limitRow: 666666, + + currentMethod: null, + currentArguments: [] + }; + setting.runtime = runtime; + runtime.totalGrid = layoutManager.totalGrid; + + // check browser support transition; + var bodyStyle = document.body.style; + if (!layoutManager.transition) { + (bodyStyle.webkitTransition != null || + bodyStyle.MozTransition != null || + bodyStyle.msTransition != null || + bodyStyle.OTransition != null || + bodyStyle.transition != null) && + (layoutManager.transition = true); + } + + + function setDraggable(item) { + + var gutterX = runtime.gutterX; + var gutterY = runtime.gutterY; + var cellH = runtime.cellH; + var cellW = runtime.cellW; + var $item = $(item); + var handle = $item.find($item.attr("data-handle")); + layoutManager.setDraggable(item, { + handle: handle[0], + onStart: function(event) { + if (setting.animate && layoutManager.transition) { + layoutManager.setTransition(this, ""); + } + $item.css('z-index', 9999).addClass('fw-float'); + }, + onDrag: function(evt, tracker) { + var position = $item.position(); + var top = Math.round(position.top / cellH); + var left = Math.round(position.left / cellW); + var width = Math.round($item.width() / cellW); + var height = Math.round($item.height() / cellH); + top = Math.min(Math.max(0, top), runtime.limitRow - height); + left = Math.min(Math.max(0, left), runtime.limitCol - width); + klass.setHoles({top: top, left: left, width: width, height: height}); + klass.refresh(); + }, + onDrop: function() { + var position = $item.position(); + var top = Math.round(position.top / cellH); + var left = Math.round(position.left / cellW); + var width = Math.round($item.width() / cellW); + var height = Math.round($item.height() / cellH); + top = Math.min(Math.max(0, top), runtime.limitRow - height); + left = Math.min(Math.max(0, left), runtime.limitCol - width); + + $item.removeClass('fw-float'); + $item.css({ + zIndex: "auto", + top: top * cellH, + left: left * cellW + }); + + //check old drag element; + var x, y, key, oldDropId; + for (y = 0; y < height; ++y) { + for (x = 0; x < width; ++x) { + key = (y + top) + "-" + (x + left); + oldDropId = runtime.matrix[key]; + if (oldDropId && oldDropId != true) { + $("#" + oldDropId).removeAttr("data-position"); + } + } + } + + runtime.holes = {}; + + $item.attr({ + "data-width": $item.width(), + "data-height": $item.height(), + "data-position": top + "-" + left + }); + + klass.refresh(); + } + }); + } + + + $.extend(klass, { + + addCustomEvent: function(name, func) { + var events = runtime.events; + name = name.toLowerCase(); + !events[name] && (events[name] = []); + func.eid = events[name].length; + events[name].push(func); + return this; + }, + + appendBlock: function(items) { + var allBlock = $(items).appendTo(container); + var block = null; + var activeBlock = []; + + if (runtime.currentMethod) { + allBlock.each(function(index, item) { + item.index = ++index; + if (block = layoutManager.loadBlock(item, setting)) { + activeBlock.push(block); + } + }); + + engine[setting.engine](activeBlock, setting); + + layoutManager.setWallSize(runtime, container); + + runtime.length = allBlock.length; + + allBlock.each(function(index, item) { + layoutManager.showBlock(item, setting); + if (setting.draggable || item.getAttribute('data-draggable')) { + setDraggable(item); + } + }); + } + }, + /* + add one or more blank area (hole) on layout; + example: + + wall.appendHoles({ + top: 10, + left: 36, + width: 2, + height: 6 + }); + + wall.appendHoles([ + { + top: 16, + left: 16, + width: 8, + height: 2 + }, + { + top: 10, + left: 36, + width: 2, + height: 6 + } + ]); + + */ + appendHoles: function(holes) { + var newHoles = [].concat(holes), h = {}, i; + for (i = 0; i < newHoles.length; ++i) { + h = newHoles[i]; + runtime.holes[h.top + "-" + h.left + "-" + h.width + "-" + h.height] = h; + } + return this; + }, + + container: container, + + destroy: function() { + var allBlock = container.find(setting.selector).removeAttr('id'), + block = null, + activeBlock = []; + + allBlock.each(function(index, item) { + $item = $(item); + var width = 1 * $item.attr('data-width') || ""; + var height = 1 * $item.attr('data-height') || ""; + $item.width(width).height(height).css({ + position: 'static' + }); + }); + }, + + fillHoles: function(holes) { + if (arguments.length == 0) { + runtime.holes = {}; + } else { + var newHoles = [].concat(holes), h = {}, i; + for (i = 0; i < newHoles.length; ++i) { + h = newHoles[i]; + delete runtime.holes[h.top + "-" + h.left + "-" + h.width + "-" + h.height]; + } + } + return this; + }, + + filter: function(filter) { + runtime.filter = filter; + runtime.currentMethod && this.refresh(); + return this; + }, + + fireEvent: function(name, object, setting) { + var events = runtime.events; + name = name.toLowerCase(); + if (events[name] && events[name].length) { + for (var i = 0; i < events[name].length; ++i) { + events[name][i].call(this, object, setting); + } + } + return this; + }, + + fitHeight: function(height) { + var allBlock = container.find(setting.selector).removeAttr('id'), + block = null, + activeBlock = []; + + height = height ? height : container.height() || $W.height(); + + runtime.currentMethod = arguments.callee; + runtime.currentArguments = arguments; + + layoutManager.resetGrid(runtime); + layoutManager.adjustUnit('auto', height, setting); + + if (runtime.filter) { + allBlock.data('active', 0); + allBlock.filter(runtime.filter).data('active', 1); + } else { + allBlock.data('active', 1); + } + + allBlock.each(function(index, item) { + var $item = $(item); + item.index = ++index; + if (block = layoutManager.loadBlock(item, setting)) { + $item.data("active") && activeBlock.push(block); + } + }); + + klass.fireEvent('onGridReady', container, setting); + + engine[setting.engine](activeBlock, setting); + + layoutManager.setWallSize(runtime, container); + + klass.fireEvent('onGridArrange', container, setting); + + runtime.length = allBlock.length; + + allBlock.each(function(index, item) { + layoutManager.showBlock(item, setting); + if (setting.draggable || item.getAttribute('data-draggable')) { + setDraggable(item); + } + }); + }, + + fitWidth: function(width) { + var allBlock = container.find(setting.selector).removeAttr('id'), + block = null, + activeBlock = []; + + width = width ? width : container.width() || $W.width(); + + runtime.currentMethod = arguments.callee; + runtime.currentArguments = arguments; + + layoutManager.resetGrid(runtime); + layoutManager.adjustUnit(width, 'auto', setting); + + if (runtime.filter) { + allBlock.data('active', 0); + allBlock.filter(runtime.filter).data('active', 1); + } else { + allBlock.data('active', 1); + } + + allBlock.each(function(index, item) { + var $item = $(item); + item.index = ++index; + if (block = layoutManager.loadBlock(item, setting)) { + $item.data("active") && activeBlock.push(block); + } + }); + + klass.fireEvent('onGridReady', container, setting); + + engine[setting.engine](activeBlock, setting); + + layoutManager.setWallSize(runtime, container); + + klass.fireEvent('onGridArrange', container, setting); + + runtime.length = allBlock.length; + + allBlock.each(function(index, item) { + layoutManager.showBlock(item, setting); + if (setting.draggable || item.getAttribute('data-draggable')) { + setDraggable(item); + } + }); + }, + + fitZone: function(width, height) { + var allBlock = container.find(setting.selector).removeAttr('id'), + block = null, + activeBlock = []; + + height = height ? height : container.height() || $W.height(); + width = width ? width : container.width() || $W.width(); + + runtime.currentMethod = arguments.callee; + runtime.currentArguments = arguments; + + layoutManager.resetGrid(runtime); + layoutManager.adjustUnit(width, height, setting); + + if (runtime.filter) { + allBlock.data('active', 0); + allBlock.filter(runtime.filter).data('active', 1); + } else { + allBlock.data('active', 1); + } + + allBlock.each(function(index, item) { + var $item = $(item); + item.index = ++index; + if (block = layoutManager.loadBlock(item, setting)) { + $item.data("active") && activeBlock.push(block); + } + }); + + klass.fireEvent('onGridReady', container, setting); + + engine[setting.engine](activeBlock, setting); + + layoutManager.setWallSize(runtime, container); + + klass.fireEvent('onGridArrange', container, setting); + + runtime.length = allBlock.length; + + allBlock.each(function(index, item) { + layoutManager.showBlock(item, setting); + if (setting.draggable || item.getAttribute('data-draggable')) { + setDraggable(item); + } + }); + }, + + /* + set block with special position, the top and left are multiple of unit width/height; + example: + + wall.fixPos({ + top: 0, + left: 0, + block: $('.free') + }); + */ + fixPos: function(option) { + $(option.block).attr({'data-position': option.top + "-" + option.left}); + return this; + }, + + /* + set block with special size, the width and height are multiple of unit width/height; + example: + + wall.fixSize({ + height: 5, + width: 2, + block: $('.free') + }); + */ + fixSize: function(option) { + option.height != null && $(option.block).attr({'data-height': option.height}); + option.width != null && $(option.block).attr({'data-width': option.width}); + return this; + }, + + prepend: function(items) { + container.prepend(items); + runtime.currentMethod && this.refresh(); + return this; + }, + + refresh: function() { + var params = arguments.length ? arguments : runtime.currentArguments; + runtime.currentMethod == null && (runtime.currentMethod = this.fitWidth); + runtime.currentMethod.apply(this, Array.prototype.slice.call(params, 0)); + return this; + }, + + /* + custom layout setting; + example: + + wall.reset({ + selector: '.brick', + animate: true, + cellW: 160, + cellH: 160, + delay: 50, + onResize: function() { + wall.fitWidth(); + } + }); + */ + reset: function(option) { + $.extend(setting, option); + return this; + }, + + /* + create one or more blank area (hole) on layout; + example: + + wall.setHoles({ + top: 2, + left: 2, + width: 2, + height: 2 + }); + */ + + setHoles: function(holes) { + var newHoles = [].concat(holes), h = {}, i; + runtime.holes = {}; + for (i = 0; i < newHoles.length; ++i) { + h = newHoles[i]; + runtime.holes[h.top + "-" + h.left + "-" + h.width + "-" + h.height] = h; + } + return this; + }, + + unFilter: function() { + delete runtime.filter; + this.refresh(); + return this; + } + }); + + container.attr('data-min-width', Math.floor($W.width() / 80) * 80); + // execute plugins; + for (var i in layoutManager.plugin) { + if (layoutManager.plugin.hasOwnProperty(i)) { + layoutManager.plugin[i].call(klass, setting, container); + } + } + + // setup resize event; + $W.resize(function() { + if (runtime.running) return; + runtime.running = 1; + setTimeout(function() { + runtime.running = 0; + setting.onResize.call(klass, container); + }, 122); + container.attr('data-min-width', Math.floor($W.width() / 80) * 80); + }); + }; + + /* + add default setting; + example: + + freewall.addConfig({ + offsetLeft: 0 + }); + */ + freewall.addConfig = function(newConfig) { + // add default setting; + $.extend(layoutManager.defaultConfig, newConfig); + }; + + + /* + support create new arrange algorithm; + example: + + freewall.createEngine({ + slice: function(items, setting) { + // slice engine; + } + }); + */ + freewall.createEngine = function(engineData) { + // create new engine; + $.extend(engine, engineData); + }; + + /* + support create new plugin; + example: + + freewall.createPlugin({ + centering: function(setting, container) { + console.log(this); + console.log(setting); + } + })l + */ + freewall.createPlugin = function(pluginData) { + // register new plugin; + $.extend(layoutManager.plugin, pluginData); + }; + + /* + support access helper function; + example: + + freewall.getMethod('setBlock')(block, setting); + */ + freewall.getMethod = function(method) { + // get helper method; + return layoutManager[method]; + }; + +})(window.Zepto || window.jQuery); diff --git a/public/js/home.js b/public/js/home.js new file mode 100644 index 0000000..e6dece8 --- /dev/null +++ b/public/js/home.js @@ -0,0 +1,44 @@ +// $(document).ready(function(){ +// // $(".test").css("display", "none"); + +// $(".book-set").hover(function(){ +// // window.alert("dafsdfsd"); +// $(".test").slideDown(); +// }); +// }); + +// var wall = new freewall("#freewall"); +// wall.reset({ +// selector: '#book1', +// animate: true, +// cellW: 200, +// cellH: 'auto', +// onResize: function() { +// wall.fitWidth(); +// } +// }); + +// wall.container.find('#book1 img').load(function() { +// wall.fitWidth(); +// }); + +// //call sliphover +// $('#freewall').sliphover(); + +var wall = new freewall("#container"); + wall.reset({ + selector: '.book-set', + animate: true, + cellW: 200, + cellH: 'auto', + onResize: function() { + wall.fitWidth(); + } + }); + + wall.container.find('.book-set img').load(function() { + wall.fitWidth(); + }); + + //call sliphover + $('#container').sliphover(); \ No newline at end of file diff --git a/public/js/index.js b/public/js/index.js new file mode 100644 index 0000000..0c92e45 --- /dev/null +++ b/public/js/index.js @@ -0,0 +1,10 @@ +/*! http://responsiveslides.com v1.54 by @viljamis */ +(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on", +w=d+"_s",k=c("