Design Update

README.md

@@ -1,6 +1,6 @@
 ---
 title: PylarAI 3rd Party License
-emoji: 🌍
+emoji: 🏛️
 colorFrom: indigo
 colorTo: indigo
 sdk: static

content.json

@@ -1,6 +1,6 @@
 {
   "title": "PylarAI 3rd Party License",
-  "version": "Version 1.0 December 2025",
+  "version": "Version 1.0 - December 2025",
   "subtitle": "Software License Agreement focused on strict third-party compliance, transparent attribution, and responsible integration of external components in any derived project or deliverable.",
   "meta": "SOFTWARE LICENSE AGREEMENT / THIRD-PARTY COMPLIANCE",
   "badge": "PYLARAI 3RD PARTY LICENSE",
@@ -13,7 +13,7 @@
       "content": [
         "<strong>Software</strong>: Refers to the program, application, component, script, or any digital material licensed under this agreement.",
         "<strong>Third-Party Components</strong>: Includes any code, library, plugin, module, content, or technology developed by an entity other than the Licensor.",
-        "<strong>Project Deliverables</strong>: Any derivative content, result, modification, or integration involving the use of the Software or any third-party component.",
+        "<strong>Project Deliverable</strong>: Any derivative content, result, modification, or integration involving the use of the Software or any third-party component.",
         "<strong>End User</strong>: Any individual or legal entity that uses, distributes, or adapts the Software within the boundaries defined by this license."
       ]
     },
@@ -53,10 +53,39 @@
     }
   ],
   "sidePanel": {
-    "pill": "Third-Party First",
+    "pill": "✅ Compliance | ❌ No Bypass",
     "principles": {
-      "title": "Design Principles",
-      "text": "Minimal surface, maximum clarity: the focus stays on the legal text, with a layout optimized for reading and section scanning across devices."
+      "title": "Third-Party Rules",
+      "items": [
+        {
+          "type": "allow",
+          "text": "Development & testing use"
+        },
+        {
+          "type": "allow",
+          "text": "Retain original licenses"
+        },
+        {
+          "type": "allow",
+          "text": "Document all components"
+        },
+        {
+          "type": "avoid",
+          "text": "No license bypassing"
+        },
+        {
+          "type": "avoid",
+          "text": "No credit reassignment"
+        },
+        {
+          "type": "avoid",
+          "text": "No trademark removal"
+        },
+        {
+          "type": "avoid",
+          "text": "No commercial distribution"
+        }
+      ]
     },
     "snapshot": {
       "title": "License Snapshot",
@@ -80,8 +109,8 @@
       ]
     },
     "hint": {
-      "title": "Implementation Hint",
-      "text": "Include this license alongside your model or application documentation and reference it explicitly in your project's README or Terms section for transparency."
+      "title": "License Validity",
+      "text": "To use and have validity, always link the source URL on your License or just copy paste the License.md"
     }
   }
 }

main.js

@@ -12,21 +12,21 @@ async function loadContent() {
     document.title = content.title;
 
     // Source
-    document.querySelector("[data-source-url]").href = content.sourceUrl;
-    document.querySelector("[data-source-url]").textContent = content.sourceUrl;
+    const sourceUrlEl = document.querySelector("[data-source-url]");
+    sourceUrlEl.href = content.sourceUrl;
+    sourceUrlEl.textContent = content.sourceUrl || "No source available";
     document.querySelector("[data-source-text]").textContent = content.sourceText;
 
     // Sections
     const sectionsContainer = document.querySelector("[data-sections]");
     content.sections.forEach((section) => {
       const sectionEl = document.createElement("div");
+      sectionEl.className = "section";
       sectionEl.innerHTML = `
         <div class="section-label">${content.sectionLabel}</div>
         <h2>${section.title}</h2>
         ${Array.isArray(section.content)
-          ? `<ul>${section.content
-            .map((item) => `<li>${item}</li>`)
-            .join("")}</ul>`
+          ? `<ul>${section.content.map((item) => `<li>${item}</li>`).join("")}</ul>`
           : `<p>${section.content}</p>`
         }
       `;
@@ -42,20 +42,18 @@ async function loadContent() {
           ${content.sidePanel.pill}
         </div>
         <h3 class="side-title">${content.sidePanel.principles.title}</h3>
-        <p class="side-text">${content.sidePanel.principles.text}</p>
+        <div class="principles-list" data-principles></div>
       </div>
       <div class="side-card">
         <h3 class="side-title">${content.sidePanel.snapshot.title}</h3>
         <div class="meta-grid">
           ${content.sidePanel.snapshot.items
-        .map(
-          ([key, value]) => `
+        .map(([key, value]) => `
               <div class="meta-item">
                 <span>${key}</span>
                 <span>${value}</span>
               </div>
-            `
-        )
+            `)
         .join("")}
         </div>
       </div>
@@ -64,8 +62,37 @@ async function loadContent() {
         <p class="side-text">${content.sidePanel.hint.text}</p>
       </div>
     `;
+
+    // Render principles with SVG icons
+    const principlesList = document.querySelector("[data-principles]");
+    if (content.sidePanel.principles.items) {
+      const items = content.sidePanel.principles.items;
+      const allowedItems = items.filter(item => item.type === 'allow');
+      const avoidItems = items.filter(item => item.type === 'avoid');
+
+      principlesList.innerHTML = `
+        <div class="permissions-group">
+          ${allowedItems.map(item => `
+            <div class="permission-item">
+              <img src="assets/correct.svg" width="16" height="16" alt="Allowed" />
+              <span>${item.text}</span>
+            </div>
+          `).join('')}
+        </div>
+        <div class="permissions-group avoid">
+          ${avoidItems.map(item => `
+            <div class="permission-item">
+              <img src="assets/avoid.svg" width="16" height="16" alt="Prohibited" />
+              <span>${item.text}</span>
+            </div>
+          `).join('')}
+        </div>
+      `;
+    }
+
   } catch (error) {
     console.error("Error loading content:", error);
+    document.body.innerHTML = "<h1>Error loading license content</h1>";
   }
 }
 

styles.css

@@ -56,6 +56,7 @@ body {
   backdrop-filter: blur(16px);
 }
 
+/* Header styles */
 header {
   display: flex;
   flex-direction: column;
@@ -65,35 +66,6 @@ header {
   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: 26px;
-  font-weight: 650;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px; */
-}
-
 .htitle {
   font-size: 22px;
   font-weight: 650;
@@ -126,16 +98,6 @@ hpill {
   border: 1px solid rgba(230, 57, 70, 0.45);
 }
 
-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);
@@ -151,6 +113,7 @@ h1 span {
   margin-top: 2px;
 }
 
+/* Main content */
 main {
   display: grid;
   grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
@@ -210,6 +173,7 @@ main {
   margin-bottom: 2px;
 }
 
+/* Side panel */
 .pill {
   display: inline-flex;
   align-items: center;
@@ -263,6 +227,37 @@ main {
   line-height: 1.5;
 }
 
+/* Permissions list */
+.permissions-group {
+  margin-bottom: 12px;
+}
+
+.permissions-group:last-child {
+  margin-bottom: 0;
+}
+
+.permissions-group.avoid {
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.permission-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-family: monospace;
+  font-size: 13px;
+}
+
+.permission-item span {
+  color: var(--text-muted);
+}
+
+.permissions-group.avoid .permission-item span {
+  color: #fca5a5;
+}
+
 .meta-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -308,7 +303,7 @@ a:hover {
 
 /* Responsive */
 @media (min-width: 900px) {
-  h1 {
+  .htitle {
     font-size: 28px;
   }
 }
@@ -328,7 +323,7 @@ a:hover {
 }
 
 @media (max-width: 600px) {
-  h1 {
+  .htitle {
     font-size: 18px;
   }