Hugging Face's logo

Spaces:
lachieandmitch
/
scriptforge
Running

App Files Community
scriptforge
File size: 7,175 Bytes 
594be70
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ScriptForge - TikTok Script Writer</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .step-indicator {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .step-active {
            background-color: #6366f1;
            color: white;
        }
        .step-completed {
            background-color: #10b981;
            color: white;
        }
        .step-inactive {
            background-color: #e5e7eb;
            color: #6b7280;
        }
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .textarea-autosize {
            min-height: 100px;
            resize: none;
            overflow-y: hidden;
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <div class="min-h-screen flex flex-col">
        <!-- Header -->
        <header class="bg-white shadow-sm py-4">
            <div class="container mx-auto px-4 flex justify-between items-center">
                <div class="flex items-center">
                    <i class="fas fa-film text-indigo-600 text-2xl mr-3"></i>
                    <h1 class="text-xl font-bold text-gray-800">ScriptForge</h1>
                </div>
                <button id="exportBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md hidden">
                    <i class="fas fa-download mr-2"></i>Export Script
                </button>
            </div>
        </header>

        <!-- Main Content -->
        <main class="flex-grow container mx-auto px-4 py-8">
            <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
                <!-- Progress Steps -->
                <div class="p-6 border-b">
                    <div class="flex justify-between items-center mb-6">
                        <div class="flex items-center">
                            <div id="step1" class="step-indicator step-active">1</div>
                            <div class="h-1 w-16 mx-2 bg-indigo-200"></div>
                            <div id="step2" class="step-indicator step-inactive">2</div>
                            <div class="h-1 w-16 mx-2 bg-gray-200"></div>
                            <div id="step3" class="step-indicator step-inactive">3</div>
                            <div class="h-1 w-16 mx-2 bg-gray-200"></div>
                            <div id="step4" class="step-indicator step-inactive">4</div>
                            <div class="h-1 w-16 mx-2 bg-gray-200"></div>
                            <div id="step5" class="step-indicator step-inactive">5</div>
                        </div>
                        <span id="stepTitle" class="text-sm font-medium text-indigo-600">Define Purpose & Audience</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="progressBar" class="bg-indigo-600 h-2 rounded-full" style="width: 20%"></div>
                    </div>
                </div>

                <!-- Step Content -->
                <div class="p-6">
                    <!-- Step 1: Define Purpose & Audience -->
                    <div id="step1Content" class="fade-in">
                        <h2 class="text-xl font-bold text-gray-800 mb-4">What's your video about?</h2>
                        <p class="text-gray-600 mb-6">Start by defining your video's purpose and target audience. This will help craft a script that resonates.</p>
                        
                        <div class="mb-6">
                            <label class="block text-gray-700 font-medium mb-2">Video Purpose</label>
                            <select id="purposeSelect" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                                <option value="">Select a purpose</option>
                                <option value="educate">Educate/Teach</option>
                                <option value="entertain">Entertain</option>
                                <option value="inspire">Inspire/Motivate</option>
                                <option value="sell">Sell Product/Service</option>
                                <option value="story">Tell a Story</option>
                                <option value="trend">Participate in Trend</option>
                            </select>
                        </div>
                        
                        <div class="mb-6">
                            <label class="block text-gray-700 font-medium mb-2">Target Audience</label>
                            <input id="audienceInput" type="text" placeholder="e.g., Teenagers interested in fashion, Young professionals learning to cook" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        
                        <div class="mb-6">
                            <label class="block text-gray-700 font-medium mb-2">Key Message (What should viewers remember?)</label>
                            <textarea id="messageInput" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 textarea-autosize" placeholder="The one thing you want viewers to take away..."></textarea>
                        </div>
                        
                        <div class="flex justify-end">
                            <button id="nextStep1" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md">
                                Next <i class="fas fa-arrow-right ml-2"></i>
                            </button>
                        </div>
                    </div>

                    <!-- Step 2: Create a Hook -->
                    <div id="step2Content" class="
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=lachieandmitch/scriptforge" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>