source: Klonkt/src/views/pages/epk.ejs@ 16ce669

<%
  // Duur mm:ss
  function fmtDur(s){ s = parseInt(s,10)||0; var m=Math.floor(s/60), x=s%60; return m+':'+String(x).padStart(2,'0'); }
  var _accent = (site && site.accent) ? site.accent : '';
  var _photo = (site && site.profile_photo) ? site.profile_photo : '';
  var _isMail = epkContact && epkContact.indexOf('@') !== -1 && epkContact.indexOf(' ') === -1;
  var _isUrl = epkContact && /^https?:\/\//i.test(epkContact);
%>
<section class="epk" <%= _accent ? ('style="--epk-accent:' + _accent + '"') : '' %>>
  <header class="epk-hero">
    <% if (_photo) { %><div class="epk-photo"><img src="<%= _photo %>" alt="<%= site.title %>"></div><% } %>
    <div class="epk-hero-text">
      <div class="epk-kicker">Perskit</div>
      <h1 class="epk-title"><%= site.title %></h1>
      <% if (epkBio) { %><p class="epk-bio"><%= epkBio %></p><% } %>
      <div class="epk-actions">
        <% if (_isMail) { %>
          <a class="epk-btn epk-btn-primary" href="mailto:<%= epkContact %>">✉ Contact / boeking</a>
        <% } else if (_isUrl) { %>
          <a class="epk-btn epk-btn-primary" href="<%= epkContact %>" target="_blank" rel="noopener">Contact / boeking</a>
        <% } %>
        <a class="epk-btn" href="<%= siteUrlBase %>/">Bekijk de site →</a>
        <% if (_photo) { %><a class="epk-btn" href="<%= _photo %>" download>⬇ Persfoto</a><% } %>
      </div>
    </div>
  </header>

  <% if (epkTracks && epkTracks.length) { %>
    <div class="epk-block">
      <h2 class="epk-h2">Meest beluisterd</h2>
      <ul class="epk-tracks">
        <% epkTracks.forEach(function(t, i){ %>
          <li class="epk-track">
            <span class="epk-rank"><%= i + 1 %></span>
            <% if (t.cover_url) { %><span class="epk-cover" style="background-image:url('<%= t.cover_url %>')"></span><% } else { %><span class="epk-cover epk-cover-empty">♪</span><% } %>
            <span class="epk-track-meta">
              <span class="epk-track-title"><%= t.title %></span>
              <% if (t.artist) { %><span class="epk-track-artist"><%= t.artist %></span><% } %>
            </span>
            <% if (t.duration) { %><span class="epk-track-dur"><%= fmtDur(t.duration) %></span><% } %>
          </li>
        <% }); %>
      </ul>
    </div>
  <% } %>

  <% if (epkPosts && epkPosts.length) { %>
    <div class="epk-block">
      <h2 class="epk-h2">Recent</h2>
      <ul class="epk-posts">
        <% epkPosts.forEach(function(p){ %>
          <li><a href="<%= siteUrlBase %>/<%= p.slug %>"><%= p.title %></a></li>
        <% }); %>
      </ul>
    </div>
  <% } %>

  <footer class="epk-foot">
    <% if (_isMail) { %><a href="mailto:<%= epkContact %>"><%= epkContact %></a> · <% } %>
    <a href="<%= siteUrlBase %>/"><%= site.title %></a>
  </footer>
</section>

<style>
  .epk { max-width: 860px; margin: 0 auto; padding: 28px 18px 64px; --epk-accent: var(--accent, #6b8f71); }
  .epk-hero { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-bottom: 40px; }
  .epk-photo { flex: 0 0 auto; }
  .epk-photo img { width: 190px; height: 190px; object-fit: cover; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
  .epk-hero-text { flex: 1 1 280px; min-width: 240px; }
  .epk-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; color: var(--epk-accent); margin-bottom: 6px; }
  .epk-title { font-size: clamp(30px, 6vw, 52px); line-height: 1.05; margin: 0 0 12px; }
  .epk-bio { font-size: 16px; line-height: 1.6; opacity: .9; margin: 0 0 18px; max-width: 52ch; }
  .epk-actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .epk-btn { display: inline-block; padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(128,128,128,.35); text-decoration: none; font-size: 13.5px; font-weight: 600; color: inherit; }
  .epk-btn-primary { background: var(--epk-accent); border-color: var(--epk-accent); color: #fff; }
  .epk-block { margin: 34px 0; }
  .epk-h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; opacity: .6; margin: 0 0 14px; }
  .epk-tracks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .epk-track { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid rgba(128,128,128,.18); border-radius: 12px; }
  .epk-rank { flex: 0 0 auto; width: 20px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; opacity: .45; }
  .epk-cover { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 8px; background-size: cover; background-position: center; display: grid; place-items: center; }
  .epk-cover-empty { background: var(--epk-accent); color: #fff; opacity: .85; }
  .epk-track-meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
  .epk-track-title { font-weight: 600; }
  .epk-track-artist { font-size: 12.5px; opacity: .65; }
  .epk-track-dur { font-variant-numeric: tabular-nums; opacity: .6; font-size: 13px; }
  .epk-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .epk-posts a { text-decoration: none; color: inherit; border-bottom: 1px solid transparent; }
  .epk-posts a:hover { border-bottom-color: var(--epk-accent); }
  .epk-foot { margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(128,128,128,.2); font-size: 13px; opacity: .7; }
  .epk-foot a { color: inherit; }
</style>