Emotune/index.html at main · DDuckyee/Emotune · GitHub

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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy"
    content="
    default-src 'self';
    script-src 'self' 'unsafe-inline' 'unsafe-eval';
    img-src 'self' https://picsum.photos;
    ">
    <title>Emotune - 감성 음악 웹앱</title>
    <link rel="stylesheet" href="style.css"/>
    <script src="app.js" defer></script>
</head>
<body>
    <!-- 헤더 -->
    <div class="header">
        <div class="app-title">Emotune</div>
        <svg class="search-icon" onclick="showPage('search')" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.35-4.35"></path>
        </svg>
    </div>

    <!-- 홈 페이지 -->
    <div id="home-page" class="page active">
        <div class="home-content">
            <div class="emotional-text">오늘의 순간을<br>기록해보세요.</div>

            <div class="vinyl-container">
                <div class="vinyl-record">
                    <div class="vinyl-grooves"></div>
                    <div class="vinyl-label"></div>
                    <div class="vinyl-reflection"></div>
                </div>
            </div>

            <div class="section-title">상황별 음악 추천</div>
            <div class="tag-container" id="music-tags">
                <div class="tag" onclick="filterMusic('신나는')">신나는</div>
                <div class="tag" onclick="filterMusic('산책할 때')">산책할 때</div>
                <div class="tag" onclick="filterMusic('드라이브')">드라이브</div>
                <div class="tag" onclick="filterMusic('공부할 때')">공부할 때</div>
                <div class="tag" onclick="filterMusic('잠들기 전')">잠들기 전</div>
                <div class="tag" onclick="filterMusic('운동할 때')">운동할 때</div>
                <div class="tag" onclick="filterMusic('카페에서')">카페에서</div>
                <div class="tag" onclick="filterMusic('비오는 날')">비오는 날</div>
            </div>

            <div class="card-container" id="music-cards">
                <!-- 음악 카드들이 동적으로 생성됩니다 -->
            </div>

            <button class="more-button" onclick="showPage('search')">음악 더보기</button>

            <div class="section-title">오늘의 인기 문장</div>
            <div id="popular-sentences">
                <!-- 인기 문장들이 동적으로 생성됩니다 -->
            </div>

            <div class="section-title">추천 태그로 보는 문장</div>
            <div class="tag-container" id="sentence-tags">
                <div class="tag" onclick="filterSentences('잠 잘때')">잠 잘때</div>
                <div class="tag" onclick="filterSentences('여유')">여유</div>
                <div class="tag" onclick="filterSentences('에세이')">에세이</div>
                <div class="tag" onclick="filterSentences('생각 정리 중')">생각 정리 중</div>
                <div class="tag" onclick="filterSentences('위로')">위로</div>
                <div class="tag" onclick="filterSentences('동기부여')">동기부여</div>
                <div class="tag" onclick="filterSentences('사랑')">사랑</div>
                <div class="tag" onclick="filterSentences('행복')">행복</div>
            </div>

            <div class="card-container" id="sentence-cards">
                <!-- 문장 카드들이 동적으로 생성됩니다 -->
            </div>
        </div>
    </div>

    <!-- 보관함 페이지 -->
    <div id="archive-page" class="page">
        <div class="tab-container">
            <div class="tab active" onclick="showArchiveTab('sentences')">문장</div>
            <div class="tab" onclick="showArchiveTab('folders')">폴더</div>
        </div>

        <div class="archive-content">
            <!-- 문장 탭 -->
            <div id="sentences-tab" class="tab-content">
                <div class="archive-header">
                    <div class="count-text">총 <span id="sentence-count">0</span>개의 문장</div>
                    <select class="sort-select" onchange="sortSentences(this.value)">
                        <option value="recent">최신순</option>
                        <option value="old">오래된순</option>
                    </select>
                </div>
                <div class="sentence-list" id="sentence-list">
                    <!-- 문장 목록이 동적으로 생성됩니다 -->
                </div>
            </div>

            <!-- 폴더 탭 -->
            <div id="folders-tab" class="tab-content" style="display: none;">
                <div class="archive-header">
                    <div class="count-text">총 <span id="folder-count">0</span>개의 폴더</div>
                    <select class="sort-select" onchange="sortFolders(this.value)">
                        <option value="recent">최신순</option>
                        <option value="old">오래된순</option>
                    </select>
                </div>
                <div class="folder-grid" id="folder-list">
                    <!-- 폴더 목록이 동적으로 생성됩니다 -->
                </div>
            </div>
        </div>

        <button class="add-button" id="add-button" onclick="showAddModal()">+</button>
    </div>

    <!-- 검색 페이지 -->
    <div id="search-page" class="page">
        <div class="search-content">
            <h1 class="search-title">검색</h1>

            <div class="search-input-container">
                <input type="text" class="search-bar" placeholder="음악, 태그, 문장을 검색해보세요" id="search-input">
                <button class="search-button" onclick="performSearch()">검색</button>
            </div>

            <div class="section-title">인기 태그</div>
            <div class="tag-container">
                <div class="tag" onclick="showTagModal('신나는')">신나는</div>
                <div class="tag" onclick="showTagModal('산책할 때')">산책할 때</div>
                <div class="tag" onclick="showTagModal('드라이브')">드라이브</div>
                <div class="tag" onclick="showTagModal('공부할 때')">공부할 때</div>
                <div class="tag" onclick="showTagModal('잠들기 전')">잠들기 전</div>
                <div class="tag" onclick="showTagModal('운동할 때')">운동할 때</div>
                <div class="tag" onclick="showTagModal('카페에서')">카페에서</div>
                <div class="tag" onclick="showTagModal('비오는 날')">비오는 날</div>
            </div>

            <div class="section-title">상황별 음악</div>
            <div class="situation-grid">
                <div class="situation-card" onclick="showSituationModal('산책할 때')">
                    <img src="https://picsum.photos/300/200?random=1" alt="산책" class="situation-background">
                    <div class="situation-overlay">산책할 때</div>
                </div>
                <div class="situation-card" onclick="showSituationModal('잠자기 전')">
                    <img src="https://picsum.photos/300/200?random=2" alt="잠자기 전" class="situation-background">
                    <div class="situation-overlay">잠자기 전</div>
                </div>
                <div class="situation-card" onclick="showSituationModal('작업할 때')">
                    <img src="https://picsum.photos/300/200?random=3" alt="작업" class="situation-background">
                    <div class="situation-overlay">작업할 때</div>
                </div>
                <div class="situation-card" onclick="showSituationModal('기분 전환')">
                    <img src="https://picsum.photos/300/200?random=4" alt="기분 전환" class="situation-background">
                    <div class="situation-overlay">기분 전환</div>
                </div>
                <div class="situation-card" onclick="showSituationModal('드라이브')">
                    <img src="https://picsum.photos/300/200?random=5" alt="드라이브" class="situation-background">
                    <div class="situation-overlay">드라이브</div>
                </div>
                <div class="situation-card" onclick="showSituationModal('비 오는 날')">
                    <img src="https://picsum.photos/300/200?random=6" alt="비 오는 날" class="situation-background">
                    <div class="situation-overlay">비 오는 날</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 마이 페이지 -->
    <div id="my-page" class="page">
        <div class="my-content">
            <h1 class="my-title">마이페이지</h1>

            <div class="profile-card">
                <img src="https://picsum.photos/100/100?random=profile" alt="프로필" class="profile-image">
                <div class="profile-name">음악애호가</div>
                <div class="profile-stats">
                    <div class="stat-item">
                        <div class="stat-number">42</div>
                        <div class="stat-label">문장</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">8</div>
                        <div class="stat-label">폴더</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">156</div>
                        <div class="stat-label">저장한 음악</div>
                    </div>
                </div>
                <div class="profile-actions">
                    <button class="profile-button" onclick="alert('프로필 수정 기능은 준비 중입니다.')">프로필 수정</button>
                    <button class="profile-button" onclick="alert('설정 기능은 준비 중입니다.')">설정</button>
                </div>
            </div>

            <div class="menu-section">
                <div class="menu-title">리스트</div>
                <div class="menu-list">
                    <div class="menu-item" onclick="showPage('search')">
                        <span>음악 플레이리스트</span>
                        <span class="menu-arrow">›</span>
                    </div>
                    <div class="menu-item" onclick="showPage('archive')">
                        <span>작성한 문장</span>
                        <span class="menu-arrow">›</span>
                    </div>
                </div>
            </div>

            <div class="menu-section">
                <div class="menu-title">고객센터</div>
                <div class="menu-list">
                    <div class="menu-item" onclick="alert('공지사항 페이지는 준비 중입니다.')">
                        <span>공지사항</span>
                        <span class="menu-arrow">›</span>
                    </div>
                    <div class="menu-item" onclick="alert('FAQ 페이지는 준비 중입니다.')">
                        <span>FAQ</span>
                        <span class="menu-arrow">›</span>
                    </div>
                    <div class="menu-item" onclick="alert('문의하기 기능은 준비 중입니다.')">
                        <span>문의하기</span>
                        <span class="menu-arrow">›</span>
                    </div>
                    <div class="menu-item" onclick="alert('이용약관 페이지는 준비 중입니다.')">
                        <span>이용약관</span>
                        <span class="menu-arrow">›</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 하단 네비게이션 바 -->
    <div class="nav-bar">
        <div class="nav-item active" onclick="showPage('home')">
            <svg class="nav-icon" viewBox="0 0 24 24">
                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                <polyline points="9 22 9 12 15 12 15 22"></polyline>
            </svg>
            <span>홈</span>
        </div>
        <div class="nav-item" onclick="showPage('archive')">
            <svg class="nav-icon" viewBox="0 0 24 24">
                <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                <polyline points="17 21 17 13 7 13 7 21"></polyline>
                <polyline points="7 3 7 8 15 8"></polyline>
            </svg>
            <span>보관함</span>
        </div>
        <div class="nav-item" onclick="showPage('search')">
            <svg class="nav-icon" viewBox="0 0 24 24">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.35-4.35"></path>
            </svg>
            <span>검색</span>
        </div>
        <div class="nav-item" onclick="showPage('my')">
            <svg class="nav-icon" viewBox="0 0 24 24">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
            </svg>
            <span>마이</span>
        </div>
    </div>

    <!-- 모달 -->
    <div id="modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title" id="modal-title">제목</h2>
                <button class="modal-close" onclick="closeModal()">×</button>
            </div>
            <div id="modal-body">
                <!-- 모달 내용이 동적으로 생성됩니다 -->
            </div>
        </div>
    </div>
</body>
</html>