src/App.vue

@@ -27,11 +27,17 @@ const savePng = async () => {
 <template>
   <div class="container">
     <Sidebar>
-      <Input v-model="hMargin">Отступ для горизонтальных линий, мм</Input>
-      <Input v-model="vMargin">Отступ для вертикальных линии, мм</Input>
-      <Input v-model="imageWidth">Высота изображения, мм</Input>
-      <Input v-model="imageHeight">Ширина изображения, мм</Input>
-      <button @click="savePng">Сохранить png</button>
+      <div class="l-sidebar-block">
+        <h1>Линии</h1>
+        <Input v-model="vMargin">Отступ по горизонтали, мм</Input>
+        <Input v-model="hMargin">Отступ по вертикали, мм</Input>
+      </div>
+      <div class="l-sidebar-block">
+        <h1>Изображение</h1>
+        <Input v-model="imageHeight">Высота, мм</Input>
+        <Input v-model="imageWidth">Ширина, мм</Input>
+        <button class="l-button" @click="savePng">Сохранить как png</button>
+      </div>
     </Sidebar>
     <Page>
       <Canvas :vMargin="vMargin" :hMargin="hMargin" :imageWidth="imageWidth" :imageHeight="imageHeight" />
@@ -53,9 +59,37 @@ html {
   align-items: center;
   height: 100vh;
   width: 100vw;
+  font-family: MPLUS1p, sans-serif;
 }
 
 body {
   background-color: aqua;
 }
+
+.l-button {
+  color: #22333B;
+  background-color: #EAE0D5;
+  border: 1px solid #5E503F;
+  border-radius: 10px;
+  margin: 5px;
+  padding: 10px;
+}
+
+@font-face {
+  font-family: 'MPLUS1p';
+  font-style: normal;
+  src: local('MPLUS1p'), url(/fonts/ttf/MPLUS1p-Light.ttf) format('truetype');
+}
+
+h1 {
+  color: #C6AC8F;
+}
+
+.l-sidebar-block {
+  border: 1px solid #C6AC8F;
+  border-radius: 10px;
+  margin: 0 0 30px 0;
+  padding: 20px;
+  background-color: white;
+}
 </style>

src/components/Canvas.vue

@@ -16,6 +16,7 @@ const clearCanvas = () => {
 
   if (ctx.value) {
     ctx.value.clearRect(0, 0, imageWidth * ONE_MM, imageHeight * ONE_MM);
+    ctx.value.beginPath();
   }
 };
 

src/components/Input.vue

@@ -4,10 +4,11 @@ const modelValue = defineModel();
 
 <template>
     <div class="input">
-        <label>
+        <label class="l-label">
             <slot></slot>
         </label>
-        <input type="number" v-model="modelValue" />
+        <br>
+        <input class="l-input" type="number" v-model="modelValue" />
     </div>
 </template>
 
@@ -20,4 +21,11 @@ const modelValue = defineModel();
 input {
     border: #333 1px solid;
 }
+
+.l-input {
+    margin: 10px 0;
+    border: 1px solid #C6AC8F;
+    padding: 10px;
+    border-radius: 10px;
+}
 </style>

src/components/Sidebar.vue

@@ -9,14 +9,10 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 330px;
-    background-color: white;
 
     margin: 10px;
     padding: 10px;
 
     z-index: 2;
-    border-radius: 10px;
-    border: 1px solid #333;
 }
 </style>

src/const.ts

@@ -1,8 +1,8 @@
 /** 1 миллиметр в пикселях */
 export const ONE_MM = 12;
 
-export const DEFAULT_IMAGE_WIDTH = 210;
-export const DEFAULT_IMAGE_HEIGHT = 297;
+export const DEFAULT_IMAGE_WIDTH = 100;
+export const DEFAULT_IMAGE_HEIGHT = 100;
 
 export const DEFAULT_VERTICAL_MARGIN = 10;
 export const DEFAULT_HORIZONTAL_MARGIN = 10;