232 lines
11 KiB
HTML
232 lines
11 KiB
HTML
{% extends "layouts/base.html" %}
|
|
|
|
{% block title %} Charts {% endblock title %}
|
|
|
|
<!-- Specific CSS goes HERE -->
|
|
{% block stylesheets %}{% endblock stylesheets %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- ### $App Screen Content ### -->
|
|
<main class='main-content bgc-grey-100'>
|
|
<div id='mainContent'>
|
|
<div class="full-container">
|
|
<div class="peers fxw-nw pos-r">
|
|
<!-- Sidebar -->
|
|
<div class="peer bdR" id="chat-sidebar">
|
|
<div class="layers h-100">
|
|
<!-- Search -->
|
|
<div class="bdB layer w-100">
|
|
<input type="text" placeholder="Search contacts..." name="chatSearch" class="form-constrol p-15 bdrs-0 w-100 bdw-0">
|
|
</div>
|
|
|
|
<!-- List -->
|
|
<div class="layer w-100 fxg-1 scrollable pos-r">
|
|
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
|
<div class="peer">
|
|
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
|
</div>
|
|
<div class="peer peer-greed pL-20">
|
|
<h6 class="mB-0 lh-1 fw-400">John Doe</h6>
|
|
<small class="lh-1 c-green-500">Online</small>
|
|
</div>
|
|
</div>
|
|
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
|
<div class="peer">
|
|
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
|
</div>
|
|
<div class="peer peer-greed pL-20">
|
|
<h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
|
|
<small class="lh-1 c-amber-500">Away</small>
|
|
</div>
|
|
</div>
|
|
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
|
<div class="peer">
|
|
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
|
</div>
|
|
<div class="peer peer-greed pL-20">
|
|
<h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
|
|
<small class="lh-1 c-grey-500">Offline</small>
|
|
</div>
|
|
</div>
|
|
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
|
<div class="peer">
|
|
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
|
</div>
|
|
<div class="peer peer-greed pL-20">
|
|
<h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
|
|
<small class="lh-1 c-red-500">Busy</small>
|
|
</div>
|
|
</div>
|
|
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
|
<div class="peer">
|
|
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
|
</div>
|
|
<div class="peer peer-greed pL-20">
|
|
<h6 class="mB-0 lh-1 fw-400">John Doe</h6>
|
|
<small class="lh-1 c-green-500">Online</small>
|
|
</div>
|
|
</div>
|
|
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
|
<div class="peer">
|
|
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
|
</div>
|
|
<div class="peer peer-greed pL-20">
|
|
<h6 class="mB-0 lh-1 fw-400">Moo Doe</h6>
|
|
<small class="lh-1 c-amber-500">Away</small>
|
|
</div>
|
|
</div>
|
|
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
|
<div class="peer">
|
|
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
|
</div>
|
|
<div class="peer peer-greed pL-20">
|
|
<h6 class="mB-0 lh-1 fw-400">Adam Jones</h6>
|
|
<small class="lh-1 c-grey-500">Offline</small>
|
|
</div>
|
|
</div>
|
|
<div class="peers fxw-nw ai-c p-20 bdB bgc-white bgcH-grey-50 cur-p">
|
|
<div class="peer">
|
|
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
|
</div>
|
|
<div class="peer peer-greed pL-20">
|
|
<h6 class="mB-0 lh-1 fw-400">Mizo Doe</h6>
|
|
<small class="lh-1 c-red-500">Busy</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Box -->
|
|
<div class="peer peer-greed" id='chat-box'>
|
|
<div class="layers h-100">
|
|
<div class="layer w-100">
|
|
<!-- Header -->
|
|
<div class="peers fxw-nw jc-sb ai-c pY-20 pX-30 bgc-white">
|
|
<div class="peers ai-c">
|
|
<div class="peer d-n@md+">
|
|
<a href="" title="" id='chat-sidebar-toggle' class="td-n c-grey-900 cH-blue-500 mR-30">
|
|
<i class="ti-menu"></i>
|
|
</a>
|
|
</div>
|
|
<div class="peer mR-20">
|
|
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="" class="w-3r h-3r bdrs-50p">
|
|
</div>
|
|
<div class="peer">
|
|
<h6 class="lh-1 mB-0">John Doe</h6>
|
|
<i class="fsz-sm lh-1">Typing...</i>
|
|
</div>
|
|
</div>
|
|
<div class="peers">
|
|
<a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
|
|
<i class="ti-video-camera"></i>
|
|
</a>
|
|
<a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md mR-30" title="">
|
|
<i class="ti-headphone"></i>
|
|
</a>
|
|
<a href="" class="peer td-n c-grey-900 cH-blue-500 fsz-md" title="">
|
|
<i class="ti-more"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layer w-100 fxg-1 bgc-grey-200 scrollable pos-r">
|
|
<!-- Chat Box -->
|
|
<div class="p-20 gapY-15">
|
|
<!-- Chat Conversation -->
|
|
<div class="peers fxw-nw">
|
|
<div class="peer mR-20">
|
|
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/11.jpg" alt="">
|
|
</div>
|
|
<div class="peer peer-greed">
|
|
<div class="layers ai-fs gapY-5">
|
|
<div class="layer">
|
|
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
|
<div class="peer mR-10">
|
|
<small>10:00 AM</small>
|
|
</div>
|
|
<div class="peer-greed">
|
|
<span>Lorem Ipsum is simply dummy text of</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layer">
|
|
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
|
<div class="peer mR-10">
|
|
<small>10:00 AM</small>
|
|
</div>
|
|
<div class="peer-greed">
|
|
<span>the printing and typesetting industry.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layer">
|
|
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
|
<div class="peer mR-10">
|
|
<small>10:00 AM</small>
|
|
</div>
|
|
<div class="peer-greed">
|
|
<span>Lorem Ipsum has been the industry's</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Conversation -->
|
|
<div class="peers fxw-nw ai-fe">
|
|
<div class="peer ord-1 mL-20">
|
|
<img class="w-2r bdrs-50p" src="https://randomuser.me/api/portraits/men/12.jpg" alt="">
|
|
</div>
|
|
<div class="peer peer-greed ord-0">
|
|
<div class="layers ai-fe gapY-10">
|
|
<div class="layer">
|
|
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
|
<div class="peer mL-10 ord-1">
|
|
<small>10:00 AM</small>
|
|
</div>
|
|
<div class="peer-greed ord-0">
|
|
<span>Heloo</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layer">
|
|
<div class="peers fxw-nw ai-c pY-3 pX-10 bgc-white bdrs-2 lh-3/2">
|
|
<div class="peer mL-10 ord-1">
|
|
<small>10:00 AM</small>
|
|
</div>
|
|
<div class="peer-greed ord-0">
|
|
<span>??</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layer w-100">
|
|
<!-- Chat Send -->
|
|
<div class="p-20 bdT bgc-white">
|
|
<div class="pos-r">
|
|
<input type="text" class="form-control bdrs-10em m-0" placeholder="Say something...">
|
|
<button type="button" class="btn btn-primary bdrs-50p w-2r p-0 h-2r pos-a r-1 t-1 btn-color">
|
|
<i class="fa fa-paper-plane-o"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% endblock content %}
|
|
|
|
<!-- Specific Page JS goes HERE -->
|
|
{% block javascripts %}{% endblock javascripts %}
|