58 lines
2.2 KiB
HTML
58 lines
2.2 KiB
HTML
{{define "project"}}
|
|
{{template "layout-page-start" (args "Title" .Title)}}
|
|
<div class="fixed w-full h-full bg-green-500 grid grid-cols-4 grid-rows-1">
|
|
<nav class="bg-red-500 h-full">
|
|
<h1>{{.Title}}</h1>
|
|
<p>{{.ID}}</p>
|
|
</nav>
|
|
<main class="overflow-y-scroll flex justify-center col-span-3 py-20">
|
|
<div class="flex flex-col gap-10 h-fit">
|
|
{{range $page := .Pages}}
|
|
<section id="{{$page.ID}}" class="bg-blue-500 w-100">
|
|
<!--
|
|
INFO: The interaction form could be another page that is shown
|
|
when "Add Interaction" is clicked. Said page could be also a partial
|
|
than can replace the current image using htmx, so it is
|
|
compatible with JavaScript enabled or not.
|
|
-->
|
|
<form action="/projects/{{$.ID}}/pages/{{$page.ID}}/interactions/" method="post">
|
|
<div class="flex">
|
|
<div class="relative flex">
|
|
<div class="absolute z-2 w-full h-full top-0 left-0">
|
|
{{range $key, $interaction := $page.Interactions}}
|
|
<a class="absolute" href="{{$interaction.URL}}"
|
|
style="top:{{$interaction.Y}}%;left:{{$interaction.X}}%;">
|
|
<span
|
|
class="bg-red-200 opacity-10 block w-10 h-10 transform -translate-x-[50%] -translate-y-[50%]"></span>
|
|
</a>
|
|
{{end}}
|
|
</div>
|
|
<img src="/projects/{{$.ID}}/pages/{{$page.ID}}/" class="z-1 relative">
|
|
</div>
|
|
<input type="range" min="0" max="100" name="y" style="writing-mode: vertical-lr;">
|
|
</div>
|
|
<input type="range" min="0" max="100" name="x" class="w-full">
|
|
<input type="url" required name="link" class="bg-slate-300" placeholder="url of interaction">
|
|
<button class="rounded-full bg-blue-700 p-1 px-3 text-sm text-slate-100">
|
|
Add interaction
|
|
</button>
|
|
</form>
|
|
<form action="/projects/{{$.ID}}/pages/{{$page.ID}}/" method="post">
|
|
<input type="hidden" name="x-method" value="delete">
|
|
<button class="rounded-full bg-red-700 p-1 px-3 text-sm text-slate-100">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</section>
|
|
{{end}}
|
|
<form action="/projects/{{.ID}}/pages/" method="post" enctype="multipart/form-data">
|
|
<input type="file" name="image" required>
|
|
<button>Add new page</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{{template "layout-page-end"}}
|
|
{{end}}
|