blob: 07bdfe06e6f5c1b09b5fa19c6d56ac92547495e5 (
plain) (
blame)
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ink n switch</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Shantell Sans', cursive;
}
textarea {
font-family: 'Shantell Sans', cursive;
font-size: 1.75em;
padding: 1em;
border: 0;
outline: 0;
width: 100%;
}
canvas {
padding: 0;
width: 100%;
}
#noteArea, #drawingArea {
margin: 0 auto;
display: block;
}
/*
#toggleButton {
border: 1px solid black;
background-color: transparent;
padding: 0.5em 1em;
position: fixed;
top: 10px;
right: 10px;
z-index: 1000;
}
#toggleButton:hover {
cursor: pointer;
}
*/
</style>
</head>
<body>
<!-- <button id="toggleButton">Toggle</button> -->
<textarea id="noteArea" rows="10" cols="30" placeholder="This is a modal note taking tool. With it, you can type text that'll be saved to the browser, and you can draw pictures that'll also be saved to the browser. You are in typing mode right now. To toggle between modes tap either cmd + d, ctrl + d or cmd + 1, or ctrl + 1. When in drawing mode, tap c to clear the canvas, tap s to save the contents of the canvas to a png."></textarea>
<canvas id="drawingArea" width="500" height="500" tabindex="0"></canvas>
<script src="ink.js"></script>
</body>
</html>
|