feat: add basic integrity checks + corrections

editor/public/static/css/edit.css

@@ -33,6 +33,11 @@ table {
     }
 }
 
+input[type="text"], select {
+    font-size: inherit;
+    font-family: inherit;
+}
+
 input[type="checkbox"] {
     --size: 0.6em;
     --pad: 0.2em;
@@ -67,6 +72,38 @@ input[type="checkbox"] {
     }
 }
 
+input[type="radio"] {
+    --size: 0.5em;
+    --pad: 0.3em;
+    width: calc((var(--size) + var(--pad)) * 2);
+    height: calc((var(--size) + var(--pad)) * 2);
+    border-radius: calc(var(--size) + var(--pad));
+    appearance: none;
+    background-color: #e1e1e1;
+    position: relative;
+    cursor: pointer;
+
+    &:checked {
+        background-color: #daf0d1;
+        
+        &::after {
+            content: "";
+            width: calc(var(--size) * 2);
+            height: calc(var(--size) * 2);
+            border-radius: calc(var(--size));
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: #6ee74a;
+        }
+    }
+}
+
+label {
+    cursor: pointer;
+}
+
 .popup {
     display: grid;
     place-items: center;
@@ -80,7 +117,7 @@ input[type="checkbox"] {
 
     .container {
         padding: 1.2em;
-        border-radius: 0.4em;
+        border-radius: 0.8em;
         background-color: white;
         display: flex;
         flex-direction: column;
@@ -88,6 +125,126 @@ input[type="checkbox"] {
 
         .title {
             text-align: center;
+            margin: 0.4em 0;
+        }
+
+        h2, h3 {
+            margin: 0;
+            margin-bottom: 0.4em;
+        }
+
+        .buttons {
+            display: flex;
+            justify-content: center;
+            gap: 0.8em;
+
+            button {
+                padding: 0.8em 1.6em;
+                background-color: #dfdfdf;
+                border: none;
+                cursor: pointer;
+                border-radius: 0.4em;
+                font-family: inherit;
+                font-size: inherit;
+                font-weight: bold;
+
+                &:hover {
+                    background-color: #e7e7e7;
+                }
+
+                &:active {
+                    background-color: #d7d7d7;
+                }
+            }
+        }
+    }
+}
+
+#integrity-popup {
+    h3 {
+        margin-bottom: 0.4em;
+    }
+
+    label {
+        font-weight: bold;
+    }
+
+    .description {
+        span {
+            font-weight: bold;
+        }
+    }
+    
+    input[type="text"] {
+        width: 100%;
+    }
+
+    .original {
+        .values {
+            display: flex;
+            flex-direction: column;
+            gap: 0.2em;
+            padding-left: 1.2em;
+        }
+
+        .name, .field {
+            display: flex;
+            gap: 0.4em;
+            align-items: center;
+        }
+    }
+
+    .correction {
+        .options {
+            display: flex;
+            flex-direction: column;
+            gap: 0.4em;
+
+            .option {
+                display: grid;
+                grid-template-columns: auto 1fr;
+                gap: 0.2em 0.4em;
+                align-items: center;
+                padding: 0.4em;
+                border: solid black 2px;
+                cursor: pointer;
+                border-radius: 0.2em;
+
+                &.selected {
+                    border-color: #6ee74a;
+                }
+                
+                input[type="radio"] {
+                    grid-column: 1;
+                    grid-row: 1;
+                }
+
+                label {
+                    grid-column: 2;
+                    grid-row: 1;
+                }
+
+                .arrow {
+                    background: url("/static/images/arrow.svg");
+                    width: 2em;
+                    height: 2em;
+                    background-size: contain;
+                }
+
+                .value {
+                    grid-column: 2;
+                    grid-row: 2;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.2em;
+                }
+
+                .select {
+                    border: solid black 1px;
+                    padding: 0.2em 0.4em;
+                    background-color: #fafafa;
+                }
+            }
         }
     }
 }