tamabox/templates/question/success.html

{{template "base/header" .}}
<div class="uk-card uk-card-default uk-card-body">
  <div class="uk-text-center uk-margin-bottom">
    <span uk-icon="icon: check; ratio: 2" class="uk-text-success"></span>
    <h3 class="uk-margin-remove">{{t .LangCode "success.title"}}</h3>
  </div>

  <p class="uk-text-small uk-text-muted">{{t .LangCode "success.yourQuestion"}}</p>
  <div class="md-body uk-text-break">{{MarkdownFormat .Question.Content}}</div>

  {{ if .HasReceiveEmail }}
  <div class="uk-alert-success" uk-alert>
    <p>{{t .LangCode "success.emailSent"}}</p>
  </div>
  {{ else }}
  <div class="uk-alert-danger" uk-alert>
    <p>{{t .LangCode "success.saveLink" | safe}}</p>
  </div>
  {{ end }}

  <div class="uk-margin">
    <label class="uk-form-label uk-text-small">{{t .LangCode "success.privateLink"}}</label>
    <div class="uk-flex uk-flex-middle">
      <input id="private-url-input" class="uk-input uk-form-small uk-width-expand" type="text" value="{{.PrivateAbsURL}}" readonly>
      <button id="copy-btn" class="uk-button uk-button-primary uk-button-small uk-margin-small-left uk-flex-none" type="button">{{t .LangCode "success.copy"}}</button>
    </div>
    <p class="uk-text-small uk-text-muted">{{t .LangCode "success.token" .Question.Token}}</p>
  </div>

  <!-- 两个按钮等宽：用 flex 均分而不是靠 margin，文字长短不一（各语言差异更大）时也能对齐 -->
  <div class="uk-flex uk-flex-center uk-flex-wrap uk-margin-top" style="gap: 8px;">
    <a class="uk-button uk-button-default uk-button-small" style="flex: 1 1 160px; max-width: 220px;" href="{{.PrivateURL}}">{{t .LangCode "success.viewQuestion"}}</a>
    <a class="uk-button uk-button-default uk-button-small" style="flex: 1 1 160px; max-width: 220px;" href="/_/{{.PageUser.Domain}}">{{t .LangCode "success.backToBox" .PageUser.Name}}</a>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // 把这提问记到本机，方便以后回来查回答。
  //
  // 动机：不填邮箱时，唯一能追踪这条提问的东西就是上面那条链接。
  // 关掉页面、链接冲掉了，就永久失联 —— 箱主认真答了，提问者永远不知道。
  // 记录只放在这台设备的 localStorage，不上传、不建访客档案；
  // 换设备或清浏览器数据会丢，页面上有说明。
  try {
    var KEY = 'tb_ask_history_v1';
    var list = JSON.parse(localStorage.getItem(KEY) || '[]');
    if (!Array.isArray(list)) list = [];
    var entry = {
      d: '{{ .PageUser.Domain }}',
      id: {{ .Question.ID }},
      t: '{{ .Question.Token }}',
      ts: Date.now()
    };
    // 同一条提问可能被重复打开成功页：按 domain+id 去重后置顶，最多留 30 条。
    list = list.filter(function (x) {
      return !(x && x.d === entry.d && x.id === entry.id);
    });
    list.unshift(entry);
    localStorage.setItem(KEY, JSON.stringify(list.slice(0, 30)));
  } catch (e) {
    // localStorage 被禁用（隐私模式 / 策略）时静默跳过：这条路本来就只是锦上添花，
    // 不能因为它让「复制链接」也跟着失败。
  }

  var input = document.getElementById('private-url-input');
  var btn = document.getElementById('copy-btn');
  if (!input || !btn) return;
  btn.addEventListener('click', function () {
    input.select();
    input.setSelectionRange(0, 99999);
    var ok = false;
    try { ok = document.execCommand('copy'); } catch (e) {}
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(input.value).then(function () { ok = true; }, function () {});
    }
    btn.textContent = ok ? '{{t .LangCode "success.copied"}}' : '{{t .LangCode "success.copyFailed"}}';
    setTimeout(function () { btn.textContent = '{{t .LangCode "success.copy"}}'; }, 2000);
  });
});
</script>
{{template "base/footer" .}}