first commit

public/style.css

@@ -0,0 +1,685 @@
+* {
+    box-sizing: border-box;
+}
+
+:root {
+    font-family:
+        Inter,
+        ui-sans-serif,
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        sans-serif;
+
+    color: #18181b;
+
+    background: #f4f4f5;
+}
+
+body {
+    margin: 0;
+
+    min-height: 100vh;
+
+    background:
+        radial-gradient(
+            circle at top,
+            #ffffff 0,
+            #f4f4f5 45%,
+            #e4e4e7 100%
+        );
+}
+
+button,
+input,
+textarea {
+    font: inherit;
+}
+
+.container {
+    width:
+        min(
+            900px,
+            calc(100% - 32px)
+        );
+
+    margin:
+        0 auto;
+
+    padding:
+        56px 0 80px;
+}
+
+
+/* Header */
+
+.header {
+    margin-bottom: 32px;
+}
+
+.header h1 {
+    margin:
+        0 0 8px;
+
+    font-size:
+        clamp(
+            32px,
+            6vw,
+            46px
+        );
+
+    letter-spacing:
+        -0.04em;
+}
+
+.header p {
+    margin: 0;
+
+    color: #71717a;
+
+    font-size: 16px;
+}
+
+
+/* Cards */
+
+.card {
+    margin-bottom: 24px;
+
+    padding: 28px;
+
+    background:
+        rgba(
+            255,
+            255,
+            255,
+            0.92
+        );
+
+    border:
+        1px solid #e4e4e7;
+
+    border-radius: 16px;
+
+    box-shadow:
+        0 8px 30px
+        rgba(
+            0,
+            0,
+            0,
+            0.05
+        );
+}
+
+.card-header {
+    margin-bottom: 28px;
+}
+
+.card-header h2 {
+    margin:
+        0 0 6px;
+
+    font-size: 22px;
+
+    letter-spacing:
+        -0.02em;
+}
+
+.card-header p {
+    margin: 0;
+
+    color: #71717a;
+
+    font-size: 14px;
+}
+
+
+/* Forms */
+
+.form-group {
+    margin-bottom: 22px;
+}
+
+label,
+.label {
+    display: block;
+
+    margin-bottom: 9px;
+
+    font-size: 14px;
+
+    font-weight: 650;
+}
+
+.optional {
+    margin-left: 4px;
+
+    color: #a1a1aa;
+
+    font-weight: 400;
+}
+
+.field-hint {
+    margin-top: 7px;
+
+    color: #71717a;
+
+    font-size: 12px;
+}
+
+input[type="password"],
+input[type="file"],
+textarea {
+    width: 100%;
+
+    border:
+        1px solid #d4d4d8;
+
+    border-radius: 8px;
+
+    background: #ffffff;
+
+    color: #18181b;
+}
+
+input[type="password"] {
+    padding:
+        11px 12px;
+}
+
+textarea {
+    display: block;
+
+    min-height: 130px;
+
+    padding: 12px;
+
+    resize: vertical;
+}
+
+input:focus,
+textarea:focus {
+    outline: none;
+
+    border-color: #71717a;
+
+    box-shadow:
+        0 0 0 3px
+        rgba(
+            113,
+            113,
+            122,
+            0.12
+        );
+}
+
+
+/* Dropzone */
+
+.dropzone {
+    display:
+        flex;
+
+    flex-direction:
+        column;
+
+    align-items:
+        center;
+
+    justify-content:
+        center;
+
+    min-height:
+        170px;
+
+    padding:
+        28px;
+
+    border:
+        1.5px dashed #a1a1aa;
+
+    border-radius:
+        12px;
+
+    background:
+        #fafafa;
+
+    text-align:
+        center;
+
+    cursor:
+        pointer;
+
+    transition:
+        border-color 120ms ease,
+        background 120ms ease,
+        transform 120ms ease;
+}
+
+.dropzone:hover,
+.dropzone:focus {
+    outline: none;
+
+    border-color:
+        #52525b;
+
+    background:
+        #f4f4f5;
+}
+
+.dropzone.dragging {
+    border-color:
+        #18181b;
+
+    background:
+        #e4e4e7;
+
+    transform:
+        scale(1.01);
+}
+
+.dropzone.has-file {
+    border-style:
+        solid;
+
+    border-color:
+        #a1a1aa;
+
+    background:
+        #fafafa;
+}
+
+.dropzone-icon {
+    display:
+        flex;
+
+    align-items:
+        center;
+
+    justify-content:
+        center;
+
+    width:
+        42px;
+
+    height:
+        42px;
+
+    margin-bottom:
+        12px;
+
+    border-radius:
+        50%;
+
+    background:
+        #e4e4e7;
+
+    font-size:
+        22px;
+
+    font-weight:
+        700;
+}
+
+.dropzone strong {
+    max-width:
+        100%;
+
+    overflow:
+        hidden;
+
+    text-overflow:
+        ellipsis;
+
+    white-space:
+        nowrap;
+}
+
+.dropzone span {
+    margin-top:
+        5px;
+
+    color:
+        #71717a;
+
+    font-size:
+        13px;
+}
+
+
+/* Mode */
+
+.mode-selector {
+    display:
+        grid;
+
+    grid-template-columns:
+        1fr 1fr;
+
+    gap:
+        10px;
+}
+
+.mode-option {
+    display:
+        flex;
+
+    align-items:
+        center;
+
+    justify-content:
+        center;
+
+    gap:
+        8px;
+
+    padding:
+        11px;
+
+    margin: 0;
+
+    border:
+        1px solid #d4d4d8;
+
+    border-radius:
+        8px;
+
+    background:
+        #ffffff;
+
+    cursor:
+        pointer;
+
+    font-weight:
+        550;
+
+    transition:
+        background 120ms ease,
+        border-color 120ms ease;
+}
+
+.mode-option:hover {
+    background:
+        #f4f4f5;
+}
+
+.mode-option:has(
+    input:checked
+) {
+    border-color:
+        #18181b;
+
+    background:
+        #f4f4f5;
+}
+
+.mode-option input {
+    margin: 0;
+}
+
+
+/* Image info */
+
+.image-info {
+    display:
+        flex;
+
+    justify-content:
+        space-between;
+
+    gap:
+        12px;
+
+    margin-top:
+        10px;
+
+    padding:
+        10px 12px;
+
+    border:
+        1px solid #e4e4e7;
+
+    border-radius:
+        8px;
+
+    background:
+        #fafafa;
+
+    color:
+        #52525b;
+
+    font-size:
+        13px;
+}
+
+.image-info strong {
+    color:
+        #18181b;
+}
+
+
+/* Buttons */
+
+.button {
+    width:
+        100%;
+
+    padding:
+        12px 16px;
+
+    border:
+        0;
+
+    border-radius:
+        8px;
+
+    background:
+        #18181b;
+
+    color:
+        #ffffff;
+
+    font-weight:
+        650;
+
+    cursor:
+        pointer;
+
+    transition:
+        background 120ms ease,
+        transform 120ms ease;
+}
+
+.button:hover {
+    background:
+        #27272a;
+}
+
+.button:active {
+    transform:
+        translateY(1px);
+}
+
+.button:disabled {
+    opacity:
+        0.5;
+
+    cursor:
+        not-allowed;
+
+    transform:
+        none;
+}
+
+.secondary-button {
+    padding:
+        7px 11px;
+
+    border:
+        1px solid #d4d4d8;
+
+    border-radius:
+        7px;
+
+    background:
+        #ffffff;
+
+    color:
+        #18181b;
+
+    font-size:
+        13px;
+
+    cursor:
+        pointer;
+}
+
+.secondary-button:hover {
+    background:
+        #f4f4f5;
+}
+
+
+/* Status */
+
+.status {
+    min-height:
+        20px;
+
+    margin-top:
+        14px;
+
+    font-size:
+        14px;
+}
+
+.status.success {
+    color:
+        #166534;
+}
+
+.status.error {
+    color:
+        #b91c1c;
+}
+
+
+/* Results */
+
+.result {
+    margin-top:
+        24px;
+
+    padding-top:
+        22px;
+
+    border-top:
+        1px solid #e4e4e7;
+}
+
+.result-header {
+    display:
+        flex;
+
+    align-items:
+        center;
+
+    justify-content:
+        space-between;
+
+    gap:
+        12px;
+
+    margin-bottom:
+        10px;
+}
+
+.result-header h3 {
+    margin:
+        0;
+}
+
+.result pre {
+    margin:
+        0;
+
+    padding:
+        16px;
+
+    max-height:
+        400px;
+
+    overflow:
+        auto;
+
+    border-radius:
+        8px;
+
+    background:
+        #f4f4f5;
+
+    white-space:
+        pre-wrap;
+
+    overflow-wrap:
+        anywhere;
+
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Menlo,
+        Monaco,
+        Consolas,
+        monospace;
+
+    font-size:
+        13px;
+
+    line-height:
+        1.6;
+}
+
+
+/* Utility */
+
+.hidden {
+    display:
+        none !important;
+}
+
+
+/* Mobile */
+
+@media (
+    max-width: 600px
+) {
+
+    .container {
+        width:
+            calc(100% - 20px);
+
+        padding:
+            28px 0 50px;
+    }
+
+    .card {
+        padding:
+            20px;
+    }
+
+    .mode-selector {
+        grid-template-columns:
+            1fr;
+    }
+
+    .image-info {
+        flex-direction:
+            column;
+    }
+
+    .dropzone {
+        min-height:
+            150px;
+    }
+}