Hugging Face's logo

Spaces:
DenisT
/
brain-rot-tok
Sleeping

App Files Community
DenisT commited on
Commit
5bab31c
·
1 Parent(s): 6fa32c7

modified css and folder creation if needed

Browse files
Files changed (7) hide show
  1. static/basic.html +0 -35
  2. static/index.html +108 -9
  3. static/minecraft.html +0 -37
  4. static/scripts.js +34 -0
  5. static/styles.css +130 -8
  6. static/subway.html +0 -37
  7. static/video_cutter.html +0 -29
static/basic.html DELETED
@@ -1,35 +0,0 @@
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>BASIC</title>
7
- </head>
8
- <body>
9
- <h1>BASIC</h1>
10
- <div>
11
- <p>What it can do:</p>
12
- <p>Provide a basic functionality.</p>
13
- </div>
14
- <form action="/basic" method="post" enctype="multipart/form-data">
15
- <label for="video">Video:</label><br />
16
- <input type="file" id="video" name="video" /><br />
17
- <label for="color">Color:</label><br />
18
- <input type="text" id="color" name="color" /><br />
19
- <label for="size">Size:</label><br />
20
- <input type="number" id="size" name="size" /><br />
21
- <label for="font">Font:</label><br />
22
- <input type="text" id="font" name="font" /><br />
23
- <label for="credit">Credit:</label><br />
24
- <input type="text" id="credit" name="credit" /><br />
25
- <label for="credit_size">Credit Size:</label><br />
26
- <input
27
- type="number"
28
- id="credit_size"
29
- name="credit_size"
30
- /><br /><br />
31
- <input type="submit" value="Submit" />
32
- </form>
33
- <a href="/">Go back to index</a>
34
- </body>
35
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
static/index.html CHANGED
@@ -3,16 +3,115 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Home</title>
7
- <link rel="stylesheet" href="styles.css" />
 
8
  </head>
9
  <body>
10
- <h1>BainRotTok</h1>
11
- <ul>
12
- <li><a href="basic.html">BASIC</a></li>
13
- <li><a href="subway.html">SUBWAY</a></li>
14
- <li><a href="minecraft.html">MINECRAFT</a></li>
15
- <li><a href="video_cutter.html">VIDEO CUTTER</a></li>
16
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  </body>
18
  </html>
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Index</title>
7
+ <link rel="stylesheet" href="./styles.css" />
8
+ <script src="./scripts.js" defer></script>
9
  </head>
10
  <body>
11
+ <h1>BrainRotTok</h1>
12
+ <div class="form-buttons">
13
+ <ul>
14
+ <li><button class="show-form" data-form-id="basic-form">BASIC</button></li>
15
+ <li><button class="show-form" data-form-id="subway-form">SUBWAY</button></li>
16
+ <li>
17
+ <button class="show-form" data-form-id="minecraft-form">MINECRAFT</button>
18
+ </li>
19
+ <li>
20
+ <button class="show-form" data-form-id="video-cutter-form">VIDEO CUTTER</button>
21
+ </li>
22
+ </ul>
23
+ </div>
24
+ <div id="forms-container">
25
+ <form
26
+ id="basic-form"
27
+ class="hidden form-container"
28
+ action="/basic"
29
+ method="post"
30
+ enctype="multipart/form-data"
31
+ >
32
+ <h2 class="form-title">BASIC</h2>
33
+ <p>Generate subtitles for a video.</p>
34
+ <label for="video">Video:</label>
35
+ <input type="file" id="video" name="video" />
36
+ <label for="color">Color:</label>
37
+ <input type="text" id="color" name="color" />
38
+ <label for="size">Size:</label>
39
+ <input type="number" id="size" name="size" />
40
+ <label for="font">Font:</label>
41
+ <input type="text" id="font" name="font" />
42
+ <label for="credit">Credit:</label>
43
+ <input type="text" id="credit" name="credit" />
44
+ <label for="credit_size">Credit Size:</label>
45
+ <input type="number" id="credit_size" name="credit_size" />
46
+ <button type="submit">Submit</button>
47
+ </form>
48
+ <form
49
+ id="subway-form"
50
+ class="hidden"
51
+ action="/subway"
52
+ method="post"
53
+ enctype="multipart/form-data"
54
+ >
55
+ <h2 class="form-title">SUBWAY</h2>
56
+ <p>Merge a top and bottom video together with subtitles. The top video will have no sound, while the bottom video will have its subtitles generated.</p>
57
+ <label for="top_video">Top Video:</label>
58
+ <input type="file" id="top_video" name="top_video" />
59
+ <label for="bottom_video">Bottom Video:</label>
60
+ <input type="file" id="bottom_video" name="bottom_video" />
61
+ <label for="color">Color:</label>
62
+ <input type="text" id="color" name="color" />
63
+ <label for="size">Size:</label>
64
+ <input type="number" id="size" name="size" />
65
+ <label for="font">Font:</label>
66
+ <input type="text" id="font" name="font" />
67
+ <label for="credit">Credit:</label>
68
+ <input type="text" id="credit" name="credit" />
69
+ <label for="credit_size">Credit Size:</label>
70
+ <input type="number" id="credit_size" name="credit_size" />
71
+ <button type="submit">Submit</button>
72
+ </form>
73
+ <form
74
+ id="minecraft-form"
75
+ class="hidden"
76
+ action="/minecraft"
77
+ method="post"
78
+ enctype="multipart/form-data"
79
+ >
80
+ <h2 class="form-title">MINECRAFT</h2>
81
+ <p> A background video playing while a script is being read by an AI voice with subtitles.</p>
82
+ <label for="video">Video:</label>
83
+ <input type="file" id="video" name="video" />
84
+ <label for="subtitles">Subtitles:</label>
85
+ <input type="text" id="subtitles" name="subtitles" />
86
+ <label for="color">Color:</label>
87
+ <input type="text" id="color" name="color" />
88
+ <label for="size">Size:</label>
89
+ <input type="number" id="size" name="size" />
90
+ <label for="font">Font:</label>
91
+ <input type="text" id="font" name="font" />
92
+ <label for="credit">Credit:</label>
93
+ <input type="text" id="credit" name="credit" />
94
+ <label for="credit_size">Credit Size:</label>
95
+ <input type="number" id="credit_size" name="credit_size" />
96
+ <button type="submit">Submit</button>
97
+ </form>
98
+ <form
99
+ id="video-cutter-form"
100
+ class="hidden"
101
+ action="/video_cutter"
102
+ method="post"
103
+ enctype="multipart/form-data"
104
+ >
105
+ <h2 class="form-title">VIDEO CUTTER</h2>
106
+ <p>Cut a video from a start time to an end time.</p>
107
+ <label for="video">Video:</label>
108
+ <input type="file" id="video" name="video" />
109
+ <label for="start_time">Start Time:</label>
110
+ <input type="text" id="start_time" name="start_time" />
111
+ <label for="end_time">End Time:</label>
112
+ <input type="text" id="end_time" name="end_time" />
113
+ <button type="submit">Submit</button>
114
+ </form>
115
+ </div>
116
  </body>
117
  </html>
static/minecraft.html DELETED
@@ -1,37 +0,0 @@
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>MINECRAFT</title>
7
- </head>
8
- <body>
9
- <h1>MINECRAFT</h1>
10
- <div>
11
- <p>What it can do:</p>
12
- <p>Provide minecraft-themed functionality.</p>
13
- </div>
14
- <form action="/minecraft" method="post" enctype="multipart/form-data">
15
- <label for="video">Video:</label><br />
16
- <input type="file" id="video" name="video" /><br />
17
- <label for="subtitles">Subtitles:</label><br />
18
- <input type="text" id="subtitles" name="subtitles" /><br />
19
- <label for="color">Color:</label><br />
20
- <input type="text" id="color" name="color" /><br />
21
- <label for="size">Size:</label><br />
22
- <input type="number" id="size" name="size" /><br />
23
- <label for="font">Font:</label><br />
24
- <input type="text" id="font" name="font" /><br />
25
- <label for="credit">Credit:</label><br />
26
- <input type="text" id="credit" name="credit" /><br />
27
- <label for="credit_size">Credit Size:</label><br />
28
- <input
29
- type="number"
30
- id="credit_size"
31
- name="credit_size"
32
- /><br /><br />
33
- <input type="submit" value="Submit" />
34
- </form>
35
- <a href="/">Go back to index</a>
36
- </body>
37
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
static/scripts.js ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ "use strict"
2
+
3
+ document.addEventListener("DOMContentLoaded", () => {
4
+ const forms = document.querySelectorAll("form");
5
+ forms.forEach((form) => {
6
+ form.style.display = "none";
7
+ });
8
+
9
+ // add element to the DOM in the forms-container div
10
+ const formsContainer = document.querySelector("#forms-container");
11
+ const noChosenForm = document.createElement("span");
12
+ noChosenForm.classList.add("error");
13
+ noChosenForm.textContent = "No form chosen";
14
+ formsContainer.appendChild(noChosenForm);
15
+ });
16
+
17
+ document.querySelectorAll(".show-form").forEach((button) => {
18
+ button.addEventListener("click", (event) => {
19
+ showForm(event.target.dataset.formId);
20
+ });
21
+ });
22
+
23
+ function showForm(formId) {
24
+ const forms = document.querySelectorAll("#forms-container form");
25
+ forms.forEach((form) => {
26
+ if (form.id === formId) {
27
+ form.style.display = "block";
28
+ const noChosenForm = document.querySelector(".error");
29
+ noChosenForm.style.display = "none";
30
+ } else {
31
+ form.style.display = "none";
32
+ }
33
+ });
34
+ }
static/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- /* Add your CSS styles here */
2
 
3
  body {
4
  font-family: Arial, sans-serif;
@@ -7,23 +7,145 @@ body {
7
  }
8
 
9
  h1 {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  color: #333;
11
  }
12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  ul {
14
  list-style-type: none;
15
  padding: 0;
16
  }
17
 
18
- li {
19
- margin-bottom: 10px;
 
 
 
 
 
 
 
 
 
 
20
  }
21
 
22
- a {
23
- text-decoration: none;
24
- color: #007bff;
25
  }
26
 
27
- a:hover {
28
- text-decoration: underline;
 
 
 
29
  }
 
 
 
 
 
 
1
+ /* styles.css */
2
 
3
  body {
4
  font-family: Arial, sans-serif;
 
7
  }
8
 
9
  h1 {
10
+ text-align: center;
11
+ }
12
+ /* General Styles */
13
+ #forms-container {
14
+ max-width: 600px;
15
+ margin: 0 auto;
16
+ padding: 20px;
17
+ background-color: #f5f5f5;
18
+ border-radius: 5px;
19
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
20
+ }
21
+
22
+ form {
23
+ padding: 20px;
24
+ background-color: #fff;
25
+ border-radius: 5px;
26
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
27
+ }
28
+
29
+ .form-title {
30
+ text-align: center;
31
+ margin-bottom: 20px;
32
  color: #333;
33
  }
34
 
35
+ label {
36
+ display: block;
37
+ margin-bottom: 5px;
38
+ font-weight: bold;
39
+ color: #555;
40
+ }
41
+
42
+ input[type="text"],
43
+ input[type="number"],
44
+ input[type="file"] {
45
+ width: 100%;
46
+ padding: 10px;
47
+ border: 1px solid #ccc;
48
+ border-radius: 3px;
49
+ box-sizing: border-box;
50
+ margin-bottom: 15px;
51
+ }
52
+
53
+ button[type="submit"] {
54
+ background-color: #4caf50;
55
+ color: #fff;
56
+ padding: 10px 20px;
57
+ border: none;
58
+ border-radius: 3px;
59
+ cursor: pointer;
60
+ transition: background-color 0.3s ease;
61
+ }
62
+
63
+ button[type="submit"]:hover {
64
+ background-color: #45a049;
65
+ }
66
+
67
+ /* Form Specific Styles */
68
+ #basic-form {
69
+ border: 2px solid #2196f3;
70
+ }
71
+
72
+ #subway-form {
73
+ border: 2px solid #f44336;
74
+ }
75
+
76
+ #minecraft-form {
77
+ border: 2px solid #8bc34a;
78
+ }
79
+
80
+ #video-cutter-form {
81
+ border: 2px solid #ff9800;
82
+ }
83
+
84
+ .input-group {
85
+ margin-bottom: 10px;
86
+ }
87
+
88
+ .input-group label {
89
+ display: inline-block;
90
+ width: 100px;
91
+ }
92
+
93
+ .input-group input[type="text"],
94
+ .input-group input[type="number"],
95
+ .input-group input[type="file"] {
96
+ width: calc(100% - 110px); /* Adjust the width based on label width */
97
+ padding: 5px;
98
+ border-radius: 5px;
99
+ border: 1px solid #ccc;
100
+ }
101
+
102
+ button[type="submit"] {
103
+ display: block;
104
+ width: 100%;
105
+ padding: 10px;
106
+ margin-top: 10px;
107
+ background-color: #007bff;
108
+ color: #fff;
109
+ border: none;
110
+ border-radius: 5px;
111
+ cursor: pointer;
112
+ }
113
+
114
+ button[type="submit"]:hover {
115
+ background-color: #0056b3;
116
+ }
117
+
118
  ul {
119
  list-style-type: none;
120
  padding: 0;
121
  }
122
 
123
+ ul li {
124
+ display: inline-block;
125
+ margin-right: 10px;
126
+ }
127
+
128
+ ul li button {
129
+ padding: 5px 10px;
130
+ background-color: #007bff;
131
+ color: #fff;
132
+ border: none;
133
+ border-radius: 5px;
134
+ cursor: pointer;
135
  }
136
 
137
+ ul li button:hover {
138
+ background-color: #0056b3;
 
139
  }
140
 
141
+ span.error {
142
+ color: red;
143
+ text-align: center;
144
+ display: block;
145
+ font-size: 1.5em;
146
  }
147
+
148
+ .form-buttons {
149
+ display: flex;
150
+ justify-content: center;
151
+ }
static/subway.html DELETED
@@ -1,37 +0,0 @@
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>SUBWAY</title>
7
- </head>
8
- <body>
9
- <h1>SUBWAY</h1>
10
- <div>
11
- <p>What it can do:</p>
12
- <p>Provide subway-themed functionality.</p>
13
- </div>
14
- <form action="/subway" method="post" enctype="multipart/form-data">
15
- <label for="top_video">Top Video:</label><br />
16
- <input type="file" id="top_video" name="top_video" /><br />
17
- <label for="bottom_video">Bottom Video:</label><br />
18
- <input type="file" id="bottom_video" name="bottom_video" /><br />
19
- <label for="color">Color:</label><br />
20
- <input type="text" id="color" name="color" /><br />
21
- <label for="size">Size:</label><br />
22
- <input type="number" id="size" name="size" /><br />
23
- <label for="font">Font:</label><br />
24
- <input type="text" id="font" name="font" /><br />
25
- <label for="credit">Credit:</label><br />
26
- <input type="text" id="credit" name="credit" /><br />
27
- <label for="credit_size">Credit Size:</label><br />
28
- <input
29
- type="number"
30
- id="credit_size"
31
- name="credit_size"
32
- /><br /><br />
33
- <input type="submit" value="Submit" />
34
- </form>
35
- <a href="/">Go back to index</a>
36
- </body>
37
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
static/video_cutter.html DELETED
@@ -1,29 +0,0 @@
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>VIDEO CUTTER</title>
7
- </head>
8
- <body>
9
- <h1>VIDEO CUTTER</h1>
10
- <div>
11
- <p>What it can do:</p>
12
- <p>Provide video cutting functionality.</p>
13
- </div>
14
- <form
15
- action="/video_cutter"
16
- method="post"
17
- enctype="multipart/form-data"
18
- >
19
- <label for="video">Video:</label><br />
20
- <input type="file" id="video" name="video" /><br />
21
- <label for="start_time">Start Time:</label><br />
22
- <input type="text" id="start_time" name="start_time" /><br />
23
- <label for="end_time">End Time:</label><br />
24
- <input type="text" id="end_time" name="end_time" /><br /><br />
25
- <input type="submit" value="Submit" />
26
- </form>
27
- <a href="/">Go back to index</a>
28
- </body>
29
- </html>