From 552fef07ecd7a08ebcf7e395f67371fa89e2dad1 Mon Sep 17 00:00:00 2001
From: ad1tyayadav <adityaproworks@gmail.com>
Date: Sun, 4 Jan 2026 15:22:17 +0530
Subject: [PATCH 1/2] feat: added more information in modal

---
 src/components/calibration/PointModal.vue | 327 +++++++++++++++++++++-
 src/views/PostCalibration.vue             |   9 +-
 2 files changed, 325 insertions(+), 11 deletions(-)

diff --git a/src/components/calibration/PointModal.vue b/src/components/calibration/PointModal.vue
index 4ad399b2..b72cb4a1 100644
--- a/src/components/calibration/PointModal.vue
+++ b/src/components/calibration/PointModal.vue
@@ -1,24 +1,95 @@
 <template>
-    <v-dialog v-model="auxDialog" max-width="300px" max-height="500px">
+    <v-dialog v-model="auxDialog" max-width="450px" scrollable>
         <v-card>
-            <v-card-title class="headline text-center mx-auto">Point {{ pointNumber + 1 }}</v-card-title>
-            <v-card-text>
+            <v-card-title class="headline d-flex justify-space-between align-center py-3">
+                <span>Point {{ pointNumber + 1 }}</span>
+                <v-chip v-if="selected" color="primary" small>
+                    <v-icon small left>mdi-checkbox-marked-circle</v-icon>
+                    SELECTED
+                </v-chip>
+            </v-card-title>
+            <v-divider></v-divider>
+            <v-card-text class="modal-content">
                 <v-container>
+                    <!-- Basic Info -->
                     <v-row>
-                        <v-col cols="6" class="font-weight-bold">(x, y):</v-col>
+                        <v-col cols="6" class="font-weight-bold">Position (x, y):</v-col>
                         <v-col cols="6" class="text-right">({{ x }}, {{ y }})</v-col>
                     </v-row>
+                    
+                    <!-- Accuracy with color indicator -->
                     <v-row>
                         <v-col cols="6" class="font-weight-bold">Accuracy:</v-col>
-                        <v-col cols="6" class="text-right">{{ accuracy }} px</v-col>
+                        <v-col cols="6" class="text-right d-flex justify-end align-center">
+                            {{ accuracyDisplay }} px
+                            <v-icon :color="accuracyColor" small class="ml-2">mdi-circle</v-icon>
+                        </v-col>
                     </v-row>
+                    
+                    <!-- Precision with color indicator -->
                     <v-row>
-                        <v-col cols="6" class="font-weight-bold">precision (SD):</v-col>
-                        <v-col cols="6" class="text-right">{{ precision }} px</v-col>
+                        <v-col cols="6" class="font-weight-bold">Precision (SD):</v-col>
+                        <v-col cols="6" class="text-right d-flex justify-end align-center">
+                            {{ precisionDisplay }} px
+                            <v-icon :color="precisionColor" small class="ml-2">mdi-circle</v-icon>
+                        </v-col>
+                    </v-row>
+
+                    <v-divider class="my-2"></v-divider>
+
+                    <!-- Sample Statistics -->
+                    <v-row v-if="hasPredictionData">
+                        <v-col cols="6" class="font-weight-bold">Total Samples:</v-col>
+                        <v-col cols="6" class="text-right">{{ totalSamples }}</v-col>
+                    </v-row>
+                    
+                    <v-row v-if="hasPredictionData">
+                        <v-col cols="12" class="font-weight-bold mb-1">Within Threshold:</v-col>
+                        <v-col cols="12">
+                            <div class="d-flex justify-space-between mb-1">
+                                <span>{{ samplesWithinThreshold }}/{{ totalSamples }} ({{ thresholdPercentage }}%)</span>
+                            </div>
+                            <v-progress-linear
+                                :value="parseFloat(thresholdPercentage)"
+                                :color="thresholdColor"
+                                height="8"
+                                rounded
+                            ></v-progress-linear>
+                        </v-col>
+                    </v-row>
+
+                    <v-row v-if="hasPredictionData">
+                        <v-col cols="6" class="font-weight-bold">Centroid Offset:</v-col>
+                        <v-col cols="6" class="text-right">{{ centroidDistance }} px</v-col>
+                    </v-row>
+                    
+                    <v-row v-if="hasPredictionData">
+                        <v-col cols="6" class="font-weight-bold">Distance Range:</v-col>
+                        <v-col cols="6" class="text-right">{{ minDistance }} - {{ maxDistance }} px</v-col>
+                    </v-row>
+
+                    <!-- Scatter Plot Visualization -->
+                    <v-divider class="my-2" v-if="hasPredictionData"></v-divider>
+                    <v-row v-if="hasPredictionData">
+                        <v-col cols="12" class="text-center py-2">
+                            <div class="font-weight-bold mb-2">Prediction Distribution</div>
+                            <div class="scatter-container">
+                                <canvas ref="scatterCanvas" width="200" height="200"></canvas>
+                            </div>
+                            <div class="legend mt-1">
+                                <span class="legend-item">
+                                    <v-icon x-small color="orange">mdi-circle</v-icon> <span class="text-caption">Within</span>
+                                </span>
+                                <span class="legend-item ml-2">
+                                    <v-icon x-small color="blue">mdi-circle</v-icon> <span class="text-caption">Outside</span>
+                                </span>
+                            </div>
+                        </v-col>
                     </v-row>
                 </v-container>
             </v-card-text>
-            <v-card-actions>
+            <v-divider></v-divider>
+            <v-card-actions class="py-3">
                 <v-spacer></v-spacer>
                 <v-btn color="blue darken-1" text @click="select">{{ selected ? 'unselect' : 'select' }}</v-btn>
                 <v-btn color="blue darken-1" text @click="auxDialog = false">close</v-btn>
@@ -55,6 +126,14 @@ export default {
         pointNumber: {
             type: Number,
             default: 0
+        },
+        predictionX: {
+            type: Array,
+            default: () => []
+        },
+        predictionY: {
+            type: Array,
+            default: () => []
         }
     },
     computed: {
@@ -64,6 +143,82 @@ export default {
         mockPattern() {
             return this.$store.state.calibration.mockPattern
         },
+        threshold() {
+            return this.$store.state.calibration.threshold
+        },
+        hasPredictionData() {
+            return this.predictionX.length > 0 && this.predictionY.length > 0
+        },
+        totalSamples() {
+            return this.predictionX.length
+        },
+        accuracyDisplay() {
+            return this.accuracy.toFixed(2)
+        },
+        precisionDisplay() {
+            return this.precision.toFixed(2)
+        },
+        accuracyColor() {
+            if (this.accuracy < 3) return 'green'
+            if (this.accuracy < 5) return 'orange'
+            return 'red'
+        },
+        precisionColor() {
+            if (this.precision < 2) return 'green'
+            if (this.precision < 4) return 'orange'
+            return 'red'
+        },
+        samplesWithinThreshold() {
+            if (!this.hasPredictionData) return 0
+            return this.predictionX.filter((x, i) => {
+                const dist = this.euclidianDistance(this.x, x, this.y, this.predictionY[i])
+                return dist <= this.threshold
+            }).length
+        },
+        thresholdPercentage() {
+            if (!this.hasPredictionData) return '0.0'
+            return ((this.samplesWithinThreshold / this.totalSamples) * 100).toFixed(1)
+        },
+        thresholdColor() {
+            const percentage = parseFloat(this.thresholdPercentage)
+            if (percentage >= 80) return 'green'
+            if (percentage >= 60) return 'orange'
+            return 'red'
+        },
+        centroidDistance() {
+            if (!this.hasPredictionData) return '0.00'
+            let sumX = 0
+            let sumY = 0
+            let count = 0
+            
+            this.predictionX.forEach((x, i) => {
+                const dist = this.euclidianDistance(this.x, x, this.y, this.predictionY[i])
+                if (dist <= this.threshold) {
+                    sumX += x
+                    sumY += this.predictionY[i]
+                    count++
+                }
+            })
+            
+            if (count === 0) return '0.00'
+            const centroidX = sumX / count
+            const centroidY = sumY / count
+            return this.euclidianDistance(this.x, centroidX, this.y, centroidY).toFixed(2)
+        },
+        minDistance() {
+            if (!this.hasPredictionData) return '0.00'
+            const distances = this.predictionX.map((x, i) => 
+                this.euclidianDistance(this.x, x, this.y, this.predictionY[i])
+            )
+            return Math.min(...distances).toFixed(2)
+        },
+        maxDistance() {
+            if (!this.hasPredictionData) return '0.00'
+            const distances = this.predictionX.map((x, i) => 
+                this.euclidianDistance(this.x, x, this.y, this.predictionY[i])
+            )
+            return Math.max(...distances).toFixed(2)
+        }
     },
     data() {
         return {
@@ -74,6 +229,11 @@ export default {
     watch: {
         dialog(newDialog) {
             this.auxDialog = newDialog
+            if (newDialog && this.hasPredictionData) {
+                this.$nextTick(() => {
+                    this.drawScatterPlot()
+                })
+            }
         },
         auxDialog(newAuxDialog) {
             this.$emit('close', newAuxDialog);
@@ -91,6 +251,155 @@ export default {
         select() {
             this.$emit('select', this.pointNumber)
         },
+        euclidianDistance(x0, x1, y0, y1) {
+            const dx = x1 - x0
+            const dy = y1 - y0
+            return Math.sqrt(dx * dx + dy * dy)
+        },
+        drawScatterPlot() {
+            if (!this.$refs.scatterCanvas || !this.hasPredictionData) return
+            
+            const canvas = this.$refs.scatterCanvas
+            const ctx = canvas.getContext('2d')
+            const width = canvas.width
+            const height = canvas.height
+            const padding = 30
+            
+            // Clear canvas
+            ctx.fillStyle = '#f5f5f5'
+            ctx.fillRect(0, 0, width, height)
+            
+            // Find bounds for scaling
+            const allX = [...this.predictionX, this.x]
+            const allY = [...this.predictionY, this.y]
+            const minX = Math.min(...allX)
+            const maxX = Math.max(...allX)
+            const minY = Math.min(...allY)
+            const maxY = Math.max(...allY)
+            
+            // Add some margin to bounds
+            const rangeX = maxX - minX || 100
+            const rangeY = maxY - minY || 100
+            const marginX = rangeX * 0.1
+            const marginY = rangeY * 0.1
+            
+            // Scale function
+            const scaleX = (x) => padding + ((x - minX + marginX) / (rangeX + 2 * marginX)) * (width - 2 * padding)
+            const scaleY = (y) => padding + ((y - minY + marginY) / (rangeY + 2 * marginY)) * (height - 2 * padding)
+            
+            // Draw grid
+            ctx.strokeStyle = '#e0e0e0'
+            ctx.lineWidth = 1
+            for (let i = 0; i <= 4; i++) {
+                const gridX = padding + (i / 4) * (width - 2 * padding)
+                const gridY = padding + (i / 4) * (height - 2 * padding)
+                ctx.beginPath()
+                ctx.moveTo(gridX, padding)
+                ctx.lineTo(gridX, height - padding)
+                ctx.stroke()
+                ctx.beginPath()
+                ctx.moveTo(padding, gridY)
+                ctx.lineTo(width - padding, gridY)
+                ctx.stroke()
+            }
+            
+            // Draw threshold circle around target
+            const targetX = scaleX(this.x)
+            const targetY = scaleY(this.y)
+            const thresholdRadius = (this.threshold / rangeX) * (width - 2 * padding)
+            
+            ctx.strokeStyle = 'rgba(128, 128, 128, 0.3)'
+            ctx.lineWidth = 2
+            ctx.setLineDash([5, 5])
+            ctx.beginPath()
+            ctx.arc(targetX, targetY, thresholdRadius, 0, Math.PI * 2)
+            ctx.stroke()
+            ctx.setLineDash([])
+            
+            // Draw prediction points
+            this.predictionX.forEach((x, i) => {
+                const y = this.predictionY[i]
+                const dist = this.euclidianDistance(this.x, x, this.y, y)
+                const px = scaleX(x)
+                const py = scaleY(y)
+                
+                ctx.fillStyle = dist <= this.threshold ? 'rgba(255, 152, 0, 0.6)' : 'rgba(33, 150, 243, 0.6)'
+                ctx.beginPath()
+                ctx.arc(px, py, 3, 0, Math.PI * 2)
+                ctx.fill()
+            })
+            
+            // Draw centroid
+            let sumX = 0
+            let sumY = 0
+            let count = 0
+            this.predictionX.forEach((x, i) => {
+                const dist = this.euclidianDistance(this.x, x, this.y, this.predictionY[i])
+                if (dist <= this.threshold) {
+                    sumX += x
+                    sumY += this.predictionY[i]
+                    count++
+                }
+            })
+            
+            if (count > 0) {
+                const centroidX = scaleX(sumX / count)
+                const centroidY = scaleY(sumY / count)
+                ctx.fillStyle = 'rgba(76, 175, 80, 0.5)'
+                ctx.strokeStyle = 'rgba(76, 175, 80, 1)'
+                ctx.lineWidth = 2
+                ctx.beginPath()
+                ctx.arc(centroidX, centroidY, 6, 0, Math.PI * 2)
+                ctx.fill()
+                ctx.stroke()
+            }
+            
+            // Draw target point (calibration point) as crosshair
+            ctx.strokeStyle = 'black'
+            ctx.lineWidth = 2
+            const crossSize = 12
+            ctx.beginPath()
+            ctx.moveTo(targetX - crossSize, targetY)
+            ctx.lineTo(targetX + crossSize, targetY)
+            ctx.moveTo(targetX, targetY - crossSize)
+            ctx.lineTo(targetX, targetY + crossSize)
+            ctx.stroke()
+        }
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.modal-content {
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+.scatter-container {
+    display: flex;
+    justify-content: center;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    padding: 8px;
+}
+
+.legend {
+    font-size: 11px;
+    color: #666;
+}
+
+.legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+}
+
+/* Compact row spacing */
+.v-card-text .v-row {
+    margin-bottom: 0;
+}
+
+.v-card-text .v-row + .v-row {
+    margin-top: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/PostCalibration.vue b/src/views/PostCalibration.vue
index 6a8ac63e..4b1d606b 100644
--- a/src/views/PostCalibration.vue
+++ b/src/views/PostCalibration.vue
@@ -3,7 +3,8 @@
         <canvas id="canvas" />
         <div>
             <PointModal :x="Number(x)" :y="Number(y)" :precision="Number(precision)" :accuracy="Number(accuracy)"
-                :dialog="dialog" :pointNumber="pointNumber" @close="dialogCancel" @select="select" />
+                :dialog="dialog" :pointNumber="pointNumber" :predictionX="predictionX" :predictionY="predictionY"
+                @close="dialogCancel" @select="select" />
         </div>
             <ConfigModal :configDialog="configDialog" @close="configDialogCancel" @recalib="recalibrate"
                 @save="saveCalib" />
@@ -33,7 +34,9 @@ export default {
             accuracy: 0,
             dialog: false,
             configDialog: false,
-            pointNumber: 0
+            pointNumber: 0,
+            predictionX: [],
+            predictionY: []
         }
     },
     async mounted() {
@@ -130,6 +133,8 @@ export default {
             this.y = patternLike.y
             this.precision = patternLike.precision
             this.accuracy = patternLike.accuracy
+            this.predictionX = patternLike.predictionX || []
+            this.predictionY = patternLike.predictionY || []
             this.dialog = true
             this.pointNumber = pointNumber
         },

From e1e0823af391bb1c03998e749fc2b5f26131cdd2 Mon Sep 17 00:00:00 2001
From: jvJUCA <jucafranzoni1@gmail.com>
Date: Fri, 6 Feb 2026 14:51:41 -0300
Subject: [PATCH 2/2] Refactor modal selection logic and improve canvas
 interaction in PostCalibration view

---
 src/components/calibration/PointModal.vue |  10 +-
 src/store/calibration.js                  |   6 +-
 src/views/PostCalibration.vue             | 129 ++++++++++------------
 3 files changed, 69 insertions(+), 76 deletions(-)

diff --git a/src/components/calibration/PointModal.vue b/src/components/calibration/PointModal.vue
index b72cb4a1..f2be18cd 100644
--- a/src/components/calibration/PointModal.vue
+++ b/src/components/calibration/PointModal.vue
@@ -240,11 +240,15 @@ export default {
         },
         mockPattern(newMockPattern) {
             const point = this.pattern[this.pointNumber]
-            this.selected = newMockPattern.includes(point)
+            this.selected = newMockPattern.some(
+                (p) => p.x === point.x && p.y === point.y
+            )
         },
         pointNumber(newPointNumber) {
             const point = this.pattern[newPointNumber]
-            this.selected = this.mockPattern.includes(point)
+            this.selected = this.mockPattern.some(
+                (p) => p.x === point.x && p.y === point.y
+            )
         }
     },
     methods: {
@@ -402,4 +406,4 @@ export default {
 .v-card-text .v-row + .v-row {
     margin-top: 4px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/store/calibration.js b/src/store/calibration.js
index 285db2f4..beb8026a 100644
--- a/src/store/calibration.js
+++ b/src/store/calibration.js
@@ -74,10 +74,12 @@ export default {
       state.pattern = newPattern;
     },
     setMockPatternElement(state, newPatternLike) {
-      if (!state.mockPattern.includes(newPatternLike)) {
+      const index = state.mockPattern.findIndex(
+        (p) => p.x === newPatternLike.x && p.y === newPatternLike.y
+      );
+      if (index === -1) {
         state.mockPattern.push(newPatternLike);
       } else {
-        const index = state.mockPattern.indexOf(newPatternLike);
         state.mockPattern.splice(index, 1);
       }
     },
diff --git a/src/views/PostCalibration.vue b/src/views/PostCalibration.vue
index 3f0c9ac5..f2062cf5 100644
--- a/src/views/PostCalibration.vue
+++ b/src/views/PostCalibration.vue
@@ -1,26 +1,10 @@
 <template>
     <div class="scroll-container">
-        <canvas id="canvas" style="width: 100%; height: 100%;" />
-
-        <PointModal
-            :x="Number(x)"
-            :y="Number(y)"
-            :precision="Number(precision)"
-            :accuracy="Number(accuracy)"
-            :dialog="dialog"
-            :pointNumber="pointNumber"
-            @close="dialogCancel"
-            @select="select"
+        <canvas
+            id="canvas"
+            style="width: 100%; height: 100%;"
+            @click="handleCanvasClick"
         />
-
-        <ConfigModal
-            :configDialog="configDialog"
-            @close="configDialogCancel"
-            @recalib="recalibrate"
-            @save="saveCalib"
-        />
-
-        <canvas style="width: 100%; height: 100%;" id="canvas" />
         <div>
             <PointModal :x="Number(x)" :y="Number(y)" :precision="Number(precision)" :accuracy="Number(accuracy)"
                 :dialog="dialog" :pointNumber="pointNumber" :predictionX="predictionX" :predictionY="predictionY"
@@ -29,17 +13,12 @@
         <ConfigModal :configDialog="configDialog" @close="configDialogCancel" @recalib="recalibrate"
             @save="saveCalib" />
         <v-col class="pa-0">
-            <DraggableFloatingButton
-                @click="callConfigModal"
-                icon="mdi-cog"
-            />
+            <DraggableFloatingButton @click="callConfigModal" :icon="'mdi-cog'" />
         </v-col>
 
         <div v-if="redirectingToRuxailab" class="button-overlay">
             <v-btn @click="recalibrate" color="primary">Recalibrate</v-btn>
-            <v-btn @click="sendCalibToRuxailab" color="success">
-                Send this calib to Ruxailab
-            </v-btn>
+            <v-btn @click="sendCalibToRuxailab" color="success">Send this calib to Ruxailab</v-btn>
         </div>
     </div>
 </template>
@@ -192,48 +171,61 @@ export default {
             )
         },
 
-        drawCalibPoints() {
-            console.log('🎨 Iniciando drawCalibPoints')
-            console.log('📊 Pattern:', this.pattern)
-            console.log('📈 Threshold:', this.threshold)
-
-            this.initCanvas()
-            const pointSize = 3.5
-
-            this.pattern.forEach((p, idx) => {
-                console.log(`\n🔵 Desenhando ponto ${idx} em (${p.x}, ${p.y})`)
-                console.log(`   predictionX: ${p.predictionX?.length || 0} valores`)
-                console.log(`   predictionY: ${p.predictionY?.length || 0} valores`)
-
-                this.drawCalibMarks(p.x, p.y, 30, 'grey')
-
-                let sumX = 0
-                let sumY = 0
-                let count = 0
-
-                p.predictionX?.forEach((px, i) => {
-                    const py = p.predictionY[i]
-                    const dist = this.euclidianDistance(p.x, px, p.y, py)
-
-                    console.log(`   [${i}] px=${px}, py=${py}, dist=${dist.toFixed(2)}, threshold=${this.threshold}, pass=${dist <= this.threshold}`)
+        handleCanvasClick(event) {
+            const canvas = event.currentTarget
+            const rect = canvas.getBoundingClientRect()
+            const scaleX = canvas.width / rect.width
+            const scaleY = canvas.height / rect.height
+            const clickX = (event.clientX - rect.left) * scaleX
+            const clickY = (event.clientY - rect.top) * scaleY
+
+            let closestIndex = -1
+            let minDist = Infinity
+            const hitRadius = 30
+
+            for (let i = 0; i < this.pattern.length; i++) {
+                const p = this.pattern[i]
+                const dist = this.euclidianDistance(p.x, clickX, p.y, clickY)
+                if (dist < minDist) {
+                    minDist = dist
+                    closestIndex = i
+                }
+            }
 
-                    this.drawPoints(px, py, pointSize, dist <= this.threshold ? 'green' : 'grey')
+            if (closestIndex !== -1 && minDist <= hitRadius) {
+                this.callModal(this.pattern[closestIndex], closestIndex)
+            }
+        },
 
-                    if (dist <= this.threshold) {
-                        sumX += px
-                        sumY += py
+        drawCalibPoints() {
+            const pointSize = 3.5
+            this.initCanvas()
+            for (var i = 0; i < this.pattern.length; i++) {
+                // calib points
+                const isSelected = this.mockPattern.some(
+                    (p) => p.x === this.pattern[i].x && p.y === this.pattern[i].y
+                )
+                const crossColor = isSelected ? 'black' : 'grey'
+                const dashColor = isSelected ? 'green' : 'red'
+                const pointsColor = isSelected ? 'green' : 'orange'
+                const centroidColor = isSelected ? 'rgba(0, 0, 255, 0.3)' : 'rgba(128, 128, 128, 0.3)'
+                const deniedPointColor = isSelected ? 'blue' : 'grey'
+
+                this.drawCalibMarks(this.pattern[i].x, this.pattern[i].y, 30, crossColor)
+                var sumX = 0;
+                var sumY = 0;
+                var count = 0;
+                for (var a = 0; a < this.pattern[i].predictionX.length; a++) {
+                    // predicted points
+                    const distance = this.euclidianDistance(this.pattern[i].x, this.pattern[i].predictionX[a], this.pattern[i].y, this.pattern[i].predictionY[a])
+                    if (distance <= this.threshold) {
+                        this.drawPoints(this.pattern[i].predictionX[a], this.pattern[i].predictionY[a], pointSize, pointsColor)
+                        sumX += this.pattern[i].predictionX[a];
+                        sumY += this.pattern[i].predictionY[a];
                         count++
+                    } else {
+                        this.drawPoints(this.pattern[i].predictionX[a], this.pattern[i].predictionY[a], pointSize, deniedPointColor)
                     }
-                })
-
-                console.log(`   ✏️ Total pontos dentro threshold: ${count}`)
-
-                if (count > 0) {
-                    const cx = sumX / count
-                    const cy = sumY / count
-                    console.log(`   🎯 Centróide em (${cx.toFixed(2)}, ${cy.toFixed(2)})`)
-                    this.drawDash(cx, cy, p.x, p.y, 'red')
-                    this.drawCentroid(cx, cy, 1 + (p.precision || 0) * 25, 'rgba(0,0,255,0.3)')
                 }
                 var centroidX = sumX / count;
                 var centroidY = sumY / count;
@@ -321,11 +313,6 @@ export default {
         configDialogCancel(v) {
             this.configDialog = v
         },
-
-        async saveCalib() {
-            await this.$store.dispatch('saveCalib')
-            this.$router.push('/dashboard')
-        }
     }
 }
 </script>
@@ -352,4 +339,4 @@ export default {
     display: flex;
     gap: 12px;
 }
-</style>
\ No newline at end of file
+</style>