Spaces:

superdatas
/

sharedrestrictive

Running

App Files Files Community

miguelgargallo commited on 10 days ago

Commit

f67eee9

1 Parent(s): 5682ff2

Code

Browse files

Files changed (4) hide show

content.json +87 -0
index.html +33 -60
main.js +72 -0
styles.css +342 -0

content.json ADDED Viewed

	@@ -0,0 +1,87 @@

+{
+  "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",
+  "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."
+      ]
+    },
+    {
+      "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."
+      ]
+    },
+    {
+      "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."
+      ]
+    },
+    {
+      "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."
+      ]
+    }
+  ],
+  "sidePanel": {
+    "pill": "Restrictive by Default",
+    "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."
+    },
+    "snapshot": {
+      "title": "License Snapshot",
+      "items": [
+        [
+          "Status",
+          "Active"
+        ],
+        [
+          "Scope",
+          "Creative ML Assets"
+        ],
+        [
+          "Owner",
+          "Miguel Gargallo"
+        ],
+        [
+          "Year",
+          "2024"
+        ]
+      ]
+    },
+    "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."
+    }
+  }
+}

index.html CHANGED Viewed

@@ -1,70 +1,43 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <title>Pylar AI Creative ML Shared Restrictive License</title>
-    <style>
-        body {
-            font-family: 'Helvetica Neue', Arial, sans-serif;
-            background-color: #fff;
-            color: #333;
-            line-height: 1.6;
-            padding: 40px;
-            max-width: 700px;
-            margin: 40px auto;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-        h1 {
-            color: #333;
-            font-weight: 300;
-            text-align: center;
-        }
-        h2 {
-            font-weight: 300;
-            color: #666;
-        }
-        a {
-            color: #007aff;
-            text-decoration: none;
-        }
-        a:hover {
-            text-decoration: underline;
-        }
-        p {
-            margin-bottom: 15px;
-            font-size: 14px;
-        }
-        .footer {
-            text-align: center;
-            font-size: 12px;
-            color: #999;
-            margin-top: 40px;
-        }
-    </style>
 </head>
 <body>
-    <h1>Pylar AI Creative ML Shared Restrictive License</h1>
-    <p>Copyright (C) 2023 Miguel Gargallo</p>
-    <h2>Permission</h2>
-    <p>No permission to use anywere. With the exception of the author of the work, only if it is allowed in writing and
-        by email.</p>
-    <h2>Conditions</h2>
-    <p>Under any circumstance.</p>
-    <h2>Disclaimer</h2>
-    <p>We may take legal actions if you use these files.</p>
-    <p>For further details about this license, please visit: <a
-            href="https://huggingface.co/spaces/superdatas/sharedrestrictive">https://huggingface.co/spaces/superdatas/sharedrestrictive</a>
-    </p>
-    <div class="footer">
-        Pylar AI &copy; 2024
     </div>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <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>
 <body>
+  <div class="page">
+    <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>
+          <aside class="side-panel" data-sidepanel></aside>
+        </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 ADDED Viewed

	@@ -0,0 +1,342 @@

+: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 {
+  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: 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;
+  align-items: center;
+  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;
+  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;
+}
+.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;
+}
+/* Responsive */
+@media (min-width: 900px) {
+  h1 {
+    font-size: 28px;
+  }
+}
+@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;
+  }
+}