-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (106 loc) · 5.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>PixelCorder</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Meta -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Capture and download your screen recording with ease.">
<!-- Open Graph (OG) meta tags -->
<meta property="og:title" content="PixelCorder">
<meta property="og:description" content="Capture and download your screen recording with ease.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://qzxtu.github.io/PixelCorder/">
<meta property="og:image" content="images/icon.png">
<!-- Twitter meta tags -->
<meta property="twitter:card" content="https://qzxtu.github.io/PixelCorder/images/card.jpeg">
<meta property="twitter:title" content="PixelCorder">
<meta property="twitter:description" content="Capture and download your screen recording with ease.">
<meta property="twitter:image" content="https://qzxtu.github.io/PixelCorder/images/card.jpeg">
<!-- Favicon -->
<link rel="shortcut icon" href="images/icon.png" type="image/x-icon">
<!-- Additional meta tags for SEO -->
<meta name="robots" content="index, follow">
<meta name="keywords" content="screen recording, capture, download, video">
<meta name="author" content="qzxtu">
<!-- Styles -->
<link rel="stylesheet" href="css/style.css">
</head>
<!-- Body -->
<body>
<div class="overlay"></div>
<div class="container">
<h1>PixelCorder</h1>
<div class="form-group">
<label for="resolution">Select Resolution:</label>
<select id="resolution">
<option value="1920x1080">1080p</option>
<option value="1280x720">720p</option>
<option value="854x480">480p</option>
<option value="640x480">VGA (640x480)</option>
<option value="1920x1200">WUXGA (1920x1200)</option>
<option value="2560x1440">2K (2560x1440)</option>
<option value="3840x2160">4K UHD (3840x2160)</option>
</select>
</div>
<div class="form-group">
<label for="format">Select Format:</label>
<select id="format">
</select>
</div>
<div class="form-group">
<label for="quality">Select FPS:</label>
<select id="quality">
<option value="30">30 FPS</option>
<option value="60">60 FPS</option>
</select>
</div>
<div class="form-group">
<button id="startButton">Start Recording</button>
<button id="pauseButton" disabled>Pause</button>
<button id="stopButton" disabled>Stop</button>
<button id="downloadButton" disabled>Download</button>
</div>
<div class="video-container">
<video id="recordedVideo" controls></video>
</div>
<div id="notification" class="notification hidden">
<p id="notificationText"></p>
</div>
</div>
<!-- Main JS -->
<script src="js/main.js"></script>
<!-- Script -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const currentYear = new Date().getFullYear();
document.title = `PixelCorder | Copyright © ${currentYear} Qzxtu`;
});
</script>
<script>
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile) {
window.location.href = "404.html";
}
</script>
<script>
window.onload = function() {
let formatosSoportados = ['video/webm;codecs=vp8,opus', 'video/mp4;codecs=h264,aac', 'video/ogg;codecs=theora,vorbis', 'video/mkv;codecs=h264,aac', 'video/avi;codecs=msmpeg4v2', 'video/flv;codecs=h264,aac', 'video/mov;codecs=h264,aac'];
let formatSelect = document.getElementById('format');
formatSelect.innerHTML = '';
formatosSoportados.forEach(function(formato) {
if (MediaRecorder.isTypeSupported(formato)) {
let option = document.createElement('option');
option.value = formato;
option.text = formato.split(';')[0].toUpperCase();
formatSelect.appendChild(option);
}
});
};
</script>
</body>
</html>