-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
174 lines (138 loc) · 7.18 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
<!--
______________________________________________________________________________________________
| |
| 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" />
<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" />
-->
<link rel="stylesheet" type="text/css" href="./main.css" media="all" />
<title>Text Scroll</title>
</head>
<body>
<div class="container-fluid">
<div class="row flex-column">
<div class="col">
<form action="#" onsubmit="return false;" class="row flex-column">
<div class="col form-group mb-3">
<label for="inputText">Input Text</label>
<textarea name="inputText" id="inputText" class="form-control" placeholder="Enter the text" rows="7" autofocus>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</textarea>
</div>
<div class="col row">
<!-- Canvas width -->
<div class="col-md-2 form-group mb-3">
<label for="canvasWidth">Width</label>
<input type="number" name="canvasWidth" id="canvasWidth" class="form-control" min="100" value="774" />
</div>
<!-- Canvas Height -->
<div class="col-md-2 form-group mb-3">
<label for="canvasHeight">Height</label>
<input type="number" name="canvasHeight" id="canvasHeight" class="form-control" min="100" value="1376" />
</div>
<!-- Horizontal Padding -->
<div class="col-md-2 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>
<!-- Vertical Padding -->
<div class="col-md-2 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>
<!-- Line Height -->
<div class="col-md-2 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>
<!-- font size -->
<div class="col-md-2 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>
<!-- background color -->
<div class="col-md-2 form-group mb-3">
<label for="backgroundColor">Background Color</label>
<input type="color" name="backgroundColor" id="backgroundColor" class="form-control" value="#000000" />
</div>
<!-- text color -->
<div class="col-md-2 form-group mb-3">
<label for="textColor">Text Color</label>
<input type="color" name="textColor" id="textColor" class="form-control" value="#ffffff" />
</div>
<!-- fps -->
<div class="col-md-2 form-group mb-3">
<label for="fps">FPS</label>
<input type="number" name="fps" id="fps" class="form-control" min="10" value="30" />
</div>
<!-- Scroll Speed -->
<div class="col-md-2 form-group mb-3">
<label for="scrollSpeed">Scroll Speed</label>
<input type="number" name="scrollSpeed" id="scrollSpeed" class="form-control" min="0" value="3" />
</div>
<!-- Font Family -->
<div class="col-md-4 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 Style -->
<div class="col-md-2 form-group mb-3">
<label for="fontStyle">Font Style</label>
<select name="fontStyle" id="fontStyle" class="form-control">
<option value="" selected>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>
<!-- Text Alignment -->
<div class="col-md-2 form-group mb-3">
<label for="textAlignment">Text Alignment</label>
<select name="textAlignment" id="textAlignment" class="form-control">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
<option value="justified">Justified</option>
</select>
</div>
</div>
<!-- button container -->
<div class="col form-group text-center my-3">
<!-- Play Button -->
<button type="button" id="playButton" class="btn btn-success mx-2">Play</button>
<!-- Preview & Download -->
<button type="button" id="previewDownloadButton" class="btn btn-primary text-nowrap">Preview & Download</button>
</div>
</form>
</div>
<!-- Animation Container -->
<div class="col animation-container">
<div class="canvas-container w-100 overflow-auto my-3">
<canvas id="canvas1"></canvas>
</div>
</div>
</div>
</div>
<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> -->
<script type="text/javascript" src="./main.js"></script>
</body>
</html>