EVOLUTION-NINJA
Edit File: cpd_dashboard_v.php
<?php echo view('includes/flow-header'); ?> <section class="spec-main"> <div class="row"> <div class="col-sm-3"> <div class="spec-left"> <ul> <li><a href="">My CPD Portfolio</a></li> </ul> </div> </div> <div class="col-sm-9 view_cpd_bg"> <!--row--> <div class="container-fluid"> <div class="row"> <div class="col-sm-9"></div> <!--col-10--> <div class="col-sm-2 mt-4 "> <button class="custom-btn btn-2" onclick="back()"> <img src="<?php echo base_url('public/assets/images/Import_fill.png'); ?>" alt="back"> Back</button> </div> </div> </div> <!--row--> <div class="row"> <div class="col-sm-12 side-text"> <h2><b>MyCPD Portfolio</b></h2> <p>CPD portfolio is a structured and organized record that you can maintain to document your ongoing learning and development activities. The purpose of this CPD portfolio is to provide evidence of professional growth, competence, and compliance with CPD requirements.</p> </div> </div> <div class="cme-right-new" style="padding: 2% 5% 0 0;"> <div class="row mt-5 ml-5 mob-row"> <div class="col-sm-9"> <div class="row"> <div class="col-sm-3 mb-5 cpd_back" id="go-back-new"> <!-- <a href="<?php echo base_url('med-connect');?>"> <i class="fa fa-arrow-left" aria-hidden="true"></i>Back </a> --> </div> </div> <div class="row cpd_start_four"> <div class="col-sm-3"> <!-- <a href="<?php echo base_url('cpd-dashboard');?>"> <img class="summ_down1" src="c:\Users\ADMIN\Downloads\Telegram Desktop\Medusys My CPD Portfolio\Activities 1.png c:\Users\ADMIN\Downloads\Telegram Desktop\Medusys My CPD Portfolio\Dashboard 1.png c:\Users\ADMIN\Downloads\Telegram Desktop\Medusys My CPD Portfolio\My CPD Portfolio 1.png"> <h5 class="cpd_dash">Dashboard</h5> --> <a href="<?php echo base_url('cpd-dashboard');?>"><button type="button" class="form-control " id="dash-button-1"><img class="avc-img" src="public/assets/cpdimage/Dashboard 1.png">Dashboard</button></a> </div> <div class="col-sm-3 mob_cpdacti"> <!-- <a href="<?php echo base_url('cpd-activity');?>"><img class="summ_down2" src="public/assets/cpdimage/Rectangle 4108 (2).png"> <h5 class="cpd_acti">Activities</h5> </a> --> <a href="<?php echo base_url('cpd-activity');?>"><button type="button" class="form-control dash-button"><img class="avc-img" src="public/assets/cpdimage/Activities 1.png">Activities</button></a> </div> <div class="col-sm-4 mob_cpdproto"> <!-- <a href="<?php echo base_url('my-cpd-portfolio');?>"><img class="summ_down" src="public/assets/cpdimage/Rectangle 4108 (2).png"> <h5 class="cpd_proto">CPD Summary/Download</h5> </a> --> <a href="<?php echo base_url('my-cpd-portfolio');?>"><button type="button" class="form-control cps-summary-button "><img class="avc-img" src="public/assets/cpdimage/My CPD Portfolio 1.png">CPD Summary/Download</button></a> </div> </div> <div class="row"> <div class="col-sm-3 mob_cpdactivity"> <!-- <a href="<?php echo base_url('add-cpd');?>"><img src="public/assets/cpdimage/Rectangle 4108 (2).png"> <img src="public/assets/cpdimage/Subtract.png" class="cpd_subtract"> <h5 class="cpd_addaccti">Add Activity</h5> </a> --> <a href="<?php echo base_url('add-cpd');?>"> <img src="public/assets/cpdimage/Subtract.png" class="cpd_subtract"> <button type="button" class="form-control add_act_new">Add Activity</button></a> </div> </div> <div class="row cpd-dash-progress" style="margin-top: 27px; margin-bottom: -33px;"> <p style="color: #017DAB;">My Progress: <?php echo $start_val." To ".date('d-m-Y')." Last Submitted on ".$end_val;?> </p> </div> <!------------------------ start Practice Improvement Activity (PIA) -------- --> <div class="row ml-5"> <div class="container cpd_dash_container mt-5"> <div class="accordion accordion1 " id="accordion1Example"> <div class="accordion1-item pre_op1" id="pre_opcontent"> <div class="accordion1-header pre_ophd1" style="background-color: #B2E3FF; border-radius: 7px;"> <img class="accordion-img " src="public/assets/logimages/Icon.png" width="30" height="30" alt="Image"> <b>Practice Improvement Activity (PIA) <?php echo " - ".$Practice_Improvement_Activity." Records"; ?></b> <!-- <span class="cancle1 can-mo2"> <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"> <i class="fa fa-times-circle-o" aria-hidden="true" style="font-size: larger; margin-top: 5px;" ></i> </a> </span> --> </div> <div id="collapseOne" class="accordion1-content collapse"> <div class="row"> <div class="accordion1-border preborder2" id="preborder_2"></div> <div class="row mt-5"> <div class="col-sm-3 ml-3" id="cps-base0"> <p class="dash-box1">CNB/Labour/Obstetric Database</p> <h6 class="cpd-dash-cases cpd-dash-cases1"> <?php echo $c1." "; ?> </h6> <img src="public/assets/cpdimage/Base.png" class="cpd-da-base0"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line mob-cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base0"> <p class="dash-box1">Reflective Anaesthesia Logbook</p> <h6 class="cpd-dash-cases"> <?php echo $c2." "; ?> </h6> <img src="public/assets/cpdimage/Base (1).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base0"> <p class="dash-box1">Clinical Audits</p> <h6 class="cpd-dash-cases"> <?php echo $c3." "; ?> </h6> <img src="public/assets/cpdimage/Base (2).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> </div> <div class="row mt-1"> <div class="col-sm-3 ml-3" id="cps-base1"> <p class="dash-box2" id="mob_patient_cpd">Patient Related Experience Measures (PREMs)</p> <h6 class="cpd-dash-cases cpd-dash-cases1"> <?php echo $c4." "; ?> </h6> <img src="public/assets/cpdimage/Base (3).png" class="cpd-da-base3"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line mob-cpd-dash-line3"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base1"> <p class="dash-box2" id="mob_patient_cpd1">Patient Centered Outcome Measures (PCOMs)</p> <h6 class="cpd-dash-cases"> <?php echo $c5." "; ?> </h6> <img src="public/assets/cpdimage/Base (4).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base0"> <p class="dash-box1">PIA Others</p> <h6 class="cpd-dash-cases"> <?php echo $c6." "; ?> </h6> <img src="public/assets/cpdimage/Base (5).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> </div> </div> </div> </div> </div> </div> </div> <!------------------------ end---------- Practice Improvement Activity (PIA) -----------------> <!------------ -start--------------Emergency Response Activity (ERA)----------------------> <div class="row ml-5"> <div class="container cpd_dash_container "> <div class="accordion accordion1 " id="accordion1Example"> <div class="accordion1-item pre_op1" id="pre_opcontent"> <div class="accordion1-header pre_ophd1 pre_ophd2" style="background-color: #B2E3FF; border-radius: 7px;"> <img class="accordion-img" src="public/assets/logimages/Icon.png" width="30" height="30" alt="Image"> <b>Emergency Response Activity (ERA)<?php echo " - ".$Emergency_Response_Activity." Records"; ?></b> <span class="cancle1 can-mo"> <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"> <!-- <i class="fa fa-times-circle-o" aria-hidden="true" style="font-size: larger; margin-top: 5px;" ></i> --> </a> </span> </div> <div id="collapseOne" class="accordion1-content collapse"> <div class="row "> <div class="accordion1-border preborder2" id="preborder_2"></div> <div class="row mt-5"> <div class="col-sm-3 ml-3" id="cps-base0"> <p class="dash-box1">Crisis Management Workshops</p> <h6 class="cpd-dash-cases cpd-dash-cases1"> <?php echo $d1." "; ?> </h6> <img src="public/assets/cpdimage/Base.png" class="cpd-da-base0"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line mob-cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base0"> <p class="dash-box1">Emergency Response Seminars</p> <h6 class="cpd-dash-cases"> <?php echo $d2." "; ?> </h6> <img src="public/assets/cpdimage/Base (1).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base0"> <p class="dash-box1">ERA Others</p> <h6 class="cpd-dash-cases"> <?php echo $d3." "; ?> </h6> <img src="public/assets/cpdimage/Base (2).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> </div> </div> </div> </div> </div> </div> </div> <!------------------------ end----------Emergency Response Activity (ERA) -----------------> <!------------------------ start---------- Personal Educational & Skills Activity (PESA)-----------------> <div class="row ml-5"> <div class="container cpd_dash_container "> <div class="accordion accordion1 " id="accordion1Example"> <div class="accordion1-item pre_op1" id="pre_opcontent"> <div class="accordion1-header pre_ophd1 pre_ophd3" style="background-color: #B2E3FF; border-radius: 7px;"> <img class="accordion-img" src="public/assets/logimages/Icon.png" width="30" height="30" alt="Image"> <b>Personal Educational & Skills Activity (PESA)<?php echo " - ".$Personal_Educational." Records"; ?></b> <span class="cancle1 can-mo1"> <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"> <!-- <i class="fa fa-times-circle-o" aria-hidden="true" style="font-size: larger; margin-top: 5px;" ></i> --> </a> </span> </div> <div id="collapseOne" class="accordion1-content collapse"> <div class="row"> <div class="accordion1-border preborder2" id="preborder_2"></div> <div class="row mt-5"> <div class="col-sm-3 ml-3" id="cps-base0"> <p class="dash-box1">Conferences & Seminars</p> <h6 class="cpd-dash-cases cpd-dash-cases1"> <?php echo $e1." "; ?> </h6> <img src="public/assets/cpdimage/Base.png" class="cpd-da-base0"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line mob-cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base0"> <p class="dash-box1" id="mob_workshop_cpd">Workshops</p> <h6 class="cpd-dash-cases"> <?php echo $e2." "; ?> </h6> <img src="public/assets/cpdimage/Base (1).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base0"> <p class="dash-box1" id="mob_workshop_cpd">Videos</p> <h6 class="cpd-dash-cases"> <?php echo $e3." "; ?> </h6> <img src="public/assets/cpdimage/Base (2).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> </div> <div class="row mt-1"> <div class="col-sm-3 ml-3" id="cps-base1"> <p class="dash-box2 " id="dash-box3">Exams</p> <h6 class="cpd-dash-cases cpd-dash-cases1"> <?php echo $e4." "; ?> </h6> <img src="public/assets/cpdimage/Base (3).png" class="cpd-da-base3"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line mob-cpd-dash-line3"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base1"> <p class="dash-box2" id="dash-box3">Formal Courses</p> <h6 class="cpd-dash-cases"> <?php echo $e5." "; ?> </h6> <img src="public/assets/cpdimage/Base (4).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5 " id="cps-base1"> <p class="dash-box1">Journal Reading</p> <h6 class="cpd-dash-cases"> <?php echo $e6." "; ?> </h6> <img src="public/assets/cpdimage/Base (5).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> </div> <div class="row"> <div class="col-sm-3 ml-3" id="cps-base0"> <p class="dash-box1">Learning Sessions</p> <h6 class="cpd-dash-cases cpd-dash-cases1"> <?php echo $e7." "; ?> </h6> <img src="public/assets/cpdimage/Base.png" class="cpd-da-base0"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line mob-cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base0"> <p class="dash-box1" id="mob_workshop_cpd">Publications</p> <h6 class="cpd-dash-cases"> <?php echo $e8." "; ?> </h6> <img src="public/assets/cpdimage/Base (1).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base0"> <p class="dash-box1" id="mob_workshop_cpd">Research</p> <h6 class="cpd-dash-cases"> <?php echo $e9." "; ?> </h6> <img src="public/assets/cpdimage/Base (2).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> </div> <div class="row mt-1"> <div class="col-sm-3 ml-3" id="cps-base1"> <p class="dash-box2" id="dash-box3">Posters & Presentations</p> <h6 class="cpd-dash-cases cpd-dash-cases1"> <?php echo $e10." "; ?> </h6> <img src="public/assets/cpdimage/Base (3).png" class="cpd-da-base3"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line mob-cpd-dash-line3"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <div class="col-sm-3 ml-5" id="cps-base1"> <p class="dash-box2" id="dash-box3">Training and Development</p> <h6 class="cpd-dash-cases"> <?php echo $e11." "; ?> </h6> <img src="public/assets/cpdimage/Base (4).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> <!-- <div class="col-sm-3 ml-5 " id="cps-base1"> <p class="dash-box1">PESA Others</p> <h6 class="cpd-dash-cases"> <!--<?//php echo $e12." "; ?>--> </h6> <img src="public/assets/cpdimage/Base (5).png"> <img src="public/assets/cpdimage/Line 3.png" class="cpd-dash-line"> <img src="public/assets/cpdimage/Charts.png" class="cpd-dash-charts"> </div> --> </div> </div> </div> </div> </div> </div> </div> <!------------------------ end---------- Personal Educational & Skills Activity (PESA) -----------------> </div> </div> </div> </div> </div> </section> <!-- accordian1 start script --> <!-- <script> const preOphd = document.querySelector('.pre_ophd1'); let isClicked = false; preOphd.addEventListener('click', function () { if (isClicked) { this.style.backgroundColor = '#B2E3FF'; } else { this.style.backgroundColor = 'white'; } isClicked = !isClicked; }); </script> --> <script> const preOphd1 = document.querySelector('.pre_ophd1'); preOphd1.addEventListener('click', function () { if (this.style.backgroundColor === 'white' || this.style.backgroundColor === 'white') { this.style.backgroundColor = '#B2E3FF'; } else { this.style.backgroundColor = 'white'; } }); </script> <!-- accordian1 end script --> <!-- accordian2 start script --> <!-- <script> const pre_ophd2 = document.querySelector('.pre_ophd2'); pre_ophd2.addEventListener('click', function () { if (isClicked) { this.style.backgroundColor = '#B2E3FF'; } else { this.style.backgroundColor = 'white'; } isClicked = !isClicked; }); </script> --> <script> const preOphd2 = document.querySelector('.pre_ophd2'); preOphd2.addEventListener('click', function () { if (this.style.backgroundColor === 'white' || this.style.backgroundColor === 'white') { this.style.backgroundColor = '#B2E3FF'; } else { this.style.backgroundColor = 'white'; } }); </script> <!-- accordian2 end script --> <!-- accordian3 start script --> <!-- <script> const pre_ophd3 = document.querySelector('.pre_ophd3'); pre_ophd3.addEventListener('click', function () { if (isClicked) { this.style.backgroundColor = '#B2E3FF'; } else { this.style.backgroundColor = 'white'; } isClicked = !isClicked; }); </script> --> <script> const preOphd3 = document.querySelector('.pre_ophd3'); preOphd3.addEventListener('click', function () { if (this.style.backgroundColor === 'white' || this.style.backgroundColor === 'white') { this.style.backgroundColor = '#B2E3FF'; } else { this.style.backgroundColor = 'white'; } }); </script> <!-- accordian3 end script --> <!------------start accordian1 dropdown ------------------> <script> document.addEventListener("DOMContentLoaded", function () { const accordionItems = document.querySelectorAll(".accordion1-item"); accordionItems.forEach(item => { const header = item.querySelector(".accordion1-header"); const content = item.querySelector(".accordion1-content"); header.addEventListener("click", () => { item.classList.toggle("active"); }); }); }); </script> <!-------------------end accordian1 dropdown -----------------> <script> $('.accordion1-header').on('click', function () { $(this).find('.accordion-img').toggleClass('rotate'); }); </script> <!-- -css --> <style> .accordion-img { transition: transform 0.3s; } .rotate { transform: rotate(180deg); } .mob_cpdactivity{ margin-top: 20px !important; position: relative; left: 183px; } .dash-button{ background: linear-gradient(to left, #0160A2,#0198CD, #0160A2); color: white; border: none; border-radius: 6px; width: 100%; height: 45px; font-size: 17px; } #dash-button-1{ /* background: linear-gradient(to left, #0160A2,#0198CD, #0160A2); */ background-color: #0065a3; color: white; border: none; border-radius: 6px; width: 100%; height: 45px; font-size: 17px; box-shadow: #6c757d 0px 0px 0px 3px; } .cps-summary-button{ background: linear-gradient(to left, #0160A2,#0198CD, #0160A2); color: white; border: none; border-radius: 6px; width: 105%; height: 45px; font-size: unset; } .add_act_new{ background: linear-gradient(to left, #0160A2,#0198CD, #0160A2); color: white; border: none; border-radius: 6px; width: 85%; height: 30px; font-size: 14px; text-align: center; } .cpd_subtract{ margin-left: 3px; position: relative; top: 24px; width: 14px; left: 3px; } .cpd_back{ position: relative; top: 0px; } .mob_cpdacti{ /* margin-left: -50px; */ } .mob_cpdproto{ /* margin-left: -50px; */ } .cpd_start_four{ margin-top: -80px; } .avc-img{ width: 28px; height: 28px; position: relative; left: -7px; } .accordion1-header{ padding: 10px; cursor: pointer; } @media only screen and (max-width: 600px){ .mob_cpdactivity{ width: 50%; margin-left: -148px; position: relative; top: 0px; } .dash-button{ margin-top: 50px; margin-left: -140px; } .cps-summary-button{ margin-left: 50px; margin-top: 10px; width: 80%; } .cpd_start_four{ margin-top: 10px; margin-left: 10px !important; } .can-mo{ position: relative; top: -30px; left: 4px; } .can-mo1{ position: relative; top: -12px; left: 4px; } .mob_cpdacti { position: relative; top: -35px; left: 140px; } .cps-summary-button { margin-left: 0px; margin-top: 10px; width: 100%; } .can-mo2{ position: relative; top: -3px; left: 5px; } .mob-row { margin-left: -18px !important; margin-top: -20px !important; } .custom-btn{ margin-right:10px !important; } } </style> <script> function back(){ window.location.href="<?php echo base_url('med-connect'); ?>" } </script>