Spaces:
Running
Running
| <html><head><base href="https://api.imgur.com/3/album/albumHash"><title>Imgur API Album Response</title> | |
| <style> | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f0f0f0; | |
| } | |
| header { | |
| background-color: #1bb76e; | |
| color: white; | |
| text-align: center; | |
| padding: 1em; | |
| margin-bottom: 2em; | |
| border-radius: 8px; | |
| } | |
| h1, h2, h3 { | |
| color: #1bb76e; | |
| } | |
| .container { | |
| background-color: #fff; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .album-info { | |
| background-color: #f9f9f9; | |
| border-left: 4px solid #1bb76e; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| .image-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 16px; | |
| } | |
| .image-item { | |
| background-color: #f0f0f0; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| 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: 10px; | |
| font-size: 14px; | |
| } | |
| pre { | |
| background-color: #282c34; | |
| color: #abb2bf; | |
| border-radius: 4px; | |
| padding: 15px; | |
| overflow-x: auto; | |
| } | |
| code { | |
| font-family: 'Courier New', Courier, monospace; | |
| } | |
| .note { | |
| background-color: #e8f4fd; | |
| border-left: 4px solid #1184e8; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Imgur API Album Response</h1> | |
| <p>Album Hash: albumHash</p> | |
| </header> | |
| <div class="container"> | |
| <div class="album-info"> | |
| <h2>Album: Wonders of Nature</h2> | |
| <p><strong>Description:</strong> A collection of breathtaking natural landscapes from around the world.</p> | |
| <p><strong>Created:</strong> 2023-06-15 14:32:41</p> | |
| <p><strong>Views:</strong> 12,453</p> | |
| <p><strong>Image Count:</strong> 5</p> | |
| </div> | |
| <div class="image-grid"> | |
| <div class="image-item"> | |
| <img src="https://i.imgur.com/abcdef1.jpg" alt="Majestic mountain range at sunset"> | |
| <div class="image-info"> | |
| <p>Title: Mountain Sunset</p> | |
| <p>Views: 3,245</p> | |
| </div> | |
| </div> | |
| <div class="image-item"> | |
| <img src="https://i.imgur.com/abcdef2.jpg" alt="Serene lake reflecting snow-capped peaks"> | |
| <div class="image-info"> | |
| <p>Title: Mirror Lake</p> | |
| <p>Views: 2,876</p> | |
| </div> | |
| </div> | |
| <div class="image-item"> | |
| <img src="https://i.imgur.com/abcdef3.jpg" alt="Dense rainforest canopy"> | |
| <div class="image-info"> | |
| <p>Title: Jungle Canopy</p> | |
| <p>Views: 1,987</p> | |
| </div> | |
| </div> | |
| <div class="image-item"> | |
| <img src="https://i.imgur.com/abcdef4.jpg" alt="Vibrant aurora borealis over a snowy landscape"> | |
| <div class="image-info"> | |
| <p>Title: Northern Lights</p> | |
| <p>Views: 4,532</p> | |
| </div> | |
| </div> | |
| <div class="image-item"> | |
| <img src="https://i.imgur.com/abcdef5.jpg" alt="Crystal clear turquoise waters of a tropical beach"> | |
| <div class="image-info"> | |
| <p>Title: Paradise Beach</p> | |
| <p>Views: 3,901</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <h3>API Response</h3> | |
| <pre><code> | |
| { | |
| "data": { | |
| "id": "albumHash", | |
| "title": "Wonders of Nature", | |
| "description": "A collection of breathtaking natural landscapes from around the world.", | |
| "datetime": 1686837161, | |
| "cover": "abcdef1", | |
| "cover_width": 1920, | |
| "cover_height": 1080, | |
| "account_url": "NatureExplorer", | |
| "account_id": 12345678, | |
| "privacy": "public", | |
| "layout": "blog", | |
| "views": 12453, | |
| "link": "https://imgur.com/a/albumHash", | |
| "favorite": false, | |
| "nsfw": false, | |
| "section": "", | |
| "images_count": 5, | |
| "images": [ | |
| { | |
| "id": "abcdef1", | |
| "title": "Mountain Sunset", | |
| "description": null, | |
| "datetime": 1686837161, | |
| "type": "image/jpeg", | |
| "animated": false, | |
| "width": 1920, | |
| "height": 1080, | |
| "size": 1024000, | |
| "views": 3245, | |
| "bandwidth": 3322880000, | |
| "vote": null, | |
| "favorite": false, | |
| "nsfw": false, | |
| "section": null, | |
| "account_url": null, | |
| "account_id": null, | |
| "is_ad": false, | |
| "in_most_viral": false, | |
| "has_sound": false, | |
| "tags": [], | |
| "ad_type": 0, | |
| "ad_url": "", | |
| "edited": "0", | |
| "in_gallery": false, | |
| "link": "https://i.imgur.com/abcdef1.jpg" | |
| }, | |
| // ... other image objects ... | |
| ] | |
| }, | |
| "success": true, | |
| "status": 200 | |
| } | |
| </code></pre> | |
| </div> | |
| <div class="note"> | |
| <p><strong>Note:</strong> This response is a simulation based on typical Imgur API album responses. In a real scenario, you would need to provide a valid album hash and proper authentication to receive actual data.</p> | |
| </div> | |
| <script> | |
| // This script would handle dynamic loading of images or other interactive features | |
| // For this simulation, it's just a placeholder | |
| console.log('Album data loaded successfully'); | |
| </script> | |
| </body> | |
| </html> |