Dashboard by Sushant Rauniyar - Easy to use, Very responsive, multiple browsers support

Accordian

<!-- Accordion -->
<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h3 class="accordion-header" id="headingOne">
            <button class="accordion-button h3" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
            </button>
        </h3>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to
                style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
                custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though
                the transition does limit overflow.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-header" id="headingTwo">
            <button
                class="accordion-button collapsed h3"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseTwo"
                aria-expanded="false"
                aria-controls="collapseTwo"
            >
                Accordion Item #2
            </button>
        </h3>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use
                to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this
                with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>,
                though the transition does limit overflow.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h3 class="accordion-header" id="headingThree">
            <button
                class="accordion-button collapsed h3"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapseThree"
                aria-expanded="false"
                aria-controls="collapseThree"
            >
                Accordion Item #3
            </button>
        </h3>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to
                style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with
                custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though
                the transition does limit overflow.
            </div>
        </div>
    </div>
</div>

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

Dropdowns

Api

Get

http://127.0.0.1:5500/index.html#

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, necessitatibus dolores earum fugiat hic saepe magni nihil est voluptate excepturi!

Post

http://127.0.0.1:5500/index.html#

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, necessitatibus dolores earum fugiat hic saepe magni nihil est voluptate excepturi!

Put

http://127.0.0.1:5500/index.html#

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, necessitatibus dolores earum fugiat hic saepe magni nihil est voluptate excepturi!

Delete

http://127.0.0.1:5500/index.html#

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, necessitatibus dolores earum fugiat hic saepe magni nihil est voluptate excepturi!

Button

Button colors

Button with border

Sweetalert

Toaster

Dragable

Form

Field 1*

This field is required

Select

Upload File

Date (A.D)

Month

Day

Year

Date (A.D) and Time

Time

Date (B.S)

महिना

गते

बर्ष

Message

Message - Editable Span

Note: Checkbox and Switch works in same way

Checkbox 1 Checkbox 2 Checkbox 3

Switch 1

Switch 2

Switch 3

Radio 1 Radio 2 Radio 3

Select with search (Select2)

Multiple Select with search (Select2)

Modals

<!-- Modal -->
<button type="button" class="btn btn-theme" data-bs-toggle="modal" data-bs-target="#demoModal">Launch demo modal</button>
<div class="modal fade" id="demoModal" tabindex="-1" aria-labelledby="demoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="demoModalLabel">Modal title</h3>
                <button type="button" data-bs-dismiss="modal" aria-label="Close"><i class="h1 black ri-close-fill"></i></button>
            </div>
            <div class="modal-body p-4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary">Save changes</button>
                <button type="button" class="btn btn-danger"data-bs-dismiss="modal" aria-label="Close">Close</button>
            </div>
        </div>
    </div>
</div>

Tabs

<!-- Tabs -->
<nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <button
            class="nav-link active"
            id="nav-home-tab"
            data-bs-toggle="tab"
            data-bs-target="#nav-home"
            type="button"
            role="tab"
            aria-controls="nav-home"
            aria-selected="true"
        >
            Home
        </button>
        <button
            class="nav-link"
            id="nav-profile-tab"
            data-bs-toggle="tab"
            data-bs-target="#nav-profile"
            type="button"
            role="tab"
            aria-controls="nav-profile"
            aria-selected="false"
        >
            Profile
        </button>
        <button
            class="nav-link"
            id="nav-contact-tab"
            data-bs-toggle="tab"
            data-bs-target="#nav-contact"
            type="button"
            role="tab"
            aria-controls="nav-contact"
            aria-selected="false"
        >
            Contact
        </button>
    </div>
</nav>
<div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Contact</div>
</div>

Home

Profile

Contact

Table

<!-- Table Responsive -->
<div class="table-overflow">
    <table class="table table-responsive table-bordered table-striped table-hover">
        <thead>
            <tr>
                <th width="20%">#</th>
                <th width="20%">First</th>
                <th width="20%">Last</th>
                <th width="20%">Subject</th>
                <th width="20%">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>Jack</td>
                <td>
                    <a class="mr-1 mb-1 btn btn-warning" data-toggle="tooltip" title="Edit" href="#"><i class="fa fa-edit" style="color: white"></i></a>
                    <a class="mr-1 mb-1 btn btn-primary" data-toggle="tooltip" title="View" href="#"><i class="fa fa-eye"></i></a>
                    <a class="mr-1 mb-1 btn btn-danger" data-toggle="tooltip" title="Delete" href="javascript:void(0)" onclick="deleteFunction('1')"
                        ><i class="fa fa-trash"></i
                    ></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

#	First	Last	Subject	Handle
1	Mark	Otto	Jack

DataTables

<!-- DataTable Responsive -->
<div class="table-overflow">
    <table class="table table-responsive table-bordered table-striped table-hover datatable_excel">
        <thead>
            <tr>
                <th width="20%">#</th>
                <th width="20%">First</th>
                <th width="20%">Last</th>
                <th width="20%">Subject</th>
                <th width="20%">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>Jack</td>
                <td>
                    <a class="mr-1 btn btn-warning" data-toggle="tooltip" title="Edit" href="#"><i class="fa fa-edit" style="color: white"></i></a>
                    <a class="mr-1 btn btn-primary" data-toggle="tooltip" title="View" href="#"><i class="fa fa-eye"></i></a>
                    <a class="mr-1 btn btn-danger" data-toggle="tooltip" title="Delete" href="javascript:void(0)" onclick="deleteFunction('1')"
                        ><i class="fa fa-trash"></i
                    ></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

#	First	Last	Subject	Handle
1	Mark	Otto	Jack

Top Performers Card

<!-- Top Performer -->
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
    <div class="card mb-4">
        <div class="title underline mb-3">
            <h2>Top Performers</h2>
            <div class="pull-right flex-item"></div>
        </div>

        <div class="performers flex-item" title="Hari Thapa">
            <p>1)</p>
            <img src="assets/img/profile4.jpg" class="performers_icon" />
            <div style="width: 50%">
                <h4>Hari Thapa</h4>
                <p>10496 Calls</p>
            </div>
        </div>

        <div class="performers flex-item" title="Sabita Bohara">
            <p>2)</p>
            <img src="assets/img/profile4.jpg" class="performers_icon" />
            <div style="width: 50%">
                <h4>Sabita Bohara</h4>
                <p>10221 Calls</p>
            </div>
        </div>

        <div class="performers flex-item" title="Shreeja Dhungel">
            <p>3)</p>
            <img src="assets/img/profile4.jpg" class="performers_icon" />
            <div style="width: 50%">
                <h4>Shreeja Dhungel</h4>
                <p>9646 Calls</p>
            </div>
        </div>

        <div class="performers flex-item" title="Susma Khatiwada">
            <p>4)</p>
            <img src="assets/img/profile4.jpg" class="performers_icon" />
            <div style="width: 50%">
                <h4>Susma Khatiwada</h4>
                <p>8389 Calls</p>
            </div>
        </div>

        <div class="performers flex-item mb-4" title="Ram Maharjan">
            <p>5)</p>
            <img src="assets/img/profile4.jpg" class="performers_icon" />
            <div style="width: 50%">
                <h4>Ram Maharjan</h4>
                <p>8389 Calls</p>
            </div>
        </div>

        <button class="btn btn-theme">View All Performers</button>
    </div>
</div>

Hari Thapa

10496 Calls

Sabita Bohara

10221 Calls

Shreeja Dhungel

9646 Calls

Susma Khatiwada

8389 Calls

Ram Maharjan

8389 Calls

Chart Card

<!-- Charts -->
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">    
<div class="card same-height flex flex-col mb-4">
    <div class="title underline">
        <h2>Chart</h2>
    </div>
    <div id="chart_donut1" class="mta mba"></div>
    <div id="legend" class="chart_label"></div>
    <script>
            $(document).ready(function () {
            var browsersChart = Morris.Donut({
            element: 'chart_donut1',
            data: [
                    { label: "Inbound Calls", value: 5 },
                    { label: "Outbound Calls", value: 5 },
                    { label: "Remainder Calls", value: 14 },
                    { label: "Ticket Progress", value: 3 },
                ],
            });
            browsersChart.options.data.forEach(function(label, i){
            var legendItem = $('<span></span>').text(label['label']).prepend('<i> </i>');
            legendItem.find('i').css('backgroundColor', browsersChart.options.colors[i]);
            $('#legend').append(legendItem)
            })
        });
    </script>
</div>
</div>

Line Card

<!-- Line Chart -->
                        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">    
                            <div class="card same-height flex flex-col mb-4">
                                <div class="title underline">
                                    <h2>Chart</h2>
                                </div>
                                
                                <div id="chart_line" class="mta mba"></div>
                                <script>
                                    $(function () {
                                        Morris.Line({
                                            element: "chart_line",
                                            data: [
                                                { year: "1958", nb: 1 },
                                                { year: "1962", nb: 2 },
                                                { year: "1970", nb: 3 },
                                                { year: "1994", nb: 4 },
                                                { year: "2002", nb: 5 },
                                            ],
                                            xkey: "year",
                                            ykeys: ["nb"],
                                            labels: ["Editions Wins"],
                                        });
                                    });
                                </script>
                            </div>
                        </div>

Timeline Card

<!-- Timeline -->
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="card">
                                <div class="title underline">
                                    <h2>Timeline Card</h2>
                                </div>
                                <div id="timeline1"></div>
                                <script>
                                    $(function () {
                                        Morris.Bar({
                                            element: "timeline1",
                                            data: [
                                                { month: "Jan", nb: 90, e: 1 },
                                                { month: "Feb", nb: 40, e: 2 },
                                                { month: "Mar", nb: 60, e: 4 },
                                                { month: "Apr", nb: 30, e: 9 },
                                                { month: "May", nb: 80, e: 10 },
                                                { month: "June", nb: 20, e: 9 },
                                                { month: "July", nb: 40, e: 10 },
                                                { month: "Aug", nb: 60, e: 9 },
                                                { month: "Sep", nb: 20, e: 10 },
                                                { month: "Oct", nb: 40, e: 9 },
                                                { month: "Nov", nb: 40, e: 10 },
                                                { month: "Dec", nb: 50, e: 9 },
                                            ],
                                            xkey: "month",
                                            ykeys: ["nb", "e"],
                                            labels: ["Value 1", "Value 2"],
                                            barRatio: 0.4,
                                            barColors: ["#26B99A", "#e35b8b", "#ACADAC", "#3498DB"],
                                            xLabelAngle: 35,
                                            hideHover: "auto",
                                            animate: {
                                                delay: 9999,
                                            },
                                        });
                                    });
                                </script>
                            </div>
                        </div>

Loading ...

Accordian

Dropdowns

Api

http://127.0.0.1:5500/index.html#

http://127.0.0.1:5500/index.html#

http://127.0.0.1:5500/index.html#

http://127.0.0.1:5500/index.html#

Button

Button colors

Button with border

Sweetalert

Toaster

Dragable

Form

Modals

Tabs

Table

DataTables

Top Performers Card

Hari Thapa

Sabita Bohara

Shreeja Dhungel

Susma Khatiwada

Ram Maharjan

Chart Card

Line Card

Timeline Card

Copyright © Sushant Rauniyar

All rights reserved.

Nadia

Susan

Mark

Loading ...

Message

Notification

Accordian

Accordion Item #1

Accordion Item #2

Accordion Item #3

Dropdowns

Api

http://127.0.0.1:5500/index.html#

http://127.0.0.1:5500/index.html#

http://127.0.0.1:5500/index.html#

http://127.0.0.1:5500/index.html#

Button

Button colors

Button with border

Sweetalert

Toaster

Dragable

Form

Modals

Tabs

Table

DataTables

Top Performers Card

Hari Thapa

Sabita Bohara

Shreeja Dhungel

Susma Khatiwada

Ram Maharjan

Chart Card

Line Card

Timeline Card

Copyright © Sushant Rauniyar

All rights reserved.

Nadia

Susan

Mark