shaamilahmed/Htmx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initialize template shell and basic components

Browse Source
This commit is contained in:
Enciphered
2026-05-30 01:09:14 +05:00
commit f42a5f05b2
55 changed files with 13107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/developers/edit.html
+42
View File
@@ -0,0 +1,42 @@
{% extends "base.html" %}
{% block title %}Edit Developer - Stick{% endblock %}
{% block content %}
<div class="grow py-12 px-4 sm:px-6 lg:px-8 max-w-lg mx-auto w-full">
<div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-8 shadow-2xl relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-sky-400 via-blue-500 to-indigo-600"></div>
<div class="text-center mb-8">
<h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Edit Developer</h2>
<p class="mt-2 text-sm text-slate-400">Update the developer's profile and skills</p>
</div>
<form action="/developers/{{ developer.id.unwrap().to_hex() }}/edit" method="post" class="space-y-5">
<div>
<label for="name" class="block text-sm font-medium text-slate-400 mb-1.5">Name</label>
<input id="name" name="name" type="text" value="{{ developer.name }}" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm">
</div>
<div>
<label for="email" class="block text-sm font-medium text-slate-400 mb-1.5">Email</label>
<input id="email" name="email" type="email" value="{{ developer.email }}" required class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm">
</div>
<div>
<label for="skills" class="block text-sm font-medium text-slate-400 mb-1.5">Skills (Comma-separated)</label>
<input id="skills" name="skills" type="text" value='{{ developer.skills.join(", ") }}' class="appearance-none rounded-xl relative block w-full px-4 py-3 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm">
</div>
<div class="flex gap-4 pt-2">
<a href="/developers" class="flex-1 py-3 px-4 text-center text-sm font-semibold rounded-xl text-slate-300 bg-slate-900 border border-slate-800 hover:border-slate-700 transition">
Cancel
</a>
<button type="submit" class="flex-1 py-3 px-4 text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-lg shadow-sky-500/10">
Save Changes
</button>
</div>
</form>
</div>
</div>
{% endblock %}
templates/developers/list.html
+110
View File
@@ -0,0 +1,110 @@
{% extends "base.html" %}
{% block title %}Developers - Stick{% endblock %}
{% block content %}
<div class="grow py-12 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto w-full">
<!-- Header -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 pb-6 border-b border-slate-900 gap-4">
<div>
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight">Developers</h1>
<p class="text-slate-400 text-sm mt-1">Manage developers to assign them workflow tasks</p>
</div>
<div class="flex items-center gap-3">
<span class="text-xs font-semibold px-3 py-1.5 rounded-xl bg-slate-900 border border-slate-800 text-slate-300">
Total Developers: {{ developers.len() }}
</span>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Add Developer Form -->
<div class="lg:col-span-1">
<div class="bg-[#1e293b]/40 backdrop-blur-xl border border-slate-900 rounded-3xl p-6 shadow-xl sticky top-24">
<h3 class="text-lg font-bold text-slate-100 mb-4 flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 text-sky-400">
<path stroke-linecap="round" stroke-linejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
</svg>
Add Developer
</h3>
<form action="/developers" method="post" class="space-y-4">
<div>
<label for="name" class="block text-xs font-semibold text-slate-400 mb-1.5">Name</label>
<input id="name" name="name" type="text" required class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="e.g. Alice Smith">
</div>
<div>
<label for="email" class="block text-xs font-semibold text-slate-400 mb-1.5">Email</label>
<input id="email" name="email" type="email" required class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="e.g. alice@company.com">
</div>
<div>
<label for="skills" class="block text-xs font-semibold text-slate-400 mb-1.5">Skills (Comma-separated)</label>
<input id="skills" name="skills" type="text" class="appearance-none rounded-xl relative block w-full px-4 py-2.5 bg-[#0f172a]/80 border border-slate-800 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition duration-200 text-sm" placeholder="e.g. Rust, Axum, MongoDB">
</div>
<button type="submit" class="w-full py-3 px-4 text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition shadow-md shadow-sky-500/10">
Create Developer
</button>
</form>
</div>
</div>
<!-- Listing -->
<div class="lg:col-span-2 space-y-4">
{% if developers.is_empty() %}
<div class="bg-slate-900/20 border border-dashed border-slate-800 rounded-3xl p-12 text-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-12 h-12 text-slate-600 mx-auto mb-4">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
<h3 class="text-base font-bold text-slate-350 mb-1">No developers added</h3>
<p class="text-sm text-slate-500">Add developers using the form on the left to start assigning tasks.</p>
</div>
{% else %}
{% for dev in developers %}
<div class="bg-[#1e293b]/30 hover:bg-[#1e293b]/40 border border-slate-900 rounded-2xl p-5 flex items-start justify-between gap-4 transition duration-300 group">
<div class="space-y-2">
<h4 class="text-base font-bold text-slate-200">{{ dev.name }}</h4>
<p class="text-xs text-slate-400 flex items-center gap-1.5">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3.5 h-3.5 text-slate-500">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
</svg>
{{ dev.email }}
</p>
<!-- Skills -->
{% if !dev.skills.is_empty() %}
<div class="flex flex-wrap gap-1.5 mt-2">
{% for skill in dev.skills %}
<span class="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-slate-900 border border-slate-800 text-sky-400">
{{ skill }}
</span>
{% endfor %}
</div>
{% endif %}
</div>
<!-- Action Buttons -->
<div class="flex items-center gap-2 flex-shrink-0 opacity-100 md:opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<a href="/developers/{{ dev.id.unwrap().to_hex() }}/edit" class="p-2 rounded-lg bg-sky-500/10 hover:bg-sky-500/20 border border-sky-500/20 text-sky-400 transition" title="Edit Developer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.83 20.013a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
</svg>
</a>
<form action="/developers/{{ dev.id.unwrap().to_hex() }}/delete" method="post" class="inline">
<button type="submit" class="p-2 rounded-lg bg-rose-500/10 hover:bg-rose-500/20 border border-rose-500/20 text-rose-400 transition" title="Delete Developer">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4">
<path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.34 9m-4.72 0-.34-9m9.03-3.03-.58 17.5A2.25 2.25 0 0 1 17.11 21H6.9a2.25 2.25 0 0 1-2.18-2.13L4.1 6.57m3.07-7.94h14.98m-14.98 0A1.75 1.75 0 0 1 7.25 1.5H16.75A1.75 1.75 0 0 1 18 3m-12 0h12" />
</svg>
</button>
</form>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</div>
{% endblock %}
templates/developers/search_results.html
+15
View File
@@ -0,0 +1,15 @@
{% if developers.is_empty() %}
<div class="px-3 py-4 text-xs text-muted-foreground text-center">No developers found matching this query</div>
{% else %}
<div class="max-h-60 overflow-y-auto space-y-0.5">
{% for dev in developers %}
<div tabindex="0"
data-id="{{ dev.id.unwrap().to_hex() }}"
data-name="{{ dev.name }}"
class="combobox-item flex items-center justify-between w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground text-slate-200 cursor-pointer select-none focus:bg-accent focus:text-accent-foreground focus:outline-none transition-colors group">
<span class="font-medium text-slate-200 group-hover:text-accent-foreground">{{ dev.name }}</span>
<span class="text-[10px] text-muted-foreground/70 group-hover:text-accent-foreground/70">Select</span>
</div>
{% endfor %}
</div>
{% endif %}