AI Face Match - 궁합 ?�스??/title> <meta name="description" content="AI가 분석?�는 ???�람???�굴 궁합. ?�리??천생?�분?�까?"> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Noto+Serif+KR:wght@300;400;700&display=swap" rel="stylesheet"> <script src="face-api.min.js" defer></script> <script src="locales.js" defer></script> <script src="match.js" defer></script> <style> .match-container { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin: 2rem 0; } .upload-section { flex: 1; min-width: 300px; background: rgba(255, 255, 255, 0.05); padding: 1.5rem; border-radius: 15px; border: 1px solid rgba(212, 175, 55, 0.3); text-align: center; } .preview-box { width: 100%; height: 300px; border: 2px dashed rgba(212, 175, 55, 0.5); border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; cursor: pointer; transition: all 0.3s; } .preview-box:hover { background: rgba(212, 175, 55, 0.1); } .preview-box img { width: 100%; height: 100%; object-fit: contain; /* Changed to contain to show full face */ display: none; } .preview-box.has-image img { display: block; } .preview-box.has-image .placeholder { display: none; } .score-circle { width: 150px; height: 150px; border-radius: 50%; border: 5px solid var(--accent-color); display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: bold; color: var(--accent-color); margin: 0 auto 1.5rem; box-shadow: 0 0 20px var(--accent-glow); } .match-result { text-align: center; margin-top: 3rem; padding: 2rem; background: rgba(0, 0, 0, 0.4); border-radius: 15px; display: none; /* Initially hidden */ } .match-result.visible { display: block; animation: fadeIn 1s; } </style> </head> <body> <div class="stars"></div>  <body class="light-mode"> <div class="stars"></div> <div class="container"> <header> <div class="theme-switch"> <button id="theme-btn" class="theme-btn" onclick="toggleTheme()">?��?/button> </div> <div class="lang-switch"> <button class="lang-btn kr" onclick="changeLanguage('ko')"></button> <button class="lang-btn en" onclick="changeLanguage('en')"></button> <button class="lang-btn jp" onclick="changeLanguage('jp')"></button> <button class="lang-btn cn" onclick="changeLanguage('cn')"></button> </div> <h1 data-i18n="match_title">AI ?�굴 궁합</h1> <p class="subtitle" data-i18n="match_subtitle">???�람???�굴�?보는 ?�명???�결고리</p> </header> <div class="match-container">  <div class="upload-section"> <h3 data-i18n="person_a">A (??</h3> <div class="preview-box" id="preview-a" onclick="document.getElementById('file-a').click()"> <span class="placeholder" data-i18n="click_upload">?�릭?�여 ?�로??/span> <img id="img-a"> </div> <input type="file" id="file-a" hidden accept="image/*"> </div>  <div style="display:flex; align-items:center; font-size: 2rem; color:var(--accent-color); font-weight:bold;"> vs</div>  <div class="upload-section"> <h3 data-i18n="person_b">B (?��?�?</h3> <div class="preview-box" id="preview-b" onclick="document.getElementById('file-b').click()"> <span class="placeholder" data-i18n="click_upload">?�릭?�여 ?�로??/span> <img id="img-b"> </div> <input type="file" id="file-b" hidden accept="image/*"> </div> </div> <div style="text-align: center; margin-top: 2rem;"> <div id="loading-indicator" class="hidden"> <div class="crystal-ball"></div> <p id="loading-text" style="color: var(--accent-color); margin-top: 1rem;">분석 �?..</p> </div> <button id="analyze-btn" class="btn-primary" onclick="analyzeMatch()" data-i18n="btn_analyze">궁합 보기</button> </div> <div id="result-section" class="match-result"> <div class="score-circle" id="score-display">0%</div> <h2 id="match-title" style="color: var(--accent-color); margin-bottom: 1rem;"></h2> <p id="match-desc" style="line-height: 1.6; font-size: 1.1rem;"></p> <div class="action-buttons"> <button class="btn-secondary" id="share-btn" data-i18n="btn_share">결과 공유?�기</button> <button class="btn-primary" onclick="location.reload()" data-i18n="btn_retry">?�시 ?�기</button> <button class="btn-primary" onclick="location.href='index.html'" data-i18n="btn_home">?�으�?/button> </div> <div class="ad-container"> <p>Sponsored</p>  </div> </div> <div style="text-align:center; margin-top:3rem;"> <a href="index.html" style="color:var(--text-color); text-decoration:none; border-bottom:1px solid var(--accent-color);">?? 관?? 보러가�?/a> </div> </div> </body>