Design Update

README.md

@@ -1,11 +1,11 @@
 ---
-title: PYLAR AI NON FREE LICENSE
-emoji: 👀
-colorFrom: green
+title: Pylar AI creative ML Non Free License
+emoji: 🏛️
+colorFrom: indigo
 colorTo: indigo
 sdk: static
 pinned: false
 license: other
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Licenses written by PylarAI. Important: If your project uses this licenses, does not means the code or contents of the project was generated with AI. Just the License is written with PylarAI.

content.json

@@ -1,8 +1,8 @@
 {
-  "title": "Pylar AI Creative ML Non Free License",
-  "version": "Version 1.0 December 2025",
-  "subtitle": "Software License Agreement prohibiting all usage, with strict no-permission terms and legal action warnings.",
-  "meta": "SOFTWARE LICENSE AGREEMENT / NON-FREE LICENSE",
+  "title": "Pylar AI creative ML Non Free License",
+  "version": "Version 1.0 2023",
+  "subtitle": "Complete prohibition of usage with legal action warnings.",
+  "meta": "SOFTWARE LICENSE AGREEMENT / NON-FREE",
   "badge": "PYLAR AI NON FREE LICENSE",
   "sectionLabel": "Overview",
   "sourceUrl": "https://huggingface.co/spaces/superdatas/nonfree",
@@ -25,10 +25,23 @@
     }
   ],
   "sidePanel": {
-    "pill": "No Permission",
+    "pill": "❌ No Permission",
     "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": "Access Denied",
+      "items": [
+        {
+          "type": "avoid",
+          "text": "No usage allowed"
+        },
+        {
+          "type": "avoid",
+          "text": "Legal action risk"
+        },
+        {
+          "type": "avoid",
+          "text": "No distribution"
+        }
+      ]
     },
     "snapshot": {
       "title": "License Snapshot",
@@ -43,7 +56,7 @@
         ],
         [
           "Updated",
-          "December 2025"
+          "2023"
         ],
         [
           "Jurisdiction",
@@ -52,8 +65,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": "Always link to source URL below"
     }
   }
 }

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));
@@ -295,24 +290,63 @@ a:hover {
   border-bottom-color: var(--accent);
 }
 
+/* FIXED Source Block - FULL RESPONSIVE */
 .source-block {
-  margin-top: 10px;
-  font-size: 12px;
-  padding: 8px 10px;
+  margin-top: 20px;
+  padding: 12px 16px;
   border-radius: var(--radius-sm);
   background: var(--code-bg);
-  border: 1px solid rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
   color: var(--text-muted);
+  font-family: monospace;
+  font-size: 13px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.source-block strong {
+  font-weight: 600;
+  color: var(--text-main);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.source-block a {
+  color: var(--accent) !important;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(230, 57, 70, 0.4);
+  font-size: 12px;
+  padding: 4px 0;
   word-break: break-all;
+  display: block;
+  line-height: 1.4;
+}
+
+.source-block a:hover {
+  border-bottom-color: var(--accent) !important;
 }
 
 /* Responsive */
 @media (min-width: 900px) {
-  h1 {
+  .htitle {
     font-size: 28px;
   }
 }
 
+/* Very small screens */
+@media (max-width: 480px) {
+  .source-block {
+    padding: 20px;
+    margin-top: 28px;
+  }
+
+  .source-block strong {
+    font-size: 13px;
+  }
+}
+
 @media (max-width: 900px) {
   body {
     padding: 16px 10px;
@@ -322,13 +356,24 @@ a:hover {
     padding: 20px 16px 18px;
   }
 
+  .source-block {
+    margin-top: 24px;
+    padding: 16px 20px;
+    gap: 8px;
+  }
+
+  .source-block a {
+    font-size: 13px;
+    padding: 6px 0;
+  }
+
   main {
     grid-template-columns: minmax(0, 1fr);
   }
 }
 
 @media (max-width: 600px) {
-  h1 {
+  .htitle {
     font-size: 18px;
   }