init: cobol-java migration verification platform v3 (42 tests, JCL module)

web/static/style.css

@@ -1,11 +1,70 @@
-body { font-family: monospace; max-width: 900px; margin: 2rem auto; padding: 0 1rem; color: #333; }
-h1 { font-size: 1.2rem; }
-label { display: block; margin: .75rem 0; }
-input, select { display: block; margin-top: .25rem; }
-button { margin-top: 1rem; padding: .5rem 1.5rem; cursor: pointer; font-size: 1rem; }
-#status { margin-top: 1rem; font-weight: bold; }
-#result { margin-top: 1rem; }
-pre { background: #f0f0f0; padding: 1rem; border-radius: 4px; }
-.pass { border-left: 4px solid #4caf50; }
-.fail { border-left: 4px solid #f44336; }
-.container a { display: inline-block; margin-top: 1rem; }
+:root {
+  --bg: #0a0e14;
+  --panel: #12171f;
+  --border: #1f2937;
+  --text: #b2becd;
+  --dim: #5c6e80;
+  --accent: #39bae6;
+  --green: #7fd962;
+  --red: #f26d78;
+  --yellow: #ffad66;
+  --font: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; }
+body::before { content:""; position:fixed; top:0; left:0; width:100%; height:100%; background: radial-gradient(ellipse at 20% 20%, rgba(57,186,230,.03) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(127,217,98,.02) 0%, transparent 50%); pointer-events:none; z-index:0; }
+.container { max-width: 680px; margin: 0 auto; padding: 3rem 1.5rem; position:relative; z-index:1; }
+/* Header */
+header { margin-bottom: 2.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
+.badge { display:inline-block; padding:.15rem .6rem; background:rgba(57,186,230,.12); color:var(--accent); border-radius:3px; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; }
+h1 { font-size:1.3rem; font-weight:400; color:#e6edf3; line-height:1.3; }
+h1 span { color: var(--accent); }
+.tagline { font-size:.8rem; color:var(--dim); margin-top:.4rem; }
+/* Sections */
+section { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:1.5rem; margin-bottom:1rem; }
+section h2 { font-size:.8rem; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; font-weight:400; }
+/* Form */
+.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
+.form-grid .full { grid-column:1/-1; }
+label { font-size:.75rem; color:var(--dim); }
+label strong { display:block; color:var(--text); font-weight:400; margin-bottom:.25rem; font-size:.8rem; }
+input[type="file"], select { width:100%; padding:.55rem .7rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:inherit; font-size:.8rem; margin-top:.15rem; transition:border-color .2s; }
+input[type="file"]:hover, select:hover { border-color: var(--accent); }
+input[type="file"]::file-selector-button { background:var(--border); color:var(--text); border:none; padding:.35rem .8rem; border-radius:4px; margin-right:.5rem; cursor:pointer; font-family:inherit; font-size:.75rem; }
+select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235c6e80'%3E%3Cpath d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .5rem center; appearance:none; padding-right:2rem; }
+/* Buttons */
+.actions { display:flex; gap:.5rem; margin-top:1.25rem; }
+.btn { padding:.6rem 1.25rem; border-radius:6px; font-family:inherit; font-size:.8rem; cursor:pointer; border:none; transition: all .2s; }
+.btn-primary { background:var(--accent); color:var(--bg); }
+.btn-primary:hover { background:#4fc8f0; }
+.btn-primary:disabled { background:var(--border); color:var(--dim); cursor:not-allowed; }
+.btn-secondary { background:transparent; color:var(--dim); border:1px solid var(--border); }
+.btn-secondary:hover { color:var(--text); border-color:var(--dim); }
+/* Status & Results */
+#status-area { margin-top:1rem; }
+.status-card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:1rem 1.5rem; font-size:.8rem; }
+.status-card.success { border-left:3px solid var(--green); }
+.status-card.pending { border-left:3px solid var(--yellow); }
+.status-card.error { border-left:3px solid var(--red); }
+.status-card .title { font-weight:600; margin-bottom:.25rem; }
+.status-card.success .title { color:var(--green); }
+.status-card.pending .title { color:var(--yellow); }
+.status-card.error .title { color:var(--red); }
+.matrix { display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.5rem; margin:.75rem 0; font-size:.8rem; }
+.matrix dt { color:var(--dim); }
+.matrix dd { color:var(--text); }
+.divider { border-top:1px solid var(--border); margin:1rem 0; }
+.result-link { display:inline-block; margin-top:.5rem; color:var(--accent); text-decoration:none; font-size:.8rem; }
+.result-link:hover { text-decoration:underline; }
+/* Footer */
+footer { margin-top:3rem; padding-top:1rem; border-top:1px solid var(--border); font-size:.7rem; color:var(--dim); display:flex; justify-content:space-between; }
+footer a { color:var(--dim); text-decoration:none; }
+footer a:hover { color:var(--text); }
+/* Field table */
+table { width:100%; border-collapse:collapse; font-size:.8rem; }
+th { text-align:left; color:var(--dim); font-weight:400; padding:.5rem .75rem; border-bottom:1px solid var(--border); }
+td { padding:.45rem .75rem; border-bottom:1px solid rgba(31,41,55,.5); }
+tr.pass td:first-child { border-left:3px solid var(--green); }
+tr.tolerated td:first-child { border-left:3px solid var(--yellow); }
+tr.fail td:first-child { border-left:3px solid var(--red); }
+pre { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:1rem; font-family:inherit; font-size:.8rem; overflow-x:auto; margin-top:.5rem; }