Spaces:
Running
Running
File size: 9,863 Bytes
b644d60 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload AI Art - NeuroMorph Gallery</title>
<meta name="description" content="Upload your AI-generated artworks to NeuroMorph Gallery">
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#f97316',
secondary: '#0ea5e9'
}
}
}
}
</script>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
<custom-navbar></custom-navbar>
<main class="flex-grow py-12 px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h1 class="text-4xl font-bold text-gray-800 mb-4">Upload Your AI Art</h1>
<p class="text-xl text-gray-600">Share your machine-generated masterpieces with the world</p>
</div>
<div class="neomorphic-card p-8">
<form id="upload-form" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Artwork Title</label>
<input
type="text"
required
class="neomorphic-input w-full"
placeholder="Enter a captivating title"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
<textarea
required
class="neomorphic-input w-full h-32 resize-none"
placeholder="Describe your artwork, the AI model used, inspiration, etc."
></textarea>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">AI Model Used</label>
<select class="neomorphic-input w-full">
<option value="">Select AI Model</option>
<option value="dalle">DALL-E</option>
<option value="midjourney">Midjourney</option>
<option value="stable-diffusion">Stable Diffusion</option>
<option value="gpt-art">GPT Art</option>
<option value="custom">Custom Model</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Artwork Image</label>
<div class="border-2 border-dashed border-gray-300 rounded-2xl p-8 text-center transition-all duration-300 hover:border-primary" id="drop-zone">
<i data-feather="upload-cloud" class="w-12 h-12 text-gray-400 mx-auto mb-4"></i>
<p class="text-gray-500 mb-2">Drag & drop your image here</p>
<p class="text-sm text-gray-400 mb-4">PNG, JPG, WEBP up to 10MB</p>
<button type="button" class="bg-secondary hover:bg-sky-600 text-white px-6 py-2 rounded-xl font-semibold transition-colors duration-300">
Choose File
</button>
<input type="file" accept="image/*" class="hidden" id="file-input">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Tags</label>
<input
type="text"
class="neomorphic-input w-full"
placeholder="AI, digital art, abstract, etc."
>
<p class="text-xs text-gray-500 mt-1">Separate tags with commas</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">License Type</label>
<select class="neomorphic-input w-full">
<option value="cc-by">Creative Commons Attribution</option>
<option value="cc-by-nc">Creative Commons Non-Commercial</option>
<option value="all-rights">All Rights Reserved</option>
</select>
</div>
<div>
<label class="flex items-center">
<input type="checkbox" class="rounded text-primary">
<span class="ml-2 text-gray-700">Make this artwork premium</span>
</label>
<p class="text-xs text-gray-500 mt-1">Premium artworks get featured placement and higher visibility</p>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-4 justify-end">
<button type="button" class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-xl font-semibold transition-colors duration-300">
Cancel
</button>
<button type="submit" class="bg-primary hover:bg-orange-600 text-white px-8 py-3 rounded-xl font-semibold transition-colors duration-300">
<i data-feather="upload" class="inline mr-2"></i>
Upload Artwork
</button>
</div>
</form>
</div>
<!-- Upload Guidelines -->
<div class="neomorphic-card p-8 mt-8">
<h2 class="text-2xl font-bold text-gray-800 mb-4">Upload Guidelines</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-semibold text-gray-700 mb-2">Quality Standards</h3>
<ul class="text-gray-600 space-y-1">
<li>• High-resolution images preferred</li>
<li>• Must be AI-generated artwork</li>
<li>• No offensive or harmful content</li>
<li>• Proper attribution to AI models</li>
</ul>
</div>
<div>
<h3 class="font-semibold text-gray-700 mb-2">Best Practices</h3>
<ul class="text-gray-600 space-y-1">
<li>• Include detailed descriptions</li>
<li>• Use relevant tags for discoverability</li>
<li>• Consider watermarking for protection</li>
<li>• Choose appropriate licensing</li>
</ul>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
// File upload handling
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('file-input');
const chooseFileBtn = dropZone.querySelector('button');
chooseFileBtn.addEventListener('click', () => fileInput.click());
fileInput.addEventListener('change', handleFileSelect);
dropZone.addEventListener('dragover', handleDragOver);
dropZone.addEventListener('drop', handleFileDrop);
function handleDragOver(e) {
e.preventDefault();
dropZone.classList.add('border-primary', 'bg-orange-50');
}
function handleFileDrop(e) {
e.preventDefault();
dropZone.classList.remove('border-primary', 'bg-orange-50');
const files = e.dataTransfer.files;
if (files.length > 0) {
handleFiles(files);
}
}
function handleFileSelect(e) {
const files = e.target.files;
handleFiles(files);
}
function handleFiles(files) {
const file = files[0];
if (file && file.type.startsWith('image/')) {
// Preview the image
const reader = new FileReader();
reader.onload = (e) => {
dropZone.innerHTML = `
<img src="${e.target.result}" alt="Preview" class="max-h-64 mx-auto mb-4 rounded-xl">
<p class="text-primary font-semibold">${file.name}</p>
<p class="text-sm text-gray-500">Click to change</p>
`;
};
reader.readAsDataURL(file);
}
}
</script>
</body>
</html> |