2 files changed, 146 insertions, 0 deletions
diff --git a/js/inknswitch/index.html b/js/inknswitch/index.html
new file mode 100644
index 0000000..c6fa0b6
--- /dev/null
+++ b/js/inknswitch/index.html
@@ -0,0 +1,37 @@
+<!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;
+        }
+    </style>
+</head>
+<body>
+    <textarea id="noteArea" rows="10" cols="30" placeholder="Start typing a note! When you wanna draw, toggle by hitting cmd, or ctrl + d then draw with the mouse, toggle back the same way. Tap the c key in draw mode to clear your drawing."></textarea>
+    <canvas id="drawingArea" width="500" height="500"></canvas>
+    <script src="ink.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/js/inknswitch/ink.js b/js/inknswitch/ink.js
new file mode 100644
index 0000000..62666af
--- /dev/null
+++ b/js/inknswitch/ink.js
@@ -0,0 +1,109 @@
+const canvas = document.getElementById('drawingArea');
+const ctx = canvas.getContext('2d');
+const noteArea = document.getElementById('noteArea');
+
+noteArea.value = localStorage.getItem('noteContent') || '';
+
+noteArea.style.width = '100vw';
+noteArea.style.height = '100vh';
+noteArea.style.boxSizing = 'border-box';
+noteArea.style.backgroundColor = 'rgba(255, 255, 255, 0.5)';
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+canvas.style.position = 'fixed';
+
+let drawing = false;
+let prevX = 0;
+let prevY = 0;
+
+canvas.style.display = 'none';
+
+const getCursorPosition = (e) => {
+    const rect = canvas.getBoundingClientRect();
+    return {
+        x: e.clientX - rect.left,
+        y: e.clientY - rect.top
+    };
+};
+
+const startDrawing = (e) => {
+    drawing = true;
+    const { x, y } = getCursorPosition(e);
+    prevX = x;
+    prevY = y;
+};
+
+const drawLine = (x1, y1, x2, y2) => {
+    ctx.beginPath();
+    ctx.lineWidth = 5;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = '#000';
+    ctx.moveTo(x1, y1);
+    ctx.lineTo(x2, y2);
+    ctx.stroke();
+};
+
+const draw = (e) => {
+    if (drawing) {
+        const { x, y } = getCursorPosition(e);
+        drawLine(prevX, prevY, x, y);
+        prevX = x;
+        prevY = y;
+    }
+};
+
+const saveCanvasImage = () => {
+    const dataUrl = canvas.toDataURL();
+    localStorage.setItem('canvasImage', dataUrl);
+};
+
+canvas.addEventListener('mousedown', startDrawing);
+
+canvas.addEventListener('mousemove', (e) => {
+    if (drawing) {
+        draw(e);
+    }
+});
+
+canvas.addEventListener('mouseup', (e) => {
+    if (drawing) {
+        draw(e);
+        drawing = false;
+        saveCanvasImage();
+    }
+});
+
+const savedImage = localStorage.getItem('canvasImage');
+if (savedImage) {
+    const img = new Image();
+    img.onload = () => {
+        ctx.drawImage(img, 0, 0);
+    };
+    img.src = savedImage;
+}
+
+document.addEventListener('keydown', (e) => {
+    // Cmd or Ctrl and D key to toggle modes
+    if ((e.metaKey || e.ctrlKey) && e.key === 'd') {
+        e.preventDefault();
+        if (canvas.style.display === 'none') {
+            canvas.style.display = 'block';
+            noteArea.style.display = 'none';
+        } else {
+            canvas.style.display = 'none';
+            noteArea.style.display = 'block';
+        }
+    }
+
+    // C key to clear the canvas
+    if (e.key === 'c' && canvas.style.display === 'block') {
+        const confirmClear = confirm('Do you really want to clear the canvas?');
+        if (confirmClear) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            localStorage.removeItem('canvasImage');
+        }
+    }
+
+    localStorage.setItem('noteContent', noteArea.value);
+});
\ No newline at end of file