aboutsummaryrefslogtreecommitdiffhomepage
path: root/public/help
diff options
context:
space:
mode:
authorAjay Ramachandran <[email protected]>2020-01-28 22:16:48 -0500
committerAjay Ramachandran <[email protected]>2020-01-28 22:16:48 -0500
commit03836b69f296df8edef412fcb00876dc72fc6eb3 (patch)
tree6243957ddfb787a34b77a928709757b9d79fb32d /public/help
parent5837205a9a47e364dc9038221f29b25e091a2ee3 (diff)
downloadSponsorBlock-03836b69f296df8edef412fcb00876dc72fc6eb3.tar.gz
SponsorBlock-03836b69f296df8edef412fcb00876dc72fc6eb3.zip
Started conversion to TypeScript.
Diffstat (limited to 'public/help')
-rw-r--r--public/help/index_en.html132
-rw-r--r--public/help/styles.css179
2 files changed, 311 insertions, 0 deletions
diff --git a/public/help/index_en.html b/public/help/index_en.html
new file mode 100644
index 00000000..ec7cd521
--- /dev/null
+++ b/public/help/index_en.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+
+<head>
+ <title> SponsorBlock </title>
+ <meta charset="utf-8">
+
+ <link href="styles.css" rel="stylesheet"/>
+</head>
+
+<body>
+
+ <div id="title">
+ <img src="https://github.com/ajayyy/SponsorBlock/raw/master/icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
+ SponsorBlock
+ </div>
+
+ <div class="container">
+
+ <p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a> <img src="https://ajay.app/newprofilepic.jpg" height="30" class="profilepiccircle"/></p>
+
+ <p>
+ Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions.
+ </p>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImage">
+ <a href="https://discord.gg/QnmVMpU"><img width="80" src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png"/></a>
+ </span>
+
+ Come contribute, make some suggestions and help out in the Discord: <a href="https://discord.gg/QnmVMpU">https://discord.gg/QnmVMpU</a>
+ </p>
+
+ <a class="bigText" href="/options/options.html">Enable Invidious Support</a>
+
+ <p>
+ Invidious is a third-party YouTube viewer. SponsorBlock now supports invidious along with YouTube. Please visit the options page to make sure everything is how you want it to be.
+ </p>
+
+ <h1>How skipping works</h1>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImageLarge">
+ <img src="https://i.imgur.com/caf5Bju.png">
+ </span>
+
+ Videos will automatically be skipped if they are found in the database. You can open the popup by clicking the extension icon to get a preview of what they are.
+
+ <br/>
+ <br/>
+
+ Whenever you skip a video, you will get a notice report that submission. If the timing seems wrong, report it! You can also vote in the popup. The extension auto upvotes it if you don't report it, so make sure to report when necessary (this can be disabled in the options).
+ </p>
+
+ <div class="center"><img height="120px" src="https://user-images.githubusercontent.com/12688112/63067735-5a638700-bede-11e9-8147-f321b57527ec.gif"></div>
+
+ <h1>Submitting</h1>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImageLargeRight">
+ <img src="https://i.imgur.com/A1ilk6x.gif">
+ </span>
+
+ Submitting can either be done in the popup by hitting the "Sponsorship Starts Now" button or in the video player with the buttons on the player.
+
+ <br/>
+ <br/>
+
+ Clicking the play button indicated the start of a sponsorship section and clicking the stop icon indicates the end. You can prepare multiple sponsors before hitting submit. Clicking the upload button will submit. Clicking the garbage can will delete.
+ </p>
+
+ <h1>Editing</h1>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImageLarge">
+ <img src="https://i.imgur.com/DZHqbsx.gif">
+ </span>
+
+ If you messed up, you can edit or delete your sponsor times in the popup or in the info menu (by hitting the info icon).
+
+ </p>
+
+ <h1>This is too slow</h1>
+
+ <p>
+ There are hotkeys if you want to use them. You must be focused on the YouTube player to use them. Press the semicolon key to indicate the start/end of a sponsor segment and click the appostrophe to submit.
+ </p>
+
+ <h1>I hate these buttons, they are so ugly</h1>
+
+ <p>
+ All player buttons can be hidden in the options.
+ </p>
+
+ <h1>Can I get a copy of the Database? What happens if you disappear?</h1>
+
+ <p>
+ The database is public and available at <a href="https://sponsor.ajay.app/database.db">https://sponsor.ajay.app/database.db</a>. The source code is freely available. So, even if something happens to me, your submissions are not lost.
+ </p>
+
+ <h1>News and how it is made</h1>
+
+ <p>
+ See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
+ </p>
+
+ <h1>I want more features!</h1>
+
+ <p>
+ Ask on Discord or make an Issue on GitHub. I am happy to hear suggestions or improvements you want. You may also contribute code or graphics if you would like.
+ </p>
+
+ <h1>Where can I get the source code?</h1>
+
+ <h4 style="display: inline">Client:</h4>
+ <!-- Github logo -->
+ <a href="https://github.com/ajayyy/SponsorBlock"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+
+ <h4 style="display: inline; padding-left: 20px">Server:</h4>
+ <!-- Github logo -->
+ <a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+
+ <h1>Credits</h1>
+
+ <p>The awesome <a href="https://github.com/omarroth/invidious/wiki/API">Invidious API</a> is used to grab the time the video was published.</p>
+
+ <p>Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
+
+ <p>Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
+
+ </div>
+
+</body>
diff --git a/public/help/styles.css b/public/help/styles.css
new file mode 100644
index 00000000..14003266
--- /dev/null
+++ b/public/help/styles.css
@@ -0,0 +1,179 @@
+.bigText {
+ font-size: 50px;
+}
+
+body {
+ background-color: #333333;
+ font-family: sans-serif;
+}
+
+.center {
+ text-align: center;
+}
+
+.container {
+ max-width: 60%;
+ margin: auto;
+}
+
+.projectPreview {
+ position: relative;
+}
+
+.projectPreviewImage {
+ position: absolute;
+ left: -90px;
+ width: 80px;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.projectPreviewImageLarge {
+ position: absolute;
+ left: -210px;
+ width: 200px;
+ top: 50%;
+ transform: translateY(-20%);
+}
+
+.projectPreviewImageLargeRight {
+ position: absolute;
+ right: -210px;
+ width: 200px;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.createdBy {
+ font-size: 14px;
+ text-align: center;
+ padding-top: 0px;
+ padding-bottom: 0px;
+}
+
+#title {
+ background-color: #636363;
+
+ text-align: center;
+ vertical-align: middle;
+
+ font-size: 50px;
+ color: #212121;
+
+ padding: 20px;
+
+ text-decoration: none;
+
+ transition: font-size 1s;
+}
+
+.subtitle {
+ font-size: 40px;
+ color: #dad8d8;
+
+ padding-top: 10px;
+
+ transition: font-size 0.4s;
+}
+
+.subtitle:hover {
+ font-size: 45px;
+
+ transition: font-size 0.4s;
+}
+
+.profilepic {
+ background-color: #636363 !important;
+ vertical-align: middle;
+}
+
+.profilepiccircle {
+ vertical-align: middle;
+ overflow: hidden;
+ border-radius: 50%;
+}
+
+a {
+ text-decoration: underline;
+ color: inherit;
+}
+
+.link {
+ padding: 20px;
+
+ height: 80px;
+
+ transition: height 0.2s;
+}
+
+.link:hover {
+ height: 95px;
+
+ transition: height 0.2s;
+}
+
+#contact,.smalllink {
+ font-size: 25px;
+ color: #e8e8e8;
+
+ text-align: center;
+
+ padding: 10px;
+}
+
+#contact {
+ text-decoration: none;
+}
+
+p,li,a {
+ font-size: 20px;
+ color: #c4c4c4;
+}
+
+p,li,code,a {
+ text-align: left;
+ overflow-wrap: break-word;
+}
+
+@media screen and (orientation:portrait) {
+ p,li,code,a {
+ max-width: 100%;
+ }
+
+ .projectPreviewImage {
+ position: unset;
+ width: 130px;
+ display: block;
+ margin: auto;
+ transform: none;
+ }
+}
+
+.previewImage {
+ max-height: 200px;
+}
+
+img {
+ max-width: 100%;
+
+ text-align: center;
+}
+
+#recentPostTitle {
+ font-size: 30px;
+ color: #dad8d8;
+}
+
+#recentPostDate {
+ font-size: 15px;
+ color: #dad8d8;
+}
+
+h1,h2,h3,h4,h5,h6 {
+ color: #dad8d8;
+ text-align: center;
+}
+
+svg {
+ text-decoration: none;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 01:43:18 +0000