TiBillet-Ticket-Nonfree/DjangoFiles/BaseBillet/templates/blk-pro/examples/chat-page.html

627 lines
30 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--
=========================================================
* Blk• Design System Pro - v1.0.0
=========================================================
* Product Page: https://www.creative-tim.com/product/blk-design-system-pro
* Copyright 2019 Creative Tim (http://www.creative-tim.com)
* Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="76x76" href="../../../static/blk-pro/assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../../../static/blk-pro/assets/img/favicon.png">
<title>
Blk• Design System Pro by Creative Tim
</title>
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<!-- Nucleo Icons -->
<link href="../../../static/blk-pro/assets/css/nucleo-icons.css" rel="stylesheet" />
<!-- CSS Files -->
<link href="../../../static/blk-pro/assets/css/blk-design-system-pro.css?v=1.0.0" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../../../static/blk-pro/assets/demo/demo.css" rel="stylesheet" />
</head>
<body class="chat-page">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-transparent " color-on-scroll="300">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="https://demos.creative-tim.com/blk-design-system-pro/index.html" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank">
<span>BLK•</span> Design System PRO
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navigation">
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a>
BLK•
<span> PRO </span>
</a>
</div>
<div class="col-6 collapse-close text-right">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
</div>
</div>
<ul class="navbar-nav ml-auto">
<li class="dropdown nav-item">
<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<i class="fa fa-cogs d-lg-none d-xl-none"></i> Getting started
</a>
<div class="dropdown-menu dropdown-with-icons">
<a href="../index.html" class="dropdown-item">
<i class="tim-icons icon-paper"></i> Components
</a>
<a href="../presentation.html" class="dropdown-item">
<i class="tim-icons icon-bullet-list-67"></i>Presentation Page
</a>
<a href="https://demos.creative-tim.com/blk-design-system-pro/docs/1.0/getting-started/overview.html" class="dropdown-item">
<i class="tim-icons icon-book-bookmark"></i>Documentation
</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
<i class="tim-icons icon-paper" aria-hidden="true"></i>
<p>Sections</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="../sections.html#headers">
<i class="tim-icons icon-app"></i> Headers
</a>
<a class="dropdown-item" href="../sections.html#features">
<i class="tim-icons icon-settings"></i> Features
</a>
<a class="dropdown-item" href="../sections.html#blogs">
<i class="tim-icons icon-align-left-2"></i> Blogs
</a>
<a class="dropdown-item" href="../sections.html#teams">
<i class="tim-icons icon-user-run"></i> Teams
</a>
<a class="dropdown-item" href="../sections.html#projects">
<i class="tim-icons icon-paper"></i> Projects
</a>
<a class="dropdown-item" href="../sections.html#pricing">
<i class="tim-icons icon-money-coins"></i> Pricing
</a>
<a class="dropdown-item" href="../sections.html#testimonials">
<i class="tim-icons icon-chat-33"></i> Testimonials
</a>
<a class="dropdown-item" href="../sections.html#contactus">
<i class="tim-icons icon-mobile"></i> Contact Us
</a>
<a class="dropdown-item" href="../sections.html#tables">
<i class="tim-icons icon-chart-bar-32"></i> Tables
</a>
<a class="dropdown-item" href="../sections.html#accordion">
<i class="tim-icons icon-paper"></i> Accordion
</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
<i class="tim-icons icon-book-bookmark" aria-hidden="true"></i>
<p>Examples</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="../examples/about-us.html">
<i class="tim-icons icon-bulb-63"></i> About-us
</a>
<a class="dropdown-item" href="../examples/blog-post.html">
<i class="tim-icons icon-align-center"></i> Blog Post
</a>
<a class="dropdown-item" href="../examples/blog-posts.html">
<i class="tim-icons icon-chart-bar-32"></i> Blog Posts
</a>
<a class="dropdown-item" href="../examples/contact-us.html">
<i class="tim-icons icon-square-pin"></i> Contact Us
</a>
<a class="dropdown-item" href="../examples/landing-page.html">
<i class="tim-icons icon-paper"></i> Landing Page
</a>
<a class="dropdown-item" href="../examples/pricing.html">
<i class="tim-icons icon-coins"></i> Pricing
</a>
<a class="dropdown-item" href="../examples/ecommerce.html">
<i class="tim-icons icon-basket-simple"></i> Ecommerce Page
</a>
<a class="dropdown-item" href="../examples/product-page.html">
<i class="tim-icons icon-bag-16"></i> Product Page
</a>
<a class="dropdown-item" href="../examples/profile-page.html">
<i class="tim-icons icon-lock-circle"></i> Profile Page
</a>
<a class="dropdown-item" href="../examples/error.html">
<i class="tim-icons icon-button-power"></i> 404 Error Page
</a>
<a class="dropdown-item" href="../examples/500-error.html">
<i class="tim-icons icon-alert-circle-exc"></i> 500 Error Page
</a>
<a href="#" class="dropdown-item dropdown-toggle" id="navbarDropdown2" data-toggle="dropdown">
<i class="tim-icons icon-book-bookmark" aria-hidden="true"></i> App Pages
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="../examples/account-settings.html">
<i class="tim-icons icon-lock-circle"></i> Account Settings
</a>
<a class="dropdown-item" href="../examples/login-page.html">
<i class="tim-icons icon-tablet-2"></i> Login Page
</a>
<a class="dropdown-item" href="../examples/register-page.html">
<i class="tim-icons icon-laptop"></i> Register Page
</a>
<a class="dropdown-item" href="../examples/reset-page.html">
<i class="tim-icons icon-molecule-40"></i> Reset Page
</a>
<a class="dropdown-item" href="../examples/invoice-page.html">
<i class="tim-icons icon-notes"></i> Invoice Page
</a>
<a class="dropdown-item" href="../examples/checkout-page.html">
<i class="tim-icons icon-basket-simple"></i> Checkout Page
</a>
<a class="dropdown-item" href="../examples/chat-page.html">
<i class="tim-icons icon-email-85"></i> Chat Page
</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link btn btn-sm btn-default" href="https://www.creative-tim.com/product/blk-design-system-pro" target="_blank">
<p>Buy Now</p>
</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" rel="tooltip" title="Follow us on Twitter" data-placement="bottom" href="https://twitter.com/CreativeTim" target="_blank">
<i class="fab fa-twitter"></i>
<p class="hidden-lg-up">Twitter</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="Like us on Facebook" data-placement="bottom" href="https://www.facebook.com/CreativeTim" target="_blank">
<i class="fab fa-facebook-square"></i>
<p class="hidden-lg-up">Facebook</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="tooltip" title="Follow us on Instagram" data-placement="bottom" href="https://www.instagram.com/CreativeTimOfficial" target="_blank">
<i class="fab fa-instagram"></i>
<p class="hidden-lg-up">Instagram</p>
</a>
</li> -->
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="wrapper">
<div class="section mt-5">
<div class="container">
<!-- <img src="../assets/img/shape-s.png" class="path path3"> -->
<h2 class="title">Chat</h2>
<div class="row flex-row">
<div class="col-lg-4">
<div class="card card-plain">
<form class="card-header mb-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search contact">
<div class="input-group-append">
<span class="input-group-text"><i class="tim-icons icon-zoom-split"></i></span>
</div>
</div>
</form>
<div class="list-group list-group-chat list-group-flush">
<a href="javascript:;" class="list-group-item active">
<div class="media">
<img alt="Image" src="../../../static/blk-pro/assets/img/p10.jpg" class="avatar">
<div class="media-body ml-2">
<div class="justify-content-between align-items-center">
<h6 class="mb-0">Charlie Watson
<span class="badge badge-success"></span>
</h6>
<div>
<small>Typing...</small>
</div>
</div>
<!-- <span class="text-small p-0">Let's keep those protoypes 100</span> -->
</div>
</div>
</a>
<a href="javascript:;" class="list-group-item">
<div class="media">
<img alt="Image" src="../../../static/blk-pro/assets/img/johana.jpg" class="avatar">
<div class="media-body ml-2">
<div class="justify-content-between align-items-center">
<h6 class="mb-0">Jane Doe</h6>
<div>
<small class="text-muted">1 hour ago</small>
</div>
</div>
<span class="text-muted text-small col-11 p-0 text-truncate d-block">Computer users and programmers</span>
</div>
</div>
</a>
<a href="javascript:;" class="list-group-item">
<div class="media">
<img alt="Image" src="../../../static/blk-pro/assets/img/ryan.png" class="avatar">
<div class="media-body ml-2">
<div class="justify-content-between align-items-center">
<h6 class="mb-0">Mila Skylar</h6>
<div>
<small class="text-muted">24 min ago</small>
</div>
</div>
<span class="text-muted text-small col-11 p-0 text-truncate d-block">You can subscribe to receive weekly...</span>
</div>
</div>
</a>
<a href="javascript:;" class="list-group-item">
<div class="media">
<img alt="Image" src="../../../static/blk-pro/assets/img/kareya-saleh.jpg" class="avatar">
<div class="media-body ml-2">
<div class="justify-content-between align-items-center">
<h6 class="mb-0">Sofia Scarlett</h6>
<div>
<small class="text-muted">7 hours ago</small>
</div>
</div>
<span class="text-muted text-small col-11 p-0 text-truncate d-block">Its an effective resource regardless..</span>
</div>
</div>
</a>
<a href="javascript:;" class="list-group-item">
<div class="media">
<img alt="Image" src="../../../static/blk-pro/assets/img/christian.jpg" class="avatar">
<div class="media-body ml-2">
<div class="justify-content-between align-items-center">
<h6 class="mb-0">Tom Klein</h6>
<div>
<small class="text-muted">1 day ago</small>
</div>
</div>
<span class="text-muted text-small col-11 p-0 text-truncate d-block">Be sure to check it out if your dev pro...</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="card card-plain">
<div class="card-header d-inline-block">
<div class="row">
<div class="col-md-10">
<div class="media align-items-center">
<img alt="Image" src="../../../static/blk-pro/assets/img/p10.jpg" class="avatar">
<div class="media-body">
<h6 class="mb-0 d-block">Charlie Watson</h6>
<span class="text-muted text-small">last seen today at 1:53am</span>
</div>
</div>
</div>
<div class="col-md-1">
<button class="btn btn-link btn-info" type="button" data-toggle="tooltip" data-placement="top" title="Video call">
<i class="tim-icons icon-video-66"></i>
</button>
</div>
<div class="col-md-1">
<div class="dropdown">
<button class="btn btn-link btn-primary" type="button" data-toggle="dropdown">
<i class="tim-icons icon-settings"></i>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:;">
<i class="tim-icons icon-single-02"></i> Profile
</a>
<a class="dropdown-item" href="javascript:;">
<i class="tim-icons icon-volume-98"></i> Mute conversation
</a>
<a class="dropdown-item" href="javascript:;">
<i class="tim-icons icon-lock-circle"></i> Block
</a>
<a class="dropdown-item" href="javascript:;">
<i class="tim-icons icon-chat-33"></i> Clear chat
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:;">
<i class="tim-icons icon-simple-remove"></i> Delete chat
</a>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row justify-content-start">
<div class="col-auto">
<div class="card ">
<div class="card-body p-2">
<p class="mb-1">
It contains a lot of good lessons about effective practices
</p>
<div>
<small class="opacity-60"><i class="far fa-clock"></i> 3:14am</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-end text-right">
<div class="col-auto">
<div class="card bg-primary text-white">
<div class="card-body p-2">
<p class="mb-1">
Can it generate daily design links that include essays and data visualizations ?
<br/>
</p>
<div>
<small class="opacity-60">3:30am</small>
<i class="tim-icons icon-check-2"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12 text-center">
<span class="badge text-white">Wed, 3:27pm</span>
</div>
</div>
<div class="row justify-content-start">
<div class="col-auto">
<div class="card ">
<div class="card-body p-2">
<p class="mb-1">
Yeah! Responsive Design is geared towards those trying to build web apps
</p>
<div>
<small class="opacity-60"><i class="far fa-clock"></i> 4:31pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-end text-right">
<div class="col-auto">
<div class="card bg-primary text-white">
<div class="card-body p-2">
<p class="mb-1">
Excellent, I want it now !
</p>
<div>
<small class="opacity-60">4:40pm</small>
<i class="tim-icons icon-check-2"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-start">
<div class="col-auto">
<div class="card ">
<div class="card-body p-2">
<p class="mb-1">
You can easily get it; The content here is all free
</p>
<div>
<small class="opacity-60"><i class="far fa-clock"></i> 4:42pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-end text-right">
<div class="col-auto">
<div class="card bg-primary text-white">
<div class="card-body p-2">
<p class="mb-1">
Awesome, blog is important source material for anyone who creates apps? </br>
beacuse these blogs offer a lot of information about website development.
</p>
<div>
<small class="opacity-60">4:46pm</small>
<i class="tim-icons icon-check-2"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-start">
<div class="col-5">
<div class="card ">
<div class="card-body p-2">
<div class="col-12 p-0">
<img src="../../../static/blk-pro/assets/img/luke.jpg" alt="Rounded image" class="img-fluid rounded mb-1">
</div>
<div>
<small class="opacity-60"><i class="far fa-clock"></i> 4:47pm</small>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-end text-right">
<div class="col-auto">
<div class="card bg-primary text-white">
<div class="card-body p-2">
<p class="mb-0">
At the end of the day … the native dev apps is where users are
</p>
<div>
<small class="opacity-60">4:47pm</small>
<i class="tim-icons icon-check-2"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-start">
<div class="col-auto">
<div class="card ">
<div class="card-body p-2">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<p class="d-inline-block mr-2">
Typing...
</p>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer d-block">
<form class="align-items-center">
<div class="input-group d-flex">
<div class="input-group-prepend d-flex">
<span class="input-group-text"><i class="tim-icons icon-pencil"></i></span>
</div>
<input type="text" class="form-control form-control-lg" placeholder="Your message">
<button class="btn btn-simple btn-primary ml-2">
<i class="tim-icons icon-send"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="title">BLK•</h1>
</div>
<div class="col-md-3 col-6">
<ul class="nav">
<li class="nav-item">
<a href="../index.html" class="nav-link">
Home
</a>
</li>
<li class="nav-item">
<a href="../examples/landing-page.html" class="nav-link">
Landing
</a>
</li>
<li class="nav-item">
<a href="../examples/register-page.html" class="nav-link">
Register
</a>
</li>
<li class="nav-item">
<a href="../examples/profile-page.html" class="nav-link">
Profile
</a>
</li>
</ul>
</div>
<div class="col-md-3 col-6">
<ul class="nav">
<li class="nav-item">
<a href="https://creative-tim.com/contact-us?ref=blkdsp-footer" class="nav-link">
Contact Us
</a>
</li>
<li class="nav-item">
<a href="https://creative-tim.com/about-us?ref=blkdsp-footer" class="nav-link">
About Us
</a>
</li>
<li class="nav-item">
<a href="http://creative-tim.com/blog?ref=blkdsp-footer" class="nav-link">
Blog
</a>
</li>
<li class="nav-item">
<a href="https://opensource.org/licenses/MIT?ref=blkdsp-footer" class="nav-link">
License
</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h3 class="title">Follow us:</h3>
<div class="btn-wrapper profile text-left">
<a target="_blank" href="https://twitter.com/creativetim" class="btn btn-icon btn-neutral btn-round btn-simple" data-toggle="tooltip" data-original-title="Follow us">
<i class="fab fa-twitter"></i>
</a>
<a target="_blank" href="https://www.facebook.com/creativetim" class="btn btn-icon btn-neutral btn-round btn-simple" data-toggle="tooltip" data-original-title="Like us">
<i class="fab fa-facebook-square"></i>
</a>
<a target="_blank" href="https://dribbble.com/creativetim" class="btn btn-icon btn-neutral btn-round btn-simple" data-toggle="tooltip" data-original-title="Follow us">
<i class="fab fa-dribbble"></i>
</a>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- Core JS Files -->
<script src="../../../static/blk-pro/assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="../../../static/blk-pro/assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="../../../static/blk-pro/assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script src="../../../static/blk-pro/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="../../../static/blk-pro/assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="../../../static/blk-pro/assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the Carousel, full documentation here: http://kenwheeler.github.io/slick/ -->
<script src="../../../static/blk-pro/assets/js/plugins/slick.js" type="text/javascript"></script>
<!-- Plugin for the blob animation -->
<script src="../../../static/blk-pro/assets/js/plugins/anime.min.js" type="text/javascript"></script>
<!-- Chart JS -->
<script src="../../../static/blk-pro/assets/js/plugins/chartjs.min.js"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="../../../static/blk-pro/assets/js/plugins/moment.min.js"></script>
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
<script src="../../../static/blk-pro/assets/js/plugins/bootstrap-tagsinput.js"></script>
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
<script src="../../../static/blk-pro/assets/js/plugins/bootstrap-selectpicker.js" type="text/javascript"></script>
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
<script src="../../../static/blk-pro/assets/js/plugins/bootstrap-datetimepicker.js" type="text/javascript"></script>
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
<script src="../../../static/blk-pro/assets/js/plugins/jasny-bootstrap.min.js"></script>
<!-- Black Dashboard DEMO methods, don't include it in your project! -->
<script src="../../../static/blk-pro/assets/demo/demo.js"></script>
<!-- Control Center for Black UI Kit: parallax effects, scripts for the example pages etc -->
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<script src="../../../static/blk-pro/assets/js/blk-design-system-pro.min.js?v=1.0.0" type="text/javascript"></script>
<script src="https://cdn.trackjs.com/agent/v3/latest/t.js"></script>
<script>
window.TrackJS &&
TrackJS.install({
token: "ee6fab19c5a04ac1a32a645abde4613a",
application: "black-dashboard-pro"
});
</script>
</body>
</html>