rev 4
This commit is contained in:
Daniil
@@ -0,0 +1,818 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Caption Result Redesign — Coffee Project</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
/* ============================================
|
||||
CATPPUCCIN LATTE TOKENS (from global.scss)
|
||||
============================================ */
|
||||
:root {
|
||||
--purple-50: #f7efff;
|
||||
--purple-100: #eedfff;
|
||||
--purple-200: #dfc8ff;
|
||||
--purple-300: #c8abff;
|
||||
--purple-400: #a777f2;
|
||||
--purple-500: #8839ef;
|
||||
--purple-600: #7430ca;
|
||||
--purple-700: #5f27a5;
|
||||
|
||||
--green-50: #eff8ea;
|
||||
--green-100: #dcefd2;
|
||||
--green-200: #c7e5b9;
|
||||
--green-400: #7fc16c;
|
||||
--green-500: #40a02b;
|
||||
--green-600: #348222;
|
||||
|
||||
--color-success: #40a02b;
|
||||
--color-primary: var(--purple-500);
|
||||
--color-secondary: var(--purple-400);
|
||||
|
||||
--text-primary: #4c4f69;
|
||||
--text-secondary: #5c5f77;
|
||||
--text-tertiary: #8c8fa1;
|
||||
|
||||
--bg-canvas: #e6e9ef;
|
||||
--bg-default: #eff1f5;
|
||||
--bg-surface: #dce0e8;
|
||||
--bg-hover: #ccd0da;
|
||||
|
||||
--border-default: #bcc0cc;
|
||||
--border-subtle: #dce0e8;
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(76, 79, 105, 0.06), 0 2px 8px rgba(76, 79, 105, 0.04);
|
||||
--shadow-md: 0 4px 6px -1px rgba(76, 79, 105, 0.08), 0 24px 48px -12px rgba(76, 79, 105, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(76, 79, 105, 0.08), 0 40px 80px -20px rgba(76, 79, 105, 0.12);
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
|
||||
--duration-fast: 150ms;
|
||||
--duration-normal: 250ms;
|
||||
--duration-slow: 350ms;
|
||||
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||||
|
||||
--accent-shadow: rgba(136, 57, 239, 0.28);
|
||||
--accent-shadow-hover: rgba(136, 57, 239, 0.38);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESET
|
||||
============================================ */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-variant-numeric: lining-nums proportional-nums;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--bg-canvas);
|
||||
color: var(--text-primary);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-image: radial-gradient(circle at 50% 0%, rgba(136, 57, 239, 0.08) 0%, transparent 62%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
WIZARD CONTAINER (simulates ProjectWizard)
|
||||
============================================ */
|
||||
.wizard-shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* Fake stepper bar */
|
||||
.stepper-bar {
|
||||
background: var(--bg-default);
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.stepper-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.stepper-indicator {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stepper-completed .stepper-indicator {
|
||||
background: color-mix(in srgb, var(--color-success) 10%, var(--bg-default));
|
||||
border: 1.5px solid color-mix(in srgb, var(--color-success) 25%, var(--border-default));
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.stepper-active {
|
||||
background: color-mix(in srgb, var(--color-secondary) 4%, transparent);
|
||||
padding: 4px 10px 4px 4px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.stepper-active .stepper-indicator {
|
||||
background: var(--color-secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stepper-active .stepper-label {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.stepper-connector {
|
||||
width: 24px;
|
||||
height: 1.5px;
|
||||
background: color-mix(in srgb, var(--color-success) 40%, var(--border-default));
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESULT STEP — THE REDESIGN
|
||||
============================================ */
|
||||
.result-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Sparkle particles (user liked this) */
|
||||
.sparkles {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sparkle {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: sparkleFloat 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.sparkle--green {
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.sparkle--purple {
|
||||
background: var(--purple-400);
|
||||
}
|
||||
|
||||
.sparkle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
|
||||
.sparkle:nth-child(2) { top: 15%; left: 80%; animation-delay: 1.2s; }
|
||||
.sparkle:nth-child(3) { top: 65%; left: 5%; animation-delay: 2.4s; }
|
||||
.sparkle:nth-child(4) { top: 50%; left: 90%; animation-delay: 0.8s; }
|
||||
.sparkle:nth-child(5) { top: 75%; left: 25%; animation-delay: 3.2s; }
|
||||
.sparkle:nth-child(6) { top: 30%; left: 60%; animation-delay: 1.8s; }
|
||||
.sparkle:nth-child(7) { top: 10%; left: 40%; animation-delay: 4s; }
|
||||
.sparkle:nth-child(8) { top: 55%; left: 70%; animation-delay: 2s; }
|
||||
.sparkle:nth-child(9) { top: 85%; left: 55%; animation-delay: 0.5s; }
|
||||
.sparkle:nth-child(10) { top: 40%; left: 15%; animation-delay: 3.6s; }
|
||||
|
||||
@keyframes sparkleFloat {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
transform: translateY(0) scale(0.5);
|
||||
}
|
||||
20% {
|
||||
opacity: 0.6;
|
||||
transform: translateY(-12px) scale(1);
|
||||
}
|
||||
60% {
|
||||
opacity: 0.25;
|
||||
transform: translateY(-30px) scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
/* Content area */
|
||||
.result-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 32px 40px;
|
||||
gap: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Success header */
|
||||
.result-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
animation: fadeSlideDown 0.6s var(--ease-out) both;
|
||||
}
|
||||
|
||||
.success-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 12px 4px 8px;
|
||||
border-radius: 9999px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: color-mix(in srgb, var(--color-success) 12%, var(--bg-default));
|
||||
color: var(--color-success);
|
||||
border: 1px solid color-mix(in srgb, var(--color-success) 20%, var(--border-subtle));
|
||||
}
|
||||
|
||||
.success-badge svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-weight: 800;
|
||||
font-size: 28px;
|
||||
line-height: 36px;
|
||||
letter-spacing: -0.035em;
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.result-subtitle {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: var(--text-tertiary);
|
||||
text-align: center;
|
||||
letter-spacing: -0.006em;
|
||||
}
|
||||
|
||||
/* Video container */
|
||||
.video-container {
|
||||
width: 100%;
|
||||
max-width: 780px;
|
||||
animation: fadeSlideUp 0.7s var(--ease-out) 0.15s both;
|
||||
}
|
||||
|
||||
.video-frame {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
box-shadow:
|
||||
var(--shadow-lg),
|
||||
0 0 0 1px var(--border-subtle);
|
||||
}
|
||||
|
||||
/* Fake video content for prototype */
|
||||
.video-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(180deg, #1e1e2e 0%, #11111b 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-placeholder::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 50px;
|
||||
background: linear-gradient(transparent, rgba(0,0,0,0.5));
|
||||
}
|
||||
|
||||
.fake-sub {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-shadow: 0 2px 6px rgba(0,0,0,0.8);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fake-sub em {
|
||||
color: var(--purple-400);
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.12);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s var(--ease-out);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.play-btn:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.play-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: white;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
/* File info bar (matches VerifyStep infoCard pattern) */
|
||||
.file-bar {
|
||||
width: 100%;
|
||||
max-width: 780px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
margin-top: 12px;
|
||||
background: color-mix(in srgb, var(--bg-default) 92%, transparent);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-sm);
|
||||
animation: fadeSlideUp 0.6s var(--ease-out) 0.35s both;
|
||||
}
|
||||
|
||||
.file-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-subtle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.file-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-details-text {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.file-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Inline icon button (copy path, etc.) */
|
||||
.icon-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-tertiary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all var(--duration-fast) var(--ease-out);
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.icon-btn svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
FOOTER (matches existing wizard footer)
|
||||
============================================ */
|
||||
.result-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
background: var(--bg-surface);
|
||||
z-index: 2;
|
||||
animation: fadeIn 0.5s var(--ease-out) 0.5s both;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BUTTONS (matching Radix / project Button)
|
||||
============================================ */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 0 16px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
font-family: 'Manrope', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform var(--duration-fast) var(--ease-out),
|
||||
box-shadow var(--duration-normal) var(--ease-out),
|
||||
filter var(--duration-normal) var(--ease-out),
|
||||
background var(--duration-normal) var(--ease-out);
|
||||
letter-spacing: -0.01em;
|
||||
outline: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btn svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Ghost */
|
||||
.btn--ghost {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn--ghost:hover {
|
||||
filter: brightness(0.95);
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.btn--ghost:active {
|
||||
transform: scale(0.96);
|
||||
filter: brightness(0.92);
|
||||
}
|
||||
|
||||
/* Outline */
|
||||
.btn--outline {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
box-shadow: inset 0 0 0 1px var(--border-default);
|
||||
}
|
||||
|
||||
.btn--outline:hover {
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
.btn--outline:active {
|
||||
transform: scale(0.96);
|
||||
filter: brightness(0.92);
|
||||
}
|
||||
|
||||
/* Primary (solid plum) */
|
||||
.btn--primary {
|
||||
background: linear-gradient(180deg, var(--purple-400), var(--purple-600));
|
||||
color: white;
|
||||
background-image: linear-gradient(180deg, hsla(0,0%,100%,0.12) 0%, transparent 100%);
|
||||
background-color: var(--purple-500);
|
||||
box-shadow:
|
||||
inset 0 1px 1px hsla(0,0%,100%,0.2),
|
||||
0 1px 2px rgba(0,0,0,0.1);
|
||||
border-top: 1px solid hsla(0,0%,100%,0.1);
|
||||
}
|
||||
|
||||
.btn--primary:hover {
|
||||
filter: brightness(1.08);
|
||||
box-shadow:
|
||||
inset 0 1px 1px hsla(0,0%,100%,0.2),
|
||||
0 4px 14px var(--accent-shadow-hover);
|
||||
}
|
||||
|
||||
.btn--primary:active {
|
||||
transform: scale(0.96);
|
||||
filter: brightness(0.95);
|
||||
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Success primary (green) */
|
||||
.btn--success {
|
||||
background-color: var(--color-success);
|
||||
background-image: linear-gradient(180deg, hsla(0,0%,100%,0.12) 0%, transparent 100%);
|
||||
color: white;
|
||||
box-shadow:
|
||||
inset 0 1px 1px hsla(0,0%,100%,0.2),
|
||||
0 1px 2px rgba(0,0,0,0.1);
|
||||
border-top: 1px solid hsla(0,0%,100%,0.1);
|
||||
}
|
||||
|
||||
.btn--success:hover {
|
||||
filter: brightness(1.08);
|
||||
box-shadow:
|
||||
inset 0 1px 1px hsla(0,0%,100%,0.2),
|
||||
0 4px 14px rgba(64, 160, 43, 0.3);
|
||||
}
|
||||
|
||||
.btn--success:active {
|
||||
transform: scale(0.96);
|
||||
filter: brightness(0.95);
|
||||
}
|
||||
|
||||
/* Larger button variant */
|
||||
.btn--lg {
|
||||
height: 36px;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ANIMATIONS
|
||||
============================================ */
|
||||
@keyframes fadeSlideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0ms !important;
|
||||
animation-delay: 0ms !important;
|
||||
transition-duration: 0ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE
|
||||
============================================ */
|
||||
@media (max-width: 768px) {
|
||||
.result-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.file-bar {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.result-footer {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer-left, .footer-right {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-right {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.footer-right .btn {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wizard-shell">
|
||||
|
||||
<!-- Stepper bar (for context, same as existing) -->
|
||||
<div class="stepper-bar">
|
||||
<div class="stepper-step stepper-completed">
|
||||
<div class="stepper-indicator">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5L4.5 8.5L9.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<span class="stepper-label">Загрузка файла</span>
|
||||
</div>
|
||||
<div class="stepper-connector"></div>
|
||||
<div class="stepper-step stepper-completed">
|
||||
<div class="stepper-indicator">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5L4.5 8.5L9.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<span class="stepper-label">Удаление тишины</span>
|
||||
</div>
|
||||
<div class="stepper-connector"></div>
|
||||
<div class="stepper-step stepper-completed">
|
||||
<div class="stepper-indicator">
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 6.5L4.5 8.5L9.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</div>
|
||||
<span class="stepper-label">Транскрипция</span>
|
||||
</div>
|
||||
<div class="stepper-connector"></div>
|
||||
<div class="stepper-step stepper-active">
|
||||
<div class="stepper-indicator">4</div>
|
||||
<span class="stepper-label">Рендер</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RESULT STEP -->
|
||||
<div class="result-root">
|
||||
|
||||
<!-- Celebration sparkles -->
|
||||
<div class="sparkles">
|
||||
<div class="sparkle sparkle--green"></div>
|
||||
<div class="sparkle sparkle--purple"></div>
|
||||
<div class="sparkle sparkle--green"></div>
|
||||
<div class="sparkle sparkle--purple"></div>
|
||||
<div class="sparkle sparkle--green"></div>
|
||||
<div class="sparkle sparkle--purple"></div>
|
||||
<div class="sparkle sparkle--green"></div>
|
||||
<div class="sparkle sparkle--purple"></div>
|
||||
<div class="sparkle sparkle--green"></div>
|
||||
<div class="sparkle sparkle--purple"></div>
|
||||
</div>
|
||||
|
||||
<div class="result-content">
|
||||
|
||||
<!-- Success header -->
|
||||
<div class="result-header">
|
||||
<div class="success-badge">
|
||||
<svg viewBox="0 0 14 14" fill="none">
|
||||
<circle cx="7" cy="7" r="6" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M4.5 7.5L6 9L9.5 5.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
Готово
|
||||
</div>
|
||||
<h2 class="result-title">Результат</h2>
|
||||
<p class="result-subtitle">Видео с субтитрами готово к скачиванию</p>
|
||||
</div>
|
||||
|
||||
<!-- Video player -->
|
||||
<div class="video-container">
|
||||
<div class="video-frame">
|
||||
<div class="video-placeholder">
|
||||
<button class="play-btn" aria-label="Воспроизвести">
|
||||
<svg viewBox="0 0 24 24"><polygon points="6,3 20,12 6,21"/></svg>
|
||||
</button>
|
||||
<span class="fake-sub">Пример <em>субтитров</em></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- File info -->
|
||||
<div class="file-bar">
|
||||
<div class="file-meta">
|
||||
<div class="file-icon">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="2" width="20" height="20" rx="3"/>
|
||||
<polygon points="10,8 16,12 10,16" fill="currentColor" stroke="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<span class="file-name">asdasd_captioned.mp4</span>
|
||||
<span class="file-details-text">42.8 MB · MP4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="result-footer">
|
||||
<div class="footer-left">
|
||||
<button class="btn btn--ghost">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="1 4 1 10 7 10"/>
|
||||
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
|
||||
</svg>
|
||||
Перегенерировать
|
||||
</button>
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<button class="btn btn--primary btn--lg">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="7 10 12 15 17 10"/>
|
||||
<line x1="12" y1="15" x2="12" y2="3"/>
|
||||
</svg>
|
||||
Скачать
|
||||
</button>
|
||||
<button class="btn btn--success btn--lg">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
Завершить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user