181 lines
4.8 KiB
HTML
181 lines
4.8 KiB
HTML
{{ template "sync/authenticated.html" . }}
|
|
|
|
{{ define "title" }}Dash{{ end }}
|
|
{{ define "extraheader" }}
|
|
<style>
|
|
.chat-container {
|
|
height: 80vh;
|
|
overflow-y: auto;
|
|
}
|
|
.message {
|
|
max-width: 75%;
|
|
margin-bottom: 10px;
|
|
border-radius: 15px;
|
|
}
|
|
.sender-message {
|
|
background-color: #f0f0f0;
|
|
}
|
|
.receiver-message {
|
|
background-color: #d1e7ff;
|
|
}
|
|
.message-time {
|
|
font-size: 0.7rem;
|
|
color: #6c757d;
|
|
margin-top: 3px;
|
|
}
|
|
.avatar {
|
|
width: 35px;
|
|
height: 35px;
|
|
border-radius: 50%;
|
|
}
|
|
</style>
|
|
{{ end }}
|
|
{{ define "content" }}
|
|
<div class="container py-4">
|
|
<!-- Chat Header -->
|
|
<div class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body d-flex align-items-center">
|
|
<div class="me-3">
|
|
<img
|
|
src="https://via.placeholder.com/40"
|
|
class="avatar"
|
|
alt="User avatar"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h5 class="mb-0">Chat with Sarah Johnson</h5>
|
|
<small class="text-muted">Last active 5 minutes ago</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Messages -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body chat-container">
|
|
<!-- Date Divider -->
|
|
<div class="text-center mb-4">
|
|
<span class="badge bg-light text-dark">Today, 2:30 PM</span>
|
|
</div>
|
|
|
|
<!-- Receiver Message -->
|
|
<div class="d-flex mb-4">
|
|
<img
|
|
src="https://via.placeholder.com/40"
|
|
class="avatar me-2 align-self-end"
|
|
alt="Receiver avatar"
|
|
/>
|
|
<div>
|
|
<div class="message sender-message p-3">
|
|
Hi there! How's the project coming along?
|
|
</div>
|
|
<div class="message-time">2:31 PM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sender Message -->
|
|
<div class="d-flex flex-row-reverse mb-4">
|
|
<img
|
|
src="https://via.placeholder.com/40"
|
|
class="avatar ms-2 align-self-end"
|
|
alt="Sender avatar"
|
|
/>
|
|
<div class="d-flex flex-column align-items-end">
|
|
<div class="message receiver-message p-3">
|
|
Hey! It's going pretty well. I'm working on the UI mockups
|
|
right now.
|
|
</div>
|
|
<div class="message-time">2:33 PM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Receiver Message -->
|
|
<div class="d-flex mb-4">
|
|
<img
|
|
src="https://via.placeholder.com/40"
|
|
class="avatar me-2 align-self-end"
|
|
alt="Receiver avatar"
|
|
/>
|
|
<div>
|
|
<div class="message sender-message p-3">
|
|
That's great to hear! When do you think you'll be able to
|
|
share them with the team?
|
|
</div>
|
|
<div class="message-time">2:35 PM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sender Message -->
|
|
<div class="d-flex flex-row-reverse mb-4">
|
|
<img
|
|
src="https://via.placeholder.com/40"
|
|
class="avatar ms-2 align-self-end"
|
|
alt="Sender avatar"
|
|
/>
|
|
<div class="d-flex flex-column align-items-end">
|
|
<div class="message receiver-message p-3">
|
|
I'm hoping to have something ready by tomorrow afternoon. I'm
|
|
just working out some details with the responsive design.
|
|
</div>
|
|
<div class="message-time">2:36 PM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sender Message -->
|
|
<div class="d-flex flex-row-reverse mb-4">
|
|
<img
|
|
src="https://via.placeholder.com/40"
|
|
class="avatar ms-2 align-self-end"
|
|
alt="Sender avatar"
|
|
/>
|
|
<div class="d-flex flex-column align-items-end">
|
|
<div class="message receiver-message p-3">
|
|
Do you have any specific feedback on the initial concept I
|
|
shared last week?
|
|
</div>
|
|
<div class="message-time">2:37 PM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Receiver Message -->
|
|
<div class="d-flex mb-4">
|
|
<img
|
|
src="https://via.placeholder.com/40"
|
|
class="avatar me-2 align-self-end"
|
|
alt="Receiver avatar"
|
|
/>
|
|
<div>
|
|
<div class="message sender-message p-3">
|
|
Yes! The team loved it. The color scheme was particularly well
|
|
received. We just had some minor suggestions about the
|
|
navigation that I can share during our next call.
|
|
</div>
|
|
<div class="message-time">2:40 PM</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sender Message -->
|
|
<div class="d-flex flex-row-reverse mb-4">
|
|
<img
|
|
src="https://via.placeholder.com/40"
|
|
class="avatar ms-2 align-self-end"
|
|
alt="Sender avatar"
|
|
/>
|
|
<div class="d-flex flex-column align-items-end">
|
|
<div class="message receiver-message p-3">
|
|
That sounds great! Looking forward to the feedback.
|
|
</div>
|
|
<div class="message-time">2:41 PM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|