2022-07-01 05:55:53 +00:00
{%- from 'util/assetcache.html' import asset, asset_siteimg with context -%}
2022-06-07 09:26:22 +00:00
{%- import 'util/helpers.html' as help -%}
2022-03-24 19:44:12 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
2022-09-08 17:12:46 +00:00
< script defer src = "{{asset('js/bootstrap.js')}}" > < / script >
2022-08-06 01:20:25 +00:00
2022-06-24 15:08:57 +00:00
< meta name = "description" content = "{{DESCRIPTION}}" >
2022-03-24 19:44:12 +00:00
< 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-07-01 05:55:53 +00:00
< link id = "favicon" rel = "icon" type = "image/webp" href = "{{asset_siteimg('icon.webp')}}" >
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-05-27 02:47:32 +00:00
< link rel = "stylesheet" href = "{{asset('css/main.css')}}" >
2022-05-30 05:50:52 +00:00
< link rel = "stylesheet" href = "{{asset('css/' + v.theme + '.css')}}" >
2022-03-24 19:44:12 +00:00
{% if v.css %}
2022-07-01 21:10:48 +00:00
< style >
{{v.css | safe}}
< / style >
2022-03-24 19:44:12 +00:00
{% endif %}
< style >
2022-08-15 06:54:32 +00:00
#chat-window {
2022-08-15 06:51:35 +00:00
max-height: calc(100vh - 220px);
2022-08-15 06:56:01 +00:00
overflow-y: auto;
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-08-15 06:54:32 +00:00
#online {
2022-09-12 05:38:02 +00:00
max-height: calc(100vh - 200px);
2022-08-15 06:56:01 +00:00
overflow-y: auto;
2022-09-12 05:38:02 +00:00
background-color: var(--background) !important;
2022-08-15 06:54:32 +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
}
2022-08-26 15:00:58 +00:00
p, h1, h2, h3, h4, h5 {
2022-08-13 09:01:22 +00:00
display: inherit;
}
2022-08-25 21:30:29 +00:00
blockquote + :not(blockquote) {
display: inline-block;
2022-08-26 15:00:19 +00:00
margin-top: 0.5rem;
2022-08-25 21:30:29 +00:00
}
2022-08-26 15:00:19 +00:00
blockquote {
margin-top: 0.5rem;
2022-08-26 14:53:56 +00:00
}
2022-03-24 19:44:12 +00:00
.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-08-15 05:35:07 +00:00
#chat-window {
2022-08-30 02:00:24 +00:00
max-height: 62vh;
2022-08-15 05:35:07 +00:00
}
2022-03-24 19:44:12 +00:00
}
2022-03-24 20:04:52 +00:00
p {
2022-06-30 23:01:01 +00:00
margin: 0;
2022-03-24 19:44:12 +00:00
}
2022-03-24 20:04:52 +00:00
2022-03-25 01:17:36 +00:00
.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-08-11 07:18:17 +00:00
border-color: transparent !important;
2022-03-26 10:52:14 +00:00
}
2022-05-23 17:57:08 +00:00
lite-youtube {
min-width: min(80vw,500px);
}
2022-03-24 19:44:12 +00:00
< / style >
< / head >
2022-04-13 20:20:57 +00:00
< body >
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-04-07 00:21:38 +00:00
< div class = "border-right pb-1 pt-2 px-3" >
2022-08-13 11:07:57 +00:00
< span id = "online2" data-bs-html = "true" data-bs-toggle = "tooltip" data-bs-placement = "bottom" title = "Users in chat right now" class = "text-muted" >
2022-09-08 17:24:00 +00:00
< i class = "far fa-user fa-sm mr-1" > < / i >
2022-03-24 19:44:12 +00:00
< span class = "board-chat-count" > 0< / span >
< / span >
2022-09-13 03:14:55 +00:00
{% include "casino/roulette_screen.html" %}
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-09-05 03:14:03 +00:00
< div class = "avatar profile-pic-20-wrapper" >
< img class = "avatar-pic pp20 mr-1" >
2022-09-05 03:16:42 +00:00
< img class = "avatar-hat profile-pic-20-hat hat" loading = "lazy" >
2022-09-05 03:14:03 +00:00
< / div >
2022-03-24 19:44:12 +00:00
< a href = "" class = "font-weight-bold text-black userlink" target = "_blank" > < / a >
2022-08-26 14:53:56 +00:00
< span class = "text-black time ml-2 d-none" > just now< / span >
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-09-10 09:31:51 +00:00
{% if v.admin_level > 1 %}
2022-09-10 09:44:06 +00:00
< button class = "quote btn" onclick = "del(this)" > < i class = "fas fa-trash-alt" aria-hidden = "true" > < / i > < / button >
2022-09-10 09:31:51 +00:00
{% endif %}
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 %}
2022-09-05 03:04:48 +00:00
< div class = "profile-pic-20-wrapper" >
2022-09-05 03:14:03 +00:00
< img src = "{{m['avatar']}}" class = "pp20 mr-1" >
2022-09-05 03:04:48 +00:00
{% if m.get('hat') -%}
2022-09-10 09:34:48 +00:00
< img class = "profile-pic-20-hat hat" loading = "lazy" src = "{{m['hat']}}?h=5" >
2022-09-05 03:04:48 +00:00
{%- endif %}
< / div >
2022-03-24 23:58:07 +00:00
{% 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-04-06 22:54:09 +00:00
{% if not same %}
2022-08-25 23:27:11 +00:00
< span class = "text-black time ml-2" > {{m['time'] | timestamp}}< / span >
2022-04-06 22:54:09 +00:00
{% endif %}
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 >
2022-09-10 09:31:51 +00:00
< span class = "text 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-09-10 09:31:51 +00:00
{% if v.admin_level > 1 %}
2022-09-10 09:44:06 +00:00
< button class = "quote btn" onclick = "del(this)" > < i class = "fas fa-trash-alt" aria-hidden = "true" > < / i > < / button >
2022-09-10 09:31:51 +00:00
{% endif %}
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 >
2022-09-09 23:52:52 +00:00
< 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 >
2022-08-26 19:22:40 +00:00
< textarea onclick = "scroll_chat()" id = "input-text" minlength = "1" maxlength = "{% if SITE == 'rdrama.net' %}200{% else %}1000{% endif %}" style = "font-size:16px!important" class = "form-control" placeholder = "Message" autocomplete = "off" autofocus rows = "1" > < / textarea >
2022-08-26 19:31:46 +00:00
< button id = "chatsend" onclick = "send()" class = "btn btn-primary ml-3" type = "submit" onclick = "disable(this)" > Send< / button >
2022-03-24 19:44:12 +00:00
< / div >
2022-03-22 02:35:12 +00:00
< / div >
< / div >
2022-03-24 19:44:12 +00:00
2022-09-09 09:28:59 +00:00
< div class = "col text-left d-none d-lg-block pt-3" style = "max-width:300px" >
2022-08-14 13:38:08 +00:00
< h4 > Users in chat right now< / h4 >
2022-08-15 06:53:04 +00:00
< div id = "online" class = "mt-3" > < / 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}}" >
2022-08-27 00:48:28 +00:00
< input id = "vusername" type = "hidden" value = "{{v.username}}" >
2022-03-23 16:15:59 +00:00
< 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-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-09-08 17:12:46 +00:00
< script defer src = "{{asset('js/lozad.js')}}" > < / script >
< script defer src = "/assets/js/lite-youtube.js?v=4000" > < / script >
2022-09-10 09:34:48 +00:00
< script defer src = "/chat.js?h=5" > < / script >
2022-08-19 13:58:29 +00:00
2022-03-24 19:44:12 +00:00
< / body >