analytics/lib/plausible_web/templates/site/new.html.heex

<div class="w-full max-w-3xl mt-4 mx-auto flex">
  <%= form_for @changeset, "/sites", [class: "max-w-lg w-full mx-auto bg-white dark:bg-gray-800 shadow-lg rounded px-8 pt-6 pb-8 mb-4 mt-8"], fn f -> %>
    <h2 class="text-xl font-black dark:text-gray-100 mb-4">Your website details</h2>

    <PlausibleWeb.Components.Billing.Notice.limit_exceeded
      :if={@site_limit_exceeded?}
      current_user={@current_user}
      billable_user={@current_user}
      limit={@site_limit}
      resource="sites"
    />

    <%= if is_nil(@current_user.trial_expiry_date) do %>
      <div class="rounded-md bg-blue-50 dark:bg-transparent dark:border border-blue-200 p-4">
        <div class="flex">
          <div class="flex-shrink-0">
            <svg
              class="h-5 w-5 text-blue-500 dark:text-blue-300"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20"
              fill="currentColor"
              aria-hidden="true"
            >
              <path
                fill-rule="evenodd"
                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
          <div class="ml-3">
            <div class="text-sm text-blue-700 dark:text-blue-300">
              <p>
                When you create your first site, your account will enter a 30 day free trial.
              </p>
            </div>
          </div>
        </div>
      </div>
    <% end %>

    <div class="my-6">
      <%= label(f, :domain, class: "block text-sm font-medium text-gray-700 dark:text-gray-300") %>
      <p class="text-gray-500 dark:text-gray-400 text-xs mt-1">
        Just the naked domain or subdomain without 'www'
      </p>
      <div class="mt-2 flex rounded-md shadow-sm">
        <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-500 bg-gray-50 dark:bg-gray-850 text-gray-500 dark:text-gray-400 sm:text-sm">
          https://
        </span>
        <%= text_input(f, :domain,
          class:
            "focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-800 flex-1 block w-full px-3 py-2 rounded-none rounded-r-md sm:text-sm border-gray-300 dark:border-gray-500 dark:bg-gray-900 dark:text-gray-300",
          placeholder: "example.com",
          disabled: @site_limit_exceeded?
        ) %>
      </div>
      <%= error_tag(f, :domain) %>
    </div>
    <div class="my-6">
      <%= label(f, :timezone, "Reporting Timezone",
        class: "block text-sm font-medium text-gray-700 dark:text-gray-300"
      ) %>
      <p class="text-gray-500 dark:text-gray-400 text-xs mt-1">
        To make sure we agree on what 'today' means
      </p>

      <div class="inline-block relative w-full">
        <%= select(f, :timezone, Plausible.Timezones.options(),
          id: "tz-select",
          selected: "Etc/Greenwich",
          class:
            "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 dark:border-gray-500 dark:bg-gray-900 dark:text-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md",
          disabled: @site_limit_exceeded?
        ) %>
      </div>
    </div>
    <script>
      var option;

      if (typeof Intl !== "undefined") {
        var timezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone
        option = document.querySelector('#tz-select option[value="' + timezoneName + '"]')
      }

      if (!option) {
        var offset = (new Date()).getTimezoneOffset()
        option = document.querySelector('#tz-select option[offset="' + offset + '"]')
      }

      if (option) { option.selected = "selected"}
    </script>

    <%= submit("Add snippet →",
      class: "button mt-4 w-full disabled:cursor-not-allowed",
      disabled: @site_limit_exceeded?
    ) %>
  <% end %>

  <%= if @first_site? do %>
    <div class="pt-12 pl-8 hidden md:block">
      <%= render(PlausibleWeb.AuthView, "_onboarding_steps.html", current_step: 2) %>
    </div>
  <% end %>
</div>