JezK
Edit File: videoDisconnect.php
<head> <meta charset="utf-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Video Consultation</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="robots" content="all,follow"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/custom.css"> <link rel="stylesheet" href="css/font-awesome.min.css"> <link rel="stylesheet" href="css/fontastic.css"> <!-- Google fonts - Roboto --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <!-- Custom Scrollbar--> <!-- <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css"> --> <!-- theme stylesheet--> <!-- <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet"> --> <link rel="stylesheet" href="css/style.css" > <!-- <link rel="stylesheet" href="build/css/intlTelInput.css" /> --> <!-- <link rel="stylesheet" type="text/css" href="css/daterangepicker.css" /> --> <!-- <link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap4.min.css"> --> <link rel="stylesheet" href="css/user.css" /> <style> .rating-stars ul > li.star.hover { content: url(img/rate_given.png); background-repeat: no-repeat !important; padding: 0px 1px; } .rating-stars ul > li.star.selected { content: url(img/rate_given.png); background-repeat: no-repeat !important; padding: 0px 1px; } </style> </head> <body> <section class="h-100"> <header class="container h-100"> <div class="d-flex align-items-center justify-content-center h-100"> <div class="d-flex flex-column"> <h1 class="text align-self-center p-2 left-meet">You left the meeting</h1> <!-- <h4 class="text align-self-center p-2">item 2</h4> --> <div class="row justify-content-center"> <button class="btn btn-light align-self-center pr-3 pl-3 pt-2 pb-2" type="button" name="button">Rejoin</button> <button class="btn btn-primary return-home align-self-center p-2" type="button" name="button">Return to home screen</button> </div> <div class="text align-self-center mt-5 rate-block"> <p class="text align-self-center pl-2">How was the audio & video</p><br> <div class="text align-self-center"> <section class=' rating-widget'> <span class='rating-stars text-center'> <ul id='stars' class="d-flex list-style-none"> <li class='star ' title='Poor' data-value='1'> <!-- <i class='fa fa-star fa-fw'></i> --> <img src ="img/rate.png" class="rate-img"> </li> <li class='star' title='Fair' data-value='2'> <!-- <i class='fa fa-star fa-fw'></i> --> <img src ="img/rate.png" class="rate-img"> </li> <li class='star' title='Good' data-value='3'> <!-- <i class='fa fa-star fa-fw'></i> --> <img src ="img/rate.png" class="rate-img"> </li> <li class='star' title='Excellent' data-value='4'> <!-- <i class='fa fa-star fa-fw'></i> --> <img src ="img/rate.png" class="rate-img"> </li> <li class='star' title='WOW!!!' data-value='5'> <!-- <i class='fa fa-star fa-fw'></i> --> <img src ="img/rate.png" class="rate-img"> </li> </ul> </span> </section> </div> </div> </div> </div> </header> </section> <!-- <section class=""> <div class="container"> <div class="row h-100"> <div class="row justify-content-center align-items-center"> <h1 class="text-center">Youe left the meeting</h1> </div> <br> <div class="row justify-content-center align-items-center"> <button>join</button> <button>Return to home screen</button> </div> </div> </div> </section> --> <script src="jquery/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- <script src="js/jquery.mCustomScrollbar.concat.min.js"></script> --> <!-- <script src="js/front.js"></script> --> <!-- <script src="https://unpkg.com/popper.js"></script> --> <!-- <script src="build/js/intlTelInput.js"></script> --> <!-- datepicker range --> <!-- <script type="text/javascript" src="js/moment.min.js"></script> --> <!-- <script type="text/javascript" src="js/daterangepicker.min.js"></script> --> <!--end datepicker range --> <!-- <script type="text/javascript" src="js/dataTables.bootstrap4.min.js"></script> --> <!-- <script type="text/javascript" src="js/jquery.dataTables.min.js"></script> --> <!-- <script type="text/javascript" src="js/functions.js"></script> --> </body> <script> $(document).ready(function() { /* 1. Visualizing things on Hover - See next part for action on click */ $('#stars li').on('mouseover', function() { var onStar = parseInt($(this).data('value'), 10); // The star currently mouse on // Now highlight all the stars that's not after the current hovered star $(this).parent().children('li.star').each(function(e) { if (e < onStar) { $(this).addClass('hover'); } else { $(this).removeClass('hover'); } }); }).on('mouseout', function() { $(this).parent().children('li.star').each(function(e) { $(this).removeClass('hover'); }); }); /* 2. Action to perform on click */ $('#stars li').on('click', function() { var onStar = parseInt($(this).data('value'), 10); // The star currently selected var stars = $(this).parent().children('li.star'); for (i = 0; i < stars.length; i++) { $(stars[i]).removeClass('selected'); } for (i = 0; i < onStar; i++) { $(stars[i]).addClass('selected'); } // JUST RESPONSE (Not needed) var ratingValue = parseInt($('#stars li.selected').last().data('value'), 10); var msg = ""; if (ratingValue > 1) { msg = ratingValue; } else { msg = ratingValue; } responseMessage(msg); }); }); function responseMessage(msg) { $('.success-box').fadeIn(200); $('.success-box span.text-message').html("<span>" + msg + "</span>"); } </script> </html>