Spaces:
Running
Running
Update index.html
Browse files- index.html +3 -73
index.html
CHANGED
|
@@ -1,5 +1,3 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
-
<!DOCTYPE html>
|
| 3 |
<html lang="en">
|
| 4 |
<head>
|
| 5 |
<meta charset="UTF-8" />
|
|
@@ -89,7 +87,6 @@
|
|
| 89 |
border-radius: 10px;
|
| 90 |
object-fit: cover;
|
| 91 |
cursor: pointer;
|
| 92 |
-
transition: 0.3s ease;
|
| 93 |
}
|
| 94 |
|
| 95 |
.loader {
|
|
@@ -116,64 +113,6 @@
|
|
| 116 |
width: 90%;
|
| 117 |
}
|
| 118 |
}
|
| 119 |
-
|
| 120 |
-
/* -------------------- Image Themes -------------------- */
|
| 121 |
-
.theme-rounded-shadow {
|
| 122 |
-
border-radius: 16px;
|
| 123 |
-
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
| 124 |
-
}
|
| 125 |
-
|
| 126 |
-
.theme-glow {
|
| 127 |
-
border: 2px solid #4ade80;
|
| 128 |
-
box-shadow: 0 0 12px #4ade80;
|
| 129 |
-
}
|
| 130 |
-
|
| 131 |
-
.theme-blur {
|
| 132 |
-
filter: blur(1px);
|
| 133 |
-
transition: filter 0.3s ease;
|
| 134 |
-
}
|
| 135 |
-
.theme-blur:hover {
|
| 136 |
-
filter: blur(0);
|
| 137 |
-
}
|
| 138 |
-
|
| 139 |
-
.theme-vintage {
|
| 140 |
-
filter: sepia(0.4) contrast(1.1) brightness(0.9);
|
| 141 |
-
}
|
| 142 |
-
|
| 143 |
-
.theme-bright {
|
| 144 |
-
filter: brightness(1.3) saturate(1.2);
|
| 145 |
-
}
|
| 146 |
-
|
| 147 |
-
.theme-dark {
|
| 148 |
-
filter: brightness(0.7) contrast(1.3);
|
| 149 |
-
}
|
| 150 |
-
|
| 151 |
-
.theme-border {
|
| 152 |
-
border: 3px solid #fff;
|
| 153 |
-
padding: 2px;
|
| 154 |
-
box-sizing: border-box;
|
| 155 |
-
}
|
| 156 |
-
|
| 157 |
-
.theme-zoom:hover {
|
| 158 |
-
transform: scale(1.05);
|
| 159 |
-
transition: transform 0.3s ease-in-out;
|
| 160 |
-
}
|
| 161 |
-
|
| 162 |
-
.theme-rotate:hover {
|
| 163 |
-
transform: rotate(3deg) scale(1.03);
|
| 164 |
-
transition: transform 0.3s ease-in-out;
|
| 165 |
-
}
|
| 166 |
-
|
| 167 |
-
.theme-fadein {
|
| 168 |
-
opacity: 0;
|
| 169 |
-
animation: fadeIn 1s ease forwards;
|
| 170 |
-
}
|
| 171 |
-
|
| 172 |
-
@keyframes fadeIn {
|
| 173 |
-
to {
|
| 174 |
-
opacity: 1;
|
| 175 |
-
}
|
| 176 |
-
}
|
| 177 |
</style>
|
| 178 |
</head>
|
| 179 |
<body>
|
|
@@ -218,19 +157,10 @@
|
|
| 218 |
const data = await res.json();
|
| 219 |
const images = (data.images || []).slice(0, 4); // Limit to 4 images
|
| 220 |
|
| 221 |
-
const themes = [
|
| 222 |
-
"theme-rounded-shadow", "theme-glow", "theme-blur", "theme-vintage",
|
| 223 |
-
"theme-bright", "theme-dark", "theme-border", "theme-zoom",
|
| 224 |
-
"theme-rotate", "theme-fadein"
|
| 225 |
-
];
|
| 226 |
-
|
| 227 |
if (images.length > 0) {
|
| 228 |
gallery.innerHTML = images.map((img, index) => {
|
| 229 |
-
const imgSrc =
|
| 230 |
-
|
| 231 |
-
return `<a href="${imgSrc}" download="image_${index + 1}.png">
|
| 232 |
-
<img src="${imgSrc}" alt="Generated Image" class="${theme}" />
|
| 233 |
-
</a>`;
|
| 234 |
}).join("");
|
| 235 |
loader.textContent = "";
|
| 236 |
} else {
|
|
@@ -242,4 +172,4 @@
|
|
| 242 |
}
|
| 243 |
</script>
|
| 244 |
</body>
|
| 245 |
-
</html>
|
|
|
|
|
|
|
|
|
|
| 1 |
<html lang="en">
|
| 2 |
<head>
|
| 3 |
<meta charset="UTF-8" />
|
|
|
|
| 87 |
border-radius: 10px;
|
| 88 |
object-fit: cover;
|
| 89 |
cursor: pointer;
|
|
|
|
| 90 |
}
|
| 91 |
|
| 92 |
.loader {
|
|
|
|
| 113 |
width: 90%;
|
| 114 |
}
|
| 115 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 116 |
</style>
|
| 117 |
</head>
|
| 118 |
<body>
|
|
|
|
| 157 |
const data = await res.json();
|
| 158 |
const images = (data.images || []).slice(0, 4); // Limit to 4 images
|
| 159 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 160 |
if (images.length > 0) {
|
| 161 |
gallery.innerHTML = images.map((img, index) => {
|
| 162 |
+
const imgSrc = data:image/png;base64,${img};
|
| 163 |
+
return <a href="${imgSrc}" download="image_${index + 1}.png"><img src="${imgSrc}" alt="Generated Image" /></a>;
|
|
|
|
|
|
|
|
|
|
| 164 |
}).join("");
|
| 165 |
loader.textContent = "";
|
| 166 |
} else {
|
|
|
|
| 172 |
}
|
| 173 |
</script>
|
| 174 |
</body>
|
| 175 |
+
</html>
|