diff --git a/peertube-dl-web.conf b/peertube-dl-web.conf index 71f81e1..3c317df 100644 --- a/peertube-dl-web.conf +++ b/peertube-dl-web.conf @@ -5,5 +5,6 @@ clients => 3, proxy => 1, pid_file => $ENV{PIDFILE} || '/var/run/peertube-dl-web.pid', - } + }, + theme => 'new_look_default', }; diff --git a/themes/default/public/dist/css/index.css b/themes/default/public/dist/css/index.css index d5545f8..87c0190 100644 --- a/themes/default/public/dist/css/index.css +++ b/themes/default/public/dist/css/index.css @@ -1,194 +1,274 @@ body { - height: 98vh; - - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - - background-color: #111827; + height: 99.9%; + margin: 0; + padding: 0; } -.application-container { - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; - - border-radius: 0.3rem; - - background-color: #1f2937; - - padding: 1.5rem 3rem 1.5rem 3rem; +a { + color: blue; } -.application-container form { - display: flex; - flex-flow: column; - justify-content: center; - - width: 100%; - padding: 1rem; +a:hover,a:focus { + text-decoration: underline; } -.application-container h2 { - color: #ffffff; - font-weight: 400; - font-size: 1.6rem; -} - -.application-container input { - padding: 1rem; - - color: #ffffff; - background-color: #374151; - - border-radius: 0.2rem; - border: 1px solid transparent; -} - -.application-container button { - margin-top: 1rem; - - color: #ffffff; - font-weight: bold; - - background-color: #059669; - - border-radius: 0.2rem; - border: 1px solid transparent; - - padding: 0.5rem 1rem 0.5rem 1rem; -} - -.application-container button, -.application-container input { - font-size: 0.9rem; -} - -.application-container.active { - display: flex; -} - -#poping-notice { - position: absolute; - display: none; - padding: 3rem; - border-radius: 0.3rem; - background-color: #374151; - color: white; -} - -#poping-notice-content a { - text-decoration: none; - color: #10b981; -} - -#poping-notice-container-bar { - display: flex; - justify-content: center; -} - -#close-poping-notice { - background-color: #059669; - padding: 0.5rem 5rem 0.5rem 5rem; - border-radius: 0.3rem; - text-decoration: none; - font-weight: bolder; - color: white; +#video { + width: 100%; + margin: 3px; } #modal-video-container { - position: absolute; - display: none; + display: none; + background: white; + position: fixed; + top: 50%; + left: 50%; + height: 100%; + width: 100%; + transform: translate(-50%, -50%); + border: black 1px solid; +} - height: 100vh; - width: 100%; - - flex-flow: column; - align-items: center; - - background-color: #111827; +#modal-video-container.active { + display: block; } .video-container-bar { - width: 95%; - height: 2rem; - padding: 1rem; - display: flex; - justify-content: end; + display: flex; + justify-content: right; } -.video-container-bar a { - padding: 1rem; - border-radius: 0.3rem; - - display: flex; - align-items: center; - justify-content: center; - - background-color: #dc2626; +#close-and-reset-video-container { + margin-top: 0.25rem; + margin-right: 0.25rem; + border: 1px solid black; } -#modal-video-container > #block { - display: flex; - flex-flow: column; - align-items: center; - justify-content: center; +#close-and-reset-video-container:hover,#close-and-reset-video-container:focus { + background: black; + color: white; } #download-video-container { - padding: 2rem; - - display: flex; - align-items: center; - justify-content: center; + margin: 10px; + justify-content: center; } -#download-video-prepare, -#download-video { - display: none; - border-radius: 0.3rem; - background-color: #059669; - text-decoration: none; - color: white; - user-select: none; - cursor: pointer; +#download-video-container a { + display: none; + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; + padding-bottom: 5px; + width: 100%; + background: #0a0; + border-radius: 5px; + font-size: 30px; + color: white; + height: 30px; } -#download-video-loading.active { - height: 2rem; +#download-video-container a.active { + display: block; } -#download-video-container a.active, -#download-video-loading.active { - display: block; - padding: 0.5rem 2rem 0.5rem 2rem; +#download-video-container a embed { + height: 30px; } -#modal-loading, -#modal-format-selector { - display: none; +#video-container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100%; } -#poping-notice.active, -#modal-video-container.active { - --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), - 0 4px 6px -2px rgba(0, 0, 0, 0.05); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), - var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +.block { + display: block; } +.application-container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + height: 100%; + background: #000; + color: white; +} + +#download-form { + display: flex; + justify-content: center; + flex-direction: column; +} + +#download-form-button { + margin-top: 5px; + height: 50px; + font-size: 1.5rem; + background: #fff; + color: black; + border: none; +} + +h2 { + font-size: 2rem; +} + +#modal-loading { + display: none; + position: fixed; + top: 50%; + left: 50%; + height: 100%; + width: 100%; + transform: translate(-50%, -50%); + border: black 1px solid; + justify-content: right; + align-items: center; +} + +#modal-loading.active { + display: flex; +} + +#modal-loading embed { + width: 10%; +} + +#poping-notice { + display: none; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border: black 1px solid; + width: 91%; + background: white; + padding: 10px; + border-radius: 15px; + max-height: 95%; + overflow-y: scroll; +} + #poping-notice.active { - display: block; + display: block; } -#modal-video-container.active { - display: flex; +#poping-notice-container-bar { + display: flex; + justify-content: center; + font-size: 5rem; } -@media (min-width: 812px) { - #poping-notice { - width: 40%; - } +#close-poping-notice { + width: 150px; + height: 150px; + align-items: center; + display: flex; + text-align: center; + justify-content: center; + border-radius: 50%; + background: #0f0; + color: black; + text-decoration: none; +} + +#close-poping-notice:hover,#close-poping-notice:focus { + background: black; + color: white; +} + +#modal-format-selector { + display: none; + background: white; + position: fixed; + top: 50%; + left: 50%; + height: 100%; + width: 100%; + transform: translate(-50%, -50%); + border: black 1px solid; + flex-direction: column; + overflow-y: scroll; +} + +#modal-format-selector.active { + display: flex; +} + +#modal-format-selector > h2 { + text-align: center; +} + +#modal-format-selector > p { + margin-left: 2rem; +} + +#modal-format-selector .format-list { + box-sizing: border-box; + background: #fff; + margin: 2rem; +} + +#close-modal-format-selector { + margin-top: 0.50rem; + margin-right: 0.50rem; + border: 1px solid black; + background: grey; + color: white; + width: 25px; + height: 25px; + text-align: center; + font-size: 20px; + font-weight: bold; +} + +#close-modal-format-selector:hover,#close-modal-format-selector:focus { + background: black; +} + +.format-list > div { + width: 100%; + display: grid; + grid-auto-columns: 50%; + grid-template-areas: "a a"; +} + +.format-list > div > a { + border: 1px solid black; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + padding-right: 5%; + padding-left: 5%; + text-decoration: none; + color: black; + background: #eee; + overflow-wrap: anywhere; +} + +.format-list > div > a:hover { + background: black; + color: white; +} + +.format-list > div > a:after { + padding-bottom: 100%; + display: block; + content: ""; +} + +div.video-formats a { + background: #f00; +} + +@media (min-width: 668px) { + #poping-notice { + width: 629px; + } } diff --git a/themes/new_look_default/public/dist/css/index.css b/themes/new_look_default/public/dist/css/index.css new file mode 100644 index 0000000..2ddd890 --- /dev/null +++ b/themes/new_look_default/public/dist/css/index.css @@ -0,0 +1,252 @@ +body { + height: 98vh; + + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + + background-color: #111827; +} + +.application-container { + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + + border-radius: 0.3rem; + + background-color: #1f2937; + + padding: 1.5rem 3rem 1.5rem 3rem; +} + +.application-container form { + display: flex; + flex-flow: column; + justify-content: center; + + width: 100%; + padding: 1rem; +} + +.application-container h2 { + color: #ffffff; + font-weight: 400; + font-size: 1.6rem; +} + +.application-container input { + padding: 1rem; + + color: #ffffff; + background-color: #374151; + + border-radius: 0.2rem; + border: 1px solid transparent; +} + +.application-container button { + margin-top: 1rem; + + color: #ffffff; + font-weight: bold; + + background-color: #059669; + + border-radius: 0.2rem; + border: 1px solid transparent; + + padding: 0.5rem 1rem 0.5rem 1rem; +} + +.application-container button:hover,.application-container button:focus { + background-color: #059; +} + +.application-container button, +.application-container input { + font-size: 0.9rem; +} + +.application-container.active { + display: flex; +} + +#poping-notice { + position: absolute; + display: none; + padding: 3rem; + border-radius: 0.3rem; + background-color: #374151; + color: white; +} + +#poping-notice-content a { + text-decoration: none; + color: #10b981; +} + +#poping-notice-content a:hover,#poping-notice-content a:focus { + color: #0ae; +} + +#poping-notice-container-bar { + display: flex; + justify-content: center; +} + +#close-poping-notice { + background-color: #059669; + padding: 0.5rem 5rem 0.5rem 5rem; + border-radius: 0.3rem; + text-decoration: none; + font-weight: bolder; + color: white; +} + +#close-poping-notice:hover,#close-poping-notice:focus { + background-color: #059; +} + +#modal-video-container { + position: absolute; + display: none; + + height: 100vh; + width: 100%; + + flex-flow: column; + align-items: center; + + background-color: #111827; +} + +.video-container-bar { + width: 95%; + height: 2rem; + padding: 1rem; + display: flex; + justify-content: end; +} + +.video-container-bar a { + padding: 1rem; + border-radius: 0.3rem; + + display: flex; + align-items: center; + justify-content: center; + + background-color: #dc2626; +} + +.video-container-bar a:hover,.video-container-bar a:focus { + color: white; + background-color: grey; +} + + +#modal-video-container > #block { + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; +} + +#download-video-container { + padding: 2rem; + + display: flex; + align-items: center; + justify-content: center; +} + +.button-download { + display: none; + border-radius: 0.3rem; + background-color: #059669; + text-decoration: none; + color: white; + user-select: none; + cursor: pointer; + height: 30px; + padding: 0 2rem; +} + +.button-download:hover,.button-download:focus { + background-color: #059; +} + +.button-download embed { + height: 100%; +} + +#download-video-loading.active { + height: 2rem; +} + +#download-video-container .button-download.active { + display: flex; + align-items: center; +} + +#modal-loading, +#modal-format-selector { + display: none; +} + +#poping-notice.active, +#modal-video-container.active { + --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), + var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); +} + +#poping-notice.active { + display: block; +} + +#modal-video-container.active { + display: flex; +} + +#modal-loading { + display: none; + position: fixed; + top: 50%; + left: 50%; + height: 100%; + width: 100%; + transform: translate(-50%, -50%); + border: black 1px solid; + justify-content: right; + align-items: center; +} + +#modal-loading.active { + display: flex; +} + +#modal-loading embed { + width: 10%; +} + +#video { + width: 100%; +} + +#video-container { + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} + +@media (min-width: 812px) { + #poping-notice { + width: 40%; + } +} diff --git a/themes/new_look_default/public/dist/img/peertube-dl-logo.png b/themes/new_look_default/public/dist/img/peertube-dl-logo.png new file mode 100644 index 0000000..f884590 Binary files /dev/null and b/themes/new_look_default/public/dist/img/peertube-dl-logo.png differ diff --git a/themes/new_look_default/public/dist/index.html b/themes/new_look_default/public/dist/index.html new file mode 100644 index 0000000..215e5b7 --- /dev/null +++ b/themes/new_look_default/public/dist/index.html @@ -0,0 +1,69 @@ + +
+ + + + + + +Example description
+This webpage is free as in freedom software, it is offered to you with the hope it will be useful, but without any warranty, + you can find the source code at my gitea with docs to setup your own + webpage like this, this software is licensed under the AGPLv3 license which means you MUST convey the source code in a human readable form + if you distribute this software or use it as an service to users of service or distributees.
+ +
I hope that if you find a non supported url which should be supported, a bug, or a feature you would like this webpage to have you file an issue in + https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl/issues + to help this software improve since I find tracking users a pretty bad way to discover bugs and potential good features.
+ +This webpage may load third party resources depending on the url you give to it which may put cookies in your browser, you are + encouraged to frecuently delete your browser cookies to avoid those third parties tracking you on internet, Firefox offers you an + option to delete cookies as soon as you close the browser which may be a good idea to enable in the orwellian internet of today.
+