-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (154 loc) · 6.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARA</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="./css/main.css">
<script defer src="./js/main.js"></script>
</head>
<body>
<div class="main-container">
<!-- 왼쪽 사이드바 -->
<section class="side-container">
<div class="side-header"></div>
<!-- 사이드 메뉴, 위젯 등 -->
<section class="study-chats">
<div class="menu-header">
<img src="./images/List.png" alt="Chat List" class="chat-list-icon">
<h2>Study Chats</h2>
<button class="add-chat-button">
<img src="./images/Folder plus.png" alt="add chat" class="add-chat-icon">
</button>
<button class="toggle-section-button">
<img src="./images/Chevrons down.png" alt="toggle" class="toggle-icon">
</button>
</div>
<!-- Study Chats 리스트 -->
<div class="chats-list collapsible">
<ul>
<li>과목 1
<button class="chat-more-button">
<div class="material-icons">more_horiz</div>
</button>
</li>
</ul>
<!-- Popup Modal -->
<div id="action-popup" class="popup hidden">
<div class="popup-content">
<label for="chat-name">New Chat Name:</label>
<input type="text" id="chat-name" placeholder="Enter new name" />
<button id="save-rename">이름 변경하기</button>
<button id="delete-chat">채팅방 삭제하기</button>
<button id="close-popup">Cancel</button>
</div>
</div>
</div>
</section>
<section class="custom-widgets">
<div class="menu-header">
<h2>커스텀 위젯</h2>
<button class="toggle-section-button">
<img src="./images/Chevrons down.png" alt="toggle" class="toggle-icon">
</button>
</div>
<!-- 위젯 리스트 -->
<div class="widgets-list collapsible"></div>
<button class="widget add-btn">+ 위젯추가하기</button>
</section>
<section class="library">
<div class="menu-header">
<img src="./images/Folder.png" alt="library" class="library-icon">
<h2>Library</h2>
<button class="toggle-section-button">
<img src="./images/Chevrons down.png" alt="toggle" class="toggle-icon">
</button>
</div>
<!-- 라이브러리 리스트 -->
<div class="file-list collapsible"></div>
<button class="file add-btn" id="add-file-button">+ 파일추가하기</button>
<input type="file" id="file-input" multiple hidden>
</section>
</section>
<!-- 오른쪽 메인 영역 -->
<div class="chat-container">
<!-- 상단 헤더 -->
<header class="chat-header">
<button id="toggle-sidebar" class="toggle-button">
<img src="./images/Sidebar.png" alt="Sidebar open" class="menu_open">
</button>
<img src="./images/ARA-logo.png" alt="ARA" class="header-logo">
<div class="btn-group">
<img src="./images/Share.png" alt=공유하기" class="share-icon">
<img src="./images/Generic avatar.png" alt="user info" class="user-icon">
</div>
</header>
<!-- 가운데 내용 (안내문구, 입력창, 버튼 등) -->
<section class="chat-content">
<!-- 안내 문구 -->
<div class="chat-description">
<h1 class="chat-description-text">성공적인 학습을 위한 최고의 서포터 'ARA'</h1>
</div>
<!-- 메시지 입력 영역 -->
<div class="chat-input">
<textarea id="message-input" placeholder="Type a message." rows="1"></textarea>
<button class="send-button" id="sendButton" disabled>
<div class="material-icons">send</div>
</button>
</div>
<!-- 액션 버튼들 -->
<div class="chat-actions">
<button>학습내용 요약</button>
<button>질문내용 요약</button>
<button>퀴즈 생성</button>
</div>
</section>
</div>
<!-- 로그인 팝업 -->
<div id="login-popup" class="popup hidden">
<div class="popup-content">
<h2>로그인</h2>
<form id="login-form">
<label for="userid">아이디:</label>
<input type="text" id="userid" name="userid" required>
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
<button type="submit" class="login-button" aria-label="로그인">로그인</button>
<button type="button" class="sign-in-button">회원가입</button>
<button type="button" class="close-button">X</button>
</form>
</div>
</div>
<!-- 회원가입 팝업 -->
<div id="sign-in-popup" class="popup hidden">
<div class="popup-content">
<h2>회원가입</h2>
<form id="sign-in-form">
<label for="username">이름:</label>
<input type="text" id="set-username" name="username" required>
<label for="userid">아이디:</label>
<input type="text" id="set-userid" name="userid" required>
<label for="password">비밀번호:</label>
<input type="password" id="set-password" name="password" required>
<button type="submit" class="sign-up-button" aria-label="회원등록">회원가입</button>
<button type="button" class="close-button">X</button>
</form>
</div>
</div>
<!-- user 정보 팝업 -->
<div id="user-info-popup" class="popup hidden">
<div class="popup-content">
<h2 id="user-info">환영합니다!</h2>
<p id="user-info-id"></p>
<button type="button" id="logout-button">로그아웃</button>
<button type="button" class="close-button">X</button>
</div>
</div>
</div>
</body>
</html>