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/modals.html
+169
View File
@@ -0,0 +1,169 @@
{% extends "base.html" %}
{% block title %}Dialog Modals - 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">Overlays</span>
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Dialog Modals</h1>
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
Overlay window popups centering inside the viewport with scale animations, hardware blur filters, and document-level listeners for escape-key/backdrop dismissals.
</p>
</div>
<!-- Section Modals -->
<section class="space-y-4">
<h2 class="text-lg font-bold text-slate-200">Modal Showcase & Integration</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, 'modal-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, 'modal-code')">HTML Markup</button>
</div>
<!-- Demo Viewport -->
<div id="modal-sandbox" class="wiki-pane py-2">
<button data-modal-target="wiki-demo-modal" class="inline-flex items-center justify-center rounded-xl text-xs font-bold bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2.5 transition active:scale-95">
Open Modal Dialog
</button>
</div>
<!-- Code Snippet Area -->
<div id="modal-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-slate-455 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 002 2h2a2 2 0 002-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;!-- Trigger Button (points to modal element ID) --&gt;
&lt;button data-modal-target="my-modal-id" class="px-4 py-2 bg-indigo-600 text-white text-xs font-bold rounded-xl"&gt;
Open Modal
&lt;/button&gt;
&lt;!-- Modal Overlay Element --&gt;
&lt;div id="my-modal-id" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true"&gt;
&lt;!-- Backdrop shadow with blur --&gt;
&lt;div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"&gt;&lt;/div&gt;
&lt;!-- Modal Panel with scale / opacity transition --&gt;
&lt;div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl"&gt;
&lt;h3 class="text-sm font-bold text-slate-100"&gt;Confirmation Title&lt;/h3&gt;
&lt;p class="text-xs text-muted-foreground mt-2 leading-relaxed"&gt;Are you sure you want to proceed?&lt;/p&gt;
&lt;!-- Close triggers require class 'modal-close' --&gt;
&lt;button class="modal-close mt-4 w-full py-2 rounded-xl bg-secondary border border-border text-slate-200 text-xs font-semibold"&gt;
Cancel
&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</div>
</section>
<!-- Global JS Bindings Documentation -->
<section class="space-y-4 border-t border-border/60 pt-6">
<h2 class="text-lg font-bold text-slate-200">How the Global Modal JS Works</h2>
<p class="text-xs text-muted-foreground leading-relaxed">
The global script <code>components.js</code> runs automatically on page load and monitors specific attributes and classes. Here is what makes the modal operational:
</p>
<div class="border border-border bg-card/40 rounded-2xl p-5 overflow-x-auto">
<table class="w-full border-collapse text-left text-xs">
<thead>
<tr class="border-b border-border text-muted-foreground font-bold">
<th class="pb-2.5 w-1/4">Selector / Class</th>
<th class="pb-2.5 w-1/4">Type</th>
<th class="pb-2.5">Behavior & Purpose</th>
</tr>
</thead>
<tbody class="divide-y divide-border/40 text-muted-foreground leading-relaxed text-[11px] font-sans">
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">[data-modal-target]</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
<td class="py-3 text-slate-400">
Applied to buttons or triggers. The value must match the ID of the modal dialog (e.g., <code>data-modal-target="my-modal"</code>). Clicking it triggers <code>openModal("my-modal")</code>.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.modal-dialog</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
The outer wrapper container. Starts with the class <code>hidden</code>. The JS removes/adds <code>hidden</code> to show/hide the popup.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.modal-content</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
The inner dialog panel card. The JS looks for this class to toggle transitions (adds <code>scale-100 opacity-100</code> on show; resets to <code>scale-95 opacity-0</code> on hide).
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.modal-backdrop</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
The dark blur overlay. The JS toggles its opacity and registers clicks on it to automatically close the modal.
</td>
</tr>
<tr>
<td class="py-3 font-mono text-indigo-400 font-semibold">.modal-close</td>
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
<td class="py-3 text-slate-400">
Applied to any close button (e.g., "Cancel", "Confirm", or an "X" icon). Clicking any element containing this class triggers modal closure.
</td>
</tr>
</tbody>
</table>
</div>
<div class="rounded-xl border border-indigo-500/20 bg-indigo-500/5 p-4 text-xs space-y-1">
<span class="font-bold text-indigo-400 block">💡 What is customizable?</span>
<p class="text-slate-400 leading-normal">
You can customize the styling, colors, layout, and sizing of the <code>.modal-content</code> card freely. You must preserve the classes listed above so the Javascript code can target them and apply animations correctly.
</p>
</div>
</section>
</div>
</div>
<!-- Interactive Modal Sandbox Element -->
<div id="wiki-demo-modal" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
<div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
<div class="modal-content relative z-10 w-full max-w-sm scale-95 opacity-0 transition-all duration-300 border border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl rounded-3xl text-center">
<div class="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 mb-3">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h3 class="text-sm font-bold text-slate-100">Wiki Sandbox Modal</h3>
<p class="text-xs text-slate-405 mt-2 leading-relaxed">This modal is animated and handled globally by <code>components.js</code>. Pressing escape or clicking outside closes it instantly.</p>
<button class="modal-close mt-4 w-full py-2 rounded-xl bg-secondary border border-border hover:bg-secondary transition text-xs font-semibold text-slate-200">Dismiss Modal</button>
</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 %}