Spaces:
Running
Running
| <html><head><base href="https://pixabay.com/api/?key=YOUR_API_KEY&q=yellow+flowers&image_type=photo"> | |
| <title>Pixabay API Response - Yellow Flowers</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f4f4f4; | |
| } | |
| header { | |
| background-color: #05a081; | |
| color: white; | |
| text-align: center; | |
| padding: 1em; | |
| margin-bottom: 2em; | |
| border-radius: 8px; | |
| } | |
| h1, h2, h3 { | |
| color: #05a081; | |
| } | |
| .container { | |
| background-color: #fff; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .image-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); | |
| gap: 20px; | |
| } | |
| .image-item { | |
| background-color: #fff; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| transition: transform 0.3s ease; | |
| } | |
| .image-item:hover { | |
| transform: scale(1.05); | |
| } | |
| .image-item img { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| .image-info { | |
| padding: 15px; | |
| } | |
| .stats { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 10px; | |
| font-size: 0.9em; | |
| color: #666; | |
| } | |
| .pagination { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 20px; | |
| } | |
| .pagination button { | |
| background-color: #05a081; | |
| color: white; | |
| border: none; | |
| padding: 10px 15px; | |
| margin: 0 5px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .pagination button:disabled { | |
| background-color: #ccc; | |
| cursor: not-allowed; | |
| } | |
| pre { | |
| background-color: #f8f8f8; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| padding: 15px; | |
| overflow-x: auto; | |
| } | |
| .note { | |
| background-color: #e8f4fd; | |
| border-left: 4px solid #1184e8; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Pixabay API Response</h1> | |
| <p>Search Query: Yellow Flowers</p> | |
| </header> | |
| <div class="container"> | |
| <h2>Search Results</h2> | |
| <p>Displaying 20 out of 500 total results for "yellow flowers"</p> | |
| <div class="image-grid"> | |
| <div class="image-item"> | |
| <img src="https://cdn.pixabay.com/photo/2018/04/05/14/09/sunflower-3292932_150.jpg" alt="Sunflower field"> | |
| <div class="image-info"> | |
| <h3>Sunflower Field</h3> | |
| <p>Tags: sunflower, nature, yellow</p> | |
| <div class="stats"> | |
| <span>👁️ 52,345</span> | |
| <span>❤️ 423</span> | |
| <span>💾 18,721</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="image-item"> | |
| <img src="https://cdn.pixabay.com/photo/2016/07/23/00/12/sunflower-1536088_150.jpg" alt="Close-up of sunflower"> | |
| <div class="image-info"> | |
| <h3>Sunflower Close-up</h3> | |
| <p>Tags: sunflower, flower, yellow</p> | |
| <div class="stats"> | |
| <span>👁️ 38,912</span> | |
| <span>❤️ 356</span> | |
| <span>💾 15,234</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="image-item"> | |
| <img src="https://cdn.pixabay.com/photo/2016/08/28/23/24/sunflower-1627193_150.jpg" alt="Yellow daisy"> | |
| <div class="image-info"> | |
| <h3>Yellow Daisy</h3> | |
| <p>Tags: daisy, flower, yellow</p> | |
| <div class="stats"> | |
| <span>👁️ 27,654</span> | |
| <span>❤️ 289</span> | |
| <span>💾 11,432</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="image-item"> | |
| <img src="https://cdn.pixabay.com/photo/2014/04/14/20/11/flowers-324175_150.jpg" alt="Yellow tulips"> | |
| <div class="image-info"> | |
| <h3>Yellow Tulips</h3> | |
| <p>Tags: tulips, spring, yellow</p> | |
| <div class="stats"> | |
| <span>👁️ 42,123</span> | |
| <span>❤️ 387</span> | |
| <span>💾 16,543</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- More image items would be dynamically added here based on API response --> | |
| </div> | |
| <div class="pagination"> | |
| <button disabled>Previous</button> | |
| <button>Next</button> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <h3>API Response Sample</h3> | |
| <pre> | |
| { | |
| "total": 5743, | |
| "totalHits": 500, | |
| "hits": [ | |
| { | |
| "id": 3292932, | |
| "pageURL": "https://pixabay.com/photos/sunflower-nature-flora-flower-3292932/", | |
| "type": "photo", | |
| "tags": "sunflower, nature, flora", | |
| "previewURL": "https://cdn.pixabay.com/photo/2018/04/05/14/09/sunflower-3292932_150.jpg", | |
| "previewWidth": 150, | |
| "previewHeight": 99, | |
| "webformatURL": "https://pixabay.com/get/g85d4bb2d3c08927b91f62ed13895c21ab80d9e4fb1e2d97ee9764e9896680c72c3afa8a03e3d1f7f7d5c9c9e0b12c2d4_640.jpg", | |
| "webformatWidth": 640, | |
| "webformatHeight": 426, | |
| "largeImageURL": "https://pixabay.com/get/g57a358c25f28b36b0368d4bad7b4c78e96f4247ff71ef3d3a51a8d1c1b4c13a9a980f55ff7c805b14013ee700d5eda9d10a3aea48c3cff1c852995e9db3afd43_1280.jpg", | |
| "imageWidth": 6000, | |
| "imageHeight": 4000, | |
| "imageSize": 5458935, | |
| "views": 52345, | |
| "downloads": 18721, | |
| "collections": 423, | |
| "likes": 423, | |
| "comments": 51, | |
| "user_id": 10084616, | |
| "user": "Couleur", | |
| "userImageURL": "https://cdn.pixabay.com/user/2018/04/01/21-48-48-909_250x250.jpg" | |
| }, | |
| // ... more image objects ... | |
| ] | |
| } | |
| </pre> | |
| </div> | |
| <div class="note"> | |
| <p><strong>Note:</strong> This is a simulated response based on typical Pixabay API results. In a real scenario, you would need to provide a valid API key to receive actual data.</p> | |
| </div> | |
| <script> | |
| // This script would handle pagination and dynamic loading of images | |
| // For this simulation, it's just a placeholder | |
| document.querySelector('.pagination button:last-child').addEventListener('click', function() { | |
| alert('This would load the next page of images in a real implementation.'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |