n / index.html
GMA2's picture
Add 2 files
0de8e86 verified
Raw History Blame Contribute Delete
28.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customizable UI Component</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.custom-scrollbar::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
background: #555;
}
.gradient-bg {
background: linear-gradient(var(--gradient-angle, 135deg), var(--gradient-color1, #6366f1), var(--gradient-color2, #8b5cf6));
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.font-sans {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font-serif {
font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.font-mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
</style>
</head>
<body class="bg-gray-100 font-sans">
<div class="container mx-auto p-4 max-w-6xl">
<!-- Customization Panel -->
<div class="bg-white rounded-xl shadow-lg p-6 mb-8">
<h2 class="text-2xl font-bold mb-6 text-gray-800">UI Customizer</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Color Scheme -->
<div class="space-y-4">
<h3 class="font-semibold text-gray-700">Color Scheme</h3>
<div class="flex flex-wrap gap-2">
<button onclick="changeTheme('blue')" class="w-8 h-8 rounded-full bg-blue-500 hover:ring-2 ring-blue-300"></button>
<button onclick="changeTheme('red')" class="w-8 h-8 rounded-full bg-red-500 hover:ring-2 ring-red-300"></button>
<button onclick="changeTheme('green')" class="w-8 h-8 rounded-full bg-green-500 hover:ring-2 ring-green-300"></button>
<button onclick="changeTheme('purple')" class="w-8 h-8 rounded-full bg-purple-500 hover:ring-2 ring-purple-300"></button>
<button onclick="changeTheme('indigo')" class="w-8 h-8 rounded-full bg-indigo-500 hover:ring-2 ring-indigo-300"></button>
<button onclick="changeTheme('pink')" class="w-8 h-8 rounded-full bg-pink-500 hover:ring-2 ring-pink-300"></button>
</div>
</div>
<!-- Gradient Settings -->
<div class="space-y-4">
<h3 class="font-semibold text-gray-700">Gradient</h3>
<div class="flex items-center gap-4">
<div>
<label class="block text-sm text-gray-600 mb-1">Color 1</label>
<input type="color" id="gradientColor1" value="#6366f1" class="w-10 h-10 cursor-pointer">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Color 2</label>
<input type="color" id="gradientColor2" value="#8b5cf6" class="w-10 h-10 cursor-pointer">
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Angle</label>
<select id="gradientAngle" class="border rounded px-2 py-1 text-sm">
<option value="0deg">0°</option>
<option value="45deg">45°</option>
<option value="90deg">90°</option>
<option value="135deg" selected>135°</option>
<option value="180deg">180°</option>
</select>
</div>
</div>
</div>
<!-- Layout Options -->
<div class="space-y-4">
<h3 class="font-semibold text-gray-700">Layout</h3>
<div class="flex items-center gap-4">
<div>
<label class="inline-flex items-center">
<input type="checkbox" id="roundedCorners" checked class="rounded text-indigo-600">
<span class="ml-2 text-sm text-gray-600">Rounded Corners</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="checkbox" id="shadowEnabled" checked class="rounded text-indigo-600">
<span class="ml-2 text-sm text-gray-600">Shadows</span>
</label>
</div>
</div>
<div class="flex items-center gap-4">
<div>
<label class="block text-sm text-gray-600 mb-1">Card Style</label>
<select id="cardStyle" class="border rounded px-2 py-1 text-sm">
<option value="solid">Solid</option>
<option value="outline">Outline</option>
<option value="gradient">Gradient</option>
</select>
</div>
</div>
</div>
<!-- Animation Options -->
<div class="space-y-4">
<h3 class="font-semibold text-gray-700">Animation</h3>
<div class="flex items-center gap-4">
<div>
<label class="inline-flex items-center">
<input type="checkbox" id="hoverAnimation" checked class="rounded text-indigo-600">
<span class="ml-2 text-sm text-gray-600">Hover Effects</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="checkbox" id="pulseAnimation" class="rounded text-indigo-600">
<span class="ml-2 text-sm text-gray-600">Pulse Effect</span>
</label>
</div>
</div>
</div>
<!-- Font Options -->
<div class="space-y-4">
<h3 class="font-semibold text-gray-700">Typography</h3>
<div class="flex items-center gap-4">
<div>
<label class="block text-sm text-gray-600 mb-1">Font Family</label>
<select id="fontFamily" class="border rounded px-2 py-1 text-sm">
<option value="sans">Sans-serif</option>
<option value="serif">Serif</option>
<option value="mono">Monospace</option>
</select>
</div>
<div>
<label class="block text-sm text-gray-600 mb-1">Font Size</label>
<select id="fontSize" class="border rounded px-2 py-1 text-sm">
<option value="sm">Small</option>
<option value="base" selected>Medium</option>
<option value="lg">Large</option>
</select>
</div>
</div>
</div>
<!-- Reset Button -->
<div class="flex items-end">
<button onclick="resetCustomization()" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700 text-sm font-medium transition">
<i class="fas fa-undo mr-2"></i> Reset to Default
</button>
</div>
</div>
</div>
<!-- Customizable UI Component -->
<div id="customizableComponent" class="gradient-bg rounded-xl shadow-lg overflow-hidden transition-all duration-300">
<div class="p-6 text-white">
<div class="flex justify-between items-center mb-6">
<h2 class="text-2xl font-bold">Customizable Card</h2>
<div class="flex space-x-2">
<button class="p-2 rounded-full hover:bg-white/20 transition">
<i class="fas fa-heart"></i>
</button>
<button class="p-2 rounded-full hover:bg-white/20 transition">
<i class="fas fa-share-alt"></i>
</button>
<button class="p-2 rounded-full hover:bg-white/20 transition">
<i class="fas fa-ellipsis-h"></i>
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="bg-white/20 backdrop-blur-sm p-4 rounded-lg hover:scale-[1.02] transition">
<div class="flex items-center mb-3">
<div class="p-2 rounded-full bg-white/30 mr-3">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="font-semibold">Analytics</h3>
</div>
<p class="text-sm opacity-90">Track your performance metrics and gain valuable insights.</p>
</div>
<div class="bg-white/20 backdrop-blur-sm p-4 rounded-lg hover:scale-[1.02] transition">
<div class="flex items-center mb-3">
<div class="p-2 rounded-full bg-white/30 mr-3">
<i class="fas fa-cog"></i>
</div>
<h3 class="font-semibold">Settings</h3>
</div>
<p class="text-sm opacity-90">Customize your preferences and configure system options.</p>
</div>
<div class="bg-white/20 backdrop-blur-sm p-4 rounded-lg hover:scale-[1.02] transition">
<div class="flex items-center mb-3">
<div class="p-2 rounded-full bg-white/30 mr-3">
<i class="fas fa-bell"></i>
</div>
<h3 class="font-semibold">Notifications</h3>
</div>
<p class="text-sm opacity-90">Stay updated with real-time alerts and messages.</p>
</div>
</div>
<div class="bg-white/10 rounded-lg p-4 mb-6">
<div class="flex items-center justify-between mb-3">
<h3 class="font-semibold">Recent Activity</h3>
<button class="text-xs hover:underline">View All</button>
</div>
<div class="space-y-3 max-h-40 overflow-y-auto custom-scrollbar">
<div class="flex items-center p-2 hover:bg-white/10 rounded">
<div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center mr-3">
<i class="fas fa-user text-xs"></i>
</div>
<div class="flex-1">
<p class="text-sm font-medium">New user registered</p>
<p class="text-xs opacity-75">2 minutes ago</p>
</div>
</div>
<div class="flex items-center p-2 hover:bg-white/10 rounded">
<div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center mr-3">
<i class="fas fa-file-invoice-dollar text-xs"></i>
</div>
<div class="flex-1">
<p class="text-sm font-medium">Invoice #1234 paid</p>
<p class="text-xs opacity-75">15 minutes ago</p>
</div>
</div>
<div class="flex items-center p-2 hover:bg-white/10 rounded">
<div class="w-8 h-8 rounded-full bg-white/20 flex items-center justify-center mr-3">
<i class="fas fa-comment text-xs"></i>
</div>
<div class="flex-1">
<p class="text-sm font-medium">New comment received</p>
<p class="text-xs opacity-75">1 hour ago</p>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap gap-3">
<button id="primaryBtn" class="px-4 py-2 bg-white text-indigo-600 rounded-lg font-medium hover:bg-opacity-90 transition">
Primary Action
</button>
<button class="px-4 py-2 border border-white text-white rounded-lg font-medium hover:bg-white/10 transition">
Secondary Action
</button>
</div>
</div>
</div>
</div>
<script>
// Default theme colors
const themes = {
blue: {
primary: 'bg-blue-500',
gradient1: '#3b82f6',
gradient2: '#6366f1',
textColor: 'text-blue-600'
},
red: {
primary: 'bg-red-500',
gradient1: '#ef4444',
gradient2: '#f97316',
textColor: 'text-red-600'
},
green: {
primary: 'bg-green-500',
gradient1: '#10b981',
gradient2: '#3b82f6',
textColor: 'text-green-600'
},
purple: {
primary: 'bg-purple-500',
gradient1: '#8b5cf6',
gradient2: '#ec4899',
textColor: 'text-purple-600'
},
indigo: {
primary: 'bg-indigo-500',
gradient1: '#6366f1',
gradient2: '#8b5cf6',
textColor: 'text-indigo-600'
},
pink: {
primary: 'bg-pink-500',
gradient1: '#ec4899',
gradient2: '#f97316',
textColor: 'text-pink-600'
}
};
// Current theme
let currentTheme = 'indigo';
// Change theme
function changeTheme(theme) {
currentTheme = theme;
document.getElementById('gradientColor1').value = themes[theme].gradient1;
document.getElementById('gradientColor2').value = themes[theme].gradient2;
updateGradient();
// Update primary button color
const primaryBtn = document.getElementById('primaryBtn');
if (primaryBtn) {
// Remove all possible color classes first
Object.values(themes).forEach(t => {
primaryBtn.classList.remove(t.textColor);
});
// Add the new color class
primaryBtn.classList.add(themes[theme].textColor);
}
}
// Update gradient background
function updateGradient() {
const color1 = document.getElementById('gradientColor1').value;
const color2 = document.getElementById('gradientColor2').value;
const angle = document.getElementById('gradientAngle').value;
const component = document.getElementById('customizableComponent');
component.style.setProperty('--gradient-color1', color1);
component.style.setProperty('--gradient-color2', color2);
component.style.setProperty('--gradient-angle', angle);
}
// Update rounded corners
function updateCorners() {
const rounded = document.getElementById('roundedCorners').checked;
const component = document.getElementById('customizableComponent');
const innerCards = document.querySelectorAll('.rounded-lg');
if (rounded) {
component.classList.add('rounded-xl');
innerCards.forEach(card => card.classList.add('rounded-lg'));
} else {
component.classList.remove('rounded-xl');
innerCards.forEach(card => card.classList.remove('rounded-lg'));
}
}
// Update shadows
function updateShadows() {
const shadowEnabled = document.getElementById('shadowEnabled').checked;
const component = document.getElementById('customizableComponent');
const innerCards = document.querySelectorAll('.bg-white\\/20');
if (shadowEnabled) {
component.classList.add('shadow-lg');
innerCards.forEach(card => card.classList.add('shadow-md'));
} else {
component.classList.remove('shadow-lg');
innerCards.forEach(card => card.classList.remove('shadow-md'));
}
}
// Update card style
function updateCardStyle() {
const style = document.getElementById('cardStyle').value;
const component = document.getElementById('customizableComponent');
const content = component.querySelector('.p-6');
const innerCards = component.querySelectorAll('.bg-white\\/20, .bg-white\\/10');
const buttons = component.querySelectorAll('button');
// Reset all styles first
component.classList.remove('gradient-bg', 'bg-white', 'border', 'border-gray-200');
content.classList.remove('text-white', 'text-gray-800');
// Reset inner cards
innerCards.forEach(card => {
card.classList.remove('bg-white/20', 'bg-white/10', 'bg-gray-100', 'border', 'border-gray-200');
card.classList.remove('text-white', 'text-gray-800');
});
// Reset buttons
buttons.forEach(btn => {
if (!btn.classList.contains('p-2')) { // Skip icon buttons
btn.classList.remove('bg-white', 'border', 'border-white');
btn.classList.remove('text-white', 'text-gray-800');
}
});
// Apply selected style
if (style === 'solid') {
component.classList.add('bg-white');
content.classList.add('text-gray-800');
innerCards.forEach(card => {
card.classList.add('bg-gray-100', 'text-gray-800');
});
buttons.forEach(btn => {
if (!btn.classList.contains('p-2')) { // Skip icon buttons
if (btn.classList.contains('bg-white')) {
btn.classList.add('bg-gray-800', 'text-white');
btn.classList.remove('bg-white');
} else if (btn.classList.contains('border')) {
btn.classList.add('border', 'border-gray-800', 'text-gray-800');
}
}
});
} else if (style === 'outline') {
component.classList.add('border', 'border-gray-200', 'bg-white');
content.classList.add('text-gray-800');
innerCards.forEach(card => {
card.classList.add('border', 'border-gray-200', 'text-gray-800');
});
buttons.forEach(btn => {
if (!btn.classList.contains('p-2')) { // Skip icon buttons
if (btn.classList.contains('bg-white')) {
btn.classList.add('bg-gray-800', 'text-white');
btn.classList.remove('bg-white');
} else if (btn.classList.contains('border')) {
btn.classList.add('border', 'border-gray-800', 'text-gray-800');
}
}
});
} else if (style === 'gradient') {
component.classList.add('gradient-bg');
content.classList.add('text-white');
innerCards.forEach(card => {
if (card.classList.contains('bg-white/10')) {
card.classList.add('bg-white/10', 'text-white');
} else {
card.classList.add('bg-white/20', 'text-white');
}
});
buttons.forEach(btn => {
if (!btn.classList.contains('p-2')) { // Skip icon buttons
if (btn.classList.contains('bg-white')) {
btn.classList.add('bg-white', themes[currentTheme].textColor);
} else if (btn.classList.contains('border')) {
btn.classList.add('border', 'border-white', 'text-white');
}
}
});
}
}
// Update animations
function updateAnimations() {
const hoverEnabled = document.getElementById('hoverAnimation').checked;
const pulseEnabled = document.getElementById('pulseAnimation').checked;
const hoverElements = document.querySelectorAll('.bg-white\\/20, .bg-white\\/10, button');
const component = document.getElementById('customizableComponent');
if (hoverEnabled) {
hoverElements.forEach(el => {
if (el.classList.contains('bg-white/20') || el.classList.contains('bg-white/10')) {
el.classList.add('hover:scale-[1.02]');
} else if (el.classList.contains('p-2')) {
el.classList.add('hover:bg-white/20');
} else if (el.classList.contains('bg-white')) {
el.classList.add('hover:bg-opacity-90');
} else if (el.classList.contains('border')) {
el.classList.add('hover:bg-white/10');
}
});
} else {
hoverElements.forEach(el => {
el.classList.remove('hover:scale-[1.02]', 'hover:bg-white/20', 'hover:bg-opacity-90', 'hover:bg-white/10');
});
}
if (pulseEnabled) {
component.classList.add('animate-pulse-slow');
} else {
component.classList.remove('animate-pulse-slow');
}
}
// Update typography
function updateTypography() {
const fontFamily = document.getElementById('fontFamily').value;
const fontSize = document.getElementById('fontSize').value;
const body = document.body;
// Reset font classes
body.classList.remove('font-sans', 'font-serif', 'font-mono');
body.classList.remove('text-sm', 'text-base', 'text-lg');
// Apply selected font family
if (fontFamily === 'sans') {
body.classList.add('font-sans');
} else if (fontFamily === 'serif') {
body.classList.add('font-serif');
} else if (fontFamily === 'mono') {
body.classList.add('font-mono');
}
// Apply selected font size
if (fontSize === 'sm') {
body.classList.add('text-sm');
} else if (fontSize === 'base') {
body.classList.add('text-base');
} else if (fontSize === 'lg') {
body.classList.add('text-lg');
}
}
// Reset all customization
function resetCustomization() {
// Reset theme
changeTheme('indigo');
// Reset gradient
document.getElementById('gradientAngle').value = '135deg';
updateGradient();
// Reset layout
document.getElementById('roundedCorners').checked = true;
document.getElementById('shadowEnabled').checked = true;
document.getElementById('cardStyle').value = 'gradient';
updateCorners();
updateShadows();
updateCardStyle();
// Reset animations
document.getElementById('hoverAnimation').checked = true;
document.getElementById('pulseAnimation').checked = false;
updateAnimations();
// Reset typography
document.getElementById('fontFamily').value = 'sans';
document.getElementById('fontSize').value = 'base';
updateTypography();
}
// Event listeners for real-time updates
document.getElementById('gradientColor1').addEventListener('input', updateGradient);
document.getElementById('gradientColor2').addEventListener('input', updateGradient);
document.getElementById('gradientAngle').addEventListener('change', updateGradient);
document.getElementById('roundedCorners').addEventListener('change', updateCorners);
document.getElementById('shadowEnabled').addEventListener('change', updateShadows);
document.getElementById('cardStyle').addEventListener('change', updateCardStyle);
document.getElementById('hoverAnimation').addEventListener('change', updateAnimations);
document.getElementById('pulseAnimation').addEventListener('change', updateAnimations);
document.getElementById('fontFamily').addEventListener('change', updateTypography);
document.getElementById('fontSize').addEventListener('change', updateTypography);
// Initialize
document.addEventListener('DOMContentLoaded', () => {
resetCustomization();
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=GMA2/n" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>