Skip to content

Commit 9d46369

Browse files
lewdevlewdev
committed
Improved UI experience.
1 parent 8b0d4ca commit 9d46369

3 files changed

Lines changed: 194 additions & 134 deletions

File tree

‎src/index.html‎

Lines changed: 73 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,7 @@ <h1>Features <span class="text-muted">that will blow your mind.</span></h1>
8989
<hr class="m-5">
9090
<div class="row featurette">
9191
<div class="col-md-5">
92-
<div class="text-center p-3" style="font-size: 5rem;">
93-
🔄
94-
</div>
92+
<div class="text-center p-3" style="font-size: 5rem;">🔄</div>
9593
</div>
9694
<div class="col-md-7">
9795
<h1>Repitition <span class="text-muted">and practice make perfect.</span></h1>
@@ -119,75 +117,79 @@ <h1>Handwriting👍 <span class="text-muted">typing 👎</span></h1>
119117
<div class="row featurette">
120118
<div class="col-md-12 text-center">
121119
<h1 class="text-muted">Why not?</h1>
122-
<button class="btn btn-wide btn-primary btn-lg my-2 mr-2 text-lg" data-type="theme" data-id="96" onclick="HwGen.start();">Start Now</button>
123-
</div>
124-
</div>
125-
<hr class="m-5">
126-
<div class="row featurette mb-5">
127-
<div class="col-md-12 text-center">
128-
<p class="text-lg text-info"><a href="https://lewdev.github.com">👤 Lewis Nakao</a></p>
129-
<div class="row m-3">
130-
<div class="col-md-2"><a target="_blank" href="https://twitter.com/lewdev">🐦 Twitter</a></div>
131-
<div class="col-md-2"><a target="_blank" href="https://github.com/lewdev">🐙 GitHub</a></div>
132-
<div class="col-md-2"><a target="_blank" href="https://facebook.com/SWEinHawaii">📘 Facebook</a></div>
133-
<div class="col-md-2"><a target="_blank" href="https://www.linkedin.com/in/lewisnakao">👔 LinkedIn</a></div>
134-
<div class="col-md-2"><a target="_blank" href="http://stackoverflow.com/cv/lewis.nakao">📚 StackOverflow</a></div>
135-
<div class="col-md-2"><a target="_blank" href="https://www.youtube.com/channel/UCewHmEWXdFVyzn-QaZitKBA"> 🎥 YouTube</a></div>
136-
</div>
120+
<button class="btn btn-wide btn-primary btn-lg my-2 mr-2 text-lg mt-5" data-type="theme" data-id="96" onclick="HwGen.start();">Start Now</button>
137121
</div>
138122
</div>
139123
</div>
140124
</div>
141125
</div>
142126
</div>
143127

128+
<div id="tipsView" class="container no-print mt-2">
129+
<table class="w-100"><tbody><tr>
130+
<td class="w-100 p-2">
131+
<ul class="tip-scroller mb-0">
132+
<li>🔎 Use Print Preview feature and set "Zoom" to "Shrink to fit" to ensure best print results.</li>
133+
<li>📏 Adjust settings such as margin size to 0.3" optimize print output.</li>
134+
<li>📄 Adjust "Worksheets" value to get more worksheets per set of print outs.</li>
135+
<li>🗝️ Answer keys are on the last page.</li>
136+
<li>🔢 1-digit equations are all possible equations not including 1.</li>
137+
<li>😀 Random emojis using <a href="https://twemoji.twitter.com">Twemoji</a> featured on each worksheet in case worksheets mix up.</li>
138+
</ul>
139+
</td>
140+
<td>
141+
<button class="btn p-0" onclick="HwGen.nextTip()" title="See next tip.">🔄</button>
142+
</td>
143+
</tr></tbody></table>
144+
</div>
145+
146+
<div id="breadcrumbView" class="container no-print">
147+
<nav aria-label="breadcrumb">
148+
<ol id="breadcrumb" class="breadcrumb mt-2"><!-- <li class="breadcrumb-item"><a href="#">Cate</a></li> --></ol>
149+
</nav>
150+
</div>
151+
144152
<div id="categoriesView" class="container">
145-
<div class="row mt-3 mb-3"">
146-
<div class="col-12 pr-0">
147-
<table class="w-100"><tbody><tr>
148-
<td>
149-
<ul class="tip-scroller">
150-
<li>🔎 Use Print Preview feature and set "Zoom" to "Shrink to fit" to ensure best print results.</li>
151-
<li>📏 Adjust settings such as margin size to 0.3" optimize print output.</li>
152-
<li>📄 Adjust "Worksheets" value to get more worksheets per set of print outs.</li>
153-
<li>🗝️ Answer keys are on the last page.</li>
154-
<li>🔢 1-digit equations are all possible equations not including 1.</li>
155-
<li>😀 Random emojis using <a href="https://twemoji.twitter.com">Twemoji</a> featured on each worksheet in case worksheets mix up.</li>
156-
</ul>
157-
</td>
158-
<td>
159-
<button class="btn p-0" onclick="HwGen.nextTip()" title="See next tip.">➡️</button>
160-
</td>
153+
<h3>Select a Category</h3>
154+
<div id="categorySelectView" class="row mt-3 mb-3""></div>
155+
</div>
156+
157+
<div id="worksheetSelectView" class="container">
158+
<div id="worksheetList"></div>
159+
</div>
160+
161+
<div id="printConfigView" class="container">
162+
<div class="row pb-5">
163+
<div class="col-md-6 pt-3">
164+
<h3>How many worksheets?</h3>
165+
<select id="worksheetCount" class="form-control">
166+
<option>1</option><option>3</option><option selected>6</option><option>9</option><option>12</option><option>15</option>
167+
</select>
168+
</div>
169+
<div class="col-md-6 pt-3">
170+
<label>
171+
<table><tbody><tr>
172+
<td><div class="p-3"><input id="answerKeyChkbx" class="form-control" type="checkbox" checked/></div></td>
173+
<td><h3 title="Uncheck if you want to save paper.">Include the Answer Key?</h3></td>
161174
</tr></tbody></table>
162-
<ul id="categoryTabs" class="col-8 tabs group btn-group"></ul>
175+
</label>
163176
</div>
164-
</div>
165-
<div class="row">
166-
<div class="col-2">
167-
<select id="worksheetCount" class="form-control" onchange="HwGen.render()">
168-
<option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option selected>6</option>
169-
<option>7</option><option>8</option><option>9</option><option>10</option><option>20</option>
170-
</select>
177+
<div class="col-md-12 pt-3">
178+
<div class="w-50 ml-auto mr-auto">
179+
<button class="btn btn-lg btn-primary btn-block p-3" onclick="HwGen.preview()">
180+
🖨 Preview Worksheets
181+
</button>
182+
</div>
171183
</div>
172-
<div class="col-2"> Worksheets</div>
173-
<table class="table"><tbody id="output"></tbody></table>
174-
</div>
175-
</div>
176-
177-
<div id="worksheetSelectView" style="display: none;">
178-
<table class="table"><tbody id="output"></tbody></table>
179-
worksheetSelectView
180-
<div class="text-center text-muted">
181-
Author: <a href="https://lewdev.github.io">Lewis Nakao</a>
182184
</div>
183185
</div>
184186

185-
<div id="worksheetView" style="display: none;">
187+
<div id="worksheetView">
186188
<div class="row no-print worksheets-view-panel">
187189
<div class="col-3">
188-
<button class="btn btn-secondary" onclick="HwGen.setWs('');">◀️ Back</button>
190+
<button class="btn btn-secondary" onclick="HwGen.printConfig();">◀️ Back</button>
189191
</div>
190-
<div class="col-6 text-center hw-set-info"></div>
192+
<div class="col-6 text-center hw-set-info">Preview</div>
191193
<div class="col-3 text-right">
192194
<button class="btn btn-secondary" onclick="window.print();">🖨️ Print</button>
193195
</div>
@@ -209,6 +211,22 @@ <h1 class="title"></h1>
209211
</div>
210212
<div class="answerKey row"></div>
211213
</div>
214+
215+
<div id="footer" class="row featurette mt-5 mb-5 no-print">
216+
<div class="col-md-12 text-center">
217+
<hr/>
218+
<p class="text-lg text-info"><a href="https://lewdev.github.com">👤 Lewis Nakao</a></p>
219+
<div class="row m-3">
220+
<div class="col-md-2 text-nowrap pr-0"><a target="_blank" href="https://twitter.com/lewdev">🐦 Twitter</a></div>
221+
<div class="col-md-2 text-nowrap pr-0"><a target="_blank" href="https://github.com/lewdev">🐙 GitHub</a></div>
222+
<div class="col-md-2 text-nowrap pr-0"><a target="_blank" href="https://facebook.com/SWEinHawaii">📘 Facebook</a></div>
223+
<div class="col-md-2 text-nowrap pr-0"><a target="_blank" href="https://www.linkedin.com/in/lewisnakao">👔 LinkedIn</a></div>
224+
<div class="col-md-2 text-nowrap pr-0"><a target="_blank" href="http://stackoverflow.com/cv/lewis.nakao">📚 StackOverflow</a></div>
225+
<div class="col-md-2 text-nowrap pr-0"><a target="_blank" href="https://www.youtube.com/channel/UCewHmEWXdFVyzn-QaZitKBA"> 🎥 YouTube</a></div>
226+
</div>
227+
</div>
228+
</div>
229+
212230
<div id="about" class="modal-window no-print">
213231
<div>
214232
<a href="#" title="Close" class="modal-close">&#10006;</a>

0 commit comments

Comments
 (0)