95 lines
4.1 KiB
Plaintext
95 lines
4.1 KiB
Plaintext
get_editor_page :: (req: Request) -> string {
|
|
builder : String_Builder;
|
|
print_to_builder(*builder, start)
|
|
}
|
|
|
|
start : string = #string DONE
|
|
<form hx-post="/api/recipe/save" hx-trigger="submit">
|
|
<nav>
|
|
<div class="brand">OMAKASE <span class="mono" style="margin-left: 10px; color: var(--gold);">// EDITOR</span></div>
|
|
<div>
|
|
<a href="recipe.html" style="margin-right: 20px; color: var(--grey); text-decoration: none;">DELETE</a>
|
|
<!-- This button submits the form via HTMX -->
|
|
<button type="submit" class="save-btn">SAVE ASSET</button>
|
|
</div>
|
|
</nav>
|
|
DONE
|
|
|
|
page : string = #string DONE
|
|
<div class="editor-container">
|
|
<div style="grid-column: 1 / -1;">
|
|
<div class="drop-zone">
|
|
<span style="font-size: 2rem;">+</span>
|
|
<span class="mono">DRAG HERO IMAGE HERE</span>
|
|
<!-- Hidden file input would go here -->
|
|
</div>
|
|
<input type="text" name="title" class="input-title" value="Bavette Steak w/ Chimichurri" placeholder="Recipe Title">
|
|
<div class="mono">UUID: 8f92-29a1-....</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="mono" style="margin-bottom: 1rem; border-bottom: 2px solid var(--ink);">Complications</div>
|
|
|
|
<div style="display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #eee; align-items: center;">
|
|
<span style="color: red; cursor: pointer;">×</span>
|
|
<input type="text" name="comp_1_name" class="input-comp" value="Grass-fed Bavette">
|
|
<input type="text" name="comp_1_qty" class="mono" value="600g" style="width: 60px; text-align: right;">
|
|
</div>
|
|
|
|
<!-- ... existing items ... -->
|
|
|
|
<!-- Triggers the drawer (Client Side) -->
|
|
<button type="button" class="add-btn" onclick="openDrawer()">+ Add Component</button>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="mono" style="margin-bottom: 1rem; border-bottom: 2px solid var(--ink);">Execution</div>
|
|
<div style="display: flex; gap: 1rem; margin-bottom: 2rem;">
|
|
<div class="mono" style="font-size: 1.5rem; color: var(--gold);">01</div>
|
|
<textarea name="step_1" class="input-step" rows="3">Remove Bavette from fridge 45 mins prior. Salt heavily.</textarea>
|
|
</div>
|
|
<!-- ... existing items ... -->
|
|
<button type="button" class="add-btn">+ Add Step</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- COMPONENT DRAWER -->
|
|
<div class="overlay" id="overlay" onclick="closeDrawer()"></div>
|
|
<div class="drawer" id="drawer">
|
|
<h3 style="margin-bottom: 1rem;">Assets <span class="htmx-indicator mono" style="font-size: 0.6rem; color: var(--gold);">SEARCHING...</span></h3>
|
|
|
|
<!-- HTMX SEARCH INPUT -->
|
|
<input type="text"
|
|
class="drawer-search"
|
|
placeholder="Search atoms..."
|
|
name="q"
|
|
hx-get="/api/components/search"
|
|
hx-trigger="keyup changed delay:500ms"
|
|
hx-target="#drawer-results">
|
|
|
|
<!-- Results container targeted by HTMX -->
|
|
<ul id="drawer-results" class="drawer-list">
|
|
<!-- Initial state or empty -->
|
|
<li class="drawer-item">
|
|
<span>Asparagus (Green)</span>
|
|
<span class="mono">VEG</span>
|
|
</li>
|
|
<!-- ... -->
|
|
</ul>
|
|
|
|
<button class="save-btn" style="width: 100%; text-align: center;">Create New Atom</button>
|
|
</div>
|
|
|
|
<script>
|
|
function openDrawer() {
|
|
document.getElementById('drawer').classList.add('open');
|
|
document.getElementById('overlay').classList.add('visible');
|
|
}
|
|
function closeDrawer() {
|
|
document.getElementById('drawer').classList.remove('open');
|
|
document.getElementById('overlay').classList.remove('visible');
|
|
}
|
|
</script>
|
|
DONE
|