167 lines
6.2 KiB
Plaintext
167 lines
6.2 KiB
Plaintext
<div class="max-w-xl mx-auto p-3 space-y-5">
|
|
<h1 class="text-5xl font-bold text-center text-primary">Labelmaker</h1>
|
|
<p class="text-l text-center w-[350px] m-auto">
|
|
Easily create text-based images. Perfect for quickly creating decals in Tabletop Simulator.
|
|
</p>
|
|
|
|
<div
|
|
class={
|
|
"flex justify-center items-center p-4 overflow-hidden whitespace-nowrap border rounded transition duration-300 #{@preview_background} #{if @label_too_long, do: "border-danger", else: "border-primary"} #{if @label_too_long, do: "outline-danger", else: @outline != "none" && "outline-#{@outline}"}"}
|
|
style={"height: calc(2rem + #{@preview_height}px); color: #{if @label_too_long, do: "white", else: @color}; #{Tools.outline(@outline, @label_too_long)} font-family: #{@font}; font-size: #{@size}px; line-height: #{@size}px; background-color: #{if @preview_background == "", do: @color, else: ""}"}
|
|
>
|
|
<%= if @label_too_long do %>
|
|
{Constants.max_label_error()}
|
|
<% else %>
|
|
<%= for {str, i} <- Enum.with_index(@preview_text) do %>
|
|
{str}
|
|
{if i < length(@preview_text) - 1, do: raw("<br />")}
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<div class="flex flex-row justify-end" style="margin: 5px 0 -15px;">
|
|
<div class="flex flex-row gap-1">
|
|
<div
|
|
phx-click="update_preview"
|
|
phx-value-bg="r"
|
|
class="w-[12px] h-[12px] bg-gradient-to-r from-black to-white cursor-pointer"
|
|
>
|
|
</div>
|
|
<div
|
|
phx-click="update_preview"
|
|
phx-value-bg="b"
|
|
class="w-[12px] h-[12px] bg-gradient-to-b from-black to-white cursor-pointer"
|
|
>
|
|
</div>
|
|
<div
|
|
phx-click="update_preview"
|
|
phx-value-bg="c"
|
|
class="w-[12px] h-[12px] cursor-pointer"
|
|
style={"background-color: #{@color}"}
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form
|
|
id="labelmaker"
|
|
phx-hook="PersistData"
|
|
phx-change="update_label"
|
|
phx-submit="make_label"
|
|
class="space-y-4"
|
|
>
|
|
<div>
|
|
<label for="label" class="block text-sm font-medium">Label</label>
|
|
<input
|
|
phx-hook="EnterToNewline"
|
|
type="text"
|
|
id="label"
|
|
name="label"
|
|
value={@label}
|
|
placeholder="Enter text"
|
|
class={"mt-1 block w-full rounded border border-gray-300 px-3 py-2 text-fg-light dark:text-fg-dark dark:border-gray-600 focus:ring-primary dark:placeholder-gray-400/50 transition duration-300 #{if @label_too_long, do: "bg-danger", else: "bg-secondary-light dark:bg-secondary-dark"}"}
|
|
/>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400 m-0 ml-1">
|
|
<code>\n</code> or <Enter> for newlines
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="font" class="block text-sm font-medium">Font</label>
|
|
<select
|
|
id="font"
|
|
name="font"
|
|
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
|
|
>
|
|
<%= for font <- Constants.fonts() do %>
|
|
<option value={font} selected={@font == font}>{font}</option>
|
|
<% end %>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="color" class="block text-sm font-medium">Color</label>
|
|
<select
|
|
id="color"
|
|
name="color"
|
|
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
|
|
>
|
|
<%= for color <- Constants.colors() do %>
|
|
<option value={color} selected={@color == color}>{color}</option>
|
|
<% end %>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="outline" class="block text-sm font-medium">Outline</label>
|
|
<select
|
|
id="outline"
|
|
name="outline"
|
|
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
|
|
>
|
|
<%= for outline <- Constants.outlines() do %>
|
|
<option value={outline} selected={@outline == outline}>{outline}</option>
|
|
<% end %>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="size" class="block text-sm font-medium">Size</label>
|
|
<select
|
|
id="size"
|
|
name="size"
|
|
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
|
|
>
|
|
<%= for size <- Constants.sizes() do %>
|
|
<option value={size} selected={@size == size}>{size}</option>
|
|
<% end %>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="width" class="block text-sm font-medium">Width</label>
|
|
<input
|
|
type="number"
|
|
id="width"
|
|
name="width"
|
|
min="0"
|
|
max={Constants.max_width()}
|
|
step={1}
|
|
value={if @width != 0, do: @width}
|
|
placeholder="Image width"
|
|
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="height" class="block text-sm font-medium">Height</label>
|
|
<input
|
|
type="number"
|
|
id="height"
|
|
name="height"
|
|
min="0"
|
|
max={Constants.max_height()}
|
|
step={1}
|
|
value={if @height != 0, do: @height}
|
|
placeholder="Image height"
|
|
class="mt-1 block w-full rounded border border-gray-300 px-3 py-2 bg-secondary-light text-fg-light dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600 focus:ring-primary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<.radio_component
|
|
options={Constants.permitted_alignments()}
|
|
selected={@align}
|
|
event_name="update_alignment"
|
|
/>
|
|
</form>
|
|
|
|
<div class="text-center">
|
|
<a href={@link}>
|
|
<button class="inline-block bg-primary text-fg-light px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark">
|
|
Create
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|