diff --git a/assets/css/extra.css b/assets/css/extra.css index e9a6fea..07b78b9 100644 --- a/assets/css/extra.css +++ b/assets/css/extra.css @@ -304,4 +304,4 @@ body::-webkit-scrollbar-thumb { #proxyTxt:invalid { border: 2px solid var(--redBtn); -} +} \ No newline at end of file diff --git a/assets/css/index.css b/assets/css/index.css index dd45c4a..414b4f0 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -587,7 +587,7 @@ button { display: none; } -#extractBtn:active { +#extractBtn:active, .blueBtn:active { top: 4px; margin-bottom: 12px; border: none; @@ -723,3 +723,113 @@ body::-webkit-scrollbar-thumb { width: 80%; } } + + +/* Compressor styles */ +#compressor_body { + text-align: left; +} + +.container { + max-width: 800px; + margin: 0 auto; + background: var(--box-main); + padding: 2rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.drop-zone { + border: 2px dashed #ccc; + border-radius: 8px; + padding: 2rem; + text-align: center; + margin-bottom: 2rem; + transition: border-color 0.3s ease; + background: var(--box-toggle); +} + +.drop-zone:hover { + border-color: #2196F3; + cursor: pointer; +} + +.drop-zone.dragover { + border-color: #2196F3; + background-color: #f5fbff; +} + +.settings-group { + margin-bottom: 1.5rem; + display: flex; + flex-direction: column; +} + +.compress-label { + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + display: block; + margin-bottom: 10px; + font-weight: 500; + text-align: left; +} + +#compression-status { + margin-top: 2rem; + border-top: 1px solid var(--item-bg); + padding-top: 1rem; +} + +.status-item { + padding: 15px; + margin: 5px; + border-radius: 4px; + display: flex; + justify-content: space-between; + flex-direction: row; + background-color: var(--item-bg); +} + +.status-item.success { + color: var(--greenBtn); +} + +.status-item.error { + color: var(--redBtn); +} + +.filename { + flex: 1; + font-weight: 500; +} + +.status { + min-width: 80px; + text-transform: uppercase; + font-size: 0.9em; + font-weight: bold; +} + +.details { + font-size: 0.9em; + opacity: 0.8; +} + +.fileinput-btn { + background: var(--blueBtn); + color: white; + padding: 10px; + display: block; + border-radius: 5px; + margin: 5px 0 10px 0; + cursor: pointer; +} + +.progressBarCompress { + width: 200px; +} + +.nvidia_opt, .amf_opt, .qsv_opt, .vaapi_opt, .videotoolbox_opt { + display: none; +} + +/* End */ \ No newline at end of file diff --git a/html/compressor.html b/html/compressor.html new file mode 100644 index 0000000..23f8463 --- /dev/null +++ b/html/compressor.html @@ -0,0 +1,153 @@ + + + + + + + Video Compressor + + + + + + + menu + + + + +
+

Video Compressor

+ +
+

Drag and drop files here or

+ + +
No files selected
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + + + + \ No newline at end of file diff --git a/html/index.html b/html/index.html index c16adfc..f53e830 100644 --- a/html/index.html +++ b/html/index.html @@ -47,6 +47,7 @@ Download Playlist Preferences + Compressor About Theme: