Spaces:

superdatas
/

thirdparty

Running

App Files Files Community

miguelgargallo commited on Dec 12, 2025

Commit

339f962

verified ·

1 Parent(s): f24261b

Update index.html

Browse files

Files changed (1) hide show

index.html +476 -404

index.html CHANGED Viewed

@@ -1,427 +1,499 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>PylarAI 3rd Party License</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <style>
-    :root {
-      --bg: #050608;
-      --card-bg: #0d0f14;
-      --accent: #e63946;
-      --accent-soft: rgba(230, 57, 70, 0.18);
-      --text-main: #f5f5f7;
-      --text-muted: #9ea3b5;
-      --border-soft: rgba(255, 255, 255, 0.06);
-      --code-bg: #11141c;
-      --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.6);
-      --radius-lg: 18px;
-      --radius-sm: 8px;
-      --font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
-        "Segoe UI", sans-serif;
-    }
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    html, body {
-      height: 100%;
-      background: radial-gradient(circle at top, #151824 0, #050608 55%);
-      color: var(--text-main);
-      font-family: var(--font-main);
-      -webkit-font-smoothing: antialiased;
-    }
-    body {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 32px 16px;
-    }
-    .page {
-      width: 100%;
-      max-width: 900px;
-    }
-    .frame {
-      background: linear-gradient(135deg, rgba(230, 57, 70, 0.08), transparent);
-      border-radius: 26px;
-      padding: 1px;
-      box-shadow: var(--shadow-soft);
-    }
-    .card {
-      background: radial-gradient(circle at top left, #151926 0, #050609 60%);
-      border-radius: 24px;
-      padding: 32px 26px 30px;
-      border: 1px solid var(--border-soft);
-      backdrop-filter: blur(18px);
-    }
-    header {
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      margin-bottom: 28px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
-      padding-bottom: 20px;
-    }
-    .badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 11px;
-      letter-spacing: 0.14em;
-      text-transform: uppercase;
-      color: var(--text-muted);
-    }
-    .badge-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 999px;
-      background: var(--accent);
-      box-shadow: 0 0 12px var(--accent);
-    }
-    h1 {
-      font-size: 26px;
-      font-weight: 630;
-      letter-spacing: 0.03em;
-      text-transform: uppercase;
-      display: flex;
-      align-items: baseline;
-      gap: 10px;
-    }
-    h1 span {
-      font-size: 13px;
-      font-weight: 400;
-      color: var(--accent);
-      padding: 3px 9px;
-      border-radius: 999px;
-      background: var(--accent-soft);
-      border: 1px solid rgba(230, 57, 70, 0.45);
-    }
-    .subtitle {
-      font-size: 14px;
-      color: var(--text-muted);
-      max-width: 520px;
-      line-height: 1.5;
-    }
-    .meta {
-      font-size: 11px;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 0.16em;
-      margin-top: 4px;
-    }
-    main {
-      display: grid;
-      grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
-      gap: 24px;
-    }
-    @media (max-width: 800px) {
       body {
-        align-items: flex-start;
       }
       .card {
-        padding: 24px 18px 22px;
       }
       main {
-        grid-template-columns: minmax(0, 1fr);
-      }
-    }
-    .license-content {
-      font-size: 14px;
-      line-height: 1.7;
-      color: var(--text-main);
-    }
-    .license-content h2 {
-      font-size: 16px;
-      font-weight: 600;
-      margin: 18px 0 8px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .license-content h2::before {
-      content: "";
-      width: 18px;
-      height: 1px;
-      background: linear-gradient(90deg, var(--accent), transparent);
-    }
-    .license-content p {
-      margin-bottom: 10px;
-      color: var(--text-main);
-    }
-    .license-content ul {
-      margin: 6px 0 12px 18px;
-      list-style: none;
-    }
-    .license-content li {
-      position: relative;
-      margin-bottom: 6px;
-      color: var(--text-muted);
-    }
-    .license-content li::before {
-      content: "•";
-      position: absolute;
-      left: -14px;
-      color: var(--accent);
-    }
-    .section-label {
-      font-size: 11px;
-      text-transform: uppercase;
-      letter-spacing: 0.18em;
-      color: var(--text-muted);
-      margin-bottom: 2px;
-    }
-    .pill {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 11px;
-      color: var(--accent);
-      background: rgba(230, 57, 70, 0.08);
-      border-radius: 999px;
-      padding: 4px 10px;
-      border: 1px solid rgba(230, 57, 70, 0.3);
-      margin-bottom: 8px;
-    }
-    .pill-dot {
-      width: 6px;
-      height: 6px;
-      border-radius: 999px;
-      background: var(--accent);
-    }
-    .side-panel {
-      border-radius: 18px;
-      padding: 16px 16px 14px;
-      background: linear-gradient(
-        145deg,
-        rgba(255, 255, 255, 0.02),
-        rgba(0, 0, 0, 0.4)
-      );
-      border: 1px solid var(--border-soft);
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
-    .side-card {
-      padding: 12px 12px 11px;
-      border-radius: 14px;
-      background: rgba(5, 7, 12, 0.85);
-      border: 1px solid rgba(255, 255, 255, 0.04);
-    }
-    .side-title {
-      font-size: 12px;
-      font-weight: 600;
-      margin-bottom: 4px;
-    }
-    .side-text {
-      font-size: 12px;
-      color: var(--text-muted);
-      line-height: 1.5;
-    }
-    .meta-grid {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 8px;
-      margin-top: 6px;
-    }
-    .meta-item {
-      font-size: 11px;
-      color: var(--text-muted);
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-    .meta-item span:first-child {
-      text-transform: uppercase;
-      letter-spacing: 0.16em;
-      font-size: 10px;
-      color: rgba(158, 163, 181, 0.75);
-    }
-    a {
-      color: var(--accent);
-      text-decoration: none;
-      border-bottom: 1px solid rgba(230, 57, 70, 0.4);
-    }
-    a:hover {
-      border-bottom-color: var(--accent);
-    }
-    code, pre {
-      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    }
-    .source-block {
-      margin-top: 10px;
-      font-size: 12px;
-      padding: 8px 10px;
-      border-radius: var(--radius-sm);
-      background: var(--code-bg);
-      border: 1px solid rgba(255, 255, 255, 0.04);
-      color: var(--text-muted);
-      word-break: break-all;
-    }
-  </style>
-</head>
-<body>
-  <div class="page">
-    <div class="frame">
-      <div class="card">
-        <header>
-          <div class="badge">
-            <span class="badge-dot"></span>
-            PYLARAI 3RD PARTY LICENSE
-          </div>
-          <h1>
-            PylarAI 3rd Party License
-            <span>Version 1.0 – December 2025</span>
-          </h1>
-          <p class="subtitle">
-            Software License Agreement focused on strict third-party compliance, transparent attribution,
-            and responsible integration of external components in any derived project or deliverable.
-          </p>
-          <p class="meta">
-            SOFTWARE LICENSE AGREEMENT · THIRD‑PARTY COMPLIANCE
-          </p>
-        </header>
-        <main>
-          <section class="license-content">
-            <div class="section-label">Overview</div>
-            <p>
-              Software License Agreement - Third-Party Compliance
-            </p>
-            <h2>1. Definitions</h2>
-            <ul>
-              <li><strong>Software</strong>: Refers to the program, application, component, script, or any digital material licensed under this agreement.</li>
-              <li><strong>Third-Party Components</strong>: Includes any code, library, plugin, module, content, or technology developed by an entity other than the Licensor.</li>
-              <li><strong>Project Deliverable</strong>: Any derivative content, result, modification, or integration involving the use of the Software or any third-party component.</li>
-              <li><strong>End User</strong>: Any individual or legal entity that uses, distributes, or adapts the Software within the boundaries defined by this license.</li>
-            </ul>
-            <h2>2. Grant of Rights</h2>
-            <p>
-              The Licensor grants the End User a non-exclusive, non-transferable, and revocable authorization to use the Software solely for development, testing, or integration purposes, provided that these conditions are fully respected.
-            </p>
-            <h2>3. Third-Party Respect and Compliance</h2>
-            <ul>
-              <li>Any third-party component, resource, or technology included or referenced within a derivative project must retain its original license, notices, and restrictions without alteration.</li>
-              <li>The End User is responsible for verifying the applicable license terms of every third-party component used before distributing or modifying any of its contents.</li>
-              <li>The Software may not be used to bypass, modify, or violate third-party license terms, nor to reassign credit, ownership, or intellectual property rights belonging to others.</li>
-              <li>When redistributing or delivering a Project Deliverable that integrates third-party software, the provenance, version, and license of each component must be explicitly documented.</li>
-            </ul>
-            <h2>4. Modifications and Derivative Work</h2>
-            <ul>
-              <li>Any modification, extension, integration, or plugin created based on the Software must respect the dependencies and third-party components embedded in its original structure.</li>
-              <li>Removal, suppression, or replacement of trademarks, credits, or identifiers belonging to third-party entities integrated by the original author or supplier is strictly prohibited.</li>
-            </ul>
-            <h2>5. Liability and Warranty Disclaimer</h2>
-            <p>
-              The Software and its components are provided “as is,” without any express or implied warranties, including but not limited to merchantability, fitness for a particular purpose, or non-infringement of third-party rights.
-            </p>
-            <p>
-              The Licensor shall not be held liable for any claim, damage, or loss arising from the use of third-party components or from non-compliance with their license terms.
-            </p>
-            <h2>6. Acceptance of Terms</h2>
-            <p>
-              By using the Software, the End User acknowledges and accepts all terms and conditions stated herein.
             </p>
-            <p>
-              If the End User does not agree to these terms, they are not authorized to install, use, modify, or distribute the Software.
             </p>
-            <div class="source-block">
-              Source:
-              <a href="https://huggingface.co/spaces/superdatas/pylarai3rdpartylicense" target="_blank" rel="noreferrer">
-                https://huggingface.co/spaces/superdatas/pylarai3rdpartylicense
-              </a>
-            </div>
-          </section>
-          <aside class="side-panel">
-            <div class="side-card">
-              <div class="pill">
-                <span class="pill-dot"></span>
-                Third-Party First
-              </div>
-              <h3 class="side-title">Design Principles</h3>
-              <p class="side-text">
-                Minimal surface, maximum clarity: the focus stays on the legal text, with a layout optimized
-                for reading and section scanning across devices.
               </p>
-            </div>
-            <div class="side-card">
-              <h3 class="side-title">License Snapshot</h3>
-              <div class="meta-grid">
-                <div class="meta-item">
-                  <span>Status</span>
-                  <span>Active · v1.0</span>
-                </div>
-                <div class="meta-item">
-                  <span>Scope</span>
-                  <span>Third-Party Compliance</span>
-                </div>
-                <div class="meta-item">
-                  <span>Updated</span>
-                  <span>December 2025</span>
                 </div>
-                <div class="meta-item">
-                  <span>Jurisdiction</span>
-                  <span>Global Use</span>
                 </div>
               </div>
-            </div>
-            <div class="side-card">
-              <h3 class="side-title">Implementation Hint</h3>
-              <p class="side-text">
-                Include this license alongside your model or application documentation and reference it explicitly
-                in your project’s README or Terms section for transparency.
-              </p>
-            </div>
-          </aside>
-        </main>
       </div>
     </div>
-  </div>
-</body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>PylarAI 3rd Party License</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      :root {
+        --bg: #050608;
+        --card-bg: #0d0f14;
+        --accent: #e63946;
+        --accent-soft: rgba(230, 57, 70, 0.18);
+        --text-main: #f5f5f7;
+        --text-muted: #9ea3b5;
+        --border-soft: rgba(255, 255, 255, 0.06);
+        --code-bg: #11141c;
+        --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.6);
+        --radius-lg: 18px;
+        --radius-sm: 8px;
+        --font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
+          "Segoe UI", sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        height: 100%;
+        background: radial-gradient(circle at top, #151824 0, #050608 55%);
+        color: var(--text-main);
+        font-family: var(--font-main);
+        -webkit-font-smoothing: antialiased;
+      }
       body {
+        /* Antes: align-items:center; ahora arriba para que no se corte */
+        display: flex;
+        justify-content: center;
+        padding: 24px 12px;
+        overflow-y: auto;
+      }
+      .page {
+        width: 100%;
+        max-width: 960px;
       }
+      .frame {
+        background: linear-gradient(
+          135deg,
+          rgba(230, 57, 70, 0.08),
+          transparent
+        );
+        border-radius: 24px;
+        padding: 1px;
+        box-shadow: var(--shadow-soft);
+      }
       .card {
+        background: radial-gradient(circle at top left, #151926 0, #050609 60%);
+        border-radius: 22px;
+        padding: 24px 20px 22px;
+        border: 1px solid var(--border-soft);
+        backdrop-filter: blur(16px);
+      }
+      header {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-bottom: 20px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+        padding-bottom: 16px;
+      }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 11px;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        color: var(--text-muted);
+      }
+      .badge-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 999px;
+        background: var(--accent);
+        box-shadow: 0 0 12px var(--accent);
+      }
+      h1 {
+        font-size: 22px;
+        font-weight: 630;
+        letter-spacing: 0.03em;
+        text-transform: uppercase;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 8px;
+      }
+      h1 span {
+        font-size: 12px;
+        font-weight: 400;
+        color: var(--accent);
+        padding: 3px 9px;
+        border-radius: 999px;
+        background: var(--accent-soft);
+        border: 1px solid rgba(230, 57, 70, 0.45);
+      }
+      .subtitle {
+        font-size: 13px;
+        color: var(--text-muted);
+        max-width: 580px;
+        line-height: 1.5;
+      }
+      .meta {
+        font-size: 10px;
+        color: var(--text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        margin-top: 2px;
       }
       main {
+        display: grid;
+        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
+        gap: 20px;
+      }
+      /* Mejoras responsive */
+      @media (max-width: 900px) {
+        body {
+          padding: 16px 10px;
+        }
+        .card {
+          padding: 20px 16px 18px;
+        }
+        main {
+          grid-template-columns: minmax(0, 1fr);
+        }
+      }
+      @media (max-width: 600px) {
+        h1 {
+          font-size: 18px;
+        }
+        .subtitle {
+          font-size: 12px;
+        }
+        .license-content {
+          font-size: 13px;
+        }
+      }
+      .license-content {
+        font-size: 14px;
+        line-height: 1.7;
+        color: var(--text-main);
+      }
+      .license-content h2 {
+        font-size: 15px;
+        font-weight: 600;
+        margin: 16px 0 8px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .license-content h2::before {
+        content: "";
+        width: 18px;
+        height: 1px;
+        background: linear-gradient(90deg, var(--accent), transparent);
+      }
+      .license-content p {
+        margin-bottom: 10px;
+        color: var(--text-main);
+      }
+      .license-content ul {
+        margin: 6px 0 12px 18px;
+        list-style: none;
+      }
+      .license-content li {
+        position: relative;
+        margin-bottom: 6px;
+        color: var(--text-muted);
+      }
+      .license-content li::before {
+        content: "•";
+        position: absolute;
+        left: -14px;
+        color: var(--accent);
+      }
+      .section-label {
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.18em;
+        color: var(--text-muted);
+        margin-bottom: 2px;
+      }
+      .pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 11px;
+        color: var(--accent);
+        background: rgba(230, 57, 70, 0.08);
+        border-radius: 999px;
+        padding: 4px 10px;
+        border: 1px solid rgba(230, 57, 70, 0.3);
+        margin-bottom: 8px;
+      }
+      .pill-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 999px;
+        background: var(--accent);
+      }
+      .side-panel {
+        border-radius: 16px;
+        padding: 14px 14px 12px;
+        background: linear-gradient(
+          145deg,
+          rgba(255, 255, 255, 0.02),
+          rgba(0, 0, 0, 0.4)
+        );
+        border: 1px solid var(--border-soft);
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .side-card {
+        padding: 10px 10px 9px;
+        border-radius: 13px;
+        background: rgba(5, 7, 12, 0.9);
+        border: 1px solid rgba(255, 255, 255, 0.04);
+      }
+      .side-title {
+        font-size: 12px;
+        font-weight: 600;
+        margin-bottom: 4px;
+      }
+      .side-text {
+        font-size: 12px;
+        color: var(--text-muted);
+        line-height: 1.5;
+      }
+      .meta-grid {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+        margin-top: 6px;
+      }
+      .meta-item {
+        font-size: 11px;
+        color: var(--text-muted);
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .meta-item span:first-child {
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 10px;
+        color: rgba(158, 163, 181, 0.75);
+      }
+      a {
+        color: var(--accent);
+        text-decoration: none;
+        border-bottom: 1px solid rgba(230, 57, 70, 0.4);
+      }
+      a:hover {
+        border-bottom-color: var(--accent);
+      }
+      .source-block {
+        margin-top: 10px;
+        font-size: 12px;
+        padding: 8px 10px;
+        border-radius: var(--radius-sm);
+        background: var(--code-bg);
+        border: 1px solid rgba(255, 255, 255, 0.04);
+        color: var(--text-muted);
+        word-break: break-all;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="page">
+      <div class="frame">
+        <div class="card">
+          <header>
+            <div class="badge">
+              <span class="badge-dot"></span>
+              PYLARAI 3RD PARTY LICENSE
+            </div>
+            <h1>
+              PylarAI 3rd Party License
+              <span>Version 1.0 – December 2025</span>
+            </h1>
+            <p class="subtitle">
+              Software License Agreement focused on strict third-party
+              compliance, transparent attribution, and responsible integration
+              of external components in any derived project or deliverable.
             </p>
+            <p class="meta">
+              SOFTWARE LICENSE AGREEMENT · THIRD‑PARTY COMPLIANCE
             </p>
+          </header>
+          <main>
+            <section class="license-content">
+              <div class="section-label">Overview</div>
+              <p>Software License Agreement - Third-Party Compliance</p>
+              <h2>1. Definitions</h2>
+              <ul>
+                <li>
+                  <strong>Software</strong>: Refers to the program, application,
+                  component, script, or any digital material licensed under this
+                  agreement.
+                </li>
+                <li>
+                  <strong>Third-Party Components</strong>: Includes any code,
+                  library, plugin, module, content, or technology developed by
+                  an entity other than the Licensor.
+                </li>
+                <li>
+                  <strong>Project Deliverable</strong>: Any derivative content,
+                  result, modification, or integration involving the use of the
+                  Software or any third-party component.
+                </li>
+                <li>
+                  <strong>End User</strong>: Any individual or legal entity that
+                  uses, distributes, or adapts the Software within the
+                  boundaries defined by this license.
+                </li>
+              </ul>
+              <h2>2. Grant of Rights</h2>
+              <p>
+                The Licensor grants the End User a non-exclusive,
+                non-transferable, and revocable authorization to use the
+                Software solely for development, testing, or integration
+                purposes, provided that these conditions are fully respected.
+              </p>
+              <h2>3. Third-Party Respect and Compliance</h2>
+              <ul>
+                <li>
+                  Any third-party component, resource, or technology included or
+                  referenced within a derivative project must retain its
+                  original license, notices, and restrictions without
+                  alteration.
+                </li>
+                <li>
+                  The End User is responsible for verifying the applicable
+                  license terms of every third-party component used before
+                  distributing or modifying any of its contents.
+                </li>
+                <li>
+                  The Software may not be used to bypass, modify, or violate
+                  third-party license terms, nor to reassign credit, ownership,
+                  or intellectual property rights belonging to others.
+                </li>
+                <li>
+                  When redistributing or delivering a Project Deliverable that
+                  integrates third-party software, the provenance, version, and
+                  license of each component must be explicitly documented.
+                </li>
+              </ul>
+              <h2>4. Modifications and Derivative Work</h2>
+              <ul>
+                <li>
+                  Any modification, extension, integration, or plugin created
+                  based on the Software must respect the dependencies and
+                  third-party components embedded in its original structure.
+                </li>
+                <li>
+                  Removal, suppression, or replacement of trademarks, credits,
+                  or identifiers belonging to third-party entities integrated by
+                  the original author or supplier is strictly prohibited.
+                </li>
+              </ul>
+              <h2>5. Liability and Warranty Disclaimer</h2>
+              <p>
+                The Software and its components are provided “as is,” without
+                any express or implied warranties, including but not limited to
+                merchantability, fitness for a particular purpose, or
+                non-infringement of third-party rights.
+              </p>
+              <p>
+                The Licensor shall not be held liable for any claim, damage, or
+                loss arising from the use of third-party components or from
+                non-compliance with their license terms.
+              </p>
+              <h2>6. Acceptance of Terms</h2>
+              <p>
+                By using the Software, the End User acknowledges and accepts all
+                terms and conditions stated herein.
+              </p>
+              <p>
+                If the End User does not agree to these terms, they are not
+                authorized to install, use, modify, or distribute the Software.
               </p>
+              <div class="source-block">
+                Source:
+                <a
+                  href="https://huggingface.co/spaces/superdatas/pylarai3rdpartylicense"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  https://huggingface.co/spaces/superdatas/pylarai3rdpartylicense
+                </a>
+              </div>
+            </section>
+            <aside class="side-panel">
+              <div class="side-card">
+                <div class="pill">
+                  <span class="pill-dot"></span>
+                  Third-Party First
                 </div>
+                <h3 class="side-title">Design Principles</h3>
+                <p class="side-text">
+                  Minimal surface, maximum clarity: the focus stays on the legal
+                  text, with a layout optimized for reading and section scanning
+                  across devices.
+                </p>
+              </div>
+              <div class="side-card">
+                <h3 class="side-title">License Snapshot</h3>
+                <div class="meta-grid">
+                  <div class="meta-item">
+                    <span>Status</span>
+                    <span>Active · v1.0</span>
+                  </div>
+                  <div class="meta-item">
+                    <span>Scope</span>
+                    <span>Third-Party Compliance</span>
+                  </div>
+                  <div class="meta-item">
+                    <span>Updated</span>
+                    <span>December 2025</span>
+                  </div>
+                  <div class="meta-item">
+                    <span>Jurisdiction</span>
+                    <span>Global Use</span>
+                  </div>
                 </div>
               </div>
+              <div class="side-card">
+                <h3 class="side-title">Implementation Hint</h3>
+                <p class="side-text">
+                  Include this license alongside your model or application
+                  documentation and reference it explicitly in your project’s
+                  README or Terms section for transparency.
+                </p>
+              </div>
+            </aside>
+          </main>
+        </div>
       </div>
     </div>
+  </body>
 </html>