下拉菜单

.gitignore

@@ -14,3 +14,6 @@
 # Ignore all logfiles and tempfiles.
 /log/*.log
 /tmp
+
+/public/stylesheets/node_modules
+/public/stylesheets/*.map

README.md

@@ -1 +1,3 @@
-#Web Chatroom
+#Web Chatroom
+
+[![Join the chat at https://gitter.im/FreemanHsu/CloudChat](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/FreemanHsu/CloudChat?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

app/assets/javascripts/application.js

@@ -13,5 +13,4 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require_tree .
-//= require vendor/jquery.anystretch.min
+//= require_tree .

app/assets/javascripts/coffees/room_mems.js.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/javascripts/coffees/tag.js.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/javascripts/coffees/user_has_msg.js.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/javascripts/coffees/users.js.coffee

@@ -0,0 +1,3 @@
+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/stylesheets/application.css → app/assets/stylesheets/application.css.scss

@@ -13,4 +13,4 @@
  *= require_tree .
  *= require_self
  *= require font-awesome
- */
+ */

app/assets/stylesheets/sections/chat_log.css.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the ChatLog controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/sections/chatrooms.css.scss

@@ -0,0 +1,69 @@
+// Place all the styles related to the Chatrooms controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+.thumbnail{
+	margin-top: 20px;
+	margin-bottom: 0;
+	background-color: rgba(255,255,255,.5);
+	&:hover{
+		background-color: rgba(255,255,255,1);
+	}
+	p{
+		margin: 10px 0;
+		height: 60px;
+		border-top: 1px solid #eee;
+		border-bottom: 1px solid #eee;
+		font-weight: 400;
+	}
+	img{
+		width: 80px;
+		height: 80px;
+		border: 1px solid #eee;
+		border-radius: 50% 50%;
+		&:hover{
+			border: 2px solid #3297ff;
+			cursor: pointer;
+		}
+	}
+	h3{
+		margin-top: -5px;
+		text-align: center;
+		font-weight: 400;
+	}
+	a{
+		color: #000;
+		display: inline-block;
+		width: 60px;
+		height: 20px;
+		text-align: center;
+		background-color: #fff;
+		border-radius: 4px;
+		float: right;
+		&:hover{
+			text-decoration: none;
+			background-color: #3297ff;
+			color: #fff;
+		}
+	}
+}
+
+.home-page-roomtag{
+	height: 20px;
+	overflow: hidden;
+	margin-bottom: 10px;
+	span{
+		margin-right: 5px;
+		a{
+			float:none;
+			background:rgba(0,0,0,0);
+			&:hover{
+				background:rgba(0,0,0,0);
+			}
+		}
+		&:hover{
+			background-color: #337ab7;
+			cursor: pointer;
+		}
+	}
+}

app/assets/stylesheets/sections/homepage.css.scss

@@ -1,18 +1,108 @@
 // Place all the styles related to the homepage controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
-.home-banner {
-	.site-nav{
-		position: relative;
+
+.homepage-index{
+	background-color: #f1f0ed;
+}
+
+.jumbotron{
+	height: 600px;
+	background: none;
+	&:after{
+		min-height: 600px;
+		max-height: 600px;
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
 		left: 0;
+		bottom: 0;
 		right: 0;
-		top: 0;
-		z-index: 9999;
-		padding-top: 60px;
+		background: image-url("cloudbg.jpg") center center;
+		background-size: cover;
+		z-index: -9999;
+	}
+	font-family: DP,sans-serif;
+	color: #fff;
+	h1{
+		font-size: 5em;
+		span{
+			font-weight: 700;
+		}
+	}
+	p{
+		margin: 5px 0;
+		font-size: 1.5em;
+		font-weight: 300;
+	}
+}
+
+.sign-btn{
+	height: 54px;
+	width: 290px;
+	margin-top: 45px;
+	a{	
+		text-align: center;
+		display: inline-block;
+		position: relative;
+		padding: 18px 0;
+		font-size: 18px;
+		font-weight: 600;
+		letter-spacing: 2px;
+		line-height: 1;
+		height: 100%;
+		width: 100%;
+		border-radius: 5px;
+		background-color: #fff;
+		color: rgba(50,151,255,1);
+		font-family: proxima-nova-alt,Proxima Nova Alt,sans-serif;
+		border-bottom: 4px solid #eee;
+		border-left: 2px solid #eee;
+		&:hover{
+			text-decoration: none;
+			border-bottom: 2px solid #eee;
+			border-left: none;
+		}
+	}
+}
+
+#explore{
+	position: relative;
+	margin-top: -40px;
+	padding-top: 0px;
+	height: 60px;
+	background-color: #dbd8d0;
+	p{
+		color: #7d7669;
+		padding-top: 20px;
+		font-size: 1em;
+		text-align: center;
+		font-weight: 700;
 	}
-  	.banner-inner {
-  		margin: 0 auto;
-    	height: 800px;
-    	position: relative;
-  	}
+}
+
+.login-btn{
+	position: absolute;
+	right: 50px;
+	top: 50px;
+	a{
+		cursor: pointer;
+		display: block;
+		width: 220px;
+		height: 40px;
+		border: 2px solid #fff;
+		border-radius: 4px;
+		background-color: rgba(50,151,255,0);
+		color: #fff;
+		text-decoration: none;
+		text-align: center;
+		font-size: 14px;
+		padding: 9px 0;
+		&:hover{
+			cursor: pointer;
+			background-color: #fff;
+			color: rgba(50,151,255,1);
+		}
+	}	
 }

app/assets/stylesheets/sections/message.css.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the message controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/sections/room_mems.css.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the room_mems controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/sections/tag.css.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the Tag controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/sections/user_has_msg.css.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the UserHasMsg controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/sections/users.css.scss

@@ -1,3 +1,3 @@
 // Place all the styles related to the users controller here.
 // They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+// You can use Sass (SCSS) here: http://sass-lang.com/