Thingport/extension/store-assets/tile-large.html

<!doctype html>
<!-- Large promotional tile, 1400x560. Rendered by `npm run store-assets` (scripts/store-assets.ts),
     which also injects the extension's real content-script stylesheet (src/content/styles), so the
     panel and button below are the actual UI. The page behind them is a neutral placeholder rather
     than a live provider screenshot: no third-party models, trademarks or ads in a store image. -->
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="common.css" />
    <style>
      html,
      body {
        width: 1400px;
        height: 560px;
      }
      .copy {
        position: absolute;
        left: 72px;
        top: 64px;
        width: 560px;
      }
      .logo {
        height: 56px;
        display: block;
      }
      h1 {
        margin-top: 48px;
        font-size: 56px;
        line-height: 1.06;
      }
      p {
        margin-top: 20px;
        font-size: 23px;
        line-height: 1.4;
        font-weight: 500;
      }
      .pills {
        position: absolute;
        left: 72px;
        bottom: 60px;
        gap: 12px;
      }
      .pill {
        font-size: 19px;
        padding: 7px 15px;
      }
      .pill.ghost {
        padding: 5px 13px;
      }

      /* A browser window with a stand-in model page. */
      .window {
        position: absolute;
        left: 700px;
        top: 52px;
        width: 640px;
        height: 456px;
        overflow: hidden;
        border-radius: 12px;
        background: #f6f7f9;
        box-shadow:
          0 30px 80px rgba(0, 0, 0, 0.45),
          0 0 0 8px rgba(0, 184, 0, 0.08);
      }
      .bar {
        height: 40px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 14px;
        background: #e7e9ee;
      }
      .dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: #c9ccd4;
      }
      .address {
        margin-left: 12px;
        flex: 1;
        height: 24px;
        border-radius: 12px;
        background: #fff;
        font:
          500 12px/24px system-ui,
          sans-serif;
        color: #7b8190;
        padding: 0 12px;
      }
      .page {
        position: relative;
        height: 416px;
        padding: 22px;
        display: grid;
        grid-template-columns: 330px 1fr;
        gap: 22px;
      }
      .photo {
        height: 250px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, #dfe3ea, #c9cfd9);
      }
      .photo img {
        width: 120px;
        opacity: 0.35;
        filter: grayscale(1);
      }
      .thumbs {
        margin-top: 12px;
        display: flex;
        gap: 10px;
      }
      .thumbs span {
        width: 70px;
        height: 50px;
        border-radius: 6px;
        background: #dde1e8;
      }
      .line {
        height: 14px;
        border-radius: 7px;
        background: #dde1e8;
        margin-bottom: 12px;
      }
      .line.title {
        height: 22px;
        width: 90%;
        background: #cfd4dd;
        margin-bottom: 18px;
      }
      .line.short {
        width: 60%;
      }
      .btn {
        height: 38px;
        border-radius: 8px;
        background: #cfd4dd;
        margin-top: 22px;
      }

      /* The real panel/button, placed inside the window instead of fixed to the viewport. */
      .window .tg-panel {
        position: absolute;
        right: 16px;
        bottom: 82px;
      }
      .window .tg-fab {
        position: absolute;
        right: 16px;
        bottom: 14px;
      }
    </style>
  </head>
  <body>
    <div class="grid"></div>
    <div class="copy">
      <img class="logo" src="../../frontend/src/assets/logos/thingport-lockup-compact-on-dark.svg" alt="" />
      <h1>Save <em>3D models</em> to your own library in one click</h1>
      <p>Import from the page you're on, straight into your self-hosted Thingport.</p>
    </div>
    <div class="pills">
      <span class="pill">MakerWorld</span><span class="pill alt">Printables</span
      ><span class="pill ghost">Thingiverse</span>
    </div>

    <div class="window tg-scope">
      <div class="bar">
        <span class="dot"></span><span class="dot"></span><span class="dot"></span
        ><span class="address">3D model page</span>
      </div>
      <div class="page">
        <div>
          <div class="photo"><img src="../../frontend/src/assets/logos/thingport-icon-dark.svg" alt="" /></div>
          <div class="thumbs"><span></span><span></span><span></span><span></span></div>
        </div>
        <div>
          <div class="line title"></div>
          <div class="line"></div>
          <div class="line short"></div>
          <div class="btn"></div>
        </div>
      </div>
      <div class="tg-panel">
        <button class="tg-close" type="button">×</button>
        <div class="tg-panel__content">
          <div class="tg-title">Import "Cable organizer clip"</div>
          <label class="tg-label">Add to collection (optional)</label>
          <select class="tg-select">
            <option>Workshop organizers</option>
          </select>
          <button class="tg-btn" type="button">Import</button>
        </div>
      </div>
      <button class="tg-fab" type="button"><img src="../src/assets/thingport-icon-color.svg" alt="" /></button>
    </div>
  </body>
</html>