<%@ Page Title="Tailwind-Inspired Theme" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %>

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Tailwind-Inspired Theme - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Tailwind-Inspired Theme</asp:Content>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<div class="demo-card">
    <div class="demo-card-header">Tailwind-Inspired Theme</div>
    <div class="demo-card-body">
        <p class="demo-description">
            Apply a Tailwind CSS-inspired look to AjaxUploader using custom CSS variables.
            No Tailwind dependency required — pure CSS variable overrides achieve the aesthetic.
        </p>

        <style>
            .tailwind-theme {
                --cu-primary: #3b82f6;
                --cu-primary-hover: #2563eb;
                --cu-primary-text: #ffffff;
                --cu-border-radius: 0.5rem;
                --cu-border-color: #e5e7eb;
                --cu-bg: #f9fafb;
                --cu-text: #111827;
                --cu-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
                --cu-font-size: 0.875rem;
                --cu-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
                --cu-padding: 0.75rem 1.25rem;
                --cu-progress-bg: #dbeafe;
                --cu-progress-fill: #3b82f6;
                --cu-success: #10b981;
                --cu-error: #ef4444;
            }
            .tailwind-theme .ajaxuploader-button {
                font-weight: 500;
                letter-spacing: 0.025em;
                box-shadow: var(--cu-shadow);
                transition: all 0.15s ease-in-out;
            }
        </style>

        <div class="tailwind-theme">
            <au:AjaxFileUpload ID="Uploader1" runat="server"
                AllowMultiple="true"
                ButtonText="Choose Files"
                ShowProgress="true" />
        </div>

        <div class="code-panel">
            <pre><code>&lt;style&gt;
  .tailwind-theme {
    --cu-primary: #3b82f6;
    --cu-primary-hover: #2563eb;
    --cu-border-radius: 0.5rem;
    --cu-border-color: #e5e7eb;
    --cu-bg: #f9fafb;
    --cu-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --cu-shadow: 0 1px 3px rgba(0,0,0,0.1);
    --cu-success: #10b981;
    --cu-error: #ef4444;
  }
&lt;/style&gt;
&lt;div class="tailwind-theme"&gt;
  &lt;au:AjaxFileUpload ID="Uploader1" runat="server"
      AllowMultiple="true"
      ButtonText="Choose Files"
      ShowProgress="true" /&gt;
&lt;/div&gt;</code></pre>
        </div>
    </div>
</div>

</asp:Content>
