69 lines
2.8 KiB
HTML
69 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html data-theme="forest" lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>travel-memories</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>
|
|
</head>
|
|
<body class="min-h-screen bg-base-200" x-data="notesApp({{ notes_content | tojson }}, '{{ album_id }}')">
|
|
|
|
<!-- Navbar -->
|
|
<div class="navbar bg-base-100 shadow-sm sticky top-0 z-40">
|
|
<div class="navbar-start px-4 font-bold text-lg">travel-memories</div>
|
|
<div class="navbar-center">
|
|
<ul class="steps">
|
|
{% set phases = [('','Album'),('triage','Triage'),('curate','Curate'),('group','Group'),('write','Write'),('export','Export')] %}
|
|
{% for key, label in phases %}
|
|
<li class="step {% if current_phase == key %}step-primary{% endif %}
|
|
{% if key in phase_stale %}step-warning{% endif %}">
|
|
{% if album_id %}
|
|
<a hx-post="/nav/phase" hx-vals='{"album_id":"{{ album_id }}","target_phase":"{{ key }}"}' href="/{{ key }}{% if album_id %}?album_id={{ album_id }}{% endif %}">{{ label }}</a>
|
|
{% else %}{{ label }}{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
<div class="navbar-end px-4">
|
|
{% if album_id %}
|
|
<button class="btn btn-ghost btn-sm" @click="open = !open">📝 Notes</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stale warning -->
|
|
{% if current_phase in phase_stale %}
|
|
<div class="alert alert-warning rounded-none" id="stale-banner">
|
|
<span>You changed earlier decisions — review this phase before exporting.</span>
|
|
<form method="post" action="/nav/dismiss-stale">
|
|
<input type="hidden" name="album_id" value="{{ album_id }}">
|
|
<input type="hidden" name="phase" value="{{ current_phase }}">
|
|
<button class="btn btn-xs">Dismiss</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Body with notes drawer -->
|
|
<div class="flex relative">
|
|
<div class="flex-1 min-w-0 transition-all" :class="open ? 'mr-80' : ''">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<!-- Notes panel -->
|
|
<div class="fixed right-0 top-16 h-[calc(100vh-4rem)] w-80 bg-base-100 shadow-2xl p-4 flex flex-col transition-transform z-30"
|
|
:class="open ? 'translate-x-0' : 'translate-x-full'" id="notes-panel">
|
|
<h3 class="font-bold text-base mb-2">Notes</h3>
|
|
<textarea class="textarea textarea-bordered flex-1 resize-none text-sm"
|
|
x-model="notes"
|
|
@input="scheduleAutosave()"
|
|
placeholder="Jot down memories at any time…"></textarea>
|
|
<div class="text-xs text-right mt-1 opacity-60" x-text="status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/app.js"></script>
|
|
{% block extra_scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|