Design Update

content.json

@@ -1,87 +1,90 @@
 {
   "title": "Pylar AI creative ML Shared Restrictive License",
-  "version": "Version 1.0 - 2024",
-  "subtitle": "Restrictive license for Pylar AI creative machine learning assets and related files, focused on preventing any use without explicit written permission from the author.",
-  "meta": "PYLAR AI CREATIVE ML / SHARED RESTRICTIVE LICENSE",
-  "badge": "Pylar AI creative ML Shared Restrictive License",
+  "version": "Version 1.0 2024",
+  "subtitle": "Strict no-permission license with written author exception only, prohibiting all usage without explicit email authorization.",
+  "meta": "SOFTWARE LICENSE AGREEMENT / SHARED RESTRICTIVE",
+  "badge": "PYLAR AI SHARED RESTRICTIVE LICENSE",
   "sectionLabel": "Overview",
   "sourceUrl": "https://huggingface.co/spaces/superdatas/sharedrestrictive",
   "sourceText": "Source:",
   "sections": [
     {
       "title": "Copyright",
-      "content": [
-        "<strong>Copyright © 2024 Miguel Gargallo</strong> All rights reserved for this work and its related files."
-      ]
+      "content": "Copyright (C) 2024 Miguel Gargallo"
     },
     {
       "title": "1. Permission",
       "content": [
-        "No permission is granted to use, copy, modify, distribute, or deploy these files in any context without the explicit written consent of the author.",
-        "The only exception is the author of the work, who may use these files as desired.",
-        "Any other party must obtain written authorization by email before any kind of usage."
+        "No permission to use anywhere. With the exception of the author of the work, only if it is allowed in writing and by email."
       ]
     },
     {
       "title": "2. Conditions",
-      "content": [
-        "Under no circumstances may these files be used, incorporated into other projects, or shared, unless the author has explicitly allowed it in writing.",
-        "Any intended personal, academic, commercial, or research use requires prior written permission from the author.",
-        "Unauthorized use may be considered a violation of this license and of applicable copyright law."
-      ]
+      "content": "Under any circumstance."
     },
     {
       "title": "3. Disclaimer",
       "content": [
-        "The files are provided without any warranty, express or implied, including but not limited to fitness for a particular purpose.",
-        "The author will not be liable for any damages or consequences arising from the use or misuse of these files, whether authorized or unauthorized."
-      ]
-    },
-    {
-      "title": "4. Enforcement",
-      "content": [
-        "The author reserves the right to take legal action against any party that uses these files without authorization.",
-        "Parties that fail to comply with this license may be subject to legal claims, including but not limited to injunctions and damages."
-      ]
-    },
-    {
-      "title": "5. Further Information",
-      "content": [
-        "For additional details about this license or to request permission, please visit the official license page or contact the author through the indicated channels.",
-        "More information is available at the referenced Hugging Face space."
+        "Parties can take legal actions if you use this files.",
+        "For further details about this license, please visit: https://huggingface.co/spaces/superdatas/sharedrestrictive"
       ]
     }
   ],
   "sidePanel": {
-    "pill": "Restrictive by Default",
+    "pill": "❌ Author Only | 📧 Written Permission",
     "principles": {
-      "title": "License Intent",
-      "text": "This license is designed to strongly restrict usage of the underlying creative ML files, allowing access and usage only when the author has granted explicit written permission."
+      "title": "Access Rules",
+      "items": [
+        {
+          "type": "allow",
+          "text": "Author Miguel Gargallo"
+        },
+        {
+          "type": "allow",
+          "text": "Written email permission"
+        },
+        {
+          "type": "avoid",
+          "text": "No general usage"
+        },
+        {
+          "type": "avoid",
+          "text": "No distribution"
+        },
+        {
+          "type": "avoid",
+          "text": "No modifications"
+        },
+        {
+          "type": "avoid",
+          "text": "Legal action risk"
+        }
+      ]
     },
     "snapshot": {
       "title": "License Snapshot",
       "items": [
         [
           "Status",
-          "Active"
+          "Active v1.0"
         ],
         [
           "Scope",
-          "Creative ML Assets"
+          "Author-Only Access"
         ],
         [
-          "Owner",
-          "Miguel Gargallo"
+          "Updated",
+          "2024"
         ],
         [
-          "Year",
-          "2024"
+          "Jurisdiction",
+          "Global"
         ]
       ]
     },
     "hint": {
-      "title": "Usage Reminder",
-      "text": "Do not use, copy, or distribute these files unless you have explicit written permission from the author. When in doubt, contact the author and obtain approval before any use."
+      "title": "License Validity",
+      "text": "To use and have validity, always link to source URL: https://huggingface.co/spaces/superdatas/sharedrestrictive"
     }
   }
 }

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;
   }