60 lines
2.1 KiB
HTML
60 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Simple Layout Template</title>
|
|
<link rel="stylesheet" href="capture-screen.css">
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
|
|
<script src="./plugin_capture_screen.js"></script>
|
|
</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>
|
|
</body>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
var flagCaptureScreen = "capture-screen";
|
|
$("." + flagCaptureScreen).screenshotButton({
|
|
buttonText: "Capture Screen",
|
|
fileName: "screenshot.png",
|
|
});
|
|
});
|
|
</script>
|
|
</html> |