<%@ Page Title="Full-Width Layout" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Full-Width Layout - AjaxUploader v5.3 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Full-Width Layout</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Full-Width Banner Layout</div> <div class="demo-card-body"> <p class="demo-description"> A full-width banner-style uploader that spans the entire container width.
 Great for hero sections or dedicated upload pages.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the control stretched to its container's full width for dashboards and page-wide forms.</div> <style> .fullwidth-uploader {
 --cu-primary: #4f46e5;
 --cu-primary-hover: #4338ca;
 width: 100%;
 background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
 border: 2px dashed #a5b4fc;
 border-radius: 0.75rem;
 padding: 2.5rem 1.5rem;
 text-align: center;
 transition: border-color 0.3s;
 }
 .fullwidth-uploader:hover {
 border-color: #6366f1;
 }
 .fullwidth-uploader .ajaxuploader-button {
 font-size: 1.1rem;
 padding: 0.75rem 2.5rem;
 }
 .fullwidth-banner-label {
 display: block;
 margin-bottom: 1rem;
 font-size: 1.25rem;
 font-weight: 600;
 color: #3730a3;
 }
 </style> <div class="fullwidth-uploader"> <span class="fullwidth-banner-label">Drag files here or click to upload</span> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ButtonText="Browse Files"
 ShowProgress="true" /> </div> <div class="code-panel"> <pre><code>&lt;style&gt;
 .fullwidth-uploader {
 width: 100%;
 background: linear-gradient(135deg, #eef2ff, #e0e7ff);
 border: 2px dashed #a5b4fc;
 border-radius: 0.75rem;
 padding: 2.5rem 1.5rem;
 text-align: center;
 }
 .fullwidth-uploader:hover { border-color: #6366f1; }
&lt;/style&gt;

&lt;div class="fullwidth-uploader"&gt;
 &lt;span class="fullwidth-banner-label"&gt;
 Drag files here or click to upload
 &lt;/span&gt;
 &lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ButtonText="Browse Files"
 ShowProgress="true" /&gt;
&lt;/div&gt;</code></pre> </div> </div>
</div> 
</asp:Content>
