ytdl-web/app/views/index.html

<h1 class="text-center">YTDL Web</h1>
<p class="text-center mb-5">
  Download videos from over a thousand websites with the help of
  <a href="https://github.com/yt-dlp/yt-dlp">yt-dlp</a>, a fork of youtube-dl
  with more features and fixes.
  <br />
  View a complete list of supported websites
  <a href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md"
    >here</a
  >.
</p>

<form
  hx-get="{{.BasePath}}/download"
  hx-trigger="submit"
  hx-target="#main-content"
  hx-swap="innerHTML"
>
  <div class="mb-3">
    <label for="url" class="form-label visually-hidden">Url</label>
    <div class="input-group">
      <input
        type="url"
        name="url"
        id="url"
        class="form-control"
        required
        placeholder="Enter url here then click download"
      />
      {{if .IsSecure}}
      <button
        id="paste-button"
        class="btn btn-outline-secondary"
        type="button"
        title="Paste"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          style="width: 1.5rem; height: 1.5rem"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184"
          />
        </svg>
      </button>
      {{end}}
    </div>
  </div>
  <div class="d-grid">
    <button type="submit" class="btn btn-primary">
      Download
      <div
        class="spinner-border spinner-border-sm htmx-indicator ms-1"
        role="status"
      >
        <span class="visually-hidden">Loading...</span>
      </div>
    </button>
  </div>
</form>

{{if .Error}}
<div class="alert alert-danger mt-4" role="alert">
  <span>{{.Error.Message}}</span>

  {{if .Error.RetryUrl}}
  <button
    class="btn btn-link btn-sm pt-0 lh-base text-decoration-none"
    hx-get="/download"
    hx-trigger="click"
    hx-target="#main-content"
    hx-swap="innerHTML"
    hx-vals='{"url": "{{.Error.RetryUrl}}"}'
  >
    <span class="text-decoration-underline">Try Again</span>
    <div
      class="spinner-border spinner-border-sm htmx-indicator ms-1"
      role="status"
    >
      <span class="visually-hidden">Loading...</span>
    </div>
  </button>
  {{end}}
</div>
{{end}}