66 lines
2.1 KiB
HTML
66 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>To-Do List</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="todo-container">
|
|
<div class="todo-header">
|
|
<input type="text" placeholder="Добавить задачу..." />
|
|
<button>+</button>
|
|
<button class="save-btn" onclick="saveAsImage()">
|
|
<svg
|
|
id="SvgjsSvg1001"
|
|
width="20"
|
|
height="20"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
version="1.1"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
xmlns:svgjs="http://svgjs.com/svgjs"
|
|
>
|
|
<defs id="SvgjsDefs1002"></defs>
|
|
<g id="SvgjsG1008">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 22"
|
|
width="20"
|
|
height="20"
|
|
>
|
|
<path
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke="#ffffff"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M1 16v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3M6 11l4 4 4-4M10 1v14"
|
|
class="colorStroke000 svgStroke"
|
|
></path>
|
|
</svg>
|
|
</g>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="todo-list"></div>
|
|
</div>
|
|
|
|
<script>
|
|
function saveAsImage() {
|
|
let gridElement = document.querySelector(".todo-list");
|
|
html2canvas(gridElement, { scale: 2 }).then((canvas) => {
|
|
let link = document.createElement("a");
|
|
link.download = "todo.png";
|
|
link.href = canvas.toDataURL("image/png");
|
|
link.click();
|
|
});
|
|
}
|
|
</script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|