Spaces:

VortexHunter23
/

undefined-colors-web-template

Running

App Files Files Community

VortexHunter23 commited on Nov 21, 2025

Commit

38ef6f5

verified ·

1 Parent(s): 120465a

recreate it

Browse files

Files changed (2) hide show

README.md +6 -3
index.html +230 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Undefined Colors Web Template
-emoji: 📉
 colorFrom: yellow
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Undefined Colors Web Template
 colorFrom: yellow
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,230 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Undefined Colors Web Template</title>
+  <!-- TailwindCSS via CDN -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Feather Icons -->
+  <script src="https://unpkg.com/feather-icons"></script>
+  <!-- Tailwind config placeholder (update --color-primary/--color-secondary to your brand colors) -->
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: {
+              50: 'rgb(var(--color-primary) / <alpha-value>)',
+              100: 'rgb(var(--color-primary) / <alpha-value>)',
+              200: 'rgb(var(--color-primary) / <alpha-value>)',
+              300: 'rgb(var(--color-primary) / <alpha-value>)',
+              400: 'rgb(var(--color-primary) / <alpha-value>)',
+              500: 'rgb(var(--color-primary) / <alpha-value>)',
+              600: 'rgb(var(--color-primary) / <alpha-value>)',
+              700: 'rgb(var(--color-primary) / <alpha-value>)',
+              800: 'rgb(var(--color-primary) / <alpha-value>)',
+              900: 'rgb(var(--color-primary) / <alpha-value>)',
+            },
+            secondary: {
+              50: 'rgb(var(--color-secondary) / <alpha-value>)',
+              100: 'rgb(var(--color-secondary) / <alpha-value>)',
+              200: 'rgb(var(--color-secondary) / <alpha-value>)',
+              300: 'rgb(var(--color-secondary) / <alpha-value>)',
+              400: 'rgb(var(--color-secondary) / <alpha-value>)',
+              500: 'rgb(var(--color-secondary) / <alpha-value>)',
+              600: 'rgb(var(--color-secondary) / <alpha-value>)',
+              700: 'rgb(var(--color-secondary) / <alpha-value>)',
+              800: 'rgb(var(--color-secondary) / <alpha-value>)',
+              900: 'rgb(var(--color-secondary) / <alpha-value>)',
+            },
+          },
+        },
+      },
+    };
+  </script>
+  <style>
+    :root {
+      /* TODO: Replace these with your brand colors (e.g., 34 197 94 for primary, 99 102 241 for secondary) */
+      --color-primary: 0 0 0;
+      --color-secondary: 0 0 0;
+    }
+  </style>
+</head>
+<body class="min-h-screen bg-gray-50 text-gray-800 antialiased">
+  <!-- NAVBAR -->
+  <header class="sticky top-0 z-30 border-b border-gray-200 bg-white/70 backdrop-blur">
+    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+      <div class="flex h-16 items-center justify-between">
+        <a href="#" class="flex items-center gap-2 font-semibold text-gray-900">
+          <span class="inline-flex h-8 w-8 items-center justify-center rounded-md bg-undefined-500 text-white">
+            <!-- This class will show as undefined until you configure colors above -->
+            <i data-feather="box" class="h-5 w-5"></i>
+          </span>
+          <span>Brand</span>
+        </a>
+        <nav class="hidden items-center gap-6 text-sm font-medium text-gray-600 md:flex">
+          <a href="#" class="hover:text-gray-900">Features</a>
+          <a href="#" class="hover:text-gray-900">Pricing</a>
+          <a href="#" class="hover:text-gray-900">Docs</a>
+          <a href="#" class="rounded-md bg-undefined-500 px-3 py-2 text-white hover:bg-undefined-600 focus:outline-none focus:ring-2 focus:ring-undefined-400 focus:ring-offset-2">
+            Get Started
+          </a>
+        </nav>
+        <button class="md:hidden inline-flex items-center justify-center rounded-md p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-undefined-400">
+          <i data-feather="menu" class="h-6 w-6"></i>
+        </button>
+      </div>
+    </div>
+  </header>
+  <!-- HERO -->
+  <section class="relative overflow-hidden bg-white">
+    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-24 lg:px-8">
+      <div class="grid items-center gap-12 lg:grid-cols-2">
+        <div>
+          <span class="inline-flex items-center rounded-full bg-undefined-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-undefined-700 ring-1 ring-inset ring-undefined-500/20">
+            Undefined Mode
+          </span>
+          <h1 class="mt-4 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+            Build with undefined primary and secondary colors
+          </h1>
+          <p class="mt-4 max-w-prose text-gray-600">
+            This template is ready for your brand. Configure --color-primary and --color-secondary in the head, then use
+            bg-undefined-500, text-undefined-600, border-undefined-400, and more.
+          </p>
+          <div class="mt-8 flex flex-wrap gap-3">
+            <a href="#" class="inline-flex items-center gap-2 rounded-md bg-undefined-500 px-4 py-2.5 font-medium text-white hover:bg-undefined-600 focus:outline-none focus:ring-2 focus:ring-undefined-400 focus:ring-offset-2">
+              <i data-feather="zap" class="h-5 w-5"></i>
+              Primary Action
+            </a>
+            <a href="#" class="inline-flex items-center gap-2 rounded-md border border-undefined-400 bg-white px-4 py-2.5 font-medium text-undefined-700 hover:bg-undefined-50 focus:outline-none focus:ring-2 focus:ring-undefined-400 focus:ring-offset-2">
+              <i data-feather="compass" class="h-5 w-5"></i>
+              Secondary
+            </a>
+          </div>
+          <div class="mt-8 grid w-full max-w-xl grid-cols-3 gap-6">
+            <div class="rounded-lg border border-undefined-200 bg-white p-4">
+              <div class="text-sm font-medium text-gray-700">Usage</div>
+              <div class="mt-1 text-xs text-gray-500">bg-undefined-500</div>
+            </div>
+            <div class="rounded-lg border border-undefined-200 bg-white p-4">
+              <div class="text-sm font-medium text-gray-700">States</div>
+              <div class="mt-1 text-xs text-gray-500">hover:bg-undefined-600</div>
+            </div>
+            <div class="rounded-lg border border-undefined-200 bg-white p-4">
+              <div class="text-sm font-medium text-gray-700">Text</div>
+              <div class="mt-1 text-xs text-gray-500">text-undefined-700</div>
+            </div>
+          </div>
+        </div>
+        <div class="relative">
+          <div class="absolute -left-8 -top-8 h-40 w-40 rounded-full bg-undefined-500/20 blur-2xl"></div>
+          <div class="absolute -bottom-8 -right-8 h-40 w-40 rounded-full bg-undefined-500/20 blur-2xl"></div>
+          <div class="relative rounded-xl border border-undefined-200 bg-white p-6 shadow-sm">
+            <div class="flex items-center gap-3 border-b border-undefined-200 pb-4">
+              <div class="h-3 w-3 rounded-full bg-red-400"></div>
+              <div class="h-3 w-3 rounded-full bg-yellow-400"></div>
+              <div class="h-3 w-3 rounded-full bg-green-400"></div>
+            </div>
+            <pre class="mt-4 overflow-x-auto rounded-md bg-gray-900 p-4 text-sm text-gray-100">
+<span class="text-gray-400">// Tailwind config (extend colors)</span>
+<span class="text-emerald-400">theme</span>: {
+  <span class="text-emerald-400">extend</span>: {
+    <span class="text-emerald-400">colors</span>: {
+      <span class="text-sky-400">primary</span>: { <span class="text-fuchsia-400">500</span>: <span class="text-amber-300">'rgb(var(--color-primary) / <alpha-value>)'</span> },
+      <span class="text-sky-400">secondary</span>: { <span class="text-fuchsia-400">500</span>: <span class="text-amber-300">'rgb(var(--color-secondary) / <alpha-value>)'</span> },
+    }
+  }
+}
+            </pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- FEATURES -->
+  <section class="bg-gray-50">
+    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+      <div class="mx-auto max-w-2xl text-center">
+        <h2 class="text-3xl font-bold tracking-tight text-gray-900">Features using undefined colors</h2>
+        <p class="mt-3 text-gray-600">
+          Configure the palette once and use utility classes like bg-undefined-500, text-undefined-600, border-undefined-400 across the app.
+        </p>
+      </div>
+      <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        <div class="rounded-xl border border-undefined-200 bg-white p-6 shadow-sm">
+          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-undefined-500/10 text-undefined-700 ring-1 ring-inset ring-undefined-500/20">
+            <i data-feather="cpu" class="h-5 w-5"></i>
+          </div>
+          <h3 class="mt-4 text-lg font-semibold text-gray-900">Performance</h3>
+          <p class="mt-2 text-sm text-gray-600">Lightweight and fast with Tailwind’s utility-first approach.</p>
+        </div>
+        <div class="rounded-xl border border-undefined-200 bg-white p-6 shadow-sm">
+          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-undefined-500/10 text-undefined-700 ring-1 ring-inset ring-undefined-500/20">
+            <i data-feather="shield" class="h-5 w-5"></i>
+          </div>
+          <h3 class="mt-4 text-lg font-semibold text-gray-900">Reliability</h3>
+          <p class="mt-2 text-sm text-gray-600">Sturdy components built to scale with your product.</p>
+        </div>
+        <div class="rounded-xl border border-undefined-200 bg-white p-6 shadow-sm">
+          <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-undefined-500/10 text-undefined-700 ring-1 ring-inset ring-undefined-500/20">
+            <i data-feather="sliders" class="h-5 w-5"></i>
+          </div>
+          <h3 class="mt-4 text-lg font-semibold text-gray-900">Customizable</h3>
+          <p class="mt-2 text-sm text-gray-600">Tweak colors by updating CSS variables in the head.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- CTA -->
+  <section class="bg-white">
+    <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
+      <div class="flex flex-col items-center justify-between gap-6 rounded-2xl border border-undefined-200 bg-gradient-to-br from-white to-undefined-50 p-8 text-center shadow-sm lg:flex-row lg:text-left">
+        <div>
+          <h3 class="text-2xl font-bold text-gray-900">Ready to define your brand?</h3>
+          <p class="mt-1 text-gray-600">Set --color-primary and --color-secondary, then enjoy consistent tokens across Tailwind.</p>
+        </div>
+        <div class="flex gap-3">
+          <a href="#" class="inline-flex items-center gap-2 rounded-md bg-undefined-500 px-5 py-3 font-medium text-white hover:bg-undefined-600 focus:outline-none focus:ring-2 focus:ring-undefined-400 focus:ring-offset-2">
+            <i data-feather="arrow-right" class="h-5 w-5"></i>
+            Start now
+          </a>
+          <a href="#" class="inline-flex items-center gap-2 rounded-md border border-undefined-400 bg-white px-5 py-3 font-medium text-undefined-700 hover:bg-undefined-50 focus:outline-none focus:ring-2 focus:ring-undefined-400 focus:ring-offset-2">
+            Learn more
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- FOOTER -->
+  <footer class="border-t border-gray-200 bg-white">
+    <div class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
+      <div class="flex flex-col items-center justify-between gap-6 sm:flex-row">
+        <p class="text-sm text-gray-500">© <span id="year"></span> Your Company. All rights reserved.</p>
+        <div class="flex items-center gap-4 text-gray-500">
+          <a href="#" class="hover:text-gray-700"><i data-feather="github" class="h-5 w-5"></i></a>
+          <a href="#" class="hover:text-gray-700"><i data-feather="twitter" class="h-5 w-5"></i></a>
+          <a href="#" class="hover:text-gray-700"><i data-feather="mail" class="h-5 w-5"></i></a>
+        </div>
+      </div>
+    </div>
+  </footer>
+  <script>
+    // Initialize Feather icons
+    feather.replace();
+    // Set current year
+    document.getElementById('year').textContent = new Date().getFullYear();
+  </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>