src/templates/main.html

{% extends "base.html" %}

{% block title %}감정 일기{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
{% endblock %}

{% block content %}
    <!-- Onboarding Modal -->
    <div id="onboarding-overlay" class="onboarding-overlay">
        <div class="onboarding-modal">
            <div id="slide1" class="onboarding-slide active">
                <h2>환영합니다!</h2>
                <p>Emotion Diary는 당신의 하루를 기록하고 감정을 분석해주는 서비스입니다.</p>
            </div>
            <div id="slide2" class="onboarding-slide">
                <h2>일기 작성</h2>
                <p>오늘 있었던 일을 자유롭게 작성해주세요. 당신의 이야기에 귀 기울일게요.</p>
            </div>
            <div id="slide3" class="onboarding-slide">
                <h2>감정 분석과 음악 추천</h2>
                <p>작성된 일기를 바탕으로 감정을 분석하고, 지금 당신에게 어울리는 음악을 추천해드립니다.</p>
            </div>
            <div id="slide4" class="onboarding-slide">
                <h2>정확도 80%</h2>
                <p>저희 서비스는 텍스트 감정 분석에서 약 80%의 정확도를 자랑합니다.</p>
            </div>
            <div id="slide5" class="onboarding-slide">
                <h2>닉네임 설정</h2>
                <p>서비스에서 사용하실 닉네임을 설정해주세요. (선택 사항)</p>
                <input type="text" id="onboarding-nickname-input" placeholder="닉네임을 입력하세요" style="width: calc(100% - 20px); padding: 10px; margin-top: 15px; border: 1px solid #ddd; border-radius: 5px;">
            </div>
            <div class="onboarding-nav">
                <button id="onboarding-prev" class="onboarding-btn" style="display: none;">이전</button>
                <button id="onboarding-close" class="onboarding-btn">다시 보지 않기</button>
                <div class="onboarding-dots">
                    <span class="onboarding-dot active" data-slide="1"></span>
                    <span class="onboarding-dot" data-slide="2"></span>
                    <span class="onboarding-dot" data-slide="3"></span>
                    <span class="onboarding-dot" data-slide="4"></span>
                    <span class="onboarding-dot" data-slide="5"></span>
                </div>
                <button id="onboarding-next" class="onboarding-btn">다음</button>
            </div>
        </div>
    </div>

    <!-- 테마 색상 변경 팔레트 -->
    <div class="theme-palette">
        <div class="theme-option-wrapper">
            <button class="theme-btn" data-color="default" data-theme-group="default" title="기본 테마">🎨</button>
            <div class="sub-options" data-theme-group="default">
                <button class="sub-option-btn" data-color="current" title="보라색">보라색</button>
                <button class="sub-option-btn" data-color="blue" title="파랑색">파랑색</button>
                <button class="sub-option-btn" data-color="lightyellow" title="연한 노랑색">노랑색</button>
            </div>
        </div>
        <div class="theme-option-wrapper">
            <button class="theme-btn" data-color="sunset" data-theme-group="sunset" title="저녁 노을">🌇</button>
            <div class="sub-options" data-theme-group="sunset">
                <img src="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sun1.jpg" data-theme-bg="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sun1.jpg" title="저녁 노을 1">
                <img src="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sun2.jpg" data-theme-bg="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sun2.jpg" title="저녁 노일 2">
            </div>
        </div>
        <div class="theme-option-wrapper">
            <button class="theme-btn" data-color="forest" data-theme-group="forest" title="고요한 숲">🌳</button>
            <div class="sub-options" data-theme-group="forest">
                <img src="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/forest1.jpg" data-theme-bg="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/forest1.jpg" title="고요한 숲 1">
                <img src="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/forest2.jpg" data-theme-bg="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/forest2.jpg" title="고요한 숲 2">
            </div>
        </div>
        <div class="theme-option-wrapper">
            <button class="theme-btn" data-color="sky" data-theme-group="sky" title="하늘 테마">☁️</button>
            <div class="sub-options" data-theme-group="sky">
                <img src="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sky1.jpg" data-theme-bg="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sky1.jpg" title="하늘 1">
                <img src="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sky2.jpg" data-theme-bg="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sky2.jpg" title="하늘 2">
            </div>
        </div>
        <div class="theme-option-wrapper">
            <button class="theme-btn" data-color="night" data-theme-group="night" title="별빛 밤">🌃</button>
            <div class="sub-options" data-theme-group="night">
                <img src="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/city1.jpg" data-theme-bg="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/city1.jpg" title="별빛 밤 1">
                <img src="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/city2.jpg" data-theme-bg="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/city2.jpg" title="별빛 밤 2">
            </div>
        </div>
        <div class="theme-option-wrapper">
            <button class="theme-btn" data-color="sea" data-theme-group="sea" title="푸른 바다">🌊</button>
            <div class="sub-options" data-theme-group="sea">
                <img src="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sea1.jpg" data-theme-bg="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sea1.jpg" title="푸른 바다 1">
                <img src="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sea2.jpg" data-theme-bg="https://huggingface.co/datasets/taehoon222/emotion-images/resolve/main/sea2.jpg" title="푸른 바다 2">
            </div>
        </div>
    </div>

    <div class="main-content">
        <div class="diary-book">
            
            <div class="book-page left-page chat-container">
                <div class="page-header">
                    <h2>To. Clobe ✏️</h2>
                    <span class="date-label">Nov 21</span> </div>
                
                <textarea id="diary" placeholder="오늘 당신의 하루는 어땠나요?&#13;&#10;솔직한 마음을 적어주세요."></textarea>
                
                <div class="button-container">
                    <button id="submit-btn" disabled>분석하기</button>
                </div>
            </div>

            <div class="book-spine"></div>

            <div class="book-page right-page" id="result-container">
                <div class="page-header">
                    <h2>From. Cloub 💌</h2>
                    <div id="save-action-container" style="display:none; text-align: center; margin-top: 20px;">
                        <button id="final-save-btn" class="save-btn">일기장에 저장하기</button>
                    </div>
                </div>

                <div id="emotion-chips" class="emotion-chips" style="display:none;"></div>

                <div id="result">
                    <div class="empty-state">
                        <p>왼쪽 페이지에 일기를 쓰고<br>분석 버튼을 눌러주세요.</p>
                    </div>
                </div>
                <div id="save-status" style="margin-top: 1rem; text-align: center;"></div>
            </div>

        </div>
    </div>
        
            <!-- 감정 선택 UI (초기에는 숨김) -->
            <div id="emotion-choice-container" style="display: none;">
                <div class="notification">
                    <p>AI가 당신의 감정을 복합적으로 파악했어요.<br>현재 느끼는 가장 주된 감정을 선택해주세요.</p>
                </div>
                <div id="emotion-chips">
                    <!-- 감정 칩은 JS를 통해 동적으로 생성됩니다. -->
                </div>
            </div>

            <!-- 저장 버튼 컨테이너 (초기에는 숨김) -->
            <div class="save-button-container" style="display: none; text-align: center; margin-top: 20px;">
                <button id="save-diary-btn">일기 저장하기</button>
            </div>

            <div id="save-status" style="margin-top: 1rem; text-align: center;"></div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="{{ url_for('static', filename='js/main_onboarding.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main_logic.js') }}"></script>
    <script src="{{ url_for('static', filename='js/main_theme.js') }}"></script>
{% endblock %}