318 lines
16 KiB
PHP
318 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Inbox</title>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
|
|
<!-- Bootstrap Styles -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
<!-- Main Styles -->
|
|
<link rel="stylesheet" href="{{ asset('assets/style.css') }}">
|
|
<link rel="icon" href="{{asset('images/favicon.ico')}}" type="image/png">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
|
|
</head>
|
|
</head>
|
|
|
|
<body class="color-dark-green">
|
|
|
|
<div class="container-fluid">
|
|
<div class="main-wrapper row">
|
|
|
|
<!-- Sidebar -->
|
|
<x-sidebar />
|
|
<!-- End -->
|
|
|
|
<!-- Header And Main Content Wrapper -->
|
|
<div class="content-area position-relative bg-light-color">
|
|
|
|
<!-- Header -->
|
|
<x-header />
|
|
<!-- End -->
|
|
|
|
<!-- Main Content Area -->
|
|
@yield('content')
|
|
<!-- End -->
|
|
|
|
<!-- Support and Chat Fixed Buttons -->
|
|
<div class="chat-message-box position-fixed">
|
|
|
|
|
|
<!-- Chat Drop Down -->
|
|
<div class="ui floating bg-dark-green-color chat-widget-wrapper icon dropdown button">
|
|
<img src="{{ asset('images/icons/Vector 386.png') }}" alt="Chat Icon">
|
|
|
|
<div class="menu chat-menu">
|
|
<div id="chat-feature-widget" class="ui transition chat-feature-widget">
|
|
<div class="header d-flex justify-content-between align-items-center text-white">
|
|
<p class="chat-popup-label text-light">Chats</p>
|
|
<img class="remove-chat" src="{{ asset('images/icons/Vector (3).svg') }}" alt="Cross Chat Icon">
|
|
</div>
|
|
<div class="item open-inbox">
|
|
<div class="single-user-content d-flex">
|
|
<div class="chat-user-img-box">
|
|
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
</div>
|
|
<div class="user-message-detail">
|
|
<p class="recepient-message-detail">James <span>Sep 27</span></p>
|
|
<p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
|
|
adipiscing
|
|
elit. In lorem est... </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item open-inbox">
|
|
<div class="single-user-content d-flex">
|
|
<div class="chat-user-img-box">
|
|
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
</div>
|
|
<div class="user-message-detail">
|
|
<p class="recepient-message-detail">James <span>Sep 27</span></p>
|
|
<p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
|
|
adipiscing
|
|
elit. In lorem est... </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item open-inbox">
|
|
<div class="single-user-content d-flex">
|
|
<div class="chat-user-img-box">
|
|
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
</div>
|
|
<div class="user-message-detail">
|
|
<p class="recepient-message-detail">James <span>Sep 27</span></p>
|
|
<p class="text-wrap descriptive-message">Lorem ipsum dolor sit amet,
|
|
adipiscing
|
|
elit. In lorem est... </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- User Inbox menu -->
|
|
<div id="inbox" class="ui transition hidden chat-feature-widget inbox-wrapper">
|
|
<div class="header d-flex align-items-center">
|
|
<img id="back-to-users" src="{{ asset('images/icons/Vector 387.png') }}" alt="Back To Chat">
|
|
<p class="chat-popup-label text-light">James</p>
|
|
</div>
|
|
<div class="scrollhint">
|
|
<div class="item">
|
|
<div class="single-user-content d-flex">
|
|
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
<img src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
<p>👋 Hi there! How can I help?</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item d-flex justify-content-end">
|
|
<div class="sender-message-box text-white">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="single-user-content d-flex">
|
|
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
<img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lorem
|
|
est,
|
|
tincidunt at placerat ultricies, vehicula in erat. Donec vitae ante
|
|
mollis, pretium augue vel, feugiat risus.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="item d-flex justify-content-end">
|
|
<div class="sender-message-box text-white">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="single-user-content d-flex">
|
|
<div class="chat-user-img-box receiver-message-box d-flex">
|
|
<img class="align-self-end" src="{{ asset('images/Avatar.png') }}" alt="Dummy User">
|
|
<p>Typing...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="outer-message-input-box">
|
|
<div class="inner-message-input d-flex align-items-center justify-content-between">
|
|
<input type="text" class="border-0" placeholder="Type a reply">
|
|
<p class="input-action d-flex align-items-center">
|
|
<img src="{{ asset('images/icons/gif.png') }}" alt="Gif">
|
|
<img src="{{ asset('images/icons/emoji.png') }}" alt="Emoji">
|
|
<img src="{{ asset('images/icons/attachment.png') }}" alt="Attachment">
|
|
<input type="file" id="file-picker" class="file-picker">
|
|
<i class="fa fa-paper-plane-o send-icon" aria-hidden="true"></i>
|
|
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End -->
|
|
|
|
|
|
|
|
<!-- Support Drop down -->
|
|
<div class="ui floating bg-dark-green-color support-widget-wrapper icon dropdown button ">
|
|
<img src="images/icons/support.svg" alt="Support Icon">
|
|
<div class="menu support-widget">
|
|
<div class="header support-header mt-0 text-center">
|
|
<h2 class="color-dark-green">Help & Support</h2>
|
|
</div>
|
|
<div class="support-facilities-box d-flex justify-content-between flex-wrap">
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/faq-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green">FAQ</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/laptop-minimalistic-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green">Using Kundo</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/launch-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green text-wrap">Launching Kundo</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/setting-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green text-wrap">Technical Settings</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/data-mapping-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green ">Integration</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/open-door-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green text-wrap">Privacy & Policy</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/news-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green text-wrap">News & Updates</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/graduate-cap-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green ">Training</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="header contact-us-header text-center">
|
|
<h2 class="color-dark-green">Contact Us</h2>
|
|
</div>
|
|
|
|
<div class="contact-us-box d-flex justify-content-center">
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/email-14-svgrepo-com (1) 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green text-wrap">Technical Questions</p>
|
|
</div>
|
|
<div class="item text-center">
|
|
<div class="support-img-box align-content-center">
|
|
<img src="images/icons/about-filled-svgrepo-com 1.svg" alt="">
|
|
</div>
|
|
<p class="color-dark-green">About Kundo</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!-- End -->
|
|
|
|
</div>
|
|
<!-- End -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Jquery -->
|
|
<!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"
|
|
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> -->
|
|
|
|
<!-- Bootstrap scripts -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
|
crossorigin="anonymous"></script> -->
|
|
|
|
<!-- Fomantic Ui Scripts -->
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"></script> -->
|
|
|
|
<!-- Main Custom Js -->
|
|
<script src="{{ asset('assets/script.js') }}"></script>
|
|
|
|
<script>document.querySelector('.input-action img[alt="Attachment"]').addEventListener('click', function() {
|
|
document.getElementById('file-picker').click();
|
|
});
|
|
</script>
|
|
|
|
|
|
<style>
|
|
.outer-message-input-box {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.inner-message-input {
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
border-radius: 5px;
|
|
padding: 10px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.inner-message-input input {
|
|
flex-grow: 1;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.input-action img {
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.input-action .file-picker {
|
|
display: none;
|
|
}
|
|
|
|
.fa-paper-plane-o {
|
|
font-size: 17px !important;
|
|
background: #748C62 !important;
|
|
padding: 3px 7px !important;
|
|
color: white !important;
|
|
border-radius: 3px !important;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
</style>
|
|
</body>
|
|
|
|
</html> |