-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
124 lines (124 loc) · 8.5 KB
/
index.html
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html>
<head>
<title>SVG Drawpad - Calculamatrise</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="https://calculamatrise.github.io/styles/default.css">
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="/manifest.json">
<meta name="author" content="Calculamatrise">
<meta property="og:title" content="Calculamatrise">
<meta property="og:description" content="A program that uses scalable vector graphics to create an image of your choosing.">
<meta property="og:image" content="https://calculamatrise.github.io/icons/favicon.png">
<meta property="og:url" content="https://calculamatrise.github.io/svg-drawpad/">
<meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script type="module" src="bootstrap.js" defer></script>
</head>
<body onload="
primary.parentElement.style.setProperty('background-color', (primary.value = canvas.config.styles.primary) + '40');
secondary.parentElement.style.setProperty('background-color', (secondary.value = canvas.config.styles.secondary) + '40');
randomColors.innerText = (canvas.config.randomizeStyle ? 'Dis' : 'En') + 'able Random Colours';
// container.style.setProperty('height', `calc(100% - ${document.querySelector('window-frame')?.getBoundingClientRect().height}px`);
// window.dispatchEvent(new Event('resize'));
">
<main id="container">
<svg id="view" xmlns="http://www.w3.org/2000/svg">Sorry, your browser does not support inline SVG.</svg>
<user-interface>
<section class="left top">
<details name="toolbar">
<summary class="button secondary show-prefix">Toolbar</summary>
<div class="toolbar">
<button class="ripple" onclick="canvas.tools.select('line')">Line</button>
<button class="ripple" onclick="canvas.tools.select('brush')">Brush</button>
<button class="ripple" onclick="canvas.tools.select('curve')">Curve</button>
<button class="ripple" onclick="canvas.tools.select('circle')">Circle</button>
<button class="ripple" onclick="canvas.tools.select('rectangle')">Rectangle</button>
<button class="ripple" onclick="canvas.tools.select('eraser')">Eraser</button>
<button class="ripple" onclick="canvas.tools.select('camera')">Camera</button>
<button class="ripple" onclick="canvas.tools.select('select')">Select</button>
<details name="toolbar">
<summary class="button secondary show-prefix">Advanced Tools</summary>
<div class="toolbar">
<button onclick="canvas.tools.select('beziercurve');">Bezier Curve</button>
<button onclick="canvas.tools.select('ellipse');">Ellipse</button>
<button class="option ripple rainbow" id="randomColors" onclick="
canvas.config.randomizeStyle = !canvas.config.randomizeStyle;
this.innerText = (canvas.config.randomizeStyle ? 'Dis' : 'En') + 'able Random Colours';
">
Enable Random Colours
</button>
</div>
</details>
</div>
</details>
</section>
<section class="right top" style="z-index: 50;">
<label for="layerschkbx" class="button secondary">Layers</label>
<label for="settingschkbx" class="button secondary">Settings</label>
</section>
<section class="bottom left" style="border-radius: 4px;">
<!-- <label for="appearance-overlaychkbx" class="button option ripple">Color Palette</label> -->
<!-- convert to popup button with several options/or add redirect to the appearance tab in settings where you can choose not only the primary/secondary colours, but create a colour palette, and manipulate the background colour/image -->
<label class="button option ripple" style="border-radius: 0;"><input type="color" id="primary" style="visibility: hidden;" oninput="this.parentElement.style.setProperty('background-color', (canvas.config.styles.primary = this.value) + '40');canvas.config.randomizeStyle = false;randomColors.innerText = 'Enable Random Colours'">Primary Colour</label>
<label class="button option ripple disabled" style="border-radius: 0;"><input type="color" id="secondary" style="visibility: hidden;" oninput="this.parentElement.style.setProperty('background-color', (canvas.config.styles.secondary = this.value) + '40');canvas.config.randomizeStyle = false;randomColors.innerText = 'Enable Random Colours'">Secondary Colour</label>
</section>
<!-- <div class="overlay" id="appearance-overlay">
<input type="checkbox" name="overlay" id="appearance-overlaychkbx" style="display: none;"></label>
<nav class="left-nav"></nav>
<label class="button option ripple" style="border-radius: 0;"><input type="color" id="primary" style="visibility: hidden;" oninput="this.parentElement.style.setProperty('background-color', (canvas.config.styles.primary = this.value) + '40');canvas.config.randomizeStyle = false;randomColors.innerText = 'Enable Random Colours'">Primary Colour</label>
<label class="button option ripple disabled" style="border-radius: 0;"><input type="color" id="secondary" style="visibility: hidden;" oninput="this.parentElement.style.setProperty('background-color', (canvas.config.styles.secondary = this.value) + '40');canvas.config.randomizeStyle = false;randomColors.innerText = 'Enable Random Colours'">Secondary Colour</label>
</div> -->
<div class="overlay" id="layers">
<input type="checkbox" name="overlay" id="layerschkbx" style="display: none;" onchange="this.checked && (settingschkbx.checked = false)">
<div id="layer-container">
<button class="secondary ripple" onclick="canvas.layers.create(), canvas.layerDepth = canvas.layerDepth + 1;" style="aspect-ratio: unset;height: 100%;">New Layer</button>
</div>
</div>
<!-- Settings Overlay -->
<div class="overlay" id="settings">
<input type="checkbox" name="overlay" id="settingschkbx" style="display: none;" onchange="this.checked && (layerschkbx.checked = false)">
<!-- Add radio to layer and settings since they cannot be open at the same time -->
<nav>
<label for="file" class="tab button secondary">General</label>
<label for="theme" class="tab button secondary">Appearance</label>
<label for="config" class="tab button secondary">Config</label>
<label class="tab button secondary disabled" disabled>Colour Palettes</label>
<label class="tab button secondary disabled" disabled>Presets</label>
</nav>
<section>
<input type="radio" name="settings-overlay-nav" id="file" style="display: none;" checked>
<input type="file" id="import" accept="image/svg+xml" style="display: none;" onchange="this.classList.add('loading'),this.files[0].text().then(text => (this.classList.remove('loading'),canvas.import(text)));">
<label for="import" class="button secondary ripple" style="text-align: center; line-height: 350%; font-size: calc(40px / 3);">Import Canvas</label>
<button class="secondary ripple" onclick="
Object.assign(document.createElement('a'), {
download: 'svg_canvas-' + new Intl.DateTimeFormat('en-CA', { dateStyle: 'short', timeStyle: 'medium' }).format().replace(/[/:]/g, '-').replace(/,+\s*/, '_').replace(/\s+.*$/, ''),
href: window.URL.createObjectURL(new Blob([canvas.toString()], { type: 'image/svg+xml' }))
}).dispatchEvent(new MouseEvent('click'));
">Export Canvas</button>
</section>
<section>
<input type="radio" name="settings-overlay-nav" id="theme" style="display: none;">
<select name="theme" id="theme-select">
<option value="auto">System (default)</option>
<option value="dark">Dark</option>
<option value="light">Light</option>
</select>
</section>
<section>
<input type="radio" name="settings-overlay-nav" id="config" style="display: none;">
<button class="secondary ripple" onclick="confirm('Are you sure you would like to reset your settings?') && (localStorage.removeItem('svg-drawpad-settings'), alert('Configuration has successfully been reset.'))">Reset Config</button>
</section>
<footer>Version 0.0.57</footer>
</div>
<div class="overlay" id="changes" style="display: none;">
<h2>What's new</h2>
<p>Various minor bug fixes and improvements</p>
<button style="width: 100%;width: -webkit-fill-available;" onclick="canvas.config.dismissedNotices.push('2023-11-23'),this.parentElement.remove()">Dismiss</button>
</div>
</user-interface>
<!-- <context-menu id="ctx-menu" style="display: none;">
<button>test</button>
</context-menu> -->
</main>
</body>
</html>