diff options
| author | Ciaran Gallagher <[email protected]> | 2020-03-26 12:26:49 +0000 |
|---|---|---|
| committer | Ciaran Gallagher <[email protected]> | 2020-03-26 12:26:49 +0000 |
| commit | 96c967bf2e0d65882f3f68c75b513d4ab445cdb9 (patch) | |
| tree | 81eb0a5df980ab31091b72d1d85cc3ae3271bafa | |
| parent | 583f48a87caf33ec3a4ce919fb894326681de1cc (diff) | |
| download | pasta-96c967bf2e0d65882f3f68c75b513d4ab445cdb9.tar.gz pasta-96c967bf2e0d65882f3f68c75b513d4ab445cdb9.zip | |
Changes styles and text
| -rw-r--r-- | css/main.css | 28 | ||||
| -rw-r--r-- | images/android-chrome-192.png | bin | 0 -> 9834 bytes | |||
| -rw-r--r-- | images/android-chrome-512.png | bin | 0 -> 40037 bytes | |||
| -rw-r--r-- | images/apple_icon180.png | bin | 0 -> 12953 bytes | |||
| -rw-r--r-- | index.html | 78 | ||||
| -rw-r--r-- | js/main.js | 38 | ||||
| -rw-r--r-- | manifest.json | 19 |
7 files changed, 110 insertions, 53 deletions
diff --git a/css/main.css b/css/main.css index 9612fbf..25bab9a 100644 --- a/css/main.css +++ b/css/main.css @@ -3,8 +3,14 @@ ==========================*/ body { - background: rgb(51,51,51); - background: linear-gradient(90deg, rgba(19,19,19,1) 0%, rgb(47, 47, 47) 50%, rgba(19,19,19,1) 100%); + background-color: rgb(51,51,51); + background-image: radial-gradient(rgba(80, 40, 0, 0.75), black 120%), repeating-linear-gradient( + rgba(0,0,0,0.75), + rgba(0,0,0,0.75) 2px, + transparent 2px, + transparent 4px + ); + height: 100vh; } nav { @@ -16,21 +22,21 @@ h1, h2, h3, h4, h5 { } .card { - background-color: rgba(40,40,40,1); + background-color: rgba(25,25,25,0.85); } small { color: rgb(190,190,190); } -nav .titleImage { +.titleNavBar .titleImage { width: auto; height: auto; max-width: 100%; max-height: 3em; } -nav small { +.titleNavBar small { color: rgb(190,190,190); font-size: 0.7em; font-variant: small-caps; @@ -69,7 +75,7 @@ label { } .modal-content { - background-color: rgba(40,40,40,1); + background-color: rgba(25,25,25,1); color: rgb(240,240,240); } @@ -134,8 +140,8 @@ label { .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: rgb(240,240,240); - background-color: rgba(40,40,40,0.85); - border-color: #aaa #aaa rgba(40,40,40,1); + background-color: rgba(25,25,25,0.85); + border-color: #aaa #aaa rgba(25,25,25,0.85); } /*========================== @@ -324,9 +330,9 @@ table, td, tr, th { ==========================*/ /* Extra small devices (phones, 600px and down) */ -@media only screen and (max-width: 600px) { - nav small { - display: none; +@media only screen and (max-width: 768px) { + .titleNavBar .titleImage { + max-height: 2em; } } diff --git a/images/android-chrome-192.png b/images/android-chrome-192.png Binary files differnew file mode 100644 index 0000000..8ca6b88 --- /dev/null +++ b/images/android-chrome-192.png diff --git a/images/android-chrome-512.png b/images/android-chrome-512.png Binary files differnew file mode 100644 index 0000000..5b3d372 --- /dev/null +++ b/images/android-chrome-512.png diff --git a/images/apple_icon180.png b/images/apple_icon180.png Binary files differnew file mode 100644 index 0000000..050eb56 --- /dev/null +++ b/images/apple_icon180.png @@ -3,7 +3,10 @@ <head></head> <title>PASTA | Audio and Subtitle Track Changer for Plex</title> + <!-- Icon links --> <link rel='icon' href='images/favicon.png' type='image/x-icon' /> + <link rel="apple-touch-icon" sizes="180x180" href="images/apple_icon180.png"> + <link rel="manifest" href="/manifest.json"> <!-- Required meta tags --> <meta charset="utf-8"> @@ -40,19 +43,86 @@ <body> <!-- Navigation --> - <nav class="navbar navbar-expand-lg navbar-dark static-top"> + <nav class="titleNavBar navbar navbar-expand-lg navbar-dark static-top"> <div class="container"> <a class="navbar-brand" href="javascript:window.location.reload()"> <img class="titleImage" src="images/Logo_Title_Large.png"> </a> - <a href=""> + <a href="javascript:void(0)" onclick="$('#aboutModal').modal();"> <i class="far fa-question-circle" style="color: #e5a00d; font-size: 1.5em"></i> </a> </div> </nav> <!-- Modal --> - <div class="modal fade" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" + <div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="aboutModalTitle" + aria-hidden="true"> + <div class="modal-dialog modal-xl modal-dialog-centered" role="document"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="aboutModalTitle">About & Help</h5> + <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <span aria-hidden="true">×</span> + </button> + </div> + <div id="modalBodyText" class="modal-body"> + <h3>What is PASTA?</h3> + <p>Do you watch TV Shows with multiple languages and subtitles and wish you could change them for the + entire show, rather than needing to do it for <em>every. single. episode</em>? + Or maybe you aren't sure what the difference is between those 2 <strong>Enlish (SRT)</strong> and + <strong>English (SRT)</strong> subtitle files. Then PASTA is for you! + <br>PASTA allows you to connect to your Plex server and view more details about the audio tracks and + subtitles, as well as set the tracks and subtitles + for entire shows, or single episodes very quickly.</p> + <h3>How do I use PASTA?</h3> + <p>I built PASTA to be as step-by-step as possible and to take you through it, so you should be able to + just close this pop-up and follow along. + <br>There are some things I would like to point out, however:</p> + <ul> + <li>This currently does <strong>not</strong> support logging in via username / password (I will look + into that at a later date). Currently you must use + the IP address, or if your Plex server is addressable by a valid name address, then use that. + </li> + <li>You must use the Plex Token for authentication. It's the only way I have this working so far. + I've included a link with instructions + on how to get a Plex Token below the required field.</li> + <li>This works <strong>MUCH</strong> faster if you are on the same network as the Plex Server.</li> + <li>You can also run this locally yourself. Just download the source code from github (see the next + section).</li> + </ul> + <h3>About PASTA</h3> + <p>When I first began developing this for myself, I was calling it <em>Audio Track Automation for Plex</em>, + so adding "subtitles" to it, and rearranging the letters gave birth to PASTA.<p> + <p>PASTA was born out of a desire, one that I had seen others have as well, but that I had only + seen one other solution for. However, it was in + command line and I wanted something a bit more appealing to look at, and something I could + use from anywhere. + Initially I was only building this for myself but I thought that others might find use for + it as well, so here we are!</p> + <p>PASTA runs entirely client-side. This means that you are not passing anything to someones + server to do this (other than the Plex Server), and it also means I don't + have to worry about standing up a server to do that side of things either :). PASTA runs off + of Github Pages, and I've got a link to my + repository below. Feel free to have a look, download it yourself and use it locally, or make + suggestions. I'm by no means finished with + PASTA - I still have plenty of ideas for how I can add more to it, as well as fix any bugs + that crop up. Feel free to log any issues / feature + requests on the Github as well.</p> + <p><a href="https://github.com/cglatot/pasta" + target="_blank">https://github.com/cglatot/pasta</a></p> + <h3>Cookie Policy</h3> + <p>The site uses some minor cookies to help improve your experience. Third-party cookies are not + used on this site. By continuing to use this site, you agree to the use of cookies.</p> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + </div> + </div> + </div> + </div> + + <!-- Progress Modal --> + <div class="modal fade" id="progressModal" tabindex="-1" role="dialog" aria-labelledby="progressModalTitle" aria-hidden="true"> <div class="modal-dialog modal-xl modal-dialog-centered" role="document"> <div class="modal-content"> @@ -102,7 +172,7 @@ <div class="row mt-3"> <div class="col"> <div id="insecureWarning" class="alert alert-warning alert-dismissible fade show mt-3" role="alert"> - <strong>Warning:</strong> You have loaded this page over <strong>http</strong>, which means that this may not be very secure, especially if you are using public or untrusted networks. + <strong>Warning:</strong> You have loaded this page over <strong>http</strong>, which means that this may not be secure, especially if you are using public or untrusted networks. <br>If you can only access your Plex server via http, then please continue with caution. <br>However, if you can access your Plex server via <strong>https</strong>, then I recommend reloading this site over https by <a href="https://www.pastatool.com">clicking here</a>. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> @@ -53,44 +53,6 @@ $(document).ready(() => { $("#btnConnectToPlex").prop("disabled", true); } }); - - // Show the Welcome Modal - $('#progressModal #progressModalTitle').empty(); - $('#progressModal #progressModalTitle').text(`Welcome to PASTA`); - $('#progressModal #modalBodyText').empty(); - $('#progressModal #modalBodyText').append(` - <h3>What is PASTA?</h3> - <p>Do you watch TV Shows with multiple languages and subtitles and wish you could change them for the entire show, rather than needing to do it for <em>every. single. episode</em>? - Or maybe you aren't sure what the difference is between those 2 <strong>Enlish (SRT)</strong> and <strong>English (SRT)</strong> subtitle files. Then PASTA is for you! - <br>PASTA allows you to connect to your Plex server and view more details about the audio tracks and subtitles, as well as set the tracks and subtitles - for entire shows, or single episodes very quickly.</p> - <h3>How do I use PASTA?</h3> - <p>I built PASTA to be as step-by-step as possible and to take you through it, so you should be able to just close this pop-up and follow along. - <br>There are some things I would like to point out, however:</p> - <ul> - <li>This currently does <strong>not</strong> support logging in via username / password (I will look into that at a later date). Currently you must use - the IP address, or if your Plex server is addressable by a valid name address, then use that.</li> - <li>You must use the Plex Token for authentication. It's the only way I have this working so far. I've included a link with instructions - on how to get a Plex Token below the required field.</li> - <li>This works <strong>MUCH</strong> faster if you are on the same network as the Plex Server.</li> - <li>You can also run this locally yourself. Just download the source code from github (see the next section).</li> - </ul> - <h3>About PASTA</h3> - <p>PASTA is short for <em>Plex Audio and Subtitle Track Automation</em>. When I first began developing this for myself, I was calling it - <em>Plex Audio Track Automation</em>, so adding subtitles to it gave birth to PASTA.<p> - <p>PASTA was born out of a desire, one that I had seen others have as well, but that I had only seen one other solution for. However, it was in - command line and I wanted something a bit more appealing to look at, and something I could use from anywhere. - Initially I was only building this for myself but I thought that others might find use for it as well, so here we are!</p> - <p>PASTA runs entirely client-side. This means that you are not passing anything to someones server to do this (other than the Plex Server), and it also means I don't - have to worry about standing up a server to do that side of things either :). PASTA runs off of Github Pages, and I've got a link to my - repository below. Feel free to have a look, download it yourself and use it locally, or make suggestions. I'm by no means finished with - PASTA - I still have plenty of ideas for how I can add more to it, as well as fix any bugs that crop up. Feel free to log any issues / feature - requests on the Github as well.</p> - <p><a href="https://github.com/cglatot/pasta" target="_blank">https://github.com/cglatot/pasta</a></p> - <h3>Cookie Policy</h3> - <p>The site uses some minor cookies to help improve your experience. Third-party cookies are not used on this site. By continuing to use this site, you agree to the use of cookies.</p> - `); - $('#progressModal').modal(); }); function connectToPlex() { diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..a73d0ab --- /dev/null +++ b/manifest.json @@ -0,0 +1,19 @@ +{ + "name":"", + "short_name":"", + "icons":[ + { + "src":"images/android-chrome-192.png", + "sizes":"192x192", + "type":"image/png" + }, + { + "src":"images/android-chrome-512.png", + "sizes":"512x512", + "type":"image/png" + } + ], + "theme_color":"#ffffff", + "background_color":"#ffffff", + "display":"standalone" + }
\ No newline at end of file |
