Spaces:

Dofla
/

pixel-palette-explorer

Running

App Files Files Community

Dofla commited on 24 days ago

Commit

55fb2cf

verified ·

1 Parent(s): de73e31

le site ne souvre pas

Browse files

Files changed (5) hide show

README.md +7 -4
components/color-card.js +91 -0
index.html +92 -19
script.js +15 -0
style.css +18 -18

README.md CHANGED Viewed

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

 ---
+title: Pixel Palette Explorer 🎨
 colorFrom: pink
+colorTo: purple
+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,91 @@

+class ColorCard extends HTMLElement {
+    constructor() {
+        super();
+    }
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+    }
+    render() {
+        const color = this.getAttribute('color') || 'primary-500';
+        const title = this.getAttribute('title') || 'Color Card';
+        const description = this.getAttribute('description') || 'Beautiful color palette';
+        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);
+                    transition: all 0.2s ease;
+                }
+                .card:hover {
+                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+                    transform: translateY(-2px);
+                }
+                .color-display {
+                    height: 12rem;
+                    width: 100%;
+                    background-color: var(--color, #6366f1);
+                }
+                .content {
+                    padding: 1.5rem;
+                }
+                h3 {
+                    font-size: 1.25rem;
+                    font-weight: 600;
+                    margin-bottom: 0.5rem;
+                    color: #1f2937;
+                }
+                p {
+                    color: #6b7280;
+                    margin-bottom: 1rem;
+                }
+                a {
+                    display: inline-flex;
+                    align-items: center;
+                    color: var(--color, #6366f1);
+                    font-weight: 500;
+                }
+                a:hover {
+                    color: var(--color-dark, #4f46e5);
+                }
+                i {
+                    margin-left: 0.5rem;
+                    width: 1rem;
+                    height: 1rem;
+                }
+            </style>
+            <div class="card">
+                <div class="color-display" style="--color: var(--tw-${color})"></div>
+                <div class="content">
+                    <h3>${title}</h3>
+                    <p>${description}</p>
+                    <a href="#">
+                        Explore
+                        <i data-feather="arrow-right"></i>
+                    </a>
+                </div>
+            </div>
+        `;
+        // Initialize feather icons within the shadow DOM
+        if (window.feather) {
+            window.feather.replace({ class: 'feather', 'stroke-width': 2 });
+        }
+    }
+}
+customElements.define('color-card', ColorCard);

index.html CHANGED Viewed

@@ -1,19 +1,92 @@
-<!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.0">
+    <title>Pixel 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: {
+                            500: '#6366f1',
+                        },
+                        secondary: {
+                            500: '#ec4899',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <main class="container mx-auto px-4 py-12">
+        <div class="text-center mb-16">
+            <h1 class="text-5xl font-bold text-primary-500 mb-4">Pixel Palette Explorer</h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Discover the perfect color combinations for your next project</p>
+        </div>
+        <div class="grid md:grid-cols-3 gap-8">
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl">
+                <div class="h-48 bg-gradient-to-r from-primary-500 to-secondary-500"></div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Color Generator</h3>
+                    <p class="text-gray-600 mb-4">Generate beautiful color palettes instantly</p>
+                    <a href="#" class="inline-flex items-center text-primary-500 hover:text-primary-600">
+                        Explore
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl">
+                <div class="h-48 bg-gradient-to-r from-yellow-400 to-pink-500"></div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Popular Palettes</h3>
+                    <p class="text-gray-600 mb-4">Browse trending color combinations</p>
+                    <a href="#" class="inline-flex items-center text-primary-500 hover:text-primary-600">
+                        Explore
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
+            </div>
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl">
+                <div class="h-48 bg-gradient-to-r from-green-400 to-blue-500"></div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Save Favorites</h3>
+                    <p class="text-gray-600 mb-4">Create your personal color library</p>
+                    <a href="#" class="inline-flex items-center text-primary-500 hover:text-primary-600">
+                        Explore
+                        <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="mt-16 bg-white rounded-xl shadow-lg p-8">
+            <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">Color Inspiration</h2>
+            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                <div class="h-16 rounded-lg bg-primary-500"></div>
+                <div class="h-16 rounded-lg bg-secondary-500"></div>
+                <div class="h-16 rounded-lg bg-indigo-500"></div>
+                <div class="h-16 rounded-lg bg-pink-500"></div>
+                <div class="h-16 rounded-lg bg-yellow-500"></div>
+                <div class="h-16 rounded-lg bg-green-500"></div>
+            </div>
+        </div>
+    </main>
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,15 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize any interactive elements here
+    console.log('Pixel Palette Explorer loaded!');
+    // Example: Add click event to color swatches
+    const colorSwatches = document.querySelectorAll('[class*="bg-"]');
+    colorSwatches.forEach(swatch => {
+        swatch.addEventListener('click', function() {
+            const colorClass = Array.from(this.classList)
+                .find(cls => cls.startsWith('bg-'));
+            const colorName = colorClass ? colorClass.replace('bg-', '') : 'unknown';
+            console.log(`Selected color: ${colorName}`);
+        });
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,28 @@
 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', sans-serif;
 }
+/* Smooth transitions for interactive elements */
+a, button {
+    transition: all 0.2s ease;
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
+}