<!DOCTYPE html>

<head>

<!-- Visualization & Content Choices:

- Report Info: 컬러 조합 평점 -> Goal: 정보 전달 -> Viz/Presentation: 도넛 차트 -> Interaction: 없음(정적 표시) -> Justification: 핵심적인 평점을 빠르고 시각적으로 전달하는 데 효과적입니다. -> Library/Method: Chart.js

- Report Info: 식별된 색상 조합 -> Goal: 정보 전달 -> Viz/Presentation: 색상 견본(div) -> Interaction: 없음 -> Justification: 분석의 기반이 된 색상 정보를 명확하고 직접적으로 보여줍니다. -> Library/HTML/CSS

- Report Info: 추천 색상 조합 -> Goal: 비교/탐색 -> Viz/Presentation: 클릭 가능한 색상 견본 -> Interaction: 클릭 시 해당 조합에 대한 설명 텍스트 업데이트 -> Justification: 여러 대안을 UI를 복잡하게 만들지 않으면서 사용자가 능동적으로 탐색하도록 유도합니다. -> Library/HTML/CSS/JS

- Report Info: 날씨 기반 추천 -> Goal: 정보 전달/탐색 -> Viz/Presentation: 텍스트 및 아이콘, 색상 견본 -> Interaction: 없음 -> Justification: 현재 상황(날씨)에 맞는 실용적이고 맥락적인 정보를 제공합니다. -> Library/HTML/CSS

-->

<style>

:root {

/* Light Mode Colors */

--bg-color: #F8FAFC;

--text-color: #334155;

--card-bg: #FFFFFF;

--card-border: #E0F2F7;

--card-shadow: rgba(0,0,0,0.08);

--primary-button-bg: #60A5FA;

--primary-button-hover-bg: #3B82F6;

--secondary-button-bg: #A7F3D0;

--secondary-button-text: #047857;

--secondary-button-hover-bg: #6EE7B7;

--dropzone-border: #CBD5E1;

--dropzone-hover-border: #60A5FA;

--dropzone-hover-bg: #E0F2F7;

--modal-bg: #FFFFFF;

--modal-text: #334155;

--recommendation-text-bg: #DBEAFE; /* blue-50 */

--recommendation-text-color: #1E40AF; /* blue-800 */

--chart-doughnut-fill: #60A5FA; /* Sky Blue */

--chart-doughnut-empty: #E0F2F7; /* Light Sky Blue */

}

body.dark {

/* Dark Mode Colors */

--bg-color: #1A202C; /* Darker background */

--text-color: #E2E8F0; /* Lighter text */

--card-bg: #2D3748; /* Darker card background */

--card-border: #4A5568; /* Darker border */

--card-shadow: rgba(0,0,0,0.3); /* More pronounced shadow */

--primary-button-bg: #4299E1; /* Lighter blue for contrast */

--primary-button-hover-bg: #3182CE;

--secondary-button-bg: #48BB78; /* Lighter green */

--secondary-button-text: #E2E8F0;

--secondary-button-hover-bg: #38A169;

--dropzone-border: #4A5568;

--dropzone-hover-border: #4299E1;

--dropzone-hover-bg: #2D3748;

--modal-bg: #2D3748;

--modal-text: #E2E8F0;

--recommendation-text-bg: #2A4365; /* Darker blue for dark mode */

--recommendation-text-color: #E0F2F7;

--chart-doughnut-fill: #4299E1; /* Lighter blue for dark mode chart */

--chart-doughnut-empty: #4A5568; /* Darker grey for empty part */

}

body {

font-family: 'Noto Sans KR', sans-serif;

background-color: var(--bg-color);

color: var(--text-color);

transition: background-color 0.3s, color 0.3s;

}

.chart-container {

position: relative;

width: 100%;

max-width: 300px;

margin-left: auto;

margin-right: auto;

height: 250px; /* 기본 높이 */

max-height: 300px; /* 최대 높이 */

}

@media (min-width: 768px) { /* 태블릿 이상 */

.chart-container {

height: 300px;

}

.palette-color {

width: 100%;

height: 50px;

transition: transform 0.2s ease-in-out;

}

.palette-color:hover {

transform: scale(1.05);

box-shadow: 0 4px 10px var(--card-shadow);

}

.section-card {

background-color: var(--card-bg);

border: 1px solid var(--card-border);

box-shadow: 0 6px 12px var(--card-shadow);

transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;

}

.recommendation-palette {

cursor: pointer;

border-radius: 0.75rem;

}

.recommendation-palette:hover .palette-color {

transform: scale(1.05);

box-shadow: 0 4px 8px var(--card-shadow);

}

.active-palette {

outline: 3px solid var(--primary-button-bg);

border-radius: 0.75rem;

}

/* Button & Dropzone Styling using CSS variables */

#analyze-button {

background-color: var(--primary-button-bg);

color: white;

}

#analyze-button:hover {

background-color: var(--primary-button-hover-bg);

}

#restart-button {

background-color: var(--secondary-button-bg);

color: var(--secondary-button-text);

}

#restart-button:hover {

background-color: var(--secondary-button-hover-bg);

}

#dropzone {

border-color: var(--dropzone-border);

}

#dropzone:hover {

border-color: var(--dropzone-hover-border);

background-color: var(--dropzone-hover-bg);

}

#message-modal .bg-white { /* Targeting the modal content background */

background-color: var(--modal-bg);

color: var(--modal-text);

}

#message-modal .text-gray-800 { /* Targeting modal message text */

color: var(--modal-text);

}

#message-modal .bg-blue-500 { /* Targeting modal confirm button */

background-color: var(--primary-button-bg);

}

#message-modal .bg-blue-500:hover {

background-color: var(--primary-button-hover-bg);

}

#recommendation-text {

background-color: var(--recommendation-text-bg);

color: var(--recommendation-text-color);

}

</style>

</head>

</button>

</div>

<p class="mt-4 text-lg text-gray-600" data-i18n="uploadSubtitle">당신의 의상 사진을 업로드하고 퍼스널 컬러 조합을 분석 받아보세요.</p>

</header>

<p class="mb-2 text-sm text-gray-500" data-i18n="dropzoneText"><span class="font-semibold" data-i18n="dropzoneClick">클릭하여 업로드</span> 또는 파일을 드래그하세요.</p>

</div>

분석 시작하기

</button>

</div>

</div>

<p class="text-gray-600 mt-2" data-i18n="loadingSubtitle">잠시만 기다려주세요.</p>

</div>

<p class="mt-4 text-lg text-gray-600" data-i18n="resultsSubtitle">당신의 컬러 조합에 대한 AI의 분석 결과입니다.</p>

</header>

</div>

<p class="text-gray-600 mb-6" data-i18n="analyzedColorsSubtitle">AI가 당신의 의상에서 식별한 주요 색상들입니다.</p>

</div>

</div>

<p class="text-center text-gray-600 mt-2 px-4" data-i18n="scoreExplanation">AI가 색상 조화, 대비, 통일성 등을 종합적으로 고려하여 평가한 점수입니다.</p>

</div>

</ul>

</div>

<p class="text-gray-600 mb-4" data-i18n="llmInsightSubtitle">이 의상에 대한 스타일 인사이트를 얻거나, 특정 상황에 어울리는 추천을 받아보세요.</p>

인사이트 생성하기

</button>

<p class="text-gray-600 mt-2" data-i18n="llmLoadingText">인사이트를 생성 중입니다...</p>

</div>

</div>

<p class="text-gray-600 mb-6" data-i18n="recommendationsSubtitle">현재 의상을 기반으로 새로운 분위기를 연출할 수 있는 색상 조합을 추천합니다. 팔레트를 클릭하여 설명을 확인해보세요.</p>

</div>

</div>

</div>

</div>

다른 사진으로 분석하기

</button>

</div>

</div>

</body>

</html>