https://cafemcr.tistory.com/ 마음속 우주에 오신 걸 환영합니다! 가장 핫한 심리테스트를 만나보세요! 이런 분들께 추천해요! 나의 숨겨진 매력을 알고 싶은 분 시각적으로 예쁜 결과를 원하는 분 친구들과 재미있게 공유하고 싶은 분 ✨ 최신 트렌드 테스트를 경험하고 싶은 분 문의 및 제안은 댓글로 언제든 환영합니다! ko Thu, 25 Jun 2026 02:42:05 +0900 TISTORY 100 마음속 우주 https://tistory1.daumcdn.net/tistory/8073783/attach/939f0af6a3924873bf3f055983bd3942 https://cafemcr.tistory.com https://cafemcr.tistory.com/7 <div id="code_1750510096259" data-ke-type="html" data-source="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;ko&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt; 나와 닮은 Italian Brainrot 캐릭터 찾기&lt;/title&gt; &lt;link href=&quot;https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css&quot; rel=&quot;stylesheet&quot;&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css&quot;&gt; &lt;style&gt; .brainrot-container * { margin: 0; padding: 0; box-sizing: border-box; } .brainrot-container { max-width: 900px; margin: 20px auto; padding: 20px; font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #feca57 100%); border-radius: 25px; box-shadow: 0 25px 50px rgba(0,0,0,0.2); position: relative; overflow: hidden; } .brainrot-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } .brainrot-header { text-align: center; color: white; margin-bottom: 30px; z-index: 2; position: relative; } .brainrot-header h1 { font-size: 36px; margin-bottom: 10px; text-shadow: 3px 3px 6px rgba(0,0,0,0.5); animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .brainrot-header p { font-size: 18px; opacity: 0.95; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .upload-section { background: rgba(255,255,255,0.95); padding: 30px; border-radius: 20px; text-align: center; margin-bottom: 20px; backdrop-filter: blur(10px); border: 3px solid rgba(255,255,255,0.3); position: relative; z-index: 2; } .upload-area { border: 4px dashed #ff6b6b; border-radius: 20px; padding: 50px 30px; margin: 20px 0; cursor: pointer; transition: all 0.3s ease; background: rgba(255,255,255,0.5); } .upload-area:hover { border-color: #4ecdc4; background: rgba(78,205,196,0.1); transform: scale(1.02); } .upload-area.dragover { border-color: #45b7d1; background: rgba(69,183,209,0.2); transform: scale(1.05); } #imageInput { display: none; } .upload-text { color: #ff6b6b; font-size: 20px; font-weight: bold; margin: 15px 0; } .upload-subtext { color: #666; font-size: 16px; } .preview-section { display: none; background: rgba(255,255,255,0.95); padding: 30px; border-radius: 20px; margin: 20px 0; text-align: center; backdrop-filter: blur(10px); position: relative; z-index: 2; } .image-preview { max-width: 250px; max-height: 250px; border-radius: 15px; margin: 15px auto; display: block; border: 3px solid #ff6b6b; } .result-section { display: none; background: rgba(255,255,255,0.95); padding: 40px; border-radius: 20px; text-align: center; backdrop-filter: blur(10px); position: relative; z-index: 2; } .result-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; margin: 30px 0; } .result-image { width: 180px; height: 180px; border-radius: 20px; margin: 0 auto; border: 4px solid #ff6b6b; } .vs-text { background: linear-gradient(135deg, #ff6b6b, #4ecdc4); color: white; padding: 15px; border-radius: 50%; font-weight: bold; font-size: 18px; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .brainrot-info { margin: 30px 0; padding: 25px; background: linear-gradient(135deg, rgba(255,107,107,0.1), rgba(78,205,196,0.1)); border-radius: 20px; border: 2px solid rgba(255,107,107,0.3); } .similarity-score { background: linear-gradient(135deg, #4ecdc4, #45b7d1); color: white; padding: 20px; border-radius: 20px; margin: 25px 0; animation: glow 2s infinite alternate; } @keyframes glow { from { box-shadow: 0 0 20px rgba(78,205,196,0.5); } to { box-shadow: 0 0 30px rgba(78,205,196,0.8); } } .brainrot-canvas { width: 180px; height: 180px; border-radius: 20px; margin: 0 auto; border: 4px solid #4ecdc4; } .btn { background: linear-gradient(135deg, #ff6b6b, #4ecdc4); color: white; border: none; padding: 18px 35px; border-radius: 30px; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin: 15px; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s; } .btn:hover::before { left: 100%; } .btn:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .loading { display: none; text-align: center; padding: 30px; color: #ff6b6b; position: relative; z-index: 2; } .loading-spinner { border: 6px solid rgba(255,107,107,0.3); border-top: 6px solid #ff6b6b; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; margin: 0 auto 15px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .share-buttons { display: flex; justify-content: center; gap: 15px; margin: 25px 0; flex-wrap: wrap; } .share-btn { padding: 12px 25px; border: none; border-radius: 25px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; font-weight: bold; } .share-kakao { background: #FEE500; color: #000; } .share-instagram { background: #E4405F; color: white; } .share-facebook { background: #1877F2; color: white; } .share-twitter { background: #1DA1F2; color: white; } .share-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); } .notification { position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, #4ecdc4, #45b7d1); color: white; padding: 15px 25px; border-radius: 15px; font-weight: bold; box-shadow: 0 10px 20px rgba(0,0,0,0.2); transform: translateX(400px); transition: transform 0.3s ease; z-index: 1000; } .notification.show { transform: translateX(0); } @media (max-width: 768px) { .brainrot-container { margin: 10px; padding: 15px; } .result-comparison { grid-template-columns: 1fr; gap: 20px; } .brainrot-header h1 { font-size: 28px; } .result-image, .brainrot-canvas { width: 150px; height: 150px; } } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;brainrot-container&quot;&gt; &lt;div class=&quot;brainrot-header&quot;&gt; &lt;h1&gt; 나와 닮은 Italian Brainrot 캐릭터 찾기 &lt;/h1&gt; &lt;p&gt;트랄랄레로 트랄랄라! AI가 당신과 닮은 브레인롯 캐릭터를 찾아드려요!&lt;/p&gt; &lt;/div&gt; &lt;!-- 업로드 섹션 --&gt; &lt;div class=&quot;upload-section&quot;&gt; &lt;div class=&quot;upload-area&quot; id=&quot;uploadArea&quot;&gt; &lt;div style=&quot;font-size: 60px; margin-bottom: 15px;&quot;&gt; &lt;/div&gt; &lt;div class=&quot;upload-text&quot;&gt;사진을 업로드하세요&lt;/div&gt; &lt;div class=&quot;upload-subtext&quot;&gt;클릭하거나 드래그해서 사진을 올려주세요&lt;/div&gt; &lt;/div&gt; &lt;input type=&quot;file&quot; id=&quot;imageInput&quot; accept=&quot;image/*&quot;&gt; &lt;button class=&quot;btn&quot; id=&quot;analyzeBtn&quot; disabled&gt;&lt;i class=&quot;fas fa-brain&quot;&gt;&lt;/i&gt; 브레인롯 분석 시작하기&lt;/button&gt; &lt;/div&gt; &lt;!-- 미리보기 섹션 --&gt; &lt;div class=&quot;preview-section&quot; id=&quot;previewSection&quot;&gt; &lt;h3 style=&quot;color: #ff6b6b; margin-bottom: 20px;&quot;&gt;&lt;i class=&quot;fas fa-image&quot;&gt;&lt;/i&gt; 업로드된 사진&lt;/h3&gt; &lt;img id=&quot;imagePreview&quot; class=&quot;image-preview&quot; alt=&quot;미리보기&quot;&gt; &lt;/div&gt; &lt;!-- 로딩 섹션 --&gt; &lt;div class=&quot;loading&quot; id=&quot;loadingSection&quot;&gt; &lt;div class=&quot;loading-spinner&quot;&gt;&lt;/div&gt; &lt;p style=&quot;font-size: 18px; font-weight: bold;&quot;&gt; 브레인롯 AI가 열심히 분석 중이에요... &lt;/p&gt; &lt;p style=&quot;margin-top: 10px;&quot;&gt;트랄랄레로 트랄랄라...&lt;/p&gt; &lt;/div&gt; &lt;!-- 결과 섹션 --&gt; &lt;div class=&quot;result-section&quot; id=&quot;resultSection&quot;&gt; &lt;h2 style=&quot;color: #ff6b6b; margin-bottom: 25px;&quot;&gt;&lt;i class=&quot;fas fa-trophy&quot;&gt;&lt;/i&gt; 브레인롯 분석 완료!&lt;/h2&gt; &lt;div class=&quot;result-comparison&quot;&gt; &lt;div&gt; &lt;img id=&quot;userImage&quot; class=&quot;result-image&quot; alt=&quot;당신의 사진&quot;&gt; &lt;h4 style=&quot;margin-top: 15px; color: #333;&quot;&gt;당신&lt;/h4&gt; &lt;/div&gt; &lt;div class=&quot;vs-text&quot;&gt;VS&lt;/div&gt; &lt;div&gt; &lt;canvas id=&quot;brainrotCanvas&quot; class=&quot;brainrot-canvas&quot; width=&quot;180&quot; height=&quot;180&quot;&gt;&lt;/canvas&gt; &lt;h4 style=&quot;margin-top: 15px; color: #333;&quot; id=&quot;brainrotName&quot;&gt;브레인롯 캐릭터&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;similarity-score&quot;&gt; &lt;h3&gt;&lt;i class=&quot;fas fa-percent&quot;&gt;&lt;/i&gt; 브레인롯 유사도&lt;/h3&gt; &lt;div style=&quot;font-size: 36px; font-weight: bold; margin-top: 10px;&quot; id=&quot;similarityPercent&quot;&gt;0%&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;brainrot-info&quot;&gt; &lt;h4 id=&quot;brainrotInfoTitle&quot; style=&quot;color: #ff6b6b; margin-bottom: 15px;&quot;&gt;브레인롯 캐릭터 정보&lt;/h4&gt; &lt;div id=&quot;brainrotInfoText&quot; style=&quot;color: #333; line-height: 1.6;&quot;&gt;AI 분석 결과가 여기에 표시됩니다.&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;share-buttons&quot;&gt; &lt;button class=&quot;share-btn share-kakao&quot; id=&quot;shareKakao&quot;&gt;&lt;i class=&quot;fas fa-comment&quot;&gt;&lt;/i&gt; 카카오톡&lt;/button&gt; &lt;button class=&quot;share-btn share-instagram&quot; id=&quot;shareInstagram&quot;&gt;&lt;i class=&quot;fab fa-instagram&quot;&gt;&lt;/i&gt; 인스타그램&lt;/button&gt; &lt;button class=&quot;share-btn share-facebook&quot; id=&quot;shareFacebook&quot;&gt;&lt;i class=&quot;fab fa-facebook&quot;&gt;&lt;/i&gt; 페이스북&lt;/button&gt; &lt;button class=&quot;share-btn share-twitter&quot; id=&quot;shareTwitter&quot;&gt;&lt;i class=&quot;fab fa-twitter&quot;&gt;&lt;/i&gt; X&lt;/button&gt; &lt;/div&gt; &lt;button class=&quot;btn&quot; id=&quot;resetBtn&quot;&gt;&lt;i class=&quot;fas fa-redo&quot;&gt;&lt;/i&gt; 다시 테스트하기&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;notification&quot; id=&quot;notification&quot;&gt;&lt;/div&gt; &lt;script&gt; // Italian Brainrot 캐릭터 데이터베이스 const brainrotCharacters = [ { name: &quot;트랄랄레로 트랄랄라&quot;, englishName: &quot;Tralalero Tralala&quot;, type: &quot;상어&quot;, description: &quot;Italian Brainrot의 전설적인 시초! 나이키 운동화를 신고 해변에서 춤추는 3개 다리 상어&quot;, personality: &quot;자유롭고 춤을 좋아하는 성격&quot;, ability: &quot;트랄랄레로 댄스로 모든 것을 해결&quot;, fun_fact: &quot;브레인롯 세계관의 아버지 격&quot;, brainrot_level: &quot;⭐⭐⭐⭐⭐&quot;, color: &quot;#ff6b6b&quot; }, { name: &quot;퉁퉁퉁 사후르&quot;, englishName: &quot;Tung Tung Tung Sahur&quot;, type: &quot;나무&quot;, description: &quot;야구방망이를 든 나무 캐릭터! 브레인롯 세계관 최강의 전사&quot;, personality: &quot;강하고 의지가 굳은 전사 타입&quot;, ability: &quot;퉁퉁퉁 소리와 함께 적을 제압&quot;, fun_fact: &quot;이슬람 문화의 영향을 받은 캐릭터&quot;, brainrot_level: &quot;⭐⭐⭐⭐⭐&quot;, color: &quot;#4ecdc4&quot; }, { name: &quot;리릴리 라릴라&quot;, englishName: &quot;Lirili Larila&quot;, type: &quot;코끼리+선인장&quot;, description: &quot;코끼리와 선인장이 합쳐진 귀여운 캐릭터! 사기급 능력의 소유자&quot;, personality: &quot;순수하지만 강력한 힘을 가진 캐릭터&quot;, ability: &quot;리릴리 라릴라 주문으로 현실 조작&quot;, fun_fact: &quot;겉보기와 달리 최강급 능력자&quot;, brainrot_level: &quot;⭐⭐⭐⭐⭐&quot;, color: &quot;#45b7d1&quot; }, { name: &quot;붐바르딜로 크로커딜로&quot;, englishName: &quot;Bombardiro Crocodillo&quot;, type: &quot;폭격기+악어&quot;, description: &quot;폭격기와 악어가 합쳐진 전투형 캐릭터! 하늘에서 폭격 공격&quot;, personality: &quot;공격적이고 전투를 즐기는 타입&quot;, ability: &quot;공중 폭격과 악어의 강력한 턱&quot;, fun_fact: &quot;트랄랄레로 다음으로 유명한 캐릭터&quot;, brainrot_level: &quot;⭐⭐⭐⭐&quot;, color: &quot;#96ceb4&quot; }, { name: &quot;브르르 브르르 파타핌&quot;, englishName: &quot;Brr Brr Patapim&quot;, type: &quot;신비 생물&quot;, description: &quot;브르르 소리와 함께 등장하는 신비한 캐릭터! 최근 대유행&quot;, personality: &quot;차갑고 냉정하지만 매력적&quot;, ability: &quot;브르르 진동으로 적을 얼림&quot;, fun_fact: &quot;죽어가던 밈을 되살린 구원자&quot;, brainrot_level: &quot;⭐⭐⭐⭐⭐&quot;, color: &quot;#feca57&quot; }, { name: &quot;카푸치노 아사시노&quot;, englishName: &quot;Cappuccino Assassino&quot;, type: &quot;커피+암살자&quot;, description: &quot;카푸치노와 암살자가 합쳐진 세련된 캐릭터! 우아한 전투 스타일&quot;, personality: &quot;세련되고 냉철한 암살자&quot;, ability: &quot;카푸치노 폼으로 적을 기절시킴&quot;, fun_fact: &quot;이탈리아 커피 문화의 대표&quot;, brainrot_level: &quot;⭐⭐⭐⭐&quot;, color: &quot;#8b4513&quot; }, { name: &quot;바나니니 스피드&quot;, englishName: &quot;Bananini Speed&quot;, type: &quot;바나나+스피드&quot;, description: &quot;바나나 모양의 초고속 캐릭터! 번개처럼 빠른 이동&quot;, personality: &quot;활발하고 에너지 넘치는 성격&quot;, ability: &quot;바나나 스피드로 순간이동&quot;, fun_fact: &quot;가장 빠른 브레인롯 캐릭터&quot;, brainrot_level: &quot;⭐⭐⭐&quot;, color: &quot;#ffeb3b&quot; }, { name: &quot;피자로니 마피아&quot;, englishName: &quot;Pizzaroni Mafia&quot;, type: &quot;피자+마피아&quot;, description: &quot;피자와 마피아가 합쳐진 이탈리아 대표 캐릭터! 정통 이탈리아 스타일&quot;, personality: &quot;의리 있고 가족을 소중히 여김&quot;, ability: &quot;피자 도우로 적을 포박&quot;, fun_fact: &quot;가장 이탈리아다운 캐릭터&quot;, brainrot_level: &quot;⭐⭐⭐⭐&quot;, color: &quot;#ff5722&quot; }, { name: &quot;젤라또 프레도&quot;, englishName: &quot;Gelato Fredo&quot;, type: &quot;젤라또+얼음&quot;, description: &quot;젤라또와 얼음의 차가운 조합! 더위를 식혀주는 힐링 캐릭터&quot;, personality: &quot;차분하고 시원한 성격&quot;, ability: &quot;젤라또 아이스로 힐링 제공&quot;, fun_fact: &quot;여름철 인기 최고 캐릭터&quot;, brainrot_level: &quot;⭐⭐⭐&quot;, color: &quot;#00bcd4&quot; }, { name: &quot;스파게티 트위스터&quot;, englishName: &quot;Spaghetti Twister&quot;, type: &quot;스파게티+회오리&quot;, description: &quot;스파게티가 회오리치는 역동적인 캐릭터! 파스타의 힘으로 모든 것을 해결&quot;, personality: &quot;역동적이고 유연한 사고방식&quot;, ability: &quot;스파게티 회오리로 적을 휘감음&quot;, fun_fact: &quot;가장 이탈리아 음식다운 캐릭터&quot;, brainrot_level: &quot;⭐⭐⭐⭐&quot;, color: &quot;#ffc107&quot; } ]; let uploadedImage = null; let analysisResult = null; // DOM 로드 후 이벤트 리스너 등록 document.addEventListener('DOMContentLoaded', function() { // 업로드 영역 클릭 이벤트 document.getElementById('uploadArea').addEventListener('click', function(e) { e.preventDefault(); document.getElementById('imageInput').click(); }); // 파일 선택 이벤트 document.getElementById('imageInput').addEventListener('change', handleImageUpload); // 드래그 앤 드롭 이벤트 const uploadArea = document.getElementById('uploadArea'); uploadArea.addEventListener('dragover', handleDragOver); uploadArea.addEventListener('dragleave', handleDragLeave); uploadArea.addEventListener('drop', handleDrop); // 분석 버튼 이벤트 document.getElementById('analyzeBtn').addEventListener('click', startAnalysis); // 공유 버튼 이벤트 document.getElementById('shareKakao').addEventListener('click', shareToKakao); document.getElementById('shareInstagram').addEventListener('click', shareToInstagram); document.getElementById('shareFacebook').addEventListener('click', shareToFacebook); document.getElementById('shareTwitter').addEventListener('click', shareToTwitter); // 리셋 버튼 이벤트 document.getElementById('resetBtn').addEventListener('click', resetTest); }); function handleDragOver(e) { e.preventDefault(); e.currentTarget.classList.add('dragover'); } function handleDragLeave(e) { e.preventDefault(); e.currentTarget.classList.remove('dragover'); } function handleDrop(e) { e.preventDefault(); e.currentTarget.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file &amp;&amp; file.type.startsWith('image/')) { processImageFile(file); } } function handleImageUpload(e) { const file = e.target.files[0]; if (file) { processImageFile(file); } } function processImageFile(file) { const reader = new FileReader(); reader.onload = function(e) { uploadedImage = e.target.result; // 미리보기 표시 const previewImg = document.getElementById('imagePreview'); previewImg.src = uploadedImage; document.getElementById('previewSection').style.display = 'block'; // 분석 버튼 활성화 document.getElementById('analyzeBtn').disabled = false; // 업로드 텍스트 변경 document.querySelector('.upload-text').textContent = '✅ 사진 업로드 완료!'; }; reader.readAsDataURL(file); } function startAnalysis() { if (!uploadedImage) return; // 로딩 섹션으로 스크롤 document.getElementById('loadingSection').style.display = 'block'; document.getElementById('resultSection').style.display = 'none'; document.getElementById('loadingSection').scrollIntoView({ behavior: 'smooth' }); showNotification(' 브레인롯 분석을 시작합니다!'); // 3초 후 결과 표시 setTimeout(() =&gt; { performAnalysis(); }, 3000); } function performAnalysis() { // 랜덤하게 브레인롯 캐릭터 선택 const selectedCharacter = brainrotCharacters[Math.floor(Math.random() * brainrotCharacters.length)]; // 유사도 랜덤 생성 (70-95%) const similarity = Math.floor(Math.random() * 26) + 70; analysisResult = { character: selectedCharacter, similarity: similarity }; displayResult(); } function displayResult() { // 로딩 숨기기 document.getElementById('loadingSection').style.display = 'none'; // 사용자 이미지 표시 document.getElementById('userImage').src = uploadedImage; // 브레인롯 캐릭터 정보 표시 const character = analysisResult.character; document.getElementById('brainrotName').textContent = character.name; document.getElementById('similarityPercent').textContent = analysisResult.similarity + '%'; document.getElementById('brainrotInfoTitle').textContent = &#96;${character.name} (${character.englishName})&#96;; // 상세 정보 HTML 생성 const infoHTML = &#96; &lt;div style=&quot;text-align: left; margin-top: 15px;&quot;&gt; &lt;p&gt;&lt;strong&gt; 캐릭터 타입:&lt;/strong&gt; ${character.type}&lt;/p&gt; &lt;p style=&quot;margin-top: 10px;&quot;&gt;&lt;strong&gt; 설명:&lt;/strong&gt; ${character.description}&lt;/p&gt; &lt;p style=&quot;margin-top: 10px;&quot;&gt;&lt;strong&gt; 성격:&lt;/strong&gt; ${character.personality}&lt;/p&gt; &lt;p style=&quot;margin-top: 10px;&quot;&gt;&lt;strong&gt;⚡ 특수 능력:&lt;/strong&gt; ${character.ability}&lt;/p&gt; &lt;p style=&quot;margin-top: 10px;&quot;&gt;&lt;strong&gt; 브레인롯 레벨:&lt;/strong&gt; ${character.brainrot_level}&lt;/p&gt; &lt;p style=&quot;margin-top: 10px;&quot;&gt;&lt;strong&gt; 재미있는 사실:&lt;/strong&gt; ${character.fun_fact}&lt;/p&gt; &lt;/div&gt; &#96;; document.getElementById('brainrotInfoText').innerHTML = infoHTML; // 브레인롯 캐릭터 그리기 drawBrainrotCharacter(character); // 결과 섹션 표시 및 스크롤 document.getElementById('resultSection').style.display = 'block'; document.getElementById('resultSection').scrollIntoView({ behavior: 'smooth' }); showNotification(' 브레인롯 분석이 완료되었습니다!'); } function drawBrainrotCharacter(character) { const canvas = document.getElementById('brainrotCanvas'); const ctx = canvas.getContext('2d'); // 캔버스 초기화 ctx.clearRect(0, 0, 180, 180); // 배경 그라데이션 const gradient = ctx.createRadialGradient(90, 90, 0, 90, 90, 90); gradient.addColorStop(0, character.color); gradient.addColorStop(1, character.color + '50'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 180, 180); // 캐릭터 기본 형태 그리기 ctx.fillStyle = character.color; ctx.strokeStyle = '#fff'; ctx.lineWidth = 3; // 메인 몸체 (원형) ctx.beginPath(); ctx.arc(90, 90, 60, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); // 눈 그리기 ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(75, 75, 12, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(105, 75, 12, 0, 2 * Math.PI); ctx.fill(); // 눈동자 ctx.fillStyle = '#333'; ctx.beginPath(); ctx.arc(75, 75, 6, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(105, 75, 6, 0, 2 * Math.PI); ctx.fill(); // 입 그리기 ctx.strokeStyle = '#333'; ctx.lineWidth = 4; ctx.beginPath(); ctx.arc(90, 100, 20, 0, Math.PI); ctx.stroke(); // 캐릭터별 특별한 특징 추가 if (character.name.includes('트랄랄레로')) { // 상어 지느러미 그리기 ctx.fillStyle = character.color; ctx.beginPath(); ctx.moveTo(90, 30); ctx.lineTo(75, 10); ctx.lineTo(105, 10); ctx.closePath(); ctx.fill(); ctx.stroke(); } else if (character.name.includes('사후르')) { // 나무 가지 그리기 ctx.strokeStyle = '#8b4513'; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(90, 30); ctx.lineTo(90, 10); ctx.moveTo(85, 20); ctx.lineTo(75, 15); ctx.moveTo(95, 20); ctx.lineTo(105, 15); ctx.stroke(); } else if (character.name.includes('리릴리')) { // 코끼리 코 그리기 ctx.strokeStyle = character.color; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(90, 120); ctx.bezierCurveTo(80, 140, 100, 160, 90, 170); ctx.stroke(); } // 이름 표시 ctx.fillStyle = '#fff'; ctx.font = 'bold 12px Arial'; ctx.textAlign = 'center'; ctx.fillText(character.name, 90, 165); } // 공유 기능들 function shareToKakao() { if (!analysisResult) return; const text = &#96; 나는 ${analysisResult.character.name}와 ${analysisResult.similarity}% 닮았어요!\n\n${analysisResult.character.description}\n\n트랄랄레로 트랄랄라! 여러분도 브레인롯 테스트 해보세요!&#96;; if (navigator.share) { navigator.share({ title: 'Italian Brainrot 캐릭터 테스트 결과', text: text }); } else { copyToClipboard(text); showNotification(' 카카오톡 공유 텍스트가 복사되었습니다!'); } } function shareToInstagram() { if (!analysisResult) return; const text = &#96; 나는 ${analysisResult.character.name}와 ${analysisResult.similarity}% 닮았어요!\n\n#브레인롯 #ItalianBrainrot #트랄랄레로트랄랄라 #${analysisResult.character.name} #밈테스트 #브레인롯테스트&#96;; copyToClipboard(text); showNotification(' 인스타그램 스토리용 텍스트가 복사되었습니다!'); } function shareToFacebook() { if (!analysisResult) return; const text = &#96;나와 닮은 Italian Brainrot 캐릭터: ${analysisResult.character.name} ${analysisResult.similarity}%! \n\n${analysisResult.character.description}\n\n여러분도 해보세요!&#96;; const url = &#96;https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&amp;quote=${encodeURIComponent(text)}&#96;; window.open(url, '_blank', 'width=600,height=400'); } function shareToTwitter() { if (!analysisResult) return; const text = &#96; 나는 ${analysisResult.character.name}와 ${analysisResult.similarity}% 닮았어요! 트랄랄레로 트랄랄라! #브레인롯 #ItalianBrainrot&#96;; const url = &#96;https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&amp;url=${encodeURIComponent(window.location.href)}&#96;; window.open(url, '_blank', 'width=600,height=400'); } function copyToClipboard(text) { if (navigator.clipboard &amp;&amp; navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function() { console.log('텍스트가 클립보드에 복사되었습니다.'); }).catch(function(err) { console.error('클립보드 복사 실패:', err); fallbackCopyTextToClipboard(text); }); } else { fallbackCopyTextToClipboard(text); } } function fallbackCopyTextToClipboard(text) { const textArea = document.createElement(&quot;textarea&quot;); textArea.value = text; textArea.style.position = &quot;fixed&quot;; textArea.style.left = &quot;-999999px&quot;; textArea.style.top = &quot;-999999px&quot;; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); console.log('Fallback: 텍스트가 클립보드에 복사되었습니다.'); } catch (err) { console.error('Fallback: 클립보드 복사 실패', err); } document.body.removeChild(textArea); } function resetTest() { // 모든 데이터 초기화 uploadedImage = null; analysisResult = null; // UI 요소들 초기 상태로 복원 document.getElementById('previewSection').style.display = 'none'; document.getElementById('loadingSection').style.display = 'none'; document.getElementById('resultSection').style.display = 'none'; document.getElementById('analyzeBtn').disabled = true; document.getElementById('imageInput').value = ''; document.getElementById('imagePreview').src = ''; // 업로드 텍스트 복원 document.querySelector('.upload-text').textContent = '사진을 업로드하세요'; // 맨 위로 스크롤 document.querySelector('.brainrot-container').scrollIntoView({ behavior: 'smooth' }); showNotification(' 테스트가 초기화되었습니다!'); } function showNotification(message) { const notification = document.getElementById('notification'); notification.textContent = message; notification.classList.add('show'); setTimeout(() =&gt; { notification.classList.remove('show'); }, 3000); } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;"> <style> .brainrot-container * { margin: 0; padding: 0; box-sizing: border-box; } .brainrot-container { max-width: 900px; margin: 20px auto; padding: 20px; font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 25%, #45b7d1 50%, #96ceb4 75%, #feca57 100%); border-radius: 25px; box-shadow: 0 25px 50px rgba(0,0,0,0.2); position: relative; overflow: hidden; } .brainrot-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent); animation: shimmer 3s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); } 100% { transform: translateX(100%) translateY(100%) rotate(45deg); } } .brainrot-header { text-align: center; color: white; margin-bottom: 30px; z-index: 2; position: relative; } .brainrot-header h1 { font-size: 36px; margin-bottom: 10px; text-shadow: 3px 3px 6px rgba(0,0,0,0.5); animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .brainrot-header p { font-size: 18px; opacity: 0.95; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .upload-section { background: rgba(255,255,255,0.95); padding: 30px; border-radius: 20px; text-align: center; margin-bottom: 20px; backdrop-filter: blur(10px); border: 3px solid rgba(255,255,255,0.3); position: relative; z-index: 2; } .upload-area { border: 4px dashed #ff6b6b; border-radius: 20px; padding: 50px 30px; margin: 20px 0; cursor: pointer; transition: all 0.3s ease; background: rgba(255,255,255,0.5); } .upload-area:hover { border-color: #4ecdc4; background: rgba(78,205,196,0.1); transform: scale(1.02); } .upload-area.dragover { border-color: #45b7d1; background: rgba(69,183,209,0.2); transform: scale(1.05); } #imageInput { display: none; } .upload-text { color: #ff6b6b; font-size: 20px; font-weight: bold; margin: 15px 0; } .upload-subtext { color: #666; font-size: 16px; } .preview-section { display: none; background: rgba(255,255,255,0.95); padding: 30px; border-radius: 20px; margin: 20px 0; text-align: center; backdrop-filter: blur(10px); position: relative; z-index: 2; } .image-preview { max-width: 250px; max-height: 250px; border-radius: 15px; margin: 15px auto; display: block; border: 3px solid #ff6b6b; } .result-section { display: none; background: rgba(255,255,255,0.95); padding: 40px; border-radius: 20px; text-align: center; backdrop-filter: blur(10px); position: relative; z-index: 2; } .result-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: center; margin: 30px 0; } .result-image { width: 180px; height: 180px; border-radius: 20px; margin: 0 auto; border: 4px solid #ff6b6b; } .vs-text { background: linear-gradient(135deg, #ff6b6b, #4ecdc4); color: white; padding: 15px; border-radius: 50%; font-weight: bold; font-size: 18px; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .brainrot-info { margin: 30px 0; padding: 25px; background: linear-gradient(135deg, rgba(255,107,107,0.1), rgba(78,205,196,0.1)); border-radius: 20px; border: 2px solid rgba(255,107,107,0.3); } .similarity-score { background: linear-gradient(135deg, #4ecdc4, #45b7d1); color: white; padding: 20px; border-radius: 20px; margin: 25px 0; animation: glow 2s infinite alternate; } @keyframes glow { from { box-shadow: 0 0 20px rgba(78,205,196,0.5); } to { box-shadow: 0 0 30px rgba(78,205,196,0.8); } } .brainrot-canvas { width: 180px; height: 180px; border-radius: 20px; margin: 0 auto; border: 4px solid #4ecdc4; } .btn { background: linear-gradient(135deg, #ff6b6b, #4ecdc4); color: white; border: none; padding: 18px 35px; border-radius: 30px; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin: 15px; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s; } .btn:hover::before { left: 100%; } .btn:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.3); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } .loading { display: none; text-align: center; padding: 30px; color: #ff6b6b; position: relative; z-index: 2; } .loading-spinner { border: 6px solid rgba(255,107,107,0.3); border-top: 6px solid #ff6b6b; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; margin: 0 auto 15px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .share-buttons { display: flex; justify-content: center; gap: 15px; margin: 25px 0; flex-wrap: wrap; } .share-btn { padding: 12px 25px; border: none; border-radius: 25px; font-size: 16px; cursor: pointer; transition: all 0.3s ease; font-weight: bold; } .share-kakao { background: #FEE500; color: #000; } .share-instagram { background: #E4405F; color: white; } .share-facebook { background: #1877F2; color: white; } .share-twitter { background: #1DA1F2; color: white; } .share-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.2); } .notification { position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, #4ecdc4, #45b7d1); color: white; padding: 15px 25px; border-radius: 15px; font-weight: bold; box-shadow: 0 10px 20px rgba(0,0,0,0.2); transform: translateX(400px); transition: transform 0.3s ease; z-index: 1000; } .notification.show { transform: translateX(0); } @media (max-width: 768px) { .brainrot-container { margin: 10px; padding: 15px; } .result-comparison { grid-template-columns: 1fr; gap: 20px; } .brainrot-header h1 { font-size: 28px; } .result-image, .brainrot-canvas { width: 150px; height: 150px; } } </style> <div class="brainrot-container"> <div class="brainrot-header"> <h1> 나와 닮은 Italian Brainrot 캐릭터 찾기 </h1> <p data-ke-size="size16">트랄랄레로 트랄랄라! AI가 당신과 닮은 브레인롯 캐릭터를 찾아드려요!</p> </div> <!-- 업로드 섹션 --> <div class="upload-section"> <div id="uploadArea" class="upload-area"> <div style="font-size: 60px; margin-bottom: 15px;"> </div> <div class="upload-text">사진을 업로드하세요</div> <div class="upload-subtext">클릭하거나 드래그해서 사진을 올려주세요</div> </div> <input id="imageInput" accept="image/*" type="file" /> <button id="analyzeBtn" class="btn" disabled="disabled"><i></i> 브레인롯 분석 시작하기</button></div> <!-- 미리보기 섹션 --> <div id="previewSection" class="preview-section"> <h3 style="color: #ff6b6b; margin-bottom: 20px;" data-ke-size="size23"><i></i> 업로드된 사진</h3> <img id="imagePreview" class="image-preview" alt="미리보기" /></div> <!-- 로딩 섹션 --> <div id="loadingSection" class="loading"> <div class="loading-spinner">&nbsp;</div> <p style="font-size: 18px; font-weight: bold;" data-ke-size="size16"> 브레인롯 AI가 열심히 분석 중이에요... </p> <p style="margin-top: 10px;" data-ke-size="size16">트랄랄레로 트랄랄라...</p> </div> <!-- 결과 섹션 --> <div id="resultSection" class="result-section"> <h2 style="color: #ff6b6b; margin-bottom: 25px;" data-ke-size="size26"><i></i> 브레인롯 분석 완료!</h2> <div class="result-comparison"> <div><img id="userImage" class="result-image" alt="당신의 사진" /> <h4 style="margin-top: 15px; color: #333;" data-ke-size="size20">당신</h4> </div> <div class="vs-text">VS</div> <div><canvas id="brainrotCanvas" class="brainrot-canvas" width="180" height="180"></canvas> <h4 id="brainrotName" style="margin-top: 15px; color: #333;" data-ke-size="size20">브레인롯 캐릭터</h4> </div> </div> <div class="similarity-score"> <h3 data-ke-size="size23"><i></i> 브레인롯 유사도</h3> <div id="similarityPercent" style="font-size: 36px; font-weight: bold; margin-top: 10px;">0%</div> </div> <div class="brainrot-info"> <h4 id="brainrotInfoTitle" style="color: #ff6b6b; margin-bottom: 15px;" data-ke-size="size20">브레인롯 캐릭터 정보</h4> <div id="brainrotInfoText" style="color: #333; line-height: 1.6;">AI 분석 결과가 여기에 표시됩니다.</div> </div> <div class="share-buttons"><button id="shareKakao" class="share-btn share-kakao"><i></i> 카카오톡</button> <button id="shareInstagram" class="share-btn share-instagram"><i></i> 인스타그램</button> <button id="shareFacebook" class="share-btn share-facebook"><i></i> 페이스북</button> <button id="shareTwitter" class="share-btn share-twitter"><i></i> X</button></div> <button id="resetBtn" class="btn"><i></i> 다시 테스트하기</button></div> </div> <div id="notification" class="notification">&nbsp;</div> <script> // Italian Brainrot 캐릭터 데이터베이스 const brainrotCharacters = [ { name: "트랄랄레로 트랄랄라", englishName: "Tralalero Tralala", type: "상어", description: "Italian Brainrot의 전설적인 시초! 나이키 운동화를 신고 해변에서 춤추는 3개 다리 상어", personality: "자유롭고 춤을 좋아하는 성격", ability: "트랄랄레로 댄스로 모든 것을 해결", fun_fact: "브레인롯 세계관의 아버지 격", brainrot_level: "⭐⭐⭐⭐⭐", color: "#ff6b6b" }, { name: "퉁퉁퉁 사후르", englishName: "Tung Tung Tung Sahur", type: "나무", description: "야구방망이를 든 나무 캐릭터! 브레인롯 세계관 최강의 전사", personality: "강하고 의지가 굳은 전사 타입", ability: "퉁퉁퉁 소리와 함께 적을 제압", fun_fact: "이슬람 문화의 영향을 받은 캐릭터", brainrot_level: "⭐⭐⭐⭐⭐", color: "#4ecdc4" }, { name: "리릴리 라릴라", englishName: "Lirili Larila", type: "코끼리+선인장", description: "코끼리와 선인장이 합쳐진 귀여운 캐릭터! 사기급 능력의 소유자", personality: "순수하지만 강력한 힘을 가진 캐릭터", ability: "리릴리 라릴라 주문으로 현실 조작", fun_fact: "겉보기와 달리 최강급 능력자", brainrot_level: "⭐⭐⭐⭐⭐", color: "#45b7d1" }, { name: "붐바르딜로 크로커딜로", englishName: "Bombardiro Crocodillo", type: "폭격기+악어", description: "폭격기와 악어가 합쳐진 전투형 캐릭터! 하늘에서 폭격 공격", personality: "공격적이고 전투를 즐기는 타입", ability: "공중 폭격과 악어의 강력한 턱", fun_fact: "트랄랄레로 다음으로 유명한 캐릭터", brainrot_level: "⭐⭐⭐⭐", color: "#96ceb4" }, { name: "브르르 브르르 파타핌", englishName: "Brr Brr Patapim", type: "신비 생물", description: "브르르 소리와 함께 등장하는 신비한 캐릭터! 최근 대유행", personality: "차갑고 냉정하지만 매력적", ability: "브르르 진동으로 적을 얼림", fun_fact: "죽어가던 밈을 되살린 구원자", brainrot_level: "⭐⭐⭐⭐⭐", color: "#feca57" }, { name: "카푸치노 아사시노", englishName: "Cappuccino Assassino", type: "커피+암살자", description: "카푸치노와 암살자가 합쳐진 세련된 캐릭터! 우아한 전투 스타일", personality: "세련되고 냉철한 암살자", ability: "카푸치노 폼으로 적을 기절시킴", fun_fact: "이탈리아 커피 문화의 대표", brainrot_level: "⭐⭐⭐⭐", color: "#8b4513" }, { name: "바나니니 스피드", englishName: "Bananini Speed", type: "바나나+스피드", description: "바나나 모양의 초고속 캐릭터! 번개처럼 빠른 이동", personality: "활발하고 에너지 넘치는 성격", ability: "바나나 스피드로 순간이동", fun_fact: "가장 빠른 브레인롯 캐릭터", brainrot_level: "⭐⭐⭐", color: "#ffeb3b" }, { name: "피자로니 마피아", englishName: "Pizzaroni Mafia", type: "피자+마피아", description: "피자와 마피아가 합쳐진 이탈리아 대표 캐릭터! 정통 이탈리아 스타일", personality: "의리 있고 가족을 소중히 여김", ability: "피자 도우로 적을 포박", fun_fact: "가장 이탈리아다운 캐릭터", brainrot_level: "⭐⭐⭐⭐", color: "#ff5722" }, { name: "젤라또 프레도", englishName: "Gelato Fredo", type: "젤라또+얼음", description: "젤라또와 얼음의 차가운 조합! 더위를 식혀주는 힐링 캐릭터", personality: "차분하고 시원한 성격", ability: "젤라또 아이스로 힐링 제공", fun_fact: "여름철 인기 최고 캐릭터", brainrot_level: "⭐⭐⭐", color: "#00bcd4" }, { name: "스파게티 트위스터", englishName: "Spaghetti Twister", type: "스파게티+회오리", description: "스파게티가 회오리치는 역동적인 캐릭터! 파스타의 힘으로 모든 것을 해결", personality: "역동적이고 유연한 사고방식", ability: "스파게티 회오리로 적을 휘감음", fun_fact: "가장 이탈리아 음식다운 캐릭터", brainrot_level: "⭐⭐⭐⭐", color: "#ffc107" } ]; let uploadedImage = null; let analysisResult = null; // DOM 로드 후 이벤트 리스너 등록 document.addEventListener('DOMContentLoaded', function() { // 업로드 영역 클릭 이벤트 document.getElementById('uploadArea').addEventListener('click', function(e) { e.preventDefault(); document.getElementById('imageInput').click(); }); // 파일 선택 이벤트 document.getElementById('imageInput').addEventListener('change', handleImageUpload); // 드래그 앤 드롭 이벤트 const uploadArea = document.getElementById('uploadArea'); uploadArea.addEventListener('dragover', handleDragOver); uploadArea.addEventListener('dragleave', handleDragLeave); uploadArea.addEventListener('drop', handleDrop); // 분석 버튼 이벤트 document.getElementById('analyzeBtn').addEventListener('click', startAnalysis); // 공유 버튼 이벤트 document.getElementById('shareKakao').addEventListener('click', shareToKakao); document.getElementById('shareInstagram').addEventListener('click', shareToInstagram); document.getElementById('shareFacebook').addEventListener('click', shareToFacebook); document.getElementById('shareTwitter').addEventListener('click', shareToTwitter); // 리셋 버튼 이벤트 document.getElementById('resetBtn').addEventListener('click', resetTest); }); function handleDragOver(e) { e.preventDefault(); e.currentTarget.classList.add('dragover'); } function handleDragLeave(e) { e.preventDefault(); e.currentTarget.classList.remove('dragover'); } function handleDrop(e) { e.preventDefault(); e.currentTarget.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith('image/')) { processImageFile(file); } } function handleImageUpload(e) { const file = e.target.files[0]; if (file) { processImageFile(file); } } function processImageFile(file) { const reader = new FileReader(); reader.onload = function(e) { uploadedImage = e.target.result; // 미리보기 표시 const previewImg = document.getElementById('imagePreview'); previewImg.src = uploadedImage; document.getElementById('previewSection').style.display = 'block'; // 분석 버튼 활성화 document.getElementById('analyzeBtn').disabled = false; // 업로드 텍스트 변경 document.querySelector('.upload-text').textContent = '✅ 사진 업로드 완료!'; }; reader.readAsDataURL(file); } function startAnalysis() { if (!uploadedImage) return; // 로딩 섹션으로 스크롤 document.getElementById('loadingSection').style.display = 'block'; document.getElementById('resultSection').style.display = 'none'; document.getElementById('loadingSection').scrollIntoView({ behavior: 'smooth' }); showNotification(' 브레인롯 분석을 시작합니다!'); // 3초 후 결과 표시 setTimeout(() => { performAnalysis(); }, 3000); } function performAnalysis() { // 랜덤하게 브레인롯 캐릭터 선택 const selectedCharacter = brainrotCharacters[Math.floor(Math.random() * brainrotCharacters.length)]; // 유사도 랜덤 생성 (70-95%) const similarity = Math.floor(Math.random() * 26) + 70; analysisResult = { character: selectedCharacter, similarity: similarity }; displayResult(); } function displayResult() { // 로딩 숨기기 document.getElementById('loadingSection').style.display = 'none'; // 사용자 이미지 표시 document.getElementById('userImage').src = uploadedImage; // 브레인롯 캐릭터 정보 표시 const character = analysisResult.character; document.getElementById('brainrotName').textContent = character.name; document.getElementById('similarityPercent').textContent = analysisResult.similarity + '%'; document.getElementById('brainrotInfoTitle').textContent = `${character.name} (${character.englishName})`; // 상세 정보 HTML 생성 const infoHTML = ` <div style="text-align: left; margin-top: 15px;"> <p><strong> 캐릭터 타입:</strong> ${character.type}</p> <p style="margin-top: 10px;"><strong> 설명:</strong> ${character.description}</p> <p style="margin-top: 10px;"><strong> 성격:</strong> ${character.personality}</p> <p style="margin-top: 10px;"><strong>⚡ 특수 능력:</strong> ${character.ability}</p> <p style="margin-top: 10px;"><strong> 브레인롯 레벨:</strong> ${character.brainrot_level}</p> <p style="margin-top: 10px;"><strong> 재미있는 사실:</strong> ${character.fun_fact}</p> </div> `; document.getElementById('brainrotInfoText').innerHTML = infoHTML; // 브레인롯 캐릭터 그리기 drawBrainrotCharacter(character); // 결과 섹션 표시 및 스크롤 document.getElementById('resultSection').style.display = 'block'; document.getElementById('resultSection').scrollIntoView({ behavior: 'smooth' }); showNotification(' 브레인롯 분석이 완료되었습니다!'); } function drawBrainrotCharacter(character) { const canvas = document.getElementById('brainrotCanvas'); const ctx = canvas.getContext('2d'); // 캔버스 초기화 ctx.clearRect(0, 0, 180, 180); // 배경 그라데이션 const gradient = ctx.createRadialGradient(90, 90, 0, 90, 90, 90); gradient.addColorStop(0, character.color); gradient.addColorStop(1, character.color + '50'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 180, 180); // 캐릭터 기본 형태 그리기 ctx.fillStyle = character.color; ctx.strokeStyle = '#fff'; ctx.lineWidth = 3; // 메인 몸체 (원형) ctx.beginPath(); ctx.arc(90, 90, 60, 0, 2 * Math.PI); ctx.fill(); ctx.stroke(); // 눈 그리기 ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(75, 75, 12, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(105, 75, 12, 0, 2 * Math.PI); ctx.fill(); // 눈동자 ctx.fillStyle = '#333'; ctx.beginPath(); ctx.arc(75, 75, 6, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(105, 75, 6, 0, 2 * Math.PI); ctx.fill(); // 입 그리기 ctx.strokeStyle = '#333'; ctx.lineWidth = 4; ctx.beginPath(); ctx.arc(90, 100, 20, 0, Math.PI); ctx.stroke(); // 캐릭터별 특별한 특징 추가 if (character.name.includes('트랄랄레로')) { // 상어 지느러미 그리기 ctx.fillStyle = character.color; ctx.beginPath(); ctx.moveTo(90, 30); ctx.lineTo(75, 10); ctx.lineTo(105, 10); ctx.closePath(); ctx.fill(); ctx.stroke(); } else if (character.name.includes('사후르')) { // 나무 가지 그리기 ctx.strokeStyle = '#8b4513'; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(90, 30); ctx.lineTo(90, 10); ctx.moveTo(85, 20); ctx.lineTo(75, 15); ctx.moveTo(95, 20); ctx.lineTo(105, 15); ctx.stroke(); } else if (character.name.includes('리릴리')) { // 코끼리 코 그리기 ctx.strokeStyle = character.color; ctx.lineWidth = 8; ctx.beginPath(); ctx.moveTo(90, 120); ctx.bezierCurveTo(80, 140, 100, 160, 90, 170); ctx.stroke(); } // 이름 표시 ctx.fillStyle = '#fff'; ctx.font = 'bold 12px Arial'; ctx.textAlign = 'center'; ctx.fillText(character.name, 90, 165); } // 공유 기능들 function shareToKakao() { if (!analysisResult) return; const text = ` 나는 ${analysisResult.character.name}와 ${analysisResult.similarity}% 닮았어요!\n\n${analysisResult.character.description}\n\n트랄랄레로 트랄랄라! 여러분도 브레인롯 테스트 해보세요!`; if (navigator.share) { navigator.share({ title: 'Italian Brainrot 캐릭터 테스트 결과', text: text }); } else { copyToClipboard(text); showNotification(' 카카오톡 공유 텍스트가 복사되었습니다!'); } } function shareToInstagram() { if (!analysisResult) return; const text = ` 나는 ${analysisResult.character.name}와 ${analysisResult.similarity}% 닮았어요!\n\n#브레인롯 #ItalianBrainrot #트랄랄레로트랄랄라 #${analysisResult.character.name} #밈테스트 #브레인롯테스트`; copyToClipboard(text); showNotification(' 인스타그램 스토리용 텍스트가 복사되었습니다!'); } function shareToFacebook() { if (!analysisResult) return; const text = `나와 닮은 Italian Brainrot 캐릭터: ${analysisResult.character.name} ${analysisResult.similarity}%! \n\n${analysisResult.character.description}\n\n여러분도 해보세요!`; const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&quote=${encodeURIComponent(text)}`; window.open(url, '_blank', 'width=600,height=400'); } function shareToTwitter() { if (!analysisResult) return; const text = ` 나는 ${analysisResult.character.name}와 ${analysisResult.similarity}% 닮았어요! 트랄랄레로 트랄랄라! #브레인롯 #ItalianBrainrot`; const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(window.location.href)}`; window.open(url, '_blank', 'width=600,height=400'); } function copyToClipboard(text) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function() { console.log('텍스트가 클립보드에 복사되었습니다.'); }).catch(function(err) { console.error('클립보드 복사 실패:', err); fallbackCopyTextToClipboard(text); }); } else { fallbackCopyTextToClipboard(text); } } function fallbackCopyTextToClipboard(text) { const textArea = document.createElement("textarea"); textArea.value = text; textArea.style.position = "fixed"; textArea.style.left = "-999999px"; textArea.style.top = "-999999px"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); console.log('Fallback: 텍스트가 클립보드에 복사되었습니다.'); } catch (err) { console.error('Fallback: 클립보드 복사 실패', err); } document.body.removeChild(textArea); } function resetTest() { // 모든 데이터 초기화 uploadedImage = null; analysisResult = null; // UI 요소들 초기 상태로 복원 document.getElementById('previewSection').style.display = 'none'; document.getElementById('loadingSection').style.display = 'none'; document.getElementById('resultSection').style.display = 'none'; document.getElementById('analyzeBtn').disabled = true; document.getElementById('imageInput').value = ''; document.getElementById('imagePreview').src = ''; // 업로드 텍스트 복원 document.querySelector('.upload-text').textContent = '사진을 업로드하세요'; // 맨 위로 스크롤 document.querySelector('.brainrot-container').scrollIntoView({ behavior: 'smooth' }); showNotification(' 테스트가 초기화되었습니다!'); } function showNotification(message) { const notification = document.getElementById('notification'); notification.textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } </script> </div> <p data-ke-size="size16"><span style="background-color: #ffffff; color: #24292e; text-align: start;">#ItalianBrainrot #트랄랄레로트랄랄라 #브레인롯테스트 #밈테스트 #심리테스트 #퉁퉁퉁사후르 #리릴리라릴라 #재미있는테스트 #바이럴테스트 #브레인롯밈</span></p> 핫한 성격테스트 italianbrainrot 리릴리라릴라 밈테스트 브레인롯테스트 심리테스트 재미있는테스트 퉁퉁퉁사후르 트랄랄레로트랄랄라 마음속 우주 https://cafemcr.tistory.com/7 https://cafemcr.tistory.com/7#entry7comment Sat, 21 Jun 2025 21:59:54 +0900 https://cafemcr.tistory.com/6 <div id="code_1750427841058" data-ke-type="html" data-source="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;ko&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;K-POP 아이돌 닮은꼴 테스트&lt;/title&gt; &lt;style&gt; .kpop-test-container { max-width: 800px; margin: 20px auto; padding: 20px; font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%); border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; } .kpop-test-container * { box-sizing: border-box; } .kpop-test-container .test-header { text-align: center; color: white; margin-bottom: 30px; } .kpop-test-container .test-header h1 { font-size: 32px; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: rainbow 3s ease-in-out infinite; } @keyframes rainbow { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(180deg); } } .kpop-test-container .test-header p { font-size: 18px; opacity: 0.9; color: #333; font-weight: bold; } .kpop-test-container .upload-section { background: white; padding: 30px; border-radius: 15px; text-align: center; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .kpop-test-container .upload-area { border: 3px dashed #ff9a9e; border-radius: 15px; padding: 40px 20px; margin: 20px 0; cursor: pointer; transition: all 0.3s ease; background: linear-gradient(45deg, #fff 0%, #f8f9fa 100%); } .kpop-test-container .upload-area:hover { border-color: #ff6b6b; background: linear-gradient(45deg, #fff5f5 0%, #ffe0e6 100%); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(255, 107, 107, 0.2); } .kpop-test-container .upload-area.dragover { border-color: #4CAF50; background: linear-gradient(45deg, #e8f5e8 0%, #f0fff0 100%); } .kpop-test-container #imageInput { display: none; } .kpop-test-container .upload-text { color: #ff6b6b; font-size: 20px; font-weight: bold; margin: 10px 0; } .kpop-test-container .upload-subtext { color: #666; font-size: 14px; } .kpop-test-container .upload-icon { font-size: 48px; margin-bottom: 15px; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .kpop-test-container .preview-section { display: none; background: white; padding: 30px; border-radius: 15px; margin: 20px 0; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .kpop-test-container .image-preview { max-width: 200px; max-height: 200px; border-radius: 15px; margin: 10px auto; display: block; box-shadow: 0 10px 25px rgba(0,0,0,0.2); } .kpop-test-container .result-section { display: none; background: white; padding: 30px; border-radius: 15px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .kpop-test-container .result-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin: 20px 0; } .kpop-test-container .result-image { width: 150px; height: 150px; border-radius: 15px; margin: 0 auto; object-fit: cover; box-shadow: 0 10px 25px rgba(0,0,0,0.2); } .kpop-test-container .vs-text { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: white; padding: 15px; border-radius: 50%; font-weight: bold; font-size: 18px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } .kpop-test-container .idol-info { margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #f8f9ff 0%, #fff0f8 100%); border-radius: 15px; border-left: 5px solid #ff9a9e; } .kpop-test-container .similarity-score { background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 20px; border-radius: 15px; margin: 20px 0; box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3); } .kpop-test-container .btn { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: white; border: none; padding: 15px 30px; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin: 10px; box-shadow: 0 5px 15px rgba(255, 154, 158, 0.4); } .kpop-test-container .btn:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(255, 154, 158, 0.4); } .kpop-test-container .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .kpop-test-container .loading { display: none; text-align: center; padding: 40px 20px; color: #ff6b6b; background: white; border-radius: 15px; margin: 20px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .kpop-test-container .loading-spinner { border: 4px solid #f3f3f3; border-top: 4px solid #ff9a9e; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .kpop-test-container .share-buttons { display: flex; justify-content: center; gap: 15px; margin: 30px 0; flex-wrap: wrap; } .kpop-test-container .share-btn { padding: 12px 24px; border: none; border-radius: 25px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .kpop-test-container .share-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .kpop-test-container .share-kakao { background: #FEE500; color: #000; } .kpop-test-container .share-instagram { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: white; } .kpop-test-container .share-facebook { background: #1877F2; color: white; } .kpop-test-container .share-twitter { background: #000; color: white; } .kpop-test-container .detailed-analysis { background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%); padding: 25px; border-radius: 15px; margin: 20px 0; text-align: left; border: 2px solid #ff9a9e; } .kpop-test-container .analysis-item { margin: 15px 0; padding: 15px; background: rgba(255, 154, 158, 0.1); border-radius: 10px; border-left: 4px solid #ff9a9e; } .kpop-test-container .progress-bar { width: 100%; height: 8px; background: #f0f0f0; border-radius: 4px; margin: 10px 0; overflow: hidden; } .kpop-test-container .progress-fill { height: 100%; background: linear-gradient(90deg, #ff9a9e, #fecfef); border-radius: 4px; transition: width 1s ease; } @media (max-width: 768px) { .kpop-test-container { margin: 10px; padding: 15px; } .kpop-test-container .result-comparison { grid-template-columns: 1fr; gap: 15px; } .kpop-test-container .test-header h1 { font-size: 24px; } .kpop-test-container .share-buttons { flex-direction: column; align-items: center; } .kpop-test-container .share-btn { width: 200px; justify-content: center; } } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;kpop-test-container&quot;&gt; &lt;div class=&quot;test-header&quot;&gt; &lt;h1&gt; K-POP 아이돌 닮은꼴 테스트 &lt;/h1&gt; &lt;p&gt;AI가 분석해서 당신과 닮은 K-POP 아이돌을 찾아드려요!&lt;/p&gt; &lt;/div&gt; &lt;!-- 업로드 섹션 --&gt; &lt;div class=&quot;upload-section&quot;&gt; &lt;div class=&quot;upload-area&quot; id=&quot;uploadArea&quot;&gt; &lt;div class=&quot;upload-icon&quot;&gt; &lt;/div&gt; &lt;div class=&quot;upload-text&quot;&gt;사진을 업로드하세요&lt;/div&gt; &lt;div class=&quot;upload-subtext&quot;&gt;클릭하거나 드래그해서 사진을 올려주세요&lt;/div&gt; &lt;/div&gt; &lt;input type=&quot;file&quot; id=&quot;imageInput&quot; accept=&quot;image/*&quot;&gt; &lt;button class=&quot;btn&quot; id=&quot;analyzeBtn&quot; disabled&gt; AI 분석 시작하기&lt;/button&gt; &lt;/div&gt; &lt;!-- 미리보기 섹션 --&gt; &lt;div class=&quot;preview-section&quot; id=&quot;previewSection&quot;&gt; &lt;h3 style=&quot;margin-bottom: 20px; color: #ff6b6b;&quot;&gt; 업로드된 사진&lt;/h3&gt; &lt;img id=&quot;imagePreview&quot; class=&quot;image-preview&quot; alt=&quot;미리보기&quot;&gt; &lt;/div&gt; &lt;!-- 로딩 섹션 --&gt; &lt;div class=&quot;loading&quot; id=&quot;loadingSection&quot;&gt; &lt;div class=&quot;loading-spinner&quot;&gt;&lt;/div&gt; &lt;h3 style=&quot;color: #ff6b6b; margin-bottom: 10px;&quot;&gt;AI가 열심히 분석 중이에요... &lt;/h3&gt; &lt;p&gt;잠시만 기다려주세요! 곧 놀라운 결과를 보여드릴게요!&lt;/p&gt; &lt;/div&gt; &lt;!-- 결과 섹션 --&gt; &lt;div class=&quot;result-section&quot; id=&quot;resultSection&quot;&gt; &lt;h2 style=&quot;color: #ff6b6b; margin-bottom: 20px;&quot;&gt; 분석 완료!&lt;/h2&gt; &lt;div class=&quot;result-comparison&quot;&gt; &lt;div&gt; &lt;img id=&quot;userImage&quot; class=&quot;result-image&quot; alt=&quot;당신의 사진&quot;&gt; &lt;h4 style=&quot;margin-top: 15px; color: #333;&quot;&gt;당신&lt;/h4&gt; &lt;/div&gt; &lt;div class=&quot;vs-text&quot;&gt;VS&lt;/div&gt; &lt;div&gt; &lt;canvas id=&quot;idolCanvas&quot; class=&quot;result-image&quot; width=&quot;150&quot; height=&quot;150&quot;&gt;&lt;/canvas&gt; &lt;h4 style=&quot;margin-top: 15px; color: #333;&quot; id=&quot;idolName&quot;&gt;아이돌&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;similarity-score&quot;&gt; &lt;h3&gt; 유사도 점수&lt;/h3&gt; &lt;div style=&quot;font-size: 36px; font-weight: bold; margin: 10px 0;&quot; id=&quot;similarityPercent&quot;&gt;0%&lt;/div&gt; &lt;div class=&quot;progress-bar&quot;&gt; &lt;div class=&quot;progress-fill&quot; id=&quot;progressFill&quot; style=&quot;width: 0%&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;detailed-analysis&quot; id=&quot;detailedAnalysis&quot;&gt; &lt;h4 style=&quot;color: #ff6b6b; margin-bottom: 15px;&quot;&gt; 상세 분석 결과&lt;/h4&gt; &lt;div id=&quot;analysisContent&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;idol-info&quot;&gt; &lt;h4 id=&quot;idolInfoTitle&quot; style=&quot;color: #ff6b6b; margin-bottom: 10px;&quot;&gt;아이돌 정보&lt;/h4&gt; &lt;p id=&quot;idolInfoText&quot;&gt;AI 분석 결과가 여기에 표시됩니다.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;share-buttons&quot;&gt; &lt;button class=&quot;share-btn share-kakao&quot; id=&quot;shareKakao&quot;&gt; 카카오톡&lt;/button&gt; &lt;button class=&quot;share-btn share-instagram&quot; id=&quot;shareInstagram&quot;&gt; 인스타그램&lt;/button&gt; &lt;button class=&quot;share-btn share-facebook&quot; id=&quot;shareFacebook&quot;&gt; 페이스북&lt;/button&gt; &lt;button class=&quot;share-btn share-twitter&quot; id=&quot;shareTwitter&quot;&gt; X (트위터)&lt;/button&gt; &lt;/div&gt; &lt;button class=&quot;btn&quot; id=&quot;resetBtn&quot;&gt; 다시 테스트하기&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; // K-POP 아이돌 데이터베이스 const kpopIdols = { female: [ { name: &quot;지수&quot;, group: &quot;BLACKPINK&quot;, position: &quot;메인보컬, 리드댄서&quot;, debut: &quot;2016년&quot;, description: &quot;우아하고 세련된 매력의 블랙핑크 멤버&quot;, features: [&quot;우아한 눈매&quot;, &quot;완벽한 얼굴 비율&quot;, &quot;고급스러운 분위기&quot;], songs: [&quot;꽃&quot;, &quot;ME&quot;, &quot;All Eyes On Me&quot;] }, { name: &quot;제니&quot;, group: &quot;BLACKPINK&quot;, position: &quot;메인래퍼, 리드보컬&quot;, debut: &quot;2016년&quot;, description: &quot;카리스마와 우아함을 겸비한 아티스트&quot;, features: [&quot;카리스마 있는 눈빛&quot;, &quot;완벽한 페이스라인&quot;, &quot;도시적인 매력&quot;], songs: [&quot;SOLO&quot;, &quot;You &amp; Me&quot;, &quot;Human&quot;] }, { name: &quot;로제&quot;, group: &quot;BLACKPINK&quot;, position: &quot;메인보컬, 리드댄서&quot;, debut: &quot;2016년&quot;, description: &quot;독특하고 매혹적인 보이스의 소유자&quot;, features: [&quot;몽환적인 눈매&quot;, &quot;섬세한 이목구비&quot;, &quot;서구적인 매력&quot;], songs: [&quot;On The Ground&quot;, &quot;Gone&quot;, &quot;APT.&quot;] }, { name: &quot;리사&quot;, group: &quot;BLACKPINK&quot;, position: &quot;메인댄서, 리드래퍼, 서브보컬, 막내&quot;, debut: &quot;2016년&quot;, description: &quot;글로벌 무대를 사로잡은 댄싱퀸&quot;, features: [&quot;강렬한 카리스마&quot;, &quot;완벽한 댄스라인&quot;, &quot;이국적인 매력&quot;], songs: [&quot;LALISA&quot;, &quot;Money&quot;, &quot;SG&quot;] }, { name: &quot;카리나&quot;, group: &quot;aespa&quot;, position: &quot;리더, 메인댄서, 서브보컬, 서브래퍼&quot;, debut: &quot;2020년&quot;, description: &quot;미래적이고 세련된 이미지의 4세대 아이돌&quot;, features: [&quot;미래적인 이미지&quot;, &quot;완벽한 비주얼&quot;, &quot;카리스마 있는 눈매&quot;], songs: [&quot;Dreams Come True&quot;, &quot;UP&quot;, &quot;Whiplash&quot;] }, { name: &quot;윈터&quot;, group: &quot;aespa&quot;, position: &quot;메인보컬&quot;, debut: &quot;2020년&quot;, description: &quot;청순하면서도 신비로운 매력&quot;, features: [&quot;청순한 이미지&quot;, &quot;맑은 눈빛&quot;, &quot;완벽한 보컬&quot;], songs: [&quot;When I'm Alone&quot;, &quot;Spark&quot;, &quot;Better Things&quot;] }, { name: &quot;안유진&quot;, group: &quot;IVE&quot;, position: &quot;리더, 메인댄서, 서브보컬&quot;, debut: &quot;2021년 (IVE), 2018년 (IZ*ONE)&quot;, description: &quot;밝고 에너제틱한 매력의 리더&quot;, features: [&quot;밝고 화사한 이미지&quot;, &quot;완벽한 댄스실력&quot;, &quot;리더십 있는 카리스마&quot;], songs: [&quot;ELEVEN&quot;, &quot;LOVE DIVE&quot;, &quot;After LIKE&quot;] }, { name: &quot;장원영&quot;, group: &quot;IVE&quot;, position: &quot;센터, 서브보컬, 비주얼, 막내&quot;, debut: &quot;2021년 (IVE), 2018년 (IZ*ONE)&quot;, description: &quot;우아하고 고급스러운 이미지&quot;, features: [&quot;인형같은 비주얼&quot;, &quot;우아한 분위기&quot;, &quot;완벽한 비율&quot;], songs: [&quot;My Satisfaction&quot;, &quot;DIVE&quot;, &quot;I AM&quot;] }, { name: &quot;아이유&quot;, group: &quot;솔로&quot;, position: &quot;싱어송라이터&quot;, debut: &quot;2008년&quot;, description: &quot;국민여동생에서 아티스트로 성장한 솔로가수&quot;, features: [&quot;청순한 매력&quot;, &quot;따뜻한 미소&quot;, &quot;친근한 이미지&quot;], songs: [&quot;좋은 날&quot;, &quot;통화연결음&quot;, &quot;Love wins all&quot;] }, { name: &quot;민지&quot;, group: &quot;NewJeans&quot;, position: &quot;리더, 메인보컬&quot;, debut: &quot;2022년&quot;, description: &quot;Y2K 감성의 대표주자&quot;, features: [&quot;트렌디한 매력&quot;, &quot;자연스러운 아름다움&quot;, &quot;편안한 분위기&quot;], songs: [&quot;Attention&quot;, &quot;Hype Boy&quot;, &quot;Get Up&quot;] }, { name: &quot;하니&quot;, group: &quot;NewJeans&quot;, position: &quot;메인댄서, 서브보컬&quot;, debut: &quot;2022년&quot;, description: &quot;자연스럽고 매력적인 아티스트&quot;, features: [&quot;자연스러운 매력&quot;, &quot;완벽한 댄스&quot;, &quot;독특한 개성&quot;], songs: [&quot;Cookie&quot;, &quot;OMG&quot;, &quot;Super Shy&quot;] } ], male: [ { name: &quot;뷔&quot;, group: &quot;BTS&quot;, position: &quot;서브보컬, 리드댄서, 비주얼&quot;, debut: &quot;2013년&quot;, description: &quot;조각같은 외모와 예술적 감성의 아이돌&quot;, features: [&quot;조각같은 이목구비&quot;, &quot;예술적인 감성&quot;, &quot;독특한 매력&quot;], songs: [&quot;Stigma&quot;, &quot;Singularity&quot;, &quot;Love Me Again&quot;] }, { name: &quot;정국&quot;, group: &quot;BTS&quot;, position: &quot;메인보컬, 리드댄서, 서브래퍼, 센터, 막내&quot;, debut: &quot;2013년&quot;, description: &quot;완벽한 올라운더 황금막내&quot;, features: [&quot;완벽한 비율&quot;, &quot;청순한 매력&quot;, &quot;올라운더 실력&quot;], songs: [&quot;Euphoria&quot;, &quot;My Time&quot;, &quot;Seven&quot;] }, { name: &quot;지민&quot;, group: &quot;BTS&quot;, position: &quot;메인댄서, 리드보컬&quot;, debut: &quot;2013년&quot;, description: &quot;천사같은 매력과 완벽한 댄스실력&quot;, features: [&quot;천사같은 미소&quot;, &quot;완벽한 댄스라인&quot;, &quot;부드러운 매력&quot;], songs: [&quot;Lie&quot;, &quot;Filter&quot;, &quot;Like Crazy&quot;] }, { name: &quot;차은우&quot;, group: &quot;ASTRO&quot;, position: &quot;메인보컬, 비주얼, 센터&quot;, debut: &quot;2016년&quot;, description: &quot;완벽한 비주얼과 연기력을 겸비&quot;, features: [&quot;완벽한 이목구비&quot;, &quot;로맨틱한 분위기&quot;, &quot;배우같은 비주얼&quot;], songs: [&quot;All Night&quot;, &quot;Knock&quot;, &quot;Blue Moon&quot;] }, { name: &quot;황인엽&quot;, group: &quot;골든차일드&quot;, position: &quot;메인보컬&quot;, debut: &quot;2017년&quot;, description: &quot;감미로운 보이스와 완벽한 비주얼&quot;, features: [&quot;부드러운 이목구비&quot;, &quot;감미로운 보이스&quot;, &quot;따뜻한 매력&quot;], songs: [&quot;Without You&quot;, &quot;Compass&quot;, &quot;Ra Pam Pam&quot;] }, { name: &quot;성훈&quot;, group: &quot;ENHYPEN&quot;, position: &quot;서브보컬, 비주얼&quot;, debut: &quot;2020년&quot;, description: &quot;날카롭고 카리스마 있는 외모&quot;, features: [&quot;날카로운 이목구비&quot;, &quot;강렬한 카리스마&quot;, &quot;모델같은 비율&quot;], songs: [&quot;Given-Taken&quot;, &quot;Drunk-Dazed&quot;, &quot;Bite Me&quot;] }, { name: &quot;원빈&quot;, group: &quot;RIIZE&quot;, position: &quot;서브보컬&quot;, debut: &quot;2023년&quot;, description: &quot;청량하고 상큼한 매력의 신인 아이돌&quot;, features: [&quot;청량한 이미지&quot;, &quot;밝은 미소&quot;, &quot;상큼한 매력&quot;], songs: [&quot;Get A Guitar&quot;, &quot;Love 119&quot;, &quot;Talk Saxy&quot;] }, { name: &quot;소희&quot;, group: &quot;RIIZE&quot;, position: &quot;메인댄서, 서브래퍼, 서브보컬&quot;, debut: &quot;2023년&quot;, description: &quot;완벽한 댄스실력과 매력적인 비주얼&quot;, features: [&quot;완벽한 댄스&quot;, &quot;매력적인 눈빛&quot;, &quot;트렌디한 스타일&quot;], songs: [&quot;Memories&quot;, &quot;BOOM BOOM BASS&quot;, &quot;Impossible&quot;] }, { name: &quot;선우&quot;, group: &quot;더보이즈&quot;, position: &quot;메인댄서, 서브보컬&quot;, debut: &quot;2017년&quot;, description: &quot;완벽한 댄스실력과 카리스마&quot;, features: [&quot;강렬한 카리스마&quot;, &quot;완벽한 댄스&quot;, &quot;남성적인 매력&quot;], songs: [&quot;The Stealer&quot;, &quot;Maverick&quot;, &quot;Watch It&quot;] }, { name: &quot;현재&quot;, group: &quot;더보이즈&quot;, position: &quot;메인댄서, 서브보컬, 서브래퍼&quot;, debut: &quot;2017년&quot;, description: &quot;섬세한 매력과 완벽한 퍼포먼스&quot;, features: [&quot;섬세한 이목구비&quot;, &quot;완벽한 퍼포먼스&quot;, &quot;우아한 매력&quot;], songs: [&quot;Bloom Bloom&quot;, &quot;Breaking Dawn&quot;, &quot;Zeneration II&quot;] } ] }; let uploadedImage = null; let analysisResult = null; // DOM 요소들 const uploadArea = document.getElementById('uploadArea'); const imageInput = document.getElementById('imageInput'); const analyzeBtn = document.getElementById('analyzeBtn'); const previewSection = document.getElementById('previewSection'); const imagePreview = document.getElementById('imagePreview'); const loadingSection = document.getElementById('loadingSection'); const resultSection = document.getElementById('resultSection'); const resetBtn = document.getElementById('resetBtn'); // 이벤트 리스너들 uploadArea.addEventListener('click', () =&gt; { imageInput.click(); }); imageInput.addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { handleImageUpload(file); } }); // 드래그 앤 드롭 처리 uploadArea.addEventListener('dragover', function(e) { e.preventDefault(); uploadArea.classList.add('dragover'); }); uploadArea.addEventListener('dragleave', function(e) { e.preventDefault(); uploadArea.classList.remove('dragover'); }); uploadArea.addEventListener('drop', function(e) { e.preventDefault(); uploadArea.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file &amp;&amp; file.type.startsWith('image/')) { imageInput.files = e.dataTransfer.files; handleImageUpload(file); } }); analyzeBtn.addEventListener('click', function() { if (!uploadedImage) return; startAnalysis(); }); resetBtn.addEventListener('click', function() { resetTest(); }); // 공유 버튼 이벤트 document.getElementById('shareKakao').addEventListener('click', shareToKakao); document.getElementById('shareInstagram').addEventListener('click', shareToInstagram); document.getElementById('shareFacebook').addEventListener('click', shareToFacebook); document.getElementById('shareTwitter').addEventListener('click', shareToTwitter); function handleImageUpload(file) { const reader = new FileReader(); reader.onload = function(e) { uploadedImage = e.target.result; // 미리보기 표시 imagePreview.src = uploadedImage; previewSection.style.display = 'block'; // 분석 버튼 활성화 analyzeBtn.disabled = false; // 미리보기로 스크롤 previewSection.scrollIntoView({ behavior: 'smooth' }); }; reader.readAsDataURL(file); } function startAnalysis() { // 로딩 섹션 표시 loadingSection.style.display = 'block'; resultSection.style.display = 'none'; // 로딩 섹션으로 스크롤 loadingSection.scrollIntoView({ behavior: 'smooth' }); // 3초 후 분석 완료 setTimeout(() =&gt; { performAnalysis(); }, 3000); } function performAnalysis() { // 간단한 이미지 분석 시뮬레이션 const img = new Image(); img.onload = function() { // 성별 추정 (랜덤) const isFemale = Math.random() &gt; 0.5; const genderGroup = isFemale ? kpopIdols.female : kpopIdols.male; // 랜덤하게 아이돌 선택 const selectedIdol = genderGroup[Math.floor(Math.random() * genderGroup.length)]; // 유사도 생성 (75-95%) const similarity = Math.floor(Math.random() * 21) + 75; analysisResult = { idol: selectedIdol, similarity: similarity }; displayResult(); }; img.src = uploadedImage; } function displayResult() { // 로딩 숨기기 loadingSection.style.display = 'none'; // 사용자 이미지 표시 document.getElementById('userImage').src = uploadedImage; // 아이돌 정보 표시 const idol = analysisResult.idol; document.getElementById('idolName').textContent = idol.name; document.getElementById('similarityPercent').textContent = analysisResult.similarity + '%'; // 진행바 애니메이션 setTimeout(() =&gt; { document.getElementById('progressFill').style.width = analysisResult.similarity + '%'; }, 500); // 아이돌 정보 상세 표시 document.getElementById('idolInfoTitle').textContent = &#96;${idol.name} (${idol.group})&#96;; document.getElementById('idolInfoText').innerHTML = &#96; &lt;strong&gt;포지션:&lt;/strong&gt; ${idol.position}&lt;br&gt; &lt;strong&gt;데뷔:&lt;/strong&gt; ${idol.debut}&lt;br&gt; &lt;strong&gt;대표곡:&lt;/strong&gt; ${idol.songs.join(', ')}&lt;br&gt;&lt;br&gt; ${idol.description} &#96;; // 상세 분석 표시 displayDetailedAnalysis(idol); // 아이돌 얼굴 그리기 drawIdolFace(idol.name); // 결과 섹션 표시 resultSection.style.display = 'block'; // 결과로 스크롤 setTimeout(() =&gt; { resultSection.scrollIntoView({ behavior: 'smooth' }); showNotification(' 결과를 확인하세요!'); }, 300); } function displayDetailedAnalysis(idol) { const analysisContent = document.getElementById('analysisContent'); const features = idol.features; let analysisHTML = ''; features.forEach((feature, index) =&gt; { const score = Math.floor(Math.random() * 20) + 80; // 80-99점 analysisHTML += &#96; &lt;div class=&quot;analysis-item&quot;&gt; &lt;strong&gt;${feature}:&lt;/strong&gt; ${score}점 &lt;div class=&quot;progress-bar&quot;&gt; &lt;div class=&quot;progress-fill&quot; style=&quot;width: ${score}%&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &#96;; }); analysisHTML += &#96; &lt;div class=&quot;analysis-item&quot;&gt; &lt;strong&gt; 추천 스타일링:&lt;/strong&gt;&lt;br&gt; &bull; ${idol.name}처럼 ${features[0]}를 강조하는 메이크업&lt;br&gt; &bull; ${idol.group} 스타일의 헤어스타일링&lt;br&gt; &bull; ${idol.description.includes('우아') ? '우아하고 세련된' : '트렌디하고 활발한'} 패션 스타일 &lt;/div&gt; &#96;; analysisContent.innerHTML = analysisHTML; } function drawIdolFace(idolName) { const canvas = document.getElementById('idolCanvas'); const ctx = canvas.getContext('2d'); // 캔버스 초기화 ctx.clearRect(0, 0, 150, 150); // 배경 그라데이션 const gradient = ctx.createLinearGradient(0, 0, 150, 150); gradient.addColorStop(0, '#ff9a9e'); gradient.addColorStop(1, '#fecfef'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 150, 150); // 얼굴 그리기 ctx.fillStyle = '#fdbcb4'; ctx.beginPath(); ctx.ellipse(75, 75, 45, 55, 0, 0, 2 * Math.PI); ctx.fill(); // 눈 그리기 ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(60, 65, 6, 4, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 65, 6, 4, 0, 0, 2 * Math.PI); ctx.fill(); // 눈동자 ctx.fillStyle = '#000'; ctx.beginPath(); ctx.ellipse(60, 65, 3, 3, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 65, 3, 3, 0, 0, 2 * Math.PI); ctx.fill(); // 코 그리기 ctx.strokeStyle = '#d4af37'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(75, 78); ctx.lineTo(78, 88); ctx.stroke(); // 입 그리기 ctx.strokeStyle = '#ff6b6b'; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.arc(75, 95, 12, 0, Math.PI); ctx.stroke(); // 볼터치 ctx.fillStyle = 'rgba(255, 182, 193, 0.6)'; ctx.beginPath(); ctx.ellipse(50, 85, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(100, 85, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); } function showNotification(message) { const notification = document.createElement('div'); notification.style.cssText = &#96; position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, #ff9a9e, #fecfef); color: white; padding: 15px 25px; border-radius: 25px; font-weight: bold; box-shadow: 0 10px 25px rgba(255, 154, 158, 0.4); z-index: 1000; animation: slideIn 0.5s ease; &#96;; notification.textContent = message; document.body.appendChild(notification); setTimeout(() =&gt; { notification.remove(); }, 3000); } // 공유 기능들 function shareToKakao() { const text = &#96;나는 ${analysisResult.idol.group}의 ${analysisResult.idol.name}와 ${analysisResult.similarity}% 닮았어요! K-POP 아이돌 닮은꼴 테스트 해보세요!&#96;; if (navigator.share) { navigator.share({ title: 'K-POP 아이돌 닮은꼴 테스트 결과', text: text, url: window.location.href }).catch(err =&gt; { copyToClipboard(text); showNotification(' 결과가 클립보드에 복사되었습니다!'); }); } else { copyToClipboard(text); showNotification(' 카카오톡에 붙여넣기 할 텍스트가 복사되었습니다!'); } } function shareToInstagram() { const text = &#96;나는 ${analysisResult.idol.group}의 ${analysisResult.idol.name}와 ${analysisResult.similarity}% 닮았어요! ✨ #KPOP아이돌닮은꼴 #${analysisResult.idol.group} #${analysisResult.idol.name} #아이돌테스트 #닮은꼴테스트&#96;; copyToClipboard(text); showNotification(' 인스타그램에 붙여넣기 할 텍스트가 복사되었습니다!'); } function shareToFacebook() { const text = &#96;K-POP 아이돌 닮은꼴 테스트 결과: ${analysisResult.idol.group}의 ${analysisResult.idol.name}와 ${analysisResult.similarity}% 닮았어요! 여러분도 해보세요! &#96;; const url = &#96;https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&amp;quote=${encodeURIComponent(text)}&#96;; window.open(url, '_blank', 'width=600,height=400'); } function shareToTwitter() { const text = &#96;나는 ${analysisResult.idol.group}의 ${analysisResult.idol.name}와 ${analysisResult.similarity}% 닮았어요! ✨ #KPOP아이돌닮은꼴 #${analysisResult.idol.group}&#96;; const url = &#96;https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&amp;url=${encodeURIComponent(window.location.href)}&#96;; window.open(url, '_blank', 'width=600,height=400'); } function copyToClipboard(text) { if (navigator.clipboard) { navigator.clipboard.writeText(text); } else { const textArea = document.createElement('textarea'); textArea.value = text; textArea.style.position = 'fixed'; textArea.style.opacity = '0'; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); } } function resetTest() { // 모든 섹션 초기화 previewSection.style.display = 'none'; loadingSection.style.display = 'none'; resultSection.style.display = 'none'; analyzeBtn.disabled = true; imageInput.value = ''; uploadedImage = null; analysisResult = null; // 진행바 초기화 document.getElementById('progressFill').style.width = '0%'; // 맨 위로 스크롤 document.querySelector('.kpop-test-container').scrollIntoView({ behavior: 'smooth' }); showNotification(' 테스트가 초기화되었습니다!'); } // CSS 애니메이션 추가 const style = document.createElement('style'); style.textContent = &#96; @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } &#96;; document.head.appendChild(style); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;"> <style> .kpop-test-container { max-width: 800px; margin: 20px auto; padding: 20px; font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%); border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; } .kpop-test-container * { box-sizing: border-box; } .kpop-test-container .test-header { text-align: center; color: white; margin-bottom: 30px; } .kpop-test-container .test-header h1 { font-size: 32px; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: rainbow 3s ease-in-out infinite; } @keyframes rainbow { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(180deg); } } .kpop-test-container .test-header p { font-size: 18px; opacity: 0.9; color: #333; font-weight: bold; } .kpop-test-container .upload-section { background: white; padding: 30px; border-radius: 15px; text-align: center; margin-bottom: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .kpop-test-container .upload-area { border: 3px dashed #ff9a9e; border-radius: 15px; padding: 40px 20px; margin: 20px 0; cursor: pointer; transition: all 0.3s ease; background: linear-gradient(45deg, #fff 0%, #f8f9fa 100%); } .kpop-test-container .upload-area:hover { border-color: #ff6b6b; background: linear-gradient(45deg, #fff5f5 0%, #ffe0e6 100%); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(255, 107, 107, 0.2); } .kpop-test-container .upload-area.dragover { border-color: #4CAF50; background: linear-gradient(45deg, #e8f5e8 0%, #f0fff0 100%); } .kpop-test-container #imageInput { display: none; } .kpop-test-container .upload-text { color: #ff6b6b; font-size: 20px; font-weight: bold; margin: 10px 0; } .kpop-test-container .upload-subtext { color: #666; font-size: 14px; } .kpop-test-container .upload-icon { font-size: 48px; margin-bottom: 15px; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .kpop-test-container .preview-section { display: none; background: white; padding: 30px; border-radius: 15px; margin: 20px 0; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .kpop-test-container .image-preview { max-width: 200px; max-height: 200px; border-radius: 15px; margin: 10px auto; display: block; box-shadow: 0 10px 25px rgba(0,0,0,0.2); } .kpop-test-container .result-section { display: none; background: white; padding: 30px; border-radius: 15px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .kpop-test-container .result-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin: 20px 0; } .kpop-test-container .result-image { width: 150px; height: 150px; border-radius: 15px; margin: 0 auto; object-fit: cover; box-shadow: 0 10px 25px rgba(0,0,0,0.2); } .kpop-test-container .vs-text { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: white; padding: 15px; border-radius: 50%; font-weight: bold; font-size: 18px; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } .kpop-test-container .idol-info { margin: 20px 0; padding: 20px; background: linear-gradient(135deg, #f8f9ff 0%, #fff0f8 100%); border-radius: 15px; border-left: 5px solid #ff9a9e; } .kpop-test-container .similarity-score { background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 20px; border-radius: 15px; margin: 20px 0; box-shadow: 0 10px 25px rgba(76, 175, 80, 0.3); } .kpop-test-container .btn { background: linear-gradient(135deg, #ff9a9e, #fecfef); color: white; border: none; padding: 15px 30px; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin: 10px; box-shadow: 0 5px 15px rgba(255, 154, 158, 0.4); } .kpop-test-container .btn:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(255, 154, 158, 0.4); } .kpop-test-container .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .kpop-test-container .loading { display: none; text-align: center; padding: 40px 20px; color: #ff6b6b; background: white; border-radius: 15px; margin: 20px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.1); } .kpop-test-container .loading-spinner { border: 4px solid #f3f3f3; border-top: 4px solid #ff9a9e; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .kpop-test-container .share-buttons { display: flex; justify-content: center; gap: 15px; margin: 30px 0; flex-wrap: wrap; } .kpop-test-container .share-btn { padding: 12px 24px; border: none; border-radius: 25px; font-size: 14px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .kpop-test-container .share-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .kpop-test-container .share-kakao { background: #FEE500; color: #000; } .kpop-test-container .share-instagram { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); color: white; } .kpop-test-container .share-facebook { background: #1877F2; color: white; } .kpop-test-container .share-twitter { background: #000; color: white; } .kpop-test-container .detailed-analysis { background: linear-gradient(135deg, #fff 0%, #f8f9ff 100%); padding: 25px; border-radius: 15px; margin: 20px 0; text-align: left; border: 2px solid #ff9a9e; } .kpop-test-container .analysis-item { margin: 15px 0; padding: 15px; background: rgba(255, 154, 158, 0.1); border-radius: 10px; border-left: 4px solid #ff9a9e; } .kpop-test-container .progress-bar { width: 100%; height: 8px; background: #f0f0f0; border-radius: 4px; margin: 10px 0; overflow: hidden; } .kpop-test-container .progress-fill { height: 100%; background: linear-gradient(90deg, #ff9a9e, #fecfef); border-radius: 4px; transition: width 1s ease; } @media (max-width: 768px) { .kpop-test-container { margin: 10px; padding: 15px; } .kpop-test-container .result-comparison { grid-template-columns: 1fr; gap: 15px; } .kpop-test-container .test-header h1 { font-size: 24px; } .kpop-test-container .share-buttons { flex-direction: column; align-items: center; } .kpop-test-container .share-btn { width: 200px; justify-content: center; } } </style> <div class="kpop-test-container"> <div class="test-header"> <h1> K-POP 아이돌 닮은꼴 테스트 </h1> <p data-ke-size="size16">AI가 분석해서 당신과 닮은 K-POP 아이돌을 찾아드려요!</p> </div> <!-- 업로드 섹션 --> <div class="upload-section"> <div id="uploadArea" class="upload-area"> <div class="upload-icon"> </div> <div class="upload-text">사진을 업로드하세요</div> <div class="upload-subtext">클릭하거나 드래그해서 사진을 올려주세요</div> </div> <input id="imageInput" accept="image/*" type="file" /> <button id="analyzeBtn" class="btn" disabled="disabled"> AI 분석 시작하기</button></div> <!-- 미리보기 섹션 --> <div id="previewSection" class="preview-section"> <h3 style="margin-bottom: 20px; color: #ff6b6b;" data-ke-size="size23"> 업로드된 사진</h3> <img id="imagePreview" class="image-preview" alt="미리보기" /></div> <!-- 로딩 섹션 --> <div id="loadingSection" class="loading"> <div class="loading-spinner">&nbsp;</div> <h3 style="color: #ff6b6b; margin-bottom: 10px;" data-ke-size="size23">AI가 열심히 분석 중이에요... </h3> <p data-ke-size="size16">잠시만 기다려주세요! 곧 놀라운 결과를 보여드릴게요!</p> </div> <!-- 결과 섹션 --> <div id="resultSection" class="result-section"> <h2 style="color: #ff6b6b; margin-bottom: 20px;" data-ke-size="size26"> 분석 완료!</h2> <div class="result-comparison"> <div><img id="userImage" class="result-image" alt="당신의 사진" /> <h4 style="margin-top: 15px; color: #333;" data-ke-size="size20">당신</h4> </div> <div class="vs-text">VS</div> <div><canvas id="idolCanvas" class="result-image" width="150" height="150"></canvas> <h4 id="idolName" style="margin-top: 15px; color: #333;" data-ke-size="size20">아이돌</h4> </div> </div> <div class="similarity-score"> <h3 data-ke-size="size23"> 유사도 점수</h3> <div id="similarityPercent" style="font-size: 36px; font-weight: bold; margin: 10px 0;">0%</div> <div class="progress-bar"> <div id="progressFill" class="progress-fill" style="width: 0%;">&nbsp;</div> </div> </div> <div id="detailedAnalysis" class="detailed-analysis"> <h4 style="color: #ff6b6b; margin-bottom: 15px;" data-ke-size="size20"> 상세 분석 결과</h4> <div id="analysisContent">&nbsp;</div> </div> <div class="idol-info"> <h4 id="idolInfoTitle" style="color: #ff6b6b; margin-bottom: 10px;" data-ke-size="size20">아이돌 정보</h4> <p id="idolInfoText" data-ke-size="size16">AI 분석 결과가 여기에 표시됩니다.</p> </div> <div class="share-buttons"><button id="shareKakao" class="share-btn share-kakao"> 카카오톡</button> <button id="shareInstagram" class="share-btn share-instagram"> 인스타그램</button> <button id="shareFacebook" class="share-btn share-facebook"> 페이스북</button> <button id="shareTwitter" class="share-btn share-twitter"> X (트위터)</button></div> <button id="resetBtn" class="btn"> 다시 테스트하기</button></div> </div> <script> // K-POP 아이돌 데이터베이스 const kpopIdols = { female: [ { name: "지수", group: "BLACKPINK", position: "메인보컬, 리드댄서", debut: "2016년", description: "우아하고 세련된 매력의 블랙핑크 멤버", features: ["우아한 눈매", "완벽한 얼굴 비율", "고급스러운 분위기"], songs: ["꽃", "ME", "All Eyes On Me"] }, { name: "제니", group: "BLACKPINK", position: "메인래퍼, 리드보컬", debut: "2016년", description: "카리스마와 우아함을 겸비한 아티스트", features: ["카리스마 있는 눈빛", "완벽한 페이스라인", "도시적인 매력"], songs: ["SOLO", "You & Me", "Human"] }, { name: "로제", group: "BLACKPINK", position: "메인보컬, 리드댄서", debut: "2016년", description: "독특하고 매혹적인 보이스의 소유자", features: ["몽환적인 눈매", "섬세한 이목구비", "서구적인 매력"], songs: ["On The Ground", "Gone", "APT."] }, { name: "리사", group: "BLACKPINK", position: "메인댄서, 리드래퍼, 서브보컬, 막내", debut: "2016년", description: "글로벌 무대를 사로잡은 댄싱퀸", features: ["강렬한 카리스마", "완벽한 댄스라인", "이국적인 매력"], songs: ["LALISA", "Money", "SG"] }, { name: "카리나", group: "aespa", position: "리더, 메인댄서, 서브보컬, 서브래퍼", debut: "2020년", description: "미래적이고 세련된 이미지의 4세대 아이돌", features: ["미래적인 이미지", "완벽한 비주얼", "카리스마 있는 눈매"], songs: ["Dreams Come True", "UP", "Whiplash"] }, { name: "윈터", group: "aespa", position: "메인보컬", debut: "2020년", description: "청순하면서도 신비로운 매력", features: ["청순한 이미지", "맑은 눈빛", "완벽한 보컬"], songs: ["When I'm Alone", "Spark", "Better Things"] }, { name: "안유진", group: "IVE", position: "리더, 메인댄서, 서브보컬", debut: "2021년 (IVE), 2018년 (IZ*ONE)", description: "밝고 에너제틱한 매력의 리더", features: ["밝고 화사한 이미지", "완벽한 댄스실력", "리더십 있는 카리스마"], songs: ["ELEVEN", "LOVE DIVE", "After LIKE"] }, { name: "장원영", group: "IVE", position: "센터, 서브보컬, 비주얼, 막내", debut: "2021년 (IVE), 2018년 (IZ*ONE)", description: "우아하고 고급스러운 이미지", features: ["인형같은 비주얼", "우아한 분위기", "완벽한 비율"], songs: ["My Satisfaction", "DIVE", "I AM"] }, { name: "아이유", group: "솔로", position: "싱어송라이터", debut: "2008년", description: "국민여동생에서 아티스트로 성장한 솔로가수", features: ["청순한 매력", "따뜻한 미소", "친근한 이미지"], songs: ["좋은 날", "통화연결음", "Love wins all"] }, { name: "민지", group: "NewJeans", position: "리더, 메인보컬", debut: "2022년", description: "Y2K 감성의 대표주자", features: ["트렌디한 매력", "자연스러운 아름다움", "편안한 분위기"], songs: ["Attention", "Hype Boy", "Get Up"] }, { name: "하니", group: "NewJeans", position: "메인댄서, 서브보컬", debut: "2022년", description: "자연스럽고 매력적인 아티스트", features: ["자연스러운 매력", "완벽한 댄스", "독특한 개성"], songs: ["Cookie", "OMG", "Super Shy"] } ], male: [ { name: "뷔", group: "BTS", position: "서브보컬, 리드댄서, 비주얼", debut: "2013년", description: "조각같은 외모와 예술적 감성의 아이돌", features: ["조각같은 이목구비", "예술적인 감성", "독특한 매력"], songs: ["Stigma", "Singularity", "Love Me Again"] }, { name: "정국", group: "BTS", position: "메인보컬, 리드댄서, 서브래퍼, 센터, 막내", debut: "2013년", description: "완벽한 올라운더 황금막내", features: ["완벽한 비율", "청순한 매력", "올라운더 실력"], songs: ["Euphoria", "My Time", "Seven"] }, { name: "지민", group: "BTS", position: "메인댄서, 리드보컬", debut: "2013년", description: "천사같은 매력과 완벽한 댄스실력", features: ["천사같은 미소", "완벽한 댄스라인", "부드러운 매력"], songs: ["Lie", "Filter", "Like Crazy"] }, { name: "차은우", group: "ASTRO", position: "메인보컬, 비주얼, 센터", debut: "2016년", description: "완벽한 비주얼과 연기력을 겸비", features: ["완벽한 이목구비", "로맨틱한 분위기", "배우같은 비주얼"], songs: ["All Night", "Knock", "Blue Moon"] }, { name: "황인엽", group: "골든차일드", position: "메인보컬", debut: "2017년", description: "감미로운 보이스와 완벽한 비주얼", features: ["부드러운 이목구비", "감미로운 보이스", "따뜻한 매력"], songs: ["Without You", "Compass", "Ra Pam Pam"] }, { name: "성훈", group: "ENHYPEN", position: "서브보컬, 비주얼", debut: "2020년", description: "날카롭고 카리스마 있는 외모", features: ["날카로운 이목구비", "강렬한 카리스마", "모델같은 비율"], songs: ["Given-Taken", "Drunk-Dazed", "Bite Me"] }, { name: "원빈", group: "RIIZE", position: "서브보컬", debut: "2023년", description: "청량하고 상큼한 매력의 신인 아이돌", features: ["청량한 이미지", "밝은 미소", "상큼한 매력"], songs: ["Get A Guitar", "Love 119", "Talk Saxy"] }, { name: "소희", group: "RIIZE", position: "메인댄서, 서브래퍼, 서브보컬", debut: "2023년", description: "완벽한 댄스실력과 매력적인 비주얼", features: ["완벽한 댄스", "매력적인 눈빛", "트렌디한 스타일"], songs: ["Memories", "BOOM BOOM BASS", "Impossible"] }, { name: "선우", group: "더보이즈", position: "메인댄서, 서브보컬", debut: "2017년", description: "완벽한 댄스실력과 카리스마", features: ["강렬한 카리스마", "완벽한 댄스", "남성적인 매력"], songs: ["The Stealer", "Maverick", "Watch It"] }, { name: "현재", group: "더보이즈", position: "메인댄서, 서브보컬, 서브래퍼", debut: "2017년", description: "섬세한 매력과 완벽한 퍼포먼스", features: ["섬세한 이목구비", "완벽한 퍼포먼스", "우아한 매력"], songs: ["Bloom Bloom", "Breaking Dawn", "Zeneration II"] } ] }; let uploadedImage = null; let analysisResult = null; // DOM 요소들 const uploadArea = document.getElementById('uploadArea'); const imageInput = document.getElementById('imageInput'); const analyzeBtn = document.getElementById('analyzeBtn'); const previewSection = document.getElementById('previewSection'); const imagePreview = document.getElementById('imagePreview'); const loadingSection = document.getElementById('loadingSection'); const resultSection = document.getElementById('resultSection'); const resetBtn = document.getElementById('resetBtn'); // 이벤트 리스너들 uploadArea.addEventListener('click', () => { imageInput.click(); }); imageInput.addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { handleImageUpload(file); } }); // 드래그 앤 드롭 처리 uploadArea.addEventListener('dragover', function(e) { e.preventDefault(); uploadArea.classList.add('dragover'); }); uploadArea.addEventListener('dragleave', function(e) { e.preventDefault(); uploadArea.classList.remove('dragover'); }); uploadArea.addEventListener('drop', function(e) { e.preventDefault(); uploadArea.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith('image/')) { imageInput.files = e.dataTransfer.files; handleImageUpload(file); } }); analyzeBtn.addEventListener('click', function() { if (!uploadedImage) return; startAnalysis(); }); resetBtn.addEventListener('click', function() { resetTest(); }); // 공유 버튼 이벤트 document.getElementById('shareKakao').addEventListener('click', shareToKakao); document.getElementById('shareInstagram').addEventListener('click', shareToInstagram); document.getElementById('shareFacebook').addEventListener('click', shareToFacebook); document.getElementById('shareTwitter').addEventListener('click', shareToTwitter); function handleImageUpload(file) { const reader = new FileReader(); reader.onload = function(e) { uploadedImage = e.target.result; // 미리보기 표시 imagePreview.src = uploadedImage; previewSection.style.display = 'block'; // 분석 버튼 활성화 analyzeBtn.disabled = false; // 미리보기로 스크롤 previewSection.scrollIntoView({ behavior: 'smooth' }); }; reader.readAsDataURL(file); } function startAnalysis() { // 로딩 섹션 표시 loadingSection.style.display = 'block'; resultSection.style.display = 'none'; // 로딩 섹션으로 스크롤 loadingSection.scrollIntoView({ behavior: 'smooth' }); // 3초 후 분석 완료 setTimeout(() => { performAnalysis(); }, 3000); } function performAnalysis() { // 간단한 이미지 분석 시뮬레이션 const img = new Image(); img.onload = function() { // 성별 추정 (랜덤) const isFemale = Math.random() > 0.5; const genderGroup = isFemale ? kpopIdols.female : kpopIdols.male; // 랜덤하게 아이돌 선택 const selectedIdol = genderGroup[Math.floor(Math.random() * genderGroup.length)]; // 유사도 생성 (75-95%) const similarity = Math.floor(Math.random() * 21) + 75; analysisResult = { idol: selectedIdol, similarity: similarity }; displayResult(); }; img.src = uploadedImage; } function displayResult() { // 로딩 숨기기 loadingSection.style.display = 'none'; // 사용자 이미지 표시 document.getElementById('userImage').src = uploadedImage; // 아이돌 정보 표시 const idol = analysisResult.idol; document.getElementById('idolName').textContent = idol.name; document.getElementById('similarityPercent').textContent = analysisResult.similarity + '%'; // 진행바 애니메이션 setTimeout(() => { document.getElementById('progressFill').style.width = analysisResult.similarity + '%'; }, 500); // 아이돌 정보 상세 표시 document.getElementById('idolInfoTitle').textContent = `${idol.name} (${idol.group})`; document.getElementById('idolInfoText').innerHTML = ` <strong>포지션:</strong> ${idol.position}<br> <strong>데뷔:</strong> ${idol.debut}<br> <strong>대표곡:</strong> ${idol.songs.join(', ')}<br><br> ${idol.description} `; // 상세 분석 표시 displayDetailedAnalysis(idol); // 아이돌 얼굴 그리기 drawIdolFace(idol.name); // 결과 섹션 표시 resultSection.style.display = 'block'; // 결과로 스크롤 setTimeout(() => { resultSection.scrollIntoView({ behavior: 'smooth' }); showNotification(' 결과를 확인하세요!'); }, 300); } function displayDetailedAnalysis(idol) { const analysisContent = document.getElementById('analysisContent'); const features = idol.features; let analysisHTML = ''; features.forEach((feature, index) => { const score = Math.floor(Math.random() * 20) + 80; // 80-99점 analysisHTML += ` <div class="analysis-item"> <strong>${feature}:</strong> ${score}점 <div class="progress-bar"> <div class="progress-fill" style="width: ${score}%"></div> </div> </div> `; }); analysisHTML += ` <div class="analysis-item"> <strong> 추천 스타일링:</strong><br> • ${idol.name}처럼 ${features[0]}를 강조하는 메이크업<br> • ${idol.group} 스타일의 헤어스타일링<br> • ${idol.description.includes('우아') ? '우아하고 세련된' : '트렌디하고 활발한'} 패션 스타일 </div> `; analysisContent.innerHTML = analysisHTML; } function drawIdolFace(idolName) { const canvas = document.getElementById('idolCanvas'); const ctx = canvas.getContext('2d'); // 캔버스 초기화 ctx.clearRect(0, 0, 150, 150); // 배경 그라데이션 const gradient = ctx.createLinearGradient(0, 0, 150, 150); gradient.addColorStop(0, '#ff9a9e'); gradient.addColorStop(1, '#fecfef'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 150, 150); // 얼굴 그리기 ctx.fillStyle = '#fdbcb4'; ctx.beginPath(); ctx.ellipse(75, 75, 45, 55, 0, 0, 2 * Math.PI); ctx.fill(); // 눈 그리기 ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(60, 65, 6, 4, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 65, 6, 4, 0, 0, 2 * Math.PI); ctx.fill(); // 눈동자 ctx.fillStyle = '#000'; ctx.beginPath(); ctx.ellipse(60, 65, 3, 3, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 65, 3, 3, 0, 0, 2 * Math.PI); ctx.fill(); // 코 그리기 ctx.strokeStyle = '#d4af37'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(75, 78); ctx.lineTo(78, 88); ctx.stroke(); // 입 그리기 ctx.strokeStyle = '#ff6b6b'; ctx.lineWidth = 2.5; ctx.beginPath(); ctx.arc(75, 95, 12, 0, Math.PI); ctx.stroke(); // 볼터치 ctx.fillStyle = 'rgba(255, 182, 193, 0.6)'; ctx.beginPath(); ctx.ellipse(50, 85, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(100, 85, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); } function showNotification(message) { const notification = document.createElement('div'); notification.style.cssText = ` position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, #ff9a9e, #fecfef); color: white; padding: 15px 25px; border-radius: 25px; font-weight: bold; box-shadow: 0 10px 25px rgba(255, 154, 158, 0.4); z-index: 1000; animation: slideIn 0.5s ease; `; notification.textContent = message; document.body.appendChild(notification); setTimeout(() => { notification.remove(); }, 3000); } // 공유 기능들 function shareToKakao() { const text = `나는 ${analysisResult.idol.group}의 ${analysisResult.idol.name}와 ${analysisResult.similarity}% 닮았어요! K-POP 아이돌 닮은꼴 테스트 해보세요!`; if (navigator.share) { navigator.share({ title: 'K-POP 아이돌 닮은꼴 테스트 결과', text: text, url: window.location.href }).catch(err => { copyToClipboard(text); showNotification(' 결과가 클립보드에 복사되었습니다!'); }); } else { copyToClipboard(text); showNotification(' 카카오톡에 붙여넣기 할 텍스트가 복사되었습니다!'); } } function shareToInstagram() { const text = `나는 ${analysisResult.idol.group}의 ${analysisResult.idol.name}와 ${analysisResult.similarity}% 닮았어요! ✨ #KPOP아이돌닮은꼴 #${analysisResult.idol.group} #${analysisResult.idol.name} #아이돌테스트 #닮은꼴테스트`; copyToClipboard(text); showNotification(' 인스타그램에 붙여넣기 할 텍스트가 복사되었습니다!'); } function shareToFacebook() { const text = `K-POP 아이돌 닮은꼴 테스트 결과: ${analysisResult.idol.group}의 ${analysisResult.idol.name}와 ${analysisResult.similarity}% 닮았어요! 여러분도 해보세요! `; const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&quote=${encodeURIComponent(text)}`; window.open(url, '_blank', 'width=600,height=400'); } function shareToTwitter() { const text = `나는 ${analysisResult.idol.group}의 ${analysisResult.idol.name}와 ${analysisResult.similarity}% 닮았어요! ✨ #KPOP아이돌닮은꼴 #${analysisResult.idol.group}`; const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(window.location.href)}`; window.open(url, '_blank', 'width=600,height=400'); } function copyToClipboard(text) { if (navigator.clipboard) { navigator.clipboard.writeText(text); } else { const textArea = document.createElement('textarea'); textArea.value = text; textArea.style.position = 'fixed'; textArea.style.opacity = '0'; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); } } function resetTest() { // 모든 섹션 초기화 previewSection.style.display = 'none'; loadingSection.style.display = 'none'; resultSection.style.display = 'none'; analyzeBtn.disabled = true; imageInput.value = ''; uploadedImage = null; analysisResult = null; // 진행바 초기화 document.getElementById('progressFill').style.width = '0%'; // 맨 위로 스크롤 document.querySelector('.kpop-test-container').scrollIntoView({ behavior: 'smooth' }); showNotification(' 테스트가 초기화되었습니다!'); } // CSS 애니메이션 추가 const style = document.createElement('style'); style.textContent = ` @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } `; document.head.appendChild(style); </script> </div> <p data-ke-size="size16">&nbsp;</p> 핫한 성격테스트 ai 얼굴 매칭 bts 닮은꼴 k팝 스타 닮은꼴 닮은 연예인 테스트 셀레브리티 테스트 스타 닮은꼴 연예인 도플갱어 연예인 얼굴 분석 한국 배우 닮은꼴 할리우드 배우 마음속 우주 https://cafemcr.tistory.com/6 https://cafemcr.tistory.com/6#entry6comment Fri, 20 Jun 2025 22:58:30 +0900 https://cafemcr.tistory.com/5 <div id="code_1750427402590" data-ke-type="html" data-source="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;ko&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt; 나와 닮은 동물 찾기 테스트&lt;/title&gt; &lt;style&gt; .animal-test-container * { margin: 0; padding: 0; box-sizing: border-box; } .animal-test-container { max-width: 800px; margin: 20px auto; padding: 20px; font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; } .animal-test-container .test-header { text-align: center; color: white; margin-bottom: 30px; } .animal-test-container .test-header h1 { font-size: 32px; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .animal-test-container .test-header p { font-size: 18px; opacity: 0.9; } .animal-test-container .upload-section { background: white; padding: 30px; border-radius: 15px; text-align: center; margin-bottom: 20px; } .animal-test-container .upload-area { border: 3px dashed #667eea; border-radius: 15px; padding: 40px 20px; margin: 20px 0; cursor: pointer; transition: all 0.3s ease; } .animal-test-container .upload-area:hover { border-color: #764ba2; background: #f8f9ff; transform: translateY(-2px); } .animal-test-container .upload-area.dragover { border-color: #4CAF50; background: #e8f5e8; } .animal-test-container #imageInput { display: none; } .animal-test-container .upload-text { color: #667eea; font-size: 18px; font-weight: bold; margin: 10px 0; } .animal-test-container .upload-subtext { color: #999; font-size: 14px; } .animal-test-container .preview-section { display: none; background: white; padding: 30px; border-radius: 15px; margin: 20px 0; text-align: center; } .animal-test-container .image-preview { max-width: 200px; max-height: 200px; border-radius: 10px; margin: 10px auto; display: block; } .animal-test-container .result-section { display: none; background: white; padding: 30px; border-radius: 15px; text-align: center; } .animal-test-container .result-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin: 20px 0; } .animal-test-container .result-image { width: 150px; height: 150px; border-radius: 15px; margin: 0 auto; object-fit: cover; } .animal-test-container .vs-text { background: #667eea; color: white; padding: 10px; border-radius: 50%; font-weight: bold; } .animal-test-container .animal-info { margin: 20px 0; padding: 20px; background: #f8f9ff; border-radius: 15px; text-align: left; } .animal-test-container .similarity-score { background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 15px; border-radius: 15px; margin: 20px 0; } .animal-test-container .btn { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; padding: 15px 30px; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin: 10px; } .animal-test-container .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .animal-test-container .btn:disabled { opacity: 0.6; cursor: not-allowed; } .animal-test-container .loading { display: none; text-align: center; padding: 20px; color: #667eea; background: white; border-radius: 15px; margin: 20px 0; } .animal-test-container .loading-spinner { border: 4px solid #f3f3f3; border-top: 4px solid #667eea; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .animal-test-container .share-buttons { display: flex; justify-content: center; gap: 10px; margin: 20px 0; flex-wrap: wrap; } .animal-test-container .share-btn { padding: 10px 20px; border: none; border-radius: 20px; font-size: 14px; cursor: pointer; transition: all 0.3s ease; } .animal-test-container .share-kakao { background: #FEE500; color: #000; } .animal-test-container .share-instagram { background: #E4405F; color: white; } .animal-test-container .share-facebook { background: #1877F2; color: white; } .animal-test-container .share-twitter { background: #1DA1F2; color: white; } .animal-test-container .notification { position: fixed; top: 20px; right: 20px; background: #4CAF50; color: white; padding: 15px 20px; border-radius: 10px; z-index: 1000; opacity: 0; transform: translateX(100%); transition: all 0.3s ease; } .animal-test-container .notification.show { opacity: 1; transform: translateX(0); } .animal-test-container .detailed-analysis { background: #fff8f0; padding: 20px; border-radius: 15px; margin: 20px 0; border-left: 5px solid #ff9800; } .animal-test-container .trait-match { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; padding: 8px; background: rgba(102, 126, 234, 0.1); border-radius: 8px; } .animal-test-container .trait-score { background: #667eea; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; } @media (max-width: 768px) { .animal-test-container { margin: 10px; padding: 15px; } .animal-test-container .result-comparison { grid-template-columns: 1fr; gap: 15px; } .animal-test-container .test-header h1 { font-size: 24px; } } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;animal-test-container&quot;&gt; &lt;div class=&quot;test-header&quot;&gt; &lt;h1&gt; 나와 닮은 동물 찾기 테스트 &lt;/h1&gt; &lt;p&gt;AI가 분석해서 당신과 닮은 동물을 찾아드려요!&lt;/p&gt; &lt;/div&gt; &lt;!-- 업로드 섹션 --&gt; &lt;div class=&quot;upload-section&quot;&gt; &lt;div class=&quot;upload-area&quot; id=&quot;uploadArea&quot;&gt; &lt;div style=&quot;font-size: 48px; margin-bottom: 10px;&quot;&gt; &lt;/div&gt; &lt;div class=&quot;upload-text&quot;&gt;사진을 업로드하세요&lt;/div&gt; &lt;div class=&quot;upload-subtext&quot;&gt;클릭하거나 드래그해서 사진을 올려주세요&lt;/div&gt; &lt;/div&gt; &lt;input type=&quot;file&quot; id=&quot;imageInput&quot; accept=&quot;image/*&quot;&gt; &lt;button class=&quot;btn&quot; id=&quot;analyzeBtn&quot; disabled&gt; AI 분석 시작하기&lt;/button&gt; &lt;/div&gt; &lt;!-- 미리보기 섹션 --&gt; &lt;div class=&quot;preview-section&quot; id=&quot;previewSection&quot;&gt; &lt;h3 style=&quot;text-align: center; margin-bottom: 20px;&quot;&gt; 업로드된 사진&lt;/h3&gt; &lt;img id=&quot;imagePreview&quot; class=&quot;image-preview&quot; alt=&quot;미리보기&quot;&gt; &lt;/div&gt; &lt;!-- 로딩 섹션 --&gt; &lt;div class=&quot;loading&quot; id=&quot;loadingSection&quot;&gt; &lt;div class=&quot;loading-spinner&quot;&gt;&lt;/div&gt; &lt;p&gt;AI가 열심히 분석 중이에요... &lt;/p&gt; &lt;p style=&quot;font-size: 14px; margin-top: 10px;&quot;&gt;잠시만 기다려주세요!&lt;/p&gt; &lt;/div&gt; &lt;!-- 결과 섹션 --&gt; &lt;div class=&quot;result-section&quot; id=&quot;resultSection&quot;&gt; &lt;h2 style=&quot;color: #667eea; margin-bottom: 20px;&quot;&gt; 분석 완료!&lt;/h2&gt; &lt;div class=&quot;result-comparison&quot;&gt; &lt;div&gt; &lt;img id=&quot;userImage&quot; class=&quot;result-image&quot; alt=&quot;당신의 사진&quot;&gt; &lt;h4 style=&quot;margin-top: 10px;&quot;&gt;당신&lt;/h4&gt; &lt;/div&gt; &lt;div class=&quot;vs-text&quot;&gt;VS&lt;/div&gt; &lt;div&gt; &lt;canvas id=&quot;animalCanvas&quot; class=&quot;result-image&quot; width=&quot;150&quot; height=&quot;150&quot;&gt;&lt;/canvas&gt; &lt;h4 style=&quot;margin-top: 10px;&quot; id=&quot;animalName&quot;&gt;동물&lt;/h4&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;similarity-score&quot;&gt; &lt;h3&gt; 유사도&lt;/h3&gt; &lt;div style=&quot;font-size: 32px; font-weight: bold;&quot; id=&quot;similarityPercent&quot;&gt;0%&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;detailed-analysis&quot; id=&quot;detailedAnalysis&quot;&gt; &lt;h4&gt; 상세 분석 결과&lt;/h4&gt; &lt;div id=&quot;analysisDetails&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;animal-info&quot;&gt; &lt;h4 id=&quot;animalInfoTitle&quot;&gt;동물 정보&lt;/h4&gt; &lt;div id=&quot;animalInfoText&quot;&gt;AI 분석 결과가 여기에 표시됩니다.&lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;share-buttons&quot;&gt; &lt;button class=&quot;share-btn share-kakao&quot; id=&quot;shareKakao&quot;&gt; 카카오톡&lt;/button&gt; &lt;button class=&quot;share-btn share-instagram&quot; id=&quot;shareInstagram&quot;&gt; 인스타그램&lt;/button&gt; &lt;button class=&quot;share-btn share-facebook&quot; id=&quot;shareFacebook&quot;&gt; 페이스북&lt;/button&gt; &lt;button class=&quot;share-btn share-twitter&quot; id=&quot;shareTwitter&quot;&gt; X&lt;/button&gt; &lt;/div&gt; &lt;button class=&quot;btn&quot; id=&quot;resetBtn&quot;&gt; 다시 테스트하기&lt;/button&gt; &lt;/div&gt; &lt;div class=&quot;notification&quot; id=&quot;notification&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;script&gt; // 동물 데이터베이스 const animals = [ { name: &quot;사자&quot;, category: &quot;포유류&quot;, habitat: &quot;아프리카 사바나&quot;, personality: &quot;리더십이 강하고 당당한 성격&quot;, traits: [&quot;날카로운 눈매&quot;, &quot;강인한 턱선&quot;, &quot;카리스마 있는 표정&quot;], info: &quot;백수의 왕이라 불리는 사자는 강력한 리더십과 용기를 상징합니다.&quot;, lifespan: &quot;10-14년&quot;, size: &quot;대형&quot;, advice: &quot;자신감을 가지고 리더십을 발휘하세요!&quot; }, { name: &quot;여우&quot;, category: &quot;포유류&quot;, habitat: &quot;전세계 다양한 지역&quot;, personality: &quot;영리하고 교활한 성격&quot;, traits: [&quot;날카로운 눈매&quot;, &quot;좁은 얼굴형&quot;, &quot;장난스러운 미소&quot;], info: &quot;영리함과 적응력이 뛰어난 여우는 지혜와 교활함을 상징합니다.&quot;, lifespan: &quot;2-5년&quot;, size: &quot;중형&quot;, advice: &quot;기회를 놓치지 말고 빠르게 판단하세요!&quot; }, { name: &quot;고양이&quot;, category: &quot;포유류&quot;, habitat: &quot;전세계 (반려동물)&quot;, personality: &quot;독립적이고 우아한 성격&quot;, traits: [&quot;큰 눈&quot;, &quot;작은 얼굴&quot;, &quot;우아한 표정&quot;], info: &quot;독립적이고 우아한 고양이는 자유로운 영혼을 상징합니다.&quot;, lifespan: &quot;12-18년&quot;, size: &quot;소형&quot;, advice: &quot;자신만의 공간을 소중히 여기세요!&quot; }, { name: &quot;강아지&quot;, category: &quot;포유류&quot;, habitat: &quot;전세계 (반려동물)&quot;, personality: &quot;충성스럽고 활발한 성격&quot;, traits: [&quot;큰 눈&quot;, &quot;둥근 얼굴&quot;, &quot;밝은 표정&quot;], info: &quot;충성스럽고 사랑스러운 강아지는 우정과 신뢰를 상징합니다.&quot;, lifespan: &quot;10-15년&quot;, size: &quot;소형-대형&quot;, advice: &quot;주변 사람들과의 관계를 소중히 하세요!&quot; }, { name: &quot;늑대&quot;, category: &quot;포유류&quot;, habitat: &quot;북반구 산림지대&quot;, personality: &quot;충성스럽고 협동적인 성격&quot;, traits: [&quot;날카로운 눈매&quot;, &quot;강인한 턱선&quot;, &quot;야성적인 표정&quot;], info: &quot;무리를 이루며 사는 늑대는 협동과 충성을 상징합니다.&quot;, lifespan: &quot;6-8년&quot;, size: &quot;대형&quot;, advice: &quot;팀워크를 중시하고 동료들과 협력하세요!&quot; }, { name: &quot;부엉이&quot;, category: &quot;조류&quot;, habitat: &quot;전세계 숲과 초원&quot;, personality: &quot;지혜롭고 신중한 성격&quot;, traits: [&quot;큰 눈&quot;, &quot;둥근 얼굴&quot;, &quot;집중하는 표정&quot;], info: &quot;밤의 사냥꾼 부엉이는 지혜와 직관을 상징합니다.&quot;, lifespan: &quot;5-10년&quot;, size: &quot;중형&quot;, advice: &quot;신중하게 생각하고 직감을 믿으세요!&quot; }, { name: &quot;독수리&quot;, category: &quot;조류&quot;, habitat: &quot;산악지대&quot;, personality: &quot;자유롭고 고독한 성격&quot;, traits: [&quot;날카로운 눈매&quot;, &quot;강인한 인상&quot;, &quot;당당한 표정&quot;], info: &quot;하늘의 제왕 독수리는 자유와 고귀함을 상징합니다.&quot;, lifespan: &quot;20-30년&quot;, size: &quot;대형&quot;, advice: &quot;높은 목표를 세우고 도전하세요!&quot; }, { name: &quot;판다&quot;, category: &quot;포유류&quot;, habitat: &quot;중국 대나무 숲&quot;, personality: &quot;온순하고 귀여운 성격&quot;, traits: [&quot;큰 눈&quot;, &quot;둥근 얼굴&quot;, &quot;온순한 표정&quot;], info: &quot;사랑스러운 판다는 평화와 순수함을 상징합니다.&quot;, lifespan: &quot;20년&quot;, size: &quot;대형&quot;, advice: &quot;마음의 평화를 유지하고 여유를 가지세요!&quot; }, { name: &quot;호랑이&quot;, category: &quot;포유류&quot;, habitat: &quot;아시아 정글&quot;, personality: &quot;용맹하고 독립적인 성격&quot;, traits: [&quot;날카로운 눈매&quot;, &quot;강인한 턱선&quot;, &quot;위엄있는 표정&quot;], info: &quot;용맹한 호랑이는 힘과 용기를 상징합니다.&quot;, lifespan: &quot;8-10년&quot;, size: &quot;대형&quot;, advice: &quot;용기를 내어 도전하고 독립적으로 행동하세요!&quot; }, { name: &quot;코끼리&quot;, category: &quot;포유류&quot;, habitat: &quot;아프리카, 아시아&quot;, personality: &quot;지혜롭고 온화한 성격&quot;, traits: [&quot;작은 눈&quot;, &quot;둥근 얼굴&quot;, &quot;온화한 표정&quot;], info: &quot;거대하고 지혜로운 코끼리는 기억력과 가족애를 상징합니다.&quot;, lifespan: &quot;60-70년&quot;, size: &quot;초대형&quot;, advice: &quot;가족과 친구들을 소중히 여기세요!&quot; }, { name: &quot;돌고래&quot;, category: &quot;해양포유류&quot;, habitat: &quot;전세계 바다&quot;, personality: &quot;지능적이고 사교적인 성격&quot;, traits: [&quot;밝은 눈&quot;, &quot;웃는 표정&quot;, &quot;친근한 인상&quot;], info: &quot;영리한 돌고래는 지능과 소통능력을 상징합니다.&quot;, lifespan: &quot;20-45년&quot;, size: &quot;대형&quot;, advice: &quot;소통을 중시하고 긍정적인 마음을 가지세요!&quot; }, { name: &quot;토끼&quot;, category: &quot;포유류&quot;, habitat: &quot;전세계 초원&quot;, personality: &quot;순수하고 온순한 성격&quot;, traits: [&quot;큰 눈&quot;, &quot;작은 얼굴&quot;, &quot;순수한 표정&quot;], info: &quot;귀여운 토끼는 순수함과 민첩함을 상징합니다.&quot;, lifespan: &quot;8-12년&quot;, size: &quot;소형&quot;, advice: &quot;순수한 마음을 잃지 말고 빠르게 행동하세요!&quot; }, { name: &quot;곰&quot;, category: &quot;포유류&quot;, habitat: &quot;북반구 숲&quot;, personality: &quot;온순하지만 강한 성격&quot;, traits: [&quot;작은 눈&quot;, &quot;둥근 얼굴&quot;, &quot;든든한 인상&quot;], info: &quot;든든한 곰은 보호본능과 힘을 상징합니다.&quot;, lifespan: &quot;20-30년&quot;, size: &quot;대형&quot;, advice: &quot;주변 사람들을 보호하고 든든한 버팀목이 되세요!&quot; }, { name: &quot;기린&quot;, category: &quot;포유류&quot;, habitat: &quot;아프리카 사바나&quot;, personality: &quot;온화하고 우아한 성격&quot;, traits: [&quot;큰 눈&quot;, &quot;긴 얼굴&quot;, &quot;우아한 표정&quot;], info: &quot;우아한 기린은 품격과 시야의 넓음을 상징합니다.&quot;, lifespan: &quot;20-25년&quot;, size: &quot;초대형&quot;, advice: &quot;넓은 시야를 가지고 우아하게 행동하세요!&quot; }, { name: &quot;펭귄&quot;, category: &quot;조류&quot;, habitat: &quot;남극&quot;, personality: &quot;사교적이고 충성스러운 성격&quot;, traits: [&quot;둥근 눈&quot;, &quot;둥근 얼굴&quot;, &quot;귀여운 표정&quot;], info: &quot;사랑스러운 펭귄은 가족애와 협동을 상징합니다.&quot;, lifespan: &quot;15-20년&quot;, size: &quot;중형&quot;, advice: &quot;가족과 함께하는 시간을 소중히 여기세요!&quot; } ]; let uploadedImage = null; let analysisResult = null; // DOM 요소들 const uploadArea = document.getElementById('uploadArea'); const imageInput = document.getElementById('imageInput'); const analyzeBtn = document.getElementById('analyzeBtn'); const previewSection = document.getElementById('previewSection'); const loadingSection = document.getElementById('loadingSection'); const resultSection = document.getElementById('resultSection'); const notification = document.getElementById('notification'); // 파일 업로드 처리 uploadArea.addEventListener('click', function() { imageInput.click(); }); imageInput.addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { handleImageUpload(file); } }); // 드래그 앤 드롭 처리 uploadArea.addEventListener('dragover', function(e) { e.preventDefault(); uploadArea.classList.add('dragover'); }); uploadArea.addEventListener('dragleave', function(e) { e.preventDefault(); uploadArea.classList.remove('dragover'); }); uploadArea.addEventListener('drop', function(e) { e.preventDefault(); uploadArea.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file &amp;&amp; file.type.startsWith('image/')) { handleImageUpload(file); } }); function handleImageUpload(file) { const reader = new FileReader(); reader.onload = function(e) { uploadedImage = e.target.result; // 미리보기 표시 const previewImg = document.getElementById('imagePreview'); previewImg.src = uploadedImage; previewSection.style.display = 'block'; // 분석 버튼 활성화 analyzeBtn.disabled = false; showNotification('사진이 성공적으로 업로드되었습니다!'); }; reader.readAsDataURL(file); } // AI 분석 시작 analyzeBtn.addEventListener('click', function() { if (!uploadedImage) return; // 로딩 섹션으로 스크롤 loadingSection.scrollIntoView({ behavior: 'smooth' }); // 로딩 표시 loadingSection.style.display = 'block'; resultSection.style.display = 'none'; showNotification('AI 분석을 시작합니다!'); // 실제 AI 분석 시뮬레이션 setTimeout(() =&gt; { performAnalysis(); }, 3000); }); function performAnalysis() { // 랜덤하게 동물 선택 const selectedAnimal = animals[Math.floor(Math.random() * animals.length)]; // 유사도 랜덤 생성 (70-95%) const similarity = Math.floor(Math.random() * 26) + 70; analysisResult = { animal: selectedAnimal, similarity: similarity }; displayResult(); } function displayResult() { // 로딩 숨기기 loadingSection.style.display = 'none'; // 사용자 이미지 표시 document.getElementById('userImage').src = uploadedImage; // 동물 정보 표시 const animal = analysisResult.animal; document.getElementById('animalName').textContent = animal.name; document.getElementById('similarityPercent').textContent = analysisResult.similarity + '%'; // 상세 분석 표시 displayDetailedAnalysis(animal); // 동물 정보 표시 document.getElementById('animalInfoTitle').textContent = &#96;${animal.name} (${animal.category})&#96;; document.getElementById('animalInfoText').innerHTML = &#96; &lt;p&gt;&lt;strong&gt;서식지:&lt;/strong&gt; ${animal.habitat}&lt;/p&gt; &lt;p&gt;&lt;strong&gt;수명:&lt;/strong&gt; ${animal.lifespan}&lt;/p&gt; &lt;p&gt;&lt;strong&gt;크기:&lt;/strong&gt; ${animal.size}&lt;/p&gt; &lt;p&gt;&lt;strong&gt;성격:&lt;/strong&gt; ${animal.personality}&lt;/p&gt; &lt;p&gt;&lt;strong&gt;특징:&lt;/strong&gt; ${animal.info}&lt;/p&gt; &lt;p&gt;&lt;strong&gt;조언:&lt;/strong&gt; ${animal.advice}&lt;/p&gt; &#96;; // 동물 얼굴 그리기 drawAnimalFace(animal); // 결과 섹션으로 스크롤 resultSection.scrollIntoView({ behavior: 'smooth' }); // 결과 섹션 표시 resultSection.style.display = 'block'; showNotification('분석이 완료되었습니다!'); } function displayDetailedAnalysis(animal) { const analysisDetails = document.getElementById('analysisDetails'); let detailsHTML = '&lt;p&gt;&lt;strong&gt;닮은 특징들:&lt;/strong&gt;&lt;/p&gt;'; animal.traits.forEach((trait, index) =&gt; { const score = Math.floor(Math.random() * 20) + 80; // 80-99% detailsHTML += &#96; &lt;div class=&quot;trait-match&quot;&gt; &lt;span&gt;${trait}&lt;/span&gt; &lt;span class=&quot;trait-score&quot;&gt;${score}%&lt;/span&gt; &lt;/div&gt; &#96;; }); detailsHTML += &#96;&lt;p style=&quot;margin-top: 15px;&quot;&gt;&lt;strong&gt;종합 분석:&lt;/strong&gt; ${animal.personality} 특성이 강하게 나타납니다.&lt;/p&gt;&#96;; analysisDetails.innerHTML = detailsHTML; } function drawAnimalFace(animal) { const canvas = document.getElementById('animalCanvas'); const ctx = canvas.getContext('2d'); // 캔버스 초기화 ctx.clearRect(0, 0, 150, 150); // 배경 그라데이션 const gradient = ctx.createLinearGradient(0, 0, 150, 150); gradient.addColorStop(0, '#ff9a9e'); gradient.addColorStop(1, '#fecfef'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 150, 150); // 동물별 특징적인 그림 그리기 if (animal.name === '고양이' || animal.name === '사자' || animal.name === '호랑이') { // 고양이과 동물들 drawCatFamily(ctx, animal.name); } else if (animal.name === '강아지' || animal.name === '늑대') { // 개과 동물들 drawDogFamily(ctx, animal.name); } else if (animal.name === '부엉이' || animal.name === '독수리' || animal.name === '펭귄') { // 조류 drawBird(ctx, animal.name); } else { // 기본 동물 얼굴 drawGenericAnimal(ctx, animal.name); } // 동물 이름 표시 ctx.fillStyle = '#fff'; ctx.font = 'bold 12px Arial'; ctx.textAlign = 'center'; ctx.fillText(animal.name, 75, 140); } function drawCatFamily(ctx, animalName) { // 얼굴 ctx.fillStyle = '#fdbcb4'; ctx.beginPath(); ctx.ellipse(75, 75, 45, 50, 0, 0, 2 * Math.PI); ctx.fill(); // 귀 ctx.beginPath(); ctx.moveTo(45, 45); ctx.lineTo(55, 25); ctx.lineTo(65, 45); ctx.fill(); ctx.beginPath(); ctx.moveTo(85, 45); ctx.lineTo(95, 25); ctx.lineTo(105, 45); ctx.fill(); // 눈 ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(60, 65, 6, 8, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 65, 6, 8, 0, 0, 2 * Math.PI); ctx.fill(); // 코 ctx.fillStyle = '#ff69b4'; ctx.beginPath(); ctx.moveTo(75, 78); ctx.lineTo(70, 85); ctx.lineTo(80, 85); ctx.fill(); // 입 ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(75, 95, 10, 0, Math.PI); ctx.stroke(); } function drawDogFamily(ctx, animalName) { // 얼굴 ctx.fillStyle = '#deb887'; ctx.beginPath(); ctx.ellipse(75, 80, 50, 45, 0, 0, 2 * Math.PI); ctx.fill(); // 귀 (늘어진 형태) ctx.beginPath(); ctx.ellipse(45, 60, 15, 25, -0.5, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(105, 60, 15, 25, 0.5, 0, 2 * Math.PI); ctx.fill(); // 눈 ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(60, 70, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 70, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); // 코 ctx.fillStyle = '#000'; ctx.beginPath(); ctx.ellipse(75, 85, 5, 3, 0, 0, 2 * Math.PI); ctx.fill(); // 입 ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(75, 100, 15, 0, Math.PI); ctx.stroke(); } function drawBird(ctx, animalName) { // 머리 ctx.fillStyle = '#8B4513'; ctx.beginPath(); ctx.ellipse(75, 70, 40, 45, 0, 0, 2 * Math.PI); ctx.fill(); // 눈 ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.ellipse(60, 60, 12, 15, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 60, 12, 15, 0, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(60, 60, 6, 6, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 60, 6, 6, 0, 0, 2 * Math.PI); ctx.fill(); // 부리 ctx.fillStyle = '#FFA500'; ctx.beginPath(); ctx.moveTo(75, 80); ctx.lineTo(60, 90); ctx.lineTo(75, 95); ctx.lineTo(90, 90); ctx.fill(); } function drawGenericAnimal(ctx, animalName) { // 기본 동물 얼굴 ctx.fillStyle = '#D2691E'; ctx.beginPath(); ctx.ellipse(75, 75, 45, 50, 0, 0, 2 * Math.PI); ctx.fill(); // 눈 ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(60, 65, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 65, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); // 코 ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(75, 75); ctx.lineTo(78, 85); ctx.stroke(); // 입 ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(75, 95, 12, 0, Math.PI); ctx.stroke(); } // 공유 기능들 document.getElementById('shareKakao').addEventListener('click', function() { shareToKakao(); }); document.getElementById('shareInstagram').addEventListener('click', function() { shareToInstagram(); }); document.getElementById('shareFacebook').addEventListener('click', function() { shareToFacebook(); }); document.getElementById('shareTwitter').addEventListener('click', function() { shareToTwitter(); }); function shareToKakao() { const text = &#96;나는 ${analysisResult.animal.name}와 ${analysisResult.similarity}% 닮았어요! 여러분도 해보세요!&#96;; copyToClipboard(text); showNotification('카카오톡 공유 텍스트가 복사되었습니다!'); } function shareToInstagram() { const text = &#96;나는 ${analysisResult.animal.name}와 ${analysisResult.similarity}% 닮았어요! #동물닮은꼴 #심리테스트 #재미있는테스트 #동물테스트&#96;; copyToClipboard(text); showNotification('인스타그램 공유 텍스트가 복사되었습니다!'); } function shareToFacebook() { const text = &#96;나와 닮은 동물 테스트 결과: ${analysisResult.animal.name} ${analysisResult.similarity}%! 여러분도 해보세요!&#96;; const url = &#96;https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&amp;quote=${encodeURIComponent(text)}&#96;; window.open(url, '_blank', 'width=600,height=400'); } function shareToTwitter() { const text = &#96;나는 ${analysisResult.animal.name}와 ${analysisResult.similarity}% 닮았어요! #동물닮은꼴 #심리테스트&#96;; const url = &#96;https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&amp;url=${encodeURIComponent(window.location.href)}&#96;; window.open(url, '_blank', 'width=600,height=400'); } function copyToClipboard(text) { if (navigator.clipboard &amp;&amp; navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function() { console.log('텍스트가 클립보드에 복사되었습니다.'); }, function(err) { console.error('클립보드 복사 실패:', err); fallbackCopyTextToClipboard(text); }); } else { fallbackCopyTextToClipboard(text); } } function fallbackCopyTextToClipboard(text) { const textArea = document.createElement(&quot;textarea&quot;); textArea.value = text; textArea.style.top = &quot;0&quot;; textArea.style.left = &quot;0&quot;; textArea.style.position = &quot;fixed&quot;; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); console.log('Fallback: 텍스트가 클립보드에 복사되었습니다.'); } catch (err) { console.error('Fallback: 클립보드 복사 실패:', err); } document.body.removeChild(textArea); } // 리셋 기능 document.getElementById('resetBtn').addEventListener('click', function() { resetTest(); }); function resetTest() { // 모든 변수 초기화 uploadedImage = null; analysisResult = null; // UI 상태 완전 리셋 previewSection.style.display = 'none'; loadingSection.style.display = 'none'; resultSection.style.display = 'none'; analyzeBtn.disabled = true; imageInput.value = ''; // 업로드 영역 초기화 uploadArea.classList.remove('dragover'); // 맨 위로 부드러운 스크롤 document.querySelector('.animal-test-container').scrollIntoView({ behavior: 'smooth' }); showNotification('테스트가 초기화되었습니다!'); } // 알림 표시 함수 function showNotification(message) { notification.textContent = message; notification.classList.add('show'); setTimeout(() =&gt; { notification.classList.remove('show'); }, 3000); } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;"> <style> .animal-test-container * { margin: 0; padding: 0; box-sizing: border-box; } .animal-test-container { max-width: 800px; margin: 20px auto; padding: 20px; font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; } .animal-test-container .test-header { text-align: center; color: white; margin-bottom: 30px; } .animal-test-container .test-header h1 { font-size: 32px; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); } .animal-test-container .test-header p { font-size: 18px; opacity: 0.9; } .animal-test-container .upload-section { background: white; padding: 30px; border-radius: 15px; text-align: center; margin-bottom: 20px; } .animal-test-container .upload-area { border: 3px dashed #667eea; border-radius: 15px; padding: 40px 20px; margin: 20px 0; cursor: pointer; transition: all 0.3s ease; } .animal-test-container .upload-area:hover { border-color: #764ba2; background: #f8f9ff; transform: translateY(-2px); } .animal-test-container .upload-area.dragover { border-color: #4CAF50; background: #e8f5e8; } .animal-test-container #imageInput { display: none; } .animal-test-container .upload-text { color: #667eea; font-size: 18px; font-weight: bold; margin: 10px 0; } .animal-test-container .upload-subtext { color: #999; font-size: 14px; } .animal-test-container .preview-section { display: none; background: white; padding: 30px; border-radius: 15px; margin: 20px 0; text-align: center; } .animal-test-container .image-preview { max-width: 200px; max-height: 200px; border-radius: 10px; margin: 10px auto; display: block; } .animal-test-container .result-section { display: none; background: white; padding: 30px; border-radius: 15px; text-align: center; } .animal-test-container .result-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin: 20px 0; } .animal-test-container .result-image { width: 150px; height: 150px; border-radius: 15px; margin: 0 auto; object-fit: cover; } .animal-test-container .vs-text { background: #667eea; color: white; padding: 10px; border-radius: 50%; font-weight: bold; } .animal-test-container .animal-info { margin: 20px 0; padding: 20px; background: #f8f9ff; border-radius: 15px; text-align: left; } .animal-test-container .similarity-score { background: linear-gradient(135deg, #4CAF50, #45a049); color: white; padding: 15px; border-radius: 15px; margin: 20px 0; } .animal-test-container .btn { background: linear-gradient(135deg, #667eea, #764ba2); color: white; border: none; padding: 15px 30px; border-radius: 25px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin: 10px; } .animal-test-container .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .animal-test-container .btn:disabled { opacity: 0.6; cursor: not-allowed; } .animal-test-container .loading { display: none; text-align: center; padding: 20px; color: #667eea; background: white; border-radius: 15px; margin: 20px 0; } .animal-test-container .loading-spinner { border: 4px solid #f3f3f3; border-top: 4px solid #667eea; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 0 auto 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .animal-test-container .share-buttons { display: flex; justify-content: center; gap: 10px; margin: 20px 0; flex-wrap: wrap; } .animal-test-container .share-btn { padding: 10px 20px; border: none; border-radius: 20px; font-size: 14px; cursor: pointer; transition: all 0.3s ease; } .animal-test-container .share-kakao { background: #FEE500; color: #000; } .animal-test-container .share-instagram { background: #E4405F; color: white; } .animal-test-container .share-facebook { background: #1877F2; color: white; } .animal-test-container .share-twitter { background: #1DA1F2; color: white; } .animal-test-container .notification { position: fixed; top: 20px; right: 20px; background: #4CAF50; color: white; padding: 15px 20px; border-radius: 10px; z-index: 1000; opacity: 0; transform: translateX(100%); transition: all 0.3s ease; } .animal-test-container .notification.show { opacity: 1; transform: translateX(0); } .animal-test-container .detailed-analysis { background: #fff8f0; padding: 20px; border-radius: 15px; margin: 20px 0; border-left: 5px solid #ff9800; } .animal-test-container .trait-match { display: flex; justify-content: space-between; align-items: center; margin: 10px 0; padding: 8px; background: rgba(102, 126, 234, 0.1); border-radius: 8px; } .animal-test-container .trait-score { background: #667eea; color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px; } @media (max-width: 768px) { .animal-test-container { margin: 10px; padding: 15px; } .animal-test-container .result-comparison { grid-template-columns: 1fr; gap: 15px; } .animal-test-container .test-header h1 { font-size: 24px; } } </style> <div class="animal-test-container"> <div class="test-header"> <h1> 나와 닮은 동물 찾기 테스트 </h1> <p data-ke-size="size16">AI가 분석해서 당신과 닮은 동물을 찾아드려요!</p> </div> <!-- 업로드 섹션 --> <div class="upload-section"> <div id="uploadArea" class="upload-area"> <div style="font-size: 48px; margin-bottom: 10px;"> </div> <div class="upload-text">사진을 업로드하세요</div> <div class="upload-subtext">클릭하거나 드래그해서 사진을 올려주세요</div> </div> <input id="imageInput" accept="image/*" type="file" /> <button id="analyzeBtn" class="btn" disabled="disabled"> AI 분석 시작하기</button></div> <!-- 미리보기 섹션 --> <div id="previewSection" class="preview-section"> <h3 style="text-align: center; margin-bottom: 20px;" data-ke-size="size23"> 업로드된 사진</h3> <img id="imagePreview" class="image-preview" alt="미리보기" /></div> <!-- 로딩 섹션 --> <div id="loadingSection" class="loading"> <div class="loading-spinner">&nbsp;</div> <p data-ke-size="size16">AI가 열심히 분석 중이에요... </p> <p style="font-size: 14px; margin-top: 10px;" data-ke-size="size16">잠시만 기다려주세요!</p> </div> <!-- 결과 섹션 --> <div id="resultSection" class="result-section"> <h2 style="color: #667eea; margin-bottom: 20px;" data-ke-size="size26"> 분석 완료!</h2> <div class="result-comparison"> <div><img id="userImage" class="result-image" alt="당신의 사진" /> <h4 style="margin-top: 10px;" data-ke-size="size20">당신</h4> </div> <div class="vs-text">VS</div> <div><canvas id="animalCanvas" class="result-image" width="150" height="150"></canvas> <h4 id="animalName" style="margin-top: 10px;" data-ke-size="size20">동물</h4> </div> </div> <div class="similarity-score"> <h3 data-ke-size="size23"> 유사도</h3> <div id="similarityPercent" style="font-size: 32px; font-weight: bold;">0%</div> </div> <div id="detailedAnalysis" class="detailed-analysis"> <h4 data-ke-size="size20"> 상세 분석 결과</h4> <div id="analysisDetails">&nbsp;</div> </div> <div class="animal-info"> <h4 id="animalInfoTitle" data-ke-size="size20">동물 정보</h4> <div id="animalInfoText">AI 분석 결과가 여기에 표시됩니다.</div> </div> <div class="share-buttons"><button id="shareKakao" class="share-btn share-kakao"> 카카오톡</button> <button id="shareInstagram" class="share-btn share-instagram"> 인스타그램</button> <button id="shareFacebook" class="share-btn share-facebook"> 페이스북</button> <button id="shareTwitter" class="share-btn share-twitter"> X</button></div> <button id="resetBtn" class="btn"> 다시 테스트하기</button></div> <div id="notification" class="notification">&nbsp;</div> </div> <script> // 동물 데이터베이스 const animals = [ { name: "사자", category: "포유류", habitat: "아프리카 사바나", personality: "리더십이 강하고 당당한 성격", traits: ["날카로운 눈매", "강인한 턱선", "카리스마 있는 표정"], info: "백수의 왕이라 불리는 사자는 강력한 리더십과 용기를 상징합니다.", lifespan: "10-14년", size: "대형", advice: "자신감을 가지고 리더십을 발휘하세요!" }, { name: "여우", category: "포유류", habitat: "전세계 다양한 지역", personality: "영리하고 교활한 성격", traits: ["날카로운 눈매", "좁은 얼굴형", "장난스러운 미소"], info: "영리함과 적응력이 뛰어난 여우는 지혜와 교활함을 상징합니다.", lifespan: "2-5년", size: "중형", advice: "기회를 놓치지 말고 빠르게 판단하세요!" }, { name: "고양이", category: "포유류", habitat: "전세계 (반려동물)", personality: "독립적이고 우아한 성격", traits: ["큰 눈", "작은 얼굴", "우아한 표정"], info: "독립적이고 우아한 고양이는 자유로운 영혼을 상징합니다.", lifespan: "12-18년", size: "소형", advice: "자신만의 공간을 소중히 여기세요!" }, { name: "강아지", category: "포유류", habitat: "전세계 (반려동물)", personality: "충성스럽고 활발한 성격", traits: ["큰 눈", "둥근 얼굴", "밝은 표정"], info: "충성스럽고 사랑스러운 강아지는 우정과 신뢰를 상징합니다.", lifespan: "10-15년", size: "소형-대형", advice: "주변 사람들과의 관계를 소중히 하세요!" }, { name: "늑대", category: "포유류", habitat: "북반구 산림지대", personality: "충성스럽고 협동적인 성격", traits: ["날카로운 눈매", "강인한 턱선", "야성적인 표정"], info: "무리를 이루며 사는 늑대는 협동과 충성을 상징합니다.", lifespan: "6-8년", size: "대형", advice: "팀워크를 중시하고 동료들과 협력하세요!" }, { name: "부엉이", category: "조류", habitat: "전세계 숲과 초원", personality: "지혜롭고 신중한 성격", traits: ["큰 눈", "둥근 얼굴", "집중하는 표정"], info: "밤의 사냥꾼 부엉이는 지혜와 직관을 상징합니다.", lifespan: "5-10년", size: "중형", advice: "신중하게 생각하고 직감을 믿으세요!" }, { name: "독수리", category: "조류", habitat: "산악지대", personality: "자유롭고 고독한 성격", traits: ["날카로운 눈매", "강인한 인상", "당당한 표정"], info: "하늘의 제왕 독수리는 자유와 고귀함을 상징합니다.", lifespan: "20-30년", size: "대형", advice: "높은 목표를 세우고 도전하세요!" }, { name: "판다", category: "포유류", habitat: "중국 대나무 숲", personality: "온순하고 귀여운 성격", traits: ["큰 눈", "둥근 얼굴", "온순한 표정"], info: "사랑스러운 판다는 평화와 순수함을 상징합니다.", lifespan: "20년", size: "대형", advice: "마음의 평화를 유지하고 여유를 가지세요!" }, { name: "호랑이", category: "포유류", habitat: "아시아 정글", personality: "용맹하고 독립적인 성격", traits: ["날카로운 눈매", "강인한 턱선", "위엄있는 표정"], info: "용맹한 호랑이는 힘과 용기를 상징합니다.", lifespan: "8-10년", size: "대형", advice: "용기를 내어 도전하고 독립적으로 행동하세요!" }, { name: "코끼리", category: "포유류", habitat: "아프리카, 아시아", personality: "지혜롭고 온화한 성격", traits: ["작은 눈", "둥근 얼굴", "온화한 표정"], info: "거대하고 지혜로운 코끼리는 기억력과 가족애를 상징합니다.", lifespan: "60-70년", size: "초대형", advice: "가족과 친구들을 소중히 여기세요!" }, { name: "돌고래", category: "해양포유류", habitat: "전세계 바다", personality: "지능적이고 사교적인 성격", traits: ["밝은 눈", "웃는 표정", "친근한 인상"], info: "영리한 돌고래는 지능과 소통능력을 상징합니다.", lifespan: "20-45년", size: "대형", advice: "소통을 중시하고 긍정적인 마음을 가지세요!" }, { name: "토끼", category: "포유류", habitat: "전세계 초원", personality: "순수하고 온순한 성격", traits: ["큰 눈", "작은 얼굴", "순수한 표정"], info: "귀여운 토끼는 순수함과 민첩함을 상징합니다.", lifespan: "8-12년", size: "소형", advice: "순수한 마음을 잃지 말고 빠르게 행동하세요!" }, { name: "곰", category: "포유류", habitat: "북반구 숲", personality: "온순하지만 강한 성격", traits: ["작은 눈", "둥근 얼굴", "든든한 인상"], info: "든든한 곰은 보호본능과 힘을 상징합니다.", lifespan: "20-30년", size: "대형", advice: "주변 사람들을 보호하고 든든한 버팀목이 되세요!" }, { name: "기린", category: "포유류", habitat: "아프리카 사바나", personality: "온화하고 우아한 성격", traits: ["큰 눈", "긴 얼굴", "우아한 표정"], info: "우아한 기린은 품격과 시야의 넓음을 상징합니다.", lifespan: "20-25년", size: "초대형", advice: "넓은 시야를 가지고 우아하게 행동하세요!" }, { name: "펭귄", category: "조류", habitat: "남극", personality: "사교적이고 충성스러운 성격", traits: ["둥근 눈", "둥근 얼굴", "귀여운 표정"], info: "사랑스러운 펭귄은 가족애와 협동을 상징합니다.", lifespan: "15-20년", size: "중형", advice: "가족과 함께하는 시간을 소중히 여기세요!" } ]; let uploadedImage = null; let analysisResult = null; // DOM 요소들 const uploadArea = document.getElementById('uploadArea'); const imageInput = document.getElementById('imageInput'); const analyzeBtn = document.getElementById('analyzeBtn'); const previewSection = document.getElementById('previewSection'); const loadingSection = document.getElementById('loadingSection'); const resultSection = document.getElementById('resultSection'); const notification = document.getElementById('notification'); // 파일 업로드 처리 uploadArea.addEventListener('click', function() { imageInput.click(); }); imageInput.addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { handleImageUpload(file); } }); // 드래그 앤 드롭 처리 uploadArea.addEventListener('dragover', function(e) { e.preventDefault(); uploadArea.classList.add('dragover'); }); uploadArea.addEventListener('dragleave', function(e) { e.preventDefault(); uploadArea.classList.remove('dragover'); }); uploadArea.addEventListener('drop', function(e) { e.preventDefault(); uploadArea.classList.remove('dragover'); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith('image/')) { handleImageUpload(file); } }); function handleImageUpload(file) { const reader = new FileReader(); reader.onload = function(e) { uploadedImage = e.target.result; // 미리보기 표시 const previewImg = document.getElementById('imagePreview'); previewImg.src = uploadedImage; previewSection.style.display = 'block'; // 분석 버튼 활성화 analyzeBtn.disabled = false; showNotification('사진이 성공적으로 업로드되었습니다!'); }; reader.readAsDataURL(file); } // AI 분석 시작 analyzeBtn.addEventListener('click', function() { if (!uploadedImage) return; // 로딩 섹션으로 스크롤 loadingSection.scrollIntoView({ behavior: 'smooth' }); // 로딩 표시 loadingSection.style.display = 'block'; resultSection.style.display = 'none'; showNotification('AI 분석을 시작합니다!'); // 실제 AI 분석 시뮬레이션 setTimeout(() => { performAnalysis(); }, 3000); }); function performAnalysis() { // 랜덤하게 동물 선택 const selectedAnimal = animals[Math.floor(Math.random() * animals.length)]; // 유사도 랜덤 생성 (70-95%) const similarity = Math.floor(Math.random() * 26) + 70; analysisResult = { animal: selectedAnimal, similarity: similarity }; displayResult(); } function displayResult() { // 로딩 숨기기 loadingSection.style.display = 'none'; // 사용자 이미지 표시 document.getElementById('userImage').src = uploadedImage; // 동물 정보 표시 const animal = analysisResult.animal; document.getElementById('animalName').textContent = animal.name; document.getElementById('similarityPercent').textContent = analysisResult.similarity + '%'; // 상세 분석 표시 displayDetailedAnalysis(animal); // 동물 정보 표시 document.getElementById('animalInfoTitle').textContent = `${animal.name} (${animal.category})`; document.getElementById('animalInfoText').innerHTML = ` <p><strong>서식지:</strong> ${animal.habitat}</p> <p><strong>수명:</strong> ${animal.lifespan}</p> <p><strong>크기:</strong> ${animal.size}</p> <p><strong>성격:</strong> ${animal.personality}</p> <p><strong>특징:</strong> ${animal.info}</p> <p><strong>조언:</strong> ${animal.advice}</p> `; // 동물 얼굴 그리기 drawAnimalFace(animal); // 결과 섹션으로 스크롤 resultSection.scrollIntoView({ behavior: 'smooth' }); // 결과 섹션 표시 resultSection.style.display = 'block'; showNotification('분석이 완료되었습니다!'); } function displayDetailedAnalysis(animal) { const analysisDetails = document.getElementById('analysisDetails'); let detailsHTML = '<p><strong>닮은 특징들:</strong></p>'; animal.traits.forEach((trait, index) => { const score = Math.floor(Math.random() * 20) + 80; // 80-99% detailsHTML += ` <div class="trait-match"> <span>${trait}</span> <span class="trait-score">${score}%</span> </div> `; }); detailsHTML += `<p style="margin-top: 15px;"><strong>종합 분석:</strong> ${animal.personality} 특성이 강하게 나타납니다.</p>`; analysisDetails.innerHTML = detailsHTML; } function drawAnimalFace(animal) { const canvas = document.getElementById('animalCanvas'); const ctx = canvas.getContext('2d'); // 캔버스 초기화 ctx.clearRect(0, 0, 150, 150); // 배경 그라데이션 const gradient = ctx.createLinearGradient(0, 0, 150, 150); gradient.addColorStop(0, '#ff9a9e'); gradient.addColorStop(1, '#fecfef'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, 150, 150); // 동물별 특징적인 그림 그리기 if (animal.name === '고양이' || animal.name === '사자' || animal.name === '호랑이') { // 고양이과 동물들 drawCatFamily(ctx, animal.name); } else if (animal.name === '강아지' || animal.name === '늑대') { // 개과 동물들 drawDogFamily(ctx, animal.name); } else if (animal.name === '부엉이' || animal.name === '독수리' || animal.name === '펭귄') { // 조류 drawBird(ctx, animal.name); } else { // 기본 동물 얼굴 drawGenericAnimal(ctx, animal.name); } // 동물 이름 표시 ctx.fillStyle = '#fff'; ctx.font = 'bold 12px Arial'; ctx.textAlign = 'center'; ctx.fillText(animal.name, 75, 140); } function drawCatFamily(ctx, animalName) { // 얼굴 ctx.fillStyle = '#fdbcb4'; ctx.beginPath(); ctx.ellipse(75, 75, 45, 50, 0, 0, 2 * Math.PI); ctx.fill(); // 귀 ctx.beginPath(); ctx.moveTo(45, 45); ctx.lineTo(55, 25); ctx.lineTo(65, 45); ctx.fill(); ctx.beginPath(); ctx.moveTo(85, 45); ctx.lineTo(95, 25); ctx.lineTo(105, 45); ctx.fill(); // 눈 ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(60, 65, 6, 8, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 65, 6, 8, 0, 0, 2 * Math.PI); ctx.fill(); // 코 ctx.fillStyle = '#ff69b4'; ctx.beginPath(); ctx.moveTo(75, 78); ctx.lineTo(70, 85); ctx.lineTo(80, 85); ctx.fill(); // 입 ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(75, 95, 10, 0, Math.PI); ctx.stroke(); } function drawDogFamily(ctx, animalName) { // 얼굴 ctx.fillStyle = '#deb887'; ctx.beginPath(); ctx.ellipse(75, 80, 50, 45, 0, 0, 2 * Math.PI); ctx.fill(); // 귀 (늘어진 형태) ctx.beginPath(); ctx.ellipse(45, 60, 15, 25, -0.5, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(105, 60, 15, 25, 0.5, 0, 2 * Math.PI); ctx.fill(); // 눈 ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(60, 70, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 70, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); // 코 ctx.fillStyle = '#000'; ctx.beginPath(); ctx.ellipse(75, 85, 5, 3, 0, 0, 2 * Math.PI); ctx.fill(); // 입 ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(75, 100, 15, 0, Math.PI); ctx.stroke(); } function drawBird(ctx, animalName) { // 머리 ctx.fillStyle = '#8B4513'; ctx.beginPath(); ctx.ellipse(75, 70, 40, 45, 0, 0, 2 * Math.PI); ctx.fill(); // 눈 ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.ellipse(60, 60, 12, 15, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 60, 12, 15, 0, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(60, 60, 6, 6, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 60, 6, 6, 0, 0, 2 * Math.PI); ctx.fill(); // 부리 ctx.fillStyle = '#FFA500'; ctx.beginPath(); ctx.moveTo(75, 80); ctx.lineTo(60, 90); ctx.lineTo(75, 95); ctx.lineTo(90, 90); ctx.fill(); } function drawGenericAnimal(ctx, animalName) { // 기본 동물 얼굴 ctx.fillStyle = '#D2691E'; ctx.beginPath(); ctx.ellipse(75, 75, 45, 50, 0, 0, 2 * Math.PI); ctx.fill(); // 눈 ctx.fillStyle = '#333'; ctx.beginPath(); ctx.ellipse(60, 65, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.ellipse(90, 65, 8, 6, 0, 0, 2 * Math.PI); ctx.fill(); // 코 ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(75, 75); ctx.lineTo(78, 85); ctx.stroke(); // 입 ctx.strokeStyle = '#333'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(75, 95, 12, 0, Math.PI); ctx.stroke(); } // 공유 기능들 document.getElementById('shareKakao').addEventListener('click', function() { shareToKakao(); }); document.getElementById('shareInstagram').addEventListener('click', function() { shareToInstagram(); }); document.getElementById('shareFacebook').addEventListener('click', function() { shareToFacebook(); }); document.getElementById('shareTwitter').addEventListener('click', function() { shareToTwitter(); }); function shareToKakao() { const text = `나는 ${analysisResult.animal.name}와 ${analysisResult.similarity}% 닮았어요! 여러분도 해보세요!`; copyToClipboard(text); showNotification('카카오톡 공유 텍스트가 복사되었습니다!'); } function shareToInstagram() { const text = `나는 ${analysisResult.animal.name}와 ${analysisResult.similarity}% 닮았어요! #동물닮은꼴 #심리테스트 #재미있는테스트 #동물테스트`; copyToClipboard(text); showNotification('인스타그램 공유 텍스트가 복사되었습니다!'); } function shareToFacebook() { const text = `나와 닮은 동물 테스트 결과: ${analysisResult.animal.name} ${analysisResult.similarity}%! 여러분도 해보세요!`; const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}&quote=${encodeURIComponent(text)}`; window.open(url, '_blank', 'width=600,height=400'); } function shareToTwitter() { const text = `나는 ${analysisResult.animal.name}와 ${analysisResult.similarity}% 닮았어요! #동물닮은꼴 #심리테스트`; const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(window.location.href)}`; window.open(url, '_blank', 'width=600,height=400'); } function copyToClipboard(text) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function() { console.log('텍스트가 클립보드에 복사되었습니다.'); }, function(err) { console.error('클립보드 복사 실패:', err); fallbackCopyTextToClipboard(text); }); } else { fallbackCopyTextToClipboard(text); } } function fallbackCopyTextToClipboard(text) { const textArea = document.createElement("textarea"); textArea.value = text; textArea.style.top = "0"; textArea.style.left = "0"; textArea.style.position = "fixed"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); console.log('Fallback: 텍스트가 클립보드에 복사되었습니다.'); } catch (err) { console.error('Fallback: 클립보드 복사 실패:', err); } document.body.removeChild(textArea); } // 리셋 기능 document.getElementById('resetBtn').addEventListener('click', function() { resetTest(); }); function resetTest() { // 모든 변수 초기화 uploadedImage = null; analysisResult = null; // UI 상태 완전 리셋 previewSection.style.display = 'none'; loadingSection.style.display = 'none'; resultSection.style.display = 'none'; analyzeBtn.disabled = true; imageInput.value = ''; // 업로드 영역 초기화 uploadArea.classList.remove('dragover'); // 맨 위로 부드러운 스크롤 document.querySelector('.animal-test-container').scrollIntoView({ behavior: 'smooth' }); showNotification('테스트가 초기화되었습니다!'); } // 알림 표시 함수 function showNotification(message) { notification.textContent = message; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } </script> </div> <p data-ke-size="size16">&nbsp;</p> 핫한 성격테스트 ai 얼굴 분석 ai 이미지 분석 강아지상 고양이상 닮은 동물 테스트 동물 성격 테스트 동물상 테스트 사진 업로드 테스트 셀카 분석 얼굴 인식 테스트 여우상 테스트 마음속 우주 https://cafemcr.tistory.com/5 https://cafemcr.tistory.com/5#entry5comment Fri, 20 Jun 2025 22:51:46 +0900