加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
video-call.html 47.08 KB
一键复制 编辑 原始数据 按行查看 历史
风原 提交于 2022-04-03 14:12 . 初始化
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
<title>Preclinic - Medical & Hospital - Bootstrap 4 Admin Template</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!--[if lt IE 9]>
<script src="assets/js/html5shiv.min.js"></script>
<script src="assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="main-wrapper">
<div class="sidebar" id="sidebar" style="top:0px;">
<div class="sidebar-inner slimscroll">
<div class="sidebar-menu">
<ul>
<li>
<a href="index.html"><i class="fa fa-home back-icon"></i> <span>Back to Home</span></a>
</li>
<li class="menu-title">Chat Groups <a href="#" class="add-user-icon" data-toggle="modal" data-target="#add_group"><i class="fa fa-plus"></i></a></li>
<li>
<a href="chat.html">#General</a>
</li>
<li>
<a href="chat.html">#Video Responsive Survey</a>
</li>
<li>
<a href="chat.html">#500rs</a>
</li>
<li>
<a href="chat.html">#warehouse</a>
</li>
<li class="menu-title">Direct Chats <a href="#" class="add-user-icon" data-toggle="modal" data-target="#add_chat_user"><i class="fa fa-plus"></i></a></li>
<li>
<a href="chat.html"><span class="chat-avatar-sm user-img"><img src="assets/img/user.jpg" alt="" class="rounded-circle"><span class="status online"></span></span> John Doe <span class="badge badge-pill bg-danger float-right">1</span></a>
</li>
<li>
<a href="chat.html"><span class="chat-avatar-sm user-img"><img src="assets/img/user.jpg" alt="" class="rounded-circle"><span class="status offline"></span></span> Richard Miles <span class="badge badge-pill bg-danger float-right">18</span></a>
</li>
<li>
<a href="chat.html"><span class="chat-avatar-sm user-img"><img src="assets/img/user.jpg" alt="" class="rounded-circle"><span class="status away"></span></span> John Smith</a>
</li>
<li class="active">
<a href="chat.html"><span class="chat-avatar-sm user-img"><img src="assets/img/user.jpg" alt="" class="rounded-circle"><span class="status online"></span></span> Mike Litorus <span class="badge badge-pill bg-danger float-right">108</span></a>
</li>
</ul>
</div>
</div>
</div>
<div class="page-wrapper" style="padding-top: 0px;">
<div class="chat-main-row">
<div class="chat-main-wrapper">
<div class="col-lg-9 message-view chat-view">
<div class="chat-window">
<div class="fixed-header">
<div class="navbar">
<div class="user-details mr-auto">
<div class="float-left user-img m-r-10">
<a href="profile.html" title="Mike Litorus"><img src="assets/img/user.jpg" alt="" class="w-40 rounded-circle"><span class="status online"></span></a>
</div>
<div class="user-info float-left">
<a href="profile.html" title="Mike Litorus"><span class="font-bold">Mike Litorus</span></a>
<span class="last-seen">Online</span>
</div>
</div>
<ul class="nav custom-menu">
<li class="nav-item">
<a class="task-chat profile-rightbar float-right" href="#chat_sidebar" id="task_chat"><i aria-hidden="true" class="fa fa-comments"></i></a>
</li>
<li class="nav-item dropdown dropdown-action">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-cog"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a href="javascript:void(0)" class="dropdown-item">Settings</a>
</div>
</li>
</ul>
</div>
</div>
<div class="chat-contents">
<div class="chat-content-wrap">
<div class="user-video">
<img src="assets/img/video-call.jpg" alt="">
</div>
<div class="my-video">
<ul>
<li>
<img src="assets/img/user-02.jpg" class="img-fluid" alt="">
</li>
</ul>
</div>
</div>
</div>
<div class="chat-footer">
<div class="call-icons">
<span class="call-duration">00:59</span>
<ul class="call-items">
<li class="call-item">
<a href="" title="Enable Video" data-placement="top" data-toggle="tooltip">
<i class="fa fa-video-camera camera"></i>
</a>
</li>
<li class="call-item">
<a href="" title="Mute Audio" data-placement="top" data-toggle="tooltip">
<i class="fa fa-microphone microphone"></i>
</a>
</li>
<li class="call-item">
<a href="" title="Add User" data-placement="top" data-toggle="tooltip">
<i class="fa fa-user-plus"></i>
</a>
</li>
<li class="call-item">
<a href="" title="Full Screen" data-placement="top" data-toggle="tooltip">
<i class="fa fa-arrows-v full-screen"></i>
</a>
</li>
</ul>
<div class="end-call">
<a href="">
End Call
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 message-view chat-profile-view chat-sidebar" id="chat_sidebar">
<div class="chat-window video-window">
<div class="fixed-header">
<ul class="nav nav-tabs nav-tabs-bottom">
<li class="nav-item"><a class="nav-link active" href="#calls_tab" data-toggle="tab">Calls</a></li>
<li class="nav-item"><a class="nav-link" href="#chats_tab" data-toggle="tab">Chats</a></li>
<li class="nav-item"><a class="nav-link" href="#profile_tab" data-toggle="tab">Profile</a></li>
</ul>
</div>
<div class="tab-content chat-contents">
<div class="content-full tab-pane show active" id="calls_tab">
<div class="chat-wrap-inner">
<div class="chat-box">
<div class="chats">
<div class="chat chat-left">
<div class="chat-avatar">
<a href="profile.html" class="avatar">
<img alt="John Doe" src="assets/img/user.jpg" class="img-fluid rounded-circle">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="chat-user">You</span> <span class="chat-time">8:35 am</span>
<div class="call-details">
<i class="material-icons">phone_missed</i>
<div class="call-info">
<div class="call-user-details">
<span class="call-description">Jeffrey Warden missed the call</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chat chat-left">
<div class="chat-avatar">
<a href="profile.html" class="avatar">
<img alt="John Doe" src="assets/img/user.jpg" class="img-fluid rounded-circle">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="chat-user">John Doe</span> <span class="chat-time">8:35 am</span>
<div class="call-details">
<i class="material-icons">call_end</i>
<div class="call-info">
<div class="call-user-details"><span class="call-description">This call has ended</span></div>
<div class="call-timing">Duration: <strong>5 min 57 sec</strong></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chat-line">
<span class="chat-date">January 29th, 2015</span>
</div>
<div class="chat chat-left">
<div class="chat-avatar">
<a href="profile.html" class="avatar">
<img alt="John Doe" src="assets/img/user.jpg" class="img-fluid rounded-circle">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="chat-user">Richard Miles</span> <span class="chat-time">8:35 am</span>
<div class="call-details">
<i class="material-icons">phone_missed</i>
<div class="call-info">
<div class="call-user-details">
<span class="call-description">You missed the call</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chat chat-left">
<div class="chat-avatar">
<a href="profile.html" class="avatar">
<img alt="John Doe" src="assets/img/user.jpg" class="img-fluid rounded-circle">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="chat-user">You</span> <span class="chat-time">8:35 am</span>
<div class="call-details">
<i class="material-icons">ring_volume</i>
<div class="call-info">
<div class="call-user-details">
<a href="#" class="call-description call-description--linked" data-qa="call_attachment_link">Calling John Smith ...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-full tab-pane" id="chats_tab">
<div class="chat-window">
<div class="chat-contents">
<div class="chat-content-wrap">
<div class="chat-wrap-inner">
<div class="chat-box">
<div class="chats">
<div class="chat chat-left">
<div class="chat-avatar">
<a href="profile.html" class="avatar">
<img alt="John Doe" src="assets/img/user.jpg" class="img-fluid rounded-circle">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="chat-user">John Doe</span> <span class="chat-time">8:35 am</span>
<p>I'm just looking around.</p>
<p>Will you tell me something about yourself? </p>
</div>
</div>
</div>
</div>
<div class="chat chat-left">
<div class="chat-avatar">
<a href="profile.html" class="avatar">
<img alt="John Doe" src="assets/img/user.jpg" class="img-fluid rounded-circle">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="chat-user">John Doe</span> <span class="file-attached">attached 3 files <i class="fa fa-paperclip"></i></span> <span class="chat-time">Dec 17, 2014 at 4:32am</span>
<ul class="attach-list">
<li><i class="fa fa-file"></i> <a href="#">project_document.avi</a></li>
<li><i class="fa fa-file"></i> <a href="#">video_conferencing.psd</a></li>
<li><i class="fa fa-file"></i> <a href="#">landing_page.psd</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="chat-line">
<span class="chat-date">January 29th, 2017</span>
</div>
<div class="chat chat-left">
<div class="chat-avatar">
<a href="profile.html" class="avatar">
<img alt="Jeffery Lalor" src="assets/img/user.jpg" class="img-fluid rounded-circle">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="chat-user">Jeffery Lalor</span> <span class="file-attached">attached file <i class="fa fa-paperclip"></i></span> <span class="chat-time">Yesterday at 9:16pm</span>
<ul class="attach-list">
<li class="pdf-file"><i class="fa fa-file-pdf-o"></i> <a href="#">Document_2016.pdf</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="chat chat-left">
<div class="chat-avatar">
<a href="profile.html" class="avatar">
<img alt="Jeffery Lalor" src="assets/img/user.jpg" class="img-fluid rounded-circle">
</a>
</div>
<div class="chat-body">
<div class="chat-bubble">
<div class="chat-content">
<span class="chat-user">Jeffery Lalor</span> <span class="file-attached">attached file <i class="fa fa-paperclip"></i></span> <span class="chat-time">Today at 12:42pm</span>
<ul class="attach-list">
<li class="img-file">
<div class="attach-img-download"><a href="#">avatar-1.jpg</a></div>
<div class="attach-img"><img src="assets/img/user.jpg" alt=""></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chat-footer">
<div class="message-bar">
<div class="message-inner">
<a class="link attach-icon" href="#" data-toggle="modal" data-target="#drag_files"><img src="assets/img/attachment.png" alt=""></a>
<div class="message-area">
<div class="input-group">
<textarea class="form-control" placeholder="Type message..."></textarea>
<span class="input-group-append">
<button class="btn btn-primary" type="button"><i class="fa fa-send"></i></button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-full tab-pane" id="profile_tab">
<div class="display-table">
<div class="table-row">
<div class="table-body">
<div class="table-content">
<div class="chat-profile-img">
<div class="edit-profile-img">
<img src="assets/img/user.jpg" alt="">
<span class="change-img">Change Image</span>
</div>
<h3 class="user-name m-t-10 mb-0">John Doe</h3>
<small class="text-muted">MBBS, MD</small>
<a href="edit-profile.html" class="btn btn-primary edit-btn"><i class="fa fa-pencil"></i></a>
</div>
<div class="chat-profile-info">
<ul class="user-det-list">
<li>
<span>Username:</span>
<span class="float-right text-muted">johndoe</span>
</li>
<li>
<span>DOB:</span>
<span class="float-right text-muted">24 July</span>
</li>
<li>
<span>Email:</span>
<span class="float-right text-muted"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e78d888f89838882a7829f868a978b82c984888a">[email&#160;protected]</a></span>
</li>
<li>
<span>Phone:</span>
<span class="float-right text-muted">9876543210</span>
</li>
</ul>
</div>
<div>
<ul class="nav nav-tabs nav-tabs-solid nav-justified mb-0">
<li class="nav-item"><a class="nav-link active" href="#all_files" data-toggle="tab">All Files</a></li>
<li class="nav-item"><a class="nav-link" href="#my_files" data-toggle="tab">My Files</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="all_files">
<ul class="files-list">
<li>
<div class="files-cont">
<div class="file-type">
<span class="files-icon"><i class="fa fa-file-pdf-o"></i></span>
</div>
<div class="files-info">
<span class="file-name text-ellipsis">AHA Selfcare Mobile Application Test-Cases.xls</span>
<span class="file-author"><a href="#">Loren Gatlin</a></span> <span class="file-date">May 31st at 6:53 PM</span>
</div>
<ul class="files-action">
<li class="dropdown dropdown-action">
<a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-h"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Download</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#share_files">Share</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="tab-pane" id="my_files">
<ul class="files-list">
<li>
<div class="files-cont">
<div class="file-type">
<span class="files-icon"><i class="fa fa-file-pdf-o"></i></span>
</div>
<div class="files-info">
<span class="file-name text-ellipsis">AHA Selfcare Mobile Application Test-Cases.xls</span>
<span class="file-author"><a href="#">John Doe</a></span> <span class="file-date">May 31st at 6:53 PM</span>
</div>
<ul class="files-action">
<li class="dropdown dropdown-action">
<a href="" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-h"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Download</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#share_files">Share</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="drag_files" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Drag and drop files upload</h3>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<form id="js-upload-form">
<div class="upload-drop-zone" id="drop-zone">
<i class="fa fa-cloud-upload fa-2x"></i> <span class="upload-text">Just drag and drop files here</span>
</div>
<h4>Uploading</h4>
<ul class="upload-list">
<li class="file-list">
<div class="upload-wrap">
<div class="file-name">
<i class="fa fa-photo"></i> photo.png
</div>
<div class="file-size">1.07 gb</div>
<button type="button" class="file-close">
<i class="fa fa-close"></i>
</button>
</div>
<div class="progress progress-xs progress-striped">
<div class="progress-bar bg-success" role="progressbar" style="width: 65%"></div>
</div>
<div class="upload-process">37% done</div>
</li>
<li class="file-list">
<div class="upload-wrap">
<div class="file-name">
<i class="fa fa-file"></i> task.doc
</div>
<div class="file-size">5.8 kb</div>
<button type="button" class="file-close">
<i class="fa fa-close"></i>
</button>
</div>
<div class="progress progress-xs progress-striped">
<div class="progress-bar bg-success" role="progressbar" style="width: 65%"></div>
</div>
<div class="upload-process">37% done</div>
</li>
<li class="file-list">
<div class="upload-wrap">
<div class="file-name">
<i class="fa fa-photo"></i> dashboard.png
</div>
<div class="file-size">2.1 mb</div>
<button type="button" class="file-close">
<i class="fa fa-close"></i>
</button>
</div>
<div class="progress progress-xs progress-striped">
<div class="progress-bar bg-success" role="progressbar" style="width: 65%"></div>
</div>
<div class="upload-process">Completed</div>
</li>
</ul>
</form>
<div class="m-t-30 text-center">
<button class="btn btn-primary submit-btn">Add to upload</button>
</div>
</div>
</div>
</div>
</div>
<div id="add_group" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create a group</h3>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p>Groups are where your team communicates. They’re best when organized around a topic — #leads, for example.</p>
<form>
<div class="form-group">
<label>Group Name <span class="text-danger">*</span></label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>Send invites to: <span class="text-muted-light">(optional)</span></label>
<input class="form-control" type="text">
</div>
<div class="m-t-50 text-center">
<button class="btn btn-primary submit-btn">Create Group</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="add_chat_user" class="modal fade " role="dialog">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Create Chat Group</h3>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<div class="input-group m-b-30">
<input placeholder="Search to start a chat" class="form-control search-input" id="btn-input" type="text">
<span class="input-group-append">
<button class="btn btn-primary">Search</button>
</span>
</div>
<div>
<h5>Recent Conversations</h5>
<ul class="chat-user-list">
<li>
<a href="#">
<div class="media">
<span class="avatar align-self-center">J</span>
<div class="media-body align-self-center text-nowrap">
<div class="user-name">Jeffery Lalor</div>
<span class="designation">Team Leader</span>
</div>
<div class="text-nowrap align-self-center">
<div class="online-date">1 day ago</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="media ">
<span class="avatar align-self-center">B</span>
<div class="media-body align-self-center text-nowrap">
<div class="user-name">Bernardo Galaviz</div>
<span class="designation">MBBS, MD</span>
</div>
<div class="align-self-center text-nowrap">
<div class="online-date">3 days ago</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="media">
<span class="avatar align-self-center">
<img src="assets/img/user.jpg" alt="John Doe">
</span>
<div class="media-body text-nowrap align-self-center">
<div class="user-name">John Doe</div>
<span class="designation">MBBS, MD</span>
</div>
<div class="align-self-center text-nowrap">
<div class="online-date">7 months ago</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="m-t-50 text-center">
<button class="btn btn-primary submit-btn">Create Group</button>
</div>
</div>
</div>
</div>
</div>
<div id="share_files" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Share File</h3>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<div class="files-share-list">
<div class="files-cont">
<div class="file-type">
<span class="files-icon"><i class="fa fa-file-pdf-o"></i></span>
</div>
<div class="files-info">
<span class="file-name text-ellipsis">AHA Selfcare Mobile Application Test-Cases.xls</span>
<span class="file-author"><a href="#">Bernardo Galaviz</a></span> <span class="file-date">May 31st at 6:53 PM</span>
</div>
</div>
</div>
<div class="form-group">
<label>Share With</label>
<input class="form-control" type="text">
</div>
<div class="m-t-50 text-center">
<button class="btn btn-primary submit-btn">Share</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar-overlay" data-reff=""></div>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/app.js"></script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化