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

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

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

<div class="demo-card">
    <div class="demo-card-header">Animated Transitions on Upload States</div>
    <div class="demo-card-body">
        <p class="demo-description">
            CSS transitions animate the uploader between idle, uploading, success, and error states.
            Visual feedback makes the upload experience feel polished and responsive.
        </p>

        <style>
            .animated-uploader {
                --cu-primary: #8b5cf6;
                border: 2px solid #e5e7eb;
                border-radius: 0.75rem;
                padding: 1.5rem;
                transition: border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
            }
            .animated-uploader.cu-uploading {
                border-color: #8b5cf6;
                box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
                background-color: #f5f3ff;
            }
            .animated-uploader.cu-success {
                border-color: #10b981;
                box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
                background-color: #ecfdf5;
            }
            .animated-uploader.cu-error {
                border-color: #ef4444;
                box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
                background-color: #fef2f2;
            }
            .animated-uploader .ajaxuploader-button {
                transition: background-color 0.3s, transform 0.15s;
            }
        </style>

        <div id="animContainer" class="animated-uploader">
            <div id="animUploader"></div>
        </div>

        <div class="code-panel">
            <pre><code>.animated-uploader {
  transition: border-color 0.4s, box-shadow 0.4s, background-color 0.4s;
}
.animated-uploader.cu-uploading {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.15);
}
.animated-uploader.cu-success {
  border-color: #10b981;
  background-color: #ecfdf5;
}

AjaxUploader.create(el, {
  uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
  onTaskStart: function() { container.classList.add('cu-uploading'); },
  onTaskComplete: function() { container.classList.add('cu-success'); }
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    (function () {
        var container = document.getElementById('animContainer');
        AjaxUploader.create(document.getElementById('animUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            onTaskStart: function () {
                container.className = 'animated-uploader cu-uploading';
            },
            onTaskComplete: function () {
                container.className = 'animated-uploader cu-success';
                setTimeout(function () {
                    container.className = 'animated-uploader';
                }, 3000);
            },
            onTaskError: function () {
                container.className = 'animated-uploader cu-error';
                setTimeout(function () {
                    container.className = 'animated-uploader';
                }, 3000);
            }
        });
    })();
</script>
</asp:Content>
