<%@ Page Title="Progress Lab" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Progress Lab - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Progress Lab</asp:Content> 
<asp:Content ID="HeadContent" ContentPlaceHolderID="HeadContent" runat="server">
<link href="<%= ResolveUrl("~/Content/progress-lab.css") %>" rel="stylesheet" />
</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="demo-card"> <div class="demo-card-header">Slow Upload Progress Lab</div> <div class="demo-card-body"> <div class="progress-lab-shell" id="progressLabRoot"> <div class="progress-lab-intro"> <div class="progress-lab-chips"> <span class="progress-lab-chip"><i class="bi bi-sliders2"></i> Tunable pacing</span> <span class="progress-lab-chip"><i class="bi bi-bezier2"></i> Smooth custom bars</span> <span class="progress-lab-chip"><i class="bi bi-file-earmark-binary"></i> Built-in sample files</span> </div> <p class="demo-description"> This demo keeps AjaxUploader in real chunked-upload mode, then adds a small page-local delay between chunks
 so you can inspect beautiful progress bars on localhost without needing a slow network.
 </p> </div> <div class="progress-lab-grid"> <section class="progress-lab-panel"> <h2 class="progress-lab-section-title">Queue and pacing controls</h2> <p class="progress-lab-section-copy"> Drop files here, browse from disk, or generate sample payloads in the browser. The selected pacing profile applies when you start the queue.
 </p> <div id="progressDrop" class="progress-lab-dropzone"> <span class="progress-lab-drop-icon"><i class="bi bi-cloud-arrow-up"></i></span> <p class="progress-lab-drop-title">Drop files to begin your progress test</p> <p class="progress-lab-drop-copy">Click anywhere in this panel to browse, or use one of the sample generators below for repeatable progress-bar checks.</p> </div> <div class="progress-lab-actions"> <button type="button" id="progressBrowseButton" class="progress-lab-button is-primary"><i class="bi bi-folder2-open"></i>Browse Files</button> <button type="button" id="progressStartButton" class="progress-lab-button is-soft"><i class="bi bi-play-fill"></i>Start Upload</button> <button type="button" id="progressPauseButton" class="progress-lab-button is-ghost"><i class="bi bi-pause-fill"></i>Pause</button> <button type="button" id="progressResumeButton" class="progress-lab-button is-ghost"><i class="bi bi-arrow-clockwise"></i>Resume</button> <button type="button" id="progressClearButton" class="progress-lab-button is-soft progress-lab-button-wide"><i class="bi bi-x-circle"></i>Clear Queue</button> </div> <div class="progress-lab-heading-row"> <span class="progress-lab-small-label">Slow mode presets</span> <span id="profileValue" class="progress-lab-small-value">Demo Slow</span> </div> <div class="progress-lab-preset-list"> <button type="button" class="progress-lab-preset" data-preset="realtime">Realtime Feel</button> <button type="button" class="progress-lab-preset" data-preset="slow">Demo Slow</button> <button type="button" class="progress-lab-preset" data-preset="cinematic">Cinematic</button> </div> <div class="progress-lab-slider-stack"> <div> <div class="progress-lab-heading-row"> <label class="progress-lab-small-label" for="delayRange">Delay between chunks</label> <span id="delayValue" class="progress-lab-small-value">420 ms</span> </div> <input id="delayRange" class="progress-lab-range" type="range" min="0" max="900" step="30" value="420" /> </div> <div> <div class="progress-lab-heading-row"> <label class="progress-lab-small-label" for="chunkRange">Chunk size</label> <span id="chunkValue" class="progress-lab-small-value">192 KB</span> </div> <input id="chunkRange" class="progress-lab-range" type="range" min="96" max="768" step="32" value="192" /> </div> </div> <p class="progress-lab-help">Smaller chunks plus a larger delay make the animation easier to study. This pacing is simulated on the client side for QA and presentation work.</p> <div class="progress-lab-heading-row"> <span class="progress-lab-small-label">Sample payloads</span> <span class="progress-lab-small-value">Queue synthetic files</span> </div> <div class="progress-lab-sample-grid"> <button type="button" class="progress-lab-sample" data-sample-size="3">Generate 3 MB</button> <button type="button" class="progress-lab-sample" data-sample-size="8">Generate 8 MB</button> <button type="button" class="progress-lab-sample" data-sample-size="16">Generate 16 MB</button> </div> </section> <section class="progress-lab-panel"> <div class="progress-lab-overall-top"> <div> <span id="overallStatus" class="progress-lab-status-pill is-idle">Ready</span> <p class="progress-lab-overall-copy">Overall progress blends the entire queue into one clean hero bar so you can validate timing, easing, and milestone states at a glance.</p> </div> <div id="overallPercent" class="progress-lab-big-percent">0%</div> </div> <div class="progress-lab-overall-bar"><div id="overallFill" class="progress-lab-overall-fill"></div></div> <div class="progress-lab-overall-meta"> <span id="overallTransfer">Transferred: 0 B of 0 B</span> <span id="overallPacing">Pacing: 420 ms delay / 192 KB chunks</span> </div> <div class="progress-lab-stat-grid"> <div class="progress-lab-stat-card"><div class="progress-lab-stat-label">Throughput</div><div id="speedValue" class="progress-lab-stat-value">--</div><div class="progress-lab-stat-copy">Live aggregate upload speed.</div></div> <div class="progress-lab-stat-card"><div class="progress-lab-stat-label">ETA</div><div id="etaValue" class="progress-lab-stat-value">--</div><div class="progress-lab-stat-copy">Time remaining for the current queue.</div></div> <div class="progress-lab-stat-card"><div class="progress-lab-stat-label">Queue</div><div id="queueValue" class="progress-lab-stat-value">No files</div><div id="queueCopy" class="progress-lab-stat-copy">Pending: 0 / Paused: 0</div></div> <div class="progress-lab-stat-card"><div class="progress-lab-stat-label">Mood</div><div id="moodValue" class="progress-lab-stat-value">Demo Slow</div><div id="moodCopy" class="progress-lab-stat-copy">Balanced pacing for visual QA.</div></div> </div> <div class="progress-lab-visual-row"> <div id="progressRing" class="progress-lab-ring"> <div class="progress-lab-ring-copy"> <strong id="ringPercent">0%</strong> <span id="ringLabel">Ready</span> </div> </div> <div class="progress-lab-visual-copy"> <p>The ring gives you a second read on the same queue, which is helpful when comparing circular treatments against the main horizontal bar.</p> <div id="pulseRail" class="progress-lab-pulse"></div> </div> </div> </section> </div> <section class="progress-lab-panel"> <h2 class="progress-lab-section-title">Per-file runway</h2> <p class="progress-lab-section-copy">Each card shows the same upload data in a more detailed presentation, including status, transfer rate, ETA, and a simple segment rail.</p> <div id="fileEmpty" class="progress-lab-empty">No files are queued yet. Add one from disk or generate a sample file to start watching the progress bars.</div> <div id="fileList" class="progress-lab-files progress-lab-hidden"></div> </section> <div class="code-panel"> <pre><code>AjaxUploader.create('#progressLabUploader', {
 uploadUrl: uploadUrl,
 chunked: true,
 chunkSize: 192 * 1024,
 autoUpload: false,
 browseButton: '#progressBrowseButton',
 dropTarget: '#progressDrop',
 headers: function () {
 return { 'X-Demo-Chunk-Delay': String(currentDelayMs) };
 },
 onProgress: renderProgressState
});</code></pre> </div> </div> </div>
</div> 
<div id="progressLabUploader" class="progress-lab-hidden-uploader" data-upload-url="<%= ResolveUrl("~/ajaxupload.axd/upload") %>" aria-hidden="true"></div>
</asp:Content> 
<asp:Content ID="ScriptsContent" ContentPlaceHolderID="ScriptsContent" runat="server">
<script src="<%= ResolveUrl("~/Scripts/progress-lab.js") %>"></script>
</asp:Content>
