redesign
This commit is contained in:
matthieu42morin
parent
a71a72692a
commit
79d24938d5
|
|
@ -0,0 +1,3 @@
|
|||
@echo off
|
||||
cd /d %~dp0
|
||||
npm run preview
|
||||
Binary file not shown.
Binary file not shown.
224
src/app.css
224
src/app.css
|
|
@ -1,3 +1,227 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.2871 5.24297C20.6761 5.24297 21 5.56596 21 5.97696V6.35696C21 6.75795 20.6761 7.09095 20.2871 7.09095H3.71385C3.32386 7.09095 3 6.75795 3 6.35696V5.97696C3 5.56596 3.32386 5.24297 3.71385 5.24297H6.62957C7.22185 5.24297 7.7373 4.82197 7.87054 4.22798L8.02323 3.54598C8.26054 2.61699 9.0415 2 9.93527 2H14.0647C14.9488 2 15.7385 2.61699 15.967 3.49699L16.1304 4.22698C16.2627 4.82197 16.7781 5.24297 17.3714 5.24297H20.2871ZM18.8058 19.134C19.1102 16.2971 19.6432 9.55712 19.6432 9.48913C19.6626 9.28313 19.5955 9.08813 19.4623 8.93113C19.3193 8.78413 19.1384 8.69713 18.9391 8.69713H5.06852C4.86818 8.69713 4.67756 8.78413 4.54529 8.93113C4.41108 9.08813 4.34494 9.28313 4.35467 9.48913C4.35646 9.50162 4.37558 9.73903 4.40755 10.1359C4.54958 11.8992 4.94517 16.8102 5.20079 19.134C5.38168 20.846 6.50498 21.922 8.13206 21.961C9.38763 21.99 10.6811 22 12.0038 22C13.2496 22 14.5149 21.99 15.8094 21.961C17.4929 21.932 18.6152 20.875 18.8058 19.134Z" fill="#200E32"/>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1535 16.64L14.995 13.77C15.2822 13.47 15.2822 13 14.9851 12.71C14.698 12.42 14.2327 12.42 13.9455 12.71L12.3713 14.31V9.49C12.3713 9.07 12.0446 8.74 11.6386 8.74C11.2327 8.74 10.896 9.07 10.896 9.49V14.31L9.32178 12.71C9.03465 12.42 8.56931 12.42 8.28218 12.71C7.99505 13 7.99505 13.47 8.28218 13.77L11.1139 16.64C11.1832 16.71 11.2624 16.76 11.3515 16.8C11.4406 16.84 11.5396 16.86 11.6386 16.86C11.7376 16.86 11.8267 16.84 11.9158 16.8C12.005 16.76 12.0842 16.71 12.1535 16.64ZM19.3282 9.02561C19.5609 9.02292 19.8143 9.02 20.0446 9.02C20.302 9.02 20.5 9.22 20.5 9.47V17.51C20.5 19.99 18.5 22 16.0446 22H8.17327C5.58911 22 3.5 19.89 3.5 17.29V6.51C3.5 4.03 5.4901 2 7.96535 2H13.2525C13.5 2 13.7079 2.21 13.7079 2.46V5.68C13.7079 7.51 15.1931 9.01 17.0149 9.02C17.4333 9.02 17.8077 9.02318 18.1346 9.02595C18.3878 9.02809 18.6125 9.03 18.8069 9.03C18.9479 9.03 19.1306 9.02789 19.3282 9.02561ZM19.6045 7.5661C18.7916 7.5691 17.8322 7.5661 17.1421 7.5591C16.047 7.5591 15.145 6.6481 15.145 5.5421V2.9061C15.145 2.4751 15.6629 2.2611 15.9579 2.5721C16.7203 3.37199 17.8873 4.5978 18.8738 5.63395C19.2735 6.05379 19.6436 6.44249 19.945 6.7591C20.2342 7.0621 20.0223 7.5651 19.6045 7.5661Z" fill="#200E32"/>
|
||||
</svg>
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -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 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="absolute top-0 left-0 p-4 space-y-2 bg-off-white shadow-lg">
|
||||
<button class="px-4 py-2 text-sm font-semibold text-blue-dark bg-green-500 rounded hover:bg-green-600" on:click={saveDrawingToFile}>
|
||||
Save to File
|
||||
</button>
|
||||
<button class="px-4 py-2 text-sm font-semibold text-blue-dark bg-red-500 rounded hover:bg-red-600" on:click={clearCanvas}>
|
||||
Clear Canvas
|
||||
</button>
|
||||
<div class="flex gap-[8px] absolute top-0 left-0 p-4 space-y-2 bg-off-white hover:outline-8 hover:outline-grey-dark shadow-lg items-center justify-center">
|
||||
<!-- Save and Delete buttons -->
|
||||
<div class="flex gap-[8px]">
|
||||
<button class="px-4 py-2 w-[61px] h-[61px] rounded-full flex items-center justify-center bg-green-light hover:bg-green-dark shadow-lg" on:click={saveDrawingToFile}>
|
||||
<Save />
|
||||
</button>
|
||||
|
||||
<button class="px-4 py-2 w-[61px] h-[61px] rounded-full flex items-center justify-center bg-red-light hover:bg-red-dark shadow-lg" on:click={clearCanvas}>
|
||||
<Delete />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Brush Size -->
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-semibold">Brush Size</p>
|
||||
<input type="range" min="1" max="100" bind:value={brushSize} class="w-full cursor-pointer" />
|
||||
<input type="range" min="1" max="75" bind:value={brushSize} class="w-full cursor-pointer" />
|
||||
</div>
|
||||
|
||||
<!-- Brush Color -->
|
||||
<div class="space-y-1">
|
||||
<p class="text-sm font-semibold">Brush Color</p>
|
||||
<input type="color" bind:value={drawColor} class="w-full cursor-pointer" />
|
||||
</div>
|
||||
<button class={`px-4 py-2 text-sm font-semibold rounded ${eraserMode ? 'bg-gray-500 hover:bg-gray-600' : 'bg-blue-500 hover:bg-blue-600'} text-blue-dark`} on:click={setEraser}>
|
||||
|
||||
<!-- Mode -->
|
||||
<button class={`px-4 py-2 text-sm font-semibold rounded ${eraserMode ? 'bg-green-light hover:bg-green-dark' : ' bg-red-light hover:bg-red-dark'} text-black`} on:click={setEraser}>
|
||||
{eraserMode ? 'Drawing Mode' : 'Eraser Mode'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<canvas bind:this={canvas} width={canvasWidth} height={canvasHeight}></canvas>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
|
|
@ -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"
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue