mokky.love.io/index.html at main · K-Mokky/mokky.love.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>내 이상형을 돌려도!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="app-shell">
      <header class="topbar">
        <div class="brand">
          <div class="logo-mark" aria-hidden="true">
            <span></span>
            <i></i>
          </div>
          <div>
            <h1>내 이상형을 돌려도!</h1>
            <p>Made by KMokky</p>
            <a class="brand-email" href="mailto:mokky@mokky.store" aria-label="KMokky에게 메일 보내기">mokky@mokky.store</a>
          </div>
        </div>
        <div class="top-actions">
          <button class="icon-button" id="restartTopButton" type="button" aria-label="처음부터 다시">
            ↻
          </button>
        </div>
      </header>

      <main class="workspace">
        <aside class="side-panel" aria-label="검사 설정과 진행 상태">
          <section class="mode-panel">
            <p class="eyebrow">QUESTION SET</p>
            <div class="mode-control" role="radiogroup" aria-label="질문 수 선택">
              <button class="mode-button active" type="button" data-mode="20" aria-checked="true" role="radio">
                <strong>20</strong>
                <span>빠르게</span>
              </button>
              <button class="mode-button" type="button" data-mode="50" aria-checked="false" role="radio">
                <strong>50</strong>
                <span>깊게</span>
              </button>
              <button class="mode-button" type="button" data-mode="80" aria-checked="false" role="radio">
                <strong>80</strong>
                <span>정밀하게</span>
              </button>
            </div>
          </section>

          <section class="status-panel">
            <div class="dial" aria-hidden="true">
              <div class="dial-ring">
                <span id="progressNumber">0</span>
              </div>
            </div>
            <div>
              <p class="eyebrow">PROGRESS</p>
              <strong id="progressText">시작 전</strong>
              <p id="traitTeaser">질문을 돌리면 취향의 윤곽이 잡혀요.</p>
            </div>
          </section>

          <section class="mini-map" aria-label="답변 진행 점">
            <div id="answerDots"></div>
          </section>
        </aside>

        <section class="main-panel" aria-live="polite">
          <section class="screen start-screen" id="startScreen">
            <div class="intro-copy">
              <p class="eyebrow">PINK IDEAL TYPE ROULETTE</p>
              <h2>질문에 답변하고,<br /> 이상형을 찾아보세요!</h2>
              <p>
                답변 패턴을 바탕으로 성향을 추론하고, 그 분위기를 담은 AI 스타일 이미지를 만들어줘요.
              </p>
            </div>
            <div class="preference-panel" aria-label="이상형 기본 조건 선택">
              <div>
                <p class="eyebrow">IDEAL TYPE SETUP</p>
                <h3>먼저 이상형의 성별과 나이대를 선택해 주세요.</h3>
              </div>
              <div class="preference-grid">
                <div class="preference-group">
                  <span class="preference-label">성별</span>
                  <div class="preference-options" role="radiogroup" aria-label="이상형 성별 선택">
                    <button class="preference-button active" type="button" data-preference="gender" data-value="woman" role="radio" aria-checked="true">여성</button>
                    <button class="preference-button" type="button" data-preference="gender" data-value="man" role="radio" aria-checked="false">남성</button>
                  </div>
                </div>
                <div class="preference-group">
                  <span class="preference-label">나이대</span>
                  <div class="preference-options" role="radiogroup" aria-label="이상형 나이대 선택">
                    <button class="preference-button" type="button" data-preference="ageRange" data-value="teens" role="radio" aria-checked="false">10대 후반</button>
                    <button class="preference-button active" type="button" data-preference="ageRange" data-value="20s" role="radio" aria-checked="true">20대</button>
                    <button class="preference-button" type="button" data-preference="ageRange" data-value="30s" role="radio" aria-checked="false">30대</button>
                    <button class="preference-button" type="button" data-preference="ageRange" data-value="any" role="radio" aria-checked="false">상관없음</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="start-actions">
              <button class="primary-button" id="startButton" type="button">시작하기</button>
              <button class="secondary-button" id="sampleButton" type="button">샘플 돌리기</button>
            </div>
          </section>

          <section class="screen question-screen hidden" id="questionScreen">
            <div class="question-head">
              <div>
                <p class="eyebrow" id="questionCategory">CATEGORY</p>
                <h2 id="questionText"></h2>
              </div>
              <span id="questionCount">1/20</span>
            </div>
            <div class="options" id="options"></div>
            <div class="question-actions">
              <button class="secondary-button" id="backButton" type="button">이전</button>
              <button class="secondary-button" id="resetButton" type="button">다시 선택</button>
            </div>
          </section>

          <section class="screen result-screen hidden" id="resultScreen">
            <div class="portrait-stage">
              <canvas id="portraitCanvas" width="900" height="1200" aria-label="생성된 이상형 이미지"></canvas>
            </div>
            <div class="result-details">
              <p class="eyebrow">RESULT</p>
              <h2 id="resultTitle"></h2>
              <p id="resultSummary"></p>
              <p class="trait-list-title">성향별 충족도 · 각 성향 100점 기준</p>
              <div class="trait-list" id="traitList"></div>
              <div class="privacy-note" role="note">
                검사 결과는 어디에도 저장되지 않습니다.
              </div>
              <div class="result-actions">
                <button class="primary-button" id="restartButton" type="button">다시 테스트하러 가기</button>
              </div>
              <div class="share-actions" aria-label="이상형 이미지 저장하기">
                <button class="primary-button" id="sharePortraitButton" type="button">나의 이상형 저장하기</button>
                <button class="secondary-button" id="sharePlacardButton" type="button">내 이상형의 플랜카드 저장하기</button>
              </div>
              <div class="story-share-actions" aria-label="SNS 링크 공유하기">
                <p>SNS에 공유하고 싶다면, 아래 버튼을 눌러 공유 링크를 생성하여 주세요!</p>
                <button class="story-share-button" id="sharePortraitLinkButton" type="button">나의 이상형 공유하기</button>
                <button class="story-share-button" id="sharePlacardLinkButton" type="button">내 이상형의 플랜카드 공유하기</button>
                <p class="story-share-status" id="storyShareStatus" aria-live="polite"></p>
              </div>
              <section class="feedback-panel" id="feedbackPanel" aria-label="결과 만족도 설문">
                <p class="eyebrow">FEEDBACK</p>
                <h3>결과가 마음에 드시나요?</h3>
                <p>결과 개선을 위한 짧은 설문이에요. 플랜카드 저장/공유 이미지에는 포함되지 않아요.</p>
                <div class="feedback-actions" role="group" aria-label="결과 만족도 선택">
                  <button class="feedback-button" type="button" data-feedback-choice="liked">마음에 들어요</button>
                  <button class="feedback-button" type="button" data-feedback-choice="disliked">아쉬워요</button>
                </div>
                <p class="feedback-status" id="feedbackStatus" aria-live="polite"></p>
              </section>
            </div>
          </section>
        </section>
      </main>
    </div>

    <div class="notice-modal hidden" id="startNoticeModal" role="dialog" aria-modal="true" aria-labelledby="startNoticeTitle">
      <div class="notice-modal-card">
        <p class="eyebrow">NOTICE</p>
        <h2 id="startNoticeTitle">결과로 나오는 이상형의 사진은 실존하지 않으니 유의하세요!</h2>
        <p>안내를 확인하고 동의하면 테스트가 시작돼요.</p>
        <div class="notice-modal-actions">
          <button class="secondary-button" id="startNoticeNoButton" type="button">아니요</button>
          <button class="primary-button" id="startNoticeYesButton" type="button">네</button>
        </div>
      </div>
    </div>

    <div class="feedback-modal hidden" id="feedbackModal" role="dialog" aria-modal="true" aria-labelledby="feedbackModalTitle">
      <div class="feedback-modal-card">
        <button class="icon-button feedback-close-button" id="feedbackCloseButton" type="button" aria-label="설문 창 닫기">×</button>
        <p class="eyebrow">OPTIONAL FEEDBACK</p>
        <h2 id="feedbackModalTitle">어떤 점이 아쉬웠나요?</h2>
        <p>이유 작성은 선택이에요. 비워두고 제출해도 설문에 참여할 수 있어요.</p>
        <label class="feedback-reason-label" for="feedbackReason">아쉬웠던 이유</label>
        <textarea id="feedbackReason" maxlength="600" placeholder="예: 설명이 너무 길었어요, 사진 분위기가 취향과 달랐어요 등"></textarea>
        <div class="feedback-modal-actions">
          <button class="secondary-button" id="feedbackSkipReasonButton" type="button">이유 없이 제출</button>
          <button class="primary-button" id="feedbackSubmitReasonButton" type="button">제출하기</button>
        </div>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>