editor.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Edit Speech</title>
</head>
<body>
<div id="editorView" style="display: block;">
<div id="editorHeaderBar">
            <button data-tour="step11" id="menuBtn" >
        ☰ Menu
        </button>
<div id="editorTopControls">
  <div class="titleRow" style="display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;">
    <label for="speechTitle" style="font-weight: bold; color: #aaa;">Speech Title:</label>
    <input type="text" id="speechTitle" placeholder="Enter speech title..." style="width: 300px; max-width: 100%; padding: 6px 10px; border-radius: 6px;" />
<div id="shareWrapper" style="display: flex; flex-direction: column; align-items: flex-start;">
  <div style="display: flex; align-items: center; gap: 8px;">
    <select id="shareStatus" style="padding: 6px 10px; border-radius: 6px; font-size: 14px;">
      <option value="private">Private</option>
      <option value="unlisted">Unlisted</option>
      <option value="public">Public</option>
    </select>
    <button id="copyLinkBtn" style="display: flex; padding: 6px 10px; font-size: 14px; background-color: #eee; border: 1px solid #ccc; border-radius: 6px; cursor: pointer;">
      Copy Link
    </button>
  </div>
</div>
      <button id="memorizeBtn" style="padding: 6px 14px; background-color: #007acc; color: white; border: none; border-radius: 6px;">Memorize</button>
</div>
<!-- NEW: Separate row for formatting and memorization controls -->
<div id="editorModeControls" style="display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 20px 0;">
  <div id="memNav" style="display: none; padding: 10px 20px; background: #fff8dc; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);">
    <div class="editorRow" style="display: flex; gap: 10px; align-items: center;">
      <button id="prevSentenceBtn">⬅️</button>
      <button id="nextSentenceBtn">➡️</button>
      <button id="toggleVisibilityBtn">Hide</button>
      <span id="sentenceCounter"></span>
      <label class="doneToggle" style="display: flex; align-items: center; gap: 5px;">
        <input type="checkbox" id="lightHighlightToggle" />
        Done? <span id="donePercent">(0%)</span>
      </label>
    </div>
  </div>
</div>
</div>
        <div style="position: relative;">
          <div id="textBox" contenteditable="true" data-tour="step4" ></div>
          <div style="position: absolute; bottom: 8px; right: 12px; font-size: 14px; color: #888; background: rgba(255,255,255,0.85); padding: 2px 8px; border-radius: 6px;">
            <span id="wordCount">0</span> words
          </div>
        </div>
        <div id="downloadUploadWrapper">
        <div >
            <button>Download .txt</button>
            <button>Download PDF</button>
            <input type="file" id="uploadFile" accept=".txt">
        </div>
        </div>

        <!-- Separate Last Saved aligned right -->
        <div id="unsavedWarning">
        </div>

        <!-- ✅ TIMER BOX -->
        <div id="timerBox" class="small">
        <div id="timerContentMini">
            <div id="miniTime" >07:30.0</div>
            <div id="miniDot" >⚫</div>
            <button id="expandBtn" >⇲</button>
        </div>

        <div id="timerContentFull" >
            <div id="timerDisplay" >07:30.0</div>
        <div >
        <button id="collapseBtn" >⇱</button>
        </div>

        <div >
        <button onclick="startTimer()">▶️ Start</button>
        <button onclick="stopTimer()">⏹️ Stop</button>
        </div>
            <div id="labelMarkers" >
            <span id="label2">⚫ 2:00</span>
            <span id="label1">⚫ 1:00</span>
            <span id="label30">⚫ 0:30</span>
            <span id="labelOVT">⚫ GRACE</span>
            </div>
        </div>
        </div>
        <!-- ✅ END TIMER BOX -->
<br><br>
        <br></br><br>
        <div>
      </div>
<!-- NOTE: the standalone saveSpeech({...}) function that used to live here
     was removed. script.js now has its own saveSpeech() (no args, reads
     the DOM directly) that's actually wired to the autosave triggers -
     the version that lived in this file was dead/unused and had a
     different, incompatible signature. -->
<script src="common.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
  // 🔹 Detect guest mode (same logic as common.js)
  const urlParams    = new URLSearchParams(window.location.search);
  const guestFromUrl = urlParams.get("guest") === "1";
  const guestMode    = guestFromUrl || localStorage.getItem("speechdeb_guest") === "1";

  // 🔹 In guest mode, hide the share status + Copy Link controls
  if (guestMode) {
    const shareWrapper = document.getElementById("shareWrapper");
    if (shareWrapper) {
      shareWrapper.style.display = "none";
    }
  }

  function tryLoadEditor() {
    const payload = localStorage.getItem("speechdeb_editor_payload");

    if (!payload || typeof initScript !== "function") {
      setTimeout(tryLoadEditor, 100);
      return;
    }

    let speech;
    try {
      speech = JSON.parse(payload);
    } catch (e) {
      alert("Invalid speech data. Redirecting...");
      window.location.href = "index.html";
      return;
    }

    initScript();
  }

  tryLoadEditor();
});
</script>
</body>
</html>