<%@ Page Title="AjaxUploader v5.0 Demos" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxUploader.Demos.DefaultPage" %>

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

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

<div class="row g-4 mb-4">
    <div class="col-12">
        <div class="p-4 rounded-3" style="background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white;">
            <h2 class="fw-bold mb-2">AjaxUploader v5.0 for ASP.NET Web Forms</h2>
            <p class="mb-3 opacity-75">A modern, high-performance file upload server control built with HTML5. No Flash, no Silverlight, no plugins required.</p>
            <div class="d-flex gap-2 flex-wrap">
                <span class="badge bg-white text-primary">HTML5 File API</span>
                <span class="badge bg-white text-primary">Chunked Uploads</span>
                <span class="badge bg-white text-primary">Drag & Drop</span>
                <span class="badge bg-white text-primary">Resume Support</span>
                <span class="badge bg-white text-primary">Progress Tracking</span>
                <span class="badge bg-white text-primary">Server Controls</span>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-md-6 col-lg-4">
        <a href="Demos/GettingStarted/Overview.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-rocket-takeoff text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Getting Started</h5>
                    </div>
                    <p class="text-muted small mb-0">5 demos covering setup, configuration, server controls, and the JavaScript API.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/BasicUsage/SingleFile.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-cloud-arrow-up text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Basic Upload</h5>
                    </div>
                    <p class="text-muted small mb-0">8 demos for single file, multiple files, auto/manual upload, forms, and more.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/Validation/FileExtensions.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-shield-check text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Validation</h5>
                    </div>
                    <p class="text-muted small mb-0">10 demos for file extension, size, MIME type, dimension, and custom validation.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/Appearance/DefaultTheme.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-palette text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Appearance</h5>
                    </div>
                    <p class="text-muted small mb-0">10 demos for themes, dark mode, custom colors, buttons, and layouts.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/Progress/BasicProgressBar.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-bar-chart text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Progress</h5>
                    </div>
                    <p class="text-muted small mb-0">8 demos for progress bars, speed/ETA, circular, striped, and custom progress.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/DragAndDrop/BasicDropZone.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-hand-index text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Drag & Drop</h5>
                    </div>
                    <p class="text-muted small mb-0">8 demos for drop zones, folder upload, preview on drop, and overlays.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/ChunkedUpload/BasicChunked.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-puzzle text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Chunked Upload</h5>
                    </div>
                    <p class="text-muted small mb-0">8 demos for chunked uploads, resume, parallel chunks, and large files.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/Queue/SequentialQueue.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-list-ol text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Queue</h5>
                    </div>
                    <p class="text-muted small mb-0">6 demos for sequential, concurrent, reordering, pause/resume, and cancel.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/Events/AllClientEvents.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-broadcast text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Events</h5>
                    </div>
                    <p class="text-muted small mb-0">7 demos covering all client and server events, filtering, and error handling.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/ImageHandling/ImagePreview.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-image text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Image Handling</h5>
                    </div>
                    <p class="text-muted small mb-0">8 demos for image preview, thumbnails, crop, resize, gallery, and avatar.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/CustomUI/ExternalButton.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-brush text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Custom UI</h5>
                    </div>
                    <p class="text-muted small mb-0">7 demos for custom buttons, progress, queue, card layout, modal, and wizard.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/Integration/FormWithUploader.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-plug text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Integration</h5>
                    </div>
                    <p class="text-muted small mb-0">8 demos for email, chat, CMS, e-commerce, ticket, and multi-step form integration.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/Security/AntiforgeryToken.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-lock text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Security</h5>
                    </div>
                    <p class="text-muted small mb-0">5 demos for antiforgery, authentication, role-based, virus scan, rate limiting.</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-6 col-lg-4">
        <a href="Demos/Advanced/SqlServerProvider.aspx" class="text-decoration-none">
            <div class="demo-card h-100">
                <div class="demo-card-body">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <i class="bi bi-gear text-primary fs-4"></i>
                        <h5 class="mb-0 text-dark">Advanced</h5>
                    </div>
                    <p class="text-muted small mb-0">2 demos for SQL Server and custom provider implementations.</p>
                </div>
            </div>
        </a>
    </div>
</div>

</asp:Content>
