bender/f079e0be-295c-4f8e-a2cb-15b93261f4b4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #4

Merged
bender merged 1 commits from version_3 into main 2026-05-23 02:42:13 +00:00
Conversation 0 Commits 1 Files Changed 1 +33 -7
1 changed files with 33 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/page.tsx
View File

@@ -9,6 +9,9 @@ import { useState } from "react";
export default function ClipToolPage() {
const [videoUrl, setVideoUrl] = useState("");
const [captions, setCaptions] = useState(true);
const [layout, setLayout] = useState("vertical");
const [timeframe, setTimeframe] = useState("30s");
return (
<ThemeProvider
@@ -33,7 +36,7 @@ export default function ClipToolPage() {
<div id="tool-interface" data-section="tool-interface" className="py-20 flex flex-col items-center justify-center min-h-[80vh] px-4 text-center">
<h1 className="text-4xl md:text-5xl font-bold mb-6">ClipGen AI Tool</h1>
<p className="max-w-xl mb-10 opacity-80">Paste your YouTube video URL below to start generating high-impact clips with custom layout and caption settings.</p>
<p className="max-w-xl mb-10 opacity-80">Input your YouTube URL and configure your clipping settings below.</p>
<div className="w-full max-w-lg space-y-6">
<Input
@@ -43,24 +46,47 @@ export default function ClipToolPage() {
ariaLabel="YouTube Video URL"
/>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-left">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-left">
<div className="p-4 rounded-xl border">
<h3 className="font-semibold mb-2">Captions</h3>
<p className="text-sm opacity-70">Enable AI-powered subtitles</p>
<select
value={captions ? "on" : "off"}
onChange={(e) => setCaptions(e.target.value === "on")}
className="w-full bg-transparent border-none focus:ring-0"
>
<option value="on">Enabled</option>
<option value="off">Disabled</option>
</select>
</div>
<div className="p-4 rounded-xl border">
<h3 className="font-semibold mb-2">Layout</h3>
<p className="text-sm opacity-70">Optimize for TikTok/Reels</p>
<select
value={layout}
onChange={(e) => setLayout(e.target.value)}
className="w-full bg-transparent border-none focus:ring-0"
>
<option value="vertical">Vertical (9:16)</option>
<option value="square">Square (1:1)</option>
<option value="horizontal">Horizontal (16:9)</option>
</select>
</div>
<div className="p-4 rounded-xl border">
<h3 className="font-semibold mb-2">Timeframe</h3>
<p className="text-sm opacity-70">Select clip duration</p>
<h3 className="font-semibold mb-2">Time</h3>
<select
value={timeframe}
onChange={(e) => setTimeframe(e.target.value)}
className="w-full bg-transparent border-none focus:ring-0"
>
<option value="30s">30 Seconds</option>
<option value="60s">60 Seconds</option>
<option value="90s">90 Seconds</option>
</select>
</div>
</div>
<ButtonElasticEffect
text="Generate Clips Now"
onClick={() => alert(`Generating clips for: ${videoUrl}`)}
onClick={() => alert(`Generating ${timeframe} ${layout} clips for: ${videoUrl} (Captions: ${captions ? "On" : "Off"})`)}
className="w-full"
/>
</div>