Spaces:
Running
Running
| <html><head><base href="https://websim.ai"/><title>Drunk Image Search - Blurry Vision Edition</title><style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: #f0f0f0; | |
| margin: 0; | |
| padding: 20px; | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| h1 { | |
| color: #333; | |
| text-align: center; | |
| animation: wobble 2s infinite; | |
| } | |
| .search-bar { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 20px; | |
| } | |
| #search-input { | |
| width: 70%; | |
| padding: 10px; | |
| font-size: 16px; | |
| border: 2px solid #ddd; | |
| border-radius: 5px 0 0 5px; | |
| } | |
| #search-button { | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| background-color: #4CAF50; | |
| color: white; | |
| border: none; | |
| border-radius: 0 5px 5px 0; | |
| cursor: pointer; | |
| } | |
| .results { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-around; | |
| } | |
| .image-container { | |
| width: 200px; | |
| margin: 10px; | |
| text-align: center; | |
| } | |
| .image-container img { | |
| width: 100%; | |
| height: auto; | |
| border-radius: 5px; | |
| transition: transform 0.3s ease; | |
| } | |
| .image-container img:hover { | |
| transform: scale(1.1); | |
| } | |
| @keyframes wobble { | |
| 0% { transform: translateX(0); } | |
| 25% { transform: translateX(-5px) rotate(-5deg); } | |
| 50% { transform: translateX(5px) rotate(5deg); } | |
| 75% { transform: translateX(-5px) rotate(-5deg); } | |
| 100% { transform: translateX(0); } | |
| } | |
| .blurry { | |
| filter: blur(3px); | |
| } | |
| </style></head><body> | |
| <div class="container"> | |
| <h1>Drunk Image Search</h1> | |
| <div class="search-bar"> | |
| <input type="text" id="search-input" placeholder="What are you looking for?"> | |
| <button id="search-button">Search</button> | |
| </div> | |
| <div class="results"> | |
| <div class="image-container"> | |
| <img src="https://source.unsplash.com/random/200x200?beer" alt="Random beer image" class="blurry"> | |
| </div> | |
| <div class="image-container"> | |
| <img src="https://source.unsplash.com/random/200x200?wine" alt="Random wine image" class="blurry"> | |
| </div> | |
| <div class="image-container"> | |
| <img src="https://source.unsplash.com/random/200x200?cocktail" alt="Random cocktail image" class="blurry"> | |
| </div> | |
| <div class="image-container"> | |
| <img src="https://source.unsplash.com/random/200x200?party" alt="Random party image" class="blurry"> | |
| </div> | |
| <div class="image-container"> | |
| <img src="https://source.unsplash.com/random/200x200?drunk" alt="Random drunk image" class="blurry"> | |
| </div> | |
| <div class="image-container"> | |
| <img src="https://source.unsplash.com/random/200x200?hangover" alt="Random hangover image" class="blurry"> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('search-button').addEventListener('click', function() { | |
| alert("Whoa there! You're too drunk to search right now. Try again when the room stops spinning!"); | |
| }); | |
| document.querySelectorAll('.image-container img').forEach(img => { | |
| img.addEventListener('mouseover', function() { | |
| this.style.transform = `rotate(${Math.random() * 20 - 10}deg) scale(1.1)`; | |
| }); | |
| img.addEventListener('mouseout', function() { | |
| this.style.transform = 'rotate(0deg) scale(1)'; | |
| }); | |
| }); | |
| let wobbleAmount = 5; | |
| setInterval(() => { | |
| document.body.style.transform = `translateX(${Math.random() * wobbleAmount - wobbleAmount/2}px)`; | |
| }, 100); | |
| </script> | |
| </body></html> |