%PDF-
%PDF-
Mini Shell
Mini Shell
<!doctype html>
<!--[if lte IE 9]> <html class="lte-ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head>
<?php
include("include/head.php");
$page_name="chat";
$id_user= intval(getValue("id_user"));
$ecole_id = $_SESSION['user']->id_ecole;
if (isSubmit('type')) {
if ($_POST['type']=="newMessage") {
$Message= getValue("Message");
$date= time();
$id_user= getValue("id_user");
$ecole_id= getValue("ecole_id");
$ch = array('
id_chat',
'message',
'user_id',
'ecole_id',
'sender',
'image');
$val = array(
null,
$Message,
$id_user,
$ecole_id,
'ecole',
' ',
);
$id= $db->Ajouter_('chat',$ch,$val);
}
// audio
if ($_POST['type']=="newMessageAudio") {
$size = $_FILES['audio_data']['size']; //the size in bytes
$input = $_FILES['audio_data']['tmp_name']; //temporary name that PHP gave to the uploaded file
$output = "uploads/audios/".substr(md5(time().rand(1,50)),-8).".wav"; //letting the client control the filename is a rather bad idea
//move the file from temp name to local folder using $output name
move_uploaded_file($input,$output);
$Message=' ';
$date= time();
$id_user= getValue("id_user");
$ecole_id= getValue("ecole_id");
$image= $output;
$ch = array(
'message',
'user_id',
'ecole_id',
'sender',
'image',
'type',
);
$val = array(
$Message,
$id_user,
$ecole_id,
'ecole',
$image,
'audio',
);
echo $id= $db->Ajouter_('chat',$ch,$val);
die();
}
}
?>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Remove Tap Highlight on Windows Phone IE -->
<meta name="msapplication-tap-highlight" content="no"/>
<title>FTM:chat </title>
<!-- uikit -->
<link rel="stylesheet" href="bower_components/uikit/css/uikit.almost-flat.min.css" media="all">
<!-- flag icons -->
<link rel="stylesheet" href="assets/icons/flags/flags.min.css" media="all">
<!-- style switcher -->
<link rel="stylesheet" href="assets/css/style_switcher.min.css" media="all">
<!-- altair admin -->
<link rel="stylesheet" href="assets/css/main.min.css" media="all">
<!-- themes -->
<link rel="stylesheet" href="assets/css/themes/themes_combined.min.css" media="all">
<link rel="stylesheet" href="assets/css/select2.css" media="all">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,300' rel='stylesheet' type='text/css'>
<script src="https://use.typekit.net/hoy3lrg.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>
<style class="cp-pen-styles">
#audiorecorder{
width: 200px;
height: 200px;
border: green 3px solid;
border-radius: 50%;
margin: 10px auto;
text-align: center;
line-height: 200px;
font-size: 200%;
background:rgb(163, 233, 109,0.2);/* fallback for old browsers */
color:green;
/*background: -webkit-linear-gradient(to right, #11998e, #11995e); /* Chrome 10-25, Safari 5.1-6 */*/
/*background: linear-gradient(to right, #11998e, #11995e); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color:#fff;
}
#frame {
width: 100%;
min-width: 360px;
height: 90vh;
margin-top:8vh ;
min-height: 300px;
background: #E6EAEA;
}
@media screen and (max-width: 360px) {
#frame {
width: 100%;
height: 100vh;
}
}
#frame #sidepanel {
float: left;
min-width: 280px;
max-width: 340px;
width: 20%;
height: 100%;
background: #2c3e50;
color: #f5f5f5;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 735px) {
#frame #sidepanel {
width: 58px;
min-width: 58px;
}
}
#frame #sidepanel #profile {
width: 80%;
margin: 25px auto;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile {
width: 100%;
margin: 0 auto;
padding: 5px 0 0 0;
background: #32465a;
}
}
#frame #sidepanel #profile.expanded .wrap {
height: 210px;
line-height: initial;
}
#frame #sidepanel #profile.expanded .wrap p {
margin-top: 20px;
}
#frame #sidepanel #profile.expanded .wrap i.expand-button {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
#frame #sidepanel #profile .wrap {
height: 60px;
line-height: 60px;
overflow: hidden;
-moz-transition: 0.3s height ease;
-o-transition: 0.3s height ease;
-webkit-transition: 0.3s height ease;
transition: 0.3s height ease;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap {
height: 55px;
}
}
#frame #sidepanel #profile .wrap img {
width: 50px;
border-radius: 50%;
padding: 3px;
border: 2px solid #e74c3c;
height: auto;
float: left;
cursor: pointer;
-moz-transition: 0.3s border ease;
-o-transition: 0.3s border ease;
-webkit-transition: 0.3s border ease;
transition: 0.3s border ease;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap img {
width: 40px;
margin-left: 4px;
}
}
#frame #sidepanel #profile .wrap img.online {
border: 2px solid #2ecc71;
}
#frame #sidepanel #profile .wrap img.away {
border: 2px solid #f1c40f;
}
#frame #sidepanel #profile .wrap img.busy {
border: 2px solid #e74c3c;
}
#frame #sidepanel #profile .wrap img.offline {
border: 2px solid #95a5a6;
}
#frame #sidepanel #profile .wrap p {
float: left;
margin-left: 15px;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap p {
display: none;
}
}
#frame #sidepanel #profile .wrap i.expand-button {
float: right;
margin-top: 23px;
font-size: 0.8em;
cursor: pointer;
color: #435f7a;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap i.expand-button {
display: none;
}
}
#frame #sidepanel #profile .wrap #status-options {
position: absolute;
opacity: 0;
visibility: hidden;
width: 150px;
margin: 70px 0 0 0;
border-radius: 6px;
z-index: 99;
line-height: initial;
background: #435f7a;
-moz-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options {
width: 58px;
margin-top: 57px;
}
}
#frame #sidepanel #profile .wrap #status-options.active {
opacity: 1;
visibility: visible;
margin: 75px 0 0 0;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options.active {
margin-top: 62px;
}
}
#frame #sidepanel #profile .wrap #status-options:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid #435f7a;
margin: -8px 0 0 24px;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options:before {
margin-left: 23px;
}
}
#frame #sidepanel #profile .wrap #status-options ul {
overflow: hidden;
border-radius: 6px;
}
#frame #sidepanel #profile .wrap #status-options ul li {
padding: 15px 0 30px 18px;
display: block;
cursor: pointer;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options ul li {
padding: 15px 0 35px 22px;
}
}
#frame #sidepanel #profile .wrap #status-options ul li:hover {
background: #496886;
}
#frame #sidepanel #profile .wrap #status-options ul li span.status-circle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 5px 0 0 0;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options ul li span.status-circle {
width: 14px;
height: 14px;
}
}
#frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {
content: '';
position: absolute;
width: 14px;
height: 14px;
margin: -3px 0 0 -3px;
background: transparent;
border-radius: 50%;
z-index: 0;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {
height: 18px;
width: 18px;
}
}
#frame #sidepanel #profile .wrap #status-options ul li p {
padding-left: 12px;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #profile .wrap #status-options ul li p {
display: none;
}
}
#frame #sidepanel #profile .wrap #status-options ul li#status-online span.status-circle {
background: #2ecc71;
}
#frame #sidepanel #profile .wrap #status-options ul li#status-online.active span.status-circle:before {
border: 1px solid #2ecc71;
}
#frame #sidepanel #profile .wrap #status-options ul li#status-away span.status-circle {
background: #f1c40f;
}
#frame #sidepanel #profile .wrap #status-options ul li#status-away.active span.status-circle:before {
border: 1px solid #f1c40f;
}
#frame #sidepanel #profile .wrap #status-options ul li#status-busy span.status-circle {
background: #e74c3c;
}
#frame #sidepanel #profile .wrap #status-options ul li#status-busy.active span.status-circle:before {
border: 1px solid #e74c3c;
}
#frame #sidepanel #profile .wrap #status-options ul li#status-offline span.status-circle {
background: #95a5a6;
}
#frame #sidepanel #profile .wrap #status-options ul li#status-offline.active span.status-circle:before {
border: 1px solid #95a5a6;
}
#frame #sidepanel #profile .wrap #expanded {
padding: 100px 0 0 0;
display: block;
line-height: initial !important;
}
#frame #sidepanel #profile .wrap #expanded label {
float: left;
clear: both;
margin: 0 8px 5px 0;
padding: 5px 0;
}
#frame #sidepanel #profile .wrap #expanded input {
border: none;
margin-bottom: 6px;
background: #32465a;
border-radius: 3px;
color: #f5f5f5;
padding: 7px;
width: calc(100% - 43px);
}
#frame #sidepanel #profile .wrap #expanded input:focus {
outline: none;
background: #435f7a;
}
#frame #sidepanel #search {
border-top: 1px solid #32465a;
border-bottom: 1px solid #32465a;
font-weight: 300;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #search {
display: none;
}
}
#frame #sidepanel #search label {
position: absolute;
margin: 10px 0 0 20px;
}
#frame #sidepanel #search input {
font-family: "proxima-nova", "Source Sans Pro", sans-serif;
padding: 10px 0 10px 46px;
width: calc(100% - 25px);
border: none;
background: #32465a;
color: #f5f5f5;
}
#frame #sidepanel #search input:focus {
outline: none;
background: #435f7a;
}
#frame #sidepanel #search input::-webkit-input-placeholder {
color: #f5f5f5;
}
#frame #sidepanel #search input::-moz-placeholder {
color: #f5f5f5;
}
#frame #sidepanel #search input:-ms-input-placeholder {
color: #f5f5f5;
}
#frame #sidepanel #search input:-moz-placeholder {
color: #f5f5f5;
}
#frame #sidepanel #contacts {
height: calc(100%);
overflow-y: scroll;
overflow-x: hidden;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #contacts {
height: calc(100% - 149px);
overflow-y: scroll;
overflow-x: hidden;
}
#frame #sidepanel #contacts::-webkit-scrollbar {
display: none;
}
}
#frame #sidepanel #contacts.expanded {
height: calc(100% - 334px);
}
#frame #sidepanel #contacts::-webkit-scrollbar {
width: 8px;
background: #2c3e50;
}
#frame #sidepanel #contacts::-webkit-scrollbar-thumb {
background-color: #243140;
}
#frame #sidepanel #contacts ul li.contact {
position: relative;
padding: 10px 0 15px 0;
font-size: 0.9em;
cursor: pointer;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #contacts ul li.contact {
padding: 6px 0 46px 8px;
}
}
#frame #sidepanel #contacts ul li.contact:hover {
background: #32465a;
}
#frame #sidepanel #contacts ul li.contact.active {
background: #32465a;
border-right: 5px solid #435f7a;
}
#frame #sidepanel #contacts ul li.contact.active span.contact-status {
border: 2px solid #32465a !important;
}
#frame #sidepanel #contacts ul li.contact .wrap {
width: 88%;
margin: 0 auto;
position: relative;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #contacts ul li.contact .wrap {
width: 100%;
}
}
#frame #sidepanel #contacts ul li.contact .wrap span {
position: absolute;
left: 0;
margin: -2px 0 0 -2px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid #2c3e50;
background: #95a5a6;
}
#frame #sidepanel #contacts ul li.contact .wrap span.online {
background: #2ecc71;
}
#frame #sidepanel #contacts ul li.contact .wrap span.away {
background: #f1c40f;
}
#frame #sidepanel #contacts ul li.contact .wrap span.busy {
background: #e74c3c;
}
#frame #sidepanel #contacts ul li.contact .wrap img {
width: 22px;
border-radius: 50%;
float: left;
margin-right: 10px;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #contacts ul li.contact .wrap img {
margin-right: 0px;
}
}
#frame #sidepanel #contacts ul li.contact .wrap .meta {
padding: 5px 0 0 0;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #contacts ul li.contact .wrap .meta {
display: none;
}
}
#frame #sidepanel #contacts ul li.contact .wrap .meta .name {
font-weight: 600;
}
#frame #sidepanel #contacts ul li.contact .wrap .meta .preview {
margin: 5px 0 0 0;
padding: 0 0 1px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-moz-transition: 1s all ease;
-o-transition: 1s all ease;
-webkit-transition: 1s all ease;
transition: 1s all ease;
}
#frame #sidepanel #contacts ul li.contact .wrap .meta .preview span {
position: initial;
border-radius: initial;
background: none;
border: none;
padding: 0 2px 0 0;
margin: 0 0 0 1px;
opacity: .5;
}
#frame #sidepanel #bottom-bar {
position: absolute;
width: 100%;
bottom: 0;
}
#frame #sidepanel #bottom-bar button {
float: left;
border: none;
width: 50%;
padding: 10px 0;
background: #32465a;
color: #f5f5f5;
cursor: pointer;
font-size: 0.85em;
font-family: "proxima-nova", "Source Sans Pro", sans-serif;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #bottom-bar button {
float: none;
width: 100%;
padding: 15px 0;
}
}
#frame #sidepanel #bottom-bar button:focus {
outline: none;
}
#frame #sidepanel #bottom-bar button:nth-child(1) {
border-right: 1px solid #2c3e50;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #bottom-bar button:nth-child(1) {
border-right: none;
border-bottom: 1px solid #2c3e50;
}
}
#frame #sidepanel #bottom-bar button:hover {
background: #435f7a;
}
#frame #sidepanel #bottom-bar button i {
margin-right: 3px;
font-size: 1em;
}
@media screen and (max-width: 735px) {
#frame #sidepanel #bottom-bar button i {
font-size: 1.3em;
}
}
@media screen and (max-width: 735px) {
#frame #sidepanel #bottom-bar button span {
display: none;
}
}
#frame .content {
float: right;
width: 60%;
height: 100%;
overflow: hidden;
position: relative;
}
@media screen and (max-width: 735px) {
#frame .content {
width: calc(100% - 58px);
min-width: 300px !important;
}
}
@media screen and (min-width: 900px) {
#frame .content {
width: calc(100% - 340px);
}
}
#frame .content .contact-profile {
width: 100%;
height: 60px;
line-height: 60px;
background: #f5f5f5;
}
#frame .content .contact-profile img {
width: 40px;
height: 40px;
border-radius: 50%;
float: left;
margin: 9px 12px 0 9px;
}
#frame .content .contact-profile p {
float: left;
}
#frame .content .contact-profile .social-media {
float: right;
}
#frame .content .contact-profile .social-media i {
margin-left: 14px;
cursor: pointer;
}
#frame .content .contact-profile .social-media i:nth-last-child(1) {
margin-right: 20px;
}
#frame .content .contact-profile .social-media i:hover {
color: #435f7a;
}
#frame .content .messages {
height: auto;
min-height: calc(100% - 93px);
max-height: calc(100% - 93px);
overflow-y: scroll;
overflow-x: hidden;
}
@media screen and (max-width: 735px) {
#frame .content .messages {
max-height: calc(100% - 105px);
}
}
#frame .content .messages::-webkit-scrollbar {
width: 8px;
background: transparent;
}
#frame .content .messages::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
}
#frame .content .messages ul li {
display: inline-block;
clear: both;
float: left;
margin: 15px 15px 5px 15px;
width: calc(100% - 25px);
font-size: 0.9em;
}
#frame .content .messages ul li:nth-last-child(1) {
margin-bottom: 20px;
}
#frame .content .messages ul li.sent img {
margin: 6px 8px 0 0;
}
#frame .content .messages ul li.sent p {
background: #435f7a;
color: #f5f5f5;
}
#frame .content .messages ul li.replies img {
float: right;
margin: 6px 0 0 8px;
}
#frame .content .messages ul li.replies p {
background: #f5f5f5;
float: right;
}
#frame .content .messages ul li img {
width: 22px;
border-radius: 50%;
float: left;
}
#frame .content .messages ul li p {
display: inline-block;
padding: 10px 15px;
border-radius: 20px;
max-width: 205px;
line-height: 130%;
}
@media screen and (min-width: 735px) {
#frame .content .messages ul li p {
max-width: 300px;
}
}
#frame .content .message-input {
position: absolute;
bottom: 0;
width: 100%;
z-index: 99;
}
#frame .content .message-input .wrap {
position: relative;
}
#frame .content .message-input .wrap input {
font-family: "proxima-nova", "Source Sans Pro", sans-serif;
float: left;
border: none;
width: calc(100% - 100px);
padding: 11px 32px 10px 8px;
font-size: 0.8em;
color: #32465a;
}
@media screen and (max-width: 735px) {
#frame .content .message-input .wrap input {
padding: 15px 32px 16px 8px;
}
}
#frame .content .message-input .wrap input:focus {
outline: none;
}
#frame .content .message-input .wrap .attachment {
position: absolute;
right: 60px;
z-index: 4;
margin-top: 10px;
font-size: 1.1em;
color: #435f7a;
opacity: .5;
cursor: pointer;
}
@media screen and (max-width: 735px) {
#frame .content .message-input .wrap .attachment {
margin-top: 17px;
right: 65px;
}
}
#frame .content .message-input .wrap .attachment:hover {
opacity: 1;
}
#frame .content .message-input .wrap button {
float: right;
border: none;
width: 48px;
padding: 12px 0;
cursor: pointer;
background: #32465a;
color: #f5f5f5;
margin: 1px;
}
@media screen and (max-width: 735px) {
#frame .content .message-input .wrap button {
padding: 16px 0;
}
}
#frame .content .message-input .wrap button:hover {
background: #435f7a;
}
#frame .content .message-input .wrap button:focus {
outline: none;
}
</style>
</head>
<body class=" sidebar_main_open sidebar_main_swipe">
<!-- main header -->
<?php include("include/header.php");?>
<!-- main sidebar -->
<?php include("include/sidebar.php");?>
<div id="page_content">
<div id="frame">
<div id="sidepanel">
<div id="contacts">
<?php
$sql = "SELECT
candidats.nom,candidats.photo,candidats.id_user,candidats.nom_famille,chat.date
FROM chat,candidats
WHERE
chat.user_id = candidats.id_user
AND
chat.ecole_id IN (SELECT ecoles.id_ecole FROM ecoles WHERE
ecoles.id_ecole=".$_SESSION['user']->id_ecole." )
group by candidats.id_user
ORDER by date desc
";
$chats=$db->executeQuery($sql);
if ($id_user!=0) {
$sql_messages = "select * FROM chat,candidats,ecoles WHERE candidats.id_user=chat.user_id AND chat.ecole_id=ecoles.id_ecole and user_id='".$id_user."' group by chat.id_chat ORDER by `chat`.`date` ASC";
$messages=$db->executeQuery($sql_messages);
}else{
$messages = array();
}
?>
<ul>
<?php foreach ($chats as $chat): ?>
<a href="chat.php?id_user=<?php echo $chat->id_user; ?>" style="color: inherit;">
<li class="contact <?php if( $chat->id_user==$id_user){echo "active" ;} ?>">
<div class="wrap">
<img width="22" height="22" src="./photos/<?php echo $chat->photo; ?>" alt="" />
<div class="meta">
<p class="name">
<?php echo $chat->nom." ".$chat->nom_famille; ?>
</p>
<p class="preview">
<?php echo $chat->date; ?>
</p>
</div>
</div>
</li>
</a>
<?php endforeach ?>
</ul>
</div>
</div>
<div class="content">
<input id="id_user_hidden" type="hidden" value="<? echo $id_user?>" />
<input id="ecole_id_hidden" type="hidden" value="<? echo $ecole_id?>" />
<div class="modal fade" id="recordmodal" tabindex="-1" role="dialog" data-focus="true" data-backdrop="static" ria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<div id="audiorecorder">
<span id="time" >00:00</span>
</div>
<div class="player " >
<audio id="audioplayer" style="display:none; margin-top:15px; height: 40px ; width: 100%;" src="" type="audio/wav" controls>
هدا المنصفح لا يدعم العربية
</audio>
</div>
<div class="btn-group" role="group"">
<button type="button" id="recordStart" class="btn btn-success btn-md " >
<i class="fa fa-microphone" aria-hidden="true"></i> التسجيل
</button>
<button type="button" id="recordStop" class="btn btn-secondary btn-md " disabled>
<i class="fa fa-stop" aria-hidden="true"></i> ايقاف التسجيل
</button>
<!-- <button type="button" id="recordStart" class="btn btn-warning btn-md " disabled>
<i class="fa fa-undo" aria-hidden="true"></i> restart
</button> -->
<button type="button" id="sendAudio" class="btn btn-secondary btn-md " disabled>
<i class="fa fa-paper-plane" aria-hidden="true"></i> ارسال
</button>
<button data-dismiss="modal" type="button" class="btn btn-outline-danger btn-lg btn-block">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- --- audio modal --- -->
<?php if (count($messages)>0): ?>
<div class="contact-profile">
<img src="photos/<?php echo $messages[0]->photo; ?>" alt="" />
<p>
<?php echo $messages[0]->nom." ".$messages[0]->nom_famille ; ?>
</p>
</div>
<?php endif ?>
<div class="messages">
<ul>
<?php foreach ($messages as $message): ?>
<li <?php if ($message->sender=="user"): ?>
class="replies"
<?php else: ?>
class="sent"
<?php endif ?>>
<img height="22" width="22" src="<?php if ($message->sender=="user"): ?><?php echo "photos/".$message->photo?><?php else: ?><?php echo $message->logo ?><?php endif ?>" alt="" />
<p dir="rtl" style="text-align: right;">
<!-- start message -->
<i>
<?php echo $message->message ?>
</i><br><br>
<!-- end message -->
<!-- image -->
<?php if (!empty($message->image) and $message->image!=" " and $message->type != 'audio' ): ?>
<img
style="width: 100% ;
height: 150px;
border-radius: 0;
" src="<?php
$url_image="imggenerate.php?ecole=".$_SESSION['user']->nom_ecole."&img=".basename($message->image)."&N_agr=".$_SESSION['user']->N_agr;
echo $url_image;
?>">
<?php endif ?>
<!-- end image -->
<!-- audio -->
<?php if ($message->type == 'audio'): ?>
<audio style="margin-top:15px; height: 40px ; width: 600px;" src="<?php echo $message->image ?>" type="audio/wav" controls>ه
<?php endif ?>
<!-- end audio -->
<!-- start question and answers -->
<?php
echo $message->ques_text;
?>
<br>
<!-- end question and answers -->
</p>
</li>
<?php endforeach ?>
</ul>
</div>
<div class="message-input">
<div class="wrap">
<input type="text" placeholder="Write your message..." />
<button class="submit"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
<button data-toggle="modal" data-target="#recordmodal" type="button" class="btn btn-primary" ><i class="fa fa-microphone" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >
$(".messages").animate({ scrollTop: 560000 }, "slow");
$("#status-options ul li").click(function() {
$("#profile-img").removeClass();
$("#status-online").removeClass("active");
$("#status-away").removeClass("active");
$("#status-busy").removeClass("active");
$("#status-offline").removeClass("active");
$(this).addClass("active");
if($("#status-online").hasClass("active")) {
$("#profile-img").addClass("online");
} else if ($("#status-away").hasClass("active")) {
$("#profile-img").addClass("away");
} else if ($("#status-busy").hasClass("active")) {
$("#profile-img").addClass("busy");
} else if ($("#status-offline").hasClass("active")) {
$("#profile-img").addClass("offline");
} else {
$("#profile-img").removeClass();
};
$("#status-options").removeClass("active");
});
function newMessage(e) {
console.log(e);
message = $(".message-input input").val();
var data = {
type:"newMessage",
Message:message,
id_user:<?php echo $id_user; ?>,
ecole_id:<?php echo $ecole_id; ?>,
}
$.ajax({
type: "POST",
url: "chat.php",
data:data
});
if($.trim(message) == '') {
return false;
}
$('<li class="sent"><img height="22" width="22" src="./<?php echo $message->logo ?>" alt="" /><p>' + message + '</p></li>').appendTo($('.messages ul'));
$('.message-input input').val(null);
$('.contact.active .preview').html('<span>You: </span>' + message);
$(".messages").animate({ scrollTop: $(document).height() }, "fast");
};
$('.submit').click(function(e) {
newMessage(e);
});
</script>
<!-- common functions -->
<script src="assets/js/common.min.js"></script>
<!-- uikit functions -->
<script src="assets/js/uikit_custom.min.js"></script>
<!-- altair common functions/helpers -->
<script src="assets/js/altair_admin_common.min.js"></script>
<script src="assets/js/select2.js"></script>
<!-- datatables -->
<script src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<!-- datatables buttons-->
<script src="bower_components/datatables-buttons/js/dataTables.buttons.js"></script>
<script src="assets/js/custom/datatables/buttons.uikit.js"></script>
<script src="bower_components/datatables-buttons/js/buttons.colVis.js"></script>
<script src="bower_components/datatables-buttons/js/buttons.html5.js"></script>
<script src="bower_components/datatables-buttons/js/buttons.print.js"></script>
<!-- datatables custom integration -->
<script src="assets/js/custom/datatables/datatables.uikit.min.js"></script>
<!-- datatables functions -->
<script src="assets/js/pages/plugins_datatables.min.js"></script>
<?php include 'include/footer.php'; ?>
<script src="recorder.js"></script>
<script src="app.js"></script>
</body>
</html>
Zerion Mini Shell 1.0