commit e9f90acf361f3070d7a76b17729a0e4b06a79b56
parent 60c5e884c777395268dfe2f741314996b6bbbb0f
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date: Sun, 3 May 2020 09:49:20 -0700
Enforce conventions.
Diffstat:
4 files changed, 62 insertions(+), 53 deletions(-)
diff --git a/Styles/Global.css b/Styles/Global.css
@@ -49,12 +49,12 @@ button:disabled {
text-decoration: none;
}
-.label {
- font-weight: bold;
+h3 {
+ margin-bottom: 5px;
}
-.text {
- font-weight: normal;
+.label {
+ font-weight: bold;
}
.good {
diff --git a/Styles/Quizzer.css b/Styles/Quizzer.css
@@ -3,7 +3,12 @@
cursor: pointer;
}
-.quizzerButtons {
+#quizzerButtons {
+ margin-top: 15px;
+ margin-bottom: 15px;
+}
+
+.quizzerButton {
width: 75px;
height: 25px;
}
\ No newline at end of file
diff --git a/Styles/Settings.css b/Styles/Settings.css
@@ -32,6 +32,8 @@
}
#settingsStart {
+ margin-top: 15px;
+ margin-bottom: 5px;
width: 75px;
height: 25px;
}
\ No newline at end of file
diff --git a/index.html b/index.html
@@ -16,13 +16,12 @@
</head>
<body onload="Load()">
- <label id="title" onclick="Reload()">Spanish-Quizzer v2.3.0</label>
- <br/>
+ <h1 id="title" onclick="Reload()">Spanish-Quizzer v2.3.0</h1>
<noscript>
- <br/>
- <label class="bad">You must have JavaScript enabled to run Spanish-Quizzer.</label>
- <br/>
+ <h4 class="bad">
+ You must have JavaScript enabled to run Spanish-Quizzer.
+ </h4>
</noscript>
<div id="settings">
@@ -67,65 +66,68 @@
</div>
</template>
- <br/>
<div class="centered">
- <label class="text">Choose your settings and then click start.</label>
+ Choose your settings and then click start.
</div>
- <br/>
- <label class="label">Vocabulary Sets </label>
- <button id="settingsAddSet" onclick="AddSet();">Add set</button>
+ <h3>
+ Vocabulary Sets
+ <button id="settingsAddSet" onclick="AddSet();">Add set</button>
+ </h3>
<div id="settingsSets">
<div id="settingsSetsInner">
</div>
</div>
- <br/>
- <label class="label">Quizzer Settings</label>
- <br/>
- <input type="checkbox" id="settingsDarkMode" onchange="document.body.classList.toggle('dark'); UpdateLocalStorage();">
- <label class="text" for="settingsDarkMode">Dark Mode</label>
- <br/>
- <label class="text" for="settingsPromptType">Prompt type</label>
- <select id="settingsPromptType" onchange="UpdateLocalStorage();">
- <option>Text</option>
- <option>Audio</option>
- <option>Both</option>
- </select>
- <br/>
- <label class="text" for="settingsRepeatPrompts">Repeat missed prompts</label>
- <select id="settingsRepeatPrompts" onchange="UpdateLocalStorage();">
- <option>Never</option>
- <option>Immediately</option>
- <option>5 prompts later</option>
- </select>
- <br/>
+ <h3>Quizzer Settings</h3>
+ <div>
+ <input type="checkbox" id="settingsDarkMode" onchange="document.body.classList.toggle('dark'); UpdateLocalStorage();">
+ <label for="settingsDarkMode">Dark Mode</label>
+ </div>
+ <div>
+ <label for="settingsPromptType">Prompt type</label>
+ <select id="settingsPromptType" onchange="UpdateLocalStorage();">
+ <option>Text</option>
+ <option>Audio</option>
+ <option>Both</option>
+ </select>
+ </div>
+ <div>
+ <label for="settingsRepeatPrompts">Repeat missed prompts</label>
+ <select id="settingsRepeatPrompts" onchange="UpdateLocalStorage();">
+ <option>Never</option>
+ <option>Immediately</option>
+ <option>5 prompts later</option>
+ </select>
+ </div>
- <br/>
<div class="centered">
<button id="settingsStart" onclick="Start()">Start</button>
- <br/>
- <label id="settingsError" class="bad"></label>
</div>
+
+ <div id="settingsError" class="centered bad"></div>
</div>
<div id="quizzer" hidden="true">
- <br/>
- <label id="quizzerProgress" class="label"></label>
- <br/>
- <label id="quizzerPromptType" class="label"></label>
- <label id="quizzerPrompt" class="text" onclick="quizzerPromptClicked()"></label>
- <br/>
- <label id="quizzerInputType" class="label"></label>
- <input id="quizzerInput" type="text" autocomplete="off" spellcheck="false" autocorrect="off">
- <br/>
- <br/>
- <button id="quizzerEnter" class="quizzerButtons">Submit</button>
- <button id="quizzerSkip" class="quizzerButtons" onclick="Reset()">Skip</button>
- <br/>
- <br/>
- <label id="quizzerFeedback" class="bad"></label>
+ <h3 id="quizzerProgress"></h3>
+
+ <div>
+ <label for="quizzerPrompt" id="quizzerPromptType" class="label"></label>
+ <span id="quizzerPrompt" onclick="quizzerPromptClicked()"></span>
+ </div>
+
+ <div>
+ <label id="quizzerInputType" for="quizzerInput" class="label"></label>
+ <input id="quizzerInput" type="text" autocomplete="off" spellcheck="false" autocorrect="off">
+ </div>
+
+ <div id="quizzerButtons">
+ <button id="quizzerEnter" class="quizzerButton">Submit</button>
+ <button id="quizzerSkip" class="quizzerButton" onclick="Reset()">Skip</button>
+ </div>
+
+ <div id="quizzerFeedback" class="bad"></div>
</div>
<div class="footer">
