2022-03-24 19:44:12 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta name = "description" content = "{{config('DESCRIPTION')}}" >
< meta http-equiv = "Content-Security-Policy" content = "script-src 'self' 'unsafe-inline'; connect-src 'self'; object-src 'none';" >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no" >
< meta name = "author" content = "" >
2022-03-31 16:28:53 +00:00
< link id = "favicon" rel = "icon" type = "image/png" href = "/assets/images/{{SITE_NAME}}/icon.webp?v=1012" >
2022-03-19 21:20:23 +00:00
2022-03-22 02:35:12 +00:00
< title > Chat< / title >
2022-03-19 21:20:23 +00:00
2022-03-24 19:44:12 +00:00
< style > : root { --primary : # { { v . themecolor } } } < / style >
2022-04-06 21:49:45 +00:00
< link rel = "stylesheet" href = "/assets/css/main.css?v=216" >
2022-04-05 13:26:53 +00:00
< link rel = "stylesheet" href = "/assets/css/{{v.theme}}.css?v=41" >
2022-03-24 19:44:12 +00:00
{% if v.css %}
< link rel = "stylesheet" href = "/@{{v.username}}/css" >
{% endif %}
< style >
#chat-window {
2022-03-26 11:36:25 +00:00
max-height: calc(100vh - 220px);
2022-03-24 19:44:12 +00:00
overflow-y: scroll;
2022-03-25 01:17:36 +00:00
background-color: transparent !important;
2022-03-24 19:44:12 +00:00
}
2022-03-19 21:20:23 +00:00
2022-03-24 19:44:12 +00:00
#chat-window .chat-profile {
min-width: 42px;
width: 42px;
height: 42px;
}
2022-03-22 00:56:41 +00:00
2022-03-24 19:44:12 +00:00
#chat-window::-webkit-scrollbar {
display: none;
}
#chat-window {
-ms-overflow-style: none;
scrollbar-width: none;
}
.chat-mention {
2022-03-24 20:22:04 +00:00
background-color: #{{v.themecolor}}55;
2022-03-24 20:28:49 +00:00
border-radius: 3px;
2022-03-24 19:44:12 +00:00
}
.chat-message p {
display: inline-block;
}
.diff {
margin-top: 1rem;
}
@media (max-width: 768px) {
#shrink * {
2022-03-26 12:27:01 +00:00
font-size: 10px !important;
2022-03-24 19:44:12 +00:00
}
.fa-reply:before {
font-size: 9px;
}
.diff {
margin-top: 0.5rem;
}
2022-03-26 12:27:01 +00:00
#chat-window {
2022-04-02 15:47:24 +00:00
max-height: calc(100vh - 180px);
2022-03-26 12:27:01 +00:00
}
2022-03-24 19:44:12 +00:00
}
2022-03-24 20:04:52 +00:00
p {
2022-03-25 22:30:15 +00:00
display: inline !important;
2022-03-24 19:44:12 +00:00
}
2022-03-24 20:04:52 +00:00
blockquote {
2022-03-25 22:43:45 +00:00
margin: 5px 0 5px 0;
padding: 0.3rem 1rem;
2022-03-24 20:04:52 +00:00
}
2022-03-25 01:17:36 +00:00
#online {
background-color: var(--gray-700) !important;
}
.chat-line .btn {
background-color: transparent !important;
}
2022-03-25 22:30:15 +00:00
.cdiv {
overflow: hidden;
margin-left: 27px;
}
2022-03-26 10:52:14 +00:00
.quote {
display: inline-block !important;
padding: 0 0.5rem !important;
margin-bottom: 0.25rem !important;
}
2022-03-24 19:44:12 +00:00
< / style >
< / head >
2022-04-01 13:42:05 +00:00
< body { % if v and v . background % } style = "background:url(/assets/images/backgrounds/{{v.background}}) no-repeat center center fixed !important; background-size: cover!important; background-color: #000!important" { % endif % } >
2022-03-31 16:28:53 +00:00
< script src = "/assets/js/bootstrap.js?v=249" > < / script >
2022-03-24 19:44:12 +00:00
{% include "header.html" %}
2022-03-25 22:30:15 +00:00
< div class = "container pb-4" >
2022-03-24 19:44:12 +00:00
< div class = "row justify-content-around" id = "main-content-row" >
< div class = "col h-100 {% block customPadding %}{% if request.path.startswith('/@') %}user-gutters{% else %}custom-gutters{% endif %}{% endblock %}" id = "main-content-col" >
2022-03-27 18:42:02 +00:00
< div class = "border-right py-1 px-3" >
2022-03-27 14:43:25 +00:00
< span data-bs-toggle = "tooltip" data-bs-placement = "bottom" title = "Users online right now" class = "text-muted" >
2022-03-24 19:44:12 +00:00
< i class = "far fa-user fa-sm mr-1" > < / i >
< span class = "board-chat-count" > 0< / span >
< / span >
2022-03-22 02:35:12 +00:00
< / div >
2022-03-19 21:20:23 +00:00
2022-03-24 19:44:12 +00:00
< div id = "chat-line-template" class = "d-none" >
< div class = "chat-line" >
2022-03-22 05:19:56 +00:00
< div class = "d-flex align-items-center" >
< div class = "pl-md-3 text-muted" >
< div >
2022-03-24 19:44:12 +00:00
< img class = "avatar pp20 mr-1" data-toggle = "tooltip" data-placement = "right" >
< a href = "" class = "font-weight-bold text-black userlink" target = "_blank" > < / a >
2022-03-25 22:30:15 +00:00
< div class = "cdiv" >
2022-03-24 19:44:12 +00:00
< span class = "chat-message text-black text-break" > < / span >
< span class = "text d-none" > < / span >
2022-03-26 10:52:14 +00:00
< button class = "quote btn" onclick = "quote(this)" > < i class = "fas fa-reply" aria-hidden = "true" > < / i > < / button >
2022-03-22 05:19:56 +00:00
< / div >
< / div >
< / div >
< / div >
2022-03-24 19:44:12 +00:00
< / div >
< / div >
< div id = "shrink" >
2022-03-25 22:30:15 +00:00
< div id = "chat-window" class = "container pl-0 py-0" >
2022-03-24 19:44:12 +00:00
{% for m in messages %}
{% set text_html = m['text_censored'] if v.slurreplacer else m['text_html'] %}
{% set link = '< a href = "/id/' + v.id|string + '" > ' %}
2022-03-24 22:42:49 +00:00
{% set same = loop.index > 1 and m['username'] == messages[loop.index-2]['username'] %}
2022-03-24 19:44:12 +00:00
< div class = "chat-line {% if link in text_html %}chat-mention{% endif %} {% if not same %}diff{% endif %}" >
< div class = "d-flex align-items-center" >
< div class = "pl-md-3 text-muted" >
< div >
2022-03-24 23:58:07 +00:00
{% if not same %}
< img src = "{{m['avatar']}}" class = "avatar pp20 mr-1" data-toggle = "tooltip" data-placement = "right" >
{% endif %}
2022-03-24 19:44:12 +00:00
< a class = "{% if same %}d-none{% endif %} font-weight-bold text-black userlink" style = "color:#{{m['namecolor']}}" target = "_blank" href = "/@{{m['username']}}" > {{m['username']}}< / a >
2022-03-25 22:30:15 +00:00
< div class = "cdiv" >
2022-03-24 19:44:12 +00:00
< span class = "chat-message text-black text-break" > {{text_html | safe}}< / span >
< span class = "d-none" > {{m['text']}}< / span >
2022-03-26 10:52:14 +00:00
< button class = "quote btn" onclick = "quote(this)" > < i class = "fas fa-reply" aria-hidden = "true" > < / i > < / button >
2022-03-24 19:44:12 +00:00
< / div >
< / div >
< / div >
< / div >
< / div >
{% endfor %}
< / div >
2022-03-26 14:36:37 +00:00
< div id = 'message' class = "d-none position-relative form-group d-flex mt-3" >
2022-04-02 15:48:57 +00:00
< div class = "position-absolute text-muted text-small ml-1" style = "bottom: -1.5rem; line-height: 1;" >
2022-03-24 19:44:12 +00:00
< span id = "typing-indicator" > < / span >
< span id = "loading-indicator" class = "d-none" > < / span >
< / div >
< i class = "btn btn-secondary mr-2 fas fa-smile-beam" style = "padding-top:0.65rem" onclick = "loadEmojis('input-text')" aria-hidden = "true" data-bs-toggle = "modal" data-bs-target = "#emojiModal" data-bs-placement = "bottom" title = "Add Emoji" > < / i >
< textarea id = "input-text" minlength = "1" maxlength = "1000" type = "text" class = "form-control" placeholder = "Message" autocomplete = "off" autofocus rows = "1" > < / textarea >
< button id = "chatsend" onclick = "send()" class = "btn btn-primary ml-3" type = "submit" > Send< / button >
< / div >
2022-03-22 02:35:12 +00:00
< / div >
< / div >
2022-03-24 19:44:12 +00:00
< div id = "online" class = "col sidebar text-left d-none d-lg-block pt-3 bg-white" style = "max-width:300px" >
2022-03-22 02:35:12 +00:00
< / div >
2022-03-24 19:44:12 +00:00
2022-03-22 02:35:12 +00:00
< / div >
2022-03-24 19:44:12 +00:00
2022-03-19 21:20:23 +00:00
< / div >
2022-03-23 16:15:59 +00:00
< input id = "vid" type = "hidden" value = "{{v.id}}" >
< input id = "site_name" type = "hidden" value = "{{SITE_NAME}}" >
2022-03-24 19:44:12 +00:00
< input id = "slurreplacer" type = "hidden" value = "{{v.slurreplacer}}" >
2022-03-22 02:35:12 +00:00
2022-03-31 16:28:53 +00:00
< script data-cfasync = "false" src = "/chat.js?v=12" > < / script >
2022-03-22 14:57:04 +00:00
2022-03-23 19:40:04 +00:00
< script >
2022-03-23 19:47:33 +00:00
box.scrollTo(0, box.scrollHeight)
2022-03-23 19:40:04 +00:00
< / script >
2022-03-24 02:13:01 +00:00
2022-03-22 03:08:00 +00:00
{% include "emoji_modal.html" %}
2022-03-24 02:13:01 +00:00
{% include "expanded_image_modal.html" %}
2022-03-22 03:08:00 +00:00
2022-03-31 16:28:53 +00:00
< script src = "/assets/js/lozad.js?v=240" > < / script >
< script src = "/assets/js/lite-youtube.js?v=240" > < / script >
2022-03-24 19:44:12 +00:00
< / body >
