Tactical Aid Assistant — Android Release Mockup

Role

Language

Response behavior

Role changes the recommendation filter: a non-medic receives only safe first-aid actions.
Language changes questions, interface text, export, and handoff summary.

In test mode, this list will be cleared after the session ends.

Case #TAA-2026-0526-001

26 May 2026 · 13:06 · 4 photos · 2 audio notes

Deep tissue damage / possible necrosis. Mechanism, symptoms, progression, and evacuation possibility were clarified.

Case #TAA-2026-0524-004

24 May 2026 · 18:42 · 2 photos

Extremity wound. Short report and DD 1380 / TCCC Casualty Card data were prepared.

Case #TAA-2026-0521-002

21 May 2026 · 09:17 · audio 0:35

Primary assessment, MARCH flow, vital-sign monitoring, and handoff summary.

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Tactical Aid Assistant — Dialogue Flow v3</title>
<style>
    :root{
      --bg:#050b17;
      --panel:#071426;
      --panel-2:#0a1a30;
      --card:#0b1b31;
      --card-2:#102846;
      --line:#1d3658;
      --line-2:#2d5f9e;
      --text:#f4f7fb;
      --muted:#91a1bf;
      --muted-2:#68799c;
      --blue:#65a9ff;
      --blue-2:#2e78d6;
      --gold:#d8b84f;
      --gold-soft:#3b3218;
      --green:#76d6ad;
      --green-soft:#0c2b25;
      --red:#ff7b6f;
      --red-soft:#2a1318;
      --shadow: 0 28px 80px rgba(0,0,0,.55);
      --radius: 22px;
    }

*{box-sizing:border-box}
    html,body{margin:0;min-height:100%;background:radial-gradient(circle at top,#0b1a2d 0,#050b17 52%,#02050b 100%);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;color:var(--text)}
    body{display:flex;justify-content:center;padding:18px 10px 34px;}

.phone{
      width:min(100%,430px);
      border-radius:30px;
      overflow:hidden;
      background:
        radial-gradient(circle at 20% 0%,rgba(46,120,214,.18),transparent 35%),
        radial-gradient(circle at 80% 10%,rgba(216,184,79,.10),transparent 28%),
        var(--panel);
      border:1px solid rgba(68,112,169,.28);
      box-shadow:var(--shadow);
      position:relative;
    }

.phone:before{
      content:"";
      position:absolute;inset:0;
      background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
      background-size:20px 20px;
      pointer-events:none;
      opacity:.35;
    }

.topbar{
      position:sticky;top:0;z-index:20;
      display:flex;align-items:center;gap:12px;
      padding:18px 18px 16px;
      background:rgba(6,18,35,.92);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(72,116,174,.25);
    }
    .back,.iconBtn{width:42px;height:42px;border-radius:13px;border:1px solid var(--line);background:#0d2039;display:grid;place-items:center;color:var(--text);font-size:25px;line-height:1;flex:0 0 auto;}
    .title{min-width:0;flex:1}
    .title h1{margin:0;font-size:18px;line-height:1.1;font-weight:800;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .title p{margin:5px 0 0;color:var(--muted);font:600 10px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:2.4px;text-transform:uppercase;}
    .trident{width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:#182338;border:2px solid var(--gold);color:var(--gold);font-size:28px;font-weight:800;box-shadow:0 0 0 4px rgba(216,184,79,.08)}

.content{position:relative;padding:14px 14px 24px;}
    .caseRow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
    .caseBtn{border:1px solid var(--line-2);background:#102746;color:#9fceff;font-weight:800;border-radius:13px;padding:10px 13px;font-size:14px;}
    .contextChip{border:1px solid rgba(118,214,173,.26);background:rgba(12,43,37,.7);color:#cdeee4;border-radius:999px;padding:8px 10px;font-size:11px;font-weight:700;display:flex;gap:6px;align-items:center;}
    .contextChip:before{content:"✓";color:var(--green)}

.stageHeader{display:flex;align-items:center;gap:10px;margin:18px 0 10px;}
    .stageIndex{font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.8px;color:var(--gold);border:1px solid rgba(216,184,79,.45);background:rgba(216,184,79,.08);padding:9px 10px;border-radius:999px;text-transform:uppercase;}
    .stageTitle{font-size:16px;font-weight:850;color:#eef4ff;}

.block{border:1px solid var(--line);background:rgba(9,24,44,.78);border-radius:var(--radius);padding:16px;margin:10px 0;box-shadow:0 10px 28px rgba(0,0,0,.18);}
    .block.gold{border-color:rgba(216,184,79,.42);background:linear-gradient(180deg,rgba(22,26,32,.86),rgba(10,22,38,.82));}
    .block.green{border-color:rgba(118,214,173,.48);background:linear-gradient(180deg,rgba(10,39,34,.9),rgba(8,23,35,.9));}
    .block.red{border-color:rgba(255,123,111,.52);background:linear-gradient(180deg,rgba(42,19,24,.9),rgba(10,22,38,.88));}

.sectionTitle{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--muted);font:800 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:3px;text-transform:uppercase;}
    .sectionTitle:before{content:"";width:20px;height:2px;border-radius:5px;background:var(--gold);display:block;flex:0 0 auto;}

ul{margin:0;padding-left:22px;}
    li{margin:7px 0;line-height:1.45;font-size:14px;color:#eef4ff;}
    li::marker{color:#eaf1ff;}
    .small{font-size:12px;color:var(--muted);line-height:1.45;}

.actionList{display:grid;gap:10px;}
    .action{border:1px solid rgba(78,129,199,.55);background:linear-gradient(180deg,#122d50,#102744);border-radius:16px;padding:13px 14px;line-height:1.45;font-size:14px;}
    .action.warn{border-color:rgba(216,184,79,.42);background:linear-gradient(180deg,rgba(57,45,17,.45),rgba(16,30,48,.86));color:#ffe6a3;}
    .action .num{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:8px;background:#173b69;color:#b9dcff;font-weight:800;}

.qBlock{padding-bottom:12px;}
    .question{border-top:1px solid rgba(77,117,170,.24);padding:14px 0 2px;}
    .question:first-of-type{border-top:0;padding-top:0;}
    .qText{font-size:14px;line-height:1.5;margin:0 0 9px;color:#f2f6fc;}
    .qHint{font:700 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted-2);letter-spacing:.7px;margin-bottom:8px;text-transform:uppercase;}
    .options{display:grid;gap:8px;}
    .option{display:flex;align-items:center;gap:9px;min-height:40px;padding:9px 11px;border-radius:12px;border:1px solid rgba(57,92,139,.7);background:#0b2039;color:#cfdcf0;font-size:13px;cursor:pointer;transition:.16s ease;user-select:none;}
    .option:hover{border-color:rgba(101,169,255,.7);transform:translateY(-1px);}
    .option .dot{width:17px;height:17px;border-radius:50%;border:1px solid #315a8d;display:grid;place-items:center;flex:0 0 auto;}
    .option.selected{border-color:var(--gold);background:linear-gradient(180deg,#15345c,#102945);color:#fff;box-shadow:0 0 0 1px rgba(216,184,79,.16) inset;}
    .option.selected .dot{background:#2d78d6;border-color:#6bb4ff;}
    .option.selected .dot:after{content:"✓";font-size:11px;color:white;font-weight:900;}

.qFooter{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(77,117,170,.22);}
    .selectedCount{font-size:12px;color:var(--muted);}
    .submitSmall{border:1px solid rgba(101,169,255,.65);background:linear-gradient(180deg,#2b78d7,#1e5eb2);color:white;border-radius:12px;padding:9px 13px;font-size:12px;font-weight:850;cursor:pointer;box-shadow:0 10px 22px rgba(32,100,188,.22);white-space:nowrap;}
    .submitSmall:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.25);}

.addData{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
    .miniBtn{border:1px solid rgba(78,129,199,.5);background:#102642;border-radius:11px;color:#b9d6f7;padding:8px 10px;font-size:12px;font-weight:750;}

.answersTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px;}
    .answersTop .label{font:850 12px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#b7f1dc;letter-spacing:1.6px;text-transform:uppercase;}
    .answersTop .badge{border:1px solid rgba(118,214,173,.35);background:rgba(118,214,173,.12);border-radius:999px;padding:6px 8px;font-size:11px;color:#d7fff1;font-weight:800;}
    .answerGrid{display:grid;gap:8px;}
    .answerItem{display:flex;gap:8px;align-items:flex-start;border:1px solid rgba(118,214,173,.18);background:rgba(6,22,31,.5);border-radius:12px;padding:9px 10px;font-size:13px;line-height:1.35;color:#e7fff7;}
    .answerItem b{color:#8ee9c5;white-space:nowrap;}

.mediaRow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
    .mediaChip{border:1px solid rgba(101,169,255,.36);background:#102844;color:#cce3ff;border-radius:11px;padding:8px 10px;font-size:12px;font-weight:700;}

.summaryRows{display:grid;gap:8px;}
    .summaryRow{border:1px solid rgba(78,129,199,.35);background:rgba(10,28,50,.8);border-radius:12px;padding:10px 11px;font-size:13px;line-height:1.35;display:flex;gap:8px;}
    .summaryRow b{color:var(--blue);min-width:88px;}

.sources{margin-top:18px;border:1px solid rgba(145,161,191,.34);background:rgba(7,17,32,.88);border-radius:22px;padding:16px;}
    .sourceItem{display:flex;gap:10px;padding:12px 0;border-top:1px solid rgba(78,129,199,.18);}
    .sourceItem:first-of-type{border-top:0;padding-top:0;}
    .pdfIcon{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(216,184,79,.45);background:rgba(216,184,79,.08);color:var(--gold);font-weight:900;font-size:11px;flex:0 0 auto;}
    .sourceTitle{font-size:13px;font-weight:850;color:#f2f6fc;line-height:1.25;margin-bottom:4px;}
    .sourceMeta{font-size:11px;color:var(--muted);line-height:1.35;}
    .sourceTags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
    .sourceTag{font-size:10px;border:1px solid rgba(101,169,255,.28);background:rgba(101,169,255,.08);color:#b9dcff;border-radius:999px;padding:5px 7px;font-weight:800;}

.footerNote{display:flex;gap:10px;color:var(--muted-2);font-size:11px;line-height:1.4;margin:14px 4px 0;padding:12px 0 0;border-top:1px solid rgba(78,129,199,.18);}
    .lock{color:#8ebbf1}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#102846;border:1px solid rgba(101,169,255,.45);color:#eaf4ff;border-radius:999px;padding:11px 14px;font-size:13px;opacity:0;pointer-events:none;transition:.22s ease;box-shadow:0 16px 38px rgba(0,0,0,.4);z-index:50;}
    .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (min-width:760px){
      body{padding:26px;}
      .phone{width:440px;}
    }

/* Embedded standalone mode: the outer Android mockup provides the device shell. */
body{display:block;padding:0;background:transparent;min-height:0;}
.phone{width:100%;border-radius:0;border:0;box-shadow:none;min-height:920px;}
.exportBtn{height:42px;border:0;border-radius:13px;padding:0 14px;background:linear-gradient(180deg,#d7b248,#92701f);color:#130e03;font-weight:900;font-size:13px;cursor:pointer;box-shadow:0 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.22);}
.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:1000;align-items:flex-end;justify-content:center;padding:12px;}
.modal-backdrop.active{display:flex;}
.modal{width:min(430px,100%);background:linear-gradient(180deg,#0f2038,#071426);border:1px solid rgba(123,166,226,.24);border-radius:26px;padding:18px;box-shadow:0 -28px 80px rgba(0,0,0,.5);}
.modalHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.modalTitle{font-weight:900;font-size:19px;}
.exportOption{border:1px solid rgba(123,166,226,.18);background:rgba(8,22,42,.76);border-radius:18px;padding:14px;margin-top:10px;display:grid;grid-template-columns:44px 1fr;gap:12px;cursor:pointer;color:var(--text);}
.exportOption strong{display:block;margin-bottom:5px;}
.exportOption span span{color:var(--muted);font-size:13px;line-height:1.4;}
.exportIcon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--blue);background:rgba(25,67,116,.6);border:1px solid rgba(123,166,226,.18);font-size:14px;font-weight:900;}
.footerNote{color:var(--muted-2);font-size:12px;line-height:1.4;text-align:center;margin-top:14px;display:block;border-top:0;padding-top:0;}

#case-screen{padding:0;min-height:920px;overflow:hidden;background:transparent;}
    #case-frame{display:block;width:100%;min-height:920px;border:0;background:transparent;}
    #case-template{display:none;}
</style>
</head>
<body>
<main class="phone">
<header class="topbar">
<button aria-label="Back" class="back" onclick="window.parent && window.parent.go ? window.parent.go('menu-screen') : history.back()">‹</button>
<div class="title"><h1>Tactical Aid Assistant</h1><p>CASE FLOW</p></div>
<div class="trident">Ψ</div>
<button aria-label="Export" class="exportBtn" onclick="openExport()">Export</button>
</header>
<section class="content">
<div class="stageHeader">
<div class="stageTitle">Initial analysis</div>
</div>
<section class="block">
<h2 class="sectionTitle">Initial findings</h2>
<ul>
<li>Large black areas appear consistent with deep tissue injury and possible necrosis.</li>
<li>There is redness and dark discoloration; infection, necrosis, cold injury, or chemical injury should be differentiated.</li>
<li>The condition requires prompt assessment by qualified medical personnel.</li>
</ul>
</section>
<section class="block">
<h2 class="sectionTitle">Recommendations / initial actions</h2>
<div class="actionList">
<div class="action"><span class="num">1</span>Ensure the patient is assessed by qualified medical personnel to determine injury depth and next steps.</div>
<div class="action"><span class="num">2</span>Do not remove necrotic tissue yourself and do not apply topical agents unless prescribed by a clinician.</div>
</div>
</section>
<section class="block qBlock" data-stage="1">
<h2 class="sectionTitle">Clarification needed / additional data</h2>
<div class="question" data-question="1">
<p class="qText">1. How long ago did these lesions appear, and what mechanism is known?</p>
<div class="qHint">Select one option</div>
<div class="options">
<div class="option selected"><span class="dot"></span>Blast-related trauma</div>
<div class="option"><span class="dot"></span>Prolonged cold/moisture exposure</div>
<div class="option"><span class="dot"></span>Chemical exposure</div>
<div class="option"><span class="dot"></span>Unknown</div>
</div>
</div>
<div class="question" data-question="2">
<p class="qText">2. Are there systemic symptoms: fever, chills, general weakness?</p>
<div class="qHint">Select one option</div>
<div class="options">
<div class="option selected"><span class="dot"></span>Yes</div>
<div class="option"><span class="dot"></span>No</div>
<div class="option"><span class="dot"></span>Unknown</div>
</div>
</div>
<div class="addData">
<button class="miniBtn">＋ photo</button>
<button class="miniBtn">＋ audio</button>
<button class="miniBtn">＋ short description</button>
</div>
<div class="qFooter">
<div class="selectedCount">Selected 2 of 2</div>
<button class="submitSmall">Submit clarification</button>
</div>
</section>
<section class="block green">
<div class="answersTop">
<div class="label">User responses</div>
<div class="badge">Applied</div>
</div>
<div class="answerGrid">
<div class="answerItem"><b>Mechanism:</b><span>blast-related trauma</span></div>
<div class="answerItem"><b>Symptoms:</b><span>yes, weakness / chills are present</span></div>
<div class="answerItem"><b>Data:</b><span>1 photo and a short situation description added</span></div>
</div>
<div class="mediaRow">
<div class="mediaChip">Photo 1</div>
<div class="mediaChip">Note 0:18</div>
</div>
</section>
<div class="stageHeader">
<div class="stageTitle">Update after clarification</div>
</div>
<section class="block">
<h2 class="sectionTitle">Updated assessment</h2>
<ul>
<li>The injury mechanism and systemic symptoms increase the risk of deep infection or progression of soft-tissue injury.</li>
<li>Clarify whether redness/swelling is spreading and whether there is discharge or odor.</li>
<li>Previous photos, answers, and the note are saved in the case context.</li>
</ul>
</section>
<section class="block">
<h2 class="sectionTitle">Recommendations / current actions</h2>
<div class="actionList">
<div class="action"><span class="num">1</span>Immediately arrange handoff to medical personnel. Do not wait for all symptoms to appear.</div>
<div class="action"><span class="num">2</span>Cover the area with a dry sterile dressing; do not press on black tissue areas.</div>
<div class="action"><span class="num">3</span>Monitor consciousness, breathing, body temperature, and general weakness until handoff to a medic.</div>
</div>
</section>
<section class="block qBlock" data-stage="2">
<h2 class="sectionTitle">Clarification needed / additional data</h2>
<div class="question" data-question="3">
<p class="qText">3. Is redness, swelling, or pain spreading around the lesion?</p>
<div class="qHint">Select one option</div>
<div class="options">
<div class="option selected"><span class="dot"></span>Yes, it is spreading</div>
<div class="option"><span class="dot"></span>No, unchanged</div>
<div class="option"><span class="dot"></span>Not sure</div>
</div>
</div>
<div class="question" data-question="4">
<p class="qText">4. Is there an unpleasant odor or discharge from the wound?</p>
<div class="qHint">Select one option</div>
<div class="options">
<div class="option"><span class="dot"></span>Yes</div>
<div class="option selected"><span class="dot"></span>No</div>
<div class="option"><span class="dot"></span>Not visible / cannot assess</div>
</div>
</div>
<div class="question" data-question="5">
<p class="qText">5. Is rapid evacuation or handoff to a medic possible?</p>
<div class="qHint">Select one option</div>
<div class="options">
<div class="option selected"><span class="dot"></span>Yes, handoff is being prepared</div>
<div class="option"><span class="dot"></span>No, there is a delay</div>
<div class="option"><span class="dot"></span>Unknown</div>
</div>
</div>
<div class="addData">
<button class="miniBtn">＋ add photo</button>
<button class="miniBtn">＋ audio</button>
<button class="miniBtn">＋ describe change</button>
</div>
<div class="qFooter">
<div class="selectedCount">Selected 3 of 3</div>
<button class="submitSmall">Get updated plan</button>
</div>
</section>
<section class="block green">
<div class="answersTop">
<div class="label">User responses</div>
<div class="badge">Applied</div>
</div>
<div class="answerGrid">
<div class="answerItem"><b>Progression:</b><span>redness / pain is spreading</span></div>
<div class="answerItem"><b>Odor/discharge:</b><span>no</span></div>
<div class="answerItem"><b>Evacuation:</b><span>yes, handoff to a medic is being prepared</span></div>
</div>
<div class="mediaRow">
<div class="mediaChip">Photo 2</div>
<div class="mediaChip">Audio 0:12</div>
</div>
</section>
<div class="stageHeader">
<div class="stageTitle">Update after clarification</div>
</div>
<section class="block">
<h2 class="sectionTitle">Updated assessment</h2>
<ul>
<li>After clarification, the case shows signs of potentially serious tissue damage with a risk of progression.</li>
<li>Absence of odor or discharge does not rule out complications if redness/pain is spreading and systemic symptoms are present.</li>
<li>The final recommendation for a non-medic is not to treat independently, but to hand the case over to medical personnel quickly.</li>
</ul>
</section>
<section class="block">
<h2 class="sectionTitle">Recommendations / current actions</h2>
<ul>
<li>Hand the patient over to a medic / arrange evacuation as soon as possible.</li>
<li>Prepare a short report: mechanism, time of onset, symptoms, progression, photos, and audio.</li>
<li>Do not open the wound, do not rinse it aggressively, and do not remove necrotic tissue during the first-aid stage.</li>
</ul>
</section>
</section>
</main>
<div class="modal-backdrop" id="export-modal" onclick="closeExport(event)">
<div aria-modal="true" class="modal" onclick="event.stopPropagation()" role="dialog">
<div class="modalHead"><div class="modalTitle">Export case</div><button class="iconBtn" onclick="closeExport()" style="width:40px;height:40px;border-radius:13px">×</button></div>
<div class="exportOption" onclick="fakeDone('PDF export')"><span class="exportIcon">PDF</span><span><strong>Download as PDF</strong><span>Short case report: findings, answers, recommendations, media, and sources.</span></span></div>
<div class="exportOption" onclick="fakeDone('DD1380')"><span class="exportIcon">DD</span><span><strong>Fill DD 1380 / TCCC Casualty Card</strong><span>Auto-fill casualty data, mechanism of injury, signs, care provided, medications, and notes.</span></span></div>
<div class="exportOption" onclick="fakeDone('handoff')"><span class="exportIcon">☷</span><span><strong>Create handoff summary</strong><span>Compact handoff for a medic: mechanism, timing, symptoms, progression, risks, and actions already taken.</span></span></div>
<p class="footerNote" id="export-status">DD 1380 is used as a documentation template, not as a treatment protocol.</p>
</div></div><div class="toast" id="toast">Responses have been applied in the next block</div>
<script>
    function updateCounts(block){
      const questions = Array.from(block.querySelectorAll('.question'));
      const selected = questions.filter(q => q.querySelector('.option.selected')).length;
      const count = block.querySelector('.selectedCount');
      const btn = block.querySelector('.submitSmall');
      if(count) count.textContent = `Selected ${selected} of ${questions.length}`;
      if(btn) btn.disabled = selected !== questions.length;
    }

function openExport(){
      if(window.parent && window.parent !== window && typeof window.parent.openExport === 'function'){
        window.parent.openExport();
        return;
      }
      document.getElementById('export-modal').classList.add('active');
    }

function closeExport(e){
      if(e && e.target.id !== 'export-modal') return;
      document.getElementById('export-modal').classList.remove('active');
    }

function fakeDone(kind){
      document.getElementById('export-status').textContent = kind + ' selected — in the real app this opens generation / download flow.';
    }

const toast = document.getElementById('toast');
    document.querySelectorAll('.submitSmall').forEach(btn => {
      btn.addEventListener('click', () => {
        toast.classList.add('show');
        setTimeout(() => toast.classList.remove('show'), 1600);
      });
    });
  </script>

</body>
</html>

Tactical AidAssistant

Tactical Aid
Assistant