https://jieshuo.cn/video-generation/index.html

1
2<!DOCTYPE html>
3<html lang="en">
4  <head>
5    <meta charset="UTF-8" />
6    <meta name="robots" content="noindex, nofollow" />
7    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8    <title>AI解说大师 | 视频脚本编辑器</title>
9    

9<script src="https://cdn.tailwindcss.com"></script>

9
10    <style>
11      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
12
13      :root {
14        --primary: 99 102 241;
15        --bg-deep: 9 9 11;
16      }
17
18      body {
19        font-family: 'Inter', sans-serif;
20      }
21
22      .font-mono {
23        font-family: 'JetBrains Mono', monospace;
24      }
25
26      /* High-Visibility Custom Scrollbar */
27
28      ::-webkit-scrollbar {
29        width: 10px;
30        height: 10px;
31      }
32
33      ::-webkit-scrollbar-track {
34        background: #18181b; /* Zinc-900 */
35        border-radius: 10px;
36      }
37
38      ::-webkit-scrollbar-thumb {
39        background: #d4d4d8; /* Zinc-300 - High contrast against dark background */
40        border-radius: 10px;
41        border: 2px solid #18181b; /* Creates a visual gap inside the track */
42        transition: background 0.2s;
43      }
44
45      ::-webkit-scrollbar-thumb:hover {
46        background: #6366f1; /* Indigo-500 - Vibrant highlight on hover */
47      }
48
49      ::-webkit-scrollbar-thumb:active {
50        background: #818cf8; /* Indigo-400 */
51      }
52
53      /* Range Slider Reset */
54
55      input[type=range] {
56        -webkit-appearance: none; 
57        background: transparent; 
58      }
59
60      input[type=range]::-webkit-slider-thumb {
61        -webkit-appearance: none;
62      }
63
64      input[type=range]:focus {
65        outline: none;
66      }
67
68      /* Glassmorphism utility */
69
70      .glass {
71        background: rgba(24, 24, 27, 0.7);
72        backdrop-filter: blur(12px);
73        -webkit-backdrop-filter: blur(12px);
74      }
75
76      /* Animations */
77
78      @keyframes float {
79        0% { transform: translateY(0px); }
80        50% { transform: translateY(-10px); }
81        100% { transform: translateY(0px); }
82      }
83
84      .animate-float {
85        animation: float 6s ease-in-out infinite;
86      }
87
88      .glow-primary {
89        box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
90      }
91    </style>
92
93  

93<script type="importmap">
94{
95  "imports": {
96    "react/": "https://aistudiocdn.com/react@^19.2.1/",
97    "react": "https://aistudiocdn.com/react@^19.2.1",
98    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.1/",
99    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0"
100  }
101}
102</script>

102
103  

103<script type="module" crossorigin src="/video-generation/assets/index-ClxaqeoW.js"></script>

103
104</head>
105  <body class="bg-zinc-950 text-zinc-100 antialiased h-screen overflow-hidden selection:bg-indigo-500/30">
106    <div id="root" class="h-full w-full"></div>
107</body>
108</html>