360 lines
10 KiB
HTML
360 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IDC 상담 채팅</title>
|
|
<style>
|
|
:root {
|
|
--skype-blue: #0078d4;
|
|
--skype-bg: #f3f2f1;
|
|
--sidebar-bg: #ffffff;
|
|
--text-main: #201f1e;
|
|
--text-sub: #605e5c;
|
|
--msg-sent: #0078d4;
|
|
--msg-received: #f3f2f1;
|
|
--border-color: #edebe9;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: #faf9f8;
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#chat-widget {
|
|
width: 1000px;
|
|
height: 85vh;
|
|
background: white;
|
|
display: flex;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
/* Sidebar Styles */
|
|
#sidebar {
|
|
width: 320px;
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#sidebar-header {
|
|
padding: 20px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
#sidebar-header h2 {
|
|
font-size: 18px;
|
|
color: var(--text-main);
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.search-container {
|
|
position: relative;
|
|
background: #f3f2f1;
|
|
border-radius: 4px;
|
|
padding: 5px 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.search-container input {
|
|
background: none;
|
|
border: none;
|
|
width: 100%;
|
|
padding: 5px;
|
|
outline: none;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#room-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.room-item {
|
|
padding: 12px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.room-item:hover {
|
|
background: #f3f2f1;
|
|
}
|
|
|
|
.room-item.active {
|
|
background: #edebe9;
|
|
}
|
|
|
|
.avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: var(--skype-blue);
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.room-info {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.room-info .name {
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-bottom: 2px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.room-info .preview {
|
|
font-size: 12px;
|
|
color: var(--text-sub);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Main Chat Styles */
|
|
#main-chat {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#chat-header {
|
|
padding: 15px 25px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: white;
|
|
height: 70px;
|
|
}
|
|
|
|
#chat-header .user-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
#chat-header .user-meta .name {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
|
|
#chat-messages {
|
|
flex: 1;
|
|
padding: 20px 30px;
|
|
overflow-y: auto;
|
|
background: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.message {
|
|
max-width: 70%;
|
|
padding: 10px 16px;
|
|
border-radius: 18px;
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
position: relative;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.message.left {
|
|
align-self: flex-start;
|
|
background: var(--msg-received);
|
|
color: var(--text-main);
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
|
|
.message.right {
|
|
align-self: flex-end;
|
|
background: var(--msg-sent);
|
|
color: white;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
.message .sender-id {
|
|
display: none;
|
|
/* Skype 스타일은 버블 내 아이디 표시 지양 */
|
|
}
|
|
|
|
/* Input Area */
|
|
#chat-input-area {
|
|
padding: 15px 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
|
|
#message-input {
|
|
flex: 1;
|
|
border: none;
|
|
padding: 10px;
|
|
font-size: 14px;
|
|
outline: none;
|
|
}
|
|
|
|
.icon-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--skype-blue);
|
|
cursor: pointer;
|
|
padding: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#send-btn {
|
|
background: var(--skype-blue);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 18px;
|
|
border-radius: 20px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Modals & Others */
|
|
.login-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.login-content {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 8px;
|
|
width: 320px;
|
|
text-align: center;
|
|
}
|
|
|
|
.login-content input {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin: 10px 0;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#auth-toggle-btn {
|
|
background: none;
|
|
border: 1px solid var(--skype-blue);
|
|
color: var(--skype-blue);
|
|
padding: 5px 12px;
|
|
border-radius: 15px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="chat-widget">
|
|
<!-- Sidebar -->
|
|
<div id="sidebar">
|
|
<div id="sidebar-header">
|
|
<h2>상담 채널</h2>
|
|
<div style="font-size: 12px; color: var(--text-sub); margin-top: 5px;">실시간 상담 대기 및 목록</div>
|
|
</div>
|
|
<div id="room-list">
|
|
<!-- Room items will be injected here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Chat Area -->
|
|
<div id="main-chat">
|
|
<div id="chat-header">
|
|
<div class="user-meta" id="active-user-meta">
|
|
<div class="avatar" id="header-avatar">?</div>
|
|
<div class="info">
|
|
<div class="name" id="target-name">전체 모니터링</div>
|
|
<div style="font-size: 12px; color: var(--text-sub);" id="target-status">실시간 대기 중</div>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; gap: 10px;">
|
|
<button id="exit-reply-btn"
|
|
style="display:none; background:none; border:none; color:var(--skype-blue); cursor:pointer; font-weight:600; font-size:13px;">전체보기</button>
|
|
<button id="auth-toggle-btn">로그인</button>
|
|
<button id="signup-show-btn" onclick="location.href='/register'"
|
|
style="background:none; border:1px solid #ddd; color:#666; padding:5px 12px; border-radius:15px; cursor:pointer; font-size:12px;">회원가입</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chat-messages">
|
|
<!-- Messages will be injected here -->
|
|
</div>
|
|
|
|
<!-- Reply Info (Skype 스타일에서는 헤더나 플로팅 바 대신 헤더 정보 활용 가능하지만 기존 로직 유지를 위해 숨김 처리 또는 통합) -->
|
|
<div id="reply-info" style="display:none;"></div>
|
|
|
|
<div id="chat-input-area">
|
|
<input type="file" id="image-input" accept="image/*" style="display: none;">
|
|
<button id="image-btn" class="icon-btn" title="이미지 첨부">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
|
<circle cx="8.5" cy="8.5" r="1.5" />
|
|
<polyline points="21 15 16 10 5 21" />
|
|
</svg>
|
|
</button>
|
|
<input type="text" id="message-input" placeholder="메시지를 입력하세요...">
|
|
<button id="send-btn">전송</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login Modal -->
|
|
<div id="login-area" class="login-modal">
|
|
<div class="login-content">
|
|
<h3 style="margin-bottom: 20px;">사용자 로그인</h3>
|
|
<input type="text" id="username" placeholder="아이디">
|
|
<input type="password" id="password" placeholder="비밀번호">
|
|
<div style="display: flex; gap: 10px; margin-top: 10px;">
|
|
<button id="login-submit-btn" style="flex: 1;">로그인</button>
|
|
<button id="login-cancel-btn" style="flex: 1; background: #eee; color: #333;">취소</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script src="/chat.js"></script>
|
|
|
|
</html> |