cief/IZYIM-Prototype
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/IZYIM-Prototype.git synced 2026-08-19 12:43:58 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
0f291f28e689a9eeea76c63e8558fb4ec251c862
IZYIM-Prototype/Forwarder/chat.html
T
Syed Amir 0f291f28e6 chat share
2017-08-03 10:25:56 +08:00

1234 lines
76 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.3.7
Version: 4.7.5
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]>
<html lang="en" class="ie8 no-js">
<![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js">
<![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<meta charset="utf-8" />
<title>IZYIM | Messenger</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports" name="description" />
<meta content="" name="author" />
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="../assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css" />
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link href="../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link rel="stylesheet" type="text/css" href="../assets/qweqwe/css/jquery.emojipicker.css">
<link rel="stylesheet" type="text/css" href="../assets/qweqwe/css/jquery.emojipicker.a.css">
<link href="../assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css" />
<link href="../assets/lightbox/dist/ekko-lightbox.css" rel="stylesheet">
<link href="../assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color" />
<link href="../assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css" />
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="favicon.ico" />
<style>
.qweqwe {
height: 435px !important;
}
.chat-form {
margin-top: 1px;
}
.tooltip {
position: fixed;
}
.btn-circless {
width: 50px;
height: 50px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
@media (min-width: 992px) {
.page-content-wrapper .page-content {
margin-left: 200px;
}
}
.img-fluid {
max-width: 100% !important;
height: auto !important;
vertical-align: middle !important;
}
@media (min-width: 992px){
.page-sidebar {
width: 200px;
float: left;
position: relative;
margin-right: -100%;
}
}
</style>
</head>
<!-- END HEAD -->
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-sidebar-closed">
<div class="page-wrapper">
<!-- BEGIN HEADER -->
<div class="page-header navbar navbar-fixed-top">
<!-- BEGIN HEADER INNER -->
<div class="page-header-inner ">
<!-- BEGIN LOGO -->
<div class="page-logo">
<div class="menu-toggler sidebar-toggler">
<span></span>
</div>
</div>
<!-- END LOGO -->
<!-- BEGIN RESPONSIVE MENU TOGGLER -->
<a href="javascript:;" class="menu-toggler responsive-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span></span>
</a>
<!-- END RESPONSIVE MENU TOGGLER -->
<!-- BEGIN TOP NAVIGATION MENU -->
<div class="top-menu">
<ul class="nav navbar-nav pull-right">
<!-- BEGIN USER LOGIN DROPDOWN -->
<!-- DOC: Apply "dropdown-dark" class after below "dropdown-extended" to change the dropdown styte -->
<li class="dropdown dropdown-user">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<img alt="" class="img-circle" src="../assets/layouts/layout/img/avatar3_small.jpg" />
<span class="username username-hide-on-mobile"> Syed Amir </span>
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu dropdown-menu-default">
<li>
<a href="page_user_profile_1.html">
<i class="icon-user"></i> My Profile </a>
</li>
<li>
<a href="page_user_login_1.html">
<i class="icon-key"></i> Log Out </a>
</li>
</ul>
</li>
<!-- END USER LOGIN DROPDOWN -->
</ul>
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END HEADER INNER -->
</div>
<!-- END HEADER -->
<!-- BEGIN HEADER & CONTENT DIVIDER -->
<div class="clearfix"> </div>
<!-- END HEADER & CONTENT DIVIDER -->
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div class="page-sidebar-wrapper">
<!-- BEGIN SIDEBAR -->
<!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
<!-- DOC: Change data-auto-speed="200" to adjust the sub menu slide up/down speed -->
<div class="page-sidebar navbar-collapse collapse">
<!-- BEGIN SIDEBAR MENU -->
<!-- DOC: Apply "page-sidebar-menu-light" class right after "page-sidebar-menu" to enable light sidebar menu style(without borders) -->
<!-- DOC: Apply "page-sidebar-menu-hover-submenu" class right after "page-sidebar-menu" to enable hoverable(hover vs accordion) sub menu mode -->
<!-- DOC: Apply "page-sidebar-menu-closed" class right after "page-sidebar-menu" to collapse("page-sidebar-closed" class must be applied to the body element) the sidebar sub menu mode -->
<!-- DOC: Set data-auto-scroll="false" to disable the sidebar from auto scrolling/focusing -->
<!-- DOC: Set data-keep-expand="true" to keep the submenues expanded -->
<!-- DOC: Set data-auto-speed="200" to adjust the sub menu slide up/down speed -->
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-closed" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200" style="padding-top: 20px">
<!-- DOC: To remove the sidebar toggler from the sidebar you just need to completely remove the below "sidebar-toggler-wrapper" LI element -->
<!-- BEGIN SIDEBAR TOGGLER BUTTON -->
<li class="sidebar-toggler-wrapper hide">
<div class="sidebar-toggler">
<span></span>
</div>
</li>
<li>
<center><img src="../assets/global/img/logo.png" style="height:auto ; width:60%" />
</center>
</li>
<hr>
<li class="nav-item start">
<a href="index.html" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">Order Status</span>
<span class="selected"></span>
</a>
</li>
<li class="nav-item">
<a href="notice.html" class="nav-link nav-toggle">
<i class="fa fa-newspaper-o"></i>
<span class="title">Notice</span>
<span class="selected"></span>
</a>
</li>
<li class="nav-item">
<a href="deliveryarrange.html" class="nav-link nav-toggle">
<i class="fa fa-briefcase"></i>
<span class="title">Delivery Arrangement</span>
<span class="selected"></span>
</a>
</li>
<li class="nav-item active open ">
<a href="chat.html?menu=true" class="nav-link nav-toggle">
<i class="fa fa-comments-o"></i>
<span class="title">Messenger</span>
<span class="selected"></span>
</a>
</li>
<li class="nav-item">
<a href="trackorder.html?menu=true" class="nav-link nav-toggle">
<i class="icon-basket"></i>
<span class="title">Track Order</span>
<span class="selected"></span>
</a>
</li>
<li class="nav-item ">
<a href="profile.html" class="nav-link nav-toggle">
<i class="icon-user"></i>
<span class="title">Profile</span>
</a>
</li>
<li class="nav-item">
<a href="contactlist.html" class="nav-link nav-toggle">
<i class="icon-notebook"></i>
<span class="title">Contact List</span>
</a>
</li>
<li class="nav-item">
<a href="javascript:;" class="nav-link nav-toggle">
<i class="icon-settings"></i>
<span class="title">Settings</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
<a href="formcustomize.html" class="nav-link ">
<i class="icon-clock"></i>
<span class="title">Form Customization</span>
</a>
</li>
<li class="nav-item">
<a href="updatecurrency.html" class="nav-link ">
<i class="icon-check"></i>
<span class="title">Update Currency</span>
</a>
</li>
</ul>
</li>
</ul>
<!-- END SIDEBAR MENU -->
<!-- END SIDEBAR MENU -->
</div>
<!-- END SIDEBAR -->
</div>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<!-- BEGIN CONTENT BODY -->
<div class="page-content">
<!-- BEGIN PAGE BAR -->
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<a href="index.html">Home</a>
<i class="fa fa-circle"></i>
</li>
<li>
<span>Contact List</span>
</li>
</ul>
</div>
<!-- CONTENT -->
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-12">
<div class="portlet light bordered" style="margin-bottom: 10px;">
<div class="portlet-title">
<div class="caption">
<span class="caption-subject bold font-purple-plum uppercase"> Order List </span>
</div>
<div class="inputs">
<div class="row">
<div class="col-md-12">
<div class="col-md-9">
<div class="portlet-input input-inline input-small" style="margin-bottom:10px">
<div class="input-icon right">
<i class="icon-magnifier"></i>
<input type="text" class="form-control input-circle" placeholder="search...">
</div>
</div>
</div>
<div class="col-md-3">
<div class="btn-group" style="width:100%">
<a href="" class="btn btn-circle btn-icon-only btn-default" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">
<span class="fa fa-filter"></span>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="javascript:;">
<span class="label label-sm label-success"> Active </span>
</a>
</li>
<li>
<a href="javascript:;">
<span class="label label-sm label-success"> Closed </span>
</a>
</li>
<li class="active">
<a href="javascript:;">
<span class="label label-sm label-success"> Pending </span>
</a>
</li>
<li class="active">
<a href="javascript:;">
<span class="label label-sm label-success"> Cancel </span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="portlet-body">
<div id="tree_1" class="tree-demo">
<ul>
<li>
General
</li>
<li>
CIEF
<ul>
<li data-jstree='{ "opened" : true }'>
014528
<ul>
<li data-jstree='{ "type" : "file" }' onclick="show_content();"> 014528 (1)<span style="margin-bottom: 20px;" class="badge badge-danger">5</span></li>
<li data-jstree='{ "type" : "file" }' onclick="show_content();"> 014528 (2)<span style="margin-bottom: 20px;" class="badge badge-danger">2</span></li>
</ul>
</li>
</ul>
</li>
<li>
Help
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="file_manager" >
<div class="col-md-12">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<span class="caption-subject bold font-purple-plum uppercase"> File Manager </span>
</div>
</div>
<div class="portlet-body">
<div class="row">
<div class="col-md-6">
<img src="../assets/global/img/folderimg.ico" alt="Image" style="width:150px;height:150px;" data-toggle="modal" href="#doc">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9" id="with_content" >
<div class="row">
<div class="col-md-12">
<div class="portlet light portlet-fit full-height-content full-height-content-scrollable bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-bubble font-hide hide"></i>
<span class="caption-subject font-hide bold uppercase">Chats</span>
</div>
<div class="actions">
<a class="btn btn-circle btn-default" style="margin-left: 15px;" data-toggle="modal" href="#chat">
<i class="fa fa-plus"></i> Add Group </a>
<a class="btn btn-circle btn-default" style="margin-left: 15px;" data-toggle="modal" href="#doc">
<i class="fa fa-plus"></i> Upload </a>
<a href="javascript:window.open('trackorder2.html', 'Track Order', 'width=1000,height=600');" class="btn btn-circle btn-default tooltips" data-placement="bottom" data-original-title="Track Order">
<i class="fa fa-map-marker" aria-hidden="true"></i> Track Order
</a>
<a class="btn btn-circle btn-icon-only btn-default fullscreen" href="javascript:;" data-original-title="" title=""> </a>
</div>
</div>
<div class="portlet-body" style="height: 400px;" id="chats">
<div class="scroller" style="height:80%" data-always-visible="1" data-rail-visible1="1">
<div class="tabbable-custom nav-justified">
<ul class="nav nav-tabs nav-justified">
<li class="active">
<a href="#tab_1_1_1" data-toggle="tab">
<span class="editInPlace">014528 </span> <i class="dropdown-toggless fa fa-users pull-right tooltips" data-placement="bottom" data-original-title="Members" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="#tab_1_1_2" data-toggle="tab">
<span class="editInPlace">014528 (2)</span> <i class="dropdown-toggless fa fa-users pull-right tooltips" data-placement="bottom" data-original-title="Members" aria-hidden="true"></i>
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1_1_1">
<ul class="chats">
<li class="out">
<a style="float:right" data-toggle="modal" href="#profile">Lisa Wong </a>
<br>
<img class="avatar" alt="" src="../assets/layouts/layout/img/avatar2.jpg" />
<div class="message">
<span class="arrow"> </span>
<span class="body"> <img src="../assets/global/img/attachment.PNG" alt="Container" ><br/> <a href="#url">Reply</a> </span>
<span class="datetime" style="float:left"> 20:11 </span>
</div>
</li>
<li class="out">
<a style="float:right" data-toggle="modal" href="#profile"> Lisa Wong </a>
<br>
<img class="avatar" alt="" src="../assets/layouts/layout/img/avatar2.jpg" />
<div class="message">
<span class="arrow"></span>
<span class="body"><img src="../assets/global/img/cont.jpg" alt="Container" style="width:204px;height:128px;"> <br/> <a href="#url">Reply</a> </span>
<span class="datetime" style="float:left"> 20:11 </span>
</div>
</li>
<li class="in">
<a style="float:left" data-toggle="modal" href="#profile"> Bob Nilson </a>
<br>
<img class="avatar" alt="" src="../assets/layouts/layout/img/avatar1.jpg" />
<div class="message">
<span class="arrow"> </span>
<span class="body"> Confirm <br/> <a href="#url">Reply</a> </span>
<span class="datetime" style="float:right"> 20:30 </span>
</div>
</li>
<li class="in">
<a style="float:left" data-toggle="modal" href="#profile"> Bob Nilson </a>
<br>
<img class="avatar" alt="" src="../assets/layouts/layout/img/avatar1.jpg" />
<div class="message">
<span class="arrow"> </span>
<span class="body"> Proceed. <br/> <a href="#url">Reply</a> </span>
<span class="datetime" style="float:right"> 20:30 </span>
</div>
</li>
<li class="out">
<a style="float:right" data-toggle="modal" href="#profile"> Richard Doe </a>
<br>
<img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
<div class="message">
<span class="arrow"> </span>
<span class="body"> CNTR58 <br/> <a href="#url">Reply</a> </span>
<span class="datetime" style="float:left"> 20:33 </span>
</div>
</li>
</ul>
</div>
<div class="tab-pane" id="tab_1_1_2">
<ul class="chats">
<li class="in">
<a style="float:right" data-toggle="modal" href="#profile"> Bob Nilson </a>
<br>
<img class="avatar" alt="" src="../assets/layouts/layout/img/avatar1.jpg" />
<div class="message">
<span class="arrow"> </span>
<span class="body"> Hi. </span>
<span class="datetime" style="float:right"> 20:30 </span>
</div>
</li>
<li class="out">
<a style="float:right" data-toggle="modal" href="#profile"> Richard Doe </a>
<br>
<img class="avatar" alt="" src="../assets/layouts/layout/img/avatar3.jpg" />
<div class="message">
<span class="arrow"> </span>
<span class="body"> Bye. </span>
<span class="datetime" style="float:left"> 20:33 </span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="chat-form">
<div class="input-group">
<span class="input-group-btn icn-only" style="display:none">
<button id="create" style="display:none" class="btn blue"><i class="fa fa-check icon-white"></i></button>
</span>
<input type="text" id="text-custom-trigger" class="form-control">
<span class="input-group-btn icn-only">
<button class="btn blue" id="toggle"><i class="fa fa-smile-o icon-white"></i></button>
</span>
<span class="input-group-btn icn-only">
<button type="button" class="btn blue" data-container="body" data-toggle="popover" data-placement="top" data-html="true" data-content="
<button type='button' class='btn btn-default btn-circle btn-circless'><i class='fa fa-file' style='font-size:20px' aria-hidden='true'></i></button>
<button type='button' class='btn btn-default btn-circle btn-circless'><i class='fa fa-picture-o' style='font-size:20px' aria-hidden='true' ></i></button>
<button type='button' class='btn btn-default btn-circle btn-circless'><i class='fa fa-video-camera' style='font-size:20px' aria-hidden='true'></i></button>
<button type='button' class='btn btn-default btn-circle btn-circless'><i class='fa fa-question' style='font-size:20px' aria-hidden='true''></i></button>
<button type='button' class='btn btn-default btn-circle btn-circless'><img class='avatar' alt='' src='../assets/global/img/qrc.png' style='width:25px;height:25px;'/></a></button>">
<i class="fa fa-plus-square" aria-hidden="true"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9" id="without_content" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="portlet light portlet-fit full-height-content full-height-content-scrollable bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-bubble font-hide hide"></i>
<span class="caption-subject font-hide bold uppercase">Chats</span>
</div>
</div>
<div class="portlet-body" style="height: 400px;">
<h3 style="text-align:center; margin-top: 150px;">Please choose order number </h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
<!-- END CONTENT BODY -->
<div class="modal fade" id="chat" tabindex="-1" role="chat" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form role="form">
<div class="form-body">
<div class="form-group">
<label>Name</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="text" class="form-control" placeholder="Name"> </div>
</div>
<div class="form-group">
<label>Choose Member</label>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input class="form-control" value="A" disabled>
<span class="input-group-addon">
<input type="checkbox"> </span>
</div>
<!-- /input-group -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input class="form-control" value="B" disabled>
<span class="input-group-addon">
<input type="checkbox"> </span>
</div>
<!-- /input-group -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input class="form-control" value="C" disabled>
<span class="input-group-addon">
<input type="checkbox"> </span>
</div>
<!-- /input-group -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input class="form-control" value="D" disabled>
<span class="input-group-addon">
<input type="checkbox"> </span>
</div>
<!-- /input-group -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input class="form-control" value="E" disabled>
<span class="input-group-addon">
<input type="checkbox"> </span>
</div>
<!-- /input-group -->
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
<button type="button" class="btn green">Create</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="member" tabindex="-1" role="member" style="z-index:999999;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form role="form">
<div class="form-body">
<div class="form-group">
<label>Choose Member</label>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input class="form-control" value="A" disabled>
<span class="input-group-addon">
<input type="checkbox"> </span>
</div>
<!-- /input-group -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input class="form-control" value="B" disabled>
<span class="input-group-addon">
<input type="checkbox"> </span>
</div>
<!-- /input-group -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input class="form-control" value="C" disabled>
<span class="input-group-addon">
<input type="checkbox"> </span>
</div>
<!-- /input-group -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input class="form-control" value="D" disabled>
<span class="input-group-addon">
<input type="checkbox"> </span>
</div>
<!-- /input-group -->
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input class="form-control" value="E" disabled>
<span class="input-group-addon">
<input type="checkbox"> </span>
</div>
<!-- /input-group -->
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn dark btn-outline" data-dismiss="modal">Close</button>
<button type="button" class="btn green">Create</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="profile" tabindex="-1" role="profile" aria-hidden="true">
<div class="portlet-body" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="form-body">
<div class="form-group">
<!-- PERSONAL INFO TAB -->
<div align="center">
<div class="profile-userpic">
<img src="../assets/pages/media/profile/profile_user.jpg" class="img-responsive" alt="" style="width:200px;height:200px;"> </div>
<br/>
<a href="javascript:void(0)" class="btn btn-primary btn-follow"> Add as Friend</a>
<a class="btn btn-primary btn-follow float:right" data-toggle="modal" id="share" href="#member"> Share to Friend</a>
</div>
<div class="tab-pane active" id="tab_1_1">
<form role="form" action="#">
<table style="width:100%">
<form action="#" class="form-horizontal form-row-seperated">
<tr>
<div class="form-group">
<td> <label class="control-label">First Name </label></td>
<td><label class="control-label">: Syed </label></td>
</div>
</tr>
<tr>
<div class="form-group">
<td><label class="control-label">Last Name </label></td>
<td><label class="control-label">: Amir</label></td>
</div>
</tr>
<tr>
<div class="form-group">
<td><label class="control-label">Phone No </label></td>
<td><label class="control-label">: 0142536987</label></td>
</div>
</tr>
<tr>
<div class="form-group">
<td><label class="control-label">Email</label></td>
<td><label class="control-label">: amirleader@gmail.com</label></td>
</div>
</tr>
<tr>
<div class="form-group">
<td><label class="control-label">Position</label></td>
<td><label class="control-label">: Sales</label></td>
</div>
</tr>
<tr>
<div class="form-group">
<td><label class="control-label">Interests</label></td>
<td><label class="control-label">: Design</label></td>
</div>
</tr>
<tr>
<div class="form-group">
<td><label class="control-label">Occupation</label></td>
<td><label class="control-label">: Forwarder</label></td>
</div>
</tr>
</form>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="doc" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">✕</button>
<h4 class="modal-title" id="myModalLabel">File Manager</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<div class="btn-group ">
<a class="btn dropdown-toggle btn-default" data-toggle="dropdown" href="#">
<span class="glyphicon glyphicon-plus-sign"></span>File Type
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Documents</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Sounds</a></li>
<li><a href="#">Others</a></li>
</ul>
</div>
</div>
<br/>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
<div class="col-md-4">
<div class="pull-right">
<button class="btn btn-default">
<span class="glyphicon glyphicon-refresh"></span>
</button>
<div class="btn-group">
<button id="list" type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span>
</button>
<button id="thumbnail" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-th"></span>
</button>
</div>
<div class="btn-group ">
<a class="btn dropdown-toggle btn-default" data-toggle="dropdown" href="#">
Sort
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">ID</a></li>
<li><a href="#">Title</a></li>
<li><a href="#">Date</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="col-md-3">
<div class="row">
<div class="col-md-9">
<form action="#" class="dropzone dropzone-file-area" id="my-dropzone" style="width: 180px;margin-top: 0px;margin-left: 0px;margin-right: 0px;">
<h4 class="sbold">Drop files here or click to upload</h4>
</form>
</div>
</div>
</div>
<div id="thumbnails" class="col-md-9">
<div data-code="example-2">
<div class="row">
<div class="col-md-10" style="float: none; margin: 0 auto;">
<div class="row" style="margin-left:5px;margin-right:5px;margin-top:15px;margin-bottom:15px;">
<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=252" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=252" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=253" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=253" class="img-fluid">
</a>
</div>
<div class="row" style="margin-left:5px;margin-right:5px;margin-top:10px;margin-bottom:10px;">
<a href="https://unsplash.it/1200/768.jpg?image=254" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=254" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=255" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=255" class="img-fluid">
</a>
<a href="https://unsplash.it/1200/768.jpg?image=256" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">
<img src="https://unsplash.it/600.jpg?image=256" class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-9" id="lists" style="display:none;">
<table class="table table-hover" style="height:300px">
<thead>
<tr>
<th>ID</th>
<th>Date</th>
<th>Title</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2017-08-02 13:45:22</td>
<td><a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">Container</a></td>
<td class="text-center"><a href="#" onclick="confirm('Are you confirm to delete this file?')" class="btn btn-xs"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td>2</td>
<td>2017-08-02 13:45:22</td>
<td><a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">Container</a></td>
<td class="text-center"><a href="#" onclick="confirm('Are you confirm to delete this file?')" class="btn btn-xs"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td>3</td>
<td>2017-08-02 13:45:22</td>
<td><a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">Container</a></td>
<td class="text-center"><a href="#" onclick="confirm('Are you confirm to delete this file?')" class="btn btn-xs"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td>4</td>
<td>2017-08-02 13:45:22</td>
<td><a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox" data-gallery="example-gallery" class="col-sm-4">Container</a></td>
<td class="text-center"><a href="#" onclick="confirm('Are you confirm to delete this file?')" class="btn btn-xs"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CONTENT -->
<!-- BEGIN QUICK SIDEBAR -->
<a href="javascript:;" class="page-quick-sidebar-toggler">
<i class="icon-login"></i>
</a>
<div class="page-quick-sidebar-wrapper" data-close-on-body-click="false">
<div class="page-quick-sidebar">
<ul class="nav nav-tabs">
<li class="active">
<a href="javascript:;" data-target="#quick_sidebar_tab_1" data-toggle="tab"> IMPORTER
</a>
</li>
<li>
<a href="javascript:;" data-target="#quick_sidebar_tab_2" data-toggle="tab"> FORWARDER
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active page-quick-sidebar-chat" id="quick_sidebar_tab_1">
<div class="page-quick-sidebar-chat-users" data-rail-color="#ddd" data-wrapper-class="page-quick-sidebar-list">
<h3 class="list-heading">Members</h3>
<ul class="media-list list-items">
<li class="media">
<img class="media-object" src="../assets/layouts/layout/img/avatar2.jpg" alt="..." data-toggle="modal" href="#profile">
<div class="media-body">
<h4 class="media-heading">Lisa Wongs</h4>
<div class="media-heading-sub">Admin </div>
</div>
</li>
<li class="media">
<img class="media-object" src="../assets/layouts/layout/img/avatar1.jpg" alt="..." data-toggle="modal" href="#profile">
<div class="media-body">
<h4 class="media-heading">Bob Nilso</h4>
</div>
</li>
<li class="media">
<img class="media-object" src="../assets/layouts/layout/img/avatar3.jpg" alt="..." data-toggle="modal" href="#profile">
<div class="media-body">
<h4 class="media-heading">Richard Doe</h4>
</div>
</li>
</ul>
</div>
</div>
<div class="tab-pane page-quick-sidebar-chat" id="quick_sidebar_tab_2">
<div class="page-quick-sidebar-chat-users" data-rail-color="#ddd" data-wrapper-class="page-quick-sidebar-list">
<h3 class="list-heading">Members</h3>
<ul class="media-list list-items">
<li class="media">
<img class="media-object" src="../assets/layouts/layout/img/avatar1.jpg" alt="..." data-toggle="modal" href="#profile">
<div class="media-body">
<h4 class="media-heading">Bob Nilso</h4>
<div class="media-heading-sub">Admin </div>
</div>
</li>
<li class="media">
<img class="media-object" src="../assets/layouts/layout/img/avatar2.jpg" alt="..." data-toggle="modal" href="#profile">
<div class="media-body">
<h4 class="media-heading">Lisa Wongs</h4>
</div>
</li>
<li class="media">
<img class="media-object" src="../assets/layouts/layout/img/avatar3.jpg" alt="..." data-toggle="modal" href="#profile">
<div class="media-body">
<h4 class="media-heading">Richard Doe</h4>
</div>
</li>
<li align="center">
<div class="actions">
<a class="btn btn-circle btn-default" style="margin-left: 15px;" data-toggle="modal" href="#member">
<i class="fa fa-plus"></i> Add </a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- END QUICK SIDEBAR -->
</div>
</div>
<!-- END CONTAINER -->
<!-- BEGIN FOOTER -->
<div class="page-footer">
<div class="page-footer-inner">
Copyright &copy; 2017 IZYIM.COM
<div class="scroll-to-top">
<i class="icon-arrow-up"></i>
</div>
</div>
<!-- END FOOTER -->
</div>
<!--[if lt IE 9]>
<script src="../assets/global/plugins/respond.min.js"></script>
<script src="../assets/global/plugins/excanvas.min.js"></script>
<script src="../assets/global/plugins/ie8.fix.min.js"></script>
<![endif]-->
<!-- BEGIN CORE PLUGINS -->
<script src="../assets/global/plugins/dropzone/dropzone.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../assets/qweqwe/js/jquery.emojipicker.js"></script>
<script type="text/javascript" src="../assets/qweqwe/js/jquery.emojis.js"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="../assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/morris/morris.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="../assets/pages/scripts/dashboard.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script src="../assets/pages/scripts/ui-tree.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="../assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="../assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
<script type="text/javascript">
$(document).ready(function(e) {
if(window.location.search == '?menu=true'){
//alert('heiiiii');
document.getElementById("without_content").style.display = "";
document.getElementById("with_content").style.display = "none";
document.getElementById("file_manager").style.display = "none";
}else{
//alert('hoooo');
document.getElementById("without_content").style.display = "none";
document.getElementById("with_content").style.display = "";
document.getElementById("file_manager").style.display = "";
}
$('#create').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker({
width: '320px',
height: '200px',
button: false
});
});
$('#toggle').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker('toggle');
});
$('#destroy').click(function(e) {
e.preventDefault();
$('#text-custom-trigger').emojiPicker('destroy');
})
$("#create").trigger('click');
});
</script>
<script type="text/javascript">
function show_content(){
//alert('hoooo');
document.getElementById("without_content").style.display = "none";
document.getElementById("with_content").style.display = "";
document.getElementById("file_manager").style.display = "";
}
window.onload = function() {
var elements = getElementsByClassName('editInPlace', '*', document);
for (var i = 0; i < elements.length; i++) {
elements[i].ondblclick = function() {
this.setAttribute('oldText', this.innerHTML); // not actually required. I use this just in case you want to cancel and set the original text back.
var textBox = document.createElement('INPUT');
textBox.setAttribute('type', 'text');
textBox.value = this.innerHTML;
textBox.onblur = function() {
var newValue = this.value;
this.parentNode.innerHTML = newValue;
//alert("Your new value: \n\n" + newValue);
}
this.innerHTML = '';
this.appendChild(textBox);
}
}(i);
}
function getElementsByClassName(className, tag, elm) {
var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all) ? elm.all : elm.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for (var i = 0; i < length; i++) {
current = elements[i];
if (testClass.test(current.className)) {
returnElements.push(current);
}
}
return returnElements;
}
$('[data-toggle="popover"]').popover({trigger: 'focus'})
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script src="../assets/lightbox/dist/ekko-lightbox.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.2.1/anchor.min.js"></script>
<script type="text/javascript">
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).on('click', '[data-toggle="lightbox"]:not([data-gallery="navigateTo"]):not([data-gallery="example-gallery-11"])', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
// disable wrapping
$(document).on('click', '[data-toggle="lightbox"][data-gallery="example-gallery-11"]', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
wrapping: false
});
});
//Programmatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$('#open-youtube').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
// navigateTo
$(document).on('click', '[data-toggle="lightbox"][data-gallery="navigateTo"]', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
this.modal().on('click', '.modal-footer a', function(e) {
e.preventDefault();
this.navigateTo(2);
}.bind(this));
}
});
});
/**
* Documentation specific - ignore this
*/
anchors.options.placement = 'left';
anchors.add('h3');
$('code[data-code]').each(function() {
var $code = $(this),
$pair = $('div[data-code="'+$code.data('code')+'"]');
$code.hide();
var text = $code.text($pair.html()).html().trim().split("\n");
var indentLength = text[text.length - 1].match(/^\s+/)
indentLength = indentLength ? indentLength[0].length : 24;
var indent = '';
for(var i = 0; i < indentLength; i++)
indent += ' ';
if($code.data('trim') == 'all') {
for (var i = 0; i < text.length; i++)
text[i] = text[i].trim();
} else {
for (var i = 0; i < text.length; i++)
text[i] = text[i].replace(indent, ' ').replace(' ', '');
}
text = text.join("\n");
$code.html(text).show();
});
});
$('#thumbnail').on('click', function() {
document.getElementById("thumbnails").style.display = "";
document.getElementById("lists").style.display = "none";
});
$('#list').on('click', function() {
document.getElementById("thumbnails").style.display = "none";
document.getElementById("lists").style.display = "";
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink