-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (199 loc) · 9.75 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
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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!--
______________________________________________________________________________________________
| |
| Copyright 2024 ag-sanjjeev |
| |
| The source code is licensed under MIT-style License. |
| The usage, permission and condition are applicable to this source code as per license. |
| That can be found in LICENSE file or at https://opensource.org/licenses/MIT. |
|______________________________________________________________________________________________|
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" integrity="sha512-usVBAd66/NpVNfBge19gws2j6JZinnca12rAe2l+d+QkLU9fiG02O1X8Q6hepIpr/EYKZvKx/I9WsnujJuOmBA==" crossorigin="anonymous" referrerpolicy="no-referrer" media="all" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" media="all" />
<!-- <link rel="stylesheet" type="text/css" href="../bootstrap/bootstrap.css" media="all" /> -->
<!-- <link rel="stylesheet" type="text/css" href="../icons/fontawesome/css/all.css" media="all" /> -->
<title>Text Animation</title>
</head>
<body>
<!-- Text Animation Section -->
<section class="container-fluid">
<!-- Form -->
<form class="row my-4" action="#" onsubmit="return false;">
<!-- Input Textarea Field -->
<div class="col-12 mb-3">
<label for="inputText">Input Text</label>
<textarea name="inputText" id="inputText" class="form-control" autofocus>Welcome
This is sample text
அறத்திணை
வலைதளத்திற்கு வருக
அடடே! தேடி வந்த பக்கம் காணவில்லை. ஒருவேளை, நீக்கப்பட்டிருக்கலாம் அல்லது தவறுதலாக இங்கே வந்திருக்கலாம்.
கவலைப்படாதீர்!
முகப்பு பக்கத்தில் சென்று பார்வையிடவும்...</textarea>
</div>
<!-- ./ Input Textarea Field -->
<!-- Canvas Width Input Field -->
<div class="col-md-6 mb-3">
<label for="canvasWidth">Width</label>
<div class="input-group">
<input type="number" name="canvasWidth" id="canvasWidth" class="form-control" min="100" value="774" />
<button type="button" id="setDeviceWidthButton" class="btn btn-outline-secondary" title="set current device width">
<i class="fa fa-bullseye"></i>
</button>
</div>
</div>
<!-- ./ Canvas Width Input Field -->
<!-- Canvas Height Input Field -->
<div class="col-md-6 mb-3">
<label for="canvasHeight">Height</label>
<div class="input-group">
<input type="number" name="canvasHeight" id="canvasHeight" class="form-control" min="100" value="1376" />
<button type="button" id="setDeviceHeightButton" class="btn btn-outline-secondary" title="set current device height">
<i class="fa fa-bullseye"></i>
</button>
</div>
</div>
<!-- ./ Canvas Height Input Field -->
<!-- In Transition Select Field -->
<div class="col-md-6 mb-3">
<label for="transition">Transition</label>
<select name="transition" id="transition" class="form-control">
<option value="showInOut">Show In Out</option>
<option value="fadeInOut">Fade In Out</option>
<option value="zoomInOut">Zoom In Out</option>
<option value="zoomIn">Zoom In</option>
</select>
</div>
<!-- ./ In Transition Select Field -->
<!-- In Duration Input Field -->
<div class="col-md-6 mb-3">
<label for="inTransitionDuration">In-Transition Duration</label>
<input type="number" name="inTransitionDuration" id="inTransitionDuration" class="form-control" min="0" value="1000" />
</div>
<!-- ./ In Duration Input Field -->
<!-- Out Duration Input Field -->
<div class="col-md-6 mb-3">
<label for="outTransitionDuration">Out-Transition Duration</label>
<input type="number" name="outTransitionDuration" id="outTransitionDuration" class="form-control" min="0" value="1000" />
</div>
<!-- ./ Out Duration Input Field -->
<!-- Animation Duration Input Field -->
<div class="col-md-6 mb-3">
<label for="animationDuration">Animation Duration</label>
<input type="number" name="animationDuration" id="animationDuration" class="form-control" min="0" value="2000" />
</div>
<!-- ./ Animation Duration Input Field -->
<!-- FPS Input Field -->
<div class="col-md-6 mb-3">
<label for="fps">FPS</label>
<input type="number" name="fps" id="fps" class="form-control" min="10" value="30" />
</div>
<!-- ./ FPS Input Field -->
<!-- Horizontal Padding Input Field -->
<div class="col-md-6 form-group mb-3">
<label for="paddingX">Horizontal Padding</label>
<input type="number" name="paddingX" id="paddingX" class="form-control" min="0" value="100" />
</div>
<!-- ./ Horizontal Padding Input Field -->
<!-- Vertical Padding Input Field -->
<div class="col-md-6 form-group mb-3">
<label for="paddingY">Vertical Padding</label>
<input type="number" name="paddingY" id="paddingY" class="form-control" min="0" value="100" />
</div>
<!-- ./ Vertical Padding Input Field -->
<!-- Line Height Input Field -->
<div class="col-md-6 form-group mb-3">
<label for="lineHeight">Line Height</label>
<input type="number" name="lineHeight" id="lineHeight" class="form-control" min="1" value="10" />
</div>
<!-- ./ Line Height Input Field -->
<!-- font Size Input Field -->
<div class="col-md-6 form-group mb-3">
<label for="fontSize">Font Size</label>
<input type="number" name="fontSize" id="fontSize" class="form-control" min="1" value="40" />
</div>
<!-- ./ Font Size Input Field -->
<!-- Font Family Input Field -->
<div class="col-md-6 form-group mb-3">
<label for="textFontFamily">Text Font Family</label>
<div class="input-group mb-3">
<input type="text" name="textFontFamily" id="textFontFamily" class="form-control" value="Ysabeau Infant" placeholder="(e.g., 'Open Sans', 'Arial'):" />
<button class="btn btn-outline-primary my-0" type="button" id="setFontButton">Set Font</button>
</div>
</div>
<!-- ./ Font Family Input Field -->
<!-- Font Style Select Field -->
<div class="col-md-6 form-group mb-3">
<label for="fontStyle">Font Style</label>
<select name="fontStyle" id="fontStyle" class="form-control">
<option value="">Normal</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
<option value="underline">Underline</option>
<option value="bold italic">Bold & Italic</option>
<option value="bold underline">Bold & Underline</option>
<option value="italic underline">Italic & Underline</option>
<option value="bold italic underline">Bold, Italic & Underline</option>
</select>
</div>
<!-- ./ Font Style Select Field -->
<!-- Text Alignment Select Field -->
<div class="col-md-6 form-group mb-3">
<label for="textAlignment">Text Alignment</label>
<select name="textAlignment" id="textAlignment" class="form-control">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justified">Justified</option>
</select>
</div>
<!-- ./ Text Alignment Select Field -->
<!-- Text Color Input Field -->
<div class="col-md-6 mb-3">
<label for="textColor">Text Color</label>
<input type="color" name="textColor" id="textColor" class="form-control" value="#ffffff" />
</div>
<!-- ./ Text Color Input Field -->
<!-- Background Color Input Field -->
<div class="col-md-6 mb-3">
<label for="backgroundColor">Background Color</label>
<input type="color" name="backgroundColor" id="backgroundColor" class="form-control" value="#000000" />
</div>
<!-- ./ Background Color Input Field -->
<!-- Horizontal Divider -->
<div class="col-12 mb-3">
<hr class="w-100" />
</div>
<!-- ./ Horizontal Divider -->
<!-- Buttons Section -->
<div class="col-md-12 text-center mb-3">
<!-- Play Button -->
<button type="button" id="playButton" class="btn btn-outline-primary">Play</button>
<!-- ./ Play Buttons -->
<!-- Record Button -->
<button type="button" id="recordButton" class="btn btn-outline-danger" data-state='stopped'>Start Record</button>
<!-- ./ Record Button -->
<button type="button" id="fullScreen" class="btn btn-outline-warning">Full Screen</button>
</div>
<!-- ./ Buttons Section -->
<!-- Canvas Container -->
<div class="col-md-12 w-100 overflow-auto mb-3">
<canvas id="canvas1"></canvas>
</div>
<!-- ./ Canvas Container -->
</form>
<!-- ./ Form -->
</section>
<!-- ./ Text Animation Section -->
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js" integrity="sha512-72WD92hLs7T5FAXn3vkNZflWG6pglUDDpm87TeQmfSg8KnrymL2G30R7as4FmTwhgu9H7eSzDCX3mjitSecKnw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- <script type="text/javascript" src="../bootstrap/bootstrap.bundle.js"></script> -->
<!-- Main Script -->
<script type="text/javascript" src="./main.js"></script>
</body>
</html>