Spaces:
Running
Running
Update index.html
Browse files- index.html +70 -1
index.html
CHANGED
|
@@ -1,4 +1,5 @@
|
|
| 1 |
<!DOCTYPE html>
|
|
|
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8" />
|
|
@@ -88,6 +89,7 @@
|
|
| 88 |
border-radius: 10px;
|
| 89 |
object-fit: cover;
|
| 90 |
cursor: pointer;
|
|
|
|
| 91 |
}
|
| 92 |
|
| 93 |
.loader {
|
|
@@ -114,6 +116,64 @@
|
|
| 114 |
width: 90%;
|
| 115 |
}
|
| 116 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 117 |
</style>
|
| 118 |
</head>
|
| 119 |
<body>
|
|
@@ -158,10 +218,19 @@
|
|
| 158 |
const data = await res.json();
|
| 159 |
const images = (data.images || []).slice(0, 4); // Limit to 4 images
|
| 160 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 161 |
if (images.length > 0) {
|
| 162 |
gallery.innerHTML = images.map((img, index) => {
|
| 163 |
const imgSrc = `data:image/png;base64,${img}`;
|
| 164 |
-
|
|
|
|
|
|
|
|
|
|
| 165 |
}).join("");
|
| 166 |
loader.textContent = "";
|
| 167 |
} else {
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
+
<!DOCTYPE html>
|
| 3 |
<html lang="en">
|
| 4 |
<head>
|
| 5 |
<meta charset="UTF-8" />
|
|
|
|
| 89 |
border-radius: 10px;
|
| 90 |
object-fit: cover;
|
| 91 |
cursor: pointer;
|
| 92 |
+
transition: 0.3s ease;
|
| 93 |
}
|
| 94 |
|
| 95 |
.loader {
|
|
|
|
| 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 |
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 = `data:image/png;base64,${img}`;
|
| 230 |
+
const theme = themes[Math.floor(Math.random() * themes.length)];
|
| 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 {
|