| 1 |
{% extends "base.html" %} |
| 2 |
{% import "_sheet.html" as sheet %} |
| 3 |
|
| 4 |
{% block title %}New Project - Makenotwork{% endblock %} |
| 5 |
{% block body_attrs %} class="padded-page"{% endblock %} |
| 6 |
|
| 7 |
{% block head %} |
| 8 |
{% call sheet::sheet("wizard.css") %}{% endcall %} |
| 9 |
{% endblock %} |
| 10 |
|
| 11 |
{% block content %} |
| 12 |
{% include "partials/site_header.html" %} |
| 13 |
|
| 14 |
<div class="wizard-layout"> |
| 15 |
<aside class="wizard-sidebar"> |
| 16 |
<h2 class="subtitle-h2">New Project</h2> |
| 17 |
{% include "wizards/partials/step_nav.html" %} |
| 18 |
</aside> |
| 19 |
|
| 20 |
<div class="wizard-content" id="wizard-step"> |
| 21 |
<div class="wizard-step"> |
| 22 |
<h2 class="subtitle-h2">Basics</h2> |
| 23 |
<p class="step-description">Name your project, set a URL name, and choose the tools you will use.</p> |
| 24 |
|
| 25 |
<form hx-post="/dashboard/new-project/step/basics" |
| 26 |
hx-target="#wizard-step" hx-swap="innerHTML"> |
| 27 |
<div class="form-group"> |
| 28 |
<label for="wiz-title">Title</label> |
| 29 |
<input type="text" id="wiz-title" name="title" required |
| 30 |
placeholder="My Awesome Project" autocomplete="off"> |
| 31 |
</div> |
| 32 |
|
| 33 |
<div class="form-group"> |
| 34 |
<label for="wiz-slug">URL name</label> |
| 35 |
<input type="text" id="wiz-slug" name="slug" pattern="[a-z0-9-]+" |
| 36 |
title="Letters, numbers, and hyphens only" |
| 37 |
placeholder="my-project" required autocomplete="off" |
| 38 |
hx-post="/api/validate/project-slug" |
| 39 |
hx-trigger="keyup changed delay:500ms" |
| 40 |
hx-target="#slug-status" |
| 41 |
hx-indicator="#slug-spinner"> |
| 42 |
<div class="hint">Letters, numbers, hyphens only. This is your project URL.</div> |
| 43 |
<span id="slug-spinner" class="htmx-indicator wizard-field-spinner">Checking...</span> |
| 44 |
<span id="slug-status"></span> |
| 45 |
</div> |
| 46 |
|
| 47 |
<div class="form-group"> |
| 48 |
<label>What tools will you use?</label> |
| 49 |
<div class="hint wizard-hint-gap-md">Select all that apply. You can change these anytime.</div> |
| 50 |
<div class="type-grid"> |
| 51 |
{% for (value, label, desc) in project_features %} |
| 52 |
<label class="card--selectable"> |
| 53 |
<input type="checkbox" name="features" value="{{ value }}"> |
| 54 |
<span class="card--selectable-inner"> |
| 55 |
<span class="card--selectable-label">{{ label }}</span> |
| 56 |
<span class="card--selectable-desc">{{ desc }}</span> |
| 57 |
</span> |
| 58 |
</label> |
| 59 |
{% endfor %} |
| 60 |
</div> |
| 61 |
</div> |
| 62 |
|
| 63 |
<div class="form-group"> |
| 64 |
<label for="wiz-category">Category</label> |
| 65 |
<div class="suggestion-input" id="category-suggestion"> |
| 66 |
<input type="text" id="wiz-category" name="category" |
| 67 |
placeholder="What kind of project is this?" |
| 68 |
autocomplete="off"> |
| 69 |
<div class="suggestion-dropdown" id="category-dropdown"></div> |
| 70 |
</div> |
| 71 |
<div class="hint">Choose an existing category or type a new one.</div> |
| 72 |
</div> |
| 73 |
|
| 74 |
<div class="form-group"> |
| 75 |
<label for="wiz-description">Description</label> |
| 76 |
<textarea id="wiz-description" name="description" rows="4" |
| 77 |
placeholder="Describe your project..."></textarea> |
| 78 |
</div> |
| 79 |
|
| 80 |
<div class="form-group"> |
| 81 |
<label>AI Disclosure</label> |
| 82 |
<div class="hint wizard-hint-gap-sm">How was AI used in creating this project's content?</div> |
| 83 |
<div class="wizard-radio-group"> |
| 84 |
<label class="wizard-radio-option"> |
| 85 |
<input type="radio" name="ai_tier" value="handmade" required> |
| 86 |
<span><strong>Handmade</strong>: no AI tools used in content creation</span> |
| 87 |
</label> |
| 88 |
<label class="wizard-radio-option"> |
| 89 |
<input type="radio" name="ai_tier" value="assisted" required> |
| 90 |
<span><strong>AI-Assisted</strong>: AI tools used as part of the creative process</span> |
| 91 |
</label> |
| 92 |
<label class="wizard-radio-option"> |
| 93 |
<input type="radio" name="ai_tier" value="generated" required> |
| 94 |
<span><strong>AI-Generated</strong>: content primarily generated by AI</span> |
| 95 |
</label> |
| 96 |
</div> |
| 97 |
</div> |
| 98 |
|
| 99 |
<div class="form-group hidden" id="ai-disclosure-group"> |
| 100 |
<label for="wiz-ai-disclosure">Disclosure Details</label> |
| 101 |
<textarea id="wiz-ai-disclosure" name="ai_disclosure" rows="2" |
| 102 |
placeholder="Describe how AI was used..."></textarea> |
| 103 |
</div> |
| 104 |
|
| 105 |
<div class="wizard-actions"> |
| 106 |
<a href="/dashboard" class="btn-secondary">Cancel</a> |
| 107 |
<button type="submit" class="btn-primary">Continue</button> |
| 108 |
</div> |
| 109 |
</form> |
| 110 |
</div> |
| 111 |
</div> |
| 112 |
</div> |
| 113 |
{% endblock %} |
| 114 |
|
| 115 |
{% block scripts %} |
| 116 |
<script src="/static/wizard.js"></script> |
| 117 |
<script src="/static/wizard-project-shell.js?v=0623"></script> |
| 118 |
{% endblock %} |
| 119 |
|