110 lines
3.8 KiB
HTML
110 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Screen Capture Control</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
|
<link rel="stylesheet" href="capture-screen.css">
|
|
<style>
|
|
#captureButton {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
z-index: 9999;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#captureButton:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
|
|
.sensitive-data {
|
|
color: transparent;
|
|
background-color: #ccc;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Website Title</h1>
|
|
</header>
|
|
|
|
<div class="content-wrapper">
|
|
<main>
|
|
<h2>Main Content</h2>
|
|
<p>This is where the main content of your page goes. You can add articles, blog posts, or any other primary content here.</p>
|
|
<input type="text" value="Test 1" />
|
|
<input type="number" value="2" />
|
|
<textarea>Test 3</textarea>
|
|
<button class="capture-screen">Capture Screen</button>
|
|
|
|
<!-- Notification Widget -->
|
|
<div id="notification-widget" class="widget">
|
|
<h3>Notifications</h3>
|
|
<p>You have 3 new messages.</p>
|
|
</div>
|
|
<a href="#notification-widget" id="notification-toggle" class="widget-toggle">Toggle Notifications</a>
|
|
|
|
<!-- Chat Widget -->
|
|
<div id="chat-widget" class="widget">
|
|
<h3>Chat</h3>
|
|
<p>Chat content goes here...</p>
|
|
</div>
|
|
<a href="#chat-widget" id="chat-toggle" class="widget-toggle">Toggle Chat</a>
|
|
|
|
<!-- Quick Settings Widget -->
|
|
<div id="settings-widget" class="widget">
|
|
<h3>Quick Settings</h3>
|
|
<p>Adjust your settings here...</p>
|
|
</div>
|
|
<a href="#settings-widget" id="settings-toggle" class="widget-toggle">Toggle Settings</a>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('.capture-screen').on('click', function() {
|
|
// Hide the capture button
|
|
$(this).hide();
|
|
|
|
// Mask sensitive data
|
|
$('input, textarea').each(function() {
|
|
$(this).addClass('sensitive-data');
|
|
$(this).attr('data-original-value', $(this).val());
|
|
$(this).val('********');
|
|
});
|
|
|
|
// Capture the screen
|
|
html2canvas(document.body).then(function(canvas) {
|
|
// Convert canvas to PNG data URL
|
|
var dataURL = canvas.toDataURL('image/png');
|
|
|
|
// Create a temporary link and trigger download
|
|
var link = document.createElement('a');
|
|
link.href = dataURL;
|
|
link.download = 'screen_capture.png';
|
|
link.click();
|
|
|
|
// Restore sensitive data
|
|
$('input, textarea').each(function() {
|
|
$(this).removeClass('sensitive-data');
|
|
$(this).val($(this).attr('data-original-value'));
|
|
$(this).removeAttr('data-original-value');
|
|
});
|
|
|
|
// Show the capture button again
|
|
$('.capture-screen').show();
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |