Source from bundle
Record Transcribe Revoice

Capture a talking-head clip with camera and microphone, transcribe it with ElevenLabs word-level timestamps, detect immediate doubled words or stutters, render
Костянтин@Latand
Files
Skill
0.9K
Size
35.6 KB
Entrypoint
SKILL.md
Format
folder
Open file
assets/camera-recorder.html.txt

Syntax-highlighted preview of this file as included in the skill package.
Rendered Source
text649 linesFree
assets/camera-recorder.html.txt
1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Studio Recorder</title>
7    <link rel="preconnect" href="https://fonts.googleapis.com" />
8    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet" />
10    <style>
11      :root {
12        --bg: #0a0a0c;
13        --surface: #111114;
14        --surface-raised: #18181c;
15        --surface-overlay: rgba(255, 255, 255, 0.04);
16        --border: rgba(255, 255, 255, 0.06);
17        --border-strong: rgba(255, 255, 255, 0.12);
18        --text: #e8e8ed;
19        --text-dim: #6e6e7a;
20        --text-muted: #44444f;
21        --rec: #ff2d2d;
22        --rec-glow: rgba(255, 45, 45, 0.35);
23        --rec-soft: rgba(255, 45, 45, 0.08);
24        --teal: #2dd4bf;
25        --teal-dim: rgba(45, 212, 191, 0.12);
26        --amber: #fbbf24;
27      }
28 
29      @font-face {
30        font-family: 'Tabular';
31        src: local('DM Mono'), local('JetBrains Mono'), local('SF Mono');
32      }
33 
34      * { box-sizing: border-box; margin: 0; }
35 
36      body {
37        min-height: 100vh;
38        color: var(--text);
39        font-family: 'DM Sans', sans-serif;
40        background: var(--bg);
41        overflow-x: hidden;
42      }
43 
44      /* Grain overlay */
45      body::before {
46        content: '';
47        position: fixed;
48        inset: 0;
49        z-index: 9999;
50        pointer-events: none;
51        opacity: 0.025;
52        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
53        background-size: 128px;
54      }
55 
56      /* Ambient glow behind video */
57      .ambient-glow {
58        position: fixed;
59        top: -120px;
60        left: 50%;
61        transform: translateX(-50%);
62        width: 700px;
63        height: 400px;
64        background: radial-gradient(ellipse, rgba(255, 45, 45, 0.06) 0%, transparent 70%);
65        pointer-events: none;
66        transition: opacity 0.6s ease;
67        opacity: 0;
68      }
69 
70      .ambient-glow.active {
71        opacity: 1;
72      }
73 
74      .shell {
75        width: min(1320px, calc(100vw - 48px));
76        margin: 0 auto;
77        padding: 32px 0 64px;
78        display: grid;
79        gap: 20px;
80      }
81 
82      /* ── Top Bar ── */
83      .topbar {
84        display: flex;
85        align-items: center;
86        justify-content: space-between;
87        gap: 16px;
88        padding: 0 4px;
89      }
90 
91      .topbar-brand {
92        display: flex;
93        align-items: center;
94        gap: 14px;
95      }
96 
97      .topbar-brand .logo-mark {
98        width: 36px;
99        height: 36px;
100        border-radius: 10px;
101        background: linear-gradient(135deg, var(--rec), #ff6b4a);
102        display: grid;
103        place-items: center;
104        box-shadow: 0 0 24px var(--rec-glow);
105      }
106 
107      .topbar-brand .logo-mark svg {
108        width: 18px;
109        height: 18px;
110        fill: #fff;
111      }
112 
113      .topbar-brand h1 {
114        font-family: 'Syne', sans-serif;
115        font-size: 1.35rem;
116        font-weight: 800;
117        letter-spacing: -0.03em;
118        color: var(--text);
119      }
120 
121      .topbar-brand h1 span {
122        color: var(--text-dim);
123        font-weight: 600;
124      }
125 
126      .status-badge {
127        display: inline-flex;
128        align-items: center;
129        gap: 8px;
130        padding: 8px 14px;
131        border-radius: 8px;
132        background: var(--surface);
133        border: 1px solid var(--border);
134        font-size: 0.8rem;
135        font-weight: 500;
136        letter-spacing: 0.06em;
137        text-transform: uppercase;
138        color: var(--text-dim);
139        transition: all 0.3s ease;
140      }
141 
142      .status-badge.live {
143        background: var(--rec-soft);
144        border-color: rgba(255, 45, 45, 0.2);
145        color: var(--rec);
146      }
147 
148      .status-indicator {
149        width: 8px;
150        height: 8px;
151        border-radius: 50%;
152        background: var(--text-muted);
153        transition: background 0.3s ease;
154      }
155 
156      .status-badge.live .status-indicator {
157        background: var(--rec);
158        box-shadow: 0 0 8px var(--rec-glow);
159        animation: blink 1.2s infinite;
160      }
161 
162      /* ── Main Grid ── */
163      .main-grid {
164        display: grid;
165        grid-template-columns: 1fr 340px;
166        gap: 20px;
167      }
168 
169      /* ── Monitor Panel ── */
170      .monitor {
171        border-radius: 16px;
172        background: var(--surface);
173        border: 1px solid var(--border);
174        overflow: hidden;
175        display: flex;
176        flex-direction: column;
177      }
178 
179      .monitor-chrome {
180        display: flex;
181        align-items: center;
182        justify-content: space-between;
183        padding: 12px 18px;
184        border-bottom: 1px solid var(--border);
185        background: var(--surface-overlay);
186      }
187 
188      .monitor-chrome .label {
189        font-size: 0.75rem;
190        font-weight: 600;
191        letter-spacing: 0.08em;
192        text-transform: uppercase;
193        color: var(--text-dim);
194      }
195 
196      .monitor-chrome .specs {
197        display: flex;
198        gap: 12px;
199      }
200 
201      .monitor-chrome .spec {
202        font-size: 0.72rem;
203        color: var(--text-muted);
204        font-family: 'DM Mono', 'JetBrains Mono', 'SF Mono', monospace;
205      }
206 
207      .viewport {
208        position: relative;
209        flex: 1;
210        padding: 12px;
211      }
212 
213      .viewport video {
214        width: 100%;
215        display: block;
216        aspect-ratio: 16 / 9;
217        object-fit: cover;
218        background: #000;
219        border-radius: 8px;
220        border: 1px solid rgba(255, 255, 255, 0.03);
221      }
222 
223      .viewport.recording video {
224        border-color: rgba(255, 45, 45, 0.3);
225        box-shadow: 0 0 0 1px rgba(255, 45, 45, 0.15), 0 0 40px rgba(255, 45, 45, 0.06);
226      }
227 
228      /* Floating REC badge */
229      .rec-badge {
230        position: absolute;
231        top: 24px;
232        left: 24px;
233        display: inline-flex;
234        align-items: center;
235        gap: 8px;
236        padding: 6px 12px;
237        border-radius: 6px;
238        background: rgba(0, 0, 0, 0.7);
239        backdrop-filter: blur(12px);
240        border: 1px solid rgba(255, 45, 45, 0.25);
241        font-family: 'DM Mono', 'JetBrains Mono', 'SF Mono', monospace;
242        font-size: 0.78rem;
243        font-weight: 600;
244        color: var(--rec);
245        letter-spacing: 0.04em;
246        opacity: 0;
247        transform: translateY(-4px);
248        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
249      }
250 
251      .rec-badge.visible {
252        opacity: 1;
253        transform: translateY(0);
254      }
255 
256      .rec-badge .dot {
257        width: 8px;
258        height: 8px;
259        border-radius: 50%;
260        background: var(--rec);
261        animation: blink 1.2s infinite;
262      }
263 
264      /* Timer strip under video */
265      .timer-strip {
266        display: flex;
267        align-items: center;
268        justify-content: space-between;
269        padding: 14px 18px;
270        border-top: 1px solid var(--border);
271        background: var(--surface-overlay);
272      }
273 
274      .timer-display {
275        font-family: 'Syne', sans-serif;
276        font-size: 2rem;
277        font-weight: 800;
278        letter-spacing: -0.04em;
279        color: var(--text);
280        line-height: 1;
281        transition: color 0.3s ease;
282      }
283 
284      .timer-display.active {
285        color: var(--rec);
286      }
287 
288      .timer-state {
289        font-size: 0.78rem;
290        color: var(--text-muted);
291        text-align: right;
292        line-height: 1.4;
293      }
294 
295      /* ── Sidebar ── */
296      .sidebar {
297        display: flex;
298        flex-direction: column;
299        gap: 16px;
300      }
301 
302      .card {
303        border-radius: 16px;
304        background: var(--surface);
305        border: 1px solid var(--border);
306        overflow: hidden;
307      }
308 
309      .card-header {
310        padding: 14px 16px 12px;
311        border-bottom: 1px solid var(--border);
312        background: var(--surface-overlay);
313      }
314 
315      .card-header h3 {
316        font-family: 'Syne', sans-serif;
317        font-size: 0.85rem;
318        font-weight: 700;
319        letter-spacing: 0.02em;
320        color: var(--text);
321      }
322 
323      .card-body {
324        padding: 14px 16px 16px;
325        display: grid;
326        gap: 12px;
327      }
328 
329      /* Inputs */
330      .field {
331        display: grid;
332        gap: 5px;
333      }
334 
335      .field label {
336        font-size: 0.72rem;
337        font-weight: 600;
338        letter-spacing: 0.06em;
339        text-transform: uppercase;
340        color: var(--text-muted);
341      }
342 
343      select {
344        width: 100%;
345        padding: 10px 12px;
346        border-radius: 8px;
347        border: 1px solid var(--border);
348        background: var(--bg);
349        color: var(--text);
350        font: inherit;
351        font-size: 0.88rem;
352        appearance: none;
353        background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e7a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
354        background-repeat: no-repeat;
355        background-position: right 12px center;
356        cursor: pointer;
357        transition: border-color 0.15s ease;
358      }
359 
360      select:focus {
361        outline: none;
362        border-color: var(--border-strong);
363      }
364 
365      /* Toggle row */
366      .toggle-row {
367        display: flex;
368        align-items: center;
369        justify-content: space-between;
370        gap: 12px;
371        padding: 10px 12px;
372        border-radius: 8px;
373        background: var(--surface-overlay);
374        border: 1px solid var(--border);
375      }
376 
377      .toggle-row .info strong {
378        display: block;
379        font-size: 0.85rem;
380        font-weight: 500;
381        color: var(--text);
382      }
383 
384      .toggle-row .info span {
385        display: block;
386        margin-top: 2px;
387        font-size: 0.75rem;
388        color: var(--text-muted);
389        line-height: 1.35;
390      }
391 
392      /* Custom toggle switch */
393      .switch {
394        position: relative;
395        width: 40px;
396        height: 22px;
397        flex-shrink: 0;
398      }
399 
400      .switch input {
401        opacity: 0;
402        width: 0;
403        height: 0;
404      }
405 
406      .switch .slider {
407        position: absolute;
408        inset: 0;
409        border-radius: 999px;
410        background: var(--text-muted);
411        cursor: pointer;
412        transition: background 0.2s ease;
413      }
414 
415      .switch .slider::before {
416        content: '';
417        position: absolute;
418        top: 3px;
419        left: 3px;
420        width: 16px;
421        height: 16px;
422        border-radius: 50%;
423        background: var(--bg);
424        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
425      }
426 
427      .switch input:checked + .slider {
428        background: var(--teal);
429      }
430 
431      .switch input:checked + .slider::before {
432        transform: translateX(18px);
433      }
434 
435      /* Buttons */
436      button {
437        font: inherit;
438        border: 0;
439        cursor: pointer;
440        transition: all 0.15s ease;
441      }
442 
443      button:disabled {
444        cursor: not-allowed;
445        opacity: 0.3;
446      }
447 
448      .btn-row {
449        display: grid;
450        grid-template-columns: 1fr 1fr;
451        gap: 8px;
452      }
453 
454      .btn-rec {
455        grid-column: 1 / -1;
456        display: flex;
457        align-items: center;
458        justify-content: center;
459        gap: 10px;
460        padding: 14px;
461        border-radius: 10px;
462        background: linear-gradient(135deg, #e02020, #ff4040);
463        color: #fff;
464        font-weight: 700;
465        font-size: 0.9rem;
466        letter-spacing: 0.02em;
467        box-shadow: 0 4px 20px var(--rec-glow);
468      }
469 
470      .btn-rec:hover:enabled {
471        transform: translateY(-1px);
472        box-shadow: 0 8px 30px var(--rec-glow);
473      }
474 
475      .btn-rec:active:enabled {
476        transform: translateY(0);
477      }
478 
479      .btn-rec .rec-dot {
480        width: 10px;
481        height: 10px;
482        border-radius: 50%;
483        background: #fff;
484        opacity: 0.9;
485      }
486 
487      .btn-stop {
488        grid-column: 1 / -1;
489        padding: 14px;
490        border-radius: 10px;
491        background: var(--rec-soft);
492        color: var(--rec);
493        font-weight: 700;
494        font-size: 0.9rem;
495        border: 1px solid rgba(255, 45, 45, 0.15);
496      }
497 
498      .btn-stop:hover:enabled {
499        background: rgba(255, 45, 45, 0.12);
500      }
501 
502      .btn-ghost {
503        padding: 10px 14px;
504        border-radius: 8px;
505        background: var(--surface-overlay);
506        color: var(--text-dim);
507        font-weight: 500;
508        font-size: 0.82rem;
509        border: 1px solid var(--border);
510      }
511 
512      .btn-ghost:hover:enabled {
513        background: rgba(255, 255, 255, 0.06);
514        color: var(--text);
515        border-color: var(--border-strong);
516      }
517 
518      /* Source mode tabs */
519      .mode-tabs {
520        display: grid;
521        grid-template-columns: 1fr 1fr;
522        gap: 4px;
523        padding: 4px;
524        border-radius: 10px;
525        background: var(--bg);
526        border: 1px solid var(--border);
527      }
528 
529      .mode-tab {
530        padding: 9px 12px;
531        border-radius: 7px;
532        background: transparent;
533        color: var(--text-dim);
534        font-weight: 600;
535        font-size: 0.82rem;
536        text-align: center;
537        border: none;
538        transition: all 0.15s ease;
539      }
540 
541      .mode-tab:hover:not(.active) {
542        color: var(--text);
543        background: var(--surface-overlay);
544      }
545 
546      .mode-tab.active {
547        background: var(--surface-raised);
548        color: var(--text);
549        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
550      }
551 
552      .mode-tab .tab-icon {
553        display: inline-block;
554        margin-right: 5px;
555        font-size: 0.9em;
556        vertical-align: -1px;
557      }
558 
559      /* Screen-specific controls */
560      .screen-controls {
561        display: none;
562      }
563 
564      .screen-controls.visible {
565        display: grid;
566        gap: 12px;
567      }
568 
569      .camera-controls.hidden {
570        display: none;
571      }
572 
573      .screen-hint {
574        padding: 10px 12px;
575        border-radius: 8px;
576        background: var(--teal-dim);
577        border: 1px solid rgba(45, 212, 191, 0.15);
578        font-size: 0.78rem;
579        color: var(--teal);
580        line-height: 1.45;
581      }
582 
583      /* Video wrapper for crop alignment */
584      .video-wrap {
585        position: relative;
586      }
587 
588      /* Crop overlay */
589      .crop-layer {
590        position: absolute;
591        inset: 0;
592        border-radius: 8px;
593        cursor: crosshair;
594        z-index: 10;
595        display: none;
596      }
597 
598      .crop-layer.active {
599        display: block;
600      }
601 
602      .crop-box {
603        position: absolute;
604        border: 2px solid var(--teal);
605        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
606        border-radius: 4px;
607        pointer-events: none;
608        display: none;
609      }
610 
611      .crop-box.visible {
612        display: block;
613      }
614 
615      .crop-box .crop-size {
616        position: absolute;
617        bottom: -24px;
618        left: 50%;
619        transform: translateX(-50%);
620        font-family: 'DM Mono', 'JetBrains Mono', 'SF Mono', monospace;
621        font-size: 0.68rem;
622        color: var(--teal);
623        background: rgba(0, 0, 0, 0.7);
624        padding: 2px 8px;
625        border-radius: 4px;
626        white-space: nowrap;
627      }
628 
629      .btn-teal {
630        padding: 10px 14px;
631        border-radius: 8px;
632        background: var(--teal-dim);
633        color: var(--teal);
634        font-weight: 600;
635        font-size: 0.82rem;
636        border: 1px solid rgba(45, 212, 191, 0.15);
637      }
638 
639      .btn-teal:hover:enabled {
640        background: rgba(45, 212, 191, 0.18);
641      }
642 
643      .folder-info {
644        font-size: 0.75rem;
645        color: var(--text-muted);
646        padding: 0 2px;
647      }
648 
649      /* Tips *
Preparing the source view

Record Transcribe Revoice

assets/camera-recorder.html.txt
