├── images ├── profile.jpg ├── login_bg4.png └── select2 │ ├── select2.png │ ├── select2x2.png │ └── select2-spinner.gif ├── fonts └── font-awesome │ ├── FontAwesome.otf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.ttf │ └── fontawesome-webfont.woff ├── README.md ├── js ├── main.js ├── index.js ├── dataTables.bootstrap.js ├── jquery.knob.min.js └── bootstrap-select.min.js ├── login.html ├── css ├── select2-bootstrap.css ├── login.css ├── bootstrap-select.min.css ├── awesome-bootstrap-checkbox.css ├── theme.css ├── jquery.dataTables.min.css ├── style.css ├── font-awesome.min.css └── select2.css ├── register.html ├── custom-dashboard.html ├── index.html └── form.html /images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dulumao/flat-admin-bootstrap-templates/HEAD/images/profile.jpg -------------------------------------------------------------------------------- /images/login_bg4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dulumao/flat-admin-bootstrap-templates/HEAD/images/login_bg4.png -------------------------------------------------------------------------------- /images/select2/select2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dulumao/flat-admin-bootstrap-templates/HEAD/images/select2/select2.png -------------------------------------------------------------------------------- /images/select2/select2x2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dulumao/flat-admin-bootstrap-templates/HEAD/images/select2/select2x2.png -------------------------------------------------------------------------------- /fonts/font-awesome/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dulumao/flat-admin-bootstrap-templates/HEAD/fonts/font-awesome/FontAwesome.otf -------------------------------------------------------------------------------- /images/select2/select2-spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dulumao/flat-admin-bootstrap-templates/HEAD/images/select2/select2-spinner.gif -------------------------------------------------------------------------------- /fonts/font-awesome/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dulumao/flat-admin-bootstrap-templates/HEAD/fonts/font-awesome/fontawesome-webfont.eot -------------------------------------------------------------------------------- /fonts/font-awesome/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dulumao/flat-admin-bootstrap-templates/HEAD/fonts/font-awesome/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /fonts/font-awesome/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dulumao/flat-admin-bootstrap-templates/HEAD/fonts/font-awesome/fontawesome-webfont.woff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flat Admin Bootstrap Templates 2 | Completely free bootstrap templates with Bootstrap 3. 3 | 4 | - Awesome plugin. such as dataTable.js , bootstrap-select.js, chart.js 5 | - Resposive admin templates for all devices. 6 | 7 | Screenshot 8 | ![SS](http://templates.tui2tone.me/assets/img/flat-admin/flat-admin.png) 9 | 10 | [Live Demo](http://www.tui2tone.me/flat-admin-bootstrap-templates/) 11 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | // Toggle Sidebar 2 | 3 | $(function() { 4 | $(".toggle-sidebar").bind('click', function() { 5 | $("body").toggleClass("sidebar-collapse"); 6 | }); 7 | 8 | 9 | $(function() { 10 | $(".dial").knob(); 11 | }); 12 | }); 13 | 14 | $(function() { 15 | $(".dropdown").hover( 16 | function() { 17 | $('.dropdown-menu', this).stop(true, true).fadeIn("fast"); 18 | $(this).toggleClass('open'); 19 | $('b', this).toggleClass("caret caret-up"); 20 | }, 21 | function() { 22 | $('.dropdown-menu', this).stop(true, true).fadeOut("fast"); 23 | $(this).toggleClass('open'); 24 | $('b', this).toggleClass("caret caret-up"); 25 | }); 26 | }); 27 | 28 | // Load More 29 | $(function() { 30 | $("#message-load-more").bind('click', function() { 31 | $("#message-load-more .fa").toggleClass("fa-spin"); 32 | return false; 33 | }); 34 | }); 35 | 36 | // Select2 & Bootstrap-select 37 | $(function() { 38 | $('.selectpicker').selectpicker(); 39 | }); 40 | -------------------------------------------------------------------------------- /js/index.js: -------------------------------------------------------------------------------- 1 | 2 | // Chart.JS 3 | $(function() { 4 | Chart.defaults.global.responsive = true; 5 | 6 | var ctx = $("#dashboard-order-chart").get(0).getContext("2d"); 7 | var ctx2 = $("#dashboard-stat-chart").get(0).getContext("2d"); 8 | var options = { 9 | bezierCurve: false, 10 | pointDotRadius : 8, 11 | datasetStroke : true, 12 | datasetStrokeWidth : 2, 13 | scaleGridLineColor : "rgba(0,0,0,.05)", 14 | scaleFontColor: "#666", 15 | scaleLineColor: "rgba(0,0,0,0)", 16 | scaleShowVerticalLines: false, 17 | scaleShowGridLines : true, 18 | scaleOverride: false, 19 | scaleSteps: 10, 20 | pointDotStrokeWidth : 2, 21 | 22 | } 23 | 24 | var options2 = { 25 | percentageInnerCutout : 75, 26 | legendTemplate : "" 27 | } 28 | var data = { 29 | labels: ["January", "February", "March", "April", "May", "June", "July"], 30 | datasets: [ 31 | { 32 | label: "My First dataset", 33 | fillColor: "rgba(0,177,106,0.3)", 34 | strokeColor: "rgba(0,177,106,1)", 35 | pointColor: "#FFF", 36 | pointStrokeColor: "rgba(0,177,106,1)", 37 | pointHighlightFill: "#fff", 38 | pointHighlightStroke: "rgba(220,220,220,1)", 39 | data: [65, 59, 80, 81, 56, 55, 40] 40 | } 41 | ] 42 | }; 43 | 44 | var data2 = [ 45 | { 46 | value: 50, 47 | color:"#F64747", 48 | highlight: "#ed2323", 49 | label: "Mails" 50 | }, 51 | { 52 | value: 23, 53 | color: "#ff9704", 54 | highlight: "#ff7200", 55 | label: "Messages" 56 | }, 57 | { 58 | value: 280, 59 | color: "#00B16A", 60 | highlight: "#01a250", 61 | label: "Views" 62 | } 63 | ] 64 | 65 | var myLineChart = new Chart(ctx).Line(data, options); 66 | var myBarChart = new Chart(ctx2).Doughnut(data2, options2); 67 | var legend = myBarChart.generateLegend(); 68 | $("#dashboard-stat-chart-legend").append(legend); 69 | }); -------------------------------------------------------------------------------- /login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flat Admin - Bootstrap Themes 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |

Flat Admin

27 | 32 | 35 |
36 |
37 | 38 | 39 |
40 |
Email Address
41 | 42 |
43 |
44 |
Password
45 | 46 |
47 | 50 |
51 |
52 |
53 | Create new account 54 | Forgot password? 55 |
56 |
57 |
58 |
59 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /css/select2-bootstrap.css: -------------------------------------------------------------------------------- 1 | .form-control .select2-choice { 2 | border: 0; 3 | border-radius: 2px; 4 | } 5 | 6 | .form-control .select2-choice .select2-arrow { 7 | border-radius: 0 2px 2px 0; 8 | } 9 | 10 | .form-control.select2-container { 11 | height: auto !important; 12 | padding: 0; 13 | } 14 | 15 | .form-control.select2-container.select2-dropdown-open { 16 | border-color: #5897FB; 17 | border-radius: 3px 3px 0 0; 18 | } 19 | 20 | .form-control .select2-container.select2-dropdown-open .select2-choices { 21 | border-radius: 3px 3px 0 0; 22 | } 23 | 24 | .form-control.select2-container .select2-choices { 25 | border: 0 !important; 26 | border-radius: 3px; 27 | } 28 | 29 | .control-group.warning .select2-container .select2-choice, 30 | .control-group.warning .select2-container .select2-choices, 31 | .control-group.warning .select2-container-active .select2-choice, 32 | .control-group.warning .select2-container-active .select2-choices, 33 | .control-group.warning .select2-dropdown-open.select2-drop-above .select2-choice, 34 | .control-group.warning .select2-dropdown-open.select2-drop-above .select2-choices, 35 | .control-group.warning .select2-container-multi.select2-container-active .select2-choices { 36 | border: 1px solid #C09853 !important; 37 | } 38 | 39 | .control-group.warning .select2-container .select2-choice div { 40 | border-left: 1px solid #C09853 !important; 41 | background: #FCF8E3 !important; 42 | } 43 | 44 | .control-group.error .select2-container .select2-choice, 45 | .control-group.error .select2-container .select2-choices, 46 | .control-group.error .select2-container-active .select2-choice, 47 | .control-group.error .select2-container-active .select2-choices, 48 | .control-group.error .select2-dropdown-open.select2-drop-above .select2-choice, 49 | .control-group.error .select2-dropdown-open.select2-drop-above .select2-choices, 50 | .control-group.error .select2-container-multi.select2-container-active .select2-choices { 51 | border: 1px solid #B94A48 !important; 52 | } 53 | 54 | .control-group.error .select2-container .select2-choice div { 55 | border-left: 1px solid #B94A48 !important; 56 | background: #F2DEDE !important; 57 | } 58 | 59 | .control-group.info .select2-container .select2-choice, 60 | .control-group.info .select2-container .select2-choices, 61 | .control-group.info .select2-container-active .select2-choice, 62 | .control-group.info .select2-container-active .select2-choices, 63 | .control-group.info .select2-dropdown-open.select2-drop-above .select2-choice, 64 | .control-group.info .select2-dropdown-open.select2-drop-above .select2-choices, 65 | .control-group.info .select2-container-multi.select2-container-active .select2-choices { 66 | border: 1px solid #3A87AD !important; 67 | } 68 | 69 | .control-group.info .select2-container .select2-choice div { 70 | border-left: 1px solid #3A87AD !important; 71 | background: #D9EDF7 !important; 72 | } 73 | 74 | .control-group.success .select2-container .select2-choice, 75 | .control-group.success .select2-container .select2-choices, 76 | .control-group.success .select2-container-active .select2-choice, 77 | .control-group.success .select2-container-active .select2-choices, 78 | .control-group.success .select2-dropdown-open.select2-drop-above .select2-choice, 79 | .control-group.success .select2-dropdown-open.select2-drop-above .select2-choices, 80 | .control-group.success .select2-container-multi.select2-container-active .select2-choices { 81 | border: 1px solid #468847 !important; 82 | } 83 | 84 | .control-group.success .select2-container .select2-choice div { 85 | border-left: 1px solid #468847 !important; 86 | background: #DFF0D8 !important; 87 | } 88 | -------------------------------------------------------------------------------- /css/login.css: -------------------------------------------------------------------------------- 1 | body{ 2 | font-family: 'Lato', sans-serif; 3 | background-image: url(../images/login_bg4.png) 4 | } 5 | 6 | * { 7 | color: #FFF; 8 | } 9 | 10 | div h3 span{ 11 | color : #FFF; 12 | font-size:12px; 13 | } 14 | 15 | div span { 16 | font-weight: 200; 17 | } 18 | 19 | h1{ 20 | font-weight: 200; 21 | } 22 | 23 | .login-box { 24 | min-width: 350px; 25 | position:absolute; 26 | top:50%; 27 | left:50%; 28 | transform: translate(-50%, -50%); 29 | padding: 0; 30 | } 31 | 32 | .login-box > .title { 33 | color: #FFF; 34 | font-weight: 300; 35 | } 36 | 37 | .login-box > .box { 38 | background: #FFF; 39 | width: 350px; 40 | } 41 | 42 | .text-left { 43 | float: left; 44 | } 45 | 46 | .text-right { 47 | float: right; 48 | } 49 | .clear-both { 50 | clear: both; 51 | } 52 | 53 | .login-box > .info-box { 54 | margin-top: 5px; 55 | } 56 | 57 | .login-box > .info-box a { 58 | color: #FFF; 59 | text-decoration: none; 60 | } 61 | .login-box > .info-box a:hover { 62 | color: #6abafe; 63 | } 64 | 65 | .login_control{ 66 | background-color:#FFF; 67 | padding:0px; 68 | 69 | } 70 | 71 | .control { 72 | color:#000; 73 | margin:0px; 74 | border-bottom: 0px solid #EEE; 75 | padding: 0; 76 | padding-top: 10px; 77 | padding-bottom: 10px; 78 | 79 | } 80 | 81 | .label { 82 | color: #EB4F26; 83 | font-size: 12px; 84 | font-weight: 500; 85 | padding-left: 15px; 86 | } 87 | 88 | .form-control{ 89 | background-color: #F4F4F4; 90 | color: #000000 !important; 91 | font-size: 18px; 92 | border: none; 93 | padding: 25px; 94 | padding-left: 15px; 95 | border-bottom: 0px solid #CCC; 96 | margin-bottom: 0px; 97 | border-radius: 0; 98 | outline: none; 99 | -webkit-box-shadow: none !important; 100 | -moz-box-shadow: none !important; 101 | box-shadow: none !important; 102 | } 103 | 104 | .form-control:focus{ 105 | border-radius: 0px; 106 | border-bottom: 0px solid #FC563B; 107 | margin-bottom: 0px; 108 | outline: none; 109 | -webkit-box-shadow: none !important; 110 | -moz-box-shadow: none !important; 111 | box-shadow: none !important; 112 | } 113 | .login-button { 114 | padding: 10px; 115 | padding-top: 0px; 116 | } 117 | .btn-orange { 118 | font-weight: 300; 119 | background-color: #F64747; 120 | border-radius: 0px; 121 | margin: 0px; 122 | padding: 15px; 123 | width: 100%; 124 | font-size: 16px; 125 | font-weight: inherit; 126 | color: #FFF; 127 | } 128 | 129 | .btn-orange:hover { 130 | background-color: #ee391b; 131 | color: #FFF; 132 | } 133 | 134 | 135 | /* 136 | Alert 137 | */ 138 | 139 | .alert { 140 | margin-bottom: 0px; 141 | border-radius: 0; 142 | border:0px; 143 | color: #FFF; 144 | margin-bottom: 5px; 145 | } 146 | 147 | .alert.alert-success { 148 | background-color: #00B16A; 149 | border-bottom:0px solid #FFF; 150 | } 151 | 152 | .alert.alert-info { 153 | background-color: #22A7F0; 154 | border-bottom:0px solid #22A7F0; 155 | } 156 | 157 | .alert.alert-warning { 158 | background-color: #F39C12; 159 | border-bottom:0px solid #F39C12; 160 | } 161 | 162 | .alert.alert-danger { 163 | background-color: #F1654C; 164 | border-bottom:0px solid #F1654C; 165 | } 166 | 167 | 168 | .progress { 169 | border-radius: 0px; 170 | margin-bottom: 0px; 171 | box-shadow: none; 172 | margin-bottom: 5px; 173 | } 174 | 175 | .progress .progress-bar-success { 176 | background-color: #00B16A; 177 | } 178 | 179 | .progress .progress-bar-info { 180 | background-color: #22A7F0; 181 | } 182 | 183 | .progress .progress-bar-warning { 184 | background-color: #F39C12; 185 | } 186 | 187 | .progress .progress-bar-danger { 188 | background-color: #F1654C; 189 | } -------------------------------------------------------------------------------- /register.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Flat Admin - Bootstrap Themes 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |

Create new account

27 | 28 | 33 | 36 |
37 |
38 | 39 |
40 |
Firstname
41 | 42 |
43 |
44 |
Lastname
45 | 46 |
47 |
48 |
Email Address
49 | 50 |
51 |
52 |
Password
53 | 54 |
55 |
56 |
Confirm Password
57 | 58 |
59 | 62 |
63 |
64 |
65 | Already have account. Log in. 66 |
67 |
68 |
69 |
70 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /js/dataTables.bootstrap.js: -------------------------------------------------------------------------------- 1 | /*! DataTables Bootstrap 3 integration 2 | * ©2011-2014 SpryMedia Ltd - datatables.net/license 3 | */ 4 | 5 | /** 6 | * DataTables integration for Bootstrap 3. This requires Bootstrap 3 and 7 | * DataTables 1.10 or newer. 8 | * 9 | * This file sets the defaults and adds options to DataTables to style its 10 | * controls using Bootstrap. See http://datatables.net/manual/styling/bootstrap 11 | * for further information. 12 | */ 13 | (function(window, document, undefined){ 14 | 15 | var factory = function( $, DataTable ) { 16 | "use strict"; 17 | 18 | 19 | /* Set the defaults for DataTables initialisation */ 20 | $.extend( true, DataTable.defaults, { 21 | dom: 22 | "<'row'<'col-sm-6'l><'col-sm-6'f>>" + 23 | "<'row'<'col-sm-12'tr>>" + 24 | "<'row'<'col-sm-6'i><'col-sm-6'p>>", 25 | renderer: 'bootstrap' 26 | } ); 27 | 28 | 29 | /* Default class modification */ 30 | $.extend( DataTable.ext.classes, { 31 | sWrapper: "dataTables_wrapper form-inline dt-bootstrap", 32 | sFilterInput: "form-control input-sm", 33 | sLengthSelect: "form-control input-sm" 34 | } ); 35 | 36 | 37 | /* Bootstrap paging button renderer */ 38 | DataTable.ext.renderer.pageButton.bootstrap = function ( settings, host, idx, buttons, page, pages ) { 39 | var api = new DataTable.Api( settings ); 40 | var classes = settings.oClasses; 41 | var lang = settings.oLanguage.oPaginate; 42 | var btnDisplay, btnClass; 43 | 44 | var attach = function( container, buttons ) { 45 | var i, ien, node, button; 46 | var clickHandler = function ( e ) { 47 | e.preventDefault(); 48 | if ( !$(e.currentTarget).hasClass('disabled') ) { 49 | api.page( e.data.action ).draw( false ); 50 | } 51 | }; 52 | 53 | for ( i=0, ien=buttons.length ; i 0 ? 72 | '' : ' disabled'); 73 | break; 74 | 75 | case 'previous': 76 | btnDisplay = lang.sPrevious; 77 | btnClass = button + (page > 0 ? 78 | '' : ' disabled'); 79 | break; 80 | 81 | case 'next': 82 | btnDisplay = lang.sNext; 83 | btnClass = button + (page < pages-1 ? 84 | '' : ' disabled'); 85 | break; 86 | 87 | case 'last': 88 | btnDisplay = lang.sLast; 89 | btnClass = button + (page < pages-1 ? 90 | '' : ' disabled'); 91 | break; 92 | 93 | default: 94 | btnDisplay = button + 1; 95 | btnClass = page === button ? 96 | 'active' : ''; 97 | break; 98 | } 99 | 100 | if ( btnDisplay ) { 101 | node = $('
  • ', { 102 | 'class': classes.sPageButton+' '+btnClass, 103 | 'aria-controls': settings.sTableId, 104 | 'tabindex': settings.iTabIndex, 105 | 'id': idx === 0 && typeof button === 'string' ? 106 | settings.sTableId +'_'+ button : 107 | null 108 | } ) 109 | .append( $('', { 110 | 'href': '#' 111 | } ) 112 | .html( btnDisplay ) 113 | ) 114 | .appendTo( container ); 115 | 116 | settings.oApi._fnBindAction( 117 | node, {action: button}, clickHandler 118 | ); 119 | } 120 | } 121 | } 122 | }; 123 | 124 | attach( 125 | $(host).empty().html('