-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (74 loc) · 8.79 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
73
74
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./dress_code.css">
<title>Teleprompter</title>
</head>
<body>
<aside>
<nav>
<ul>
<!-- Text size -->
<li>
<input type="range" min="2" max="50" value="6" step="1" class="mg-left-30" id="text-size" oninput="changeFontSize()">
<span class="icon_container">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.5715 12.5714H19.7143C19.5572 12.5714 19.4286 12.7 19.4286 12.8571V16.8571C19.4286 17.0143 19.5572 17.1429 19.7143 17.1429H21.4286C21.5857 17.1429 21.7143 17.0143 21.7143 16.8571V14.8571H23.8572V26.2857H22.2143C22.0572 26.2857 21.9286 26.4143 21.9286 26.5714V28.2857C21.9286 28.4429 22.0572 28.5714 22.2143 28.5714H28.0715C28.2286 28.5714 28.3572 28.4429 28.3572 28.2857V26.5714C28.3572 26.4143 28.2286 26.2857 28.0715 26.2857H26.4286V14.8571H28.5715V16.8571C28.5715 17.0143 28.7 17.1429 28.8572 17.1429H30.5715C30.7286 17.1429 30.8572 17.0143 30.8572 16.8571V12.8571C30.8572 12.7 30.7286 12.5714 30.5715 12.5714ZM21.1429 8.28572V3.71429C21.1429 3.55715 21.0143 3.42857 20.8572 3.42857H1.4286C1.27145 3.42857 1.14288 3.55715 1.14288 3.71429V8.28572C1.14288 8.44286 1.27145 8.57143 1.4286 8.57143H3.4286C3.58574 8.57143 3.71431 8.44286 3.71431 8.28572V6H9.71431V26H6.4286C6.27145 26 6.14288 26.1286 6.14288 26.2857V28.2857C6.14288 28.4429 6.27145 28.5714 6.4286 28.5714H15.8572C16.0143 28.5714 16.1429 28.4429 16.1429 28.2857V26.2857C16.1429 26.1286 16.0143 26 15.8572 26H12.5715V6H18.5715V8.28572C18.5715 8.44286 18.7 8.57143 18.8572 8.57143H20.8572C21.0143 8.57143 21.1429 8.44286 21.1429 8.28572Z" fill="#9B9B9B"/>
</svg>
</span>
</li>
<!-- Text align -->
<li>
<span id="left" class="icon_container align-option" onclick="changeAlign(this)">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.00001 5.92857H19.7143C19.8714 5.92857 20 5.8 20 5.64285V3.64285C20 3.48571 19.8714 3.35714 19.7143 3.35714H2.00001C1.84287 3.35714 1.71429 3.48571 1.71429 3.64285V5.64285C1.71429 5.8 1.84287 5.92857 2.00001 5.92857ZM2.00001 21.0714H19.7143C19.8714 21.0714 20 20.9429 20 20.7857V18.7857C20 18.6286 19.8714 18.5 19.7143 18.5H2.00001C1.84287 18.5 1.71429 18.6286 1.71429 18.7857V20.7857C1.71429 20.9429 1.84287 21.0714 2.00001 21.0714ZM30 26.0714H2.00001C1.84287 26.0714 1.71429 26.2 1.71429 26.3571V28.3571C1.71429 28.5143 1.84287 28.6429 2.00001 28.6429H30C30.1572 28.6429 30.2857 28.5143 30.2857 28.3571V26.3571C30.2857 26.2 30.1572 26.0714 30 26.0714ZM30 10.9286H2.00001C1.84287 10.9286 1.71429 11.0571 1.71429 11.2143V13.2143C1.71429 13.3714 1.84287 13.5 2.00001 13.5H30C30.1572 13.5 30.2857 13.3714 30.2857 13.2143V11.2143C30.2857 11.0571 30.1572 10.9286 30 10.9286Z" fill="#9B9B9B"/>
</svg>
</span>
<span id="center" class="icon_container align-option" onclick="changeAlign(this)">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.14287 5.92857H24.8572C25.0143 5.92857 25.1429 5.8 25.1429 5.64286V3.64286C25.1429 3.48571 25.0143 3.35714 24.8572 3.35714H7.14287C6.98572 3.35714 6.85715 3.48571 6.85715 3.64286V5.64286C6.85715 5.8 6.98572 5.92857 7.14287 5.92857ZM24.8572 21.0714C25.0143 21.0714 25.1429 20.9429 25.1429 20.7857V18.7857C25.1429 18.6286 25.0143 18.5 24.8572 18.5H7.14287C6.98572 18.5 6.85715 18.6286 6.85715 18.7857V20.7857C6.85715 20.9429 6.98572 21.0714 7.14287 21.0714H24.8572ZM30 26.0714H2.00001C1.84287 26.0714 1.71429 26.2 1.71429 26.3571V28.3571C1.71429 28.5143 1.84287 28.6429 2.00001 28.6429H30C30.1572 28.6429 30.2857 28.5143 30.2857 28.3571V26.3571C30.2857 26.2 30.1572 26.0714 30 26.0714ZM30 10.9286H2.00001C1.84287 10.9286 1.71429 11.0571 1.71429 11.2143V13.2143C1.71429 13.3714 1.84287 13.5 2.00001 13.5H30C30.1572 13.5 30.2857 13.3714 30.2857 13.2143V11.2143C30.2857 11.0571 30.1572 10.9286 30 10.9286Z" fill="#9B9B9B"/>
</svg>
</span>
<span id="right" class="icon_container align-option" onclick="changeAlign(this)">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 3.35714H12.2857C12.1286 3.35714 12 3.48571 12 3.64285V5.64285C12 5.8 12.1286 5.92857 12.2857 5.92857H30C30.1572 5.92857 30.2857 5.8 30.2857 5.64285V3.64285C30.2857 3.48571 30.1572 3.35714 30 3.35714ZM30 18.5H12.2857C12.1286 18.5 12 18.6286 12 18.7857V20.7857C12 20.9429 12.1286 21.0714 12.2857 21.0714H30C30.1572 21.0714 30.2857 20.9429 30.2857 20.7857V18.7857C30.2857 18.6286 30.1572 18.5 30 18.5ZM30 26.0714H2.00001C1.84287 26.0714 1.71429 26.2 1.71429 26.3571V28.3571C1.71429 28.5143 1.84287 28.6429 2.00001 28.6429H30C30.1572 28.6429 30.2857 28.5143 30.2857 28.3571V26.3571C30.2857 26.2 30.1572 26.0714 30 26.0714ZM30 10.9286H2.00001C1.84287 10.9286 1.71429 11.0571 1.71429 11.2143V13.2143C1.71429 13.3714 1.84287 13.5 2.00001 13.5H30C30.1572 13.5 30.2857 13.3714 30.2857 13.2143V11.2143C30.2857 11.0571 30.1572 10.9286 30 10.9286Z" fill="#9B9B9B"/>
</svg>
</span>
<span class="icon_container mg-left-30">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30 3.42857H2.00001C1.84287 3.42857 1.71429 3.55715 1.71429 3.71429V6C1.71429 6.15715 1.84287 6.28572 2.00001 6.28572H30C30.1572 6.28572 30.2857 6.15715 30.2857 6V3.71429C30.2857 3.55715 30.1572 3.42857 30 3.42857ZM30 25.7143H2.00001C1.84287 25.7143 1.71429 25.8429 1.71429 26V28.2857C1.71429 28.4429 1.84287 28.5714 2.00001 28.5714H30C30.1572 28.5714 30.2857 28.4429 30.2857 28.2857V26C30.2857 25.8429 30.1572 25.7143 30 25.7143ZM30 14.5714H2.00001C1.84287 14.5714 1.71429 14.7 1.71429 14.8571V17.1429C1.71429 17.3 1.84287 17.4286 2.00001 17.4286H30C30.1572 17.4286 30.2857 17.3 30.2857 17.1429V14.8571C30.2857 14.7 30.1572 14.5714 30 14.5714Z" fill="#9B9B9B"/>
</svg>
</span>
</li>
<!-- Speed rolling -->
<li>
<input type="range" min="1" max="20" value="1" class="mg-left-30" id="speed">
<span class="icon_container mg-left-30">
<svg viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.7571 12.2964L3.63928 0.646431C3.53214 0.507145 3.36428 0.428574 3.18928 0.428574H0.428565C0.189279 0.428574 0.0571363 0.703573 0.203565 0.889288L9.68214 13L0.203565 25.1107C0.170589 25.1528 0.150128 25.2034 0.144522 25.2566C0.138915 25.3097 0.148389 25.3634 0.17186 25.4115C0.195331 25.4596 0.231852 25.5 0.277247 25.5283C0.322643 25.5566 0.37508 25.5715 0.428565 25.5714H3.18928C3.36428 25.5714 3.53214 25.4893 3.63928 25.3536L12.7571 13.7071C13.0821 13.2893 13.0821 12.7107 12.7571 12.2964V12.2964ZM23.6143 12.2964L14.4964 0.646431C14.3893 0.507145 14.2214 0.428574 14.0464 0.428574H11.2857C11.0464 0.428574 10.9143 0.703573 11.0607 0.889288L20.5393 13L11.0607 25.1107C11.0277 25.1528 11.0073 25.2034 11.0017 25.2566C10.9961 25.3097 11.0055 25.3634 11.029 25.4115C11.0525 25.4596 11.089 25.5 11.1344 25.5283C11.1798 25.5566 11.2322 25.5715 11.2857 25.5714H14.0464C14.2214 25.5714 14.3893 25.4893 14.4964 25.3536L23.6143 13.7071C23.9393 13.2893 23.9393 12.7107 23.6143 12.2964V12.2964Z" fill="#9B9B9B"/>
</svg>
</span>
</li>
<!-- Play and Pause -->
<li>
<span class="icon_container" id="action" onclick="clickPlay()">
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.3687 15.4219L10.4688 5.15937C10.025 4.77812 9.375 5.12187 9.375 5.7375V26.2625C9.375 26.8781 10.025 27.2219 10.4688 26.8406L22.3687 16.5781C22.7094 16.2844 22.7094 15.7156 22.3687 15.4219Z" fill="#9B9B9B"/>
</svg>
</span>
</li>
</ul>
</nav>
</aside>
<main>
<!-- Text area -->
<textarea id="text-area" autocorrect="off" spellcheck="false"></textarea>
</main>
<script src="./core/text_size.js" type="text/javascript"></script>
<script src="./core/scroll_text_area.js" type="text/javascript"></script>
<script src="./core/text_align.js" type="text/javascript"></script>
</body>
</html>