Remove iframe (blocked by oTree headers), add quick-start instructions card

templates/pages/session.html

@@ -40,20 +40,18 @@
   }
   .url-bar .btn { white-space: nowrap; }
 
-  .iframe-wrap {
-    margin-top: 1.5rem;
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    overflow: hidden;
-    background: #fff;
-  }
-  .iframe-wrap iframe {
-    width: 100%;
-    height: calc(100vh - 260px);
-    min-height: 500px;
-    border: none;
-    display: block;
+  .info-card {
+    margin-top: .25rem;
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    color: var(--text-dim);
+    font-size: .85rem;
+    line-height: 1.5;
   }
+  .info-card .icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .1rem; }
+  .info-card ol { padding-left: 1.1rem; }
+  .info-card li { margin-bottom: .3rem; }
   .status-dot {
     display: inline-block;
     width: 8px; height: 8px;
@@ -73,8 +71,8 @@
       <span class="status-dot"></span> oTree Room Link
     </h2>
     <p style="color:var(--text-dim); font-size:.84rem;">
-      Click <strong>Open</strong> to join in a new tab, or use the embedded
-      view below.
+      Click <strong>Open</strong> to join the experiment in a new tab, or
+      copy the link to paste into a browser.
     </p>
     <div class="url-bar">
       <code id="otree-url">{{ otree_url }}</code>
@@ -82,17 +80,19 @@
       <a class="btn btn-primary" href="{{ otree_url }}" target="_blank" rel="noopener">Open</a>
     </div>
   </div>
-</div>
 
-<!-- Embedded oTree view -->
-<div class="iframe-wrap">
-  <iframe
-    id="otree-frame"
-    src="{{ otree_url }}"
-    loading="lazy"
-    sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
-    title="oTree session"
-  ></iframe>
+  <!-- Quick-start instructions -->
+  <div class="card session-link-card">
+    <h2 style="font-size:1rem; margin-bottom:.5rem;">Quick Start</h2>
+    <div class="info-card">
+      <span class="icon">📋</span>
+      <ol>
+        <li>Click <strong>Open</strong> above — the oTree waiting room opens in a new tab.</li>
+        <li>The participant is automatically assigned when the session admin starts the experiment.</li>
+        <li>Repeat on each lab machine that needs to join.</li>
+      </ol>
+    </div>
+  </div>
 </div>
 {% endblock %}