| <!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"> |
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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> |
| <script src="components/header.js"></script> |
| <script src="components/footer.js"></script> |
| </body> |
| </html> |
