EVOLUTION-NINJA

Edit File: attendance.php

<?php echo view('includes/home_sidebar');?>
<style>
    /* uplaod image styles------  */
    .div-img--contents {
        width: 180px;
        height: 180px;
    }

.img-wrapper {
        width: 100%;
        height: 100%;
        border: 0.5px solid #ccc;
        position: relative;

}

.img-wrapper .img--upload {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: absolute;

}

.img-wrapper .img--upload #up-img {
        width: 180PX;
        height: 180PX;
        /* object-fit: contain; */

}

.custom-btn {
        background-color: #0065A3;
        color: white;
        border: none;
        outline: none;
        width: 100%;
        padding: 4px 10px;
        margin: 0;
        margin-top: 8px;

}

.custom-btn:hover {
        background-color: #0065A3;
        color: white;

}

#leftDiv {
        height: 960px !important;
    }

@media only screen and (max-width:728px) {

.div-img--contents {
            width: 157px;
            height: 157px;
            margin-bottom: 57PX;
        }
    }

.star-mad {
        color: #c83434;
        font-size: 20px;
        position: relative;
        top: 2px;
    }

#leftDiv {
        height: 1100px !important;
    }

#add-more-file {
        position: absolute;
        right: -13px;
        top: 35px !important;
        font-size: 24px;
    }

.add-timetable-button {
        color: white;
        width: 15%;
        background: linear-gradient(#4E79FF, #71ACFF);
        border: none;
        outline: none;
        font-size: 18px;
        padding: 5px 4px;
        font-weight: 500;
        float: inline-end;
        position: absolute;
        bottom: -30px;
        right: 0;
    }

@media screen and (max-width:728px) {

.add-timetable-block,
        .add-timetable,
        .timetable-block {
            width: 97vw;
        }

.add-timetable-button {
            width: 50%;
            right: auto;
        }
    }

.add-timetable {
        background-color: #EFF3FC;
        padding: 15px 25px;
    }

.add-timetable label {
        padding: 5px 10px;
        font-size: 15px;
        margin-block: 4px;
        font-weight: 500;
        color: #606060;
    }

.checkmark {
        display: block;
        width: 30px;
        height: 30px;
        background-color: #ddd;
        border-radius: 10px;
        position: relative;
        transition: background-color 0.4s;
        overflow: hidden;
        cursor: pointer;
    }

.check:checked~.checkmark {
        background-color: #08bb68;
    }

.checkmark::after {
        content: "";
        position: absolute;
        width: 5px;
        height: 10px;
        border-right: 3px solid #fff;
        border-bottom: 3px solid #fff;
        top: 44%;
        left: 50%;
        transform: translate(-50%, -50%) rotateZ(40deg) scale(10);
        opacity: 0;
        transition: all 0.4s;
    }

.check:checked~.checkmark::after {
        opacity: 1;
        transform: translate(-50%, -50%) rotateZ(40deg) scale(1);
    }
    #main-div {
        display: none;
    }
    .submit-student-form{
        width: 10%;
        float: right;
    }
    .thead-std{
        background-color: #8b3030 !important;
    color: white !important;
    }
</style>
<main id="rightDiv">
    <section class="Add-student row">

<div class="col-sm-4">
            <h3 style="color: rgba(0, 72, 76, 1);">Mark Attendance</h3>
        </div>
        <div class="col-sm-7"></div>
        <div class="col-sm-1">
            <button class="btn back-butt" onclick="goBack()"><i class="fa fa-arrow-left"
                    aria-hidden="true"></i>&nbsp;Back</button>
        </div>
    </section>
    
    <form id="Attendanceform">
        <section>
            <div class="add-timetable">
                <div class="row">
                    <div class="col-sm-4">
                        <label for="selectbatch">Select Batch<span class="star-mad">*</span></label></br>
                        <select class="form-select inp-boxes-addtimetable" name="batch_id" id="selectbatch" required>

</select>
                        
                    </div>

<div class="col-sm-4">
                        <label for="date"> Date</label>
                    <input type="date" class="form-control mt-2" name="date" id="">
                    </div>
                </div>
            </div>
        </section>
        <section id="main-div">
        <div class="row std-atd-tble">
            <div class="col-sm-1"></div>
            <div class="col-sm-10">
                <table class="table table-bordered  table-report mt-3">
                    
                    <thead>
                        <tr>
                            <th class="thead-std">Student Name</th>
                            <th class="thead-std">Admission Number</th>
                            <th class="thead-std">Today Attendance</th>
                        </tr>
                    </thead>
                    
                    <tbody id="s_list">

</tbody>
                </table>

</div>
        </div>

</main>
</section>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.all.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.8/dist/sweetalert2.min.css" rel="stylesheet">
<script>
    $(document).ready(function () {
        $('#Attendanceform').submit(function (e) {
            e.preventDefault();

</script>
 
<script>
    function goBack() {
        window.location.href = "<?php echo base_url("dashboard"); ?>";
    }
</script>
<style>
    input[type="checkbox"].switch_1 {
        font-size: 12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 3.5em;
        height: 1.5em;
        background: #ddd;
        border-radius: 3em;
        position: relative;
        cursor: pointer;
        outline: none;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

input[type="checkbox"].switch_1:after {
        position: absolute;
        content: "";
        width: 1.5em;
        height: 1.5em;
        border-radius: 50%;
        background: #fff;
        -webkit-box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
        box-shadow: 0 0 .25em rgba(0, 0, 0, .3);
        -webkit-transform: scale(.7);
        transform: scale(.7);
        left: 0;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

input[type="checkbox"].switch_1:checked {
        background: #0ebeff;
    }

input[type="checkbox"].switch_1:checked:after {
        left: calc(100% - 1.5em);
    }
</style>
<?php echo view('includes/footer'); ?>