first commit

2026-10-03 15:41:23 +00:00
commit 792676e974
@@ -0,0 +1,140 @@
+<?php
+
+$labels = [
+	'stage0' => \Yii::t('app', 'Загружаем файл на сервер'),
+	'stage1' => \Yii::t('app', 'Улучшаем и увеличиваем'),
+	'stage2' => \Yii::t('app', 'Загружаем полученный результат'),
+];
+$labelsJson = json_encode($labels, JSON_UNESCAPED_UNICODE);
+
+?>
+
+<div id="process" class="dropzone-form dropzone-form-loading gradient-dashed-border" style="display: <?= ($show ?? true) ? '' : 'none'; ?>">
+	<div class="dropzone-form-inner">
+		<div id="process-title" class="dropzone-form-text"><?= \Yii::t('app', 'Загружаем файл на сервер') ?></div>
+		<div id="process-filename" class="dropzone-form-filename"><?= htmlspecialchars($filename ?? '', ENT_QUOTES, 'UTF-8') ?></div>
+		<div class="dropzone-form-loading-info">
+			<div class="dropzone-form-loading-info-col">
+				<div class="dropzone-form-loading-info-item">
+					<div class="dropzone-form-loading-info-icon">
+						<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M6 4.5V6.5H4M6 20.5V18.5H4M18 4.5V6.5H20M18 20.5V18.5H20M7 7.5H17V17.5H7V7.5Z" stroke="currentColor" stroke-linecap="square"/>
+						</svg>
+					</div>
+					<div class="dropzone-form-loading-info-text">
+						<span id="origin_width"><?= htmlspecialchars($origin_width ?? '', ENT_QUOTES, 'UTF-8') ?></span> x <span id="origin_height"><?= htmlspecialchars($origin_height ?? '', ENT_QUOTES, 'UTF-8') ?></span>&nbsp;<span>px</span></div>
+				</div>
+				<div class="dropzone-form-loading-info-item">
+					<div class="dropzone-form-loading-info-icon">
+						<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M16 17.5C18.7614 17.5 21 15.2614 21 12.5C21 10.017 19.19 7.95665 16.8174 7.56649C16.8136 7.56585 16.8104 7.56299 16.8094 7.5592C16.1762 5.22047 14.039 3.5 11.5 3.5C8.46243 3.5 6 5.96243 6 9C6 9.20572 6.01129 9.4088 6.0333 9.60866C6.03385 9.61364 6.0306 9.61827 6.02574 9.61949C4.28747 10.0545 3 11.6269 3 13.5C3 15.7091 4.79086 17.5 7 17.5H8M12 10.5047V21.5M12 10.5047L9 13.5M12 10.5047L15 13.5" stroke="currentColor" stroke-linecap="square"/>
+						</svg>
+					</div>
+					<div class="dropzone-form-loading-info-text">
+						<span id="origin_size"><?= htmlspecialchars($origin_size ?? '', ENT_QUOTES, 'UTF-8') ?></span></div>
+				</div>
+			</div>
+			<div class="dropzone-form-loading-info-col dropzone-form-loading-info-arrow">
+				<svg width="37" height="24" viewBox="0 0 37 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<path d="M7 17L12 12L7 7M13 17L18 12L13 7" stroke="currentColor" stroke-linecap="square"/>
+					<path d="M20 17L25 12L20 7M26 17L31 12L26 7" stroke="currentColor" stroke-linecap="square"/>
+				</svg>
+			</div>
+			<div class="dropzone-form-loading-info-col">
+				<div class="dropzone-form-loading-info-item">
+					<div class="dropzone-form-loading-info-icon">
+						<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M6 4.5V6.5H4M6 20.5V18.5H4M18 4.5V6.5H20M18 20.5V18.5H20M7 7.5H17V17.5H7V7.5Z" stroke="currentColor" stroke-linecap="square"/>
+						</svg>
+					</div>
+					<div class="dropzone-form-loading-info-text">
+						<span id="upscale_width"><?= htmlspecialchars($upscale_width ?? '', ENT_QUOTES, 'UTF-8') ?></span> x <span id="upscale_height"><?= htmlspecialchars($upscale_height ?? '', ENT_QUOTES, 'UTF-8') ?></span>&nbsp;<span>px</span></div>
+				</div>
+				<div class="dropzone-form-loading-info-item">
+					<div class="dropzone-form-loading-info-icon">
+						<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+							<path d="M16 17.5C18.7614 17.5 21 15.2614 21 12.5C21 10.017 19.19 7.95665 16.8174 7.56649C16.8136 7.56585 16.8104 7.56299 16.8094 7.5592C16.1762 5.22047 14.039 3.5 11.5 3.5C8.46243 3.5 6 5.96243 6 9C6 9.20572 6.01129 9.4088 6.0333 9.60866C6.03385 9.61364 6.0306 9.61827 6.02574 9.61949C4.28747 10.0545 3 11.6269 3 13.5C3 15.7091 4.79086 17.5 7 17.5H8M12 10.5047V21.5M12 10.5047L9 13.5M12 10.5047L15 13.5" stroke="currentColor" stroke-linecap="square"/>
+						</svg>
+					</div>
+					<div class="dropzone-form-loading-info-text">
+						≈ <span id="upscale_size"><?= htmlspecialchars($upscale_size ?? '', ENT_QUOTES, 'UTF-8') ?></span></div>
+				</div>
+			</div>
+		</div>
+
+		<div class="dropzone-form-loading-progress">
+			<div class="progress">
+				<div class="progress-label">0%</div>
+				<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+			</div>
+		</div>
+
+		<div class="dropzone-form-note"><?= Yii::t('app', 'Увеличение 4х доступно после регистрации') ?></div>
+
+	</div>
+</div>
+
+<script>
+	const labels = <?= $labelsJson ?>;
+
+	const process = {
+		el: document.getElementById('process'),
+
+		barEl: document.querySelector('.progress-bar'),
+		labelEl: document.querySelector('.progress-label'),
+
+		titleEl: document.getElementById('process-title'),
+		filenameEl: document.getElementById('process-filename'),
+
+		originSizeEl: document.getElementById('origin_size'),
+		upscaleSizeEl: document.getElementById('upscale_size'),
+		originWidthEl: document.getElementById('origin_width'),
+		originHeightEl: document.getElementById('origin_height'),
+		upscaleWidthEl: document.getElementById('upscale_width'),
+		upscaleHeightEl: document.getElementById('upscale_height'),
+
+		status: {
+			current: 0,
+			stage: 0,
+		},
+
+		hide() {
+			if (this.el) this.el.style.display = 'none';
+		},
+		show() {
+			if (this.el) this.el.style.display = '';
+		},
+		setFilename(filename) {
+			if (this.filenameEl) this.filenameEl.innerText = filename;
+		},
+		setSize(size) {
+			if (this.originSizeEl) this.originSizeEl.innerText = this.formatB(size);
+			if (this.upscaleSizeEl) this.upscaleSizeEl.innerText = this.formatB(size * 3);
+		},
+		setDimensions(w, h) {
+			if (this.originWidthEl) this.originWidthEl.innerText = w;
+			if (this.originHeightEl) this.originHeightEl.innerText = h;
+			if (this.upscaleWidthEl) this.upscaleWidthEl.innerText = w * 2;
+			if (this.upscaleHeightEl) this.upscaleHeightEl.innerText = h * 2;
+		},
+		setStage(stage) {
+			if (!this.titleEl) return;
+			this.status.stage = stage;
+			this.titleEl.innerText = labels['stage' + stage] || '...';
+		},
+		setStatus(status) {
+			const val = Math.min(100, Math.max(0, status));
+			this.status.current = val;
+			if (this.barEl) this.barEl.style.width = val + '%';
+			if (this.labelEl) this.labelEl.innerText = val + '%';
+		},
+
+		formatB(bytes) {
+			if (bytes === 0 || isNaN(bytes)) return '0 B';
+			const units = ['B', 'Kb', 'Mb', 'Gb', 'Tb'];
+			const i = Math.floor(Math.log(bytes) / Math.log(1024));
+			const formattedValue = (bytes / Math.pow(1024, i)).toFixed(2);
+			return parseFloat(formattedValue) + ' ' + units[i];
+		}
+	};
+</script>