Added the search box

src/Maintained/Application/View/home.twig

@@ -29,12 +29,23 @@
 
             <div class="row">
                 <div class="col-lg-8 col-lg-offset-2">
-                    <div class="input-group input-group-lg">
-                        <input type="text" class="form-control" placeholder="user/repository">
-                        <span class="input-group-btn">
-                            <button type="button" class="btn btn-default">Search</button>
-                        </span>
-                    </div>
+                    <form id="search">
+                        <div class="form-group input-group input-group-lg">
+                            <input id="search-input" type="text" class="form-control" placeholder="user/repository">
+                            <span class="input-group-btn">
+                                <button type="submit" class="btn btn-default">Search</button>
+                            </span>
+                        </div>
+
+                        <div class="alert alert-warning collapse">
+                            You must enter a valid repository name (<code>user/repository</code>).
+                        </div>
+
+                        <div class="result well collapse">
+                            <h4></h4>
+                            <img src="">
+                        </div>
+                    </form>
                 </div>
             </div>
 

src/Maintained/Application/View/layout.twig

@@ -12,7 +12,7 @@
 
     <link href="/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
 
-    <link href="/css/freelancer.css" rel="stylesheet">
+    <link href="/css/theme.css" rel="stylesheet">
 
     <link href="/vendor/fontawesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
     <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
@@ -61,6 +61,7 @@
 
     <script src="/vendor/jquery/dist/jquery.min.js"></script>
     <script src="/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
+    <script src="/js/search.js"></script>
 </body>
 
 </html>

web/js/search.js

@@ -0,0 +1,21 @@
+$(function () {
+    $('#search').submit(function (e) {
+        e.preventDefault();
+
+        $(this).find('.alert-warning').hide();
+        var resultDiv = $(this).find('.result');
+        resultDiv.empty()
+            .hide();
+
+        var repository = $(this).find('#search-input').val();
+
+        if (repository.length === 0 || repository.indexOf('/') === -1) {
+            $(this).find('.alert-warning').show();
+            return;
+        }
+
+        resultDiv.append('<h4>' + repository + '</h4>')
+            .append('<img src="/badge/' + repository + '.svg">')
+            .show();
+    });
+});