174 lines
6.2 KiB
Plaintext
174 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-all 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={"
|
|
aspect-ratio: 4 / 3;
|
|
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 %>
|
|
{raw(@preview_text)}
|
|
<% 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>
|
|
<textarea
|
|
id="label"
|
|
name="label"
|
|
rows={@rows + 1}
|
|
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"}"}
|
|
>{@label}</textarea>
|
|
</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 class={if(@sizing == "wxh", do: "opacity-50", else: "")}>
|
|
<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 class={if(@sizing == "font", do: "opacity-50", else: "")}>
|
|
<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 focus:ring-primary",
|
|
"dark:bg-secondary-dark dark:text-fg-dark dark:border-gray-600"
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div class={if(@sizing == "font", do: "opacity-50", else: "")}>
|
|
<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"
|
|
class={if(@sizing == "font", do: "opacity-50", else: "")}
|
|
/>
|
|
</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>
|