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

<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Icon-Only Button - AjaxUploader v5.0 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Icon-Only Button</asp:Content>

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

<div class="demo-card">
    <div class="demo-card-header">Icon-Only Upload Button</div>
    <div class="demo-card-body">
        <p class="demo-description">
            A compact icon-only upload button using a Unicode icon.
            Ideal for toolbars or tight UI areas where text labels are unnecessary.
        </p>

        <style>
            .icon-uploader .ajaxuploader-button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                padding: 0;
                font-size: 1.25rem;
                background-color: #0d6efd;
                color: #fff;
                border: none;
                box-shadow: 0 2px 8px rgba(13, 110, 253, 0.3);
                transition: background-color 0.2s, transform 0.2s;
            }
            .icon-uploader .ajaxuploader-button:hover {
                background-color: #0b5ed7;
                transform: scale(1.1);
            }
            .icon-uploader .ajaxuploader-button-text { display: none; }
        </style>

        <div class="icon-uploader">
            <au:AjaxFileUpload ID="Uploader1" runat="server"
                AllowMultiple="true"
                ButtonText="&#x2B06;"
                ShowProgress="true" />
        </div>
        <p class="text-muted mt-2"><small>Click the circular button above to upload files.</small></p>

        <div class="code-panel">
            <pre><code>&lt;style&gt;
  .icon-uploader .ajaxuploader-button {
    width: 48px; height: 48px;
    border-radius: 50%;
    padding: 0;
    font-size: 1.25rem;
    background-color: #0d6efd;
    color: #fff;
    border: none;
  }
  .icon-uploader .ajaxuploader-button:hover {
    transform: scale(1.1);
  }
&lt;/style&gt;

&lt;div class="icon-uploader"&gt;
  &lt;au:AjaxFileUpload ID="Uploader1" runat="server"
      ButtonText="&amp;#x2B06;"
      ShowProgress="true" /&gt;
&lt;/div&gt;</code></pre>
        </div>
    </div>
</div>

</asp:Content>
