| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Paint Match — Colour Identification Unit</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Stardos+Stencil:wght@400;700&family=Saira+Condensed:wght@400;500;600;700&family=Saira+Semi+Condensed:wght@500;600;700&family=Special+Elite&display=swap" rel="stylesheet"> |
| <style> |
| :root{ |
| --olive:#46522f; |
| --olive-2:#3a4528; |
| --olive-dark:#2c351d; |
| --panel:rgba(13,17,8,0.74); |
| --panel-edge:rgba(199,176,116,0.22); |
| --panel-edge-hi:rgba(214,196,140,0.40); |
| --inner:#0c0f07; |
| --gold:#d3bd83; |
| --gold-bright:#e6d29a; |
| --gold-dim:#9b8d57; |
| --text:#dcd7c0; |
| --text-dim:#9a9a80; |
| --orange:#d6841f; |
| --orange-hi:#f0a338; |
| --orange-dk:#a85f12; |
| --stamp-red:#a8362c; |
| --teletype:#bfe6b6; |
| } |
| *{box-sizing:border-box} |
| html,body{margin:0;padding:0} |
| body{ |
| font-family:"Saira Condensed",sans-serif; |
| color:var(--text); |
| min-height:100vh; |
| background: |
| radial-gradient(120% 90% at 50% -10%, rgba(120,134,84,0.18), transparent 60%), |
| radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,0.55), transparent 55%), |
| linear-gradient(160deg, var(--olive) 0%, var(--olive-2) 45%, var(--olive-dark) 100%); |
| position:relative; |
| overflow-x:hidden; |
| } |
| /* weathered metal grain overlay */ |
| body::before{ |
| content:"";position:fixed;inset:0;pointer-events:none;z-index:0; |
| background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"); |
| opacity:0.06;mix-blend-mode:overlay; |
| } |
| /* scratches + grime */ |
| body::after{ |
| content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.5; |
| background-image: |
| linear-gradient(105deg, transparent 0 38%, rgba(0,0,0,0.10) 38.4%, transparent 39%), |
| linear-gradient(102deg, transparent 0 71%, rgba(0,0,0,0.08) 71.3%, transparent 72%), |
| linear-gradient(98deg, transparent 0 12%, rgba(180,190,140,0.05) 12.4%, transparent 13%), |
| radial-gradient(2px 2px at 14% 22%, rgba(60,40,20,0.5), transparent 60%), |
| radial-gradient(2px 2px at 86% 18%, rgba(60,40,20,0.4), transparent 60%), |
| radial-gradient(2px 2px at 64% 84%, rgba(60,40,20,0.4), transparent 60%), |
| radial-gradient(2px 2px at 30% 92%, rgba(60,40,20,0.4), transparent 60%); |
| } |
| .wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:34px 30px 70px;} |
| |
| /* corner classification stamps */ |
| .page-stamp{position:fixed;z-index:3;font-family:"Stardos Stencil",sans-serif;font-weight:700; |
| letter-spacing:3px;color:rgba(168,54,44,0.5);border:3px solid rgba(168,54,44,0.42); |
| padding:5px 12px;text-transform:uppercase;font-size:15px;pointer-events:none; |
| mix-blend-mode:screen;filter:contrast(1.1);} |
| .page-stamp.tl{top:26px;left:26px;transform:rotate(-9deg)} |
| .page-stamp.br{bottom:24px;right:30px;transform:rotate(6deg)} |
| |
| /* ---------- header / emblem ---------- */ |
| .hero{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:30px;} |
| .emblem{ |
| position:relative;display:flex;align-items:center;gap:14px; |
| padding:12px 30px;border-radius:8px; |
| background:linear-gradient(180deg,#5a6038 0%, #2c3019 55%, #1a1d0f 100%); |
| border:1px solid #6c7344; |
| box-shadow:0 6px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -3px 8px rgba(0,0,0,0.6); |
| } |
| .emblem::before,.emblem::after{content:"";position:absolute;top:50%;width:54px;height:14px;transform:translateY(-50%); |
| background:linear-gradient(180deg,#8d9258,#3d4222);clip-path:polygon(0 40%,100% 0,100% 100%,0 60%);opacity:0.9} |
| .emblem::before{left:-50px} |
| .emblem::after{right:-50px;transform:translateY(-50%) scaleX(-1)} |
| .emblem .star{color:#e9c45a;font-size:26px;text-shadow:0 1px 2px rgba(0,0,0,0.7);line-height:1} |
| .emblem .word{font-family:"Black Ops One",sans-serif;font-size:34px;letter-spacing:2px;line-height:1; |
| background:linear-gradient(180deg,#f3e3a8 0%, #c79a3e 48%, #8a6a22 52%, #e8d49a 100%); |
| -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; |
| filter:drop-shadow(0 2px 1px rgba(0,0,0,0.6));} |
| .rivet{position:absolute;width:9px;height:9px;border-radius:50%; |
| background:radial-gradient(circle at 35% 30%, #cfd2c0, #6a6d52 55%, #1c1d12 100%); |
| box-shadow:0 1px 1px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.4);} |
| .emblem .rivet:nth-child(1){top:7px;left:9px} |
| .emblem .rivet:nth-child(2){top:7px;right:9px} |
| .emblem .rivet:nth-child(3){bottom:7px;left:9px} |
| .emblem .rivet:nth-child(4){bottom:7px;right:9px} |
| .subtitle{font-family:"Stardos Stencil",sans-serif;font-weight:700;font-size:26px;letter-spacing:11px; |
| color:var(--gold);text-transform:uppercase;padding-left:11px; |
| text-shadow:0 2px 4px rgba(0,0,0,0.6);text-align:center;} |
| .refline{font-family:"Saira Condensed";font-size:13px;letter-spacing:4px;color:var(--gold-dim);text-transform:uppercase;} |
| |
| /* ---------- layout ---------- */ |
| .grid{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;row-gap:22px;align-items:start;} |
| .col{display:flex;flex-direction:column;gap:22px;} |
| |
| /* ---------- riveted panel ---------- */ |
| .panel{position:relative;border-radius:12px;padding:20px 22px 22px; |
| background:var(--panel); |
| border:1px solid var(--panel-edge); |
| box-shadow:0 10px 26px rgba(0,0,0,0.45), inset 0 1px 0 var(--panel-edge-hi), inset 0 -2px 10px rgba(0,0,0,0.5); |
| backdrop-filter:blur(1px);} |
| .panel::before,.panel::after,.panel .b3,.panel .b4{content:"";position:absolute;width:10px;height:10px;border-radius:50%; |
| background:radial-gradient(circle at 36% 30%, #c4c6b0, #5e6147 52%, #15170d 100%); |
| box-shadow:inset 0 1px 1px rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.6);} |
| .panel::before{top:9px;left:9px} |
| .panel::after{top:9px;right:9px} |
| .panel .b3{bottom:9px;left:9px} |
| .panel .b4{bottom:9px;right:9px} |
| .phead{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0 8px 11px; |
| border-bottom:1px solid rgba(199,176,116,0.18);} |
| .phead h2{margin:0;font-family:"Stardos Stencil",sans-serif;font-weight:700;font-size:18px;letter-spacing:4px; |
| color:var(--gold);text-transform:uppercase;} |
| .phead .tick{width:9px;height:9px;background:var(--orange);transform:rotate(45deg);box-shadow:0 0 8px rgba(214,132,31,0.6);flex:none;} |
| |
| /* ---------- select ---------- */ |
| .select{position:relative;} |
| .select select{appearance:none;-webkit-appearance:none;width:100%;padding:15px 46px 15px 18px; |
| font-family:"Saira Condensed";font-weight:600;font-size:18px;letter-spacing:0.5px;color:var(--text); |
| background:var(--inner);border:1px solid rgba(199,176,116,0.22);border-radius:8px;cursor:pointer; |
| box-shadow:inset 0 2px 8px rgba(0,0,0,0.6);} |
| .select select:focus{outline:1px solid var(--gold-dim);} |
| .select select option{background:var(--inner);color:var(--text);} |
| .select::after{content:"";position:absolute;right:18px;top:50%;transform:translateY(-30%); |
| border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid var(--gold-dim);pointer-events:none;} |
| |
| /* ---------- upload / evidence ---------- */ |
| /* visually-hidden native file input (removes black artifact) */ |
| .vh-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; |
| clip:rect(0 0 0 0);white-space:nowrap;border:0;} |
| |
| .dropzone{position:relative;min-height:300px;border:2px dashed rgba(199,176,116,0.32);border-radius:10px; |
| background:radial-gradient(120% 80% at 50% 30%, rgba(20,26,12,0.6), var(--inner)); |
| display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer; |
| transition:border-color .2s, background .2s;} |
| .dropzone:hover{border-color:var(--orange);background:radial-gradient(120% 80% at 50% 30%, rgba(40,30,10,0.5), var(--inner));} |
| .reticle{position:relative;width:74px;height:74px;border-radius:50%; |
| border:2px solid var(--gold-dim);box-shadow:0 0 0 6px rgba(155,141,87,0.08), inset 0 0 0 1px rgba(155,141,87,0.25);} |
| .reticle::before,.reticle::after{content:"";position:absolute;background:var(--gold-dim);} |
| .reticle::before{left:50%;top:-12px;bottom:-12px;width:1.5px;transform:translateX(-50%);} |
| .reticle::after{top:50%;left:-12px;right:-12px;height:1.5px;transform:translateY(-50%);} |
| .reticle .dot{position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange);} |
| .reticle .tk{position:absolute;width:7px;height:7px;border:2px solid var(--gold);} |
| .reticle .tk.a{top:6px;left:6px;border-right:0;border-bottom:0} |
| .reticle .tk.b{top:6px;right:6px;border-left:0;border-bottom:0} |
| .reticle .tk.c{bottom:6px;left:6px;border-right:0;border-top:0} |
| .reticle .tk.d{bottom:6px;right:6px;border-left:0;border-top:0} |
| .dz-main{font-family:"Saira Condensed";font-weight:600;font-size:20px;letter-spacing:1px;color:var(--text);text-align:center;padding:0 16px;} |
| .dz-sub{font-family:"Saira Condensed";font-size:14px;letter-spacing:3px;color:var(--text-dim);text-transform:uppercase;} |
| |
| /* evidence frame (filled state) */ |
| .evidence{display:none;cursor:pointer;} |
| .evidence.on{display:block;animation:fadein .35s ease;} |
| .ev-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px; |
| background:linear-gradient(180deg,#1c2110,#0e1107);border:1px solid rgba(199,176,116,0.25);border-bottom:0; |
| border-radius:8px 8px 0 0;} |
| .ev-head .ttl{font-family:"Stardos Stencil";font-weight:700;letter-spacing:3px;font-size:14px;color:var(--gold);text-transform:uppercase;} |
| .ev-head .ref{font-family:"Saira Condensed";font-size:12px;letter-spacing:2px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%;} |
| .ev-body{position:relative;padding:18px;background:repeating-linear-gradient(45deg,#0a0d06,#0a0d06 9px,#0d1108 9px,#0d1108 18px); |
| border:1px solid rgba(199,176,116,0.25);border-radius:0 0 8px 8px;overflow:hidden;} |
| .ev-doc{position:relative;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,0.6);transform:rotate(-0.6deg);} |
| .ev-doc img{display:block;width:100%;height:auto;border-radius:6px;} |
| /* RECEIVED stamp + clip */ |
| .stamp{position:absolute;font-family:"Stardos Stencil";font-weight:700;letter-spacing:3px;text-transform:uppercase; |
| color:var(--stamp-red);border:3px solid var(--stamp-red);padding:5px 11px;font-size:18px; |
| border-radius:4px;opacity:0.82;mix-blend-mode:multiply;filter:contrast(1.2);} |
| .stamp.received{right:14px;top:14px;transform:rotate(-13deg);z-index:5;} |
| .clip{position:absolute;left:50%;top:-9px;transform:translateX(-50%);width:30px;height:54px;border:4px solid #b9bcae; |
| border-radius:14px 14px 6px 6px;z-index:6;box-shadow:0 2px 4px rgba(0,0,0,0.5);} |
| .clip::after{content:"";position:absolute;inset:6px 6px 18px;border:3px solid #9a9d90;border-radius:9px 9px 0 0;} |
| @keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} |
| |
| /* scan-sweep overlay (loops over the document for the whole analysis) */ |
| .scan{position:absolute;inset:18px;pointer-events:none;opacity:0;z-index:7;border-radius:6px;overflow:hidden;transform:rotate(-0.6deg);} |
| .scan.on{opacity:1;} |
| .scan .line{position:absolute;left:0;right:0;height:46px;top:-46px; |
| background:linear-gradient(180deg,transparent, rgba(120,255,150,0.0) 30%, rgba(120,255,150,0.28) 50%, rgba(120,255,150,0.0) 70%, transparent); |
| box-shadow:0 0 22px rgba(120,255,150,0.5);} |
| .scan.on .line{animation:sweep 1.7s linear infinite;} |
| .scan .grid-lines{position:absolute;inset:0;opacity:0.25;mix-blend-mode:screen; |
| background-image:linear-gradient(rgba(120,255,150,0.5) 1px,transparent 1px),linear-gradient(90deg,rgba(120,255,150,0.5) 1px,transparent 1px); |
| background-size:26px 26px;} |
| @keyframes sweep{0%{top:-46px}100%{top:100%}} |
| |
| /* ---------- commence button ---------- */ |
| .commence{position:relative;margin-top:4px;width:100%;border:0;cursor:pointer;border-radius:40px;padding:18px; |
| font-family:"Stardos Stencil";font-weight:700;font-size:21px;letter-spacing:6px;text-transform:uppercase;color:#3a2305; |
| background:linear-gradient(180deg,var(--orange-hi),var(--orange) 55%,var(--orange-dk)); |
| box-shadow:0 8px 0 #6f3f0c, 0 12px 22px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.45); |
| transition:transform .07s, box-shadow .07s;} |
| .commence:hover:not(:disabled){filter:brightness(1.05)} |
| .commence:active:not(:disabled){transform:translateY(5px);box-shadow:0 3px 0 #6f3f0c, 0 6px 12px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.4);} |
| .commence:disabled{filter:grayscale(0.4) brightness(0.8);cursor:progress;} |
| .commence .ico{display:inline-block;width:14px;height:14px;border-radius:50%;border:3px solid #3a2305;vertical-align:middle;margin-right:12px;} |
| |
| /* ---------- field report ---------- */ |
| .report-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px; |
| min-height:200px;color:var(--text-dim);} |
| .report-idle .radar{position:relative;width:96px;height:96px;border-radius:50%;border:1px solid rgba(120,200,140,0.3); |
| background:radial-gradient(circle,rgba(60,120,70,0.16),transparent 70%);overflow:hidden;} |
| .report-idle .radar::before{content:"";position:absolute;inset:0;border-radius:50%; |
| background:conic-gradient(from 0deg, rgba(120,255,150,0.0) 0deg, rgba(120,255,150,0.35) 40deg, transparent 60deg); |
| animation:spin 2.6s linear infinite;} |
| .report-idle .radar::after{content:"";position:absolute;inset:0;margin:auto;width:5px;height:5px;border-radius:50%; |
| background:var(--teletype);box-shadow:0 0 8px var(--teletype);} |
| .report-idle .rings{position:absolute;inset:0;border-radius:50%; |
| background:radial-gradient(circle, transparent 30%, rgba(120,200,140,0.18) 31%, transparent 32%, transparent 60%, rgba(120,200,140,0.18) 61%, transparent 62%);} |
| .report-idle span{font-family:"Saira Condensed";letter-spacing:5px;text-transform:uppercase;font-size:14px;} |
| @keyframes spin{to{transform:rotate(360deg)}} |
| |
| .report-body{font-family:"Special Elite",monospace;font-size:15px;line-height:1.62;color:var(--teletype); |
| min-height:200px;white-space:pre-wrap;word-break:break-word;letter-spacing:0.3px; |
| text-shadow:0 0 6px rgba(120,255,150,0.15);} |
| @keyframes report-pulse{0%,100%{opacity:1}50%{opacity:0.45}} |
| .report-body.pulse{color:var(--gold-bright);letter-spacing:1px;animation:report-pulse 1.2s ease-in-out infinite;} |
| .report-body.alert{color:#e0683c;text-shadow:none;} |
| |
| /* collapsed Field Report bar (accordion header after a successful analysis) */ |
| .report-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%; |
| padding:14px 16px;cursor:pointer;border-radius:9px; |
| background:rgba(10,13,6,0.6);border:1px solid rgba(199,176,116,0.16); |
| box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); |
| font-family:"Special Elite",monospace;color:var(--teletype); |
| text-shadow:0 0 6px rgba(120,255,150,0.15);transition:border-color .18s;} |
| .report-toggle:hover{border-color:var(--orange);} |
| .report-toggle:focus-visible{outline:1px solid var(--gold-dim);outline-offset:2px;} |
| .report-toggle .rt-label{font-size:15px;letter-spacing:1px;} |
| .report-toggle .rt-aff{display:flex;align-items:center;gap:6px; |
| font-family:"Saira Condensed";font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dim);} |
| .report-toggle .rt-caret{font-size:12px;color:var(--orange-hi);} |
| |
| /* ---------- resupply manifest ---------- */ |
| .manifest-box{min-height:120px;font-family:"Saira Condensed";font-size:15px;} |
| .manifest-box .idle-m{font-style:italic;color:var(--text-dim);letter-spacing:2px;padding:10px 2px;} |
| #manifest ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;} |
| #manifest li{padding:10px 13px;border-radius:9px;background:rgba(10,13,6,0.6); |
| border:1px solid rgba(199,176,116,0.16);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); |
| color:var(--text);line-height:1.4;} |
| #manifest a{color:var(--orange-hi);text-decoration:none;font-weight:600;} |
| #manifest a:hover{text-decoration:underline;} |
| #manifest p{color:var(--text-dim);font-style:italic;letter-spacing:2px;padding:10px 2px;} |
| |
| /* ---------- inventory badge ---------- */ |
| #manifest li.owned{border-color:rgba(100,160,80,0.30);background:rgba(8,14,6,0.75);} |
| .owned-badge{ |
| display:inline-block; |
| font-family:"Stardos Stencil",sans-serif;font-weight:700; |
| font-size:10px;letter-spacing:2px;text-transform:uppercase; |
| color:#8ec98e;border:1px solid rgba(100,160,80,0.45); |
| padding:2px 7px;border-radius:3px; |
| background:rgba(30,50,18,0.7); |
| vertical-align:middle;margin-left:6px; |
| } |
| .owned-status{ |
| display:block;margin-top:3px; |
| font-family:"Saira Condensed";font-size:11px;letter-spacing:2.5px; |
| color:rgba(142,201,142,0.55);text-transform:uppercase; |
| } |
| |
| .footnote{margin-top:30px;text-align:center;font-family:"Stardos Stencil",sans-serif;font-weight:700; |
| font-size:16px;letter-spacing:3px;color:var(--gold);text-transform:uppercase; |
| text-shadow:0 1px 3px rgba(0,0,0,0.6);} |
| .footnote .heart{color:var(--stamp-red);text-transform:none;font-size:17px; |
| text-shadow:0 0 6px rgba(168,54,44,0.5);} |
| |
| /* ---------- sample thumbnails ---------- */ |
| .samples{margin-top:14px;text-align:center;} |
| .samples-label{font-family:"Saira Condensed";font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim);} |
| .samples-groups{display:flex;gap:16px;justify-content:center;margin-top:8px;} |
| .smp-group{display:flex;flex-direction:column;align-items:center;gap:5px;} |
| .smp-group-label{font-family:"Saira Condensed";font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dim);} |
| .samples-row{display:flex;gap:8px;} |
| .smp{width:68px;height:50px;background-size:cover;background-position:center;background-color:transparent; |
| border:1px solid rgba(199,176,116,0.28);border-radius:6px;cursor:pointer; |
| filter:sepia(0.5) brightness(0.85);transition:filter .18s,border-color .18s;padding:0;} |
| .smp:hover{filter:sepia(0) brightness(1);border-color:var(--orange);} |
| .smp:active{transform:scale(0.96);} |
| |
| @media(prefers-reduced-motion:reduce){ |
| .report-body.pulse{animation:none;} |
| .evidence.on{animation:none;} |
| .report-idle .radar::before{animation:none;} |
| .scan.on .line{animation:none;display:none;} |
| } |
| @media(max-width:880px){ |
| .grid{grid-template-columns:1fr} |
| .subtitle{font-size:18px;letter-spacing:6px} |
| .page-stamp{display:none} |
| } |
| </style> |
| </head> |
| <body> |
| <div class="page-stamp tl">Classified</div> |
| <div class="page-stamp br">Eyes Only</div> |
|
|
| <div class="wrap"> |
| <header class="hero"> |
| <div class="emblem"> |
| <span class="rivet"></span><span class="rivet"></span><span class="rivet"></span><span class="rivet"></span> |
| <span class="star">★</span> |
| <span class="word">PAINT MATCH</span> |
| </div> |
| <div class="subtitle">Colour Identification Unit</div> |
| <div class="refline">Ref · PM-1940-X // Sortie Log Active</div> |
| </header> |
|
|
| <div class="grid"> |
| |
| <div class="col"> |
| <section class="panel"> |
| <span class="b3"></span><span class="b4"></span> |
| <div class="phead"><span class="tick"></span><h2>Document Classification</h2></div> |
| <div class="select"> |
| <select id="format"> |
| <option value="airfix_instruction">Airfix paper instruction sheet</option> |
| <option value="airfix_shop">Airfix shop screenshot</option> |
| </select> |
| </div> |
| </section> |
|
|
| <section class="panel"> |
| <span class="b3"></span><span class="b4"></span> |
| <div class="phead"><span class="tick"></span><h2>Upload Document</h2></div> |
|
|
| <input type="file" id="file" accept="image/*" class="vh-input"> |
|
|
| |
| <label class="dropzone" id="dropzone" for="file"> |
| <div class="reticle"> |
| <span class="dot"></span> |
| <span class="tk a"></span><span class="tk b"></span><span class="tk c"></span><span class="tk d"></span> |
| </div> |
| <div class="dz-main">Drop recon photo here or click to acquire</div> |
| <div class="dz-sub">JPG · PNG · WEBP — Max 10MB</div> |
| </label> |
|
|
| |
| <label class="evidence" id="evidence" for="file"> |
| <div class="ev-head"> |
| <span class="ttl">Exhibit A — Recovered Document</span> |
| <span class="ref" id="src-name">SRC: —</span> |
| </div> |
| <div class="ev-body"> |
| <div class="clip"></div> |
| <div class="ev-doc"> |
| <img id="preview" alt="Recovered document"> |
| <div class="stamp received">Received</div> |
| </div> |
| <div class="scan" id="scan"><div class="grid-lines"></div><div class="line"></div></div> |
| </div> |
| </label> |
|
|
| <div class="samples"> |
| <span class="samples-label">— or load sample —</span> |
| <div class="samples-groups"> |
| <div class="smp-group"> |
| <span class="smp-group-label">Instructions</span> |
| <div class="samples-row"> |
| <button class="smp"></button> |
| <button class="smp"></button> |
| </div> |
| </div> |
| <div class="smp-group"> |
| <span class="smp-group-label">Shop</span> |
| <div class="samples-row"> |
| <button class="smp"></button> |
| <button class="smp"></button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <button class="commence" id="analyze" type="button"><span class="ico"></span>Commence Analysis</button> |
| </div> |
|
|
| |
| <div class="col"> |
| <section class="panel"> |
| <span class="b3"></span><span class="b4"></span> |
| <div class="phead"><span class="tick"></span><h2>Field Report</h2></div> |
| <div class="report-idle" id="reportIdle"> |
| <div class="radar"><div class="rings"></div></div> |
| <span>Standby — awaiting field report</span> |
| </div> |
| <button class="report-toggle" id="reportToggle" type="button" aria-expanded="false" style="display:none"> |
| <span class="rt-label">✓ INTEL DECODED</span> |
| <span class="rt-aff">DECLASSIFY <span class="rt-caret" id="reportCaret">▸</span></span> |
| </button> |
| <div class="report-body" id="report" style="display:none"></div> |
| </section> |
|
|
| <section class="panel"> |
| <span class="b3"></span><span class="b4"></span> |
| <div class="phead"><span class="tick"></span><h2>Resupply Manifest</h2></div> |
| <div class="manifest-box" id="manifest"> |
| <div class="idle-m">Awaiting resupply manifest…</div> |
| </div> |
| </section> |
| </div> |
| </div> |
|
|
| <div class="footnote">— Built with <span class="heart">♥</span> in tribute to <a href="https://en.wikipedia.org/wiki/Airfix_Dogfighter" target="_blank" style="color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:0.8;">Airfix Dogfighter</a> —</div> |
| </div> |
| <script type="module" src="app.js"></script> |
| </body> |
| </html> |
|
|
