Keyboard shortcut feeling

README.md

@@ -1,3 +1,11 @@
 # Todo App
 
 Simple Todo Application
+
+
+## Quick Start
+- `composer install`
+- create `.env` file
+- `php artisan key:generate`
+- `php artisan migrate`
+- `php artisan db:seed`

resources/views/home.blade.php

@@ -9,27 +9,82 @@
 @endsection
 
 @section('top-button')
-    <button class="btn btn-info btn-sm">
-        Create Directory
+    <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-default">
+        Create Todo
     </button>
 @endsection
 
+@section('css')
+    <style>
+        .widget-user {
+            cursor: pointer;
+        }
+    </style>
+@endsection
+
 @section('content')
-    <input type="text" class="form-control" placeholder="Search"/>
+    <input type="text" class="form-control" placeholder="Search" id="search-todo"/>
     <br/>
     <!-- /.box -->
     <div class="row">
-        <div class="col-md-3 col-sm-6 col-xs-12">
-            <div class="info-box">
-                <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span>
-
-                <div class="info-box-content">
-                    <span class="info-box-text">Bookmarks</span>
-                    <span class="info-box-number">410</span>
+        <div class="col-md-4 col-sm-6 col-xs-12">
+            <div class="box box-widget widget-user">
+                <!-- Add the bg color to the header using any of the bg-* classes -->
+                <div class="widget-user-header bg-aqua-active">
+                    <h3 class="widget-user-username">Alexander Pierce</h3>
+                    <h5 class="widget-user-desc">Founder &amp; CEO</h5>
                 </div>
-                <!-- /.info-box-content -->
             </div>
-            <!-- /.info-box -->
         </div>
     </div>
+
+    <div class="modal fade" id="modal-default">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">Default Modal</h4>
+                </div>
+                <div class="modal-body">
+                    <p>One fine body&hellip;</p>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
+                    <button type="button" class="btn btn-primary">Save changes</button>
+                </div>
+            </div>
+            <!-- /.modal-content -->
+        </div>
+        <!-- /.modal-dialog -->
+    </div>
+    <!-- /.modal -->
+@endsection
+
+@section('js')
+    <script type="application/javascript">
+        $(document).bind('keydown', function (e) {
+            // CTRL + S
+            if (e.ctrlKey && e.which === 83) {
+                toastr.error("Prevented");
+                return false;
+            }
+
+            // CTRL + F
+            if (e.ctrlKey && e.which === 70) {
+                $("#search-todo").focus();
+                return false;
+            }
+
+            // CTRL + N
+            if (e.shiftKey && e.which === 78) {
+                $("#modal-default").modal('show');
+                return false;
+            }
+        });
+
+        $(document).ready(function () {
+
+        });
+    </script>
 @endsection

resources/views/layout/admin.blade.php

@@ -52,9 +52,27 @@
                 <div class="collapse navbar-collapse pull-left" id="navbar-collapse">
                     <ul class="nav navbar-nav">
                         <li><a href="/home"><i class="fa fa-home"></i>&nbsp;Home</a></li>
-                        <li><a href="#" id="logout-button"><i class="fa fa-sign-out"></i>&nbsp;Sign Out</a></li>
+                        <li><a href="#" class="logout-button visible-xs"><i class="fa fa-sign-out"></i>&nbsp;Sign
+                                Out</a>
+                        </li>
                     </ul>
                 </div>
+
+                <div class="navbar-custom-menu">
+                    <ul class="nav navbar-nav">
+                        <!-- User Account Menu -->
+                        <li class="dropdown user user-menu hidden-xs">
+                            <!-- Menu Toggle Button -->
+                            <a href="#" class="dropdown-toggle logout-button">
+                                <!-- The user image in the navbar-->
+                                <img src="{{asset('vector/avatar.svg')}}" class="user-image" alt="User Image">
+                                <!-- hidden-xs hides the username on small devices so only the image appears. -->
+                                <span>{{ Session::get('name') }}</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <!-- /.navbar-custom-menu -->
             </div>
             <!-- /.container-fluid -->
         </nav>
@@ -115,7 +133,7 @@
 
 <script type="application/javascript">
     $(document).ready(function () {
-        $("#logout-button").on('click', function () {
+        $(".logout-button").on('click', function () {
             swal({
                 title: "Do you want to sign out ?",
                 buttons: ["No", "Yes"],