You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
8.1 KiB
237 lines
8.1 KiB
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
|
|
function BackIcon() {
|
|
return (
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="none"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
width="18"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M10.5 4.5 6 9l4.5 4.5"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.8"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function HistoryIcon() {
|
|
return (
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="none"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
width="18"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M3.75 8.25a5.25 5.25 0 1 1 1.539 3.711"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.6"
|
|
/>
|
|
<path
|
|
d="M3.75 4.5v3.75H7.5"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.6"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function PlayIcon() {
|
|
return (
|
|
<svg
|
|
aria-hidden="true"
|
|
fill="none"
|
|
height="28"
|
|
viewBox="0 0 28 28"
|
|
width="28"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M10 8.75 20 14l-10 5.25V8.75Z" fill="white" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
const metrics = [
|
|
{ label: "marriage applicants", value: "120" },
|
|
{ label: "Successful marriage", value: "120" },
|
|
];
|
|
|
|
const mockVideoDuration = 12;
|
|
|
|
export default function VideoPageTwo() {
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [watchedSeconds, setWatchedSeconds] = useState(0);
|
|
const isCompleted = watchedSeconds >= mockVideoDuration;
|
|
const progressPercent = Math.min(
|
|
(watchedSeconds / mockVideoDuration) * 100,
|
|
100,
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!isPlaying || isCompleted) {
|
|
return;
|
|
}
|
|
|
|
const timer = window.setInterval(() => {
|
|
setWatchedSeconds((currentValue) => {
|
|
const nextValue = Math.min(currentValue + 1, mockVideoDuration);
|
|
|
|
if (nextValue >= mockVideoDuration) {
|
|
setIsPlaying(false);
|
|
}
|
|
|
|
return nextValue;
|
|
});
|
|
}, 1000);
|
|
|
|
return () => window.clearInterval(timer);
|
|
}, [isCompleted, isPlaying]);
|
|
|
|
const handlePlay = () => {
|
|
if (isCompleted) {
|
|
setWatchedSeconds(0);
|
|
}
|
|
|
|
setIsPlaying((currentValue) => !currentValue || isCompleted);
|
|
};
|
|
|
|
return (
|
|
<main className="flex min-h-screen items-center justify-center bg-[#444446] p-2 sm:p-4">
|
|
<section className="relative aspect-[375/813] w-full max-w-[375px] overflow-hidden rounded-[24px] bg-[#FCF8F7] shadow-[0_30px_70px_rgba(0,0,0,0.34)]">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,#FF9BB8_0%,rgba(255,155,184,0.32)_14%,rgba(255,255,255,0)_34%),linear-gradient(180deg,rgba(255,255,255,0.72)_0%,rgba(255,255,255,0.98)_34%,#FCF8F7_100%)]" />
|
|
<div className="absolute inset-0 opacity-40 [background-image:linear-gradient(45deg,rgba(226,201,206,0.28)_25%,transparent_25%),linear-gradient(-45deg,rgba(226,201,206,0.28)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,rgba(226,201,206,0.22)_75%),linear-gradient(-45deg,transparent_75%,rgba(226,201,206,0.22)_75%)] [background-position:0_0,0_8px,8px_-8px,-8px_0] [background-size:16px_16px]" />
|
|
|
|
<div className="relative z-10 flex h-full flex-col px-4 pb-4 pt-5">
|
|
<div className="flex items-center justify-between px-2 text-[#1C1C1E]">
|
|
<span className="text-[14px] font-semibold">9:41</span>
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="block h-[7px] w-[18px] rounded-[3px] border border-current opacity-85" />
|
|
<span className="block h-[7px] w-[7px] rounded-full bg-current opacity-85" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 flex items-center justify-between px-1">
|
|
<Link
|
|
aria-label="Back to rules"
|
|
className="flex h-11 w-11 items-center justify-center rounded-full bg-white text-[#202020] shadow-[0_10px_24px_rgba(0,0,0,0.08)]"
|
|
href="/rules"
|
|
>
|
|
<BackIcon />
|
|
</Link>
|
|
|
|
<h1
|
|
className="text-[20px] font-semibold text-[#2A1D1E]"
|
|
style={{ fontFamily: "Georgia, Times New Roman, serif" }}
|
|
>
|
|
Habib Marriage
|
|
</h1>
|
|
|
|
<button
|
|
aria-label="Open watch history"
|
|
className="flex h-11 w-11 items-center justify-center rounded-full bg-white text-[#202020] shadow-[0_10px_24px_rgba(0,0,0,0.08)]"
|
|
type="button"
|
|
>
|
|
<HistoryIcon />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-[110px] px-1">
|
|
<div className="relative overflow-hidden rounded-[20px] shadow-[0_18px_40px_rgba(0,0,0,0.22)]">
|
|
<Image
|
|
alt="Video preview for Habib Marriage"
|
|
height={420}
|
|
priority
|
|
sizes="(max-width: 375px) 100vw, 320px"
|
|
src="/assets/images/Rectangle 3077.png"
|
|
width={640}
|
|
/>
|
|
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(6,8,14,0.08)_0%,rgba(6,8,14,0.44)_100%)]" />
|
|
<div className="absolute inset-x-0 top-0 h-16 bg-[linear-gradient(180deg,rgba(6,8,14,0.38)_0%,rgba(6,8,14,0)_100%)] px-4 py-3 text-white">
|
|
<div className="flex items-center justify-between text-[11px] font-medium uppercase tracking-[0.16em]">
|
|
<span>Mock video</span>
|
|
<span>{watchedSeconds}s / 12s</span>
|
|
</div>
|
|
</div>
|
|
<div className="absolute inset-x-4 bottom-4">
|
|
<div className="h-1.5 overflow-hidden rounded-full bg-white/30">
|
|
<div
|
|
className="h-full rounded-full bg-[#F04C99] transition-[width] duration-700"
|
|
style={{ width: `${progressPercent}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
aria-label={
|
|
isCompleted
|
|
? "Replay mock video"
|
|
: isPlaying
|
|
? "Pause mock video"
|
|
: "Play mock video"
|
|
}
|
|
className="absolute left-1/2 top-1/2 flex h-20 w-20 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-[#BF2F2F] shadow-[0_18px_35px_rgba(191,47,47,0.45)]"
|
|
onClick={handlePlay}
|
|
type="button"
|
|
>
|
|
<PlayIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="mt-4 px-2 text-center text-[12px] font-medium text-[#6D6268]">
|
|
Watch the full mock video to unlock the next step.
|
|
</p>
|
|
|
|
<div className="mt-[102px] grid grid-cols-2 gap-4 px-4 text-center text-[#242424]">
|
|
{metrics.map((metric) => (
|
|
<div key={metric.label}>
|
|
<p className="text-[20px] font-semibold">{metric.value}</p>
|
|
<p className="mt-2 text-[13px] font-semibold leading-5">
|
|
{metric.label}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-auto space-y-3">
|
|
<button
|
|
className="h-[44px] w-full rounded-[14px] bg-linear-to-r from-[#F04C99] to-[#FF8575] text-[18px] font-semibold text-white shadow-[0_16px_36px_rgba(240,76,153,0.28)]"
|
|
type="button"
|
|
>
|
|
Information recording
|
|
</button>
|
|
|
|
<Link
|
|
aria-disabled={!isCompleted}
|
|
className={`flex h-[44px] items-center justify-center rounded-[14px] text-[18px] font-semibold transition-opacity ${
|
|
isCompleted
|
|
? "bg-[#242424] text-white shadow-[0_14px_30px_rgba(0,0,0,0.18)]"
|
|
: "pointer-events-none bg-[#D9D2D5] text-[#857D82] opacity-80"
|
|
}`}
|
|
href={isCompleted ? "/questions" : "/video-2"}
|
|
tabIndex={isCompleted ? 0 : -1}
|
|
>
|
|
Next
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|