Spaces:

bmadityas
/

rainbow-unicorn-dashboard

Running

App Files Files Community

bmadityas commited on Dec 19, 2025

Commit

1cd97be

verified ·

1 Parent(s): 3437d19

Hi

Browse files

Files changed (6) hide show

README.md +8 -5
components/footer.js +38 -0
components/header.js +49 -0
index.html +125 -19
script.js +68 -0
style.css +18 -24

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Rainbow Unicorn Dashboard
-emoji: 🌖
-colorFrom: purple
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Rainbow Unicorn Dashboard 🦄
+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).

components/footer.js ADDED Viewed

	@@ -0,0 +1,38 @@

+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        footer {
+          background: white;
+          border-top: 1px solid rgba(0,0,0,0.1);
+        }
+      </style>
+      <footer class="py-6 mt-8">
+        <div class="container mx-auto px-4">
+          <div class="flex flex-col md:flex-row justify-between items-center">
+            <div class="mb-4 md:mb-0">
+              <p class="text-sm text-gray-600">© 2023 Rainbow Unicorn Dashboard. All magic reserved.</p>
+            </div>
+            <div class="flex space-x-4">
+              <a href="#" class="text-gray-500 hover:text-purple-500 transition">
+                <i data-feather="twitter"></i>
+              </a>
+              <a href="#" class="text-gray-500 hover:text-purple-500 transition">
+                <i data-feather="instagram"></i>
+              </a>
+              <a href="#" class="text-gray-500 hover:text-purple-500 transition">
+                <i data-feather="github"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+customElements.define('custom-footer', CustomFooter);

components/header.js ADDED Viewed

	@@ -0,0 +1,49 @@

+class CustomHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+        }
+        header {
+          background: white;
+          box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        .rainbow-text {
+          background: linear-gradient(
+            90deg,
+            rgba(255, 0, 0, 1) 0%,
+            rgba(255, 154, 0, 1) 20%,
+            rgba(208, 222, 33, 1) 40%,
+            rgba(79, 220, 74, 1) 60%,
+            rgba(63, 218, 216, 1) 80%,
+            rgba(47, 201, 226, 1) 100%
+          );
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
+        }
+      </style>
+      <header class="py-4">
+        <div class="container mx-auto px-4 flex justify-between items-center">
+          <div class="flex items-center">
+            <i data-feather="award" class="mr-2" style="width: 28px; height: 28px;"></i>
+            <h1 class="text-2xl font-bold rainbow-text">Rainbow Unicorn Dashboard</h1>
+          </div>
+          <nav class="hidden md:flex space-x-6">
+            <a href="#" class="hover:text-purple-500 transition">Home</a>
+            <a href="#" class="hover:text-purple-500 transition">Magic</a>
+            <a href="#" class="hover:text-purple-500 transition">Rainbows</a>
+            <a href="#" class="hover:text-purple-500 transition">Settings</a>
+          </nav>
+          <button class="md:hidden">
+            <i data-feather="menu"></i>
+          </button>
+        </div>
+      </header>
+    `;
+  }
+}
+customElements.define('custom-header', CustomHeader);

index.html CHANGED Viewed

@@ -1,19 +1,125 @@
-<!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>Rainbow Unicorn Dashboard</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>
+    <style>
+        .rainbow-gradient {
+            background: linear-gradient(
+                90deg,
+                rgba(255, 0, 0, 1) 0%,
+                rgba(255, 154, 0, 1) 10%,
+                rgba(208, 222, 33, 1) 20%,
+                rgba(79, 220, 74, 1) 30%,
+                rgba(63, 218, 216, 1) 40%,
+                rgba(47, 201, 226, 1) 50%,
+                rgba(28, 127, 238, 1) 60%,
+                rgba(95, 21, 242, 1) 70%,
+                rgba(186, 12, 248, 1) 80%,
+                rgba(251, 7, 217, 1) 90%,
+                rgba(255, 0, 0, 1) 100%
+            );
+        }
+    </style>
+</head>
+<body class="bg-gray-100 min-h-screen">
+    <custom-header></custom-header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <!-- Rainbow Stats Card -->
+            <div class="bg-white rounded-xl shadow-md overflow-hidden rainbow-gradient p-1">
+                <div class="bg-white p-6 rounded-lg">
+                    <div class="flex items-center">
+                        <i data-feather="activity" class="text-purple-500 mr-3"></i>
+                        <h3 class="text-lg font-semibold">Unicorn Metrics</h3>
+                    </div>
+                    <div class="mt-4">
+                        <div class="flex justify-between py-2 border-b">
+                            <span>Magic Power</span>
+                            <span class="font-bold">87%</span>
+                        </div>
+                        <div class="flex justify-between py-2 border-b">
+                            <span>Rainbow Production</span>
+                            <span class="font-bold">64%</span>
+                        </div>
+                        <div class="flex justify-between py-2">
+                            <span>Happiness Level</span>
+                            <span class="font-bold">99%</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Image Card -->
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="p-6">
+                    <h3 class="text-lg font-semibold mb-4">Your Unicorn Companion</h3>
+                    <img src="http://static.photos/fantasy/640x360/42" alt="Unicorn" class="w-full h-48 object-cover rounded-lg">
+                    <button class="mt-4 w-full py-2 rainbow-gradient text-white rounded-lg font-bold hover:opacity-90 transition">
+                        Pet the Unicorn
+                    </button>
+                </div>
+            </div>
+            <!-- Rainbow Progress -->
+            <div class="bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="p-6">
+                    <h3 class="text-lg font-semibold mb-4">Rainbow Progress</h3>
+                    <div class="space-y-4">
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span>Red</span>
+                                <span>75%</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                <div class="bg-red-500 h-2.5 rounded-full" style="width: 75%"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span>Orange</span>
+                                <span>60%</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                <div class="bg-orange-500 h-2.5 rounded-full" style="width: 60%"></div>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="flex justify-between mb-1">
+                                <span>Yellow</span>
+                                <span>85%</span>
+                            </div>
+                            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                                <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 85%"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Rainbow Chart -->
+        <div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden p-6">
+            <h3 class="text-lg font-semibold mb-4">Weekly Rainbow Production</h3>
+            <div class="h-64">
+                <canvas id="rainbowChart"></canvas>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,68 @@

+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize Chart.js
+    const ctx = document.getElementById('rainbowChart').getContext('2d');
+    const rainbowChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            datasets: [
+                {
+                    label: 'Rainbow Intensity',
+                    data: [12, 19, 3, 17, 6, 3, 20],
+                    backgroundColor: 'rgba(255, 99, 132, 0.2)',
+                    borderColor: 'rgba(255, 99, 132, 1)',
+                    borderWidth: 2,
+                    tension: 0.4
+                },
+                {
+                    label: 'Magic Sparkles',
+                    data: [2, 9, 13, 7, 16, 13, 10],
+                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
+                    borderColor: 'rgba(54, 162, 235, 1)',
+                    borderWidth: 2,
+                    tension: 0.4
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                y: {
+                    beginAtZero: true,
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)'
+                    }
+                },
+                x: {
+                    grid: {
+                        color: 'rgba(0, 0, 0, 0.05)'
+                    }
+                }
+            },
+            plugins: {
+                legend: {
+                    labels: {
+                        font: {
+                            family: "'Comic Sans MS', cursive, sans-serif"
+                        }
+                    }
+                }
+            }
+        }
+    });
+    // Make unicorn pet button interactive
+    const petButton = document.querySelector('button');
+    petButton.addEventListener('click', function() {
+        const messages = [
+            "The unicorn nuzzles you affectionately!",
+            "Sparkles fly everywhere! ✨",
+            "The unicorn does a happy dance!",
+            "You hear magical chimes in the distance..."
+        ];
+        const randomMessage = messages[Math.floor(Math.random() * messages.length)];
+        alert(randomMessage);
+    });
+});

style.css CHANGED Viewed

@@ -1,28 +1,22 @@
-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;
-}

+/* Rainbow glow animation */
+@keyframes rainbow-glow {
+    0% { box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); }
+    10% { box-shadow: 0 0 10px rgba(255, 154, 0, 0.7); }
+    20% { box-shadow: 0 0 10px rgba(208, 222, 33, 0.7); }
+    30% { box-shadow: 0 0 10px rgba(79, 220, 74, 0.7); }
+    40% { box-shadow: 0 0 10px rgba(63, 218, 216, 0.7); }
+    50% { box-shadow: 0 0 10px rgba(47, 201, 226, 0.7); }
+    60% { box-shadow: 0 0 10px rgba(28, 127, 238, 0.7); }
+    70% { box-shadow: 0 0 10px rgba(95, 21, 242, 0.7); }
+    80% { box-shadow: 0 0 10px rgba(186, 12, 248, 0.7); }
+    90% { box-shadow: 0 0 10px rgba(251, 7, 217, 0.7); }
+    100% { box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); }
 }
+.rainbow-glow {
+    animation: rainbow-glow 5s infinite;
 }
+body {
+    font-family: 'Comic Sans MS', cursive, sans-serif;
+}