Spaces:

zaid3sa
/

d

Running

App Files Files Community

d / index.html

zaid3sa

Add 2 files

066451e verified about 1 year ago

raw

history blame contribute delete

13.3 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Modern Testimonial with Continuous Lighting Effects</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>
	.testimonial-card {
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
	isolation: isolate;
	}

	.light-effect {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0;
	z-index: -1;
	}

	.light-1 {
	width: 250px;
	height: 250px;
	top: -50px;
	left: -50px;
	}

	.light-2 {
	width: 200px;
	height: 200px;
	bottom: -30px;
	right: -30px;
	}

	.light-3 {
	width: 180px;
	height: 180px;
	top: 50%;
	left: 70%;
	}

	.light-4 {
	width: 220px;
	height: 220px;
	bottom: 20%;
	left: 10%;
	}

	@keyframes float-1 {
	0% {
	transform: translate(0, 0);
	opacity: 0.6;
	}
	25% {
	transform: translate(20px, 20px);
	opacity: 0.8;
	}
	50% {
	transform: translate(0, 40px);
	opacity: 1;
	}
	75% {
	transform: translate(-20px, 20px);
	opacity: 0.8;
	}
	100% {
	transform: translate(0, 0);
	opacity: 0.6;
	}
	}

	@keyframes float-2 {
	0% {
	transform: translate(0, 0) rotate(0deg);
	opacity: 0.6;
	}
	25% {
	transform: translate(-30px, 10px) rotate(10deg);
	opacity: 0.8;
	}
	50% {
	transform: translate(-20px, 30px) rotate(20deg);
	opacity: 1;
	}
	75% {
	transform: translate(10px, 20px) rotate(10deg);
	opacity: 0.8;
	}
	100% {
	transform: translate(0, 0) rotate(0deg);
	opacity: 0.6;
	}
	}

	@keyframes float-3 {
	0% {
	transform: translate(0, 0) scale(1);
	opacity: 0.6;
	}
	25% {
	transform: translate(15px, -15px) scale(1.1);
	opacity: 0.8;
	}
	50% {
	transform: translate(30px, 0) scale(1.2);
	opacity: 1;
	}
	75% {
	transform: translate(15px, 15px) scale(1.1);
	opacity: 0.8;
	}
	100% {
	transform: translate(0, 0) scale(1);
	opacity: 0.6;
	}
	}

	@keyframes float-4 {
	0% {
	transform: translate(0, 0) skew(0deg);
	opacity: 0.6;
	}
	25% {
	transform: translate(-10px, 25px) skew(5deg);
	opacity: 0.8;
	}
	50% {
	transform: translate(0, 50px) skew(0deg);
	opacity: 1;
	}
	75% {
	transform: translate(10px, 25px) skew(-5deg);
	opacity: 0.8;
	}
	100% {
	transform: translate(0, 0) skew(0deg);
	opacity: 0.6;
	}
	}

	.quote-icon {
	position: absolute;
	top: 20px;
	right: 20px;
	opacity: 0.1;
	font-size: 60px;
	color: #6366f1;
	}

	@keyframes avatar-float {
	0%, 100% {
	transform: translateY(0);
	}
	50% {
	transform: translateY(-10px);
	}
	}

	.avatar {
	animation: avatar-float 4s ease-in-out infinite;
	box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.4);
	}

	.content-wrapper {
	position: relative;
	z-index: 10;
	backdrop-filter: blur(10px);
	background: rgba(31, 41, 55, 0.7);
	border-radius: 0.75rem;
	padding: 2rem;
	}

	.stars {
	position: relative;
	display: inline-block;
	}

	.stars::after {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 9999px;
	z-index: -1;
	filter: blur(5px);
	}
	</style>
	</head>
	<body class="bg-gray-900 min-h-screen flex items-center justify-center p-4">
	<div class="testimonial-card max-w-md w-full rounded-xl shadow-2xl relative">
	<!-- Colored light effects -->
	<div class="light-effect light-1"></div>
	<div class="light-effect light-2"></div>
	<div class="light-effect light-3"></div>
	<div class="light-effect light-4"></div>

	<div class="content-wrapper">
	<i class="fas fa-quote-right quote-icon"></i>

	<div class="flex flex-col items-center mb-6">
	<div class="avatar w-20 h-20 rounded-full overflow-hidden border-4 border-indigo-500/20 mb-4">
	<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover">
	</div>
	<div class="text-center">
	<h3 class="text-xl font-bold text-white">Sarah Johnson</h3>
	<p class="text-indigo-300 text-sm">Marketing Director</p>
	</div>
	</div>

	<div class="relative">
	<p class="text-gray-200 mb-6 text-center italic">
	"This service completely transformed our workflow. The team was professional, responsive, and delivered beyond our expectations. Our productivity increased by 40% in just two weeks!"
	</p>

	<div class="stars flex justify-center space-x-1">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	</div>
	</div>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', function() {
	const lightEffects = [
	document.querySelector('.light-1'),
	document.querySelector('.light-2'),
	document.querySelector('.light-3'),
	document.querySelector('.light-4')
	];

	const colorPalettes = [
	['#6366f1', '#ec4899', '#10b981', '#f59e0b'], // Purple, Pink, Green, Amber
	['#3b82f6', '#8b5cf6', '#84cc16', '#f97316'], // Blue, Violet, Lime, Orange
	['#ef4444', '#14b8a6', '#a855f7', '#eab308'], // Red, Teal, Purple, Yellow
	['#06b6d4', '#d946ef', '#f43f5e', '#22c55e'] // Cyan, Fuchsia, Rose, Green
	];

	// Apply different animations to each light
	lightEffects[0].style.animation = 'float-1 12s infinite ease-in-out';
	lightEffects[1].style.animation = 'float-2 15s infinite ease-in-out';
	lightEffects[2].style.animation = 'float-3 10s infinite ease-in-out';
	lightEffects[3].style.animation = 'float-4 18s infinite ease-in-out';

	// Function to cycle through color palettes
	function cycleColors() {
	const paletteIndex = Math.floor(Math.random() * colorPalettes.length);
	const colors = colorPalettes[paletteIndex];

	lightEffects.forEach((light, index) => {
	light.style.background = modifyColor(colors[index], 0.5);

	// Create smooth transition for color change
	light.style.transition = 'background 8s ease-in-out';

	// Remove transition after it's done
	setTimeout(() => {
	light.style.transition = '';
	}, 8000);
	});

	// Change quote icon color to match first light
	document.querySelector('.quote-icon').style.color = colors[0];

	return colors;
	}

	// Helper function to modify color opacity
	function modifyColor(hex, opacity) {
	const r = parseInt(hex.slice(1, 3), 16);
	const g = parseInt(hex.slice(3, 5), 16);
	const b = parseInt(hex.slice(5, 7), 16);

	return `rgba(${r}, ${g}, ${b}, ${opacity})`;
	}

	// Initialize colors and start cycling
	cycleColors();
	setInterval(cycleColors, 8000);

	// Change colors faster on hover for more interactivity
	const card = document.querySelector('.testimonial-card');
	card.addEventListener('mouseenter', () => {
	const interval = setInterval(cycleColors, 2000);
	card.addEventListener('mouseleave', () => {
	clearInterval(interval);
	setTimeout(cycleColors, 2000);
	});
	});

	// Testimonial rotation (optional)
	const testimonials = [
	{
	name: "Sarah Johnson",
	role: "Marketing Director",
	quote: "This service completely transformed our workflow. The team was professional, responsive, and delivered beyond our expectations. Our productivity increased by 40% in just two weeks!",
	image: "https://randomuser.me/api/portraits/women/44.jpg"
	},
	{
	name: "Michael Chen",
	role: "CTO, TechStart",
	quote: "The implementation was seamless and the support team was incredibly helpful. We've seen a 30% reduction in operational costs since adopting this solution.",
	image: "https://randomuser.me/api/portraits/men/32.jpg"
	},
	{
	name: "Emma Rodriguez",
	role: "Product Manager",
	quote: "I was skeptical at first, but the results speak for themselves. Our customer satisfaction scores have never been higher!",
	image: "https://randomuser.me/api/portraits/women/65.jpg"
	}
	];

	let currentTestimonial = 0;

	function rotateTestimonial() {
	currentTestimonial = (currentTestimonial + 1) % testimonials.length;
	const testimonial = testimonials[currentTestimonial];

	// Update content
	card.querySelector('h3').textContent = testimonial.name;
	card.querySelector('p.text-indigo-300').textContent = testimonial.role;
	card.querySelector('p.text-gray-200').textContent = `"${testimonial.quote}"`;
	card.querySelector('.avatar img').src = testimonial.image;

	// Add animation class
	card.querySelector('.content-wrapper').classList.add('opacity-0', 'scale-95');
	setTimeout(() => {
	card.querySelector('.content-wrapper').classList.remove('opacity-0', 'scale-95');
	}, 500);
	}

	// Uncomment to enable auto-rotation of testimonials
	// setInterval(rotateTestimonial, 5000);
	});
	</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=zaid3sa/d" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
	</html>