-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
55 lines (51 loc) · 2.94 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
<!DOCTYPE html>
<html>
<head>
<title>ScreenWiz</title>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="./assets/logo.png" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="style.css">
</head>
<body class="dark-theme">
<section class="pt-24 bg-white main">
<div class="px-12 mx-auto max-w-7xl">
<div class="w-full mx-auto text-left md:w-11/12 xl:w-9/12 md:text-center">
<h1
class="mb-8 text-4xl leading-none md:leading-normal font-extrabold tracking-normal text-gray-900 md:text-6xl md:tracking-tight">
<span class="main-txt">Unleash your</span> <span
class="block w-full py-2 text-transparent bg-clip-text leading-12 bg-gradient-to-r from-green-400 to-purple-500 lg:inline">
Screen recording</span> <span class="main-txt">with ScreenWiz</span>
</h1>
<p class="px-0 mb-8 text-lg text-gray-600 md:text-xl lg:px-24 main-txt">
Capture, Create, Conquer
</p>
<div class="mb-4 space-x-0 md:space-x-2 md:mb-8">
<button
class="record-btn inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg text-white bg-green-400 rounded-2xl sm:w-auto sm:mb-0">
Record Screen
<svg class="w-4 h-4 ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
</button>
<button id="theme-toggle" onclick="themeToggle()"
class="inline-flex items-center justify-center w-full px-6 py-3 mb-2 text-lg bg-gray-100 rounded-2xl sm:w-auto sm:mb-0">
Change light/dark
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
</path>
</svg>
</button>
</div>
<video class="video hidden shadow-2xl" width="100%" controls></video>
</div>
</div>
</section>
<script src="./index.js"></script>
</body>
</html>