Add ui component

.gitignore

@@ -7,6 +7,8 @@
 .lib/
 dist/*
 target/
+.idea/*
+src/main/resources/node_modules/*
 lib_managed/
 src_managed/
 project/boot/

README.md

@@ -1,3 +1,5 @@
 # lyrics-engine
 
-[![Join the chat at https://gitter.im/scalalab3/lyrics-engine](https://badges.gitter.im/scalalab3/lyrics-engine.svg)](https://gitter.im/scalalab3/lyrics-engine?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Join the chat at https://gitter.im/scalalab3/lyrics-engine](https://badges.gitter.im/scalalab3/lyrics-engine.svg)](https://gitter.im/scalalab3/lyrics-engine?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
+

api/README.markdown

@@ -3,6 +3,14 @@
 Launch SBT:
 
         $ sbt
+
+Build UI component
+
+        $ cd lyrics-engine/api/src/main/resources
+        $ npm install
+        $ grunt
+        $ ls lyrics-engine/api/src/main/resources/js/scripts/ (home.js, recommend.js)
+
 
 To compile everything and run all tests:
 
@@ -14,4 +22,7 @@ To start the application:
 
 To stop the application:
 
-        > re-stop
+        > re-stop
+
+
+An example of our site you can see by the link **/lyrics-engine/examples**

api/build.sbt

@@ -16,8 +16,10 @@ libraryDependencies ++= {
     "io.spray"            %%  "spray-testkit" % sprayV  % "test",
     "com.typesafe.akka"   %%  "akka-actor"    % akkaV,
     "com.typesafe.akka"   %%  "akka-testkit"  % akkaV   % "test",
-    "org.specs2"          %%  "specs2-core"   % "2.3.11" % "test"
+    "org.specs2"          %%  "specs2-core"   % "2.3.11" % "test",
+    "io.spray" %% "spray-json" % "1.3.2"
   )
 }
 
+
 Revolver.settings

api/src/main/resources/Gruntfile.js

@@ -0,0 +1,33 @@
+module.exports = function(grunt) {
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+
+        watch: {
+            react: {
+                files: 'js/react_components/*.jsx',
+                tasks: ['browserify']
+            }
+        },
+
+        browserify: {
+            options: {
+                transform: [ require('grunt-react').browserify ]
+            },
+            client: {
+                src: ['js/react_components/*.jsx', 'js/react_components/modules/Home.jsx'],
+                dest: 'js/scripts/home.js'
+            },
+            js: {
+                src: ['js/react_components/*.jsx', 'js/react_components/modules/Recommend.jsx'],
+                dest: 'js/scripts/recommend.js'
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-browserify');
+    grunt.loadNpmTasks('grunt-contrib-watch');
+
+    grunt.registerTask('default', [
+        'browserify'
+    ]);
+};

api/src/main/resources/application.conf

@@ -4,4 +4,8 @@ akka {
 
 spray.can.server {
   request-timeout = 1s
+}
+http {
+  interface = "0.0.0.0"
+  port = 9000
 }

api/src/main/resources/css/form.css

@@ -0,0 +1,91 @@
+.form-style-3{
+    align-items:center;
+    max-width: 450px;
+    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+}
+.form-style-3 label{
+    display:block;
+    margin-bottom: 10px;
+}
+.form-style-3 label > span{
+    float: left;
+    width: 100px;
+    color: #f0d215;
+    font-weight: bold;
+    font-size: 13px;
+    text-shadow: 1px 1px 1px #fff;
+}
+.form-style-3 fieldset{
+    border-radius: 10px;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    margin: 0px 0px 10px 0px;
+    border: 1px solid #f8ff5f;
+    padding: 20px;
+    background: rgba(128, 119, 65, 0.96);;
+    box-shadow: inset 0px 0px 15px #fff8ad;
+    -moz-box-shadow: inset 0px 0px 15px #fff0bd;
+    -webkit-box-shadow: inset 0px 0px 15px #fcffd2;
+}
+.form-style-3 fieldset legend{
+    color: #EBA909;
+    border-top: 1px solid #fffabd;
+    border-left: 1px solid #feffc5;
+    border-right: 1px solid #fffec9;
+    border-radius: 5px 5px 0px 0px;
+    -webkit-border-radius: 5px 5px 0px 0px;
+    -moz-border-radius: 5px 5px 0px 0px;
+    background: #FFF4F4;
+    padding: 0px 8px 3px 8px;
+    box-shadow: -0px -1px 2px #F1F1F1;
+    -moz-box-shadow:-0px -1px 2px #F1F1F1;
+    -webkit-box-shadow:-0px -1px 2px #F1F1F1;
+    font-weight: normal;
+    font-size: 15px;
+}
+.form-style-3 textarea{
+    width:250px;
+    height:100px;
+}
+.form-style-3 input[type=text],
+.form-style-3 input[type=date],
+.form-style-3 input[type=datetime],
+.form-style-3 input[type=number],
+.form-style-3 input[type=search],
+.form-style-3 input[type=time],
+.form-style-3 input[type=url],
+.form-style-3 input[type=email],
+.form-style-3 select,
+.form-style-3 textarea{
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    border: 1px solid #ffee7a;
+    outline: none;
+    color: #f09c18;
+    padding: 5px 8px 5px 8px;
+    box-shadow: inset 1px 1px 4px #ffea62;
+    -moz-box-shadow: inset 1px 1px 4px #ffff9d;
+    -webkit-box-shadow: inset 1px 1px 4px #fffdae;
+    background: #fffef0;
+    width:50%;
+}
+.form-style-3  input[type=submit],
+.form-style-3  input[type=button]{
+    background: #eba909;
+    border: 1px solid #c9610b;
+    padding: 5px 15px 5px 15px;
+    color: #ffe275;
+    box-shadow: inset -1px -1px 3px #ffc920;
+    -moz-box-shadow: inset -1px -1px 3px #ffda25;
+    -webkit-box-shadow: inset -1px -1px 3px #ffe85e;
+    border-radius: 3px;
+    border-radius: 3px;
+    -webkit-border-radius: 3px;
+    -moz-border-radius: 3px;
+    font-weight: bold;
+}
+.required{
+    color: #ffbe29;
+    font-weight:normal;
+}