Spaces:

Mucella
/

pixelpulse-palette-explorer

Running

App Files Files Community

Mucella commited on Nov 17, 2025

Commit

cc1fb09

verified ·

1 Parent(s): d6c871a

https://claude.ai/public/artifacts/0284b05e-fc48-4a06-a64b-9d78a655e706

Browse files

Files changed (5) hide show

README.md +8 -5
components/color-card.js +84 -0
index.html +155 -19
script.js +29 -0
style.css +34 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Pixelpulse Palette Explorer
-emoji: 🏆
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: PixelPulse Palette Explorer 🎨
+colorFrom: yellow
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/color-card.js ADDED Viewed

	@@ -0,0 +1,84 @@

+class ColorCard extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+    connectedCallback() {
+        const color = this.getAttribute('color') || 'primary';
+        const shade = this.getAttribute('shade') || '500';
+        const title = this.getAttribute('title') || 'Color Card';
+        const description = this.getAttribute('description') || 'A beautiful color combination';
+        this.shadowRoot.innerHTML = `
+            <style>
+                .card {
+                    background: white;
+                    border-radius: 0.75rem;
+                    overflow: hidden;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                    transition: all 0.3s ease;
+                }
+                .card:hover {
+                    transform: translateY(-4px);
+                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+                }
+                .color-preview {
+                    height: 12rem;
+                    background-color: var(--color);
+                }
+                .card-content {
+                    padding: 1.5rem;
+                }
+                .title {
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                    margin-bottom: 0.5rem;
+                    color: var(--text-color);
+                }
+                .description {
+                    color: var(--text-secondary);
+                    margin-bottom: 1rem;
+                }
+                .swatches {
+                    display: flex;
+                    gap: 0.5rem;
+                }
+                .swatch {
+                    width: 2rem;
+                    height: 2rem;
+                    border-radius: 9999px;
+                    cursor: pointer;
+                    transition: transform 0.2s;
+                }
+                .swatch:hover {
+                    transform: scale(1.1);
+                }
+            </style>
+            <div class="card">
+                <div class="color-preview" style="--color: var(--${color}-${shade})"></div>
+                <div class="card-content">
+                    <h3 class="title">${title}</h3>
+                    <p class="description">${description}</p>
+                    <div class="swatches">
+                        <div class="swatch" style="background-color: var(--${color}-300)"></div>
+                        <div class="swatch" style="background-color: var(--${color}-500)"></div>
+                        <div class="swatch" style="background-color: var(--${color}-700)"></div>
+                        <div class="swatch" style="background-color: var(--${color}-900)"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('color-card', ColorCard);

index.html CHANGED Viewed

@@ -1,19 +1,155 @@
-<!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" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PixelPulse Palette Explorer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#f5f3ff',
+                            100: '#ede9fe',
+                            200: '#ddd6fe',
+                            300: '#c4b5fd',
+                            400: '#a78bfa',
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                            700: '#6d28d9',
+                            800: '#5b21b6',
+                            900: '#4c1d95',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="min-h-full bg-gradient-to-br from-primary-50 to-secondary-50">
+    <main class="container mx-auto px-4 py-12">
+        <div class="text-center mb-16">
+            <h1 class="text-5xl font-bold text-primary-800 mb-4">PixelPulse Palette Explorer</h1>
+            <p class="text-xl text-secondary-700 max-w-2xl mx-auto">Discover the perfect color combinations for your next project</p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Color Card 1 -->
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:scale-105 hover:shadow-xl">
+                <div class="h-48 bg-primary-500"></div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-primary-800 mb-2">Primary Palette</h3>
+                    <p class="text-secondary-600 mb-4">A soothing blue gradient perfect for interfaces</p>
+                    <div class="flex space-x-2">
+                        <div class="w-8 h-8 rounded-full bg-primary-300"></div>
+                        <div class="w-8 h-8 rounded-full bg-primary-500"></div>
+                        <div class="w-8 h-8 rounded-full bg-primary-700"></div>
+                        <div class="w-8 h-8 rounded-full bg-primary-900"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Color Card 2 -->
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:scale-105 hover:shadow-xl">
+                <div class="h-48 bg-secondary-500"></div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-secondary-800 mb-2">Secondary Palette</h3>
+                    <p class="text-primary-600 mb-4">Vibrant purple tones for accents and highlights</p>
+                    <div class="flex space-x-2">
+                        <div class="w-8 h-8 rounded-full bg-secondary-300"></div>
+                        <div class="w-8 h-8 rounded-full bg-secondary-500"></div>
+                        <div class="w-8 h-8 rounded-full bg-secondary-700"></div>
+                        <div class="w-8 h-8 rounded-full bg-secondary-900"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Color Card 3 -->
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:scale-105 hover:shadow-xl">
+                <div class="h-48 bg-gradient-to-r from-primary-400 to-secondary-400"></div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-primary-800 mb-2">Combination</h3>
+                    <p class="text-secondary-600 mb-4">How primary and secondary colors work together</p>
+                    <div class="flex space-x-2">
+                        <div class="w-8 h-8 rounded-full bg-primary-500"></div>
+                        <div class="w-8 h-8 rounded-full bg-secondary-500"></div>
+                        <div class="w-8 h-8 rounded-full bg-primary-300"></div>
+                        <div class="w-8 h-8 rounded-full bg-secondary-300"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="mt-16 bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto">
+            <h2 class="text-3xl font-bold text-primary-800 mb-6">Color Usage Examples</h2>
+            <div class="space-y-6">
+                <div>
+                    <h3 class="text-xl font-semibold text-secondary-700 mb-3">Buttons</h3>
+                    <div class="flex flex-wrap gap-4">
+                        <button class="px-6 py-3 rounded-lg bg-primary-500 text-white hover:bg-primary-600 transition-colors">Primary Action</button>
+                        <button class="px-6 py-3 rounded-lg bg-secondary-500 text-white hover:bg-secondary-600 transition-colors">Secondary Action</button>
+                        <button class="px-6 py-3 rounded-lg border-2 border-primary-500 text-primary-500 hover:bg-primary-50 transition-colors">Outline</button>
+                    </div>
+                </div>
+                <div>
+                    <h3 class="text-xl font-semibold text-secondary-700 mb-3">Alerts</h3>
+                    <div class="space-y-3">
+                        <div class="p-4 rounded-lg bg-primary-100 text-primary-800 border-l-4 border-primary-500">
+                            <div class="flex items-center">
+                                <i data-feather="info" class="mr-2"></i>
+                                <span>This is an informational message</span>
+                            </div>
+                        </div>
+                        <div class="p-4 rounded-lg bg-secondary-100 text-secondary-800 border-l-4 border-secondary-500">
+                            <div class="flex items-center">
+                                <i data-feather="alert-circle" class="mr-2"></i>
+                                <span>This is a secondary alert</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer class="bg-primary-900 text-white py-8 mt-16">
+        <div class="container mx-auto px-4 text-center">
+            <p>© 2023 PixelPulse Palette Explorer. All colors reserved.</p>
+            <div class="flex justify-center space-x-4 mt-4">
+                <a href="#" class="hover:text-secondary-300 transition-colors">
+                    <i data-feather="github"></i>
+                </a>
+                <a href="#" class="hover:text-secondary-300 transition-colors">
+                    <i data-feather="twitter"></i>
+                </a>
+                <a href="#" class="hover:text-secondary-300 transition-colors">
+                    <i data-feather="instagram"></i>
+                </a>
+            </div>
+        </div>
+    </footer>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,29 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips for color swatches
+    const colorSwatches = document.querySelectorAll('.color-swatch');
+    colorSwatches.forEach(swatch => {
+        const color = swatch.style.backgroundColor;
+        swatch.setAttribute('title', color);
+        swatch.addEventListener('click', function() {
+            navigator.clipboard.writeText(color).then(() => {
+                const originalText = swatch.textContent;
+                swatch.textContent = 'Copied!';
+                setTimeout(() => {
+                    swatch.textContent = originalText;
+                }, 2000);
+            });
+        });
+    });
+    // Smooth scroll for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,44 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
+/* Animation for color cards */
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    50% {
+        transform: scale(1.05);
+        opacity: 0.8;
+    }
+    100% {
+        transform: scale(1);
+        opacity: 1;
+    }
 }
+.hover\:animate-pulse:hover {
+    animation: pulse 2s infinite;
+}