diff --git a/Preview.bat b/Preview.bat new file mode 100644 index 0000000..23c2a64 --- /dev/null +++ b/Preview.bat @@ -0,0 +1,3 @@ +@echo off +cd /d %~dp0 +npm run preview diff --git a/Preview.bat - Shortcut.lnk b/Preview.bat - Shortcut.lnk new file mode 100644 index 0000000..0cfd69c Binary files /dev/null and b/Preview.bat - Shortcut.lnk differ diff --git a/run.bat b/run.bat index e411d96..ddb3e56 100644 --- a/run.bat +++ b/run.bat @@ -1,3 +1,4 @@ @echo off cd /d %~dp0 +git pull npm run start diff --git a/runWhiteBoard.bat - Shortcut.lnk b/runWhiteBoard.bat - Shortcut.lnk new file mode 100644 index 0000000..45be08f Binary files /dev/null and b/runWhiteBoard.bat - Shortcut.lnk differ diff --git a/src/app.css b/src/app.css index bd6213e..490e5c1 100644 --- a/src/app.css +++ b/src/app.css @@ -1,3 +1,227 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +.primary-yellow { + color: #ffbf00; +} + +.yellow-secondary { + color: #ffe066; +} + +.blue-dark { + color: #110042; +} + +.blue-primary { + color: #4263eb; +} + +.blue-light { + color: #96ddff; +} + +.black { + color: #000000; +} + +.white { + color: #ffffff; +} + +.off-white { + color: #f7f7f7; +} + +.grey-dark { + color: #8e8e93; +} + +.grey-primary { + color: #c7c7cc; +} + +.grey-light { + color: #e5e5ea; +} + +.display-1 { + /* Display Large - Source Sans Pro/Regular 64/72 . 0 */ + + + font-style: normal; + font-weight: 600; + font-size: 64px; + line-height: 72px; /* or 112% */ + letter-spacing: -0.25px; +} + +.display-2 { + /* Display Medium - Source Sans Pro/Regular 48/56 . 0 */ + + + font-style: normal; + font-weight: 600; + font-size: 48px; + line-height: 56px; /* or 117% */ +} + +.display-3 { + /* Display Small - Source Sans Pro/Regular 40/48 . 0 */ + + + font-style: normal; + font-weight: 600; + font-size: 40px; + line-height: 48px; /* or 120% */ +} + +.h-1 { + /* Headline Large - Source Sans Pro/Regular 32/40 . 0 */ + + + font-style: normal; + font-weight: 600; + font-size: 32px; + line-height: 40px; /* identical to box height, or 125% */ +} + +.h-2 { + /* Headline Medium - Source Sans Pro/Regular 28/36 . 0 */ + + + font-style: normal; + font-weight: 600; + font-size: 28px; + line-height: 36px; /* identical to box height, or 129% */ +} + +.h-3 { + /* Headline Small - Source Sans Pro/Regular 24/32 . 0 */ + + + font-style: normal; + font-weight: 600; + font-size: 24px; + line-height: 32px; /* identical to box height, or 133% */ +} + +.title-1 { + /* Title Large - Source Sans Pro/Medium 22/28 . +0.4 */ + + + font-style: normal; + font-weight: 600; + font-size: 24px; + line-height: 30px; /* identical to box height, or 125% */ + letter-spacing: 0.5px; +} + +.title-2 { + /* Title Medium - Source Sans Pro/Medium 16/24 . +0.16 */ + + + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; /* identical to box height, or 150% */ + letter-spacing: 0.2px; +} + +.title-3 { + /* Title Small - Source Sans Pro/Medium 14/20 . +0.12 */ + + + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 20px; /* identical to box height, or 143% */ + letter-spacing: 0.16px; +} + +.label-1 { + /* Label Large - Source Sans Pro/Medium 16/24 . +0.2 */ + + + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 28px; /* identical to box height, or 156% */ + letter-spacing: 0.2px; +} + +.label-2 { + /* Label Medium - Source Sans Pro/Medium 14/20 . +0.4 */ + + + font-style: normal; + font-weight: 600; + font-size: 16px; + line-height: 24px; /* identical to box height, or 150% */ + letter-spacing: 0.4px; +} + +.label-3 { + /* Label Small - Source Sans Pro/Medium 12/16 . +0.6 */ + + + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 20px; /* identical to box height, or 143% */ + letter-spacing: 0.6px; +} + +.body-1 { + /* Body Large - Source Sans Pro/Regular 16/24 . 0 */ + + + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; /* identical to box height, or 150% */ +} + +.body-2 { + /* Body Medium - Source Sans Pro/Regular 14/20 . 0 */ + + + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 20px; /* identical to box height, or 143% */ + letter-spacing: 0.08px; +} + +.body-3 { + /* Body Small - Source Sans Pro/Regular 12/16 . 0 */ + + + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; /* identical to box height, or 133% */ + letter-spacing: 0.2px; +} + +.overline { + /* Overline - Source Sans Pro/Regular 12/16 . 0 */ + + + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; /* identical to box height, or 133% */ + letter-spacing: 0.8px; + text-transform: uppercase; +} + +.caption { + /* Caption - Source Sans Pro/Regular 12/16 . 0 */ + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; /* identical to box height, or 133% */ + letter-spacing: 0.5px; +} diff --git a/src/lib/components/icons/delete.svelte b/src/lib/components/icons/delete.svelte new file mode 100644 index 0000000..96f627f --- /dev/null +++ b/src/lib/components/icons/delete.svelte @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/lib/components/icons/save.svelte b/src/lib/components/icons/save.svelte new file mode 100644 index 0000000..6a159b8 --- /dev/null +++ b/src/lib/components/icons/save.svelte @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 2264542..fe7e87f 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -2,6 +2,8 @@ import { onMount, onDestroy } from 'svelte'; import type { SvelteComponent } from 'svelte'; import { browser } from '$app/environment'; + import Save from '$lib/components/icons/save.svelte'; + import Delete from '$lib/components/icons/delete.svelte'; let canvas: HTMLCanvasElement; let context: CanvasRenderingContext2D; @@ -85,24 +87,35 @@ } -
- - +
+ +
+ + + +
+ +

Brush Size

- +
+ +

Brush Color

-
+ \ No newline at end of file diff --git a/static/favicon64.ico b/static/favicon64.ico new file mode 100644 index 0000000..a3956a6 Binary files /dev/null and b/static/favicon64.ico differ diff --git a/static/manifest.json b/static/manifest.json index 21bb17e..423f877 100644 --- a/static/manifest.json +++ b/static/manifest.json @@ -3,7 +3,7 @@ "description": "A simple whiteboard for drawing and sharing ideas", "dir": "ltr", "display": "fullscreen", - "name": "simplewhiteboard", + "name": "Simplewhiteboard", "orientation": "any", "scope": "/", "icons": [ @@ -18,6 +18,6 @@ "purpose": "any", "type": "png", "sizes": "64x64" - }, + } ] } \ No newline at end of file diff --git a/svelte.config.js b/svelte.config.js index 1cf26a0..092f867 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,5 +1,6 @@ import adapter from '@sveltejs/adapter-auto'; import { vitePreprocess } from '@sveltejs/kit/vite'; +import path from 'path'; /** @type {import('@sveltejs/kit').Config} */ const config = { @@ -11,7 +12,19 @@ const config = { // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // If your environment is not supported or you settled on a specific environment, switch out the adapter. // See https://kit.svelte.dev/docs/adapters for more information about adapters. - adapter: adapter() + adapter: adapter({ + runtime: 'nodejs18.x' + }), + env: { + dir: '../../.env.development', + publicPrefix: 'VITE_' + }, + alias: { + $lib: path.resolve('src', 'lib'), + $root: path.resolve('/'), + $src: path.resolve('src'), + $routes: path.resolve('src', 'routes') + } } }; diff --git a/tailwind.config.js b/tailwind.config.js index 0230076..43f2fd0 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -23,6 +23,11 @@ module.exports = { } }, colors: { + 'orange': '#ff7849', + 'green-dark': '#49AB81', + 'green-light': '#6FCB9F', + 'red-dark': '#e61414', + 'red-light': '#FF647E', 'primary-yellow': '#FFBF00', 'yellow-secondary': '#FFE066', 'blue-dark': '#110042', diff --git a/vite.config.ts b/vite.config.ts index f45d65d..c58eca2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,6 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vitest/config'; +import path from 'path'; export default defineConfig({ server: { @@ -8,5 +9,13 @@ export default defineConfig({ plugins: [sveltekit()], test: { include: ['src/**/*.{test,spec}.{js,ts}'] + }, + resolve: { + alias: { + $lib: path.resolve(__dirname, 'src', 'lib'), + $root: path.resolve(__dirname), + $src: path.resolve(__dirname, 'src'), + $routes: path.resolve(__dirname, 'src', 'routes') + } } });