apxtri/mainapp/mydev/index.html

<!DOCTYPE html>
<html lang="en" data-theme="webapp-dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title data-i18n="app.title">My Dev Setup - apxtri</title>
    <link rel="manifest" href="manifest.json" />
    <link rel="icon" href="/cdn/dev/static/img/logo/logoX.svg" type="image/svg+xml" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="My Dev Setup" />
    <meta name="xmode" content="dev" />
    <meta name="xapp" content="mainapp" />
    <meta name="xtribe" content="dev" />
    <script src="/cdn/dev/lib/axios/dist/axios.min.js"></script>
    <script src="/cdn/dev/lib/openpgp/dist/openpgp.min.js"></script>
    <script src="/cdn/dev/lib/dayjs/dayjs.min.js"></script>
    <script src="/cdn/dev/lib/apxtri/draft.js"></script>
    <script src="/cdn/dev/lib/apxtri/auth.js"></script>
    <script src="/cdn/dev/lib/apxtri/localdb.js"></script>
    <link href="/cdn/dev/css/base.css" rel="stylesheet" /><link href="/cdn/dev/css/mydev.css" rel="stylesheet" />
  </head>

  <body class="min-h-screen bg-base-200">
    <div id="loading-overlay" class="fixed inset-0 bg-base-100 z-50 flex items-center justify-center transition-opacity duration-500">
      <span class="loading loading-spinner loading-lg text-primary"></span>
    </div>

    <div id="menu-container">
      <div class="max-w-[600px] mx-auto w-full px-4 py-4" id="app-content">
        <div id="msginfo" class="mb-3 text-sm hidden"></div>

        <!-- SCREEN: home -->
        <div id="screen-home" class="screen">
          <div class="card bg-base-100 shadow-xl mb-4">
            <div class="card-body">
              <h2 class="card-title mb-1" data-i18n="screen.home.title">Interactive setup guide</h2>
              <p class="text-sm opacity-60 mb-1" data-i18n="screen.home.subtitle">Set up a new apxtri instance step by step</p>
              <p class="text-xs opacity-50 mb-4" data-i18n="screen.home.desc">Answer a few questions about your target machine and this wizard generates a complete, copy-paste ready install guide - so nothing is forgotten.</p>
              <div class="flex justify-end">
                <button class="btn btn-primary" data-action="start" data-i18n="app.start">Start</button>
              </div>
            </div>
          </div>
        </div>

        <!-- SCREEN: scenario -->
        <div id="screen-scenario" class="screen hidden">
          <div class="flex items-center justify-between mb-1">
            <h2 class="text-lg font-bold" data-i18n="screen.scenario.title">What do you want to set up?</h2>
            <button class="btn btn-xs btn-ghost" data-action="back" data-i18n="app.back">Back</button>
          </div>
          <p class="text-sm opacity-60 mb-3" data-i18n="screen.scenario.subtitle">Choose the scenario that matches your target machine.</p>
          <div class="space-y-3">
            <button class="card bg-base-100 shadow-sm w-full text-left hover:shadow-md transition" data-action="scenario-dev">
              <div class="card-body p-4">
                <h3 class="font-bold text-primary" data-i18n="scenario.dev.title">Developer machine</h3>
                <p class="text-xs opacity-70 mt-1" data-i18n="scenario.dev.desc">Nation `zero` (dev network), LXC container, behind a fixed-IP frp proxy. Each developer gets their own town, e.g. dev1.zero.smatchit.io.</p>
              </div>
            </button>
            <button class="card bg-base-100 shadow-sm w-full text-left hover:shadow-md transition" data-action="scenario-prod">
              <div class="card-body p-4">
                <h3 class="font-bold text-secondary" data-i18n="scenario.prod.title">Production machine</h3>
                <p class="text-xs opacity-70 mt-1" data-i18n="scenario.prod.desc">A town in a production nation. Stricter setup: signing policy enforcement, backups, reverse-proxy IPs.</p>
              </div>
            </button>
          </div>
        </div>

        <!-- SCREEN: inputs -->
        <div id="screen-inputs" class="screen hidden">
          <div class="flex items-center justify-between mb-1">
            <h2 class="text-lg font-bold" data-i18n="screen.inputs.title">Setup inputs</h2>
            <button class="btn btn-xs btn-ghost" data-action="back" data-i18n="app.back">Back</button>
          </div>
          <p class="text-sm opacity-60 mb-3" data-i18n="screen.inputs.subtitle">Fill in the values below. Every field has a short explanation.</p>
          <div id="inputs-form"></div>
        </div>

        <!-- SCREEN: guide -->
        <div id="screen-guide" class="screen hidden">
          <div class="flex items-center justify-between mb-1">
            <h2 class="text-lg font-bold" data-i18n="screen.guide.title">Your setup guide</h2>
            <button class="btn btn-xs btn-ghost" data-action="restart" data-i18n="guide.restart">Start over</button>
          </div>
          <p class="text-sm opacity-60 mb-3" data-i18n="screen.guide.subtitle">Copy each step or download the whole guide as Markdown.</p>
          <div id="guide-summary" class="flex flex-wrap gap-1 mb-3"></div>
          <div class="flex gap-2 mb-3">
            <button class="btn btn-sm btn-primary flex-1" data-action="copy-all" data-i18n="guide.copy_all">Copy all</button>
            <button class="btn btn-sm btn-outline flex-1" data-action="download-md" data-i18n="guide.download_md">Download .md</button>
          </div>
          <div id="guide-steps" class="space-y-3"></div>
        </div>

      </div>
    </div>

    <div id="draft-debug" class="hidden fixed bottom-2 right-2 z-50 bg-neutral text-neutral-content text-xs px-2 py-1 rounded font-mono opacity-70">
      <div id="draft-screen">screen: home</div>
      <div id="draft-action" class="hidden"></div>
    </div>

    <!-- INFO MODAL: field explanations -->
    <dialog id="info-modal" class="modal">
      <div class="modal-box bg-base-100 max-w-md">
        <h3 class="font-bold text-sm mb-2" id="info-modal-title">Info</h3>
        <div id="info-modal-body" class="text-sm opacity-80 space-y-2"></div>
        <div class="modal-action">
          <button class="btn btn-ghost btn-sm" data-action="info-close" data-i18n="info.close">Close</button>
        </div>
      </div>
      <form method="dialog" class="modal-backdrop"><button>close</button></form>
    </dialog>

    <script src="/cdn/dev/lib/apxtri/menu.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>