Hugging Face's logo

Spaces:
Ashrafb
/
Brcb2
Paused

App Files Community
Ashrafb commited on
Commit
e959505
·
verified ·
1 Parent(s): b091539

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +22 -44
static/index.html CHANGED
@@ -97,12 +97,6 @@
97
  display: none; /* Initially hide the loading spinner */
98
  }
99
 
100
- @keyframes spin {
101
- 0% { transform: rotate(0deg); }
102
- 100% { transform: rotate(360deg); }
103
- }
104
-
105
-
106
  @keyframes spin {
107
  0% { transform: rotate(0deg); }
108
  100% { transform: rotate(360deg); }
@@ -185,28 +179,29 @@
185
  #customBackgroundInput input[type="file"] {
186
  display: none;
187
  }
188
- /* Custom styling for the color picker */
189
- input[type="color"] {
190
- appearance: none;
191
- width: 50px;
192
- height: 50px;
193
- border: none;
194
- border-radius: 50%;
195
- cursor: pointer;
196
- margin: 10px; /* Adjust margin as needed */
197
- outline: none;
198
- transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
199
- }
200
 
201
- /* Add a hover effect */
202
- input[type="color"]:hover {
203
- transform: scale(1.1); /* Scale up slightly on hover */
204
- }
 
 
 
 
 
 
 
 
205
 
206
- /* Add a focus effect */
207
- input[type="color"]:focus {
208
- box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); /* Add a subtle glow effect */
209
- }
 
 
 
 
 
210
  </style>
211
  </head>
212
  <body>
@@ -233,6 +228,7 @@ input[type="color"]:focus {
233
  <button type="button" onclick="applyBackground()">Apply Background</button><br>
234
  <button type="button" onclick="downloadImage()">Download Image</button>
235
  </form>
 
236
  <script>
237
  let processedImageDataUrl = '';
238
  let originalImageDataUrl = '';
@@ -280,24 +276,6 @@ input[type="color"]:focus {
280
  }
281
 
282
 
283
-
284
-
285
-
286
-
287
-
288
-
289
-
290
-
291
-
292
-
293
-
294
-
295
-
296
-
297
-
298
-
299
-
300
-
301
  function toggleBackgroundOption() {
302
  const backgroundOption = document.getElementById('backgroundOptions').value;
303
  const customBackgroundInput = document.getElementById('customBackgroundInput');
 
97
  display: none; /* Initially hide the loading spinner */
98
  }
99
 
 
 
 
 
 
 
100
  @keyframes spin {
101
  0% { transform: rotate(0deg); }
102
  100% { transform: rotate(360deg); }
 
179
  #customBackgroundInput input[type="file"] {
180
  display: none;
181
  }
 
 
 
 
 
 
 
 
 
 
 
 
182
 
183
+ /* Custom styling for the color picker */
184
+ input[type="color"] {
185
+ appearance: none;
186
+ width: 50px;
187
+ height: 50px;
188
+ border: none;
189
+ border-radius: 50%;
190
+ cursor: pointer;
191
+ margin: 10px; /* Adjust margin as needed */
192
+ outline: none;
193
+ transition: transform 0.3s ease-in-out; /* Add a smooth transition effect */
194
+ }
195
 
196
+ /* Add a hover effect */
197
+ input[type="color"]:hover {
198
+ transform: scale(1.1); /* Scale up slightly on hover */
199
+ }
200
+
201
+ /* Add a focus effect */
202
+ input[type="color"]:focus {
203
+ box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); /* Add a subtle glow effect */
204
+ }
205
  </style>
206
  </head>
207
  <body>
 
228
  <button type="button" onclick="applyBackground()">Apply Background</button><br>
229
  <button type="button" onclick="downloadImage()">Download Image</button>
230
  </form>
231
+
232
  <script>
233
  let processedImageDataUrl = '';
234
  let originalImageDataUrl = '';
 
276
  }
277
 
278
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
279
  function toggleBackgroundOption() {
280
  const backgroundOption = document.getElementById('backgroundOptions').value;
281
  const customBackgroundInput = document.getElementById('customBackgroundInput');