1<!DOCTYPE html> 2<html lang="ko"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="description" content="AIê° ë¹ì ì ê°ì ì ë¶ìíê³ ê³µê°í´ì£¼ë ëì§í¸ ë¤ì´ì´ë¦¬. ìì íê³ ë°ë»í ê°ì ê¸°ë¡ ìë¹ì¤."> 7 <meta name="keywords" content="ë¤ì´ì´ë¦¬, ê°ì ë¶ì, AI, ê³µê°, ì¼ê¸°, ê°ì 기ë¡"> 8 <meta name="author" content="Empathy Diary App"> 9 <meta name="theme-color" content="#d4a574"> 10 11 <!-- Open Graph / Facebook --> 12 <meta property="og:type" content="website"> 13 <meta property="og:title" content="ê³µê° AI ë¤ì´ì´ë¦¬"> 14 <meta property="og:description" content="AIê° ë¹ì ì ê°ì ì ë¶ìíê³ ê³µê°í´ì£¼ë ëì§í¸ ë¤ì´ì´ë¦¬"> 15 <meta property="og:image" content="/favicon-192.png"> 16 17 <!-- Twitter --> 18 <meta property="twitter:card" content="summary_large_image"> 19 <meta property="twitter:title" content="ê³µê° AI ë¤ì´ì´ë¦¬"> 20 <meta property="twitter:description" content="AIê° ë¹ì ì ê°ì ì ë¶ìíê³ ê³µê°í´ì£¼ë ëì§í¸ ë¤ì´ì´ë¦¬"> 21 22 <!-- Favicon --> 23 <link rel="icon" type="image/png" sizes="32x32" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>ð</text></svg>"> 24 25 <title>ê³µê° AI ë¤ì´ì´ë¦¬</title> 26 27 <!-- Preconnect for performance --> 28 <link rel="preconnect" href="https://fonts.googleapis.com"> 29 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 30 <link rel="preconnect" href="https://openrouter.ai"> 31 32 <!-- Fonts --> 33 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet"> 34 35 <!-- Styles --> 36 <link rel="stylesheet" href="styles.css"> 37</head> 38<body> 39 <div class="container"> 40 <!-- Header Section --> 41 <header class="header"> 42 <div class="header-top"> 43 <div class="header-title-group"> 44 <h1 class="app-title"> 45 <span class="title-icon">ð</span> 46 ê³µê° AI ë¤ì´ì´ë¦¬ 47 </h1> 48 <p class="app-subtitle">ë¹ì ì ë§ìì ë°ë»íê² ì´í´íë ì¼ê¸°ì¥</p> 49 </div> 50 <button id="settingsBtn" class="btn-settings" aria-label="ì¤ì " title="API í¤ ì¤ì "> 51 âï¸ 52 </button> 53 </div> 54 </header> 55 56 <!-- API Key Settings Modal --> 57 <div id="settingsModal" class="modal hidden" role="dialog" aria-labelledby="settings-title" aria-modal="true"> 58 <div class="modal-content settings-modal"> 59 <div class="modal-header"> 60 <h3 id="settings-title" class="modal-title">âï¸ API í¤ ì¤ì </h3> 61 <button id="closeSettingsBtn" class="btn-close" aria-label="ë«ê¸°">â</button> 62 </div> 63 <div class="modal-body"> 64 <div class="settings-info"> 65 <p>â¹ï¸ ì´ ì±ì ìë²ìì API를 ê´ë¦¬íë¯ë¡ ë³ëì API í¤ ì¤ì ì´ íìíì§ ììµëë¤.</p> 66 <p class="settings-help-secondary"> 67 ð¡ ë¡ì»¬ ê°ë°ì´ë ìì ì API í¤ë¥¼ ì¬ì©íë ¤ë©´ ìëì ì ë ¥íì¸ì. 68 </p> 69 </div> 70 <div class="form-group"> 71 <label for="apiKeyInput" class="form-label">API í¤</label> 72 <input 73 type="password" 74 id="apiKeyInput" 75 class="form-input" 76 placeholder="sk-or-v1-..." 77 aria-describedby="api-key-help" 78 /> 79 <small id="api-key-help" class="form-help"> 80 API í¤ë ë¸ë¼ì°ì ìë§ ì ì¥ëë©° ì¸ë¶ë¡ ì ì¡ëì§ ììµëë¤. 81 </small> 82 </div> 83 <div id="apiKeyStatus" class="api-status hidden"></div> 84 </div> 85 <div class="modal-actions"> 86 <button id="saveApiKeyBtn" class="btn btn-primary">
87 <span class="btn-icon">ð¾</span> 88 ì ì¥ 89 </button> 90 <button id="cancelSettingsBtn" class="btn btn-secondary"> 91 ì·¨ì 92 </button> 93 </div> 94 </div> 95 <div class="modal-backdrop"></div> 96 </div> 97 98 <!-- Main Content --> 99 <main class="main-content"> 100 <!-- Today's Date --> 101 <div class="date-section"> 102 <div class="today-date" id="todayDate"></div> 103 </div> 104 105 <!-- Diary Input Section --> 106 <section class="diary-input-section"> 107 <div class="input-container"> 108 <label for="diaryInput" class="input-label"> 109 <span class="label-icon">âï¸</span> 110 ì¤ë í루ë ì´ë ì ¨ëì? 111 </label> 112 <textarea 113 id="diaryInput" 114 class="diary-input" 115 placeholder="ë§ì ì ì´ì¼ê¸°ë¥¼ ìì ë¡ê² ì ì´ë³´ì¸ì..." 116 rows="3" 117 aria-describedby="input-help" 118 aria-label="ì¼ê¸° ë´ì© ì ë ¥" 119 ></textarea> 120 <div id="input-help" class="visually-hidden"> 121 Ctrl+Enter를 ë르면 ê°ì ë¶ìì ììí©ëë¤ 122 </div> 123 <div class="input-actions"> 124 <button id="analyzeBtn" class="btn btn-primary" aria-describedby="analyze-help"> 125 <span class="btn-icon" aria-hidden="true">ð</span> 126 ê°ì ë¶ìí기 127 </button> 128 <div id="analyze-help" class="visually-hidden"> 129 ì¼ê¸° ë´ì©ì AIê° ë¶ìíì¬ ê°ì ì íì íê³ ê³µê° ë©ìì§ë¥¼ ì ê³µí©ëë¤ 130 </div> 131 </div> 132 </div> 133 </section> 134 135 <!-- Analysis Loading --> 136 <div id="loadingSection" class="loading-section hidden" role="status" aria-live="polite"> 137 <div class="loading-spinner" aria-hidden="true"></div> 138 <p class="loading-text">ë§ìì ë¶ìíë ì¤...</p> 139 </div> 140 141 <!-- Analysis Result Section --> 142 <section id="analysisResult" class="analysis-result hidden" role="region" aria-labelledby="result-title" aria-live="polite"> 143 <div class="result-container"> 144 <h3 id="result-title" class="result-title">ê°ì ë¶ì ê²°ê³¼</h3> 145 146 <div class="emotion-display"> 147 <div class="emotion-icon-container"> 148 <span id="emotionIcon" class="emotion-icon"></span> 149 </div> 150 <div class="emotion-info"> 151 <div id="emotionName" class="emotion-name"></div> 152 <div class="emotion-intensity"> 153 <span class="intensity-label">ê°ì ê°ë:</span> 154 <div class="intensity-bar"> 155 <div id="intensityFill" class="intensity-fill"></div> 156 </div> 157 <span id="intensityValue" class="intensity-value"></span> 158 </div> 159 </div> 160 </div> 161 162 <div class="empathy-message-container"> 163 <h4 class="empathy-title"> 164 <span class="empathy-icon">ð</span> 165 ê³µê° ë©ìì§ 166 </h4> 167 <div id="empathyMessage" class="empathy-message"></div> 168 </div> 169 170 <div class="result-actions"> 171 <button id="saveBtn" class="btn btn-secondary" aria-describedby="save-help">
172 <span class="btn-icon" aria-hidden="true">ð¾</span> 173 ì¼ê¸° ì ì¥í기 174 </button> 175 <div id="save-help" class="visually-hidden"> 176 ë¶ì ê²°ê³¼ì í¨ê» ì¼ê¸°ë¥¼ ë¸ë¼ì°ì ì ì ì¥í©ëë¤ 177 </div> 178 </div> 179 </div> 180 </section> 181 </main> 182 183 <!-- Diary List Section --> 184 <section class="diary-list-section"> 185 <div class="list-header"> 186 <h2 id="list-title" class="list-title"> 187 <span class="title-icon" aria-hidden="true">ð</span> 188 ì§ë ì¼ê¸°ë¤ 189 </h2> 190 <button id="toggleListBtn" class="btn btn-text" aria-expanded="false" aria-controls="diaryList"> 191 <span id="toggleIcon" aria-hidden="true">ð</span> 192 <span id="toggleText">í¼ì¹ê¸°</span> 193 </button> 194 </div> 195 196 <div id="diaryList" class="diary-list hidden" role="region" aria-labelledby="list-title"> 197 <div id="diaryListContent" class="diary-list-content"> 198 <!-- Diary entries will be inserted here --> 199 </div> 200 <div id="emptyState" class="empty-state"> 201 <span class="empty-icon">ð</span> 202 <p class="empty-text">ìì§ ì ì¥ë ì¼ê¸°ê° ìì´ì.<br>첫 ë²ì§¸ ì¼ê¸°ë¥¼ ìì±í´ë³´ì¸ì!</p> 203 </div> 204 </div> 205 </section> 206 207 <!-- Footer --> 208 <footer class="footer"> 209 <p class="footer-text">ë¹ì ì 모ë ê°ì ì´ ìì¤í©ëë¤ â¨</p> 210 <div style="margin-top: 20px; padding: 20px; background: rgba(255, 255, 255, 0.95); border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.3);"> 211 <p style="margin: 0 0 12px 0; text-align: center; font-size: 0.9em; color: #333; line-height: 1.6;"> 212 ð¡ <strong>7ì¥</strong>ìì ë§ë ê³µê° AI ë¤ì´ì´ë¦¬ì<br> 213 <strong>8ì¥ì Vercel ë°°í¬í¸</strong>ì ìì©í´ ì ìíììµëë¤. 214 </p> 215 <div style="text-align: center; margin-top: 15px;"> 216 <a href="https://github.com/taehojo/vibecoding" target="_blank" style="display: inline-block; padding: 10px 20px; background: #667eea; color: white; text-decoration: none; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.2);"> 217 ð GitHub ì ì¥ìë¡ ëìê°ê¸° 218 </a> 219 </div> 220 </div> 221 </footer> 222 </div> 223 224 <!-- Confirmation Modal --> 225 <div id="confirmModal" class="modal hidden" role="dialog" aria-labelledby="modal-title" aria-modal="true"> 226 <div class="modal-content"> 227 <div class="modal-header"> 228 <h3 id="modal-title" class="modal-title">ì¼ê¸° ìì </h3> 229 </div> 230 <div class="modal-body"> 231 <p>ì ë§ë¡ ì´ ì¼ê¸°ë¥¼ ìì íìê² ì´ì?</p> 232 <p class="modal-warning">ìì ë ì¼ê¸°ë 복구í ì ììµëë¤.</p> 233 </div> 234 <div class="modal-actions"> 235 <button id="confirmDeleteBtn" class="btn btn-danger" aria-describedby="modal-title"> 236 ìì 237 </button> 238 <button id="cancelDeleteBtn" class="btn btn-secondary" aria-describedby="modal-title"> 239 ì·¨ì 240 </button> 241 </div> 242 </div> 243 <div class="modal-backdrop"></div> 244 </div> 245 246 <!-- Success Toast --> 247 <div id="successToast" class="toast hidden"> 248 <span class="toast-icon">â </span> 249 <span class="toast-message"></span> 250 </div> 251 252 <!-- Scripts --> 253
253<script src="backend.js"></script>
253 254
254<script src="app.js"></script>
254 255</body> 256</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.