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/components/buttons.html
+135
View File
@@ -0,0 +1,135 @@
{% extends "base.html" %}
{% block title %}Buttons - Design System Wiki{% endblock %}
{% block content %}
<div class="grow max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-10 flex flex-col lg:flex-row gap-8">
<!-- Left Navigation Sidebar -->
{% include "components/sidebar.html" %}
<!-- Main Content -->
<div class="flex-1 space-y-8">
<!-- Header -->
<div class="pb-6 border-b border-border">
<span class="text-xs font-semibold text-indigo-400">Actions / Navigation</span>
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Buttons</h1>
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
Standard button variants including primary, secondary, outlines, and statuses, completed with focus ring outlines, scale transformations on hover, and loading spinner designs.
</p>
</div>
<!-- Section Buttons -->
<section class="space-y-4">
<h2 class="text-lg font-bold text-slate-200">Button Variants & Interactive Demos</h2>
<div class="border border-border rounded-3xl p-5 bg-secondary/10 space-y-4">
<!-- Tab Headers -->
<div class="flex border-b border-border/60 pb-1.5">
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-sky-500 text-sky-400" onclick="toggleWikiTabs(this, 'btn-sandbox')">Interactive Demo</button>
<button class="px-3 py-1.5 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-muted-foreground" onclick="toggleWikiTabs(this, 'btn-code')">HTML Markup</button>
</div>
<!-- Demo Viewport -->
<div id="btn-sandbox" class="wiki-pane flex flex-wrap gap-4 py-2">
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-primary text-primary-foreground hover:opacity-90 px-4 py-2.5 shadow-md shadow-slate-950/20 active:scale-95">
Primary
</button>
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2.5 active:scale-95">
Secondary
</button>
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background border border-border bg-transparent hover:bg-secondary text-slate-200 px-4 py-2.5 active:scale-95">
Outline
</button>
<button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 focus:ring-offset-background bg-destructive text-destructive-foreground hover:opacity-90 px-4 py-2.5 shadow-md active:scale-95">
Destructive
</button>
<!-- Icon Button -->
<button class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 active:scale-95">
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
</svg>
Create Task
</button>
<!-- Loading State -->
<button disabled class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold bg-secondary text-slate-500 cursor-not-allowed px-4 py-2.5">
<svg class="animate-spin h-3.5 w-3.5 text-slate-500" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Processing...
</button>
</div>
<!-- Code Snippet Area -->
<div id="btn-code" class="wiki-pane hidden space-y-4">
<div class="relative group">
<button class="absolute top-2 right-2 p-1.5 rounded-lg border border-border bg-popover/80 backdrop-blur text-[10px] font-semibold text-muted-foreground/90 hover:text-white hover:bg-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center gap-1.5" onclick="copyCodeSnippet(this)">
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
Copy Code
</button>
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>&lt;!-- Primary Button --&gt;
&lt;button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2 focus:ring-offset-background bg-primary text-primary-foreground hover:opacity-90 px-4 py-2.5 shadow-md shadow-slate-950/20 active:scale-95"&gt;
Primary
&lt;/button&gt;
&lt;!-- Secondary Button --&gt;
&lt;button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2.5 active:scale-95"&gt;
Secondary
&lt;/button&gt;
&lt;!-- Outline Button --&gt;
&lt;button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 border border-border bg-transparent hover:bg-secondary text-slate-200 px-4 py-2.5 active:scale-95"&gt;
Outline
&lt;/button&gt;
&lt;!-- Destructive Button --&gt;
&lt;button class="inline-flex items-center justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-rose-500 bg-destructive text-destructive-foreground hover:opacity-90 px-4 py-2.5 active:scale-95"&gt;
Destructive
&lt;/button&gt;
&lt;!-- Create Button (Icon + Text) --&gt;
&lt;button class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold transition-all focus:outline-none focus:ring-2 focus:ring-sky-500 bg-indigo-650 hover:bg-indigo-600 text-white px-4 py-2.5 active:scale-95"&gt;
&lt;svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"&gt;
&lt;path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/&gt;
&lt;/svg&gt;
Create Task
&lt;/button&gt;
&lt;!-- Spinner Loading Button --&gt;
&lt;button disabled class="inline-flex items-center gap-2 justify-center rounded-xl text-xs font-bold bg-secondary text-slate-500 cursor-not-allowed px-4 py-2.5"&gt;
&lt;svg class="animate-spin h-3.5 w-3.5" fill="none" viewBox="0 0 24 24"&gt;
&lt;circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"&gt;&lt;/circle&gt;
&lt;path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"&gt;&lt;/svg&gt;
Processing...
&lt;/button&gt;</code></pre>
</div>
</div>
</div>
</section>
</div>
</div>
<script>
function toggleWikiTabs(btn, paneId) {
const card = btn.closest('.border-border');
if (!card) return;
card.querySelectorAll('button').forEach(b => {
b.classList.remove('border-sky-500', 'text-sky-400');
b.classList.add('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
});
btn.classList.remove('border-transparent', 'text-muted-foreground', 'hover:text-muted-foreground');
btn.classList.add('border-sky-500', 'text-sky-400');
card.querySelectorAll('.wiki-pane').forEach(p => p.classList.add('hidden'));
const target = card.querySelector('#' + paneId);
if (target) target.classList.remove('hidden');
}
</script>
{% endblock %}