Video editor
Simple edit video
GAM Game
AI-generated
Checked
▶ Preview
Published 18 Sep 2026 · Created 18 Sep 2026
PROOF CARD
Video editor
@NDtech · AI-generated · Chatgpt · 9/10 checks
AI got this wrong. It didn't understand if it gonna be in veu,react or html&css
- ✓ README
- ✓ Files or snippet
- ✓ Security scan ran
- ✓ Checked — virus/secrets clean
- ✓ AI tool named
- ✓ AI workflow note
- — Human contribution stated
- ✓ Original (no parent)
- ✓ Live preview
- ✓ Published in public record
CAPABILITIES DEMONSTRATED
Based on this build, not self-reported. Select a skill to find matching builders.
SHIP READINESS — PRECISE CHECKS
- ✓ Scan completed
- — No test files detected
- ✓ No known-vulnerable dependencies listed
- ✓ No secret-shaped hits in the scan report
- — Maintenance history: 0 stored versions, 1 platform event
These are precise checks on this object. BlaqVibes does not guarantee this app is secure.
PROJECT EVIDENCE
Creator identityAvailable — @NDtech
Project filesAvailable — snippet inline
READMEAvailable
Live previewAvailable — runs sandboxed
Security scanChecked — virus clean, no secrets
Project historyAvailable — 1 event
ReviewsNot available — none yet
StarsNot available — no stars yet
Remix lineageAvailable — original project
Build methodAvailable — AI-generated · Chatgpt
BUILD METHOD
AI-generated — Substantially produced from an AI workflow using Chatgpt. · Tool: Chatgpt
AI-generated — AI is a tool here, not the author. Provenance is transparent.
PROJECT HISTORY — WHAT CHANGED
Sep 18 First version published
NEXT ACTIONS
README — REQUIRED FOR EVERY PROJECT
🎬 Video Editor — Static App
A lightweight, browser-based video editor built with pure HTML, CSS, and JavaScript. No frameworks, no installs, no terminal needed!
📁 Folder Structure
video-editor/ ├── index.html ├── style.css └── app.js
🚀 How to Run
- Download or clone the project
- Open the folder
- Double-click index.html
- It opens directly in your browser ✅
No installation required!
✨ Features
| Feature | Status |
|---|---|
| 📁 Upload Video | ✅ |
| ▶️ Play / Pause | ✅ |
| ⏮ Restart | ✅ |
| 🔇 Mute / Unmute | ✅ |
| 🔊 Volume Control | ✅ |
| ⚡ Playback Speed | ✅ |
| 🎨 7 Video Filters | ✅ |
| ⏱️ Seekable Timeline | ✅ |
| 📸 Screenshot & Save | ✅ |
| ⬇️ Export / Download | ✅ |
🎨 Available Filters
- None
- Grayscale
- Sepia
- Brightness
- Contrast
- Blur
- Invert
🛠️ Built With
- HTML5
- CSS3
- Vanilla JavaScript
- Canvas API (for screenshots)
📌 Notes
- No backend required
- Works fully offline
- Compatible with all modern browsers (Chrome, Firefox, Edge, Safari)
📄 License
MIT License — Free to use and modify.
FILE TREE
No file tree — this is a snippet. See Code tab.
Click any file to preview (200KB max). Full ZIP has everything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video Editor</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- HEADER -->
<header class="app-header">
<h1>🎬 Video Editor</h1>
<label class="upload-btn">
Upload Video
<input type="file" id="fileInput" accept="video/*" hidden />
</label>
</header>
<!-- MAIN LAYOUT -->
<div class="editor-layout">
<!-- SIDEBAR -->
<aside class="sidebar">
<h3>🎨 Filters</h3>
<div class="filter-list">
<button class="filter-btn active" data-filter="none">None</button>
<button class="filter-btn" data-filter="grayscale(100%)">Grayscale</button>
<button class="filter-btn" data-filter="sepia(100%)">Sepia</button>
<button class="filter-btn" data-filter="brightness(150%)">Brightness</button>
<button class="filter-btn" data-filter="contrast(200%)">Contrast</button>
<button class="filter-btn" data-filter="blur(2px)">Blur</button>
<button class="filter-btn" data-filter="invert(100%)">Invert</button>
</div>
<h3>🔊 Volume</h3>
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="1" class="volume-slider" />
<p class="volume-label" id="volumeLabel">100%</p>
<h3>⚡ Speed</h3>
<div class="speed-buttons">
<button class="speed-btn" data-speed="0.5">0.5x</button>
<button class="speed-btn active" data-speed="1">1x</button>
<button class="speed-btn" data-speed="1.5">1.5x</button>
<button class="speed-btn" data-speed="2">2x</button>
</div>
</aside>
<!-- MAIN AREA -->
<main class="main-area">
<!-- VIDEO PLAYER -->
<div class="video-player">
<video id="video" class="video-element" style="display:none;"></video>
<div class="video-placeholder" id="placeholder">
<span>🎬</span>
<p>Upload a video to get started</p>
</div>
</div>
<!-- TOOLBAR -->
<div class="toolbar">
<button class="tool-btn" id="restartBtn" disabled>⏮ Restart</button>
<button class="tool-btn play-btn" id="playBtn" disabled>▶ Play</button>
<button class="tool-btn" id="muteBtn" disabled>🔇 Mute</button>
<button class="tool-btn" id="screenshotBtn" disabled>📸 Screenshot</button>
<button class="tool-btn export-btn" id="exportBtn" disabled>⬇️ Export</button>
</div>
<!-- TIMELINE -->
<div class="timeline-wrapper">
<span class="time-label" id="currentTimeLabel">0:00</span>
<div class="timeline-bar" id="timelineBar">
<div class="timeline-progress" id="timelineProgress">
<div class="timeline-thumb"></div>
</div>
</div>
<span class="time-label" id="durationLabel">0:00</span>
</div>
</main>
</div>
<!-- SCREENSHOT PREVIEW -->
<canvas id="screenshotCanvas" style="display:none;"></canvas>
<script src="app.js"></script>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #0f0f0f;
color: #fff;
font-family: 'Segoe UI', sans-serif;
min-height: 100vh;
}
/* HEADER */
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 28px;
background: #1a1a2e;
border-bottom: 2px solid #e94560;
}
.app-header h1 {
font-size: 1.5rem;
color: #e94560;
}
.upload-btn {
background: #e94560;
color: #fff;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: background 0.2s;
}
.upload-btn:hover {
background: #c73652;
}
/* LAYOUT */
.editor-layout {
display: flex;
min-height: calc(100vh - 60px);
}
/* SIDEBAR */
.sidebar {
width: 200px;
background: #16213e;
padding: 20px 14px;
display: flex;
flex-direction: column;
gap: 12px;
border-right: 1px solid #2a2a4a;
}
.sidebar h3 {
font-size: 0.85rem;
color: #aaa;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.filter-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.filter-btn {
background: #1e2a45;
color: #ccc;
border: 1px solid #2a3a5e;
border-radius: 6px;
padding: 7px 10px;
cursor: pointer;
text-align: left;
font-size: 0.85rem;
transition: all 0.2s;
}
.filter-btn:hover {
background: #2a3a5e;
color: #fff;
}
.filter-btn.active {
background: #e94560;
border-color: #e94560;
color: #fff;
}
.volume-slider {
width: 100%;
accent-color: #e94560;
}
.volume-label {
font-size: 0.8rem;
color: #aaa;
text-align: center;
}
.speed-buttons {
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.speed-btn {
background: #1e2a45;
color: #ccc;
border: 1px solid #2a3a5e;
border-radius: 6px;
padding: 5px 10px;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.2s;
}
.speed-btn:hover,
.speed-btn.active {
background: #e94560;
color: #fff;
border-color: #e94560;
}
/* MAIN AREA */
.main-area {
flex: 1;
display: flex;
flex-direction: column;
padding: 20px;
gap: 16px;
}
/* VIDEO PLAYER */
.video-player {
flex: 1;
background: #000;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
min-height: 380px;
border: 2px solid #1e2a45;
}
.video-element {
width: 100%;
max-height: 420px;
object-fit: contain;
}
.video-placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
color: #555;
}
.video-placeholder span {
font-size: 4rem;
}
.video-placeholder p {
font-size: 1rem;
}
/* TOOLBAR */
.toolbar {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
.tool-btn {
background: #1e2a45;
color: #ccc;
border: 1px solid #2a3a5e;
border-radius: 8px;
padding: 10px 18px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s;
}
.tool-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.tool-btn:not(:disabled):hover {
background: #2a3a5e;
color: #fff;
}
.play-btn {
background: #e94560;
border-color: #e94560;
color: #fff;
font-weight: bold;
padding: 10px 30px;
}
.play-btn:not(:disabled):hover {
background: #c73652 !important;
}
.export-btn {
background: #27ae60;
border-color: #27ae60;
color: #fff;
}
.export-btn:not(:disabled):hover {
background: #1e8449 !important;
}
/* TIMELINE */
.timeline-wrapper {
display: flex;
align-items: center;
gap: 12px;
padding: 0 4px;
}
.time-label {
font-size: 0.8rem;
color: #aaa;
min-width: 40px;
text-align: center;
}
.timeline-bar {
flex: 1;
height: 8px;
background: #2a2a4a;
border-radius: 10px;
cursor: pointer;
position: relative;
}
.timeline-progress {
height: 100%;
background: #e94560;
border-radius: 10px;
position: relative;
width: 0%;
transition: width 0.1s linear;
}
.timeline-thumb {
width: 16px;
height: 16px;
background: #fff;
border-radius: 50%;
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
box-shadow: 0 0 6px rgba(233, 69, 96, 0.8);
}Ask Nolo — assistant, not author
Compare features side-by-side. You decide what to build.
✓ Checked — Virus-scanned clean · no leaked secrets · dependencies checked. What does this mean?
PROJECT DETAILS
DOWNLOAD
AI PROMPT — secondary detail
Create a Video Editor web app using React and Vite (npm run dev). It should have:
- Upload a video file
- Play / Pause / Restart buttons
- Volume control slider
- Playback speed buttons (0.5x, 1x, 1.5x, 2x)
- 7 Video filters (None, Grayscale, Sepia, Brightness, Contrast, Blur, Invert)
- Seekable timeline progress bar
- Dark themed modern UI
Split into components: VideoPlayer, Toolbar, Timeline, Sidebar.
Give me all files including package.json and vite.config.js
⑂ FORKS — Family tree → · PRs (0) →
No remixes yet.
HOW TO ACCESS
- Read README
- Explore Files
- Check Evidence
- Remix or Download
