Skip to content

Commit 8b0d4ca

Browse files
lewdevlewdev
committed
Implement tip scroller
* Add 2 landing page sections
1 parent 645fc21 commit 8b0d4ca

4 files changed

Lines changed: 188 additions & 128 deletions

File tree

‎src/index.html‎

Lines changed: 70 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<link rel="stylesheet" href="style.css">
3535
</head>
3636
<body>
37-
<div id="myNavbar" class="navbar bg-secondary navbar-dark text-white" style="display: none;">
37+
<div id="myNavbar" class="navbar bg-secondary navbar-dark text-white" style="display:none;">
3838
<div class="container">
3939
<div class="navbar-left">
4040
<a href="#" class="text-decoration-none text-light" onclick="HwGen.intro(); return false;">
@@ -50,30 +50,32 @@ <h2 class="navbar-title"><img src="icons/android-chrome-192x192.png" class="emoj
5050
<div class="jumbotron bg-light mb-0 radius-0 jumbotron">
5151
<div class="container">
5252
<div class="header row">
53-
<div class="col-9">
53+
<div class="col-8">
5454
<h1 class="my-jumbo-header">Math Homework Generator</h1>
5555
<span class="lead">
5656
Quickly generate random print-friendly homework worksheets for math practice.
5757
</span>
5858
<div class="mt-4">
5959
<button class="btn btn-wide btn-primary btn-lg my-2 mr-2 js-ht-download-link" data-type="theme" data-id="96" onclick="HwGen.start();">Start Now</button>
60-
<a href="#about">More Info</a>
60+
<a href="#features">More Info</a>
6161
</div>
6262
</div>
63-
<div class="col-3 landing-logo mt-auto mb-auto">
64-
<img class="my-img" src="icons/android-chrome-192x192.png"/>
63+
<div class="col-4 mt-auto mb-auto">
64+
<div class="landing-logo text-center">
65+
<img src="icons/android-chrome-192x192.png"/>
66+
</div>
67+
<div class="icon-shadow ml-auto mr-auto"></div>
6568
</div>
6669
</div>
67-
<hr class="m-5">
70+
<hr id="features" class="m-5">
6871
<div class="row featurette">
6972
<div class="col-md-7">
7073
<h1>Features <span class="text-muted">that will blow your mind.</span></h1>
71-
<ul class="text-lg">
72-
<li>🙊 no login or registration</li>
73-
<li>🆓 no ads 🙈</li>
74-
<li>🖨️ Print-friendly</li>
75-
<li>🗝️ Answer key on last page.</li>
76-
<li>📝 <span id="wsCount"></span> worksheets available.</li>
74+
<ul class="text-lg lead">
75+
<li>🙊 No login or registration</li>
76+
<li>🆓 No ads 🙈</li>
77+
<li>🗝️ Answer key on last page</li>
78+
<li>📝 <span id="wsCount"></span> worksheets available</li>
7779
<li>👨‍💻 Open <a href="https://github.com/lewdev/hw-gen">source</a></li>
7880
</ul>
7981
<p class="lead"></p>
@@ -82,13 +84,41 @@ <h1>Features <span class="text-muted">that will blow your mind.</span></h1>
8284
<div id="screenshotRotation">
8385
<img src="img/screenshot-1.png" class="my-img rounded" width="500" />
8486
</div>
85-
<!-- <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"></rect><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg> -->
87+
</div>
88+
</div>
89+
<hr class="m-5">
90+
<div class="row featurette">
91+
<div class="col-md-5">
92+
<div class="text-center p-3" style="font-size: 5rem;">
93+
🔄
94+
</div>
95+
</div>
96+
<div class="col-md-7">
97+
<h1>Repitition <span class="text-muted">and practice make perfect.</span></h1>
98+
<div class="lead text-lg">
99+
It is known by parents, teachers, cram schools, and most any profession that practicing the basics is
100+
a sure way to <span class="text-info">grow and progress</span>.
101+
</div>
102+
</div>
103+
</div>
104+
<hr class="m-5">
105+
<div class="row featurette">
106+
<div class="col-md-7">
107+
<h1>Handwriting👍 <span class="text-muted">typing 👎</span></h1>
108+
<div class="lead text-lg">
109+
<a href="https://www.clearvuehealth.com/writingtyping/">Studies have concluded</a> that
110+
writing does <span class="text-info">"lead to better learning"</span>
111+
<a href="https://blog.google/inside-google/life-at-google/why-paper-still-so-magical/">on paper</a> over typing.
112+
</div>
113+
</div>
114+
<div class="col-md-5">
115+
<div class="text-center p-3" style="font-size: 5rem;">✍️</div>
86116
</div>
87117
</div>
88118
<hr class="m-5">
89119
<div class="row featurette">
90120
<div class="col-md-12 text-center">
91-
<h1 class="text-muted">There's no sense in not trying!</h1>
121+
<h1 class="text-muted">Why not?</h1>
92122
<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>
93123
</div>
94124
</div>
@@ -111,46 +141,47 @@ <h1 class="text-muted">There's no sense in not trying!</h1>
111141
</div>
112142
</div>
113143

114-
<div id="mainView" class="container">
115-
<div class="row">
116-
<div class="col-md-12">
117-
<h4>Tips</h4>
118-
<ul>
119-
<li>🔎 Use Print Preview feature and set "Zoom" to "Shrink to fit" to ensure best print results.</li>
120-
<li>📏 Adjust settings such as margin size to 0.3" optimize print output.</li>
121-
<li>📄 Adjust "Worksheets" value to get more worksheets per set of print outs. All answer keys will be printed on the last page.</li>
122-
<li>🔢 1-digit equations are all possible equations not including 1.</li>
123-
<li>😀 Random emojis using <a href="https://twemoji.twitter.com">Twemoji</a> featured on each worksheet in case worksheets mix up.</li>
124-
</ul>
144+
<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>
161+
</tr></tbody></table>
162+
<ul id="categoryTabs" class="col-8 tabs group btn-group"></ul>
125163
</div>
126164
</div>
127165
<div class="row">
128-
<div class="col-1">
166+
<div class="col-2">
129167
<select id="worksheetCount" class="form-control" onchange="HwGen.render()">
130-
<option>1</option>
131-
<option>2</option>
132-
<option>3</option>
133-
<option>4</option>
134-
<option>5</option>
135-
<option selected>6</option>
136-
<option>7</option>
137-
<option>8</option>
138-
<option>9</option>
139-
<option>10</option>
140-
<option>20</option>
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>
141170
</select>
142171
</div>
143172
<div class="col-2"> Worksheets</div>
144-
<ul id="categoryTabs" class="col-9 tabs group btn-group"></ul>
145173
<table class="table"><tbody id="output"></tbody></table>
146174
</div>
147175
</div>
176+
148177
<div id="worksheetSelectView" style="display: none;">
149178
<table class="table"><tbody id="output"></tbody></table>
179+
worksheetSelectView
150180
<div class="text-center text-muted">
151181
Author: <a href="https://lewdev.github.io">Lewis Nakao</a>
152182
</div>
153183
</div>
184+
154185
<div id="worksheetView" style="display: none;">
155186
<div class="row no-print worksheets-view-panel">
156187
<div class="col-3">
@@ -184,8 +215,7 @@ <h1 class="title"></h1>
184215
<div class="p-3 row">
185216
<div class="col-md-8">
186217
<h3>What is this?</h3>
187-
<p>A math homework generator that I initially wanted to be simple for my daughter, but I wanted
188-
more features and it might continue to grow.</p>
218+
<p>A math homework generator that I initially wanted to be simple solution for my daughters.</p>
189219
<h3>Why?</h3>
190220
<p>I just wanted some simple equations for her to practice multiplication since I started teaching her.</p>
191221
<p>Now it's become a mission to be something better or at least different from what else is out there.</p>

0 commit comments

Comments
 (0)