<%@ 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.2 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> <div class="demo-expect"><strong>What you should see:</strong> the drop zone restyled - border, colours, icon, hover state - while keeping its keyboard-reachable browse path.</div> <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"></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 host = document.getElementById('styledUploader');
 var counter = 0;
 if (!zone) return;
 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'); });

 if (!host || !window.AjaxUploader || typeof AjaxUploader.create !== 'function') return;
 AjaxUploader.create(host, {
 uploadUrl: '<%= ResolveUrl("~/ajaxupload.axd/upload") %>',
 multiple: true,
 autoUpload: true,
 dropTarget: zone
 });
 })();
</script>
</asp:Content>
