index.jade

doctype html
html
	head
		title Hiragana and Katakana Trainer
		meta(charset="utf-8")
		meta(name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1")
		link(rel="stylesheet" type="text/css" href="./style.css")

	body.hover-enable
		div.main-wrapper
			div.app-wrapper

				div.start-screen-wrapper.screen-wrapper#start-screen
					div.start-screen-container.screen-container
						div.title Kana Trainer

						div.selector-container#kana-selector
							div.selector-title-container
								div.selector-title Kana Selector
							form
								div.selector-field.hiragana-selector
									input.selector#hiragana(type="checkbox" value="hiragana" name="hiragana")
									label.selector-label(for="hiragana") Hiragana
								div.selector-field.katakana-selector
									input.selector#katakana(type="checkbox" value="katakana" name="katakana")
									label.selector-label(for="katakana") Katakana
								div.selector-field.combination-selector
									input.selector#combinations(type="checkbox" value="combinations" name="combinations")
									label.selector-label(for="combinations") Combinations

						div.selector-container#type-selector
							div.selector-title-container
								div.selector-title Training Type
							form
								div.selector-field.reading-selector
									input.selector#reading(type="checkbox" value="reading" name="reading" checked)
									label.selector-label(for="reading") Reading

						div#start-button Start

				div.reading-training-wrapper.screen-wrapper#reading-training
					div.reading-training-container.screen-container
						div.training-title.screen-title Reading Training
						div.training-progress-container
							div.training-full-progress
							div.training-progress-bar#reading-progress-bar
							div.training-progress#reading-training-progress
						div.skip-button-container
							span.skip-button#reading-skip Skip
						div.kana-display#reading-kana-display
						div.kana-answer#reading-kana-answer Incorrect
						div.submission-container
							div.answer-input-container
								input(type="text" name="answer").answer-input#reading-answer-input
							div.submit-button-container
								input(type="submit" value="Submit" name="submit").submit-button#reading-answer-submit
						div.menu-button-container
							span.menu-button Return to menu

				div.reading-result-wrapper.screen-wrapper#reading-result
					div.reading-result-container.screen-container
						div.screen-title Reading Training: Result
						div.result-container
							div.result-text Your score is:
							div.result-percentage#result-percentage
							div.result-score#result-score
						div.wrong-answers-container#wrong-answers-container
							div.wrong-answers-title#wrong-answers-title
							div.wrong-answers-list#wrong-answers-list
						div.menu-button-container
							span.menu-button Return to menu

		script(src="./script.js")