-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
308 lines (298 loc) · 17.5 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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<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">
<title>Screen Recorder By Sunny</title>
<link rel="icon" type="image/x-icon" href="public/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="public/css/tailwind.css">
<link rel="stylesheet" href="public/earth.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script rel="stylesheet" src="public/record.js"></script>
<script type='text/javascript'>
var isCtrl = false;
document.onkeyup=function(e)
{
if(e.which == 17)
isCtrl=false;
}
document.onkeydown=function(e)
{
if(e.which == 17)
isCtrl=true;
if((e.which == 85) || (e.which == 80) || (e.which == 123) || (e.which == 67) && (isCtrl == true))
{
return false;
}
}
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
function mischandler(){
return false;
}
function mousehandler(e){
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>
</head>
<body class="bg-gradient-to-r from-black bg-gray-800" oncontextmenu="return false;">
<div class="min-h-full">
<!-- Header Start -->
<header class="shadow">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between">
<h1 class="text-3xl font-bold text-yellow-800">Screen Recorder By SunnY</h1>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<button type="button" class="mr-2 animate-bounce transition duration-700 ease-in-out p-1 rounded-full text-yellow-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<i class="fa fa-facebook" aria-hidden="true"></i>
</button>
<button type="button" class="mr-2 animate-bounce transition duration-700 ease-in-out p-1 rounded-full text-yellow-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<i class="fa-brands fa-youtube"></i>
</button>
<button type="button" class="mr-2 animate-bounce transition duration-700 ease-in-out p-1 rounded-full text-yellow-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<i class="fa-brands fa-whatsapp"></i>
</button>
<button type="button" class=" mr-2 animate-bounce transition duration-700 ease-in-out p-1 rounded-full text-yellow-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<i class="fa-brands fa-instagram"></i>
</button>
<!-- Profile dropdown -->
</div>
</div>
</div>
</header>
<!-- Header End -->
<!-- Nav Start -->
<nav class="bg-gradient-to-r from-amber-800 to-amber-600">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 contrast-125 rounded-full" src="public/team1.jpg" alt="Workflow">
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<a href="#" class="text-gray-300 hover:bg-gradient-to-r from-amber-600 to-amber-400 px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Home</a>
</div>
</div>
</div>
<!-- <div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6"> -->
<!-- Profile dropdown -->
<!-- <div class="ml-3 relative">
<div class="flex justify-between">
<button type="button" class="transition duration-700 ease-in-out mr-2 max-w-xs hover:text-yellow-600 text-gray-200 flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
Login
</button>
<button type="button" class="transition duration-700 ease-in-out max-w-xs hover:text-yellow-600 text-gray-200 flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
Register
</button>
</div>
</div>
</div>
</div> -->
<div class="-mr-2 flex md:hidden">
<!-- Mobile menu button -->
<button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
</nav>
<!-- Nav End -->
<main class="overflow-hidden">
<div class="container flex justify-center items-center md:px-52 px-0 mb-8">
<div class="earth"></div>
</div>
<!-- Image Slider Start -->
<div class="container mx-auto py-8 px-4">
<center>
<h2 class="text-xl text-white uppercase font-light mb-4">Screen Recorder</h2>
<video src="" width="800" height="400" class="video-feedback bg-black mb-4" autoplay></video>
</center>
<div class="flex justify-center items-center md:px-52 px-0 mb-8">
<button class="start-recording rounded-full mx-4 flex-1 bg-gradient-to-r from-amber-600 to-amber-400 p-4 uppercase text-lg font-bold text-white transition duration-300 hover:opacity-90 disabled:opacity-50">
Start Recording
</button>
<button class="stop-recording rounded-full mx-4 flex-1 bg-gradient-to-r from-amber-600 to-amber-400 p-4 uppercase text-lg font-bold text-white transition duration-300 hover:opacity-90 disabled:opacity-50" disabled>
Stop Recording
</button>
</div>
<div class="recorded-video-wrap hidden">
<center>
<h2 class="text-xl text-gray-500 uppercase font-light mb-4">Download Video</h2>
<video src="" width="800" height="400" class="recorded-video bg-black mb-4" ></video>
<div class="flex justify-center items-center md:px-52 px-0 mb-8">
<a href="" class="download-video text-center mx-4 flex-1 bg-gradient-to-r from-amber-600 to-amber-400 p-4 uppercase text-lg text-white font-bold transition duration-300 hover:opacity-90 disabled:opacity-50" disabled>
Download Video
</a>
</div>
</center>
</div>
</div>
<!-- <div class="container flex justify-center items-center md:px-52 px-0 mb-8">
<center>
<h2 class="text-xl text-white uppercase font-light mb-4">Take A Screen Shot</h2>
<img src="public/frame.png" alt="frame"/>
<canvas id="screenshot"></canvas>
<button id="btn" onclick="screenShot()"
class="rounded-full mx-4 flex-1 bg-gradient-to-r from-amber-600 to-amber-400 p-4 uppercase text-lg font-bold transition duration-300 hover:opacity-90 disabled:opacity-50">Take Screenshot</button>
</center>
</div> -->
</main>
<!-- Footer Start -->
<footer class="mt-4 text-center lg:text-left bg-gradient-to-r from-amber-800 to-amber-600 text-white">
<div class="flex justify-center items-center lg:justify-between p-6 border-b border-gray-300">
<div class="mr-12 hidden lg:block">
<span>Get connected with us on social networks:</span>
</div>
<div class="flex justify-center">
<a href="#!" class="mr-6 text-amber-900 hover:text-white transition duration-700 ease-in-out">
<i class="fa fa-facebook w-2.5" aria-hidden="true"></i>
</a>
<a href="#!" class="mr-6 text-amber-900 hover:text-white transition duration-700 ease-in-out">
<i class="fa fa-instagram w-2.5" aria-hidden="true"></i>
</a>
<a href="#!" class="mr-6 text-amber-900 hover:text-white transition duration-700 ease-in-out">
<i class="fa fa-whatsapp w-2.5" aria-hidden="true"></i>
</a>
<a href="#!" class="mr-6 text-amber-900 hover:text-white transition duration-700 ease-in-out">
<i class="fa fa-youtube w-2.5" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="mx-6 py-10 text-center md:text-left">
<div class="grid grid-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="">
<h6 class="
uppercase
font-semibold
mb-4
flex
items-center
justify-center
md:justify-start
">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cubes"
class="w-4 mr-3" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z">
</path>
</svg>
Our Services
</h6>
<p class="select-none">
Here you can use this website for recording your dextop and laptop screen free.
</p>
</div>
<div class="">
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
Products
</h6>
<p class="mb-4">
<a href="#!" class="transition duration-700 ease-in-out hover:text-gray-800 text-white">Angular</a>
</p>
<p class="mb-4">
<a href="#!" class="transition duration-700 ease-in-out hover:text-gray-800 text-white">React</a>
</p>
<p class="mb-4">
<a href="#!" class="transition duration-700 ease-in-out hover:text-gray-800 text-white">Vue</a>
</p>
<p>
<a href="#!" class="transition duration-700 ease-in-out hover:text-gray-800 text-white">Laravel</a>
</p>
</div>
<div class="">
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
Useful links
</h6>
<p class="mb-4">
<a href="#!" class="transition duration-700 ease-in-out hover:text-gray-800 text-white">Pricing</a>
</p>
<p class="mb-4">
<a href="#!" class="transition duration-700 ease-in-out hover:text-gray-800 text-white">Settings</a>
</p>
<p class="mb-4">
<a href="#!" class="transition duration-700 ease-in-out hover:text-gray-800 text-white">Orders</a>
</p>
<p>
<a href="#!" class="transition duration-700 ease-in-out hover:text-gray-800 text-white">Help</a>
</p>
</div>
<div class="">
<h6 class="uppercase font-semibold mb-4 flex justify-center md:justify-start">
Contact
</h6>
<p class="flex items-center justify-center md:justify-start mb-4 transition duration-700 ease-in-out hover:text-gray-800 text-white">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="home"
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="currentColor"
d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z">
</path>
</svg>
235/241, Hazi Ismail road, Khulna, Bangladesh.
</p>
<p class="flex items-center justify-center md:justify-start mb-4 transition duration-700 ease-in-out hover:text-gray-800 text-white">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope"
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z">
</path>
</svg>
info.coderszonebd21@gmail.com
</p>
<p class="flex items-center justify-center md:justify-start mb-4 transition duration-700 ease-in-out hover:text-gray-800 text-white">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone"
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z">
</path>
</svg>
+88-01677-273025
</p>
<p class="flex items-center justify-center md:justify-start transition duration-700 ease-in-out hover:text-gray-800 text-white">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="print"
class="w-4 mr-4" role="img" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M448 192V77.25c0-8.49-3.37-16.62-9.37-22.63L393.37 9.37c-6-6-14.14-9.37-22.63-9.37H96C78.33 0 64 14.33 64 32v160c-35.35 0-64 28.65-64 64v112c0 8.84 7.16 16 16 16h48v96c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-96h48c8.84 0 16-7.16 16-16V256c0-35.35-28.65-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.84 7.16 16 16 16h48v96zm48 72c-13.25 0-24-10.75-24-24 0-13.26 10.75-24 24-24s24 10.74 24 24c0 13.25-10.75 24-24 24z">
</path>
</svg>
+88-01312-575801
</p>
</div>
</div>
</div>
<div class="text-center p-6 bg-gradient-to-r from-amber-800 to-amber-600 transition duration-700 ease-in-out hover:text-gray-800 text-white">
<span>© 2022 Copyright:</span>
<a class="font-semibold transition duration-700 ease-in-out hover:text-gray-800 text-white"
href="http://www.coderszonebd.com">Sunny's Zone</a>
</div>
</footer>
<!-- Footer End -->
</div>
<script src="https://use.fontawesome.com/79bdfd564a.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
<script src="./TW-ELEMENTS-PATH/dist/js/index.min.js"></script>
<script>
import 'tw-elements';
</script>
</body>
</html>