87 lines
3 KiB
Text
87 lines
3 KiB
Text
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
:root {
|
|
--chat-left: <%= layout.chat_left %>%;
|
|
--chat-top: <%= layout.chat_top %>%;
|
|
--chat-width: <%= layout.chat_width %>%;
|
|
--chat-height: <%= layout.chat_height %>%;
|
|
--chat-font-size: <%= layout.chat_font_size %>px;
|
|
--chat-font-family: <%= layout.chat_font_family %>;
|
|
--chat-bg-opacity: <%= layout.chat_bg_opacity %>;
|
|
--chat-text-color: <%= layout.chat_text_color %>;
|
|
--chat-border-radius: <%= layout.chat_border_radius %>px;
|
|
--alert-left: <%= layout.alert_left %>%;
|
|
--alert-top: <%= layout.alert_top %>%;
|
|
--alert-font-size: <%= layout.alert_font_size %>px;
|
|
--alert-bg-opacity: <%= layout.alert_bg_opacity %>;
|
|
--alert-text-color: <%= layout.alert_text_color %>;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: rgba(30,30,30,0.6); overflow: hidden; width: 1920px; height: 1080px; }
|
|
|
|
#chat {
|
|
position: fixed;
|
|
left: var(--chat-left);
|
|
top: var(--chat-top);
|
|
width: var(--chat-width);
|
|
max-height: var(--chat-height);
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
font-family: var(--chat-font-family);
|
|
font-size: var(--chat-font-size);
|
|
color: var(--chat-text-color);
|
|
}
|
|
.chat-msg {
|
|
background: rgba(0, 0, 0, var(--chat-bg-opacity));
|
|
border-radius: var(--chat-border-radius);
|
|
padding: 5px 10px;
|
|
word-break: break-word;
|
|
}
|
|
.chat-msg .username { font-weight: 700; margin-right: 4px; }
|
|
|
|
#alert-box {
|
|
position: fixed;
|
|
left: var(--alert-left);
|
|
top: var(--alert-top);
|
|
transform: translate(-50%, -50%);
|
|
font-family: var(--chat-font-family);
|
|
font-size: var(--alert-font-size);
|
|
color: var(--alert-text-color);
|
|
background: rgba(0, 0, 0, var(--alert-bg-opacity));
|
|
border-radius: 12px;
|
|
padding: 16px 28px;
|
|
text-align: center;
|
|
}
|
|
|
|
#chat-handle, #alert-handle {
|
|
position: fixed;
|
|
border: 2px dashed rgba(255,255,255,0.5);
|
|
cursor: move;
|
|
background: rgba(255,255,255,0.05);
|
|
}
|
|
#chat-handle {
|
|
left: var(--chat-left); top: var(--chat-top);
|
|
width: var(--chat-width); height: var(--chat-height);
|
|
}
|
|
#alert-handle {
|
|
left: calc(var(--alert-left) - 80px); top: calc(var(--alert-top) - 20px);
|
|
width: 160px; height: 40px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="chat">
|
|
<div class="chat-msg"><span class="username" style="color:#9146ff">bashynx</span>: This is a preview message</div>
|
|
<div class="chat-msg"><span class="username" style="color:#ff6b6b">someviewer</span>: Looking great!</div>
|
|
<div class="chat-msg"><span class="username" style="color:#6bcbff">anotheruser</span>: pog pog pog</div>
|
|
</div>
|
|
<div id="alert-box">Alert preview</div>
|
|
<div id="chat-handle" data-widget="chat"></div>
|
|
<div id="alert-handle" data-widget="alert"></div>
|
|
</body>
|
|
</html>
|