Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Art or Garbage? | Image Analysis Game</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> | |
| .art-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .art-card:hover { | |
| transform: translateY(-5px) rotateY(5deg); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .result-badge { | |
| transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); | |
| } | |
| .flip-in { | |
| animation: flipIn 0.6s ease-out forwards; | |
| } | |
| @keyframes flipIn { | |
| from { transform: rotateX(90deg); opacity: 0; } | |
| to { transform: rotateX(0); opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-gray-100 to-gray-200 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-4"> | |
| <span class="text-indigo-600">Art</span> or | |
| <span class="text-amber-600">Garbage</span>? | |
| </h1> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Test your artistic discernment! Analyze these images and decide - | |
| is it a masterpiece or should it be taken out with the trash? | |
| </p> | |
| <div class="mt-6 flex justify-center"> | |
| <div class="bg-white rounded-full shadow-lg px-6 py-2 flex items-center"> | |
| <span class="text-indigo-600 font-medium mr-2">Score:</span> | |
| <span id="score" class="text-2xl font-bold text-gray-800">0</span> | |
| <span class="text-gray-400 mx-2">|</span> | |
| <span class="text-amber-600 font-medium mr-2">Streak:</span> | |
| <span id="streak" class="text-2xl font-bold text-gray-800">0</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Game Area --> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Current Image --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8 art-card"> | |
| <div class="relative pt-[56.25%] bg-gray-200"> | |
| <img id="current-image" src="https://source.unsplash.com/random/800x450/?art" alt="Art or garbage?" | |
| class="absolute inset-0 w-full h-full object-cover"> | |
| <div id="result-overlay" class="absolute inset-0 bg-black bg-opacity-70 flex items-center justify-center hidden"> | |
| <div id="result-text" class="text-white text-4xl font-bold p-6 rounded-lg"></div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2" id="image-title">Untitled Artwork</h3> | |
| <p class="text-gray-600 mb-4" id="image-description">A mysterious creation waiting for your judgment</p> | |
| <!-- Voting Buttons --> | |
| <div class="flex flex-wrap gap-4 justify-center"> | |
| <button id="art-btn" class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-full transition flex items-center"> | |
| <i class="fas fa-palette mr-2"></i> It's Art! | |
| </button> | |
| <button id="garbage-btn" class="px-8 py-3 bg-amber-600 hover:bg-amber-700 text-white font-bold rounded-full transition flex items-center"> | |
| <i class="fas fa-trash-alt mr-2"></i> It's Garbage! | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feedback Area --> | |
| <div id="feedback-area" class="hidden"> | |
| <div class="bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">The Verdict</h3> | |
| <div id="feedback-content" class="text-gray-700"> | |
| <!-- Dynamic content will be inserted here --> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <button id="next-btn" class="px-6 py-2 bg-gray-800 hover:bg-gray-900 text-white font-medium rounded-full transition"> | |
| Next Challenge <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Challenge Progress</span> | |
| <span id="progress-text" class="text-sm font-medium text-gray-700">1/10</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div id="progress-bar" class="bg-indigo-600 h-2.5 rounded-full" style="width: 10%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Info Section --> | |
| <div class="max-w-4xl mx-auto mt-12 bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6 md:p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">About This Game</h2> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2 flex items-center"> | |
| <i class="fas fa-question-circle text-indigo-600 mr-2"></i> How to Play | |
| </h3> | |
| <p class="text-gray-600 mb-4"> | |
| You'll be shown various images - some are famous artworks, others are... questionable creations. | |
| Your job is to decide whether each image qualifies as art or garbage. | |
| </p> | |
| <p class="text-gray-600"> | |
| You'll earn points for correct answers and bonus points for streaks of correct guesses! | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2 flex items-center"> | |
| <i class="fas fa-lightbulb text-amber-600 mr-2"></i> The Philosophy | |
| </h3> | |
| <p class="text-gray-600"> | |
| This game explores the subjective nature of art. What one person considers a masterpiece, | |
| another might see as trash. There are no wrong answers - only interesting perspectives! | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Game data | |
| const challenges = [ | |
| { | |
| image: "https://source.unsplash.com/random/800x450/?painting", | |
| title: "Abstract Composition", | |
| description: "Colorful shapes arranged in dynamic balance", | |
| isArt: true, | |
| feedback: "Correct! This is a classic example of abstract expressionism, valued for its emotional intensity and innovative use of color." | |
| }, | |
| { | |
| image: "https://source.unsplash.com/random/800x450/?trash", | |
| title: "Dumpster Findings", | |
| description: "Assorted discarded items in an urban setting", | |
| isArt: false, | |
| feedback: "Good call! While some artists work with found objects, this appears to be literal garbage with no artistic intent." | |
| }, | |
| { | |
| image: "https://source.unsplash.com/random/800x450/?sculpture", | |
| title: "Modern Sculpture", | |
| description: "Geometric metal forms in a public space", | |
| isArt: true, | |
| feedback: "Yes! This is a recognized public sculpture by a contemporary artist, commissioned for this location." | |
| }, | |
| { | |
| image: "https://source.unsplash.com/random/800x450/?graffiti", | |
| title: "Street Art", | |
| description: "Vibrant spray paint on a brick wall", | |
| isArt: true, | |
| feedback: "Absolutely! Street art has gained recognition in the art world for its cultural commentary and aesthetic innovation." | |
| }, | |
| { | |
| image: "https://source.unsplash.com/random/800x450/?broken", | |
| title: "Damaged Furniture", | |
| description: "Old chair with broken legs and torn upholstery", | |
| isArt: false, | |
| feedback: "Right! While some artists might repurpose this, in its current state it's just broken furniture." | |
| }, | |
| { | |
| image: "https://source.unsplash.com/random/800x450/?installation", | |
| title: "Conceptual Installation", | |
| description: "Unusual objects arranged in a gallery", | |
| isArt: true, | |
| feedback: "Correct! This is an intentional art installation meant to provoke thought about consumer culture." | |
| }, | |
| { | |
| image: "https://source.unsplash.com/random/800x450/?mess", | |
| title: "Cluttered Desk", | |
| description: "Papers, cups, and office supplies in disarray", | |
| isArt: false, | |
| feedback: "Good judgment! While the chaos might be aesthetically interesting, this appears to be an actual messy workspace." | |
| }, | |
| { | |
| image: "https://source.unsplash.com/random/800x450/?performance", | |
| title: "Performance Piece", | |
| description: "Person in unusual costume in public space", | |
| isArt: true, | |
| feedback: "Yes! Performance art uses the artist's body as medium, often to challenge social norms." | |
| }, | |
| { | |
| image: "https://source.unsplash.com/random/800x450/?spill", | |
| title: "Coffee Stain", | |
| description: "Random pattern created by spilled liquid", | |
| isArt: false, | |
| feedback: "Right! While the pattern might be beautiful, it lacks the intentionality we associate with art." | |
| }, | |
| { | |
| image: "https://source.unsplash.com/random/800x450/?readymade", | |
| title: "Found Object", | |
| description: "Ordinary item displayed in a museum context", | |
| isArt: true, | |
| feedback: "Correct! This references Marcel Duchamp's 'readymades' that challenged definitions of art." | |
| } | |
| ]; | |
| // Game state | |
| let currentChallenge = 0; | |
| let score = 0; | |
| let streak = 0; | |
| let gameInProgress = true; | |
| // DOM elements | |
| const currentImage = document.getElementById('current-image'); | |
| const imageTitle = document.getElementById('image-title'); | |
| const imageDescription = document.getElementById('image-description'); | |
| const artBtn = document.getElementById('art-btn'); | |
| const garbageBtn = document.getElementById('garbage-btn'); | |
| const feedbackArea = document.getElementById('feedback-area'); | |
| const feedbackContent = document.getElementById('feedback-content'); | |
| const nextBtn = document.getElementById('next-btn'); | |
| const resultOverlay = document.getElementById('result-overlay'); | |
| const resultText = document.getElementById('result-text'); | |
| const scoreElement = document.getElementById('score'); | |
| const streakElement = document.getElementById('streak'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const progressText = document.getElementById('progress-text'); | |
| // Initialize game | |
| function loadChallenge(index) { | |
| if (index >= challenges.length) { | |
| endGame(); | |
| return; | |
| } | |
| const challenge = challenges[index]; | |
| currentImage.src = challenge.image; | |
| currentImage.alt = challenge.title; | |
| imageTitle.textContent = challenge.title; | |
| imageDescription.textContent = challenge.description; | |
| // Reset UI | |
| feedbackArea.classList.add('hidden'); | |
| resultOverlay.classList.add('hidden'); | |
| artBtn.disabled = false; | |
| garbageBtn.disabled = false; | |
| // Update progress | |
| progressBar.style.width = `${(index + 1) * 10}%`; | |
| progressText.textContent = `${index + 1}/${challenges.length}`; | |
| } | |
| // Handle user choice | |
| function makeChoice(isArtChoice) { | |
| if (!gameInProgress) return; | |
| const challenge = challenges[currentChallenge]; | |
| const isCorrect = (isArtChoice === challenge.isArt); | |
| // Disable buttons during feedback | |
| artBtn.disabled = true; | |
| garbageBtn.disabled = true; | |
| // Show result overlay with animation | |
| resultOverlay.classList.remove('hidden'); | |
| resultText.textContent = isCorrect ? "CORRECT!" : "WRONG!"; | |
| resultText.className = `text-4xl font-bold p-6 rounded-lg ${isCorrect ? 'bg-green-500' : 'bg-red-500'}`; | |
| resultText.classList.add('flip-in'); | |
| // Update score and streak | |
| if (isCorrect) { | |
| score += 10; | |
| streak += 1; | |
| // Bonus for streaks | |
| if (streak >= 3) { | |
| score += streak * 5; | |
| } | |
| } else { | |
| streak = 0; | |
| } | |
| scoreElement.textContent = score; | |
| streakElement.textContent = streak; | |
| // Show feedback | |
| feedbackArea.classList.remove('hidden'); | |
| feedbackContent.innerHTML = ` | |
| <div class="flex items-start mb-4"> | |
| <div class="mr-4 mt-1"> | |
| <div class="w-12 h-12 rounded-full ${isCorrect ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'} flex items-center justify-center"> | |
| <i class="fas ${isCorrect ? 'fa-check' : 'fa-times'} text-2xl"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg ${isCorrect ? 'text-green-600' : 'text-red-600'}">${isCorrect ? 'Good Judgment!' : 'Oops!'}</h4> | |
| <p class="text-gray-600">${challenge.feedback}</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="text-gray-700"><span class="font-semibold">Fun Fact:</span> ${getRandomArtFact()}</p> | |
| </div> | |
| `; | |
| } | |
| // Move to next challenge | |
| function nextChallenge() { | |
| currentChallenge++; | |
| if (currentChallenge < challenges.length) { | |
| loadChallenge(currentChallenge); | |
| } else { | |
| endGame(); | |
| } | |
| } | |
| // End game | |
| function endGame() { | |
| gameInProgress = false; | |
| feedbackArea.classList.remove('hidden'); | |
| feedbackContent.innerHTML = ` | |
| <div class="text-center py-8"> | |
| <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-trophy text-indigo-600 text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Game Complete!</h3> | |
| <p class="text-gray-600 mb-6">Your final score: <span class="text-2xl font-bold text-indigo-600">${score}</span></p> | |
| <p class="text-gray-600 mb-6">Longest streak: <span class="text-xl font-bold text-amber-600">${getHighestStreak()}</span></p> | |
| <button onclick="location.reload()" class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-full transition"> | |
| Play Again <i class="fas fa-redo ml-2"></i> | |
| </button> | |
| </div> | |
| `; | |
| } | |
| // Helper functions | |
| function getRandomArtFact() { | |
| const facts = [ | |
| "In 1917, Marcel Duchamp submitted a urinal titled 'Fountain' to an art exhibition, revolutionizing what could be considered art.", | |
| "The most expensive artwork ever sold is Leonardo da Vinci's 'Salvator Mundi' for $450.3 million in 2017.", | |
| "Banksy's 'Girl with Balloon' partially shredded itself immediately after being sold at auction for $1.4 million.", | |
| "The Mona Lisa has its own mailbox in the Louvre for love letters it receives.", | |
| "Jackson Pollock's painting technique was called 'drip painting' where he would fling and pour paint onto horizontal canvases.", | |
| "The term 'abstract art' was first used by Wassily Kandinsky in 1910.", | |
| "Yoko Ono's 1964 performance art piece 'Cut Piece' involved audience members cutting away her clothing.", | |
| "The art installation 'The Weather Project' by Olafur Eliasson at Tate Modern attracted over 2 million visitors." | |
| ]; | |
| return facts[Math.floor(Math.random() * facts.length)]; | |
| } | |
| function getHighestStreak() { | |
| // This would track the highest streak during game | |
| // For simplicity, we'll just return the final streak | |
| return streak; | |
| } | |
| // Event listeners | |
| artBtn.addEventListener('click', () => makeChoice(true)); | |
| garbageBtn.addEventListener('click', () => makeChoice(false)); | |
| nextBtn.addEventListener('click', nextChallenge); | |
| // Start the game | |
| loadChallenge(0); | |
| </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=Suovartelad/art-or-garbage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |