96 lines
3.3 KiB
HTML
96 lines
3.3 KiB
HTML
{% extends "base.html" %} {% block title %}Upload Pet Picture - Pets of
|
|
Powerwashing{% endblock %} {% block content %}
|
|
<div class="max-w-2xl mx-auto">
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-bold text-gray-800 mb-6">Upload Pet Picture</h2>
|
|
|
|
<form
|
|
action="{{ url_for('pictures.upload') }}"
|
|
method="POST"
|
|
enctype="multipart/form-data"
|
|
class="space-y-6"
|
|
>
|
|
<div>
|
|
<label
|
|
for="subscriber_name"
|
|
class="block text-sm font-medium text-gray-700"
|
|
>Subscriber Name</label
|
|
>
|
|
<input
|
|
type="text"
|
|
name="subscriber_name"
|
|
id="subscriber_name"
|
|
required
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="description" class="block text-sm font-medium text-gray-700"
|
|
>Description (Optional)</label
|
|
>
|
|
<textarea
|
|
name="description"
|
|
id="description"
|
|
rows="3"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
|
placeholder="Add a description for the pet picture..."
|
|
></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="picture" class="block text-sm font-medium text-gray-700"
|
|
>Pet Picture</label
|
|
>
|
|
<div
|
|
class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
|
|
>
|
|
<div class="space-y-1 text-center">
|
|
<svg
|
|
class="mx-auto h-12 w-12 text-gray-400"
|
|
stroke="currentColor"
|
|
fill="none"
|
|
viewBox="0 0 48 48"
|
|
>
|
|
<path
|
|
d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
<div class="flex text-sm text-gray-600">
|
|
<label
|
|
for="picture"
|
|
class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500"
|
|
>
|
|
<span>Upload a file</span>
|
|
<input
|
|
id="picture"
|
|
name="picture"
|
|
type="file"
|
|
class="sr-only"
|
|
accept="image/*"
|
|
required
|
|
/>
|
|
</label>
|
|
<p class="pl-1">or drag and drop</p>
|
|
</div>
|
|
<p class="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
|
>
|
|
Upload Picture
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|