| 1 |
{% include "wizards/partials/step_nav.html" %} |
| 2 |
|
| 3 |
<div class="wizard-step"> |
| 4 |
<h2 class="subtitle-h2">Appearance</h2> |
| 5 |
<p class="step-description">Upload a project image. This appears on your project page and in search results.</p> |
| 6 |
|
| 7 |
<form hx-post="/dashboard/new-project/{{ slug }}/step/appearance" |
| 8 |
hx-target="#wizard-step" hx-swap="innerHTML" |
| 9 |
hx-push-url="/dashboard/new-project/{{ slug }}/step/monetization"> |
| 10 |
|
| 11 |
<div class="form-group"> |
| 12 |
<label>Project Image</label> |
| 13 |
|
| 14 |
<div class="project-image-upload" id="image-upload-area"> |
| 15 |
<div class="project-image-dropzone" id="image-dropzone"> |
| 16 |
{% if let Some(url) = cover_image_url %} |
| 17 |
<div class="project-image-current" id="image-current"> |
| 18 |
<img src="{{ url }}" alt="Project image" class="wizard-cover-img"> |
| 19 |
</div> |
| 20 |
{% else %} |
| 21 |
<div class="project-image-placeholder" id="image-placeholder"> |
| 22 |
<p>Square, at least 400x400px</p> |
| 23 |
<p class="hint">JPG, PNG, or WebP. Max 10 MB.</p> |
| 24 |
</div> |
| 25 |
{% endif %} |
| 26 |
<input type="file" id="image-file-input" accept="image/jpeg,image/png,image/webp" class="sr-only"> |
| 27 |
</div> |
| 28 |
|
| 29 |
<button type="button" class="btn-secondary" id="choose-image-btn" |
| 30 |
data-action="click" data-target="image-file-input">Choose File</button> |
| 31 |
|
| 32 |
<div class="upload-status" id="image-upload-status"> |
| 33 |
<div class="upload-progress-inline hidden" id="image-upload-progress"> |
| 34 |
<span id="image-upload-filename"></span> |
| 35 |
<span id="image-upload-percent">0%</span> |
| 36 |
<div class="progress-bar-container"> |
| 37 |
<div class="progress-bar" id="image-progress-bar"></div> |
| 38 |
</div> |
| 39 |
</div> |
| 40 |
<div class="upload-error-inline hidden" id="image-upload-error"> |
| 41 |
<span class="error-message" id="image-error-message"></span> |
| 42 |
</div> |
| 43 |
</div> |
| 44 |
</div> |
| 45 |
|
| 46 |
<input type="hidden" name="cover_image_url" id="cover-image-url" |
| 47 |
value="{% if let Some(url) = cover_image_url %}{{ url }}{% endif %}"> |
| 48 |
</div> |
| 49 |
|
| 50 |
<div class="form-group"> |
| 51 |
<label>Preview</label> |
| 52 |
<div class="project-card-preview"> |
| 53 |
<div class="preview-cover" id="preview-cover"> |
| 54 |
{% if let Some(url) = cover_image_url %} |
| 55 |
<img src="{{ url }}" alt="Preview" class="wizard-cover-img"> |
| 56 |
{% else %} |
| 57 |
<div class="preview-cover-empty">No image</div> |
| 58 |
{% endif %} |
| 59 |
</div> |
| 60 |
<div class="preview-info"> |
| 61 |
<strong>{{ project_title }}</strong> |
| 62 |
</div> |
| 63 |
</div> |
| 64 |
</div> |
| 65 |
|
| 66 |
<div class="wizard-actions"> |
| 67 |
<button type="button" class="btn-secondary" |
| 68 |
hx-get="/dashboard/new-project/{{ slug }}/step/basics" |
| 69 |
hx-target="#wizard-step" hx-swap="innerHTML" |
| 70 |
hx-push-url="/dashboard/new-project/{{ slug }}/step/basics">Back</button> |
| 71 |
<button type="button" class="btn-secondary" |
| 72 |
hx-get="/dashboard/new-project/{{ slug }}/step/monetization" |
| 73 |
hx-target="#wizard-step" hx-swap="innerHTML" |
| 74 |
hx-push-url="/dashboard/new-project/{{ slug }}/step/monetization">Skip</button> |
| 75 |
<button type="submit" class="btn-primary">Continue</button> |
| 76 |
</div> |
| 77 |
</form> |
| 78 |
</div> |
| 79 |
|
| 80 |
<mnw-image-uploader hidden |
| 81 |
data-presign-url="/api/projects/image/presign" |
| 82 |
data-confirm-url="/api/projects/image/confirm" |
| 83 |
data-id-field="project_id" |
| 84 |
data-id-value="{{ project_id }}" |
| 85 |
data-alt="Project image" |
| 86 |
data-preview-target="preview-cover"></mnw-image-uploader> |
| 87 |
|