skills/hype-design-production/assets/canvas.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Hype Record Poster</title>
  <style>
    :root {
      --red: #cc7f30;
      --black: #0a2146;
      --paper: #fff;
      --poster-w: 1080px;
      --poster-h: 1440px;
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      min-height: 100%;
      background: var(--paper);
      font-family: Arial, Helvetica, sans-serif;
    }

    body {
      display: grid;
      place-items: center;
      padding: 0;
    }

    .poster {
      position: relative;
      width: var(--poster-w);
      height: var(--poster-h);
      overflow: hidden;
      color: var(--black);
      background: var(--paper);
      border: 4px solid var(--red);
    }

    .box {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      text-align: center;
    }

    .fit {
      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
      line-height: .88;
      text-transform: uppercase;
    }

    .display {
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-weight: 900;
      font-stretch: condensed;
    }

    .logo-box {
      position: absolute;
      top: 58px;
      left: 48px;
      width: 184px;
      height: 154px;
      display: none;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--paper);
    }

    .brand-logo {
      display: none;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* Permanent print correction for near-white pixels in the Hype logo file. */
    .logo-hype {
      background: #fff;
      filter: contrast(1.16) brightness(1.06) saturate(1.04);
    }

    .poster[data-brand="ctfs"] .logo-box,
    .poster[data-brand="stc"] .logo-box,
    .poster[data-brand="hype"] .logo-box {
      display: flex;
    }

    .poster[data-brand="ctfs"] .logo-ctfs,
    .poster[data-brand="stc"] .logo-stc,
    .poster[data-brand="hype"] .logo-hype {
      display: block;
    }

    .poster[data-brand="ctfs"] .title-box,
    .poster[data-brand="stc"] .title-box,
    .poster[data-brand="hype"] .title-box {
      left: 258px;
      width: 770px;
    }

    .title-box {
      top: 62px;
      left: 44px;
      width: 984px;
      height: 165px;
    }

    .title {
      font-size: 124px;
      letter-spacing: 2px;
    }

    .subtitle-row {
      position: absolute;
      top: 244px;
      left: 56px;
      width: 960px;
      height: 58px;
      display: grid;
      grid-template-columns: minmax(80px, 1fr) minmax(360px, auto) minmax(80px, 1fr);
      align-items: center;
      gap: 40px;
    }

    .rule {
      height: 6px;
      background: var(--red);
    }

    .subtitle-box {
      position: relative;
      width: 100%;
      height: 58px;
    }

    .subtitle {
      color: var(--red);
      font-size: 47px;
      font-weight: 800;
      letter-spacing: 13px;
    }

    .value-box {
      top: 350px;
      left: 70px;
      width: 932px;
      height: 645px;
    }

    .value {
      color: var(--red);
      font-size: 650px;
      letter-spacing: -9px;
      line-height: .78;
    }

    .winner-row {
      position: absolute;
      top: 1028px;
      left: 72px;
      width: 928px;
      height: 52px;
      display: grid;
      grid-template-columns: 1fr 68px 1fr;
      align-items: center;
      gap: 30px;
    }

    .star {
      color: var(--red);
      font-size: 62px;
      line-height: 1;
      text-align: center;
      transform: translateY(-2px);
    }

    .name-box {
      top: 1090px;
      left: 82px;
      width: 908px;
      height: 150px;
    }

    .name {
      font-size: 118px;
      letter-spacing: 4px;
    }

    .date-row {
      position: absolute;
      top: 1266px;
      left: 78px;
      width: 916px;
      height: 58px;
      display: grid;
      grid-template-columns: minmax(70px, 1fr) minmax(480px, auto) minmax(70px, 1fr);
      align-items: center;
      gap: 34px;
    }

    .date-box {
      position: relative;
      width: 100%;
      height: 58px;
    }

    .date {
      font-size: 43px;
      font-weight: 900;
      letter-spacing: 4px;
    }

    @media print {
      @page { size: 8.5in 11.36in; margin: 0; }
      html, body { width: 100%; height: 100%; background: white; }
      body { padding: 0; }
      .poster { transform: scale(.75556); transform-origin: top left; }
    }
  </style>
</head>
<body>
  <!-- data-brand supports: ctfs, stc, hype, or empty for no logo. -->
  <main class="poster" data-brand="ctfs" aria-label="Hype record poster">
    <section class="logo-box" aria-label="Organization logo">
      <img class="brand-logo logo-ctfs" src="ctfs.png" alt="Canadian Tire logo">
      <img class="brand-logo logo-stc" src="stc.jpg" alt="Save the Children logo">
      <img class="brand-logo logo-hype" src="hype.png" alt="Hype Events logo">
    </section>

    <section class="box title-box">
      <div class="fit display title" data-fit data-min="66" data-max="124">Most CTFS Apps</div>
    </section>

    <section class="subtitle-row" aria-label="Record period">
      <span class="rule" aria-hidden="true"></span>
      <div class="box subtitle-box">
        <div class="fit subtitle" data-fit data-min="27" data-max="47">In a Week</div>
      </div>
      <span class="rule" aria-hidden="true"></span>
    </section>

    <section class="box value-box">
      <div class="fit display value" data-fit data-min="190" data-max="650">25</div>
    </section>

    <section class="winner-row" aria-hidden="true">
      <span class="rule"></span>
      <span class="star">★</span>
      <span class="rule"></span>
    </section>

    <section class="box name-box">
      <div class="fit display name" data-fit data-min="52" data-max="118">Victor</div>
    </section>

    <section class="date-row" aria-label="Record date">
      <span class="rule" aria-hidden="true"></span>
      <div class="box date-box">
        <div class="fit date" data-fit data-min="24" data-max="43">Jun 16th - 25th</div>
      </div>
      <span class="rule" aria-hidden="true"></span>
    </section>
  </main>

  <script>
    function fitText(element) {
      const box = element.parentElement;
      const min = Number(element.dataset.min);
      let size = Number(element.dataset.max);

      element.style.fontSize = `${size}px`;
      while (size > min &&
        (element.scrollWidth > box.clientWidth || element.scrollHeight > box.clientHeight)) {
        size -= 1;
        element.style.fontSize = `${size}px`;
      }
    }

    function fitAll() {
      document.querySelectorAll('[data-fit]').forEach(fitText);
    }

    document.fonts.ready.then(fitAll);
    window.addEventListener('resize', fitAll);
  </script>
</body>
</html>