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

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

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

<div class="demo-card">
    <div class="demo-card-header">Styled Drop Zone with Visual Feedback</div>
    <div class="demo-card-body">
        <p class="demo-description">
            A visually enhanced drop zone with hover effects, drag-active highlighting,
            and smooth transitions that respond to drag events.
        </p>

        <style>
            .styled-drop {
                border: 2px dashed #cbd5e1;
                border-radius: 1rem;
                padding: 2.5rem 1.5rem;
                text-align: center;
                background: #f8fafc;
                transition: all 0.3s ease;
                cursor: pointer;
            }
            .styled-drop:hover {
                border-color: #94a3b8;
                background: #f1f5f9;
            }
            .styled-drop.drag-over {
                border-color: #3b82f6;
                background: #eff6ff;
                box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
                transform: scale(1.01);
            }
            .styled-drop-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
            .styled-drop-text { font-size: 0.95rem; color: #64748b; font-weight: 500; }
            .styled-drop-hint { font-size: 0.8rem; color: #94a3b8; margin-top: 0.25rem; }
        </style>

        <div id="styledZone" class="styled-drop">
            <div class="styled-drop-icon">&#128230;</div>
            <div class="styled-drop-text">Drag and drop files here</div>
            <div class="styled-drop-hint">or click to browse</div>
        </div>
        <div id="styledUploader" style="margin-top:0.5rem;"></div>

        <div class="code-panel">
            <pre><code>.styled-drop.drag-over {
  border-color: #3b82f6;
  background: #eff6ff;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
  transform: scale(1.01);
}

AjaxUploader.create(el, {
  uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
  dropTarget: zone
});</code></pre>
        </div>
    </div>
</div>

</asp:Content>

<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script>
    (function () {
        var zone = document.getElementById('styledZone');
        var counter = 0;
        zone.addEventListener('dragenter', function (e) { e.preventDefault(); counter++; zone.classList.add('drag-over'); });
        zone.addEventListener('dragleave', function () { counter--; if (counter <= 0) { counter = 0; zone.classList.remove('drag-over'); } });
        zone.addEventListener('dragover', function (e) { e.preventDefault(); });
        zone.addEventListener('drop', function () { counter = 0; zone.classList.remove('drag-over'); });

        AjaxUploader.create(document.getElementById('styledUploader'), {
            uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
            multiple: true,
            autoUpload: true,
            dropTarget: zone
        });
    })();
</script>
</asp:Content>
