feat: initialize template shell and basic components
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Sign In - Stick{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-md w-full 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">Welcome Back</h2>
|
||||
<p class="mt-2 text-sm text-slate-400">Sign in to manage your tasks</p>
|
||||
</div>
|
||||
|
||||
{% if let Some(err) = error %}
|
||||
<div class="mb-6 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-2.5">
|
||||
<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 flex-shrink-0 mt-0.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
|
||||
</svg>
|
||||
<span>{{ err }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form class="space-y-5" action="/auth/login" method="post">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-slate-400 mb-1.5">Username</label>
|
||||
<input id="username" name="username" type="text" 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" placeholder="Enter username">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-slate-400 mb-1.5">Password</label>
|
||||
<input id="password" name="password" type="password" 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" placeholder="••••••••">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" class="group relative w-full flex justify-center py-3.5 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-95 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-sky-500 focus:ring-offset-[#0f172a] shadow-lg shadow-sky-500/10">
|
||||
Sign In
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center text-sm text-slate-400">
|
||||
Don't have an account?
|
||||
<a href="/auth/register" class="font-medium text-sky-400 hover:underline">Sign up now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,57 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Sign Up - Stick{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-md w-full 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-emerald-400 via-teal-500 to-cyan-600"></div>
|
||||
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-3xl font-extrabold text-slate-100 tracking-tight">Create Account</h2>
|
||||
<p class="mt-2 text-sm text-slate-400">Join us to start planning your tasks</p>
|
||||
</div>
|
||||
|
||||
{% if let Some(err) = error %}
|
||||
<div class="mb-6 p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-2.5">
|
||||
<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 flex-shrink-0 mt-0.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
|
||||
</svg>
|
||||
<span>{{ err }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if let Some(msg) = success %}
|
||||
<div class="mb-6 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm flex items-start gap-2.5">
|
||||
<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 flex-shrink-0 mt-0.5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
|
||||
</svg>
|
||||
<span>{{ msg }}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<form class="space-y-5" action="/auth/register" method="post">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-slate-400 mb-1.5">Username</label>
|
||||
<input id="username" name="username" type="text" 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-emerald-500 focus:border-emerald-500 transition duration-200 text-sm" placeholder="Choose a username">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-slate-400 mb-1.5">Password</label>
|
||||
<input id="password" name="password" type="password" 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-emerald-500 focus:border-emerald-500 transition duration-200 text-sm" placeholder="••••••••">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="submit" class="group relative w-full flex justify-center py-3.5 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-emerald-500 to-teal-600 hover:opacity-95 transition focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 focus:ring-offset-[#0f172a] shadow-lg shadow-emerald-500/10">
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center text-sm text-slate-400">
|
||||
Already have an account?
|
||||
<a href="/auth/login" class="font-medium text-emerald-400 hover:underline">Log in here</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="h-full" style="color-scheme: dark;">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="dark">
|
||||
<title>{% block title %}Stick Template{% endblock %}</title>
|
||||
<!-- Compiled Tailwind CSS stylesheet -->
|
||||
<link rel="stylesheet" href="/static/tailwind.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<!-- HTMX & Hyperscript CDN -->
|
||||
<script src="https://unpkg.com/htmx.org@2.0.4"></script>
|
||||
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
||||
<!-- Consolidated Combobox Script -->
|
||||
<script src="/static/js/combobox.js" defer></script>
|
||||
<!-- Consolidated Components Script -->
|
||||
<script src="/static/js/components.js" defer></script>
|
||||
<!-- Style adjustments -->
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
background-color: hsl(var(--background));
|
||||
background-image:
|
||||
radial-gradient(at 50% 0%, hsla(240, 5%, 26%, 0.04) 0%, transparent 60%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen text-foreground selection:bg-sky-500 selection:text-white">
|
||||
<!-- Toast notifications container -->
|
||||
<div id="toast-container" class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"></div>
|
||||
|
||||
<!-- Header / Navbar -->
|
||||
<header class="border-b border-border bg-background/80 backdrop-blur-md sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16 items-center">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center space-x-3">
|
||||
<a href="/" class="flex items-center space-x-2.5 group">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-sky-400 to-indigo-600 flex items-center justify-center shadow-lg shadow-sky-500/20 group-hover:scale-105 transition-all duration-300">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5 text-white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xl font-bold tracking-tight bg-gradient-to-r from-slate-100 to-slate-300 bg-clip-text text-transparent group-hover:from-white group-hover:to-slate-200 transition duration-300">
|
||||
stick
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<nav class="flex items-center space-x-4">
|
||||
<a href="/components" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
||||
Design Wiki
|
||||
</a>
|
||||
{% if authenticated %}
|
||||
<a href="/tasks" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="/developers" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
||||
Developers
|
||||
</a>
|
||||
<div class="h-4 w-px bg-secondary"></div>
|
||||
<span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-secondary border border-border text-sky-400">
|
||||
{{ username }}
|
||||
</span>
|
||||
<form action="/auth/logout" method="post" class="inline">
|
||||
<button type="submit" class="text-sm font-medium text-rose-400 hover:text-rose-300 transition py-2 px-3 rounded-lg hover:bg-rose-950/20">
|
||||
Logout
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a href="/auth/login" class="text-sm font-medium text-muted-foreground hover:text-white transition py-2 px-3 rounded-lg hover:bg-secondary">
|
||||
Log In
|
||||
</a>
|
||||
<a href="/auth/register" class="text-sm font-medium text-white bg-gradient-to-r from-sky-500 to-indigo-600 hover:opacity-90 transition px-4 py-2 rounded-xl shadow-md shadow-sky-500/10">
|
||||
Sign Up
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="grow flex flex-col">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="border-t border-slate-950 bg-card/50 py-6 text-center text-xs text-slate-500">
|
||||
<div class="max-w-7xl mx-auto px-4">
|
||||
<p>© 2026 Stick Template. Built with Axum, Askama, and MongoDB. Styled with Tailwind CSS.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -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><!-- 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-primary text-primary-foreground hover:opacity-90 px-4 py-2.5 shadow-md shadow-slate-950/20 active:scale-95">
|
||||
Primary
|
||||
</button>
|
||||
|
||||
<!-- 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 bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2.5 active:scale-95">
|
||||
Secondary
|
||||
</button>
|
||||
|
||||
<!-- 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-sky-500 border border-border bg-transparent hover:bg-secondary text-slate-200 px-4 py-2.5 active:scale-95">
|
||||
Outline
|
||||
</button>
|
||||
|
||||
<!-- Destructive 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 bg-destructive text-destructive-foreground hover:opacity-90 px-4 py-2.5 active:scale-95">
|
||||
Destructive
|
||||
</button>
|
||||
|
||||
<!-- Create Button (Icon + Text) -->
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<!-- Spinner Loading Button -->
|
||||
<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" 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"></svg>
|
||||
Processing...
|
||||
</button></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 %}
|
||||
@@ -0,0 +1,216 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Autocomplete (Combobox) - 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">Forms & Inputs</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Autocomplete (Combobox)</h1>
|
||||
<p class="text-slate-405 text-sm mt-2 leading-relaxed">
|
||||
Asynchronous search dropdown inputs driven by HTMX requests with fully integrated keyboard navigation, focus overlays, selection, and hidden inputs for form validation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Combobox -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Autocomplete 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, 'combo-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, 'combo-client-code')">Client-Side HTML</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, 'combo-server-code')">Server-Side HTML</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="combo-sandbox" class="wiki-pane grid grid-cols-1 md:grid-cols-2 gap-8 py-2">
|
||||
|
||||
<!-- Left: Client-side Demo -->
|
||||
<div class="space-y-2 max-w-xs w-full">
|
||||
<span class="text-[10px] font-bold text-indigo-400 uppercase tracking-wider block mb-1">Client-Side Filtering</span>
|
||||
<div class="autocomplete-combobox relative">
|
||||
<label class="block text-xs font-semibold text-muted-foreground mb-1.5">Local Developer List</label>
|
||||
<input type="hidden" id="wiki-assignee-id" class="combobox-value">
|
||||
<input type="text" id="wiki-assignee-search" placeholder="Type name e.g. Bob..." autocomplete="off" class="combobox-input block w-full px-4 py-2 bg-background border border-border text-white rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sky-500">
|
||||
|
||||
<div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden">
|
||||
<div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="1" data-name="Alice Vance" tabindex="0">Alice Vance (Lead)</div>
|
||||
<div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="2" data-name="Bob Carter" tabindex="0">Bob Carter (Senior)</div>
|
||||
<div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="3" data-name="Charlie Smith" tabindex="0">Charlie Smith (Junior)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right: Server-side Demo -->
|
||||
<div class="space-y-2 max-w-xs w-full">
|
||||
<span class="text-[10px] font-bold text-emerald-400 uppercase tracking-wider block mb-1">Server-Side HTMX Search</span>
|
||||
|
||||
{% if authenticated %}
|
||||
<div class="autocomplete-combobox relative">
|
||||
<label class="block text-xs font-semibold text-muted-foreground mb-1.5">Live MongoDB Query</label>
|
||||
<input type="hidden" name="assignee_id" class="combobox-value">
|
||||
<input type="text" name="q" placeholder="Query developers database..." autocomplete="off"
|
||||
class="combobox-input block w-full px-4 py-2 bg-background border border-border text-white rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sky-500"
|
||||
hx-get="/developers/search" hx-trigger="input changed delay:200ms" hx-target="next .combobox-results">
|
||||
<div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden"></div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="rounded-2xl border border-border bg-[#09090b]/40 p-4 space-y-2 text-xs">
|
||||
<div class="flex items-center gap-1.5 text-amber-500 font-bold">
|
||||
<svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
|
||||
Authentication Required
|
||||
</div>
|
||||
<p class="text-muted-foreground leading-normal">
|
||||
To query the MongoDB database on the server, you must sign in to an active session first.
|
||||
</p>
|
||||
<a href="/auth/login" class="inline-flex items-center text-xs font-semibold text-sky-400 hover:text-sky-350 gap-1 mt-1">
|
||||
Log in to query database
|
||||
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Client-Side Code Snippet Area -->
|
||||
<div id="combo-client-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><!-- Client-Side Combobox Container (Filtered Locally) -->
|
||||
<div class="autocomplete-combobox relative">
|
||||
<!-- Holds the final value submitted to forms -->
|
||||
<input type="hidden" name="developer_id" class="combobox-value">
|
||||
|
||||
<!-- Input box handles local filtering -->
|
||||
<input type="text" placeholder="Type name e.g. Bob..." autocomplete="off"
|
||||
class="combobox-input block w-full px-4 py-2 bg-background border border-border text-white rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-sky-500">
|
||||
|
||||
<!-- Dropdown lists all options, filtered on input/focus dynamically -->
|
||||
<div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden">
|
||||
<div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="1" data-name="Alice Vance" tabindex="0">Alice Vance (Lead)</div>
|
||||
<div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="2" data-name="Bob Carter" tabindex="0">Bob Carter (Senior)</div>
|
||||
<div class="combobox-item flex items-center w-full h-8 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-200 cursor-pointer select-none" data-id="3" data-name="Charlie Smith" tabindex="0">Charlie Smith (Junior)</div>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Server-Side Code Snippet Area -->
|
||||
<div id="combo-server-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><!-- Server-Side Combobox Container (Asynchronous Query via HTMX) -->
|
||||
<div class="autocomplete-combobox relative">
|
||||
<!-- Holds the final value submitted to forms -->
|
||||
<input type="hidden" name="assignee_id" class="combobox-value">
|
||||
|
||||
<!-- Input box triggers search query. Submits with parameter 'q' -->
|
||||
<input type="text" name="q" placeholder="Search developers..." autocomplete="off"
|
||||
class="combobox-input block w-full px-4 py-2 bg-background border border-border rounded-xl text-sm focus:ring-2 focus:ring-sky-500"
|
||||
hx-get="/developers/search" hx-trigger="input changed delay:250ms" hx-target="next .combobox-results">
|
||||
|
||||
<!-- Dropdown container receives swapped HTML markup from server -->
|
||||
<div class="combobox-results absolute z-10 w-full mt-2 bg-popover border border-border rounded-xl p-1 shadow-xl hidden"></div>
|
||||
</div></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 Combobox JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed">
|
||||
The global script <code>combobox.js</code> runs automatically on page load and hooks onto the class names listed below. Ensure your markup uses these selectors to integrate keyboard selection and local/remote filtering:
|
||||
</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">.autocomplete-combobox</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Wraps all input elements, hidden inputs, and search result list containers.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-value</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to the <code><input type="hidden"></code> element that holds the final selection key (e.g. database ID) for form validation and submission.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-input</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to the visible <code><input type="text"></code> element. Captures typing, trigger clicks, and keyboard arrow navigation events.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-results</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The overlay list container. Starts with the class <code>hidden</code>. Toggled open on focus, click, or when query results return.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.combobox-item</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to option elements. Must contain <code>tabindex="0"</code> (for keyboard focus), <code>data-id="..."</code> (database value), and <code>data-name="..."</code> (display value).
|
||||
</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 visual appearance of the options list <code>.combobox-results</code>, option heights, text alignment, input styles, borders, icons, and colors. The functional classes (like <code>.combobox-input</code>, <code>.combobox-value</code>, <code>.combobox-item</code>) must remain intact, and each item must include the <code>data-id</code>, <code>data-name</code>, and <code>tabindex="0"</code> attributes so they participate in keyboard selection cycling and updates.
|
||||
</p>
|
||||
</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 %}
|
||||
@@ -0,0 +1,392 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Date & Time Pickers - 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">Pickers</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Date & Time Pickers</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Custom popup calendars and hour/minute scroll menus constructed using DOM components to prevent relying on native browser-system calendar windows. Designed for optimal styling consistency.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Pickers -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Date & Time Popovers</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, 'picker-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, 'picker-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="picker-sandbox" class="wiki-pane grid grid-cols-1 sm:grid-cols-2 gap-6 max-w-lg py-2">
|
||||
<!-- Date Picker -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-slate-405">Date Picker</label>
|
||||
<div class="custom-datepicker relative inline-block w-full" id="wiki-datepicker" data-year="2026" data-month="4">
|
||||
<input type="hidden" name="wiki_date" class="datepicker-value" value="2026-05-30">
|
||||
<button type="button" class="datepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200 hover:bg-secondary transition focus:outline-none focus:ring-2 focus:ring-sky-500">
|
||||
<span class="datepicker-label flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<span class="datepicker-text">May 30, 2026</span>
|
||||
</span>
|
||||
<svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
<div class="datepicker-popover absolute left-0 z-20 mt-2 w-[270px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
|
||||
<div class="flex items-center justify-between mb-3.5">
|
||||
<button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
<span class="datepicker-month-year text-xs font-bold text-slate-200">May 2026</span>
|
||||
<button type="button" class="datepicker-next p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white transition">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2">
|
||||
<span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
|
||||
</div>
|
||||
<div class="datepicker-days grid grid-cols-7 gap-1 text-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time Picker -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-slate-405">Time Picker</label>
|
||||
<div class="custom-timepicker relative inline-block w-full" id="wiki-timepicker">
|
||||
<input type="hidden" name="wiki_time" class="timepicker-value" value="12:00 PM">
|
||||
<button type="button" class="timepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200 hover:bg-secondary transition focus:outline-none focus:ring-2 focus:ring-sky-500">
|
||||
<span class="timepicker-label flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span class="timepicker-text">12:00 PM</span>
|
||||
</span>
|
||||
<svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
<div class="timepicker-popover absolute right-0 sm:left-0 z-20 mt-2 w-[230px] p-3 rounded-2xl border border-border bg-popover shadow-2xl animate-in fade-in slide-in-from-top-2 duration-200 hidden">
|
||||
<div class="flex gap-2 justify-center items-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Hr</span>
|
||||
<div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-hours"></div>
|
||||
</div>
|
||||
<span class="text-slate-500 font-bold self-end mb-12">:</span>
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Min</span>
|
||||
<div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-minutes"></div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center ml-1">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Am/Pm</span>
|
||||
<div class="flex flex-col gap-1 w-12">
|
||||
<button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">AM</button>
|
||||
<button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">PM</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="picker-code" class="wiki-pane hidden space-y-4">
|
||||
<!-- Date Picker Code -->
|
||||
<div class="space-y-2">
|
||||
<span class="text-xs font-bold text-muted-foreground block">Date Picker HTML Structure</span>
|
||||
<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 002 2h2a2 2 0 002-2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"/></svg>
|
||||
Copy Date Picker Code
|
||||
</button>
|
||||
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code><!-- Custom Date Picker Container
|
||||
- class "custom-datepicker": required for JavaScript target binding
|
||||
- data-year / data-month: initializes the calendar viewport (month is 0-indexed: 4 = May) -->
|
||||
<div class="custom-datepicker relative inline-block w-full" id="unique-datepicker-id" data-year="2026" data-month="4">
|
||||
<!-- Hidden input that holds the actual selected date (YYYY-MM-DD) to submit with the form -->
|
||||
<input type="hidden" name="date_value" class="datepicker-value" value="2026-05-30">
|
||||
|
||||
<!-- Trigger Button: opens/closes the dropdown calendar popover -->
|
||||
<button type="button" class="datepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200">
|
||||
<span class="datepicker-label flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<!-- text-label: will be dynamically updated by components.js when a day is selected -->
|
||||
<span class="datepicker-text">Pick a date</span>
|
||||
</span>
|
||||
<svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
|
||||
<!-- Popover: holds month controls and calendar grids -->
|
||||
<div class="datepicker-popover absolute left-0 z-20 mt-2 w-[270px] p-3 rounded-2xl border border-border bg-popover shadow-2xl hidden">
|
||||
<!-- Navigation Controls -->
|
||||
<div class="flex items-center justify-between mb-3.5">
|
||||
<button type="button" class="datepicker-prev p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="15 18 9 12 15 6"/></svg>
|
||||
</button>
|
||||
<!-- Current visible Month/Year label -->
|
||||
<span class="datepicker-month-year text-xs font-bold text-slate-200"></span>
|
||||
<button type="button" class="datepicker-next p-1.5 rounded-lg hover:bg-secondary text-muted-foreground/90 hover:text-white">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="9 18 15 12 9 6"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Weekday column labels -->
|
||||
<div class="grid grid-cols-7 gap-1 text-center text-[10px] font-bold text-slate-500 mb-2">
|
||||
<span>Su</span><span>Mo</span><span>Tu</span><span>We</span><span>Th</span><span>Fr</span><span>Sa</span>
|
||||
</div>
|
||||
<!-- Day Grid (filled dynamically with days by components.js on load) -->
|
||||
<div class="datepicker-days grid grid-cols-7 gap-1 text-center"></div>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Time Picker Code -->
|
||||
<div class="space-y-2">
|
||||
<span class="text-xs font-bold text-muted-foreground block">Time Picker HTML Structure</span>
|
||||
<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 Time Picker Code
|
||||
</button>
|
||||
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code><!-- Custom Time Picker Container
|
||||
- class "custom-timepicker": required for JavaScript target binding -->
|
||||
<div class="custom-timepicker relative inline-block w-full" id="unique-timepicker-id">
|
||||
<!-- Hidden input holds selected value (e.g., "12:00 PM") for form submission -->
|
||||
<input type="hidden" name="time_value" class="timepicker-value" value="12:00 PM">
|
||||
|
||||
<!-- Trigger Button -->
|
||||
<button type="button" class="timepicker-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200">
|
||||
<span class="timepicker-label flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<!-- Time text label updated dynamically on pick -->
|
||||
<span class="timepicker-text">12:00 PM</span>
|
||||
</span>
|
||||
<svg class="h-4 w-4 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
|
||||
<!-- Time Picker Dropdown Menu -->
|
||||
<div class="timepicker-popover absolute left-0 z-20 mt-2 w-[230px] p-3 rounded-2xl border border-border bg-popover shadow-2xl hidden">
|
||||
<div class="flex gap-2 justify-center items-center">
|
||||
<!-- Hours Column (filled with <button>s 1 to 12 dynamically by components.js) -->
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Hr</span>
|
||||
<div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-hours"></div>
|
||||
</div>
|
||||
|
||||
<span class="text-slate-500 font-bold self-end mb-12">:</span>
|
||||
|
||||
<!-- Minutes Column (filled with <button>s 00 to 55 in 5m steps dynamically) -->
|
||||
<div class="flex flex-col items-center">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Min</span>
|
||||
<div class="h-32 overflow-y-auto w-12 text-center rounded-lg border border-border bg-popover scrollbar-none timepicker-col-minutes"></div>
|
||||
</div>
|
||||
|
||||
<!-- AM/PM Selector -->
|
||||
<div class="flex flex-col items-center ml-1">
|
||||
<span class="text-[9px] font-bold text-slate-500 mb-1.5 uppercase tracking-wider">Am/Pm</span>
|
||||
<div class="flex flex-col gap-1 w-12">
|
||||
<button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">AM</button>
|
||||
<button type="button" class="timepicker-ampm-btn py-1.5 rounded-lg text-xs font-bold hover:bg-secondary transition text-muted-foreground">PM</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Global JS Bindings Documentation -->
|
||||
<section class="space-y-6 border-t border-border/60 pt-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-200">How the Global Date Picker JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
||||
The custom date picker relies on the following classes and datasets to manage month navigation and update values:
|
||||
</p>
|
||||
</div>
|
||||
<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/3">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/6">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">.custom-datepicker</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Wraps the date picker component. Must declare <code>data-year</code> (e.g. 2026) and <code>data-month</code> (0-indexed, 0 = Jan, 4 = May) to initialize the viewport.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-value</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Hidden input field (<code><input type="hidden"></code>) storing the ISO date value (YYYY-MM-DD) for form submission.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-trigger</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Button clicked by user to open or close the calendar popover dropdown.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-text</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Target text element updated dynamically to display the formatted selected date (e.g., "May 30, 2026").
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-popover</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Floating container containing the month navigation buttons and days grids. Starts as <code>hidden</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-prev / .datepicker-next</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Navigational buttons to decrement or increment the active month.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-month-year</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Display title label updated dynamically with current month and year (e.g. "May 2026").
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.datepicker-days</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Calendar day grid container dynamically populated with clickable day buttons by the JS engine.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-200 mt-4">How the Global Time Picker JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
||||
The custom time picker scopes dynamic lists of hours and minutes inside scrollable blocks using the following bindings:
|
||||
</p>
|
||||
</div>
|
||||
<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/3">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/6">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">.custom-timepicker</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Wraps the time picker markup structure.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-value</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Hidden input field storing the active text time (e.g. "12:00 PM") for forms.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-trigger</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Clickable button to open the scroll dropdown.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-text</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Text node inside trigger displaying the formatted time.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-popover</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Dropdown overlay panel displaying columns for hour list, minute list, and AM/PM buttons.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-col-hours / .timepicker-col-minutes</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Containers populated automatically with hourly buttons (1-12) and minute buttons (00-55).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.timepicker-ampm-btn</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Buttons representing "AM" and "PM" choices toggled on click.
|
||||
</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 of the trigger buttons, chevrons, icons, popover cards, borders, shadows, backgrounds, and the active option buttons (which receive <code>.bg-indigo-600</code>). Ensure you preserve the classes and attributes listed above so the DOM-generation functions and trigger listeners in <code>components.js</code> execute without error.
|
||||
</p>
|
||||
</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 %}
|
||||
@@ -0,0 +1,130 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Toasts & Alerts - 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-405">Feedback</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Toasts & Alerts</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Dynamic toast stack notifications triggered from JavaScript, combined with static SVG alert boxes for validation errors or warnings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Feedback -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Interactive Toast & Alert Showcase</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, 'feedback-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, 'feedback-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="feedback-sandbox" class="wiki-pane space-y-4 max-w-md py-2">
|
||||
<!-- Toast triggers -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Toast Notifications</span>
|
||||
<div class="flex gap-2">
|
||||
<button type="button" class="inline-flex items-center justify-center rounded-xl text-xs font-bold bg-secondary border border-border text-slate-200 px-4 py-2 hover:bg-secondary active:scale-95 transition" onclick="showToast('Operation finished successfully!')">
|
||||
Trigger Toast
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alert callouts -->
|
||||
<div class="space-y-2.5">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Static Callout Banners</span>
|
||||
|
||||
<!-- Info Banner -->
|
||||
<div class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4 flex gap-3 text-xs text-sky-400">
|
||||
<svg class="h-4.5 w-4.5 shrink-0" 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>
|
||||
<span class="font-bold text-slate-100 block">General Information</span>
|
||||
<span class="text-muted-foreground leading-relaxed block mt-0.5">Please remember to assign the task to an active workspace developer.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Warning Banner -->
|
||||
<div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4 flex gap-3 text-xs text-amber-400">
|
||||
<svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="font-bold text-slate-100 block">Database Sync Issues</span>
|
||||
<span class="text-muted-foreground leading-relaxed block mt-0.5">Local connections to MongoDB might be interrupted temporarily.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="feedback-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><!-- 1. Dynamic Toast Trigger from JS -->
|
||||
<button onclick="showToast('Action Completed Successfully!')">
|
||||
Trigger Success Toast
|
||||
</button>
|
||||
|
||||
<!-- 2. Static Info Banner Alert -->
|
||||
<div class="rounded-2xl border border-sky-500/20 bg-sky-500/5 p-4 flex gap-3 text-xs text-sky-400">
|
||||
<svg class="h-4.5 w-4.5 shrink-0" 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>
|
||||
<span class="font-bold text-slate-100 block">Alert Title</span>
|
||||
<span class="text-muted-foreground block mt-0.5">Description of alert information.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Static Warning Banner Alert -->
|
||||
<div class="rounded-2xl border border-amber-500/20 bg-amber-500/5 p-4 flex gap-3 text-xs text-amber-400">
|
||||
<svg class="h-4.5 w-4.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<span class="font-bold text-slate-100 block">Warning Title</span>
|
||||
<span class="text-muted-foreground block mt-0.5">Warning context content details.</span>
|
||||
</div>
|
||||
</div></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 %}
|
||||
@@ -0,0 +1,133 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Design System Wiki - Stick{% 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 Floating Sidebar Navigation -->
|
||||
{% include "components/sidebar.html" %}
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<div class="flex-1 space-y-10">
|
||||
|
||||
<!-- Intro Header -->
|
||||
<div class="pb-6 border-b border-border">
|
||||
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-indigo-500/10 text-indigo-400 border border-indigo-500/20 mb-3 animate-pulse">
|
||||
Stick Design System Wiki
|
||||
</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight">Component Reference Manual</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Welcome to the Stick design system Wiki. This documentation serves as a living blueprint detailing HTML structures, Tailwind CSS custom variables, and JavaScript trigger hooks required to build premium, high-fidelity interactive elements using the Shadcn aesthetic.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Architecture & Concept -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="border border-border bg-secondary/10 rounded-2xl p-6 space-y-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-sky-400/20 to-indigo-500/20 border border-sky-500/30 flex items-center justify-center">
|
||||
<svg class="h-5 w-5 text-sky-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-sm font-bold text-slate-200">Vertical Feature Architecture</h3>
|
||||
<p class="text-xs text-muted-foreground/90 leading-relaxed">
|
||||
Components are packaged inside feature directories (e.g. <code>src/components/</code>) rather than spread horizontally. Handlers render Askama templates, static JS, and compiled Tailwind assets dynamically.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border border-border bg-secondary/10 rounded-2xl p-6 space-y-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-400/20 to-teal-500/20 border border-emerald-500/30 flex items-center justify-center">
|
||||
<svg class="h-5 w-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-sm font-bold text-slate-200">Lightweight & Dependency-Free</h3>
|
||||
<p class="text-xs text-muted-foreground/90 leading-relaxed">
|
||||
Designed to minimize heavy JS bundles. Using vanilla JavaScript with document-level event delegation (e.g. for Modals, Sheets, Accordions, and Tabs) keeping the interactive shell fast and responsive.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Styling tokens -->
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-250">Global HSL Tokens</h2>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
The layout relies on standard Tailwind themes mapped onto raw HSL variables, allowing instant utility customization.
|
||||
</p>
|
||||
|
||||
<div class="border border-border bg-card/50 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">Variable</th>
|
||||
<th class="pb-2.5">Raw HSL Mapping</th>
|
||||
<th class="pb-2.5">Render Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-border/40 text-muted-foreground font-mono text-[11px]">
|
||||
<tr>
|
||||
<td class="py-2 text-muted-foreground font-sans font-semibold">--background</td>
|
||||
<td class="py-2">224 71% 4%</td>
|
||||
<td class="py-2">
|
||||
<div class="w-4 h-4 rounded bg-[#030712] border border-border"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 text-muted-foreground font-sans font-semibold">--primary</td>
|
||||
<td class="py-2">210 40% 98%</td>
|
||||
<td class="py-2">
|
||||
<div class="w-4 h-4 rounded bg-[#f8fafc]"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 text-muted-foreground font-sans font-semibold">--border / --input</td>
|
||||
<td class="py-2">216 34% 17%</td>
|
||||
<td class="py-2">
|
||||
<div class="w-4 h-4 rounded bg-[#1e293b]"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-2 text-muted-foreground font-sans font-semibold">--ring</td>
|
||||
<td class="py-2">216 12.2% 83.9%</td>
|
||||
<td class="py-2">
|
||||
<div class="w-4 h-4 rounded ring-2 ring-slate-400"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Architecture & Contract Philosophy -->
|
||||
<div class="space-y-4 border-t border-border/60 pt-8">
|
||||
<h2 class="text-lg font-bold text-slate-200">Understanding the JS Binding Architecture</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed">
|
||||
Rather than attaching active event listeners to every individual DOM node, the design system utilizes <strong>document-level event delegation</strong> and <strong>global query selector hooks</strong>. This keeps page loads incredibly fast and handles dynamically rendered components automatically.
|
||||
</p>
|
||||
|
||||
<div class="rounded-2xl border border-indigo-500/20 bg-indigo-500/5 p-5 text-xs space-y-4">
|
||||
<div>
|
||||
<span class="font-bold text-indigo-400 block mb-1">🔗 The Core Binding Contract</span>
|
||||
<p class="text-slate-400 leading-normal">
|
||||
To make components interactive, they must contain specific functional CSS classes or attributes (e.g., <code>.modal-dialog</code>, <code>[data-modal-target]</code>, <code>.custom-select</code>) that the Javascript file uses to query the DOM. If these functional hooks are missing or renamed, the interactivity will fail.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="font-bold text-indigo-400 block mb-1">🎨 What is Customizable vs. Fixed?</span>
|
||||
<ul class="list-disc pl-5 space-y-1.5 text-slate-400 leading-normal">
|
||||
<li>
|
||||
<strong class="text-slate-200">Fixed (Functional) Hooks:</strong> Standard semantic class names (like <code>.modal-dialog</code>, <code>.modal-content</code>, <code>.modal-backdrop</code>, <code>.modal-close</code>, <code>.select-trigger</code>, and <code>.select-item</code>) are required structure hooks. These must remain unchanged because our JavaScript code expects them to animate opacity, visibility, translation transform stages, and handle keydown events.
|
||||
</li>
|
||||
<li>
|
||||
<strong class="text-slate-200">Customizable (Styling) Rules:</strong> Any Tailwind visual classes (like colors e.g. <code>bg-slate-900</code>, padding/margin <code>p-6 mt-2</code>, border-radius <code>rounded-3xl</code>, drop shadows <code>shadow-xl</code>, borders <code>border-border</code>, and custom fonts) can be modified, replaced, or completely restyled. As long as you maintain the core HTML nesting hierarchy and functional selector names, the component will work perfectly.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,221 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Form Fields & Select - 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">Forms & Inputs</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Form Fields & Select</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Standard text inputs, passwords, multi-line textareas, and custom styled select dropdown elements overdrawn by vector SVG chevron arrows.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Fields -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Form Inputs & Select Menu Showcase</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, 'input-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, 'input-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="input-sandbox" class="wiki-pane space-y-4 max-w-md py-2">
|
||||
<!-- Text field -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-muted-foreground">Username Input</label>
|
||||
<input type="text" placeholder="e.g. dev_alice" class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200">
|
||||
</div>
|
||||
|
||||
<!-- Password field -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-muted-foreground">Security Password</label>
|
||||
<input type="password" placeholder="••••••••" class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200">
|
||||
</div>
|
||||
|
||||
<!-- Textarea -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-muted-foreground">Task Details</label>
|
||||
<textarea rows="3" placeholder="Provide a detailed description of the task requirements..." class="block w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white placeholder-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200 resize-none"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Custom Styled Select Dropdown -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-muted-foreground">Developer Specialization</label>
|
||||
<div class="custom-select relative inline-block w-full">
|
||||
<input type="hidden" name="specialization" class="select-value" value="Senior Rust Engineer">
|
||||
<button type="button" class="select-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200 hover:bg-secondary/50 transition focus:outline-none focus:ring-2 focus:ring-sky-500">
|
||||
<span class="select-text">Senior Rust Engineer</span>
|
||||
<svg class="h-4 w-4 text-slate-500 transition-transform duration-200 select-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="select-popover absolute left-0 z-20 mt-2 w-full p-1 rounded-2xl border border-border bg-popover shadow-2xl hidden animate-in fade-in slide-in-from-top-2 duration-150">
|
||||
<div class="max-h-60 overflow-y-auto p-0.5 space-y-0.5">
|
||||
<button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs bg-accent text-accent-foreground font-semibold focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Senior Rust Engineer">Senior Rust Engineer</button>
|
||||
<button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Frontend Architect">Frontend Architect</button>
|
||||
<button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="DevOps Lead">DevOps Lead</button>
|
||||
<button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none text-slate-205 cursor-pointer select-none text-left" data-value="Database Administrator">Database Administrator</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="input-code" class="wiki-pane hidden">
|
||||
<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 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><!-- Styled Text Input -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-muted-foreground">Username Input</label>
|
||||
<input type="text" placeholder="e.g. dev_alice"
|
||||
class="block h-10 w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200">
|
||||
</div>
|
||||
|
||||
<!-- Styled Textarea -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-muted-foreground">Task Details</label>
|
||||
<textarea rows="3" placeholder="Provide a detailed description..."
|
||||
class="block w-full rounded-xl border border-border bg-background px-4 py-2 text-sm text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500/50 transition duration-200 resize-none"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Custom Styled Select Dropdown (Chevron and Popover managed globally in components.js) -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-muted-foreground">Developer Specialization</label>
|
||||
<div class="custom-select relative inline-block w-full">
|
||||
<!-- Hidden input holds the actual value for form submissions -->
|
||||
<input type="hidden" name="specialization" class="select-value" value="Senior Rust Engineer">
|
||||
|
||||
<!-- Toggle trigger button -->
|
||||
<button type="button" class="select-trigger flex h-10 w-full items-center justify-between rounded-xl border border-border bg-background px-4 py-2 text-sm text-slate-200">
|
||||
<span class="select-text">Senior Rust Engineer</span>
|
||||
<svg class="h-4 w-4 text-slate-500 transition-transform duration-200 select-chevron" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Options Popover -->
|
||||
<div class="select-popover absolute left-0 z-20 mt-2 w-full p-1 rounded-2xl border border-border bg-popover shadow-2xl hidden">
|
||||
<div class="max-h-60 overflow-y-auto p-0.5 space-y-0.5">
|
||||
<button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs bg-accent text-accent-foreground font-semibold text-slate-200 text-left" data-value="Senior Rust Engineer">Senior Rust Engineer</button>
|
||||
<button type="button" class="select-item flex items-center w-full h-9 px-2.5 rounded-lg text-xs hover:bg-accent hover:text-accent-foreground text-slate-200 text-left" data-value="Frontend Architect">Frontend Architect</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></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 Custom Select JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed">
|
||||
The global script <code>components.js</code> monitors specific class names to run the premium custom select elements. Ensure your markup uses these selectors to integrate selection, triggers, and keyboard arrow controls:
|
||||
</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">.custom-select</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Outer wrapper for the entire select component. Scopes and isolates input values and popovers.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-value</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to the <code><input type="hidden"></code> that stores the raw value submitted to forms.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-trigger</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The visible button that user clicks. Toggles popover visibility and chevron rotation on click.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-text</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Inner text element inside trigger button that dynamically changes its text content to match the selected option.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-chevron</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Arrow SVG icon. Rotates 180 degrees (adds <code>rotate-180</code>) when the menu opens.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-popover</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Floating list container. Starts with the class <code>hidden</code>. Positioned absolutely.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.select-item</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to choices inside popover (usually buttons). Must have <code>data-value="..."</code> containing the raw option value.
|
||||
</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 button trigger layout (paddings, chevrons, fonts, sizing), borders, shadows, options listing alignment, and checkmark icons. Ensure you preserve the classes <code>.custom-select</code>, <code>.select-value</code>, <code>.select-trigger</code>, <code>.select-popover</code>, and <code>.select-item</code> with its <code>data-value</code> attribute so that mouse selections and keyboard arrows function correctly.
|
||||
</p>
|
||||
</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 %}
|
||||
@@ -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><!-- Trigger Button (points to modal element ID) -->
|
||||
<button data-modal-target="my-modal-id" class="px-4 py-2 bg-indigo-600 text-white text-xs font-bold rounded-xl">
|
||||
Open Modal
|
||||
</button>
|
||||
|
||||
<!-- Modal Overlay Element -->
|
||||
<div id="my-modal-id" class="modal-dialog fixed inset-0 z-50 flex items-center justify-center hidden" role="dialog" aria-modal="true">
|
||||
<!-- Backdrop shadow with blur -->
|
||||
<div class="modal-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm transition-opacity duration-300"></div>
|
||||
|
||||
<!-- Modal Panel with scale / opacity transition -->
|
||||
<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">
|
||||
<h3 class="text-sm font-bold text-slate-100">Confirmation Title</h3>
|
||||
<p class="text-xs text-muted-foreground mt-2 leading-relaxed">Are you sure you want to proceed?</p>
|
||||
|
||||
<!-- Close triggers require class 'modal-close' -->
|
||||
<button class="modal-close mt-4 w-full py-2 rounded-xl bg-secondary border border-border text-slate-200 text-xs font-semibold">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div></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 %}
|
||||
@@ -0,0 +1,105 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Custom Scrollbars - 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">Styles</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Custom Scrollbars</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Thin custom scrollbars replacing chunky default native OS scrollbars using modern cross-browser CSS rules.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Scrollbars -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Scrollbar Customization Showcase</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, 'scroll-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, 'scroll-code')">CSS Rules</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="scroll-sandbox" class="wiki-pane max-w-sm py-2">
|
||||
<div class="max-h-28 overflow-y-auto pr-1.5 border border-border rounded-xl p-2 bg-card/50 space-y-1.5">
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 1</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 2</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 3</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 4</div>
|
||||
<div class="p-2 rounded-lg bg-secondary text-xs text-muted-foreground">Scroll item 5</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="scroll-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 CSS Rules
|
||||
</button>
|
||||
<pre class="bg-popover p-4 rounded-xl border border-border overflow-x-auto text-[10px] text-sky-400 font-mono"><code>/* Custom Webkit scrollbar rules (applied in input.css) */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: hsl(var(--border)) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--border));
|
||||
border-radius: 9999px;
|
||||
border: 1px solid transparent;
|
||||
background-clip: padding-box;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted-foreground));
|
||||
}</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 %}
|
||||
@@ -0,0 +1,180 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Slide-over Drawers (Sheets) - 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">Slide-over Drawers (Sheets)</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Right-anchored slide-out sheets designed for detail inspections, metadata lists, settings panels, and form workflows.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Sheets -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Drawer 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, 'sheet-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, 'sheet-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="sheet-sandbox" class="wiki-pane py-2">
|
||||
<button data-sheet-target="wiki-demo-sheet" 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 Right Drawer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="sheet-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><!-- Trigger Button (points to sheet element ID) -->
|
||||
<button data-sheet-target="my-sheet-id" class="px-4 py-2 bg-indigo-650 text-white text-xs font-bold rounded-xl">
|
||||
Open Drawer
|
||||
</button>
|
||||
|
||||
<!-- Slide Drawer Sheet Element -->
|
||||
<div id="my-sheet-id" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true">
|
||||
<!-- Backdrop -->
|
||||
<div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300"></div>
|
||||
|
||||
<div class="absolute inset-y-0 right-0 max-w-full flex pl-10">
|
||||
<!-- Panel with transition translate-x-full -->
|
||||
<div class="sheet-content w-screen max-w-sm translate-x-full transition-transform duration-300 bg-popover/95 border-l border-border p-6 flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between pb-3 border-b border-border">
|
||||
<h3 class="text-sm font-bold text-slate-100">Settings</h3>
|
||||
<button class="sheet-close text-slate-500 hover:text-white">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">Drawer Body Content</p>
|
||||
</div>
|
||||
<button class="sheet-close w-full py-2.5 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold rounded-xl">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div></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 Sheet JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed">
|
||||
The global script <code>components.js</code> monitors specific attributes and classes on page load. Here is the operational contract for sheets:
|
||||
</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-sheet-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 sheet container (e.g., <code>data-sheet-target="my-sheet"</code>). Clicking it triggers <code>openSheet("my-sheet")</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-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 sheet container. Starts with the class <code>hidden</code>. Toggled by the script.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-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 slide-over panel card. The JS toggles transition translation classes (removes <code>translate-x-full</code> and adds <code>translate-x-0</code> on show).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-backdrop</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
The backdrop overlay. The JS toggles its opacity and registers clicks on it to automatically close the sheet.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.sheet-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 close trigger buttons. Clicking any element with this class closes the sheet.
|
||||
</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 freely style the placement, width, colors, borders, and contents of the <code>.sheet-content</code> slide-out panel. The functional slide classes (<code>translate-x-full</code> and <code>translate-x-0</code>) and semantic structure class names must be preserved so the script can locate and slide the sheets dynamically.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Sheet Sandbox Element -->
|
||||
<div id="wiki-demo-sheet" class="sheet-dialog fixed inset-0 z-50 overflow-hidden hidden" role="dialog" aria-modal="true">
|
||||
<div class="sheet-backdrop fixed inset-0 bg-[#07090e]/80 backdrop-blur-sm opacity-0 transition-opacity duration-300 animate-fade-in"></div>
|
||||
<div class="absolute inset-y-0 right-0 max-w-full flex pl-10">
|
||||
<div class="sheet-content w-screen max-w-sm translate-x-full transition-transform duration-300 ease-in-out border-l border-border bg-popover/95 backdrop-blur-xl p-6 shadow-2xl flex flex-col justify-between">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between pb-3 border-b border-border">
|
||||
<h3 class="text-sm font-bold text-slate-100">Drawer Panel Properties</h3>
|
||||
<button class="sheet-close text-slate-500 hover:text-white rounded-lg p-1.5 hover:bg-secondary transition">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
<p class="text-xs text-slate-405 leading-relaxed">This slide-over panel demonstrates real-time sidebar parameter adjustments, sliding in from the right edge with hardware transitions.</p>
|
||||
</div>
|
||||
<button class="sheet-close w-full py-2.5 rounded-xl bg-indigo-650 hover:bg-indigo-600 transition text-xs font-bold text-white shadow-lg shadow-indigo-650/10">Save Properties</button>
|
||||
</div>
|
||||
</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 %}
|
||||
@@ -0,0 +1,27 @@
|
||||
<aside class="lg:w-64 shrink-0">
|
||||
<div class="sticky top-24 space-y-1.5 p-4 rounded-3xl border border-border bg-card/50 backdrop-blur-xl" id="wiki-sidebar">
|
||||
<span class="px-3 text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-2">Wiki Navigation</span>
|
||||
<a href="/components" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components">Introduction</a>
|
||||
<div class="h-px bg-secondary my-1 mx-2"></div>
|
||||
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Actions</span>
|
||||
<a href="/components/buttons" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/buttons">Buttons</a>
|
||||
|
||||
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Forms & Inputs</span>
|
||||
<a href="/components/inputs" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/inputs">Form Fields & Select</a>
|
||||
<a href="/components/date-time" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/date-time">Date & Time Pickers</a>
|
||||
<a href="/components/combobox" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/combobox">Autocomplete (Combobox)</a>
|
||||
<a href="/components/toggles" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/toggles">Switches & Checkboxes</a>
|
||||
|
||||
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Overlays</span>
|
||||
<a href="/components/modals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/modals">Dialog Modals</a>
|
||||
<a href="/components/sheets" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/sheets">Slide-over Drawers</a>
|
||||
|
||||
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Layout & Navigation</span>
|
||||
<a href="/components/tabs-accordion" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/tabs-accordion">Tabs & Accordions</a>
|
||||
<a href="/components/scrollbars" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/scrollbars">Custom Scrollbars</a>
|
||||
|
||||
<span class="px-3 text-[9px] font-bold text-slate-600 uppercase tracking-wider block mt-2 mb-1">Visuals & Feedback</span>
|
||||
<a href="/components/visuals" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/visuals">Avatars & Badges</a>
|
||||
<a href="/components/feedback" class="flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition" data-wiki-path="/components/feedback">Toasts & Alerts</a>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,238 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Tabs & Accordions - 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">Layout & Navigation</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Tabs & Accordions</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Horizontal tab groups and collapsible vertical headers with animated rotation chevrons, powered by lightweight document-level event delegation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Tabs/Accordion -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Interactive Navigation Elements</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, 'tabs-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, 'tabs-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="tabs-sandbox" class="wiki-pane space-y-6 max-w-md py-2">
|
||||
<!-- Tabs Showcase -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Switch Tabs</span>
|
||||
<div class="flex border-b border-border">
|
||||
<button type="button" data-tab-group="wiki-tabs" data-tab-target="wiki-pane-1" class="px-4 py-2 text-xs font-semibold border-b-2 border-sky-500 text-sky-400 focus:outline-none">Overview</button>
|
||||
<button type="button" data-tab-group="wiki-tabs" data-tab-target="wiki-pane-2" class="px-4 py-2 text-xs font-semibold border-b-2 border-transparent text-muted-foreground hover:text-slate-250 focus:outline-none">Config Settings</button>
|
||||
</div>
|
||||
<div class="p-4 bg-card/50 rounded-xl border border-border text-xs text-muted-foreground min-h-[5rem]">
|
||||
<div id="wiki-pane-1" data-tab-content-group="wiki-tabs">
|
||||
Overview parameters content pane. You can place statistics, graphs, or summary tables here.
|
||||
</div>
|
||||
<div id="wiki-pane-2" data-tab-content-group="wiki-tabs" class="hidden">
|
||||
Settings updates pane. Configuration toggles, environment variables, or webhook URLs live here.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Accordion Showcase -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Accordion Collapsible</span>
|
||||
<div class="space-y-2">
|
||||
<div class="accordion-item border border-border rounded-xl overflow-hidden bg-card/30">
|
||||
<button type="button" class="accordion-trigger w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-200 hover:bg-secondary/50 transition focus:outline-none">
|
||||
<span>Is this library dependency-free?</span>
|
||||
<svg class="accordion-chevron h-3 w-3 text-slate-500 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
<div class="accordion-content px-4 pb-3 pt-1 text-xs text-muted-foreground hidden border-t border-border leading-relaxed">
|
||||
Yes! The template does not rely on Alpine.js or React. JavaScript toggles run via vanilla click listeners listening on specific class selectors.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="tabs-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><!-- 1. Tabs Layout Markup -->
|
||||
<div class="space-y-2">
|
||||
<!-- Tabs Trigger Header -->
|
||||
<div class="flex border-b border-border">
|
||||
<!-- Include class 'border-sky-500 text-sky-400' on the active trigger -->
|
||||
<button data-tab-group="my-tabs-group" data-tab-target="my-pane-1" class="px-4 py-2 border-b-2 border-sky-500 text-sky-400 text-xs font-semibold">
|
||||
Tab 1
|
||||
</button>
|
||||
<button data-tab-group="my-tabs-group" data-tab-target="my-pane-2" class="px-4 py-2 border-b-2 border-transparent text-muted-foreground hover:text-slate-200 text-xs font-semibold">
|
||||
Tab 2
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Content Panes -->
|
||||
<div class="p-4 bg-card/50 rounded-xl border border-border text-xs">
|
||||
<div id="my-pane-1" data-tab-content-group="my-tabs-group">
|
||||
Overview content...
|
||||
</div>
|
||||
<div id="my-pane-2" data-tab-content-group="my-tabs-group" class="hidden">
|
||||
Settings content...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Accordion Markup -->
|
||||
<div class="accordion-item border border-border rounded-xl bg-card/30 overflow-hidden">
|
||||
<!-- Accordion Button Trigger -->
|
||||
<button class="accordion-trigger w-full flex items-center justify-between px-4 py-3 text-xs font-bold text-slate-200 hover:bg-secondary/50">
|
||||
<span>Section Title</span>
|
||||
<svg class="accordion-chevron h-3 w-3 text-slate-500 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
|
||||
<polyline points="6 9 12 15 18 9"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Content Panel (Hidden by default) -->
|
||||
<div class="accordion-content px-4 pb-3 pt-1 text-xs text-muted-foreground hidden border-t border-border">
|
||||
Collapsible description content.
|
||||
</div>
|
||||
</div></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Global JS Bindings Documentation -->
|
||||
<section class="space-y-6 border-t border-border/60 pt-6">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-200">How the Global Tabs JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
||||
The global script <code>components.js</code> handles click switches for tabs via specific dataset variables. Here is the contract:
|
||||
</p>
|
||||
</div>
|
||||
<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/3">Attribute</th>
|
||||
<th class="pb-2.5 w-1/6">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-tab-group</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 and triggers. Isolates tab groups on the same page. Tab buttons in the same group toggle together (e.g., <code>data-tab-group="group1"</code>).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-target</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Specifies the ID of the content element pane that should be revealed when this tab is clicked (e.g., <code>data-tab-target="my-pane-1"</code>).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">data-tab-content-group</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Attribute</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Applied to the content elements. Must match the <code>data-tab-group</code> string. Click triggers hide all content elements in this group and show the target.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-slate-200 mt-4">How the Global Accordion JS Works</h2>
|
||||
<p class="text-xs text-muted-foreground leading-relaxed mt-1">
|
||||
Accordions are toggled through click delegation looking for the following class tree:
|
||||
</p>
|
||||
</div>
|
||||
<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/3">Selector / Class</th>
|
||||
<th class="pb-2.5 w-1/6">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">.accordion-item</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Surrounds the single collapsible item container (trigger header + content block).
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-trigger</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Clickable header button. Toggles display classes on the sibling content element.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-content</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Contained collapsible item body text. Starts with the class <code>hidden</code>. Toggled by the script.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-3 font-mono text-indigo-400 font-semibold">.accordion-chevron</td>
|
||||
<td class="py-3 font-semibold text-slate-300 text-[10px] uppercase">Class</td>
|
||||
<td class="py-3 text-slate-400">
|
||||
Optional vector arrow icon inside trigger. The JS applies <code>rotate-180</code> animation classes on show.
|
||||
</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">
|
||||
For <strong>Tabs</strong>, you can style the tab list buttons (direction, active borders, colors) and content layout freely. Just ensure <code>data-tab-group</code> matches between triggers and active panes, and <code>data-tab-target</code> matches the pane ID.
|
||||
For <strong>Accordions</strong>, you can design the headers, chevron SVGs, background panels, and borders. You must maintain the <code>.accordion-item</code>, <code>.accordion-trigger</code>, and <code>.accordion-content</code> class selectors so the script can toggle the collapsed state.
|
||||
</p>
|
||||
</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 %}
|
||||
@@ -0,0 +1,124 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Switches & Checkboxes - 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-405">Toggles</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Switches & Checkboxes</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Premium animated toggle elements, range sliders, and custom styled checkboxes that mask standard hidden inputs with custom animations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Toggles -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Interactive Toggles & Checkbox 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, 'toggle-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, 'toggle-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="toggle-sandbox" class="wiki-pane space-y-5 max-w-xs py-2">
|
||||
<!-- Toggle Switch -->
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-muted-foreground font-medium">Toggle Status</span>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" class="sr-only peer">
|
||||
<div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-400 after:rounded-full after:h-[14px] after:w-[14px] after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"></div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Custom Checkbox -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<label class="flex items-center gap-3 cursor-pointer group">
|
||||
<input type="checkbox" class="sr-only peer" checked>
|
||||
<div class="w-4 h-4 rounded bg-popover border border-border flex items-center justify-center peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:[&_svg]:opacity-100 transition">
|
||||
<svg class="w-2.5 h-2.5 text-white opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
|
||||
</div>
|
||||
<span class="text-xs text-muted-foreground peer-checked:text-slate-200">Enable Email notifications</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Range Slider -->
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-semibold text-muted-foreground">Range Slider (0-100%)</label>
|
||||
<div class="flex items-center gap-4">
|
||||
<input type="range" min="0" max="100" value="50" class="grow h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-indigo-600" oninput="this.nextElementSibling.textContent = this.value + '%'">
|
||||
<span class="text-xs font-mono font-bold text-sky-400 w-10 text-right">50%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="toggle-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><!-- 1. Toggle Switch Variant -->
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<!-- sr-only: visually hides native input; peer: lets siblings styled with 'peer-checked:' react to its state -->
|
||||
<input type="checkbox" class="sr-only peer">
|
||||
<!-- bg-secondary: base slider bg; peer-checked:bg-indigo-600: checked slider bg;
|
||||
after: absolute round knob dot; peer-checked:after:translate-x-4: moves knob when checked -->
|
||||
<div class="w-9 h-5 bg-secondary rounded-full border border-border peer-checked:bg-indigo-600 peer-checked:border-indigo-500 transition-all duration-300 relative after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-slate-400 after:rounded-full after:h-[14px] after:w-[14px] after:transition-all peer-checked:after:translate-x-4 peer-checked:after:bg-white"></div>
|
||||
</label>
|
||||
|
||||
<!-- 2. Custom Checkbox -->
|
||||
<label class="flex items-center gap-3 cursor-pointer group">
|
||||
<!-- sr-only peer hides checkbox input globally but exposes its state -->
|
||||
<input type="checkbox" class="sr-only peer">
|
||||
<!-- peer-checked:[&_svg]:opacity-100: uses a descendant selector to show the checkmark when checked -->
|
||||
<div class="w-4 h-4 rounded bg-popover border border-border flex items-center justify-center peer-checked:bg-indigo-600 peer-checked:border-indigo-500 peer-checked:[&_svg]:opacity-100 transition">
|
||||
<svg class="w-2.5 h-2.5 text-white opacity-0 transition-opacity" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-xs text-muted-foreground peer-checked:text-slate-200 select-none">Label Option</span>
|
||||
</label>
|
||||
|
||||
<!-- 3. Custom Range Slider (accent-indigo-600 styles input thumb in modern browsers) -->
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- oninput: updates text element sibling content to display slider value -->
|
||||
<input type="range" min="0" max="100" value="50" class="grow h-1 bg-secondary rounded-lg appearance-none cursor-pointer accent-indigo-600" oninput="this.nextElementSibling.textContent = this.value + '%'">
|
||||
<span class="text-xs font-mono font-bold text-sky-400 w-10 text-right">50%</span>
|
||||
</div></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 %}
|
||||
@@ -0,0 +1,104 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Avatars & Badges - 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">Visuals</span>
|
||||
<h1 class="text-3xl font-extrabold text-slate-100 tracking-tight mt-1">Avatars & Badges</h1>
|
||||
<p class="text-muted-foreground text-sm mt-2 leading-relaxed">
|
||||
Circular user avatars featuring fallback initials text, combined with status badges in sky, emerald, amber, and rose variants.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Section Visuals -->
|
||||
<section class="space-y-4">
|
||||
<h2 class="text-lg font-bold text-slate-200">Avatars & Badges Showcase</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, 'visual-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, 'visual-code')">HTML Markup</button>
|
||||
</div>
|
||||
|
||||
<!-- Demo Viewport -->
|
||||
<div id="visual-sandbox" class="wiki-pane space-y-4 py-2">
|
||||
<!-- Avatars -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Fallback Avatars</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-sky-400 leading-none">AV</div>
|
||||
<div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-emerald-400 leading-none">BC</div>
|
||||
<div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-indigo-400 leading-none">JD</div>
|
||||
<span class="text-xs text-muted-foreground/90">Textual initials fallback inside boundaries</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badges -->
|
||||
<div class="space-y-2">
|
||||
<span class="block text-xs font-semibold text-muted-foreground">Status Badges</span>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20 leading-none">In Progress</span>
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 leading-none">Completed</span>
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20 leading-none">Reviewing</span>
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20 leading-none">Blocked</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code Snippet Area -->
|
||||
<div id="visual-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><!-- Initials Fallback Avatar -->
|
||||
<div class="w-9 h-9 rounded-full bg-secondary border border-border flex items-center justify-center text-xs font-bold text-sky-400 leading-none">AV</div>
|
||||
|
||||
<!-- Status Badges -->
|
||||
<!-- Info / Sky -->
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-sky-500/10 text-sky-400 border border-sky-500/20 leading-none">In Progress</span>
|
||||
|
||||
<!-- Success / Emerald -->
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 leading-none">Completed</span>
|
||||
|
||||
<!-- Warning / Amber -->
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-amber-500/10 text-amber-400 border border-amber-500/20 leading-none">Reviewing</span>
|
||||
|
||||
<!-- Destructive / Rose -->
|
||||
<span class="inline-flex items-center justify-center px-2.5 py-0.5 rounded-full text-[9px] font-bold bg-rose-500/10 text-rose-400 border border-rose-500/20 leading-none">Blocked</span></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 %}
|
||||
@@ -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 %}
|
||||
@@ -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 %}
|
||||
@@ -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 %}
|
||||
@@ -0,0 +1,75 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Stick - Use-Case Oriented Rust Web Template{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow flex items-center justify-center py-20 px-4">
|
||||
<div class="max-w-4xl w-full text-center">
|
||||
<!-- Badge -->
|
||||
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-sky-500/10 text-sky-400 border border-sky-500/20 mb-6">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-sky-400 animate-pulse"></span>
|
||||
Axum 0.8 + MongoDB v3 + Askama 0.16
|
||||
</span>
|
||||
|
||||
<!-- Hero Title -->
|
||||
<h1 class="text-4xl sm:text-6xl font-extrabold tracking-tight mb-6 bg-linear-to-r from-slate-100 via-slate-200 to-slate-400 bg-clip-text text-transparent leading-none">
|
||||
Clean, Use-Case Centric <br class="hidden sm:inline">
|
||||
<span class="bg-linear-to-r from-sky-400 via-blue-500 to-indigo-500 bg-clip-text">Rust Web Development</span>
|
||||
</h1>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="text-lg text-slate-400 max-w-2xl mx-auto mb-10 leading-relaxed">
|
||||
A production-ready template organized around vertical features. Auth, databases, and domain logic are grouped together by use-case for high maintainability.
|
||||
</p>
|
||||
|
||||
<!-- CTA Buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-16">
|
||||
{% if authenticated %}
|
||||
<a href="/tasks" class="px-8 py-4 rounded-2xl bg-linear-to-r from-sky-500 via-blue-600 to-indigo-600 hover:opacity-95 transition font-semibold text-white shadow-xl shadow-sky-500/10 hover:shadow-sky-500/20 scale-100 hover:scale-[1.02] transform duration-200">
|
||||
Go to Tasks Dashboard
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="/auth/register" class="px-8 py-4 rounded-2xl bg-linear-to-r from-sky-500 via-blue-600 to-indigo-600 hover:opacity-95 transition font-semibold text-white shadow-xl shadow-sky-500/10 hover:shadow-sky-500/20 scale-100 hover:scale-[1.02] transform duration-200">
|
||||
Get Started Free
|
||||
</a>
|
||||
<a href="/auth/login" class="px-8 py-4 rounded-2xl bg-slate-900/60 hover:bg-slate-900 border border-slate-800 hover:border-slate-700 transition font-semibold text-slate-200 scale-100 hover:scale-[1.02] transform duration-200">
|
||||
Sign In
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Features Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-left">
|
||||
<div class="bg-slate-900/40 border border-slate-900 hover:border-slate-800 rounded-2xl p-6 hover:bg-slate-900/60 transition duration-300">
|
||||
<div class="w-10 h-10 rounded-lg bg-sky-500/10 border border-sky-500/20 flex items-center justify-center text-sky-400 mb-4">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-base font-semibold text-slate-200 mb-2">Type-Safe Views</h3>
|
||||
<p class="text-sm text-slate-400 leading-relaxed">Askama renders templates compiled directly into Rust code, catching missing arguments or syntax bugs at compile time.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/40 border border-slate-900 hover:border-slate-800 rounded-2xl p-6 hover:bg-slate-900/60 transition duration-300">
|
||||
<div class="w-10 h-10 rounded-lg bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-400 mb-4">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-base font-semibold text-slate-200 mb-2">Secure Authentication</h3>
|
||||
<p class="text-sm text-slate-400 leading-relaxed">Built-in JWT session verification, cookie storage, bcrypt password hashing, and custom Axum 0.8 guard extractors.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-slate-900/40 border border-slate-900 hover:border-slate-800 rounded-2xl p-6 hover:bg-slate-900/60 transition duration-300">
|
||||
<div class="w-10 h-10 rounded-lg bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400 mb-4">
|
||||
<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">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-base font-semibold text-slate-200 mb-2">MongoDB Integration</h3>
|
||||
<p class="text-sm text-slate-400 leading-relaxed">Seamless BSON v3 mapping, index setups, and type-safe `chrono::DateTime` conversion via `serde_with` serialize helpers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,169 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Tasks Dashboard - Stick{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="grow py-12 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto w-full">
|
||||
|
||||
<!-- Welcome 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">Your Tasks</h1>
|
||||
<p class="text-slate-400 text-sm mt-1">Add and manage your 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 Tasks: {{ tasks.len() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Add Task Form Container -->
|
||||
<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="M12 4.5v15m7-7H5" />
|
||||
</svg>
|
||||
New Task
|
||||
</h3>
|
||||
<form action="/tasks/create" method="post" class="space-y-4">
|
||||
<div>
|
||||
<label for="title" class="block text-xs font-semibold text-slate-400 mb-1.5">Title</label>
|
||||
<input id="title" name="title" 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="Task name">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="description" class="block text-xs font-semibold text-slate-400 mb-1.5">Description (Optional)</label>
|
||||
<textarea id="description" name="description" rows="3" 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="Add some context..."></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Interactive Assignee Search -->
|
||||
<div class="autocomplete-combobox relative">
|
||||
<label class="block text-xs font-semibold text-slate-400 mb-1.5">Assignee (Optional)</label>
|
||||
|
||||
<!-- Hidden input holding the actual developer ID to submit -->
|
||||
<input type="hidden" id="assignee-id" name="assignee_id" class="combobox-value">
|
||||
|
||||
<div class="relative">
|
||||
<input type="text"
|
||||
id="assignee-search"
|
||||
name="q"
|
||||
placeholder="Search developer..."
|
||||
autocomplete="off"
|
||||
|
||||
hx-get="/developers/search"
|
||||
hx-trigger="input changed delay:250ms, search"
|
||||
hx-target="next .combobox-results"
|
||||
hx-indicator="next .combobox-indicator"
|
||||
|
||||
class="combobox-input appearance-none rounded-xl relative block w-full pl-9 pr-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">
|
||||
|
||||
<!-- Search Icon & Loading Indicator -->
|
||||
<div class="absolute left-3 top-3 text-slate-500">
|
||||
<svg class="combobox-indicator htmx-indicator animate-spin h-4 w-4 text-sky-500 hidden" xmlns="http://www.w3.org/2000/svg" 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 12h4z"></path>
|
||||
</svg>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Results Dropdown Popover -->
|
||||
<div id="search-results"
|
||||
class="combobox-results absolute z-10 w-full mt-1.5 bg-slate-900 border border-slate-800 rounded-xl shadow-2xl overflow-hidden hidden">
|
||||
</div>
|
||||
</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 Task
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tasks Listing -->
|
||||
<div class="lg:col-span-2 space-y-4">
|
||||
{% if tasks.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="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.03 0 1.9.693 2.166 1.638m-7.3 8.35h.008v.008H10v-.008Zm0 3h.008v.008H10v-.008Zm0 3h.008v.008H10v-.008Z" />
|
||||
</svg>
|
||||
<h3 class="text-base font-bold text-slate-350 mb-1">No tasks yet</h3>
|
||||
<p class="text-sm text-slate-500">Your task board is clean. Use the form on the left to add your first task.</p>
|
||||
</div>
|
||||
{% else %}
|
||||
{% for item in tasks %}
|
||||
<div class="bg-[#1e293b]/30 hover:bg-[#1e293b]/40 border border-slate-900 rounded-2xl p-5 flex items-start gap-4 transition duration-300 {% if item.task.is_completed %} opacity-60 {% endif %} relative overflow-hidden group">
|
||||
|
||||
<!-- Checkmark Indicator -->
|
||||
<div class="flex-shrink-0 mt-0.5">
|
||||
{% if item.task.is_completed %}
|
||||
<div class="w-5 h-5 rounded-full bg-emerald-500/20 border border-emerald-500/50 flex items-center justify-center text-emerald-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5">
|
||||
<path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="w-5 h-5 rounded-full border border-slate-700"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Task Text -->
|
||||
<div class="grow">
|
||||
<h4 class="text-sm font-semibold text-slate-200 {% if item.task.is_completed %} line-through text-slate-500 {% endif %}">
|
||||
{{ item.task.title }}
|
||||
</h4>
|
||||
{% if let Some(desc) = item.task.description %}
|
||||
{% if !desc.is_empty() %}
|
||||
<p class="text-xs text-slate-400 mt-1 {% if item.task.is_completed %} line-through text-slate-500 {% endif %}">
|
||||
{{ desc }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<div class="flex items-center flex-wrap gap-x-3 gap-y-1.5 mt-3 text-[10px] text-slate-500">
|
||||
<span>Created {{ item.task.created_at.format("%Y-%m-%d %H:%M") }}</span>
|
||||
{% if let Some(dev_name) = item.developer_name %}
|
||||
<span class="w-1 h-1 rounded-full bg-slate-700"></span>
|
||||
<span class="px-2 py-0.5 rounded-full bg-sky-950/40 text-sky-400 border border-sky-900/30 flex items-center gap-1 font-medium">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-2.5 h-2.5">
|
||||
<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>
|
||||
Assigned to: {{ dev_name }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</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">
|
||||
{% if !item.task.is_completed %}
|
||||
<form action="/tasks/{{ item.task.id.unwrap().to_hex() }}/complete" method="post" class="inline">
|
||||
<button type="submit" class="p-2 rounded-lg bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 text-emerald-400 transition" title="Mark Completed">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
<form action="/tasks/{{ item.task.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 Task">
|
||||
<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 %}
|
||||
Reference in New Issue
Block a user