Skip to main content

max / makenotwork

7.1 KB · 161 lines History Blame Raw
1 {% include "wizards/partials/step_nav.html" %}
2
3 <div class="wizard-step">
4 <h2 class="subtitle-h2">Basics</h2>
5 <p class="step-description">Name your project, set a URL name, and choose the tools you will use.</p>
6 <p class="form-hint">A <strong>project</strong> groups related work &mdash; an album, podcast, course, or product line. You'll add individual <strong>items</strong> (tracks, episodes, files) inside it.</p>
7
8 <form hx-post="/dashboard/new-project/{{ slug }}/step/basics"
9 hx-target="#wizard-step" hx-swap="innerHTML"
10 hx-push-url="/dashboard/new-project/{{ slug }}/step/appearance">
11 <div class="form-group">
12 <label for="wiz-title">Title</label>
13 <input type="text" id="wiz-title" name="title" required value="{{ title }}"
14 placeholder="My Awesome Project" autocomplete="off">
15 </div>
16
17 <div class="form-group">
18 <label for="wiz-slug">URL name</label>
19 <input type="text" id="wiz-slug" name="slug" value="{{ slug }}" readonly
20 class="readonly-field">
21 <div class="hint">The URL name is locked after the project is created.</div>
22 </div>
23
24 <div class="form-group">
25 <label>What tools will you use?</label>
26 <div class="hint wizard-hint-gap-md">Select all that apply. You can change these anytime.</div>
27 <div class="type-grid">
28 {% for (value, label, desc) in project_features %}
29 <label class="type-card">
30 <input type="checkbox" name="features" value="{{ value }}"
31 {% if features.contains(&value.to_string()) %}checked{% endif %}>
32 <span class="type-card-inner">
33 <span class="type-card-label">{{ label }}</span>
34 <span class="type-card-desc">{{ desc }}</span>
35 </span>
36 </label>
37 {% endfor %}
38 </div>
39 </div>
40
41 <div class="form-group">
42 <label for="wiz-category">Category</label>
43 <div class="suggestion-input" id="category-suggestion">
44 <input type="text" id="wiz-category" name="category"
45 value="{{ category_name }}"
46 placeholder="What kind of project is this?"
47 autocomplete="off">
48 <div class="suggestion-dropdown" id="category-dropdown"></div>
49 </div>
50 <div class="hint">Choose an existing category or type a new one.</div>
51 </div>
52
53 <div class="form-group">
54 <label for="wiz-description">Description</label>
55 <textarea id="wiz-description" name="description" rows="4"
56 placeholder="Describe your project...">{{ description }}</textarea>
57 </div>
58
59 <div class="form-group">
60 <label>AI Disclosure</label>
61 <div class="hint wizard-hint-gap-sm">How was AI used in creating this project's content?</div>
62 <div class="wizard-radio-group">
63 <label class="wizard-radio-option">
64 <input type="radio" name="ai_tier" value="handmade" required
65 {% if ai_tier == "handmade" %}checked{% endif %}>
66 <span><strong>Handmade</strong> — no AI tools used in content creation</span>
67 </label>
68 <label class="wizard-radio-option">
69 <input type="radio" name="ai_tier" value="assisted" required
70 {% if ai_tier == "assisted" %}checked{% endif %}>
71 <span><strong>AI-Assisted</strong> — AI tools used as part of the creative process</span>
72 </label>
73 <label class="wizard-radio-option">
74 <input type="radio" name="ai_tier" value="generated" required
75 {% if ai_tier == "generated" %}checked{% endif %}>
76 <span><strong>AI-Generated</strong> — content primarily generated by AI</span>
77 </label>
78 </div>
79 </div>
80
81 <div class="form-group{% if ai_tier != "assisted" %} hidden{% endif %}" id="ai-disclosure-group">
82 <label for="wiz-ai-disclosure">Disclosure Details</label>
83 <textarea id="wiz-ai-disclosure" name="ai_disclosure" rows="2"
84 placeholder="Describe how AI was used (e.g., code suggestions, image generation, etc.)">{{ ai_disclosure }}</textarea>
85 </div>
86
87 <div class="wizard-actions">
88 <a href="/dashboard" class="btn-secondary">Cancel</a>
89 <button type="submit" class="btn-primary">Continue</button>
90 </div>
91 </form>
92 </div>
93 <script>
94 (function() {
95 var input = document.getElementById('wiz-category');
96 var dropdown = document.getElementById('category-dropdown');
97 if (!input || !dropdown) return;
98 var debounce;
99
100 function showDropdown(items, query) {
101 dropdown.innerHTML = '';
102 items.forEach(function(c) {
103 var div = document.createElement('div');
104 div.className = 'suggestion-item';
105 div.textContent = c.name;
106 div.addEventListener('mousedown', function(e) {
107 e.preventDefault();
108 input.value = c.name;
109 dropdown.classList.remove('open');
110 });
111 dropdown.appendChild(div);
112 });
113 var q = query.trim();
114 if (q.length > 0 && !items.some(function(c) { return c.name.toLowerCase() === q.toLowerCase(); })) {
115 var create = document.createElement('div');
116 create.className = 'suggestion-item suggestion-create';
117 create.textContent = 'Create: ' + q;
118 create.addEventListener('mousedown', function(e) {
119 e.preventDefault();
120 input.value = q;
121 dropdown.classList.remove('open');
122 });
123 dropdown.appendChild(create);
124 }
125 if (dropdown.children.length > 0) {
126 dropdown.classList.add('open');
127 } else {
128 dropdown.classList.remove('open');
129 }
130 }
131
132 input.addEventListener('input', function() {
133 clearTimeout(debounce);
134 var q = input.value.trim();
135 if (q.length < 1) { dropdown.classList.remove('open'); return; }
136 debounce = setTimeout(function() {
137 fetch('/api/categories/search?q=' + encodeURIComponent(q))
138 .then(function(r) { return r.json(); })
139 .then(function(cats) { showDropdown(cats, q); })
140 .catch(function() {});
141 }, 200);
142 });
143
144 input.addEventListener('focus', function() {
145 if (dropdown.children.length > 0) dropdown.classList.add('open');
146 });
147
148 input.addEventListener('blur', function() {
149 setTimeout(function() { dropdown.classList.remove('open'); }, 150);
150 });
151
152 // AI tier toggle
153 document.querySelectorAll('input[name="ai_tier"]').forEach(function(r) {
154 r.addEventListener('change', function() {
155 var group = document.getElementById('ai-disclosure-group');
156 group.classList.toggle('hidden', this.value !== 'assisted');
157 });
158 });
159 })();
160 </script>
161