Hugging Face's logo

Spaces:
Mechanicom
/
deepsite-test
Running

App Files Community
deepsite-test / index.html
Mechanicom's picture
Mechanicom
add an image into this block - how do I give you an image? - Follow Up Deployment
b375ac5 verified
Raw History Blame Contribute Delete
16.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive UI Showcase</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6366f1',
secondary: '#8b5cf6',
accent: '#ec4899',
dark: '#1e293b',
light: '#f8fafc'
},
animation: {
'float': 'float 3s ease-in-out infinite',
'pulse-slow': 'pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'box-enter': 'boxEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards',
'pulse-glow': 'pulseGlow 4s ease-in-out infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' }
},
float: {
'0%, 100%': { transform: 'translateY(0) rotate(0deg)' },
'50%': { transform: 'translateY(-10px) rotate(2deg)' },
},
boxEnter: {
'0%': {
opacity: '0',
transform: 'translateY(30px) scale(0.9)',
filter: 'blur(2px)'
},
'100%': {
opacity: '1',
transform: 'translateY(0) scale(1)',
filter: 'blur(0)'
}
},
pulseGlow: {
'0%, 100%': { boxShadow: '0 0 0 0 rgba(99, 102, 241, 0.3)' },
'50%': { boxShadow: '0 0 20px 5px rgba(99, 102, 241, 0.6)' }
}
}
}
}
}
</script>
<style>
.custom-shape {
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
@media (max-width: 768px) {
.custom-shape {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body class="bg-gradient-to-br from-dark to-gray-900 min-h-screen text-light font-sans">
<!-- Floating background elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none">
<div class="absolute top-1/4 left-1/4 w-16 h-16 rounded-full bg-primary/20 blur-xl animate-pulse-slow"></div>
<div class="absolute top-1/3 right-1/3 w-24 h-24 rounded-full bg-secondary/20 blur-xl animate-pulse-slow delay-300"></div>
<div class="absolute bottom-1/4 right-1/4 w-20 h-20 rounded-full bg-accent/20 blur-xl animate-pulse-slow delay-700"></div>
</div>
<!-- Header with animated gradient -->
<header class="custom-shape bg-gradient-to-r from-primary to-secondary py-20 relative overflow-hidden">
<div class="container mx-auto px-6 text-center relative z-10">
<h1 class="text-5xl md:text-7xl font-bold mb-6 animate-float">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-accent to-yellow-300">
Hello There!
</span>
</h1>
<p class="text-xl md:text-2xl max-w-2xl mx-auto opacity-90">
Welcome to this interactive UI showcase built with TailwindCSS
</p>
<div class="mt-10 flex justify-center space-x-4">
<button class="px-8 py-3 rounded-full bg-white text-dark font-semibold hover:bg-gray-100 transition-all transform hover:scale-105 shadow-lg">
Get Started
</button>
<button class="px-8 py-3 rounded-full glass-effect font-semibold hover:bg-white/20 transition-all transform hover:scale-105">
Learn More
</button>
</div>
</div>
</header>
<!-- Main content -->
<main class="container mx-auto px-6 py-16 -mt-10 relative z-20">
<!-- Feature cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
<div class="glass-effect p-8 rounded-2xl hover:bg-white/5 transition-all group">
<div class="w-16 h-16 bg-primary/20 rounded-xl flex items-center justify-center mb-6 group-hover:bg-primary/30 transition-all">
<i class="fas fa-rocket text-2xl text-primary"></i>
</div>
<h3 class="text-xl font-bold mb-3">Lightning Fast</h3>
<p class="text-gray-300">Optimized for performance with minimal overhead and maximum efficiency.</p>
</div>
<div class="glass-effect p-8 rounded-2xl hover:bg-white/5 transition-all group">
<div class="w-16 h-16 bg-secondary/20 rounded-xl flex items-center justify-center mb-6 group-hover:bg-secondary/30 transition-all">
<i class="fas fa-mobile-alt text-2xl text-secondary"></i>
</div>
<h3 class="text-xl font-bold mb-3">Fully Responsive</h3>
<p class="text-gray-300">Looks great on any device, from mobile phones to large desktop screens.</p>
</div>
<div class="glass-effect p-8 rounded-2xl hover:bg-white/5 transition-all group">
<div class="w-16 h-16 bg-accent/20 rounded-xl flex items-center justify-center mb-6 group-hover:bg-accent/30 transition-all">
<i class="fas fa-palette text-2xl text-accent"></i>
</div>
<h3 class="text-xl font-bold mb-3">Customizable</h3>
<p class="text-gray-300">Easily modify colors, spacing, and components to match your brand.</p>
</div>
</div>
<!-- Interactive demo section -->
<div class="glass-effect rounded-3xl overflow-hidden mb-20">
<div class="md:flex">
<div class="md:w-1/2 p-10">
<h2 class="text-3xl font-bold mb-6">Interactive Color Picker</h2>
<p class="text-gray-300 mb-8">Try changing the theme colors below to see the UI update in real-time.</p>
<div class="space-y-6">
<div>
<label class="block mb-2">Primary Color</label>
<input type="color" id="primaryColor" value="#6366f1" class="w-full h-12 cursor-pointer">
</div>
<div>
<label class="block mb-2">Secondary Color</label>
<input type="color" id="secondaryColor" value="#8b5cf6" class="w-full h-12 cursor-pointer">
</div>
<div>
<label class="block mb-2">Accent Color</label>
<input type="color" id="accentColor" value="#ec4899" class="w-full h-12 cursor-pointer">
</div>
</div>
</div>
<div class="md:w-1/2 bg-dark/50 p-10 flex items-center justify-center">
<div class="text-center">
<div class="relative w-48 h-48 mx-auto mb-6 group">
<!-- Replace this div with your actual image -->
<div class="w-full h-full rounded-xl bg-gradient-to-br from-primary to-secondary shadow-xl
overflow-hidden animate-[fadeIn_0.5s_ease-out]">
<!-- Image placeholder - replace this with <img> tag -->
<div class="w-full h-full flex items-center justify-center text-white">
<i class="fas fa-image text-4xl opacity-70"></i>
</div>
</div>
<div class="absolute inset-0 border-2 border-white/20 rounded-xl
group-hover:border-primary/50 transition-all duration-300 pointer-events-none
animate-[pulseGlow_4s_ease-in-out_infinite]"></div>
</div>
<h3 class="text-xl font-semibold mb-2 animate-[fadeIn_0.5s_ease-out_0.1s_forwards] opacity-0">Preview</h3>
<p class="text-gray-400 animate-[fadeIn_0.5s_ease-out_0.2s_forwards] opacity-0">Your custom color scheme</p>
</div>
</div>
</div>
</div>
<!-- Enhanced animated stats -->
<div class="text-center mb-20">
<h2 class="text-3xl font-bold mb-4 animate-[fadeIn_1s_ease-out]">Why Choose This UI?</h2>
<p class="text-gray-400 max-w-2xl mx-auto mb-12 animate-[fadeIn_1s_ease-out_0.2s_forwards] opacity-0">
Here are some impressive numbers that showcase the power of this design system.
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
<div class="glass-effect p-6 rounded-xl transform transition-all hover:scale-105 hover:animate-pulse-glow group">
<div class="text-4xl font-bold text-primary mb-2 group-hover:text-white transition-colors duration-300" id="counter1">0</div>
<div class="text-gray-400 group-hover:text-primary transition-colors duration-300">Components</div>
</div>
<div class="glass-effect p-6 rounded-xl transform transition-all hover:scale-105 hover:animate-pulse-glow group delay-100">
<div class="text-4xl font-bold text-secondary mb-2 group-hover:text-white transition-colors duration-300" id="counter2">0</div>
<div class="text-gray-400 group-hover:text-secondary transition-colors duration-300">Happy Clients</div>
</div>
<div class="glass-effect p-6 rounded-xl transform transition-all hover:scale-105 hover:animate-pulse-glow group delay-200">
<div class="text-4xl font-bold text-accent mb-2 group-hover:text-white transition-colors duration-300" id="counter3">0</div>
<div class="text-gray-400 group-hover:text-accent transition-colors duration-300">Lines of Code</div>
</div>
<div class="glass-effect p-6 rounded-xl transform transition-all hover:scale-105 hover:animate-pulse-glow group delay-300">
<div class="text-4xl font-bold text-yellow-400 mb-2 group-hover:text-white transition-colors duration-300" id="counter4">0</div>
<div class="text-gray-400 group-hover:text-yellow-400 transition-colors duration-300">Cups of Coffee</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-dark/80 py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<div class="text-2xl font-bold mb-2">UI Showcase</div>
<p class="text-gray-400">Built with TailwindCSS, HTML & JavaScript</p>
</div>
<div class="flex space-x-6">
<a href="#" class="w-10 h-10 rounded-full glass-effect flex items-center justify-center hover:bg-primary/30 hover:text-primary transition-all">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full glass-effect flex items-center justify-center hover:bg-secondary/30 hover:text-secondary transition-all">
<i class="fab fa-github"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full glass-effect flex items-center justify-center hover:bg-accent/30 hover:text-accent transition-all">
<i class="fab fa-linkedin"></i>
</a>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-500">
&copy; 2023 UI Showcase. All rights reserved.
</div>
</div>
</footer>
<script>
// Color picker functionality
const primaryColor = document.getElementById('primaryColor');
const secondaryColor = document.getElementById('secondaryColor');
const accentColor = document.getElementById('accentColor');
function updateColors() {
document.documentElement.style.setProperty('--tw-color-primary', primaryColor.value);
document.documentElement.style.setProperty('--tw-color-secondary', secondaryColor.value);
document.documentElement.style.setProperty('--tw-color-accent', accentColor.value);
// Update Tailwind config
tailwind.config = {
theme: {
extend: {
colors: {
primary: primaryColor.value,
secondary: secondaryColor.value,
accent: accentColor.value
}
}
}
}
}
primaryColor.addEventListener('input', updateColors);
secondaryColor.addEventListener('input', updateColors);
accentColor.addEventListener('input', updateColors);
// Animated counters
function animateCounter(elementId, target, duration = 2000) {
const element = document.getElementById(elementId);
const start = 0;
const increment = target / (duration / 16);
let current = start;
const timer = setInterval(() => {
current += increment;
if (current >= target) {
clearInterval(timer);
current = target;
}
element.textContent = Math.floor(current);
}, 16);
}
// Start animations when they come into view
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const boxes = entry.target.querySelectorAll('.animate-float');
boxes.forEach((box, index) => {
setTimeout(() => {
box.classList.add('animate-box-enter');
}, index * 100);
});
animateCounter('counter1', 45);
animateCounter('counter2', 128);
animateCounter('counter3', 8750);
animateCounter('counter4', 256);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.3 });
const countersSection = document.querySelector('.text-center.mb-20');
observer.observe(countersSection);
</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=Mechanicom/deepsite-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>