source: Klonkt/src/views/pages/download.ejs@ 17197a9

<%
  var _ready_h1     = t('dl.ready_title');
  var _ready_sub    = t('dl.ready_sub');
  var _manual       = t('dl.manual');
  var _capture_sub  = t('dl.capture_sub');
  var _email_ph     = t('dl.email_ph');
  var _download_btn = t('dl.download_btn');
%>
<%
  var tr = (typeof dlTrack !== 'undefined') ? dlTrack : {};
  var st = (typeof dlState !== 'undefined') ? dlState : 'form';
  var fileUrl = siteUrlBase + '/download/' + tr.id + '/bestand';
%>
<section class="dl">
  <div class="dl-card">
    <div class="dl-head">
      <% if (tr.cover_url) { %><span class="dl-cover" style="background-image:url('<%= tr.cover_url %>')"></span><% } else { %><span class="dl-cover dl-cover-empty">♪</span><% } %>
      <div>
        <div class="dl-title"><%= tr.title %></div>
        <% if (tr.artist) { %><div class="dl-artist"><%= tr.artist %></div><% } %>
      </div>
    </div>

    <% if (st === 'ready') { %>
      <h1 class="dl-h1"><%= _ready_h1 %></h1>
      <p class="dl-sub"><%= _ready_sub %></p>
      <p><a class="dl-go" href="<%= fileUrl %>"><%= _manual %></a></p>
      <script>
        // Auto-start de download (zelfde-origin attachment-link).
        setTimeout(function(){ try { window.location.href = <%- JSON.stringify(fileUrl) %>; } catch(e){} }, 600);
      </script>
    <% } else { %>
      <h1 class="dl-h1"><%= _download_btn %> <%= tr.title %></h1>
      <p class="dl-sub"><%= _capture_sub %></p>
      <% if (typeof dlError !== 'undefined' && dlError) { %><p class="dl-err"><%= dlError %></p><% } %>
      <form method="POST" action="<%= siteUrlBase %>/download/<%= tr.id %>" class="dl-form">
        <input type="email" name="email" required placeholder="<%= _email_ph %>" value="<%= (typeof dlPrefill!=='undefined')?dlPrefill:'' %>" autocomplete="email">
        <button type="submit" class="dl-go">⬇ <%= _download_btn %></button>
      </form>
    <% } %>
  </div>
</section>

<style>
  .dl { max-width: 520px; margin: 0 auto; padding: 48px 18px; }
  .dl-card { border: 1px solid rgba(128,128,128,.2); border-radius: 18px; padding: 28px; }
  .dl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .dl-cover { width: 56px; height: 56px; border-radius: 10px; background-size: cover; background-position: center; display: grid; place-items: center; flex: 0 0 auto; }
  .dl-cover-empty { background: var(--accent,#6b8f71); color: #fff; opacity: .85; }
  .dl-title { font-weight: 700; font-size: 17px; }
  .dl-artist { opacity: .65; font-size: 13px; }
  .dl-h1 { font-size: clamp(22px,4.5vw,30px); margin: 0 0 8px; }
  .dl-sub { opacity: .85; line-height: 1.55; margin: 0 0 18px; }
  .dl-err { color: #c43c3c; margin: 0 0 12px; }
  .dl-form { display: flex; gap: 10px; flex-wrap: wrap; }
  .dl-form input { flex: 1 1 200px; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(128,128,128,.4); background: transparent; color: inherit; font-size: 15px; }
  .dl-go { padding: 12px 20px; border-radius: 10px; border: none; background: var(--accent,#6b8f71); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; display: inline-block; }
</style>