Spaces:
Running
Running
| <html><head><base href="https://api.giphy.com/v1/gifs/search?api_key=YOUR_API_KEY&q=cats&limit=25&offset=0&rating=g&lang=en"> | |
| <title>GIPHY API Response - Cat GIFs</title> | |
| <style> | |
| body { | |
| font-family: 'Roboto', Arial, sans-serif; | |
| line-height: 1.6; | |
| color: #333; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #f9f9f9; | |
| } | |
| header { | |
| background-color: #00ff99; | |
| color: #000; | |
| text-align: center; | |
| padding: 1em; | |
| margin-bottom: 2em; | |
| border-radius: 8px; | |
| } | |
| h1, h2, h3 { | |
| color: #000; | |
| } | |
| .container { | |
| background-color: #fff; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .gif-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 16px; | |
| } | |
| .gif-item { | |
| background-color: #f0f0f0; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| transition: transform 0.3s ease; | |
| } | |
| .gif-item:hover { | |
| transform: scale(1.05); | |
| } | |
| .gif-item img { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| .gif-info { | |
| padding: 10px; | |
| font-size: 14px; | |
| } | |
| .pagination { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 20px; | |
| } | |
| .pagination button { | |
| background-color: #00ff99; | |
| color: #000; | |
| border: none; | |
| padding: 10px 20px; | |
| margin: 0 5px; | |
| cursor: pointer; | |
| border-radius: 4px; | |
| font-weight: bold; | |
| } | |
| .pagination button:disabled { | |
| background-color: #ccc; | |
| cursor: not-allowed; | |
| } | |
| .stats { | |
| background-color: #e6f7ff; | |
| border-left: 4px solid #1890ff; | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>GIPHY API Response - Cat GIFs</h1> | |
| </header> | |
| <div class="stats"> | |
| <h3>Response Statistics</h3> | |
| <p>Total Results: 10000+</p> | |
| <p>Displayed Results: 25</p> | |
| <p>Current Offset: 0</p> | |
| </div> | |
| <div class="container"> | |
| <div class="gif-grid"> | |
| <div class="gif-item"> | |
| <img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif" alt="Funny cat gif"> | |
| <div class="gif-info"> | |
| <p>Title: Computer Cat</p> | |
| <p>Rating: G</p> | |
| </div> | |
| </div> | |
| <div class="gif-item"> | |
| <img src="https://media.giphy.com/media/mlvseq9yvZhba/giphy.gif" alt="Cat waving paw"> | |
| <div class="gif-info"> | |
| <p>Title: Waving Cat</p> | |
| <p>Rating: G</p> | |
| </div> | |
| </div> | |
| <div class="gif-item"> | |
| <img src="https://media.giphy.com/media/VbnUQpnihPSIgIXuZv/giphy.gif" alt="Cat jumping fail"> | |
| <div class="gif-info"> | |
| <p>Title: Jump Fail</p> | |
| <p>Rating: G</p> | |
| </div> | |
| </div> | |
| <div class="gif-item"> | |
| <img src="https://media.giphy.com/media/ICOgUNjpvO0PC/giphy.gif" alt="Surprised cat"> | |
| <div class="gif-info"> | |
| <p>Title: Shocked Cat</p> | |
| <p>Rating: G</p> | |
| </div> | |
| </div> | |
| <div class="gif-item"> | |
| <img src="https://media.giphy.com/media/BzyTuYCmvSORqs1ABM/giphy.gif" alt="Sleeping kitten"> | |
| <div class="gif-info"> | |
| <p>Title: Sleepy Kitten</p> | |
| <p>Rating: G</p> | |
| </div> | |
| </div> | |
| <!-- More gif items would be generated here based on the API response --> | |
| </div> | |
| </div> | |
| <div class="pagination"> | |
| <button disabled>Previous</button> | |
| <button>Next</button> | |
| </div> | |
| <script> | |
| // This script would handle pagination and dynamic loading of GIFs | |
| // 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 GIFs in a real implementation.'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |