-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
72 lines (72 loc) · 6.07 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Agastya Reader</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; min-height: 100vh }
main { max-width: 600px; margin: auto; padding: 1rem; line-height: 1.65; }
input, button, select, textarea { box-sizing: border-box; width: 100%; display: block; font: inherit; border: 1px solid #ddd; border-radius: 0.25rem; padding: 1rem; margin-bottom: 1rem; }
button { width: auto; padding: 1rem 1.5rem; background-color: whitesmoke; font-weight: bold; }
a#show-more-options { text-align: center; text-decoration: underline; display: block; margin: 10px 0; }
a#agastya-toggler { text-align: center; font-weight: bold; display: block; margin: 10px 0; }
#agastyaOptions { max-width: 600px; margin: auto; padding: 1rem; background: whitesmoke; border-radius: 0.25rem; border: 1px solid #ddd; } #agastyaOptions button { display: inline-block; width: calc(50% - 0.5rem); box-shadow: 0 4px 15px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.1); border: 1px solid #ddd; } #agastyaOptions button:not(.full):nth-child(2n+1) { float: right; clear: both; } #agastyaOptions button.full { width: 100%; }
#agastyaOptions button.dyslexia { width: 100%; background-color: #feed64; }
#agastyaOptions button.blue-light-filter { width: 100%; background-color: #fec; }
#agastyaOptions button.night { background-color: #1e2a35; color: #efefef; }
#agastyaOptions .input-group { background-color: #FFF; padding: 1rem; border-radius: 0.25rem; box-shadow: 0 4px 15px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.1); border: 1px solid #ddd; margin-bottom: 1rem; }
#agastyaOptions input[type=range]{ -webkit-appearance:none; -moz-appearance:none; appearance:none; width:100%; margin:0; margin-top: 0.5rem; border: none; }
#agastyaOptions input[type=range]::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;background:#ccc;border-radius:25px;border:0 solid rgba(1, 1, 1, 0)}
#agastyaOptions input[type=range]::-webkit-slider-thumb{-webkit-box-shadow:0 4px 10px rgba(0, 0, 0, .35);box-shadow:0 4px 10px rgba(0, 0, 0, .35);border:1px solid #ddd;height:25px;width:25px;border-radius:50px;background:#fff; cursor:pointer;-webkit-appearance:none;margin-top:-10px}
#agastyaOptions input[type=range]:focus::-webkit-slider-runnable-track{background:#999}
#agastyaOptions input[type=range]::-moz-range-track{width:100%;height:5px;cursor:pointer;background:#aaa;border-radius:25px;border:0 solid rgba(1, 1, 1, 0)}
#agastyaOptions input[type=range]::-moz-range-thumb{box-shadow:0 4px 10px rgba(0, 0, 0, .35);border:1px solid #ddd;height:25px;width:25px;border-radius:50px;background:#fff;cursor:pointer}
#agastyaOptions input[type=range]::-ms-track{width:100%;height:5px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}
#agastyaOptions input[type=range]::-ms-fill-lower{background:#00007a;border:0 solid rgba(1, 1, 1, 0);border-radius:50px}
#agastyaOptions input[type=range]::-ms-fill-upper{background:#aaa;border:0 solid rgba(1, 1, 1, 0);border-radius:50px}
#agastyaOptions input[type=range]::-ms-thumb{box-shadow:0 4px 10px rgba(0, 0, 0, .35);border:1px solid #ddd;height:25px;width:25px;border-radius:50px;background:#fff;cursor:pointer;height:5px}
.hidden { display: none; }
</style>
</head>
<body>
<div id="agastyaOptions" data-agastya-ignore-deep>
<a id="agastya-toggler"><span class="more">Open</span><span class="less hidden">Close</span> reader settings <span class="arrow-more">▼</span><span class="arrow-less hidden">▲</span></a>
<div id="options-container" class="hidden">
<button class="dyslexia full" data-option="dyslexia">Dyslexia mode</button>
<!-- <button class="blue-light-filter full" data-option="blue-light-filter">Blue filter</button>
<button class="night" data-option="night">Night mode</button> -->
<button class="read-aloud full" data-option="read-aloud">Read aloud</button>
<a id="show-more-options">Show more options</a>
<div id="more-options" class="hidden">
<div class="input-group">
<label for="font-size">Font size</label>
<input name="font-size" data-option="fontSize" type="range" min="100" max="150" value="100">
</div>
<div class="input-group">
<label for="letter-spacing">Letter spacing</label>
<input name="letter-spacing" data-option="letterSpacing" type="range" min="-0.5" max="3" step="0.1" value="0">
</div>
<div class="input-group">
<label for="line-height">Line height</label>
<input name="line-height" data-option="lineHeight" type="range" min="0.8" max="2" step="0.05" value="0">
</div>
<div class="input-group">
<label for="word-spacing">Word spacing</label>
<input name="word-spacing" data-option="wordSpacing" type="range" min="-10" max="30" step="2" value="0">
</div>
</div>
</div>
</div>
<main>
<h1>Test</h1>
<form>
<textarea rows="10" placeholder="Enter text here..."></textarea>
<button type="submit">Generate link</button>
</form>
</main>
<script src="https://unpkg.com/snarkdown@1.2.2/dist/snarkdown.umd.js"></script>
<script src="/index.js"></script>
<script async defer src="https://platform-beta.oswaldlabs.com/v1/agastya/load/augmenta11y.js"></script>
</body>
</html>