118 lines
6.5 KiB
HTML
118 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>엔큐톡 AI엔진</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
<script src="main.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<aside class="sidebar">
|
||
<div class="logo">엔큐톡</div>
|
||
<nav class="menu">
|
||
<ul>
|
||
<li class="menu-item active" data-page="chat">채팅</li>
|
||
<li class="menu-item" data-page="tools">도구</li>
|
||
<li class="menu-item" data-page="lecture">강의</li>
|
||
<li class="menu-item" data-page="community">커뮤니티</li>
|
||
</ul>
|
||
</nav>
|
||
</aside>
|
||
<main class="main-content">
|
||
<header class="topbar">
|
||
<span class="page-title">채팅</span>
|
||
<button class="login-btn">로그인</button>
|
||
</header>
|
||
<section class="page page-chat active">
|
||
<div class="file-sidebar" style="display:none;">
|
||
<div class="file-sidebar-header" style="display:flex; justify-content:space-between; align-items:center;">
|
||
<span>파일 리스트</span>
|
||
<button class="file-add-btn" style="font-size:18px; padding:0 8px;">+</button>
|
||
</div>
|
||
<ul class="file-list"></ul>
|
||
</div>
|
||
<div class="chat-center">
|
||
<div class="chat-logo-wrapper">
|
||
<div class="chat-logo"></div>
|
||
<div class="chat-title">엔큐톡</div>
|
||
</div>
|
||
</div>
|
||
<div class="file-slide" style="display:none;">
|
||
<button class="file-slide-close">×</button>
|
||
<iframe class="file-viewer" style="width:100%; height:100%; border:none;"></iframe>
|
||
</div>
|
||
<!-- 모델 선택 드롭다운 삭제 -->
|
||
<!-- <div class="model-select-area" style="margin: 0 0 8px 0; text-align: right;">
|
||
<label for="model-select" style="font-size: 14px; margin-right: 6px;">모델 선택:</label>
|
||
<select id="model-select" style="font-size: 14px; padding: 2px 8px;">
|
||
<option value="exone3.5">exone3.5</option>
|
||
<option value="gpt">gpt</option>
|
||
</select>
|
||
</div> -->
|
||
<div class="chat-input-wrapper">
|
||
<div class="image-preview-area" style="display:none;"></div>
|
||
<div class="chat-input-area">
|
||
<!-- 통합 모델 선택 셀렉트 박스 -->
|
||
<select class="model-select" style="margin-right:12px; height:36px; border-radius:12px; border:1px solid #ffd6c2; color:#ff6b4a; font-size:1rem;">
|
||
<option value="auto">Auto</option>
|
||
<option value="gpt-5">GPT-5</option>
|
||
</select>
|
||
<!-- 개발챗봇 전용 모델 선택 -->
|
||
<select class="gc-model-select" style="margin-right:12px; height:36px; border-radius:12px; border:1px solid #ffd6c2; color:#ff6b4a; font-size:1rem; display:none;">
|
||
<option value="woong">자체모델</option>
|
||
</select>
|
||
<select class="knowledge-mode" style="margin-right:12px; height:36px; border-radius:12px; border:1px solid #ffd6c2; color:#ff6b4a; font-size:1rem; display:none;">
|
||
<option value="kb_only">지식베이스</option>
|
||
<!--<option value="hybrid">혼합</option>-->
|
||
</select>
|
||
<!-- 문서번역 전용 모델 선택 -->
|
||
<select class="dt-model-select" style="margin-right:12px; height:36px; border-radius:12px; border:1px solid #ffd6c2; color:#ff6b4a; font-size:1rem; display:none;">
|
||
<option value="internal">자체모델</option>
|
||
<option value="external">외부모델</option>
|
||
</select>
|
||
<div contenteditable="true" class="chat-input" data-placeholder="메시지 입력"></div>
|
||
<input type="file" class="chat-file-input" accept="image/*,application/pdf" multiple style="display:none;">
|
||
<button class="chat-send" disabled>↑</button>
|
||
</div>
|
||
</div>
|
||
<!-- footer 제거 -->
|
||
</section>
|
||
<section class="page page-tools">
|
||
<div class="tools-header">
|
||
<span class="tools-title">도구 목록</span>
|
||
<div class="tools-filters">
|
||
<button class="filter-btn active" data-filter="all">전체</button>
|
||
<button class="filter-btn" data-filter="favorite">즐겨찾기</button>
|
||
<button class="filter-btn" data-filter="오픈AI">오픈AI</button>
|
||
<button class="filter-btn" data-filter="내부AI">내부AI</button>
|
||
</div>
|
||
</div>
|
||
<div class="tools-list">
|
||
<!-- 도구 카드가 동적으로 들어감 -->
|
||
</div>
|
||
</section>
|
||
<section class="page page-lecture">
|
||
<div style="padding:40px; font-size:1.1rem;">강의 콘텐츠가 준비 중입니다.</div>
|
||
</section>
|
||
<section class="page page-community">
|
||
<div class="community-container">
|
||
<aside class="community-sidebar">
|
||
<ul>
|
||
<li class="community-menu-item active" data-content="newsletter">뉴스레터</li>
|
||
<li class="community-menu-item" data-content="qna">질의응답</li>
|
||
</ul>
|
||
</aside>
|
||
<main class="community-content">
|
||
<!-- 기본 컨텐츠: 뉴스레터 -->
|
||
<div style="padding:24px;">뉴스레터 콘텐츠가 준비 중입니다.</div>
|
||
</main>
|
||
</div>
|
||
</section>
|
||
<!-- 기타 메뉴 추가 예정 -->
|
||
</main>
|
||
</div>
|
||
</body>
|
||
</html> |