aboutsummaryrefslogtreecommitdiff
path: root/tools
diff options
context:
space:
mode:
authorMitja Felicijan <mitja.felicijan@gmail.com>2019-02-17 21:53:36 +0100
committerMitja Felicijan <mitja.felicijan@gmail.com>2019-02-17 21:53:36 +0100
commit8e9ef5ba62b8bee028428384ad5666e245eb854c (patch)
treeb382c5b40f122b2a152da2226006abab34abe105 /tools
parentad974810d43e1d5f70bca269665c25230e6a3221 (diff)
downloadmitjafelicijan.com-8e9ef5ba62b8bee028428384ad5666e245eb854c.tar.gz
content update
Diffstat (limited to 'tools')
-rw-r--r--tools/draw/app.css76
-rw-r--r--tools/draw/app.js72
-rw-r--r--tools/draw/favicon.pngbin5234 -> 0 bytes
-rw-r--r--tools/draw/index.html41
-rw-r--r--tools/editor/favicon.icobin1150 -> 0 bytes
-rw-r--r--tools/editor/index.html72
6 files changed, 0 insertions, 261 deletions
diff --git a/tools/draw/app.css b/tools/draw/app.css
deleted file mode 100644
index 60db957..0000000
--- a/tools/draw/app.css
+++ /dev/null
@@ -1,76 +0,0 @@
1@charset "utf-8";
2
3* {
4 box-sizing: border-box;
5 background-color: transparent;
6 margin: 0;
7 padding: 0;
8 border: 0;
9 list-style-type: none;
10 outline: none;
11 text-decoration: none;
12 position: relative;
13 box-shadow: none;
14 -moz-osx-font-smoothing: grayscale !important;
15 text-rendering: optimizeLegibility !important;
16 -webkit-font-smoothing: antialiased !important;
17 font-family: Arial, Helvetica, sans-serif;
18 user-select: none;
19}
20
21body {
22 margin: 0;
23 padding: 0;
24 font-size: 13px;
25}
26
27section {
28 position: fixed;
29 left: 0;
30 top: 0;
31 right: 0;
32 bottom: 0;
33 background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .08) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, .08) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .08) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, .08) 76%, transparent 77%, transparent);
34 background-size: 50px 50px;
35}
36
37canvas {
38 width: 100%;
39 height: 100%;
40}
41
42button {
43 display: block;
44 background: #fff;
45 border-radius: 5px;
46 width: 100%;
47 font-weight: bold;
48 cursor: pointer;
49 text-align: center;
50}
51
52nav.colors {
53 position: fixed;
54 left: 10px;
55 top: 10px;
56 width: 40px;
57}
58
59nav.colors button {
60 height: 40px;
61 margin-bottom: 10px;
62 border-radius: 50%;
63}
64
65nav.tools {
66 position: fixed;
67 left: 10px;
68 bottom: 10px;
69 width: 65px;
70}
71
72nav.tools button {
73 border: 2px solid #bbb;
74 padding: 10px 0;
75 margin-top: 10px;
76}
diff --git a/tools/draw/app.js b/tools/draw/app.js
deleted file mode 100644
index 4c73d75..0000000
--- a/tools/draw/app.js
+++ /dev/null
@@ -1,72 +0,0 @@
1window.addEventListener('load', function(evt) {
2
3 let paintStyle = getComputedStyle(document.querySelector('section'));
4 let canvas = document.querySelector('canvas');
5 let ctx = canvas.getContext('2d');
6
7 canvas.width = parseInt(paintStyle.getPropertyValue('width'));
8 canvas.height = parseInt(paintStyle.getPropertyValue('height'));
9
10 var mouse = {
11 x: 0,
12 y: 0
13 };
14
15 ctx.lineWidth = 3;
16 ctx.lineJoin = 'round';
17 ctx.lineCap = 'round';
18 ctx.strokeStyle = 'limegreen';
19
20 canvas.addEventListener('mousemove', function(e) {
21 mouse.x = e.pageX - this.offsetLeft;
22 mouse.y = e.pageY - this.offsetTop;
23 }, false);
24
25 canvas.addEventListener('mousedown', function(e) {
26 ctx.beginPath();
27 ctx.moveTo(mouse.x, mouse.y);
28 canvas.addEventListener('mousemove', onPaint, false);
29 }, false);
30
31 canvas.addEventListener('mouseup', function() {
32 canvas.removeEventListener('mousemove', onPaint, false);
33 }, false);
34
35 var onPaint = function() {
36 ctx.lineCap = 'round';
37 ctx.lineTo(mouse.x, mouse.y);
38 ctx.stroke();
39 };
40
41
42 document.querySelectorAll('nav button').forEach(function(button, idx) {
43
44 if (button.dataset.method == 'color') {
45 button.style.background = button.dataset.value;
46 }
47
48 button.addEventListener('click', function(evt) {
49 switch (button.dataset.method) {
50 case 'color':
51 {
52 ctx.strokeStyle = button.dataset.value;
53 break;
54 }
55 case 'size':
56 {
57 ctx.lineWidth = parseInt(button.dataset.value);
58 break;
59 }
60 }
61 });
62
63 });
64
65 document.addEventListener('keydown', function(evt) {
66 if (evt.keyCode == 8) {
67 ctx.clearRect(0, 0, canvas.width, canvas.height);
68 }
69 console.log(evt.keyCode);
70 }, false);
71
72});
diff --git a/tools/draw/favicon.png b/tools/draw/favicon.png
deleted file mode 100644
index f60ca30..0000000
--- a/tools/draw/favicon.png
+++ /dev/null
Binary files differ
diff --git a/tools/draw/index.html b/tools/draw/index.html
deleted file mode 100644
index 87ff1d2..0000000
--- a/tools/draw/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
1<!DOCTYPE html>
2<html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Draw</title>
9 <link rel="stylesheet" href="app.css">
10 <link rel="icon" type="image/png" href="favicon.png">
11 </head>
12
13 <body>
14
15 <section>
16 <canvas></canvas>
17 </section>
18
19 <nav class="colors">
20 <button data-method="color" data-value="limegreen"></button>
21 <button data-method="color" data-value="crimson"></button>
22 <button data-method="color" data-value="darkturquoise"></button>
23 <button data-method="color" data-value="purple"></button>
24 <button data-method="color" data-value="fuchsia"></button>
25 <button data-method="color" data-value="blueviolet"></button>
26 <button data-method="color" data-value="goldenrod"></button>
27 <button data-method="color" data-value="royalblue"></button>
28 <button data-method="color" data-value="olivedrab"></button>
29 </nav>
30
31 <nav class="tools">
32 <button data-method="size" data-value="2">small</button>
33 <button data-method="size" data-value="4">normal</button>
34 <button data-method="size" data-value="12">big</button>
35 </nav>
36
37 <script src="app.js"></script>
38
39 </body>
40
41</html>
diff --git a/tools/editor/favicon.ico b/tools/editor/favicon.ico
deleted file mode 100644
index f2a4604..0000000
--- a/tools/editor/favicon.ico
+++ /dev/null
Binary files differ
diff --git a/tools/editor/index.html b/tools/editor/index.html
deleted file mode 100644
index 3bdef13..0000000
--- a/tools/editor/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5
6 <meta charset="UTF-8">
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <meta http-equiv="X-UA-Compatible" content="ie=edge">
9
10 <title>Editor</title>
11
12 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
13 <link rel="icon" href="favicon.ico" type="image/x-icon">
14
15</head>
16
17<body>
18
19 <style>
20 article {
21 display: block;
22 position: fixed;
23 left: 0;
24 top: 0;
25 right: 0;
26 bottom: 0;
27 padding: 70px;
28 outline: none;
29 border: 0;
30 background: #222;
31 color: #fff;
32 font-size: 28px;
33 font-family: Monaco, monospace;
34 font-weight: 200;
35 line-height: 130%;
36 overflow: auto;
37 }
38 ::selection { background:#ff0; color:#000 }
39 </style>
40
41 <article contenteditable></article>
42
43 <script>
44
45 window.addEventListener('load', (evt) => {
46 const autoSaveFrequency = 1000;
47 const editor = document.querySelector('article');
48
49 editor.addEventListener('paste', function (evt) {
50 evt.preventDefault();
51
52 let clipped = evt.clipboardData.getData('text/plain');
53 clipped = clipped.replace(/(\r\n|\n|\r)/gm, "<br>");
54 document.execCommand('insertHTML', false, clipped);
55 });
56
57 if (typeof (Storage) !== 'undefined') {
58 editor.innerHTML = localStorage.getItem('content');
59
60 setInterval(function () {
61 localStorage.setItem('content', editor.innerHTML);
62 }, autoSaveFrequency);
63 } else {
64 console.log('Local Storage not supported');
65 }
66 });
67
68 </script>
69
70</body>
71
72</html>
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-30 17:44:42 +0000