move code into css

MayNiklas · Jul 26, 2024 · 625d526 · 625d526
1 parent 71623a0
commit 625d526
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/src/whisper_api/frontend/static/index.html b/src/whisper_api/frontend/static/index.html
@@ -23,12 +23,9 @@ <h2>Transcription:</h2>
     <div id="result"></div>
   </div>
   <div style="display: flex; justify-content: center; gap: 20px; width: 100%;">
-    <button type="button" id="cleanOutputBtn" onclick="cleanOutput()"
-      style="flex: 1 1 150px; padding: 10px; height: 50px;">Clean
-      output</button>
-    <button type="button" id="downloadSrtBtn" onclick="downloadSrt()"
-      style="flex: 1 1 150px; padding: 10px; height: 50px;">Download
-      transcription as .srt</button>
+    <button type="button" id="cleanOutputBtn" onclick="cleanOutput()" class="action-btn">Clean output</button>
+    <button type="button" id="downloadSrtBtn" onclick="downloadSrt()" class="action-btn">Download transcription
+      as .srt</button>
   </div>
   <script src="script.js"></script>
 </body>

diff --git a/src/whisper_api/frontend/static/styles.css b/src/whisper_api/frontend/static/styles.css
@@ -58,12 +58,18 @@ button[type="button"] {
   margin-bottom: 10px;
   cursor: pointer;
   border-radius: 5px;
+  height: 40px;
 }
 
 button[type="button"]:hover {
   background-color: #3e8e41;
 }
 
+.action-btn {
+  flex: 1 1 150px;
+  padding: 10px;
+}
+
 #taskIdContainer,
 #resultContainer {
   border: 1px solid #ccc;