Hugging Face's logo

Spaces:
allknowingroger
/
Madewithwebsim
Running

App Files Community
Madewithwebsim
File size: 4,793 Bytes 
ad1dcd6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
<html><head><base href="https://api.500px.com/v1/photos?feature=popular&only=nature&page=1&rpp=20">
<title>500px API Response - Popular Nature Photos</title>
<style>
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    line-height: 1.5;
    color: #24292f;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px;
    background-color: #f6f8fa;
  }
  
  h1, h2, h3 {
    color: #24292f;
  }
  
  .container {
    background-color: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 24px;
    margin-bottom: 24px;
  }
  
  .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
  }
  
  .photo-card {
    background-color: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
  }
  
  .photo-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  .photo-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }
  
  .photo-info {
    padding: 12px;
  }
  
  .photo-title {
    font-weight: 600;
    margin: 0 0 8px 0;
  }
  
  .photo-meta {
    font-size: 14px;
    color: #57606a;
  }
  
  .pagination {
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
  
  .pagination-button {
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 8px 16px;
    margin: 0 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .pagination-button:hover {
    background-color: #f3f4f6;
  }
  
  .stats {
    background-color: #f6f8fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 24px;
  }
</style>
</head>
<body>
  <h1>500px API Response - Popular Nature Photos</h1>
  
  <div class="stats">
    <h3>Response Statistics</h3>
    <p>Current Page: 1</p>
    <p>Total Pages: 250</p>
    <p>Total Items: 5000</p>
  </div>
  
  <div class="container">
    <div class="photo-grid">
      <div class="photo-card">
        <img src="https://drscdn.500px.org/photo/1054321/m%3D900/v2?sig=8f83f7c8d6f6e78901d5983d36dba65e9726757e7df237692b80db663e1d7b98" alt="Majestic Mountain Sunrise" class="photo-image">
        <div class="photo-info">
          <h3 class="photo-title">Majestic Mountain Sunrise</h3>
          <p class="photo-meta">by John Doe • 1,245 views • 98.5 rating</p>
        </div>
      </div>
      <div class="photo-card">
        <img src="https://drscdn.500px.org/photo/1054322/m%3D900/v2?sig=9a72f8c1d7e7f89012e6094e47eca76f0837868f8ef348803c91ec774f2e8c09" alt="Tranquil Forest Stream" class="photo-image">
        <div class="photo-info">
          <h3 class="photo-title">Tranquil Forest Stream</h3>
          <p class="photo-meta">by Jane Smith • 987 views • 97.8 rating</p>
        </div>
      </div>
      <div class="photo-card">
        <img src="https://drscdn.500px.org/photo/1054323/m%3D900/v2?sig=0b94f9c2e8f8f90123e7205f58fdb87g1948979g9fg459914d02fd885g3f9d10" alt="Arctic Fox in Snow" class="photo-image">
        <div class="photo-info">
          <h3 class="photo-title">Arctic Fox in Snow</h3>
          <p class="photo-meta">by Wildlife Pro • 1,678 views • 99.1 rating</p>
        </div>
      </div>
      <div class="photo-card">
        <img src="https://drscdn.500px.org/photo/1054324/m%3D900/v2?sig=1c05g0d3f9g9g01234f8316g69gca98h2059080h0gh570025e03996h4g0e11" alt="Vibrant Autumn Colors" class="photo-image">
        <div class="photo-info">
          <h3 class="photo-title">Vibrant Autumn Colors</h3>
          <p class="photo-meta">by Nature Lover • 876 views • 96.4 rating</p>
        </div>
      </div>
      <div class="photo-card">
        <img src="https://drscdn.500px.org/photo/1054325/m%3D900/v2?sig=2d16h1e4g0h0h12345g9427h70hdb09i3160191i1hi681136f14007i5h1f22" alt="Starry Night Over Desert" class="photo-image">
        <div class="photo-info">
          <h3 class="photo-title">Starry Night Over Desert</h3>
          <p class="photo-meta">by Astro Photography • 2,345 views • 99.7 rating</p>
        </div>
      </div>
      <!-- More photo cards would be generated here based on the API response -->
    </div>
  </div>
  
  <div class="pagination">
    <button class="pagination-button" disabled>Previous</button>
    <button class="pagination-button">Next</button>
  </div>
  
  <script>
    // This script would handle pagination and dynamic loading of photos
    // 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 photos in a real implementation.');
    });
  </script>
</body>
</html>