-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtool-reading-times.html
156 lines (144 loc) · 7.29 KB
/
tool-reading-times.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Reading times tool</title>
<link rel="shortcut icon" type="image/png" href="public/images/favicons/favicon-screen-sizes.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./public/main.css?v=20210321"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous">
</script>
</head>
<body class="converter">
<header class="header">
<div class="container">
<div class="header--top">
<div class="row">
<div class="col s12 m10 offset-m1">
<h1>Reading times</h1>
<h2>Determines approximate reading time</h2>
<a href="#" data-target="slide-out" class="top-nav sidenav-trigger full hide-on-large-only">
<i class="material-icons">menu</i>
</a>
</div>
</div>
</div>
</div>
<ul class="sidenav sidenav-fixed sticky-footer--wrapper" id="slide-out">
<li class="logo">
<a href="/" target="_self">
<img src="public/images/logo.png" alt="converter.dmetzler.io"/>
</a>
</li>
<li>
<div class="divider"></div>
</li>
<li class="bold">
<a href="/" class="waves-effect waves-teal">About</a>
</li>
<li class="bold">
<a href="./../html-css-splitter.html" class="waves-effect waves-teal">html-css-splitter</a>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold">
<a class="collapsible-header waves-effect waves-teal" tabindex="0">Converters</a>
<div class="collapsible-body">
<ul>
<li>
<a href="./../converter-colors.html">Converter Colors</a>
</li>
<li>
<a href="./../converter-screen-sizes.html">Converter Screen Sizes</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold active">
<a class="collapsible-header waves-effect waves-teal" tabindex="0">Tools</a>
<div class="collapsible-body">
<ul>
<li class="active">
<a href="./../tool-reading-times.html">Reading Times</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="sticky-footer--footer">
<div class="github-badge">
<a href="/~https://github.com/dmetzler1988-org/converter" target="_blank" title="View GitHub Code">
<i class="material-icons">visibility</i>
<i class="github-icon"></i>
<i class="material-icons">code</i>
</a>
</div>
</li>
</ul>
</header>
<main class="tool--reading-times">
<div class="container">
<div class="row">
<div class="col s12 m10 offset-m1">
<section class="section">
<header class="row">
<div class="col s12">
<p>An average adult reader reads about 265 words per minute and needs 20 seconds for one image.</p>
<p>
<b>Calculation:</b><br/>
Number of all words to be read on the page / 265 = Number of minutes to read.<br/>
</p>
</div>
</header>
<section class="row">
<div class="input-field col s12">
<div class="row">
<div class="col s12 m4 l3">
<input id="imagesInput" type="number" min="0" placeholder="5">
<label for="imagesInput">Number of images in text</label>
</div>
</div>
</div>
<div class="input-field col s12">
<textarea id="textInput" class="materialize-textarea"></textarea>
<label for="textInput">Input Area for text to count</label>
</div>
<div class="col s12 m6">
<button id="convert" type="button" class="btn waves-effect waves-light">Convert
<i class="material-icons right">cached</i>
</button>
<button id="clean-fields" class="btn waves-effect waves-light">Clean up
<i class="material-icons right">delete</i>
</button>
</div>
<div class="col s12 m6 content__is-right">
<button id="demoContent" type="button" class="waves-effect waves-teal btn-flat">
Fill in demo content
<i class="material-icons right">accessible</i>
</button>
</div>
</section>
<footer class="row">
<div class="col s12">
<div id="output"></div>
</div>
</footer>
</section>
</div>
</div>
</div>
</main>
<script type="text/javascript" src="./public/main.js?v=20210321"></script>
<script type="text/javascript">
window.ReadingTimesTool.init();
</script>
</body>
</html>