Spaces:
Running
Running
| <html><head><base href="https://api.flickr.com/services/rest/"> | |
| <title>Flickr API Response - Photo Search</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #212124; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f3f5f6; | |
| } | |
| header { | |
| background: linear-gradient(to right, #FF0084, #0063DC); | |
| color: white; | |
| text-align: center; | |
| padding: 1em; | |
| margin-bottom: 2em; | |
| border-radius: 8px; | |
| } | |
| h1, h2, h3 { | |
| color: #212124; | |
| } | |
| .container { | |
| background-color: #fff; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .note { | |
| background-color: #e8f4fd; | |
| border-left: 4px solid #0063DC; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| pre { | |
| background-color: #f6f7f9; | |
| border: 1px solid #dddfe2; | |
| border-radius: 6px; | |
| padding: 15px; | |
| overflow-x: auto; | |
| } | |
| code { | |
| font-family: Consolas, Monaco, 'Courier New', monospace; | |
| font-size: 14px; | |
| } | |
| .photo-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 20px; | |
| } | |
| .photo-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; | |
| } | |
| .photo-item:hover { | |
| transform: scale(1.05); | |
| } | |
| .photo-item img { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| .photo-info { | |
| padding: 10px; | |
| } | |
| .photo-title { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .photo-owner { | |
| font-size: 0.9em; | |
| color: #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Flickr API Response</h1> | |
| <p>Photo Search Results for "cat"</p> | |
| </header> | |
| <div class="container"> | |
| <h2>Search Results</h2> | |
| <p>Displaying 10 most relevant photos for the search term "cat"</p> | |
| <div class="photo-grid"> | |
| <div class="photo-item"> | |
| <img src="https://live.staticflickr.com/65535/52955447328_3eaf2c8e0d_m.jpg" alt="Sleepy orange tabby cat"> | |
| <div class="photo-info"> | |
| <div class="photo-title">Sleepy Ginger</div> | |
| <div class="photo-owner">by CatLover123</div> | |
| </div> | |
| </div> | |
| <div class="photo-item"> | |
| <img src="https://live.staticflickr.com/65535/52954956881_7b1f8c3a22_m.jpg" alt="Black cat with green eyes"> | |
| <div class="photo-info"> | |
| <div class="photo-title">Midnight Stare</div> | |
| <div class="photo-owner">by WhiskerWonder</div> | |
| </div> | |
| </div> | |
| <div class="photo-item"> | |
| <img src="https://live.staticflickr.com/65535/52955241074_a2f5227873_m.jpg" alt="Kitten playing with a ball of yarn"> | |
| <div class="photo-info"> | |
| <div class="photo-title">Yarn Adventure</div> | |
| <div class="photo-owner">by PurrfectShots</div> | |
| </div> | |
| </div> | |
| <div class="photo-item"> | |
| <img src="https://live.staticflickr.com/65535/52954956896_aa45d79cf3_m.jpg" alt="Siamese cat lounging in sunlight"> | |
| <div class="photo-info"> | |
| <div class="photo-title">Sunbathing Siamese</div> | |
| <div class="photo-owner">by MeowMaster</div> | |
| </div> | |
| </div> | |
| <div class="photo-item"> | |
| <img src="https://live.staticflickr.com/65535/52955447358_9f35a7d6f7_m.jpg" alt="Two cats cuddling"> | |
| <div class="photo-info"> | |
| <div class="photo-title">Feline Friends</div> | |
| <div class="photo-owner">by CatSnappers</div> | |
| </div> | |
| </div> | |
| <div class="photo-item"> | |
| <img src="https://live.staticflickr.com/65535/52955241094_42c4547b3a_m.jpg" alt="Cat yawning"> | |
| <div class="photo-info"> | |
| <div class="photo-title">Big Yawn</div> | |
| <div class="photo-owner">by SleepyKitty</div> | |
| </div> | |
| </div> | |
| <div class="photo-item"> | |
| <img src="https://live.staticflickr.com/65535/52955447373_62e261e8f1_m.jpg" alt="Cat in a cardboard box"> | |
| <div class="photo-info"> | |
| <div class="photo-title">Box Life</div> | |
| <div class="photo-owner">by CuriousCat</div> | |
| </div> | |
| </div> | |
| <div class="photo-item"> | |
| <img src="https://live.staticflickr.com/65535/52954956921_b166093ee1_m.jpg" alt="Maine Coon cat with long fur"> | |
| <div class="photo-info"> | |
| <div class="photo-title">Majestic Maine</div> | |
| <div class="photo-owner">by FluffyPhotographer</div> | |
| </div> | |
| </div> | |
| <div class="photo-item"> | |
| <img src="https://live.staticflickr.com/65535/52955241114_7c9e1003be_m.jpg" alt="Cat watching birds through window"> | |
| <div class="photo-info"> | |
| <div class="photo-title">Bird Watcher</div> | |
| <div class="photo-owner">by WindowPerch</div> | |
| </div> | |
| </div> | |
| <div class="photo-item"> | |
| <img src="https://live.staticflickr.com/65535/52955447393_db95f5105e_m.jpg" alt="Calico cat sleeping on a cushion"> | |
| <div class="photo-info"> | |
| <div class="photo-title">Calico Dreams</div> | |
| <div class="photo-owner">by NapMaster</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <h3>API Response Sample</h3> | |
| <pre><code> | |
| { | |
| "photos": { | |
| "page": 1, | |
| "pages": 5348, | |
| "perpage": 10, | |
| "total": 53476, | |
| "photo": [ | |
| { | |
| "id": "52955447328", | |
| "owner": "66956608@N06", | |
| "secret": "3eaf2c8e0d", | |
| "server": "65535", | |
| "farm": 66, | |
| "title": "Sleepy Ginger", | |
| "ispublic": 1, | |
| "isfriend": 0, | |
| "isfamily": 0 | |
| }, | |
| { | |
| "id": "52954956881", | |
| "owner": "194567573@N08", | |
| "secret": "7b1f8c3a22", | |
| "server": "65535", | |
| "farm": 66, | |
| "title": "Midnight Stare", | |
| "ispublic": 1, | |
| "isfriend": 0, | |
| "isfamily": 0 | |
| }, | |
| // ... more photo objects ... | |
| ] | |
| }, | |
| "stat": "ok" | |
| } | |
| </code></pre> | |
| </div> | |
| <div class="note"> | |
| <p><strong>Note:</strong> This is a simulated response based on typical Flickr API results. In a real scenario, you would need to provide a valid API key to receive actual data. The photo URLs and metadata are generated for demonstration purposes.</p> | |
| </div> | |
| <script> | |
| console.log('Flickr API response for photo search loaded successfully'); | |
| </script> | |
| </body> | |
| </html> |