gavin/labelmaker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated interface

Browse Source
This commit is contained in:
Gavin McDonald
2025-05-07 10:31:43 -04:00
parent 4786d0fee9
commit ed7931f0d6
2 changed files with 90 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
assets/tailwind.config.js
View File

@@ -12,29 +12,18 @@ module.exports = {
extend: { extend: {
colors: { colors: {
primary: '#6495ED', // cornflowerblue primary: '#6495ED', // cornflowerblue
highlight: '#74A0EF',
bg: { bg: {
light: '#F0F8FF', // aliceblue light: '#D1DFFA',
dark: '#1C1F26', // near black dark: '#1E2D47',
}, },
fg: { fg: {
light: '#222222', light: '#1E2D47',
dark: '#E0E6ED', dark: '#D1DFFA',
}, },
secondary: { secondary: {
light: '#B0C4DE', light: '#64D9ED',
dark: '#3A4A5E', dark: '#324B77',
},
accent: {
light: '#7B68EE',
dark: '#9CAEFF',
},
danger: {
light: '#F08080',
dark: '#FF6B6B',
},
success: {
light: '#3CB371',
dark: '#4CAF50',
}, },
}, },
}, },

111
lib/labelmaker_web/live/home.ex
View File

@@ -23,36 +23,91 @@ defmodule LabelmakerWeb.Home do
def render(assigns) do def render(assigns) do
~H""" ~H"""
<div> <div class="max-w-xl mx-auto p-4 space-y-6">
<h1>Label Maker</h1> <h1 class="text-2xl font-bold text-center">Labelmaker</h1>
<form phx-change="update_label" phx-submit="make_label">
<input type="text" name="label" value={@label} placeholder="Enter text" /> <form phx-change="update_label" phx-submit="make_label" class="space-y-4">
<div style={ <div
"color: #{@color}; font-family: #{@font}; font-size: #{@size}px;" class="flex justify-center items-center h-[72px] bg-gradient-to-r from-black to-white border rounded border-primary"
}> style={"color: #{@color}; font-family: #{@font}; font-size: #{@size}px;"}
>
{@label} {@label}
</div> </div>
<select name="font" value={@font}>
<%= for font <- Constants.fonts() do %> <div>
<option value={font} selected={@font == font}>{font}</option> <label for="label" class="block text-sm font-medium">Label</label>
<% end %> <input
</select> type="text"
<select name="color" value={@color}> id="label"
<%= for color <- Constants.colors() do %> name="label"
<option value={color} selected={@color == color}>{color}</option> value={@label}
<% end %> placeholder="Enter text"
</select> 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 dark:placeholder-gray-400/50"
<select name="outline" value={@outline}> />
<%= for outline <- Constants.outlines() do %> </div>
<option value={outline} selected={@outline == outline}>{outline}</option>
<% end %> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
</select> <div>
<select name="size" value={@size}> <label for="font" class="block text-sm font-medium">Font</label>
<%= for size <- Constants.sizes() do %> <select
<option value={size} selected={@size == size}>{size}</option> id="font"
<% end %> name="font"
</select> 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"
<button type="submit">Create</button> >
<%= 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>
<div class="text-center">
<button
type="submit"
class="inline-block bg-primary text-fg-light dark:text-fg-dark px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light focus:dark:ring-fg-dark"
>
Create
</button>
</div>
</form> </form>
</div> </div>
""" """