Spaces:

superdatas
/

thirdparty

Running

App Files Files Community

miguelgargallo commited on 27 days ago

Commit

65aa41e

1 Parent(s): 5e74587

Source Code

Browse files

Files changed (4) hide show

.gitignore +2 -1
index.html +12 -92
main.js +72 -0
styles.css +41 -3

.gitignore CHANGED Viewed

	@@ -1 +1,2 @@
1	- .env


1	+ .env
2	+ Instructions.md

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title data-title>PylarAI 3rd Party License</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
@@ -13,16 +13,16 @@
     <div class="frame">
       <div class="card">
         <header>
-          <div class="badge" data-badge>PYLARAI 3RD PARTY LICENSE</div>
-          <h1 data-title>
-            PylarAI 3rd Party License
-            <span data-version>Version 1.0 December 2025</span>
-          </h1>
           <p class="subtitle" data-subtitle></p>
-          <p class="meta" data-meta>
-            SOFTWARE LICENSE AGREEMENT / THIRD-PARTY COMPLIANCE
-          </p>
         </header>
         <main>
           <section class="license-content" data-sections></section>
@@ -30,94 +30,14 @@
         </main>
         <div class="source-block" data-source>
-          <strong data-source-text>Source:</strong>
           <a data-source-url href="#" target="_blank" rel="noreferrer"></a>
         </div>
       </div>
     </div>
-    <script>
-      async function loadContent() {
-        try {
-          const response = await fetch("content.json");
-          const content = await response.json();
-          // Header
-          document.querySelector("[data-title]").textContent = content.title;
-          document.querySelector("[data-version]").textContent =
-            content.version;
-          document.querySelector("[data-subtitle]").textContent =
-            content.subtitle;
-          document.querySelector("[data-meta]").textContent = content.meta;
-          document.querySelector("[data-badge]").textContent = content.badge;
-          document.title = content.title;
-          // Source
-          document.querySelector("[data-source-url]").href = content.sourceUrl;
-          document.querySelector("[data-source-url]").textContent =
-            content.sourceUrl;
-          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.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>`
-                : `<p>${section.content}</p>`
-              }
-                    `;
-            sectionsContainer.appendChild(sectionEl);
-          });
-          // Side panel
-          const sidePanel = document.querySelector("[data-sidepanel]");
-          sidePanel.innerHTML = `
-                    <div class="side-card">
-                        <div class="pill">
-                            <span class="pill-dot"></span>
-                            ${content.sidePanel.pill}
-                        </div>
-                        <h3 class="side-title">${content.sidePanel.principles.title
-            }</h3>
-                        <p class="side-text">${content.sidePanel.principles.text
-            }</p>
-                    </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]) => `
-                                <div class="meta-item">
-                                    <span>${key}</span>
-                                    <span>${value}</span>
-                                </div>
-                            `
-              )
-              .join("")}
-                        </div>
-                    </div>
-                    <div class="side-card">
-                        <h3 class="side-title">${content.sidePanel.hint.title
-            }</h3>
-                        <p class="side-text">${content.sidePanel.hint.text}</p>
-                    </div>
-                `;
-        } catch (error) {
-          console.error("Error loading content:", error);
-        }
-      }
-      loadContent();
-    </script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title data-title></title>
   <link rel="stylesheet" href="styles.css" />
 </head>
     <div class="frame">
       <div class="card">
         <header>
+          <h1 class="htitle" data-badge></h1>
+          <hpill>
+            <span class="title-version" data-version></span>
+          </hpill>
           <p class="subtitle" data-subtitle></p>
+          <p class="meta" data-meta></p>
         </header>
         <main>
           <section class="license-content" data-sections></section>
         </main>
         <div class="source-block" data-source>
+          <strong data-source-text></strong>
           <a data-source-url href="#" target="_blank" rel="noreferrer"></a>
         </div>
       </div>
     </div>
+  </div>
+  <script src="main.js"></script>
 </body>
 </html>

main.js ADDED Viewed

	@@ -0,0 +1,72 @@

+async function loadContent() {
+  try {
+    const response = await fetch("content.json");
+    const content = await response.json();
+    // Header
+    document.querySelector("[data-title]").textContent = content.title;
+    document.querySelector("[data-version]").textContent = content.version;
+    document.querySelector("[data-subtitle]").textContent = content.subtitle;
+    document.querySelector("[data-meta]").textContent = content.meta;
+    document.querySelector("[data-badge]").textContent = content.badge;
+    document.title = content.title;
+    // Source
+    document.querySelector("[data-source-url]").href = content.sourceUrl;
+    document.querySelector("[data-source-url]").textContent = content.sourceUrl;
+    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.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>`
+          : `<p>${section.content}</p>`
+        }
+      `;
+      sectionsContainer.appendChild(sectionEl);
+    });
+    // Side panel
+    const sidePanel = document.querySelector("[data-sidepanel]");
+    sidePanel.innerHTML = `
+      <div class="side-card">
+        <div class="pill">
+          <span class="pill-dot"></span>
+          ${content.sidePanel.pill}
+        </div>
+        <h3 class="side-title">${content.sidePanel.principles.title}</h3>
+        <p class="side-text">${content.sidePanel.principles.text}</p>
+      </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]) => `
+              <div class="meta-item">
+                <span>${key}</span>
+                <span>${value}</span>
+              </div>
+            `
+        )
+        .join("")}
+        </div>
+      </div>
+      <div class="side-card">
+        <h3 class="side-title">${content.sidePanel.hint.title}</h3>
+        <p class="side-text">${content.sidePanel.hint.text}</p>
+      </div>
+    `;
+  } catch (error) {
+    console.error("Error loading content:", error);
+  }
+}
+loadContent();

styles.css CHANGED Viewed

@@ -83,10 +83,32 @@ header {
   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;
@@ -94,6 +116,16 @@ h1 {
   gap: 8px;
 }
 h1 span {
   font-size: 12px;
   font-weight: 400;
@@ -275,6 +307,12 @@ a:hover {
 }
 /* Responsive */
 @media (max-width: 900px) {
   body {
     padding: 16px 10px;

   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;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+hpill {
   font-size: 22px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
   text-transform: uppercase;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
 }
+.title-version {
+  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);
+}
 h1 span {
   font-size: 12px;
   font-weight: 400;
 }
 /* Responsive */
+@media (min-width: 900px) {
+  h1 {
+    font-size: 28px;
+  }
+}
 @media (max-width: 900px) {
   body {
     padding: 16px 10px;