Hugging Face's logo

Spaces:
VinitT
/
ImageHarvester
Sleeping

App Files Community
VinitT commited on
Commit
e9817b0
·
verified ·
1 Parent(s): 723e375

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +103 -38
app.py CHANGED
@@ -13,26 +13,69 @@ st.set_page_config(page_title="ImageHarvesters", layout="wide")
13
  # Custom CSS
14
  st.markdown("""
15
  <style>
 
16
  .main {
17
- padding: 1rem;
18
- border-radius: 0.5rem;
19
- background-color: #f0f2f6;
 
 
 
 
 
 
 
 
 
 
 
20
  }
 
 
 
 
 
 
 
 
 
21
  .stButton>button {
22
  width: 100%;
 
 
 
 
 
 
 
23
  }
 
 
 
 
 
 
 
 
24
  .image-card {
25
  background: white;
26
- border-radius: 8px;
27
- box-shadow: 0 2px 4px rgba(0,0,0,0.2);
28
  overflow: hidden;
29
- margin-bottom: 20px;
30
- transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
31
  }
 
 
 
 
 
 
32
  .image-container {
33
  position: relative;
34
- padding-top: 75%; /* 4:3 Aspect Ratio */
35
  }
 
36
  .image-container img {
37
  position: absolute;
38
  top: 0;
@@ -41,55 +84,77 @@ st.markdown("""
41
  height: 100%;
42
  object-fit: cover;
43
  }
 
44
  .image-info {
45
- padding: 10px;
46
- font-size: 14px;
 
 
47
  }
48
- h1 {
49
- color: #1e3a8a;
50
- text-align: center;
51
- margin-bottom: 2rem;
 
 
 
 
 
 
 
 
 
 
 
52
  }
 
 
 
 
 
 
 
53
  .stSuccess {
54
- background-color: #d1fae5;
55
  color: #065f46;
 
 
 
56
  }
 
57
  .stWarning {
58
- background-color: #fef3c7;
59
  color: #92400e;
 
 
 
60
  }
 
61
  .stError {
62
- background-color: #fee2e2;
63
  color: #991b1b;
 
 
 
64
  }
65
- .selected {
66
- border: 2px solid #000000;
67
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
68
- transform: scale(1.05);
69
- }
70
- .subtitle {
71
- color: #1e3a8a;
72
- text-align: center;
73
- margin-bottom: 2rem;
74
- font-size: 1.2rem;
75
- }
76
- .url-input, .number-input {
77
- border: 2px solid #1e3a8a;
78
- border-radius: 4px;
79
  padding: 0.5rem;
80
- margin-bottom: 1rem;
81
- width: 100%;
82
- box-sizing: border-box;
83
  }
84
- @media only screen and (max-width: 600px) {
 
 
85
  .main {
86
  padding: 1rem;
87
  }
88
- .stButton>button {
89
- width: 100%;
 
90
  }
 
91
  .image-card {
92
- margin-bottom: 10px;
93
  }
94
  }
95
  </style>
 
13
  # Custom CSS
14
  st.markdown("""
15
  <style>
16
+ /* Main container styling */
17
  .main {
18
+ padding: 2rem;
19
+ border-radius: 1rem;
20
+ background-color: #ffffff;
21
+ max-width: 1200px;
22
+ margin: 0 auto;
23
+ }
24
+
25
+ /* Title and headers */
26
+ h1 {
27
+ color: #2563eb;
28
+ text-align: center;
29
+ margin-bottom: 2rem;
30
+ font-weight: 700;
31
+ font-size: 2.5rem;
32
  }
33
+
34
+ .stSubheader {
35
+ color: #1e40af;
36
+ font-size: 1.5rem;
37
+ font-weight: 600;
38
+ margin: 1.5rem 0;
39
+ }
40
+
41
+ /* Button styling */
42
  .stButton>button {
43
  width: 100%;
44
+ background-color: #2563eb;
45
+ color: white;
46
+ border: none;
47
+ padding: 0.75rem 1.5rem;
48
+ border-radius: 0.5rem;
49
+ font-weight: 600;
50
+ transition: all 0.2s ease;
51
  }
52
+
53
+ .stButton>button:hover {
54
+ background-color: #1e40af;
55
+ transform: translateY(-2px);
56
+ box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
57
+ }
58
+
59
+ /* Image card styling */
60
  .image-card {
61
  background: white;
62
+ border-radius: 1rem;
63
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
64
  overflow: hidden;
65
+ margin-bottom: 1.5rem;
66
+ transition: all 0.3s ease;
67
  }
68
+
69
+ .image-card:hover {
70
+ transform: translateY(-5px);
71
+ box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
72
+ }
73
+
74
  .image-container {
75
  position: relative;
76
+ padding-top: 75%;
77
  }
78
+
79
  .image-container img {
80
  position: absolute;
81
  top: 0;
 
84
  height: 100%;
85
  object-fit: cover;
86
  }
87
+
88
  .image-info {
89
+ padding: 1rem;
90
+ font-size: 0.9rem;
91
+ color: #4b5563;
92
+ border-top: 1px solid #e5e7eb;
93
  }
94
+
95
+ /* Selected image state */
96
+ .selected {
97
+ border: 3px solid #2563eb;
98
+ box-shadow: 0 8px 16px rgba(37, 99, 235, 0.2);
99
+ }
100
+
101
+ /* Input fields */
102
+ .url-input, .number-input {
103
+ border: 2px solid #e5e7eb;
104
+ border-radius: 0.5rem;
105
+ padding: 0.75rem;
106
+ margin-bottom: 1rem;
107
+ width: 100%;
108
+ transition: border-color 0.2s ease;
109
  }
110
+
111
+ .url-input:focus, .number-input:focus {
112
+ border-color: #2563eb;
113
+ outline: none;
114
+ }
115
+
116
+ /* Alert messages */
117
  .stSuccess {
118
+ background-color: #ecfdf5;
119
  color: #065f46;
120
+ border-radius: 0.5rem;
121
+ padding: 1rem;
122
+ border-left: 4px solid #059669;
123
  }
124
+
125
  .stWarning {
126
+ background-color: #fffbeb;
127
  color: #92400e;
128
+ border-radius: 0.5rem;
129
+ padding: 1rem;
130
+ border-left: 4px solid #d97706;
131
  }
132
+
133
  .stError {
134
+ background-color: #fef2f2;
135
  color: #991b1b;
136
+ border-radius: 0.5rem;
137
+ padding: 1rem;
138
+ border-left: 4px solid #dc2626;
139
  }
140
+
141
+ /* Checkbox styling */
142
+ .stCheckbox {
 
 
 
 
 
 
 
 
 
 
 
143
  padding: 0.5rem;
 
 
 
144
  }
145
+
146
+ /* Responsive design */
147
+ @media only screen and (max-width: 768px) {
148
  .main {
149
  padding: 1rem;
150
  }
151
+
152
+ h1 {
153
+ font-size: 2rem;
154
  }
155
+
156
  .image-card {
157
+ margin-bottom: 1rem;
158
  }
159
  }
160
  </style>