Spaces:
Running
Running
Update index.html
Browse files- index.html +43 -1
index.html
CHANGED
|
@@ -1,3 +1,45 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
<!-- Main Content -->
|
| 2 |
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
|
| 3 |
<!-- Upload Section -->
|
|
@@ -290,4 +332,4 @@
|
|
| 290 |
generateIcon.classList.remove('loading-spinner');
|
| 291 |
}
|
| 292 |
});
|
| 293 |
-
</script>
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Image to Prompt Generator</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
+
<style>
|
| 10 |
+
.dropzone {
|
| 11 |
+
border: 2px dashed #9CA3AF;
|
| 12 |
+
transition: all 0.3s ease;
|
| 13 |
+
}
|
| 14 |
+
.dropzone.active {
|
| 15 |
+
border-color: #3B82F6;
|
| 16 |
+
background-color: rgba(59, 130, 246, 0.05);
|
| 17 |
+
}
|
| 18 |
+
.prompt-card {
|
| 19 |
+
transition: all 0.3s ease;
|
| 20 |
+
}
|
| 21 |
+
.prompt-card:hover {
|
| 22 |
+
transform: translateY(-2px);
|
| 23 |
+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
| 24 |
+
}
|
| 25 |
+
.loading-spinner {
|
| 26 |
+
animation: spin 1s linear infinite;
|
| 27 |
+
}
|
| 28 |
+
@keyframes spin {
|
| 29 |
+
0% { transform: rotate(0deg); }
|
| 30 |
+
100% { transform: rotate(360deg); }
|
| 31 |
+
}
|
| 32 |
+
</style>
|
| 33 |
+
</head>
|
| 34 |
+
<body class="bg-gray-50 min-h-screen">
|
| 35 |
+
<div class="container mx-auto px-4 py-12">
|
| 36 |
+
<!-- Header -->
|
| 37 |
+
<header class="text-center mb-12">
|
| 38 |
+
<h1 class="text-4xl font-bold text-gray-800 mb-2">Image to Prompt Generator</h1>
|
| 39 |
+
<p class="text-gray-600 max-w-2xl mx-auto">
|
| 40 |
+
Upload any image and get creative AI prompts generated automatically. Perfect for artists, writers, and content creators!
|
| 41 |
+
</p>
|
| 42 |
+
</header>
|
| 43 |
<!-- Main Content -->
|
| 44 |
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
|
| 45 |
<!-- Upload Section -->
|
|
|
|
| 332 |
generateIcon.classList.remove('loading-spinner');
|
| 333 |
}
|
| 334 |
});
|
| 335 |
+
</script>
|