File size: 7,709 Bytes
cc1fb09 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | <!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> |