index.html (5080B)
1 <!DOCTYPE html> 2 <html lang="ko"> 3 4 <head> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <meta charset="utf-8"> 7 <title>numbers</title> 8 <link rel="stylesheet" href="minimal.css"> 9 <link rel="stylesheet" href="style.css"> 10 </head> 11 12 <body> 13 <h1>숫자마스터</h1> 14 15 <div x-data role="tablist" aria-label="number mode tablist"> 16 <button role="tab" :aria-selected="$store.app.tab === 'sino'" id="panel-sino" 17 @click="$store.app.changeTab('sino')">한자어</button> 18 <button role="tab" :aria-selected="$store.app.tab === 'native'" id="panel-native" 19 @click="$store.app.changeTab('native')">고유어</button> 20 <button role="tab" :aria-selected="$store.app.tab === 'time'" id="panel-time" 21 @click="$store.app.changeTab('time')">시간</button> 22 <button role="tab" :aria-selected="$store.app.tab === 'date'" id="panel-date" 23 @click="$store.app.changeTab('date')">날짜</button> 24 <button role="tab" id="panel-counter" disabled>단위</button> 25 </div> 26 27 <fieldset x-data> 28 <legend>모드</legend> 29 <label> 30 숫자 31 <input type="radio" value="number" id="number-mode" x-model="$store.app.mode" 32 :checked="$store.app.mode === 'number'" name="mode"> 33 </label> 34 <label> 35 한글 36 <input type="radio" value="hangeul" id="hangeul-mode" x-model="$store.app.mode" 37 :checked="$store.app.mode === 'hangeul'" name="mode"> 38 </label> 39 </fieldset> 40 41 <fieldset x-data x-show="$store.app.tab === 'sino'"> 42 <legend>범위</legend> 43 <label> 44 최소 45 <select x-model.number="$store.app.min" @change="$store.app.onRangeChange()" :checked="$store.app.min"> 46 <option value="1">일</option> 47 <option value="10">십</option> 48 <option value="100">백</option> 49 <option value="1000">천</option> 50 <option value="10000">만</option> 51 <option value="100000">십만</option> 52 <option value="1000000">백만</option> 53 <option value="10000000">천만</option> 54 <option value="100000000">일억</option> 55 <option value="1000000000">십억</option> 56 <option value="10000000000">백억</option> 57 </select> 58 </label> 59 <label> 60 최대 61 <select x-model.number="$store.app.max" @change="$store.app.onRangeChange()" :checked="$store.app.max"> 62 <option value="1">일</option> 63 <option value="10">십</option> 64 <option value="100">백</option> 65 <option value="1000">천</option> 66 <option value="10000">만</option> 67 <option value="100000">십만</option> 68 <option value="1000000">백만</option> 69 <option value="10000000">천만</option> 70 <option value="100000000">일억</option> 71 <option value="1000000000">십억</option> 72 <option value="10000000000">백억</option> 73 </select> 74 </label> 75 <p x-cloak x-show="$store.app.rangeError !== null" class="alert-box -error" x-text="$store.app.rangeError"></p> 76 </fieldset> 77 78 <fieldset x-data class="save-action"> 79 <button class="-primary" type="button" @click="$store.app.saveConfig()">설정 저장</button> 80 <span x-cloak class="alert-box -success" x-show="$store.app.configSaved">설정 저장됨</span> 81 </fieldset> 82 83 <hr class="divider" /> 84 85 <main> 86 <form x-data @submit="$store.app.submit($event)"> 87 <label class="prompt"> 88 <template x-if="$store.app.mode === 'number'"> 89 <span>다음을 한글로 쓰세요. 90 <span class="question" x-text="$store.app.question"></span> 91 </span> 92 </template> 93 <template x-if="$store.app.mode === 'hangeul'"> 94 <span>다음을 숫자로 쓰세요. 95 <span class="question" x-text="$store.app.question"></span> 96 </span> 97 </template> 98 <br> 99 <input autocomplete="off" class="answer-input" id="input" type="text" 100 :placeholder="$store.app.mode === 'number' ? '한글 입력' : '숫자 입력'" :class="{ 101 '-correct': $store.app.questionState === 'correct', 102 '-incorrect': $store.app.questionState === 'incorrect' 103 }" /> 104 </label> 105 <template class="hint" x-if="$store.app.hint !== null"> 106 <template x-for="group in $store.app.hint"> 107 <div> 108 <span class="section-label -muted" x-text="group.label"></span> 109 <ul class="hint-list"> 110 <template x-for="item in group.items"> 111 <li x-text="item"></li> 112 </template> 113 </ul> 114 </div> 115 </template> 116 </template> 117 <div class="form-actions"> 118 <button type="submit" class="-primary" 119 x-text="$store.app.questionState === 'undecided' ? '확인' : '계속'"></button> 120 <button type="button" class="-secondary" @click="$store.app.skip()">건너뛰기</button> 121 </div> 122 123 <div class="answer-reveal" x-show="$store.app.questionState !== 'undecided'" :class="{ 124 '-correct': $store.app.questionState === 'correct', 125 '-incorrect': $store.app.questionState === 'incorrect' 126 }"> 127 <p> 128 <span class="answer-label">정답:</span> <span class="answer-value" x-text="$store.app.answer"></span> 129 </p> 130 </div> 131 </form> 132 </main> 133 134 <footer> 135 <a href="index.html">숫자마스터</a> 136 · 137 <a href="https://git.brookjeynes.dev/number-master">source</a> 138 </footer> 139 140 <script type="module" src="src/main.js"></script> 141 </body> 142 143 </html>