Spaces:

goctests0
/

TalkToDoc

Running

App Files Files Community

Glitche commited on Jul 27

Commit

513cacb

verified ·

1 Parent(s): bb1cf1c

Upload 3 files

Browse files

Files changed (3) hide show

templates/base.html +20 -0
templates/patient.html +152 -0
templates/provider.html +108 -0

templates/base.html ADDED Viewed

	@@ -0,0 +1,20 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{% block title %}TalkToDoc{% endblock %}</title>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body class="{% block body_class %}{% endblock %}">
+  <div class="app-shell {% block shell_class %}{% endblock %}">
+    {% block header %}{% endblock %}
+    <main class="app-main">
+      {% block content %}{% endblock %}
+    </main>
+  </div>
+  <div class="toast" id="toast" role="status" aria-live="polite"></div>
+  <script src="{{ url_for('static', filename='js/shared.js') }}"></script>
+  {% block scripts %}{% endblock %}
+</body>
+</html>

templates/patient.html ADDED Viewed

	@@ -0,0 +1,152 @@

+{% extends "base.html" %}
+{% block title %}TalkToDoc{% endblock %}
+{% block body_class %}patient-page{% endblock %}
+{% block shell_class %}patient-shell{% endblock %}
+{% block header %}
+<div class="app-header">
+  <div class="brand">
+    <span class="brand-mark">
+      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+      </svg>
+    </span>
+    <div>
+      <h1>TalkToDoc</h1>
+      <span class="role-tag">Patient</span>
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block content %}
+<div id="status-banner" role="alert" aria-live="assertive"></div>
+<!-- Step 1: language selection -->
+<section class="step active" data-step="1">
+  <div class="hero">
+    <div class="hero-orb-wrap">
+      <div class="hero-orb-glow"></div>
+      <div class="hero-orb">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+        </svg>
+      </div>
+    </div>
+    <h2>Hi, how can we help?</h2>
+    <p>Choose your language, then tell us how you're feeling, by typing or speaking.</p>
+  </div>
+  <div class="card">
+    <h3>Choose your language</h3>
+    <div class="language-grid" id="language-grid">
+      {% for lang in languages %}
+      <button type="button" class="language-option" data-language="{{ lang }}" aria-pressed="false">
+        {{ lang | capitalize }}
+      </button>
+      {% endfor %}
+    </div>
+  </div>
+  <button type="button" class="btn btn-primary" id="to-step-2" disabled>Continue</button>
+  <div class="card" id="history-card" style="display: none;">
+    <h3>Your past messages</h3>
+    <div id="history-list"></div>
+  </div>
+</section>
+<!-- Step 2: query input -->
+<section class="step" data-step="2">
+  <div class="card">
+    <h2>Describe how you're feeling</h2>
+    <p>Type your message, tap a quick option, or speak it instead.</p>
+    <div class="chip-row" id="symptom-chips">
+      <button type="button" class="chip" data-text="I have a headache">Headache</button>
+      <button type="button" class="chip" data-text="I have a fever">Fever</button>
+      <button type="button" class="chip" data-text="I have a stomach ache">Stomach ache</button>
+      <button type="button" class="chip" data-text="I have a cough">Cough</button>
+      <button type="button" class="chip" data-text="I feel dizzy">Dizziness</button>
+    </div>
+    <div id="input-panel">
+      <label for="patient-text">Type your message</label>
+      <div class="input-bar">
+        <textarea id="patient-text" rows="4" placeholder="For example: I have a headache and a fever since yesterday"></textarea>
+        <button type="button" class="mic-inline-btn" id="record-btn" title="Record your voice" aria-label="Record your voice">
+          <span id="record-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+              <path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/>
+            </svg>
+          </span>
+        </button>
+      </div>
+      <p class="helper-text" id="record-status"></p>
+    </div>
+    <!-- Listening state, shown instead of the input bar while recording -->
+    <div class="listening-panel" id="listening-panel" style="display: none;">
+      <div class="listening-orb-wrap">
+        <span class="listening-ring"></span>
+        <span class="listening-ring"></span>
+        <span class="listening-ring"></span>
+        <button type="button" class="listening-core" id="stop-recording-btn" title="Stop recording" aria-label="Stop recording">
+          <svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
+        </button>
+      </div>
+      <div class="listening-caption">We're listening<span class="record-timer" id="record-timer">&nbsp;0:00</span></div>
+      <p class="helper-text">Tap the button when you're done.</p>
+    </div>
+  </div>
+  <div class="btn-row">
+    <button type="button" class="btn btn-secondary" id="back-to-step-1">Back</button>
+    <button type="button" class="btn btn-primary" id="submit-input">
+      <span class="btn-icon">
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="22" y1="2" x2="11" y2="13"/>
+          <polygon points="22 2 15 22 11 13 2 9 22 2"/>
+        </svg>
+      </span>
+      <span class="btn-spinner spinner" style="display: none;"></span>
+      <span class="btn-label">Send to provider</span>
+    </button>
+  </div>
+</section>
+<!-- Step 3: waiting / response -->
+<section class="step" data-step="3">
+  <div class="card">
+    <h2>Your conversation</h2>
+    <p>Reference number: <span class="interaction-id" id="interaction-id-display"></span></p>
+    <div class="chat-thread" id="chat-thread">
+      <div class="chat-bubble from-patient">
+        <span class="chat-label">You</span>
+        <span id="heard-text"></span>
+      </div>
+    </div>
+    <p class="helper-text" id="waiting-text">Your provider hasn't replied yet.</p>
+    <button type="button" class="btn btn-secondary" id="check-response-btn">
+      <span class="btn-spinner spinner" style="display: none;"></span>
+      <span class="btn-label">Check for reply</span>
+    </button>
+  </div>
+  <div class="card" id="response-card" style="display: none;">
+    <audio id="response-audio" controls></audio>
+  </div>
+  <button type="button" class="btn btn-secondary" id="new-conversation-btn">Start a new conversation</button>
+</section>
+<div class="nav-link"><a href="/provider">Go to provider view</a></div>
+{% endblock %}
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/patient.js') }}"></script>
+{% endblock %}

templates/provider.html ADDED Viewed

	@@ -0,0 +1,108 @@

+{% extends "base.html" %}
+{% block title %}TalkToDoc - Provider{% endblock %}
+{% block body_class %}provider-page{% endblock %}
+{% block shell_class %}provider-shell{% endblock %}
+{% block header %}
+<div class="app-header provider">
+  <div class="brand">
+    <span class="brand-mark">
+      <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+      </svg>
+    </span>
+    <div>
+      <h1>TalkToDoc</h1>
+      <span class="role-tag">Provider</span>
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block content %}
+<div id="status-banner" role="alert" aria-live="assertive"></div>
+<div class="provider-layout">
+<!-- Pending list -->
+<section class="step active provider" data-step="list">
+  <div class="hero provider">
+    <div class="hero-orb-wrap">
+      <div class="hero-orb-glow"></div>
+      <div class="hero-orb">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="20 6 9 17 4 12"/>
+        </svg>
+      </div>
+    </div>
+    <h2><span class="queue-heading-text" id="queue-heading">Messages waiting for you</span></h2>
+    <p>Review what each patient said, then send your reply.</p>
+  </div>
+  <div class="card">
+    <div id="pending-list"></div>
+    <p class="helper-text" id="empty-pending" style="display: none;">Nothing waiting right now.</p>
+  </div>
+</section>
+<!-- Respond to a selected interaction -->
+<section class="step provider" data-step="respond">
+  <div class="detail-placeholder" id="detail-placeholder">
+    <span class="brand-mark detail-placeholder-mark">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+      </svg>
+    </span>
+    <p>Select a message from the list to read it and reply.</p>
+  </div>
+  <div id="detail-content" style="display: none;">
+    <div class="card">
+      <p>Reference number: <span class="interaction-id" id="respond-interaction-id"></span></p>
+      <div class="chat-thread">
+        <div class="chat-bubble from-patient">
+          <span class="chat-label" id="respond-language-label">Patient</span>
+          <span id="respond-translated-text"></span>
+        </div>
+      </div>
+      <div class="nlu-summary" id="respond-nlu-summary"></div>
+    </div>
+    <div class="card">
+      <label for="response-text-input">Your reply (in English)</label>
+      <div class="chip-row" id="quick-reply-chips">
+        <button type="button" class="chip" data-text="Please come in for a check-up so we can look at this properly.">Come in for a check-up</button>
+        <button type="button" class="chip" data-text="Please rest and stay hydrated, drink plenty of water.">Rest and stay hydrated</button>
+        <button type="button" class="chip" data-text="This doesn't sound urgent. Please monitor it and reach out again if it gets worse.">Monitor and follow up</button>
+        <button type="button" class="chip" data-text="I need a bit more detail, please describe your symptoms further.">Need more detail</button>
+      </div>
+      <textarea id="response-text-input" rows="4" placeholder="Type your reply here"></textarea>
+    </div>
+    <div class="btn-row">
+      <button type="button" class="btn btn-secondary" id="back-to-list">Back</button>
+      <button type="button" class="btn btn-provider" id="submit-response">
+        <span class="btn-icon">
+          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12"/>
+          </svg>
+        </span>
+        <span class="btn-spinner spinner" style="display: none;"></span>
+        <span class="btn-label">Send reply</span>
+      </button>
+    </div>
+  </div>
+</section>
+</div>
+<div class="nav-link provider"><a href="/">Go to patient view</a></div>
+{% endblock %}
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/provider.js') }}"></script>
+{% endblock %}