diff --git a/SubBox/wwwroot/css/tutorial.css b/SubBox/wwwroot/css/tutorial.css index cd51d78..004dff7 100644 --- a/SubBox/wwwroot/css/tutorial.css +++ b/SubBox/wwwroot/css/tutorial.css @@ -10,7 +10,7 @@ section { display: flex; - height: 540px; + height: 48%; width: 100%; padding: 0px; justify-content: center; @@ -27,7 +27,7 @@ button { } .refreshButton { - color: #fafafa; + color: #131313; transition: transform 1s; } @@ -58,13 +58,76 @@ li { line-height: 24px; } +.sidebar { + position: fixed; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 20px; + height: 210px; + top: calc(50% - 105px); + left: 20px; + background-color: transparent; +} + + .sidebar div { + width: 15px; + height: 15px; + margin-top: 10px; + margin-bottom: 10px; + border-radius: 7.5px; + background-color: #666666; + cursor: pointer; + } + + .sidebar .activeSidebarNote { + background-color: #131313; + } + +.slide { + position: fixed; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + height: 100%; + background: #fafafa; +} + +.titleSection { + background-color: #db4437; + color: #fafafa; + height: 50%; +} + +.scrollHint { + height: 2%; + background-color: #fafafa; + font-size: 14pt; + box-shadow: #13131333 0px 0px 10px 0px; + cursor: pointer; +} + + .scrollHint div { + font-size: 24pt; + } + + .scrollHint:hover { + background-color: #db4437; + color: #fafafa; + } + .miniSection { - height: 100px; - background-color: #131313; + height: 4%; + background-color: #fafafa; + font-size: 14pt; + box-shadow: #13131333 0px 0px 10px 0px; } .miniSection p { - color: #fafafa; + color: #131313; font-size: 20px; display: flex; justify-content: center; @@ -74,7 +137,7 @@ li { .miniSection a { margin-left: 5px; margin-right: 5px; - color: #fafafa; + color: #131313; text-decoration: none; font-size: 20px; } @@ -114,6 +177,7 @@ li { } .EndSection { + height: 100%; pointer-events: none; background: linear-gradient(to right, #db4437 50%, #fafafa 50%); background-size: 200% 100%; @@ -212,7 +276,7 @@ li { display: inline-flex; align-items: center; justify-content: center; - color: #fafafa; + color: #131313; background: transparent; width: 40px; height: 40px; diff --git a/SubBox/wwwroot/js/tutorial.js b/SubBox/wwwroot/js/tutorial.js index 62bb010..0ee61c4 100644 --- a/SubBox/wwwroot/js/tutorial.js +++ b/SubBox/wwwroot/js/tutorial.js @@ -1,4 +1,8 @@ var app = new Vue({ + data: { + slide: 0, + lastSlideChange: null, + }, methods: { async leave() { await fetch("api/values/firstdone", { method: "POST" }); @@ -13,5 +17,28 @@ var app = new Vue({ page.addEventListener("contextmenu", function (event) { event.preventDefault(); }, false); + + this.lastSlideChange = Date.now(); + + window.addEventListener('wheel', function(event) { + var newTime = Date.now(); + + if (newTime - app.lastSlideChange > 300) { + if (event.deltaY > 0) { + app.slide++; + } else { + app.slide--; + } + + if (app.slide < 0) { + app.slide = 0; + } else if (app.slide > 5) { + app.slide = 5; + } + + app.lastSlideChange = newTime; + } + + }); } }); \ No newline at end of file diff --git a/SubBox/wwwroot/media/intro1.png b/SubBox/wwwroot/media/intro1.png index 0245824..326b4e0 100644 Binary files a/SubBox/wwwroot/media/intro1.png and b/SubBox/wwwroot/media/intro1.png differ diff --git a/SubBox/wwwroot/media/intro2.png b/SubBox/wwwroot/media/intro2.png index 4069e33..40ec1b9 100644 Binary files a/SubBox/wwwroot/media/intro2.png and b/SubBox/wwwroot/media/intro2.png differ diff --git a/SubBox/wwwroot/media/intro3.png b/SubBox/wwwroot/media/intro3.png index e1ebcb2..02c4785 100644 Binary files a/SubBox/wwwroot/media/intro3.png and b/SubBox/wwwroot/media/intro3.png differ diff --git a/SubBox/wwwroot/media/intro4.png b/SubBox/wwwroot/media/intro4.png index 0e569b1..a68c661 100644 Binary files a/SubBox/wwwroot/media/intro4.png and b/SubBox/wwwroot/media/intro4.png differ diff --git a/SubBox/wwwroot/media/intro5.png b/SubBox/wwwroot/media/intro5.png index 7e57c95..1625754 100644 Binary files a/SubBox/wwwroot/media/intro5.png and b/SubBox/wwwroot/media/intro5.png differ diff --git a/SubBox/wwwroot/media/intro6.png b/SubBox/wwwroot/media/intro6.png index 9171740..e7f1d58 100644 Binary files a/SubBox/wwwroot/media/intro6.png and b/SubBox/wwwroot/media/intro6.png differ diff --git a/SubBox/wwwroot/media/intro7.png b/SubBox/wwwroot/media/intro7.png index 25b8925..9048d3d 100644 Binary files a/SubBox/wwwroot/media/intro7.png and b/SubBox/wwwroot/media/intro7.png differ diff --git a/SubBox/wwwroot/media/intro8.png b/SubBox/wwwroot/media/intro8.png index 909f01c..a4386e6 100644 Binary files a/SubBox/wwwroot/media/intro8.png and b/SubBox/wwwroot/media/intro8.png differ diff --git a/SubBox/wwwroot/media/intro9.png b/SubBox/wwwroot/media/intro9.png index d17fd16..d6ee794 100644 Binary files a/SubBox/wwwroot/media/intro9.png and b/SubBox/wwwroot/media/intro9.png differ diff --git a/SubBox/wwwroot/tutorial.html b/SubBox/wwwroot/tutorial.html index eb75a29..1bbf7ef 100644 --- a/SubBox/wwwroot/tutorial.html +++ b/SubBox/wwwroot/tutorial.html @@ -31,204 +31,222 @@
-
-
-

Welcome to

-

- SubBox -

-
-
- -
-
- -
-
-

- SubBox - ASP.NET Youtube - Tool -

-

- SubBox is an easy to use tool to manage the uploaded videos of your favourite Youtube channels. Never - forget about uploaded videos again and watch them when it is right for you. -

-
-
- -
-
-

- SubBox - Add Your - Favourite Channels -

-

- Add your favourite channels through entering their username. Their username might not be the name you - are familiar with, in that case just open their channel on Youtube and copy their name there from - the link as shown. -

-
-
- -
-
- -
-
- -
-
-

- SubBox - Manage Your - Channels -

-

- Through the channels button you can get a list of all your currently added channels. Here you can - decide to show only videos of one particular channel by clicking on the star icon. Remove a channel - with the delete button. -

-
-
- -
-

- Click on the button in the top right - corner to update your list manually. -

-
- -
-
-

- SubBox - Add Playlists -

-

- Add playlists you want to watch by simply entering the respective playlist id. To get the playlist - id, just open the playlist on Youtube and copy the id from the link. You will always see each - current video of every playlist in your list marked with the PLAYLIST box. -

-
-
- -
-
- -
-
- -
-
-

- SubBox - Using Playlists -

-

- Use the arrow buttons on the playlist video to go to the next/previous video or use the list button - to get a overview over the whole playlist. You want to combine playlists? Just click the list button - on an already created playlist and use the add button. -

-
-
-
-

Did you know you can visit this page from other devices in your network? The link is [Your IP]:2828

-
+
+
+
+

Welcome to

+

+ SubBox +

+
+
+
+
+ +
+
+

+ SubBox +

+

+ SubBox is an easy to use tool to manage the uploaded videos of your favourite Youtube channels. Never + forget about uploaded videos again and watch them when it is right for you. +

+
+
+
+ Scroll
keyboard_arrow_down
Down +
+
-
-
-

- SubBox - The Trashbin -

-

- If you removed videos from your list on accident or you changed your mind, you can just click on the - trashbin icon to get a list of all removed videos. Be aware these videos will be permanently deleted - after they have reached a certain age. You can set this age yourself, more on that later. -

-
-
- -
-
- -
-
- -
-
-

- SubBox - Search and Tags -

+
+
+
+

+ SubBox - Profile +

+

+ In the profile tab, you can choose your username and make notes about whatever you need. See when you first started using SubBox. Every day a new background image appears. +

+
+
+ +
+
+ +
+
+ +
+
+

+ SubBox - Manage Your + Channels +

+

+ Add your favourite channels through entering their username. Their username might not be the name you + are familiar with, in that case, open their channel on Youtube and copy their name there from + the link as shown. Through the channels button you can get a list of all your currently added channels. Here you can + decide to show only videos of one particular channel by clicking on the star icon. Remove a channel + with the delete button. +

+
+
+ +

- Hover over the "SubBox" to use the search bar. If one search keyword isn't enough, you can make use - of tags. Just create a tag and add all keywords you want to combine. When selecting a tag, all - videos containing atleast one of the keywords will be shown. -

-
-
- -
-

- Don't know what a button or a setting does? Hover over it with your Mouse to display a tooltip. -

-
- -
-
-

- SubBox - Customize To - Your Needs + Don't know what a button does? Hover over it with your Mouse to display a tooltip.

+
+
+ +
+
+
+

+ SubBox - Add Playlists +

+

+ Add playlists you want to watch by simply entering the respective playlist id. To get the playlist + id, open the playlist on Youtube and copy the id from the link. You will always see each + current video of every playlist in your list marked with the PLAYLIST box. Use the arrow buttons on the playlist video to go to the next/previous video or use the list button + to get an overview over the whole playlist. You want to combine playlists? Just click the list button + on an already created playlist and use the add button. +

+
+
+ +
+
+
+
+ +
+
+

+ SubBox - Using Playlists +

+

+ If you don't want you playlists to clutter your front page, you can hide them in the playlist tab. This way you can add playlists that you want to watch in a few months time. +

+
+
+ +
+

You can search for videos in your SubBox by simply typing anywhere.

+
+
+ + + +
+
+
+

+ SubBox - The Trashbin +

+

+ If you removed videos from your list on accident or you changed your mind, you can just click on the + trashbin icon to get a list of all removed videos. Be aware these videos will be permanently deleted + after they have reached a certain age. You can set this age yourself, more on that later. +

+
+
+ +
+
+
+
+ +
+
+

+ SubBox - Search and Tags +

+

+ Hover over the "SubBox" to use the search bar. If one search keyword isn't enough, you can make use + of tags. Just create a tag and add all keywords you want to combine. When selecting a tag, all + videos, containing at least one of the keywords, will be shown. +

+
+
+ +

- Bright themes hurt your eyes? You can switch to a more comfortable dark theme with just one click on - the lightbulb. Red is nice and all but you prefer different colors? Switch to any accent color of - your choice in the settings tab. In there you can also set your preferences for: + Did you know you can visit this page from other devices in your network? The link is [Your IP]:2828

- - -
-
- -
- - -
-
- -
-
-

SubBox - Nigthly

+
+ + +
+
+
+

+ SubBox - Customize To + Your Needs +

+

+ Bright themes hurt your eyes? You can switch to a more comfortable dark theme with just one click. + Red is nice and all but you prefer different colours? Switch to any accent colour of + your choice in the settings tab. Set the time spans in which videos are retrieved and deleted. + Smart List Loading is a feature that helps you improve performance when you have a lot of videos in your SubBox at the cost of small stuttering on scrolling. +

+ +
+
+ +
+
+ +
+
+ +
+
+

SubBox - Nigthly

+

+ Download Videos in your SubBox and watch them later from your Harddrive without the need for + Internet. The desired Video Quality for your downloads can be set in the Settings Menu. Individual + Videos outside of your SubBox can be downloaded with the console command "-dlsv". +

+
+
+ +

- Download Videos in your SubBox and watch them later from your Harddrive without the need for - Internet. The desired Video Quality for your downloads can be set in the Settings Menu. Individual - Videos outside of your SubBox can be downloaded with the console command "-dlsv". + Check out SubBox on Github to not miss + future updates!

-
- - -
-

- Check SubBox on Github to not miss - future updates! -

-
- -
-
-

This is all you need to know.

- - Continue to SubBox - -
- -
+ + + +
+
+
+

This is all you need to know.

+ + Continue to SubBox + +
+
+
+ + +
+
+
+
+
+
+
+
+ +