Options Admin - Responsive Web Application Kit

1,411Comments

<a class="dashboard-stat-2 bg-primary" href="#">    <div class="stat-content">        <span class="number counter">1,411</span>        <span class="name">Comments</span>    </div>    <span class="stat-footer"><i class="fa fa-arrow-up color-success"></i> 5% growth in 3 hours</span></a><!-- /.dashboard-stat-2 --><!-- ========== JS ========== --><script>    $(function(){        $('.counter').counterUp();    });</script>

322Total Tickets

<a class="dashboard-stat-2 bg-danger" href="#">    <div class="stat-content">        <span class="number counter">322</span>        <span class="name">Total Tickets</span>    </div>    <span class="stat-footer"><i class="fa fa-arrow-down color-success"></i> 3% decrease in 3 hours</span></a><!-- /.dashboard-stat-2 --><!-- ========== JS ========== --><script>    $(function(){        $('.counter').counterUp();    });</script>

5,551Bank Credits

<a class="dashboard-stat-2 bg-warning" href="#">    <div class="stat-content">        <span class="number counter">5,551</span>        <span class="name">Bank Credits</span>    </div>    <span class="stat-footer"><i class="fa fa-arrow-up color-success"></i> 7% increase in 3 hours</span></a><!-- /.dashboard-stat-2 --><!-- ========== JS ========== --><script>    $(function(){        $('.counter').counterUp();    });</script>

16,710Bank Credits

<a class="dashboard-stat-2 bg-success" href="#">    <div class="stat-content">        <span class="number counter">16,710</span>        <span class="name">Bank Credits</span>    </div>    <span class="stat-footer"><i class="fa fa-arrow-down color-danger"></i> 2% decrese in 3 hours</span></a><!-- /.dashboard-stat-2 --><!-- ========== JS ========== --><script>    $(function(){        $('.counter').counterUp();    });</script>

Bar Chart download PNG, SVG, JPG etc..

JS chart by amCharts

<div id="bar-chart" class="op-chart"></div><!-- ========== JS ========== --><script src="js/bar-chart.js"></script>

3D Pie Chart download PNG, JPG, PDF etc..

JS chart by amCharts

<div id="pie-chart" class="op-chart"></div><!-- ========== JS ========== --><script src="js/pie-chart.js"></script>

Table with actions

#	First Name	Username	Activity	Labels
1	Mark mark@example.net	@mdo	30% Since last 2 days.	ActiveNewUnverified
2	Jacob jacob@example.net	@jacon	-9% Since last 3 days.	InactiveSleeping
5	Sachin sachin@example.net	@the.god	50% Since last 2 days.	ActiveSuper
3	Larry larry@example.net	@larry	0% Since last 2 days.	Inactive
4	Salman bhai@example.net	@bhai	25% Since last 2 days.	active
6	Mark markf@example.net	@faceb	24% Since last 2 days.	Unverified

<table class="table table-striped table-bordered">    <thead>        <tr>            <th>#</th>            <th>First Name</th>            <th>Username</th>            <th>Activity</th>            <th>Labels</th>            <th>Action</th>        </tr>    </thead>    <tbody>        <tr>            <th scope="row">1</th>            <td>                <b>Mark</b><br>                <small class="text-muted">mark@example.net</small>            </td>            <td>@mdo</td>            <td>                <div class="color-success">                    <i class="fa fa-long-arrow-up"></i> 30%                </div>                <small class="text-muted">Since last 2 days.</small>            </td>            <td>                <span class="label label-success label-bordered">Active</span>                <span class="label label-info label-bordered">New</span>                <span class="label label-warning label-bordered">Unverified</span>            </td>            <td>                <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>                <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>            </td>        </tr>        <tr>            <th scope="row">2</th>            <td>                <b>Jacob</b><br>                <small class="text-muted">jacob@example.net</small>            </td>            <td>@jacon</td>            <td>                <div class="color-danger">                    <i class="fa fa-long-arrow-down"></i> -9%                </div>                <small class="text-muted">Since last 3 days.</small>            </td>            <td>                <span class="label label-danger label-bordered">Inactive</span>                <span class="label label-warning label-bordered">Sleeping</span>            </td>            <td>                <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>                <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>            </td>        </tr>        <tr>            <th scope="row">5</th>            <td>                <b>Sachin</b><br>                <small class="text-muted">sachin@example.net</small>            </td>            <td>@the.god</td>            <td>                <div class="color-success">                    <i class="fa fa-long-arrow-up"></i> 50%                </div>                <small class="text-muted">Since last 2 days.</small>            </td>            <td>                <span class="label label-success label-bordered">Active</span>                <span class="label label-info label-bordered">Super</span>            </td>            <td>                <button type="button" class="btn btn-success btn-xs btn-labeled" disabled="">Approved<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>                <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>            </td>        </tr>        <tr>            <th scope="row">3</th>            <td>                <b>Larry</b><br>                <small class="text-muted">larry@example.net</small>            </td>            <td>@larry</td>            <td>                <div class="color-default">                    <i class="fa fa-long-arrow-up"></i> 0%                </div>                <small class="text-muted">Since last 2 days.</small>            </td>            <td>                <span class="label label-warning label-bordered">Inactive</span>            </td>            <td>                <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>                <button type="button" class="btn btn-danger btn-xs btn-labeled" disabled>Rejected<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>            </td>        </tr>        <tr>            <th scope="row">4</th>            <td>                <b>Salman</b><br>                <small class="text-muted">bhai@example.net</small>            </td>            <td>@bhai</td>            <td>                <div class="color-suucess">                    <i class="fa fa-long-arrow-up"></i> 25%                </div>                <small class="text-muted">Since last 2 days.</small>            </td>            <td>                <span class="label label-success label-bordered">active</span>            </td>            <td>                <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>                <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>            </td>        </tr>        <tr>            <th scope="row">6</th>            <td>                <b>Mark</b><br>                <small class="text-muted">markf@example.net</small>            </td>            <td>@faceb</td>            <td>                <div class="color-danger">                    <i class="fa fa-long-arrow-down"></i> 24%                </div>                <small class="text-muted">Since last 2 days.</small>            </td>            <td>                <span class="label label-danger label-bordered">Unverified</span>            </td>            <td>                <button type="button" class="btn btn-success btn-xs btn-labeled">Approve<span class="btn-label btn-label-right"><i class="fa fa-check"></i></span></button>                <button type="button" class="btn btn-danger btn-xs btn-labeled">Reject<span class="btn-label btn-label-right"><i class="fa fa-times"></i></span></button>            </td>        </tr>    </tbody></table>

Why Choose Options?

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Everything is special.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

You would love it!

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="panel-group acc-panels" id="accordion6" role="tablist" aria-multiselectable="true">    <div class="panel">        <div class="panel-heading" role="tab" id="heading11One">            <h4 class="panel-title">                <a role="button" data-toggle="collapse" data-parent="#accordion6" href="#collapse11One" aria-expanded="true" aria-controls="collapse11One">                  Why Choose Options? <i class="fa fa-plus icon-plus-right"></i>                </a>            </h4>        </div>        <div id="collapse11One" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading11One">            <div class="panel-body">                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird                on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw                denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.            </div>        </div>    </div>    <div class="panel">        <div class="panel-heading" role="tab" id="heading11Two">            <h4 class="panel-title">                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion6" href="#collapse11Two" aria-expanded="false" aria-controls="collapse11Two">                    Everything is special. <i class="fa fa-plus icon-plus-right"></i>                </a>            </h4>        </div>        <div id="collapse11Two" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading11Two">            <div class="panel-body">                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird                on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw                denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.            </div>        </div>    </div>    <div class="panel">        <div class="panel-heading" role="tab" id="heading11Three">            <h4 class="panel-title">                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion6" href="#collapse11Three" aria-expanded="false" aria-controls="collapse11Three">                  You would love it! <i class="fa fa-plus icon-plus-right"></i>                </a>            </h4>        </div>        <div id="collapse11Three" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading11Three">            <div class="panel-body">                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird                on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw                denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.            </div>        </div>    </div></div>

John Doe

Dashboard -2 Small Heading