| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PixelFlow Carousel</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/react@18/umd/react.development.js"></script> |
| <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> |
| <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| .zoom-effect { |
| transition: transform 0.3s ease; |
| } |
| .zoom-effect:hover { |
| transform: scale(1.03); |
| } |
| .skeleton { |
| background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); |
| background-size: 200% 100%; |
| animation: shimmer 1.5s infinite; |
| } |
| @keyframes shimmer { |
| 0% { background-position: 200% 0; } |
| 100% { background-position: -200% 0; } |
| } |
| .dark .skeleton { |
| background: linear-gradient(90deg, #2d3748 25%, #4a5568 50%, #2d3748 75%); |
| } |
| .carousel-transition { |
| transition: opacity 0.5s ease, transform 0.5s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-white dark:bg-gray-900 transition-colors duration-300"> |
| <div id="root"></div> |
|
|
| <script type="text/babel"> |
| const { useState, useEffect, useRef } = React; |
| |
| const ImageCarousel = () => { |
| const [images, setImages] = useState([]); |
| const [currentIndex, setCurrentIndex] = useState(0); |
| const [isLoading, setIsLoading] = useState(true); |
| const [error, setError] = useState(null); |
| const [isAutoPlaying, setIsAutoPlaying] = useState(true); |
| const [apiSource, setApiSource] = useState('unsplash'); |
| const [darkMode, setDarkMode] = useState(false); |
| const timerRef = useRef(null); |
| const carouselRef = useRef(null); |
| |
| const API_CONFIG = { |
| unsplash: { |
| url: '', |
| params: {}, |
| transform: () => [] |
| }, |
| pexels: { |
| url: '', |
| params: {}, |
| transform: () => [] |
| }, |
| pixabay: { |
| url: '', |
| params: {}, |
| transform: () => [] |
| } |
| }; |
| |
| const fetchImages = async () => { |
| setIsLoading(true); |
| setError(null); |
| |
| try { |
| const config = API_CONFIG[apiSource]; |
| |
| setImages(Array(5).fill().map((_, i) => ({ |
| url: `http://static.photos/nature/1024x576/${i+1}`, |
| alt: `Placeholder Image ${i+1}`, |
| author: 'Placeholder Author', |
| authorUrl: '#' |
| }))); |
| return; |
| const data = await response.json(); |
| |
| if (!response.ok) throw new Error(data.message || 'Failed to fetch images'); |
| |
| setImages(config.transform(data)); |
| } catch (err) { |
| console.error('Error fetching images:', err); |
| setError(err.message || 'Failed to load images. Please try again.'); |
| |
| setImages(Array(5).fill().map((_, i) => ({ |
| url: `http://static.photos/nature/1024x576/${i+1}`, |
| alt: `Placeholder Image ${i+1}`, |
| author: 'Placeholder Author', |
| authorUrl: '#' |
| }))); |
| } finally { |
| setIsLoading(false); |
| } |
| }; |
| |
| useEffect(() => { |
| fetchImages(); |
| }, [apiSource]); |
| |
| useEffect(() => { |
| if (isAutoPlaying && images.length > 0) { |
| timerRef.current = setInterval(() => { |
| setCurrentIndex(prev => (prev + 1) % images.length); |
| }, 5000); |
| } |
| return () => clearInterval(timerRef.current); |
| }, [isAutoPlaying, images.length]); |
| |
| const goToPrev = () => { |
| setCurrentIndex(prev => (prev - 1 + images.length) % images.length); |
| resetTimer(); |
| }; |
| |
| const goToNext = () => { |
| setCurrentIndex(prev => (prev + 1) % images.length); |
| resetTimer(); |
| }; |
| |
| const goToIndex = (index) => { |
| setCurrentIndex(index); |
| resetTimer(); |
| }; |
| |
| const resetTimer = () => { |
| if (isAutoPlaying) { |
| clearInterval(timerRef.current); |
| timerRef.current = setInterval(() => { |
| setCurrentIndex(prev => (prev + 1) % images.length); |
| }, 5000); |
| } |
| }; |
| |
| const toggleAutoPlay = () => { |
| setIsAutoPlaying(prev => !prev); |
| }; |
| |
| const toggleDarkMode = () => { |
| setDarkMode(prev => !prev); |
| document.body.classList.toggle('dark'); |
| }; |
| |
| if (error) { |
| return ( |
| <div className="flex flex-col items-center justify-center min-h-screen p-4"> |
| <div className="bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 p-4 rounded-lg max-w-md"> |
| <div className="flex items-center"> |
| <i data-feather="alert-triangle" className="mr-2"></i> |
| <h3 className="font-bold">Error Loading Images</h3> |
| </div> |
| <p className="mt-2">{error}</p> |
| <p className="mt-2 text-sm">Using static placeholder images.</p> |
| <button |
| onClick={fetchImages} |
| className="mt-4 bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-md transition-colors" |
| > |
| Retry |
| </button> |
| </div> |
| </div> |
| ); |
| } |
| |
| return ( |
| <div className="min-h-screen flex flex-col items-center justify-center p-4"> |
| <div className="w-full max-w-4xl"> |
| <div className="flex justify-between items-center mb-6"> |
| <h1 className="text-3xl font-bold text-gray-800 dark:text-white">PixelFlow Carousel</h1> |
| <div className="flex space-x-4"> |
| <div className="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white px-3 py-2 rounded-md"> |
| Static Photos |
| </div> |
| <button |
| onClick={toggleDarkMode} |
| className="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200" |
| > |
| <i data-feather={darkMode ? "sun" : "moon"}></i> |
| </button> |
| </div> |
| </div> |
| |
| <div className="relative overflow-hidden rounded-xl shadow-xl"> |
| {isLoading ? ( |
| <div className="aspect-video w-full skeleton rounded-xl"></div> |
| ) : ( |
| <div |
| ref={carouselRef} |
| className="relative aspect-video w-full overflow-hidden" |
| > |
| {images.map((image, index) => ( |
| <div |
| key={index} |
| className={`absolute inset-0 flex items-center justify-center carousel-transition ${index === currentIndex ? 'opacity-100' : 'opacity-0 pointer-events-none'}`} |
| > |
| <div className="relative w-full h-full group"> |
| <img |
| src={image.url} |
| alt={image.alt} |
| className="w-full h-full object-cover zoom-effect" |
| /> |
| <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-end p-6"> |
| <div className="transform translate-y-8 group-hover:translate-y-0 transition-transform duration-300"> |
| <h3 className="text-white text-xl font-bold">{image.alt}</h3> |
| <a |
| href={image.authorUrl} |
| target="_blank" |
| rel="noopener noreferrer" |
| className="text-gray-200 hover:text-white text-sm" |
| > |
| Photo by {image.author} |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| ))} |
| </div> |
| )} |
| |
| {/* Navigation Arrows */} |
| <button |
| onClick={goToPrev} |
| className="absolute left-4 top-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 p-2 rounded-full shadow-md hover:bg-opacity-100 transition-all" |
| disabled={isLoading} |
| > |
| <i data-feather="chevron-left" className="text-gray-800 dark:text-white"></i> |
| </button> |
| <button |
| onClick={goToNext} |
| className="absolute right-4 top-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 p-2 rounded-full shadow-md hover:bg-opacity-100 transition-all" |
| disabled={isLoading} |
| > |
| <i data-feather="chevron-right" className="text-gray-800 dark:text-white"></i> |
| </button> |
| |
| {/* Indicators */} |
| <div className="absolute bottom-4 left-0 right-0 flex justify-center space-x-2"> |
| {images.map((_, index) => ( |
| <button |
| key={index} |
| onClick={() => goToIndex(index)} |
| className={`w-3 h-3 rounded-full ${index === currentIndex ? 'bg-white' : 'bg-white bg-opacity-50'} transition-all`} |
| disabled={isLoading} |
| ></button> |
| ))} |
| </div> |
| |
| {/* Play/Pause Button */} |
| <button |
| onClick={toggleAutoPlay} |
| className="absolute top-4 right-4 bg-white dark:bg-gray-800 bg-opacity-80 dark:bg-opacity-80 p-2 rounded-full shadow-md hover:bg-opacity-100 transition-all" |
| > |
| <i data-feather={isAutoPlaying ? "pause" : "play"} className="text-gray-800 dark:text-white"></i> |
| </button> |
| </div> |
| |
| <div className="mt-6 text-center text-gray-600 dark:text-gray-400"> |
| <p>Browse the static image carousel using navigation controls</p> |
| <div className="mt-2 flex justify-center space-x-4"> |
| <button |
| onClick={fetchImages} |
| className="flex items-center text-sm bg-gray-100 dark:bg-gray-700 px-3 py-1 rounded-md" |
| > |
| <i data-feather="refresh-cw" className="w-4 h-4 mr-1"></i> |
| Refresh Images |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| ); |
| }; |
| |
| const App = () => { |
| return ( |
| <div> |
| <ImageCarousel /> |
| </div> |
| ); |
| }; |
| |
| const root = ReactDOM.createRoot(document.getElementById('root')); |
| root.render(<App />); |
| |
| |
| feather.replace(); |
| </script> |
| </body> |
| </html> |
|
|
