├── Makefile ├── README.md ├── Tweak.h ├── Tweak.xm ├── VerduraiOS.plist ├── control ├── prefs ├── Makefile ├── Resources │ ├── Info.plist │ ├── Root.plist │ ├── icon copia.png │ ├── icon.png │ ├── icon@2x.png │ └── icon@3x.png ├── YRPRootListController.h ├── YRPRootListController.m └── layout │ └── Library │ └── PreferenceLoader │ └── Preferences │ └── VerduraiOSPreferences.plist ├── web ├── css │ ├── font-awesome.min.css │ ├── jquery.fancybox.css │ ├── menu.css │ └── style.css ├── img │ ├── guide_builder.svg │ ├── history.svg │ ├── home.svg │ ├── liked_videos.svg │ ├── read_comments.svg │ ├── search_channels.svg │ ├── search_playlists.svg │ ├── search_videos.svg │ ├── subscriptions.svg │ ├── verdurify.svg │ └── watch_later.svg ├── js │ ├── API_KEY.js │ ├── jquery.fancybox.js │ ├── jquery.min.js │ ├── read_comments.js │ ├── search_channel_name.js │ ├── search_playlists.js │ ├── search_playlists_channelID.js │ ├── search_videos.js │ └── specific_channel_name.js ├── menu.html ├── read_comments.html ├── search_channel_name.html ├── search_playlists.html ├── search_playlists_channelID.html ├── search_videos.html ├── specific_channel_id.html └── specific_channel_name.html └── weblight ├── css └── menu.css ├── img ├── guide_builder.svg ├── history.svg ├── home.svg ├── liked_videos.svg ├── read_comments.svg ├── search_channels.svg ├── search_playlists.svg ├── search_videos.svg ├── subscriptions.svg ├── verdurify.svg └── watch_later.svg └── menu.html /Makefile: -------------------------------------------------------------------------------- 1 | TARGET := iphone:clang:latest:7.0 2 | INSTALL_TARGET_PROCESSES = YouTube 3 | GO_EASY_ON_ME = 1 4 | FINALPACKAGE = 1 5 | 6 | export ARCHS = armv7 arm64 7 | include $(THEOS)/makefiles/common.mk 8 | 9 | TWEAK_NAME = VerduraiOS 10 | $(TWEAK_NAME)_FILES = Tweak.xm 11 | $(TWEAK_NAME)_CFLAGS = -fobjc-arc 12 | $(TWEAK_NAME)_FRAMEWORKS = UIKit Foundation MobileCoreServices SystemConfiguration Security JavaScriptCore Cephei 13 | $(TWEAK_NAME)_PRIVATE_FRAMEWORKS = MediaRemote MobileCoreServices SystemConfiguration Security JavaScriptCore Cephei 14 | $(TWEAK_NAME)_EXTRA_FRAMEWORKS += Cephei 15 | 16 | include $(THEOS_MAKE_PATH)/tweak.mk 17 | 18 | SUBPROJECTS += prefs 19 | 20 | after-install:: 21 | install.exec "killall -9 SpringBoard" 22 | 23 | include $(THEOS_MAKE_PATH)/aggregate.mk 24 | 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # verduraiOS 2 | A stubborn and a bit fidgety solution to use YouTube 10.11.11546 on older iOS (7-10) 3 | 4 | [VerduraiOS on Reddit](https://www.reddit.com/r/LegacyJailbreak/comments/uoxxyg/news_verduraios_a_petty_way_to_use_youtube/ "VerduraiOS on Reddit") 5 | 6 | [Watch Video](https://www.youtube.com/watch?v=mxyB9FGudBY) 7 | 8 | ## HOW TO USE IT - API KEY METHOD 9 | [Watch Video](https://www.youtube.com/watch?v=aIXa9EQ8fLk) 10 | **ENSURE YOU HAVE YOUTUBE YOUTUBE 10.11.11546 INSTALLED! IF UNSURE, CHECK THE ITUNESMETADATA.PLIST IN THE YOUTUBE BUNDLE** 11 | 1. First download the repo and compile the tweak in THEOS or either download the deb file from the Download section 12 | 2. Obtain your Google Youtube API key 13 | 3. Download and unzip the web.zip file from Download section (skip this step if you have download the repo) 14 | 4. Set your API Key by editing the "API_KEY.js" file in the js folder. 15 | 5. Transfer all files present inside the web folder in Youtube.app folder - do not copy the folder web as directory! All HTML files and folders need to be in the same where the info.plist of Youtube is located - aka the MAIN FOLDER. 16 | 6. Spoof the info.plist file with the latest version of Youtube 17 | 7. Install the tweak. It is set to "On" by default in the Settings, so you should be able to use it straight away. 18 | 19 | ## HOW TO USE IT - WITHOUT API KEY 20 | 1. First download the repo and compile the tweak in THEOS or either download the deb file from the Download section 21 | 2. Download and unzip the weblight.zip file from Download section 22 | 3. Transfer all files present inside the weblight folder in Youtube.app folder - do not copy the folder weblight as directory! All HTML files and folders need to be in the same where the info.plist of Youtube is located - aka the MAIN FOLDER. 23 | 4. Spoof the info.plist file with the latest version of Youtube 24 | 5. Install the tweak. It is set to "On" by default in the Settings, so you should be able to use it straight away. 25 | 6. Use Verdurify system to open Youtube pages. 26 | 27 | ## VERDURIFY 28 | Your daily greens with Javascript: paste any video id, playlist id or www.youtube.com link in here to have a direct parsing to the Youtube App. Very useful in case you don't want to use API Key. The get the link, you can use the search tab and look for video on the Youtube webview page. Once you find the video, just click share and copy the url. Past the URL in the text field present in the right menu and search. **REMEMBER TO REMOVE HTTP:// - HTTPS:// from the url!** 29 | 30 | ### AVAILABLE OPTIONS 31 | #### HOME 32 | Using youtube:/// scheme, it shows the homepage. It seems the only version of YouTube with the homepage visible at the moment. 33 | 34 | #### SEARCH 35 | Need API Key. Use internal html file and Javascript to search public videos by title, to then using youtube:/// scheme to open the video with internal YouTube video player. This will not break in future unless changes in Youtube API policy. 36 | 37 | #### HISTORY 38 | Using youtube:/// scheme, it shows the subscription feed page. It seems the only option available for the videos is "Save to Watch Later". 39 | 40 | #### WATCH LATER 41 | Using youtube:/// scheme, it shows the watch later playlist. The picture for the album is obviusly unavailable, but the playlist it is playable! 42 | 43 | #### LIKED VIDEOS 44 | Using youtube:/// scheme, it shows the liked videos playlist. The picture for the album is obviusly unavailable, but the playlist it is playable! 45 | 46 | #### GUIDE BUILDER 47 | Using youtube:/// scheme, it shows the feed page. 48 | 49 | #### SEARCH CHANNELS 50 | Need API Key. Use internal html file and Javascript to search public channels by title, or by ID to then using youtube:/// scheme to open either Upload playlists (when available) or the Channel page. This will work for a long time, unless changes in Youtube API policy. _NB: The rendering of Channels natively is very buggy_ 51 | 52 | #### SEARCH PLAYLISTS 53 | Need API Key. Use internal html file and Javascript to search public playlists by title, or by channel ID to then using youtube:/// scheme to open the the playlists (when available). This will work for a long time, unless changes in Youtube API policy. 54 | 55 | #### READ COMMENTS 56 | Need API Key. Use internal html file and Javascript to search public comments using the video id, to then show the comments on the side view. This will work for a long time, unless changes in Youtube API policy. 57 | 58 | 59 | ### TRICKS AND SHORTCUT 60 | - If you want extra tab, you can use the search button to generate more pages and therefore you can have more tabs! 61 | 62 | #### KNOWN ISSUE 63 | - Still can't figure out how to parse the query from the controllview to the html page and therefore implement a better search engine 64 | - Unable to retrive private information (eg private videos, leave comments and like) as missing oAuth2 token (work in progress) 65 | - Unable to retrive total liked count on video 66 | - Unable to upload videos ~~(this is is an issue with SLGoogleAuth on iOS).~~ unfortunately I will have to rely on other ways since the client id used to upload video has been disabled, it will mean to create a single instance of webview with internal HTML and Java possibly to fix this. 67 | - Unable to read the Push Notification (if you turn them on you will get them, but can't open them for now :/) - if anyone knows in wich ViewController they are stored that will help! 68 | 69 | #### THANKS TO 70 | - Will Hutchinson Builds for the base javascript code I've implemented in this tweak. I would like to tag you, but I can't find your repo anymore :/ 71 | - SamDaaEpic for menu svg images and feedbacks on menu restyling 72 | -------------------------------------------------------------------------------- /Tweak.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | 4 | @interface UIView () 5 | - (UIViewController*)_viewControllerForAncestor; 6 | @property(nonatomic, readwrite) UIWebView *webView; 7 | @property(nonatomic, readwrite) UIWebView *webViewDelegate; 8 | @end 9 | 10 | @interface YTSearchResultsViewController : UIViewController 11 | @property (strong, nonatomic) IBOutlet UIWebView *webView; 12 | @end 13 | 14 | @interface YTGuideResponseViewController : UIViewController 15 | @property (strong, nonatomic) IBOutlet UIWebView *webView; 16 | @end 17 | 18 | @interface ViewController : UIViewController 19 | @end 20 | -------------------------------------------------------------------------------- /Tweak.xm: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | #import 4 | #import 5 | #import 6 | #import "Tweak.h" 7 | #import 8 | 9 | HBPreferences *preferences; 10 | 11 | 12 | %group gSearchNewWay 13 | 14 | %hook YTSearchResultsViewController 15 | - (void)viewDidLoad { 16 | 17 | UIWebView *webView = [[[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] bounds]] self]; 18 | // NSURL *htmlURL = [[NSBundle mainBundle] URLForResource:@"youVerdura" withExtension:@"html"]; 19 | NSURL *youTubeURL = [NSURL URLWithString:@"https://m.youtube.com/channel/UCgaKqdG-0l-RqC_tLipiHPw"]; 20 | 21 | [self.view addSubview:webView]; 22 | [webView loadRequest:[NSURLRequest requestWithURL:youTubeURL]]; 23 | } 24 | %end 25 | 26 | %hook YTGuideResponseViewController 27 | - (void)viewDidLoad { 28 | UIWebView *webView = [[[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] bounds]] self]; 29 | webView.opaque = NO; 30 | webView.backgroundColor = [UIColor clearColor]; 31 | webView.scalesPageToFit = NO; 32 | NSURL *htmlURL = [[NSBundle mainBundle] URLForResource:@"menu" withExtension:@"html"]; 33 | 34 | [self.view addSubview:webView]; 35 | [webView loadRequest:[NSURLRequest requestWithURL:htmlURL]]; 36 | } 37 | 38 | %end 39 | %end 40 | 41 | %ctor { 42 | preferences = [[HBPreferences alloc] initWithIdentifier:@"com.piercingimpulse.verduraiospreferences"]; 43 | 44 | [preferences registerDefaults:@{ 45 | @"wantsSearch": @YES, 46 | 47 | }]; 48 | 49 | if ([preferences boolForKey:@"wantsSearch"]) %init(gSearchNewWay); 50 | 51 | %init(_ungrouped); 52 | } -------------------------------------------------------------------------------- /VerduraiOS.plist: -------------------------------------------------------------------------------- 1 | { Filter = { Bundles = ( "com.google.ios.youtube" ); }; } 2 | -------------------------------------------------------------------------------- /control: -------------------------------------------------------------------------------- 1 | Package: com.piercingimpulse.verduraios 2 | Name: Verdura iOS [BETA] 3 | Version: 0.0.2 4 | Architecture: iphoneos-arm 5 | Description: Tired to watch YouTube on Safari or Google Chrome on older device? Download YouTube 10.11.11546, spoof the version on the plist file and then get VerduraiOS! For the full guide on how to use it, please visit my GitHub page :) 6 | Maintainer: PiercingImpulse 7 | Author: PiercingImpulse 8 | Section: Tweaks 9 | Depends: mobilesubstrate (>= 0.9.5000) 10 | -------------------------------------------------------------------------------- /prefs/Makefile: -------------------------------------------------------------------------------- 1 | ARCHS = armv7 arm64 2 | TARGET := iphone:clang:latest:7.0 3 | 4 | include $(THEOS)/makefiles/common.mk 5 | 6 | BUNDLE_NAME = VerduraiOSPreferences 7 | 8 | VerduraiOSPreferences_FILES = YRPRootListController.m 9 | VerduraiOSPreferences_FRAMEWORKS = UIKit 10 | VerduraiOSPreferences_PRIVATE_FRAMEWORKS = Preferences 11 | VerduraiOSPreferences_EXTRA_FRAMEWORKS = Cephei CepheiPrefs 12 | VerduraiOSPreferences_INSTALL_PATH = /Library/PreferenceBundles 13 | VerduraiOSPreferences_CFLAGS = -fobjc-arc 14 | 15 | include $(THEOS_MAKE_PATH)/bundle.mk 16 | -------------------------------------------------------------------------------- /prefs/Resources/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | English 7 | CFBundleExecutable 8 | VerduraiOSPreferences 9 | CFBundleIdentifier 10 | com.piercingimpulse.verduraiospreferences 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundlePackageType 14 | BNDL 15 | CFBundleShortVersionString 16 | 1.0.0 17 | CFBundleSignature 18 | ???? 19 | CFBundleVersion 20 | 1.0 21 | NSPrincipalClass 22 | YRPRootListController 23 | 24 | 25 | -------------------------------------------------------------------------------- /prefs/Resources/Root.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | items 6 | 7 | 8 | cell 9 | PSGroupCell 10 | label 11 | Preferences 12 | 13 | 14 | cell 15 | PSSwitchCell 16 | default 17 | 18 | defaults 19 | com.piercingimpulse.verduraiospreferences 20 | key 21 | wantsSearch 22 | label 23 | Allow Search 24 | 25 | 26 | title 27 | VerduraiOS Preferences 28 | 29 | 30 | -------------------------------------------------------------------------------- /prefs/Resources/icon copia.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piercingimpulse/verduraiOS/c0a4abc788c8c900db82416b733363af5f4ef249/prefs/Resources/icon copia.png -------------------------------------------------------------------------------- /prefs/Resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piercingimpulse/verduraiOS/c0a4abc788c8c900db82416b733363af5f4ef249/prefs/Resources/icon.png -------------------------------------------------------------------------------- /prefs/Resources/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piercingimpulse/verduraiOS/c0a4abc788c8c900db82416b733363af5f4ef249/prefs/Resources/icon@2x.png -------------------------------------------------------------------------------- /prefs/Resources/icon@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/piercingimpulse/verduraiOS/c0a4abc788c8c900db82416b733363af5f4ef249/prefs/Resources/icon@3x.png -------------------------------------------------------------------------------- /prefs/YRPRootListController.h: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | @interface YRPRootListController : PSListController 4 | 5 | @end 6 | -------------------------------------------------------------------------------- /prefs/YRPRootListController.m: -------------------------------------------------------------------------------- 1 | #include "YRPRootListController.h" 2 | 3 | @implementation YRPRootListController 4 | 5 | - (NSArray *)specifiers { 6 | if (!_specifiers) { 7 | _specifiers = [self loadSpecifiersFromPlistName:@"Root" target:self]; 8 | } 9 | 10 | return _specifiers; 11 | } 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /prefs/layout/Library/PreferenceLoader/Preferences/VerduraiOSPreferences.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | entry 6 | 7 | bundle 8 | VerduraiOSPreferences 9 | cell 10 | PSLinkCell 11 | detail 12 | YRPRootListController 13 | icon 14 | icon.png 15 | isController 16 | 17 | label 18 | Verdura iOS 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /web/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} -------------------------------------------------------------------------------- /web/css/jquery.fancybox.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .fancybox-enabled { 3 | overflow: hidden; } 4 | 5 | .fancybox-enabled body { 6 | overflow: visible; 7 | height: 100%; } 8 | 9 | .fancybox-is-hidden { 10 | position: absolute; 11 | top: -9999px; 12 | left: -9999px; 13 | visibility: hidden; } 14 | 15 | .fancybox-container { 16 | position: fixed; 17 | top: 0; 18 | left: 0; 19 | width: 100%; 20 | height: 100%; 21 | z-index: 99993; 22 | -webkit-tap-highlight-color: transparent; 23 | -webkit-backface-visibility: hidden; 24 | backface-visibility: hidden; 25 | -webkit-transform: translateZ(0); 26 | transform: translateZ(0); } 27 | 28 | /* Make sure that the first one is on the top */ 29 | .fancybox-container ~ .fancybox-container { 30 | z-index: 99992; } 31 | 32 | .fancybox-outer, 33 | .fancybox-inner, 34 | .fancybox-bg, 35 | .fancybox-stage { 36 | position: absolute; 37 | top: 0; 38 | right: 0; 39 | bottom: 0; 40 | left: 0; } 41 | 42 | .fancybox-outer { 43 | overflow-y: auto; 44 | -webkit-overflow-scrolling: touch; } 45 | 46 | .fancybox-bg { 47 | opacity: 0; 48 | transition-duration: inherit; 49 | transition-property: opacity; 50 | transition-timing-function: cubic-bezier(0.47, 0, 0.74, 0.71); } 51 | 52 | .fancybox-is-open .fancybox-bg { 53 | opacity: 0.87; 54 | transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); } 55 | 56 | .fancybox-infobar, 57 | .fancybox-toolbar, 58 | .fancybox-caption-wrap { 59 | position: absolute; 60 | direction: ltr; 61 | z-index: 99997; 62 | opacity: 0; 63 | visibility: hidden; 64 | transition: opacity .25s, visibility 0s linear .25s; 65 | box-sizing: border-box; } 66 | 67 | .fancybox-show-infobar .fancybox-infobar, 68 | .fancybox-show-toolbar .fancybox-toolbar, 69 | .fancybox-show-caption .fancybox-caption-wrap { 70 | opacity: 1; 71 | visibility: visible; 72 | transition: opacity .25s, visibility 0s; } 73 | 74 | .fancybox-infobar { 75 | top: 0; 76 | left: 50%; 77 | margin-left: -79px; } 78 | 79 | .fancybox-infobar__body { 80 | display: inline-block; 81 | width: 70px; 82 | line-height: 44px; 83 | font-size: 13px; 84 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 85 | text-align: center; 86 | color: #ddd; 87 | background-color: rgba(30, 30, 30, 0.7); 88 | pointer-events: none; 89 | -webkit-user-select: none; 90 | -moz-user-select: none; 91 | -ms-user-select: none; 92 | user-select: none; 93 | -webkit-touch-callout: none; 94 | -webkit-tap-highlight-color: transparent; 95 | -webkit-font-smoothing: subpixel-antialiased; } 96 | 97 | .fancybox-toolbar { 98 | top: 0; 99 | right: 0; } 100 | 101 | .fancybox-stage { 102 | overflow: hidden; 103 | direction: ltr; 104 | z-index: 99994; 105 | -webkit-transform: translate3d(0, 0, 0); } 106 | 107 | .fancybox-slide { 108 | position: absolute; 109 | top: 0; 110 | left: 0; 111 | width: 100%; 112 | height: 100%; 113 | margin: 0; 114 | padding: 0; 115 | overflow: auto; 116 | outline: none; 117 | white-space: normal; 118 | box-sizing: border-box; 119 | text-align: center; 120 | z-index: 99994; 121 | -webkit-overflow-scrolling: touch; 122 | display: none; 123 | -webkit-backface-visibility: hidden; 124 | backface-visibility: hidden; 125 | transition-property: opacity, -webkit-transform; 126 | transition-property: transform, opacity; 127 | transition-property: transform, opacity, -webkit-transform; 128 | -webkit-transform-style: preserve-3d; 129 | transform-style: preserve-3d; } 130 | 131 | .fancybox-slide::before { 132 | content: ''; 133 | display: inline-block; 134 | vertical-align: middle; 135 | height: 100%; 136 | width: 0; } 137 | 138 | .fancybox-is-sliding .fancybox-slide, 139 | .fancybox-slide--previous, 140 | .fancybox-slide--current, 141 | .fancybox-slide--next { 142 | display: block; } 143 | 144 | .fancybox-slide--image { 145 | overflow: visible; } 146 | 147 | .fancybox-slide--image::before { 148 | display: none; } 149 | 150 | .fancybox-slide--video .fancybox-content, 151 | .fancybox-slide--video iframe { 152 | background: #000; } 153 | 154 | .fancybox-slide--map .fancybox-content, 155 | .fancybox-slide--map iframe { 156 | background: #E5E3DF; } 157 | 158 | .fancybox-slide--next { 159 | z-index: 99995; } 160 | 161 | .fancybox-slide > * { 162 | display: inline-block; 163 | position: relative; 164 | padding: 24px; 165 | margin: 44px 0 44px; 166 | border-width: 0; 167 | vertical-align: middle; 168 | text-align: left; 169 | background-color: #fff; 170 | overflow: auto; 171 | box-sizing: border-box; } 172 | 173 | .fancybox-slide .fancybox-image-wrap { 174 | position: absolute; 175 | top: 0; 176 | left: 0; 177 | margin: 0; 178 | padding: 0; 179 | border: 0; 180 | z-index: 99995; 181 | background: transparent; 182 | cursor: default; 183 | overflow: visible; 184 | -webkit-transform-origin: top left; 185 | -ms-transform-origin: top left; 186 | transform-origin: top left; 187 | background-size: 100% 100%; 188 | background-repeat: no-repeat; 189 | -webkit-backface-visibility: hidden; 190 | backface-visibility: hidden; } 191 | 192 | .fancybox-can-zoomOut .fancybox-image-wrap { 193 | cursor: -webkit-zoom-out; 194 | cursor: zoom-out; } 195 | 196 | .fancybox-can-zoomIn .fancybox-image-wrap { 197 | cursor: -webkit-zoom-in; 198 | cursor: zoom-in; } 199 | 200 | .fancybox-can-drag .fancybox-image-wrap { 201 | cursor: -webkit-grab; 202 | cursor: grab; } 203 | 204 | .fancybox-is-dragging .fancybox-image-wrap { 205 | cursor: -webkit-grabbing; 206 | cursor: grabbing; } 207 | 208 | .fancybox-image, 209 | .fancybox-spaceball { 210 | position: absolute; 211 | top: 0; 212 | left: 0; 213 | width: 100%; 214 | height: 100%; 215 | margin: 0; 216 | padding: 0; 217 | border: 0; 218 | max-width: none; 219 | max-height: none; } 220 | 221 | .fancybox-spaceball { 222 | z-index: 1; } 223 | 224 | .fancybox-slide--iframe .fancybox-content { 225 | padding: 0; 226 | width: 80%; 227 | height: 80%; 228 | max-width: calc(100% - 100px); 229 | max-height: calc(100% - 88px); 230 | overflow: visible; 231 | background: #fff; } 232 | 233 | .fancybox-iframe { 234 | display: block; 235 | margin: 0; 236 | padding: 0; 237 | border: 0; 238 | width: 100%; 239 | height: 100%; 240 | background: #fff; } 241 | 242 | .fancybox-error { 243 | margin: 0; 244 | padding: 40px; 245 | width: 100%; 246 | max-width: 380px; 247 | background: #fff; 248 | cursor: default; } 249 | 250 | .fancybox-error p { 251 | margin: 0; 252 | padding: 0; 253 | color: #444; 254 | font: 16px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; } 255 | 256 | .fancybox-close-small { 257 | position: absolute; 258 | top: 0; 259 | right: 0; 260 | width: 44px; 261 | height: 44px; 262 | padding: 0; 263 | margin: 0; 264 | border: 0; 265 | border-radius: 0; 266 | outline: none; 267 | background: transparent; 268 | z-index: 10; 269 | cursor: pointer; } 270 | 271 | .fancybox-close-small:after { 272 | content: '×'; 273 | position: absolute; 274 | top: 5px; 275 | right: 5px; 276 | width: 30px; 277 | height: 30px; 278 | font: 20px/30px Arial,"Helvetica Neue",Helvetica,sans-serif; 279 | color: #888; 280 | font-weight: 300; 281 | text-align: center; 282 | border-radius: 50%; 283 | border-width: 0; 284 | background: #fff; 285 | transition: background .25s; 286 | box-sizing: border-box; 287 | z-index: 2; } 288 | 289 | .fancybox-close-small:focus:after { 290 | outline: 1px dotted #888; } 291 | 292 | .fancybox-close-small:hover:after { 293 | color: #555; 294 | background: #eee; } 295 | 296 | .fancybox-slide--iframe .fancybox-close-small { 297 | top: 0; 298 | right: -44px; } 299 | 300 | .fancybox-slide--iframe .fancybox-close-small:after { 301 | background: transparent; 302 | font-size: 35px; 303 | color: #aaa; } 304 | 305 | .fancybox-slide--iframe .fancybox-close-small:hover:after { 306 | color: #fff; } 307 | 308 | /* Caption */ 309 | .fancybox-caption-wrap { 310 | bottom: 0; 311 | left: 0; 312 | right: 0; 313 | padding: 60px 30px 0 30px; 314 | background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.6) 80%, rgba(0, 0, 0, 0.8) 100%); 315 | pointer-events: none; } 316 | 317 | .fancybox-caption { 318 | padding: 30px 0; 319 | border-top: 1px solid rgba(255, 255, 255, 0.4); 320 | font-size: 14px; 321 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 322 | color: #fff; 323 | line-height: 20px; 324 | -webkit-text-size-adjust: none; } 325 | 326 | .fancybox-caption a, 327 | .fancybox-caption button, 328 | .fancybox-caption select { 329 | pointer-events: all; } 330 | 331 | .fancybox-caption a { 332 | color: #fff; 333 | text-decoration: underline; } 334 | 335 | /* Buttons */ 336 | .fancybox-button { 337 | display: inline-block; 338 | position: relative; 339 | margin: 0; 340 | padding: 0; 341 | border: 0; 342 | width: 44px; 343 | height: 44px; 344 | line-height: 44px; 345 | text-align: center; 346 | background: transparent; 347 | color: #ddd; 348 | border-radius: 0; 349 | cursor: pointer; 350 | vertical-align: top; 351 | outline: none; } 352 | 353 | .fancybox-button[disabled] { 354 | cursor: default; 355 | pointer-events: none; } 356 | 357 | .fancybox-infobar__body, .fancybox-button { 358 | background: rgba(30, 30, 30, 0.6); } 359 | 360 | .fancybox-button:hover:not([disabled]) { 361 | color: #fff; 362 | background: rgba(0, 0, 0, 0.8); } 363 | 364 | .fancybox-button::before, 365 | .fancybox-button::after { 366 | content: ''; 367 | pointer-events: none; 368 | position: absolute; 369 | background-color: currentColor; 370 | color: currentColor; 371 | opacity: 0.9; 372 | box-sizing: border-box; 373 | display: inline-block; } 374 | 375 | .fancybox-button[disabled]::before, 376 | .fancybox-button[disabled]::after { 377 | opacity: 0.3; } 378 | 379 | .fancybox-button--left::after, 380 | .fancybox-button--right::after { 381 | top: 18px; 382 | width: 6px; 383 | height: 6px; 384 | background: transparent; 385 | border-top: solid 2px currentColor; 386 | border-right: solid 2px currentColor; } 387 | 388 | .fancybox-button--left::after { 389 | left: 20px; 390 | -webkit-transform: rotate(-135deg); 391 | -ms-transform: rotate(-135deg); 392 | transform: rotate(-135deg); } 393 | 394 | .fancybox-button--right::after { 395 | right: 20px; 396 | -webkit-transform: rotate(45deg); 397 | -ms-transform: rotate(45deg); 398 | transform: rotate(45deg); } 399 | 400 | .fancybox-button--left { 401 | border-bottom-left-radius: 5px; } 402 | 403 | .fancybox-button--right { 404 | border-bottom-right-radius: 5px; } 405 | 406 | .fancybox-button--close::before, .fancybox-button--close::after { 407 | content: ''; 408 | display: inline-block; 409 | position: absolute; 410 | height: 2px; 411 | width: 16px; 412 | top: calc(50% - 1px); 413 | left: calc(50% - 8px); } 414 | 415 | .fancybox-button--close::before { 416 | -webkit-transform: rotate(45deg); 417 | -ms-transform: rotate(45deg); 418 | transform: rotate(45deg); } 419 | 420 | .fancybox-button--close::after { 421 | -webkit-transform: rotate(-45deg); 422 | -ms-transform: rotate(-45deg); 423 | transform: rotate(-45deg); } 424 | 425 | /* Navigation arrows */ 426 | .fancybox-arrow { 427 | position: absolute; 428 | top: 50%; 429 | margin: -50px 0 0 0; 430 | height: 100px; 431 | width: 54px; 432 | padding: 0; 433 | border: 0; 434 | outline: none; 435 | background: none; 436 | cursor: pointer; 437 | z-index: 99995; 438 | opacity: 0; 439 | -webkit-user-select: none; 440 | -moz-user-select: none; 441 | -ms-user-select: none; 442 | user-select: none; 443 | transition: opacity .25s; } 444 | 445 | .fancybox-arrow::after { 446 | content: ''; 447 | position: absolute; 448 | top: 28px; 449 | width: 44px; 450 | height: 44px; 451 | background-color: rgba(30, 30, 30, 0.8); 452 | background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4=); 453 | background-repeat: no-repeat; 454 | background-position: center center; 455 | background-size: 24px 24px; } 456 | 457 | .fancybox-arrow--right { 458 | right: 0; } 459 | 460 | .fancybox-arrow--left { 461 | left: 0; 462 | -webkit-transform: scaleX(-1); 463 | -ms-transform: scaleX(-1); 464 | transform: scaleX(-1); } 465 | 466 | .fancybox-arrow--right::after, 467 | .fancybox-arrow--left::after { 468 | left: 0; } 469 | 470 | .fancybox-show-nav .fancybox-arrow { 471 | opacity: 0.6; } 472 | 473 | .fancybox-show-nav .fancybox-arrow[disabled] { 474 | opacity: 0.3; } 475 | 476 | /* Loading indicator */ 477 | .fancybox-loading { 478 | border: 6px solid rgba(100, 100, 100, 0.4); 479 | border-top: 6px solid rgba(255, 255, 255, 0.6); 480 | border-radius: 100%; 481 | height: 50px; 482 | width: 50px; 483 | -webkit-animation: fancybox-rotate .8s infinite linear; 484 | animation: fancybox-rotate .8s infinite linear; 485 | background: transparent; 486 | position: absolute; 487 | top: 50%; 488 | left: 50%; 489 | margin-top: -25px; 490 | margin-left: -25px; 491 | z-index: 99999; } 492 | 493 | @-webkit-keyframes fancybox-rotate { 494 | from { 495 | -webkit-transform: rotate(0deg); 496 | transform: rotate(0deg); } 497 | to { 498 | -webkit-transform: rotate(359deg); 499 | transform: rotate(359deg); } } 500 | 501 | @keyframes fancybox-rotate { 502 | from { 503 | -webkit-transform: rotate(0deg); 504 | transform: rotate(0deg); } 505 | to { 506 | -webkit-transform: rotate(359deg); 507 | transform: rotate(359deg); } } 508 | 509 | /* Transition effects */ 510 | .fancybox-animated { 511 | transition-timing-function: cubic-bezier(0, 0, 0.25, 1); } 512 | 513 | /* transitionEffect: slide */ 514 | .fancybox-fx-slide.fancybox-slide--previous { 515 | -webkit-transform: translate3d(-100%, 0, 0); 516 | transform: translate3d(-100%, 0, 0); 517 | opacity: 0; } 518 | 519 | .fancybox-fx-slide.fancybox-slide--next { 520 | -webkit-transform: translate3d(100%, 0, 0); 521 | transform: translate3d(100%, 0, 0); 522 | opacity: 0; } 523 | 524 | .fancybox-fx-slide.fancybox-slide--current { 525 | -webkit-transform: translate3d(0, 0, 0); 526 | transform: translate3d(0, 0, 0); 527 | opacity: 1; } 528 | 529 | /* transitionEffect: fade */ 530 | .fancybox-fx-fade.fancybox-slide--previous, 531 | .fancybox-fx-fade.fancybox-slide--next { 532 | opacity: 0; 533 | transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); } 534 | 535 | .fancybox-fx-fade.fancybox-slide--current { 536 | opacity: 1; } 537 | 538 | /* transitionEffect: zoom-in-out */ 539 | .fancybox-fx-zoom-in-out.fancybox-slide--previous { 540 | -webkit-transform: scale3d(1.5, 1.5, 1.5); 541 | transform: scale3d(1.5, 1.5, 1.5); 542 | opacity: 0; } 543 | 544 | .fancybox-fx-zoom-in-out.fancybox-slide--next { 545 | -webkit-transform: scale3d(0.5, 0.5, 0.5); 546 | transform: scale3d(0.5, 0.5, 0.5); 547 | opacity: 0; } 548 | 549 | .fancybox-fx-zoom-in-out.fancybox-slide--current { 550 | -webkit-transform: scale3d(1, 1, 1); 551 | transform: scale3d(1, 1, 1); 552 | opacity: 1; } 553 | 554 | /* transitionEffect: rotate */ 555 | .fancybox-fx-rotate.fancybox-slide--previous { 556 | -webkit-transform: rotate(-360deg); 557 | -ms-transform: rotate(-360deg); 558 | transform: rotate(-360deg); 559 | opacity: 0; } 560 | 561 | .fancybox-fx-rotate.fancybox-slide--next { 562 | -webkit-transform: rotate(360deg); 563 | -ms-transform: rotate(360deg); 564 | transform: rotate(360deg); 565 | opacity: 0; } 566 | 567 | .fancybox-fx-rotate.fancybox-slide--current { 568 | -webkit-transform: rotate(0deg); 569 | -ms-transform: rotate(0deg); 570 | transform: rotate(0deg); 571 | opacity: 1; } 572 | 573 | /* transitionEffect: circular */ 574 | .fancybox-fx-circular.fancybox-slide--previous { 575 | -webkit-transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); 576 | transform: scale3d(0, 0, 0) translate3d(-100%, 0, 0); 577 | opacity: 0; } 578 | 579 | .fancybox-fx-circular.fancybox-slide--next { 580 | -webkit-transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); 581 | transform: scale3d(0, 0, 0) translate3d(100%, 0, 0); 582 | opacity: 0; } 583 | 584 | .fancybox-fx-circular.fancybox-slide--current { 585 | -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 586 | transform: scale3d(1, 1, 1) translate3d(0, 0, 0); 587 | opacity: 1; } 588 | 589 | /* transitionEffect: tube */ 590 | .fancybox-fx-tube.fancybox-slide--previous { 591 | -webkit-transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); 592 | transform: translate3d(-100%, 0, 0) scale(0.1) skew(-10deg); } 593 | 594 | .fancybox-fx-tube.fancybox-slide--next { 595 | -webkit-transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); 596 | transform: translate3d(100%, 0, 0) scale(0.1) skew(10deg); } 597 | 598 | .fancybox-fx-tube.fancybox-slide--current { 599 | -webkit-transform: translate3d(0, 0, 0) scale(1); 600 | transform: translate3d(0, 0, 0) scale(1); } 601 | 602 | /* Styling for Small-Screen Devices */ 603 | @media all and (max-width: 800px) { 604 | .fancybox-infobar { 605 | left: 0; 606 | margin-left: 0; } 607 | .fancybox-button--left, 608 | .fancybox-button--right { 609 | display: none !important; } 610 | .fancybox-caption { 611 | padding: 20px 0; 612 | margin: 0; } } 613 | 614 | /* Fullscreen */ 615 | .fancybox-button--fullscreen::before { 616 | width: 15px; 617 | height: 11px; 618 | left: calc(50% - 7px); 619 | top: calc(50% - 6px); 620 | border: 2px solid; 621 | background: none; } 622 | 623 | /* Slideshow button */ 624 | .fancybox-button--play::before, 625 | .fancybox-button--pause::before { 626 | top: calc(50% - 6px); 627 | left: calc(50% - 4px); 628 | background: transparent; } 629 | 630 | .fancybox-button--play::before { 631 | width: 0; 632 | height: 0; 633 | border-top: 6px inset transparent; 634 | border-bottom: 6px inset transparent; 635 | border-left: 10px solid; 636 | border-radius: 1px; } 637 | 638 | .fancybox-button--pause::before { 639 | width: 7px; 640 | height: 11px; 641 | border-style: solid; 642 | border-width: 0 2px 0 2px; } 643 | 644 | /* Thumbs */ 645 | .fancybox-thumbs { 646 | display: none; } 647 | 648 | .fancybox-button--thumbs { 649 | display: none; } 650 | 651 | @media all and (min-width: 800px) { 652 | .fancybox-button--thumbs { 653 | display: inline-block; } 654 | .fancybox-button--thumbs span { 655 | font-size: 23px; } 656 | .fancybox-button--thumbs::before { 657 | width: 3px; 658 | height: 3px; 659 | top: calc(50% - 2px); 660 | left: calc(50% - 2px); 661 | box-shadow: 0 -4px 0, -4px -4px 0, 4px -4px 0, 0 0 0 32px inset, -4px 0 0, 4px 0 0, 0 4px 0, -4px 4px 0, 4px 4px 0; } 662 | .fancybox-thumbs { 663 | position: absolute; 664 | top: 0; 665 | right: 0; 666 | bottom: 0; 667 | left: auto; 668 | width: 220px; 669 | margin: 0; 670 | padding: 5px 5px 0 0; 671 | background: #fff; 672 | word-break: normal; 673 | -webkit-tap-highlight-color: transparent; 674 | -webkit-overflow-scrolling: touch; 675 | -ms-overflow-style: -ms-autohiding-scrollbar; 676 | box-sizing: border-box; 677 | z-index: 99995; } 678 | .fancybox-show-thumbs .fancybox-thumbs { 679 | display: block; } 680 | .fancybox-show-thumbs .fancybox-inner { 681 | right: 220px; } 682 | .fancybox-thumbs > ul { 683 | list-style: none; 684 | position: absolute; 685 | position: relative; 686 | width: 100%; 687 | height: 100%; 688 | margin: 0; 689 | padding: 0; 690 | overflow-x: hidden; 691 | overflow-y: auto; 692 | font-size: 0; } 693 | .fancybox-thumbs > ul > li { 694 | float: left; 695 | overflow: hidden; 696 | max-width: 50%; 697 | padding: 0; 698 | margin: 0; 699 | width: 105px; 700 | height: 75px; 701 | position: relative; 702 | cursor: pointer; 703 | outline: none; 704 | border: 5px solid transparent; 705 | border-top-width: 0; 706 | border-right-width: 0; 707 | -webkit-tap-highlight-color: transparent; 708 | -webkit-backface-visibility: hidden; 709 | backface-visibility: hidden; 710 | box-sizing: border-box; } 711 | li.fancybox-thumbs-loading { 712 | background: rgba(0, 0, 0, 0.1); } 713 | .fancybox-thumbs > ul > li > img { 714 | position: absolute; 715 | top: 0; 716 | left: 0; 717 | min-width: 100%; 718 | min-height: 100%; 719 | max-width: none; 720 | max-height: none; 721 | -webkit-touch-callout: none; 722 | -webkit-user-select: none; 723 | -moz-user-select: none; 724 | -ms-user-select: none; 725 | user-select: none; } 726 | .fancybox-thumbs > ul > li:before { 727 | content: ''; 728 | position: absolute; 729 | top: 0; 730 | right: 0; 731 | bottom: 0; 732 | left: 0; 733 | border-radius: 2px; 734 | border: 4px solid #4ea7f9; 735 | z-index: 99991; 736 | opacity: 0; 737 | transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); } 738 | .fancybox-thumbs > ul > li.fancybox-thumbs-active:before { 739 | opacity: 1; } } -------------------------------------------------------------------------------- /web/css/menu.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: transparent; 3 | font-family: Roboto, Arial, 'Sans Serif', 'YT Sans'; 4 | text-transform: uppercase; 5 | 6 | } 7 | .divmenu { 8 | font-size:medium; 9 | border-bottom:red 1px outset; 10 | block-size:inline-block; 11 | margin:2px; 12 | 13 | } 14 | .divmenu:hover { 15 | font-weight: bold; 16 | color: #FAFAFA; 17 | border-bottom:white inset; 18 | background-color: red; 19 | margin:2px; 20 | } 21 | .imgmenu { 22 | vertical-align: middle; 23 | } 24 | .divinside:hover { 25 | -webkit-filter: invert(100%); 26 | color: #FAFAFA; 27 | } -------------------------------------------------------------------------------- /web/css/style.css: -------------------------------------------------------------------------------- 1 | /* Styles go here */ 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | body { 9 | font-family: 'Segoue', sans-serif; 10 | line-height: 1.6em; 11 | font-size: 14px; 12 | color: #666; 13 | background: #e1e1e1 url(images/creampaper.png); 14 | } 15 | 16 | a { 17 | text-decoration: none; 18 | color: #333; 19 | } 20 | 21 | #container { 22 | max-width: 100%; 23 | margin-right:55%; 24 | background: #fff; 25 | } 26 | 27 | .clearfix { 28 | clear: both; 29 | } 30 | 31 | header { 32 | padding: 30px 20px; 33 | margin-bottom: 5px; 34 | background: #f4f4f4 35 | } 36 | 37 | header h1 { 38 | color: #000; 39 | } 40 | 41 | header span { 42 | color: #dd2826 43 | } 44 | 45 | section { 46 | padding: 30px 20px 20px 20px; 47 | } 48 | 49 | footer { 50 | padding: 30px; 51 | background: #f4f4f4; 52 | text-align: center; 53 | } 54 | 55 | #search-form { 56 | margin-bottom: 15px; 57 | } 58 | 59 | .field-container { 60 | position: relative; 61 | width: 90%; 62 | margin: 0 auto; 63 | } 64 | 65 | #submit-btn{ 66 | 67 | position: absolute; 68 | right: 58%; 69 | top: 5px; 70 | height: 32px; 71 | width: 32px; 72 | border: 0; 73 | cursor: pointer; 74 | zoom: 1; 75 | opacity: 0.65; 76 | background: transparent url("https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-32.png") top left no-repeat; 77 | 78 | } 79 | 80 | 81 | .search-field { 82 | box-sizing: border-box; 83 | display: block; 84 | width: 45%; 85 | padding: 11px 7px; 86 | padding-right: 43px; 87 | background: #fff; 88 | color: #ccc; 89 | border: 1px solid #c8c8c8; 90 | font-size: 1.6em; 91 | border-bottom-color: #d2e2e7; 92 | border-radius: 1px; 93 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 6px #f0f0f0; 94 | -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 6px #f0f0f0; 95 | -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 0 6px #f0f0f0; 96 | } 97 | 98 | #submit-btn:hover { 99 | filter: alpha(opacity=0); 100 | opacity: 0.9; 101 | } 102 | 103 | /*Style Results*/ 104 | 105 | #results li { 106 | 107 | padding: 10px o; 108 | border-bottom: 1px #ccc dotted; 109 | list-style: none; 110 | overflow: auto; 111 | 112 | 113 | 114 | } 115 | 116 | .list-left{ 117 | 118 | float: left; 119 | width: 20%; 120 | 121 | } 122 | 123 | .list-left img{ 124 | 125 | width: 100%; 126 | padding: 3px; 127 | border: solid #ccc 1px; 128 | 129 | } 130 | 131 | .list-right { 132 | 133 | float:right; 134 | width: 78%; 135 | 136 | 137 | } 138 | 139 | .ctitle { 140 | color: #dd2826; 141 | 142 | } 143 | 144 | .button-container { 145 | 146 | margin-top: 25px; 147 | 148 | } 149 | 150 | .paging-button { 151 | 152 | background: #f4f4f4; 153 | padding: 8px 13px; 154 | border: #ccc 1px solid; 155 | border-radius: 5px; 156 | color: #333; 157 | margin: 10px; 158 | cursor: pointer; 159 | } -------------------------------------------------------------------------------- /web/img/guide_builder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/img/history.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/img/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/img/liked_videos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/img/read_comments.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/img/search_channels.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/img/search_playlists.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/img/search_videos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/img/subscriptions.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/img/verdurify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /web/img/watch_later.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/js/API_KEY.js: -------------------------------------------------------------------------------- 1 | // Input here your API Key 2 | var API_KEY = 'YOUR_API_KEY'; 3 | -------------------------------------------------------------------------------- /web/js/read_comments.js: -------------------------------------------------------------------------------- 1 | // Searchbar Event Handler 2 | 3 | $(function (){ 4 | 5 | 6 | var searchField = $('#query'); 7 | var icon = $('#submit-btn'); 8 | 9 | //Focus Handler 10 | 11 | $(searchField).on('focus', function(){ 12 | 13 | $(this).animate({ 14 | 15 | width: '100%' 16 | 17 | }, 400); 18 | $(icon).animate({ 19 | 20 | right: '2%' 21 | 22 | }, 400); 23 | 24 | }); 25 | 26 | //Blur EventHandler 27 | 28 | $(searchField).on('blur', function(){ 29 | 30 | if(searchField.val() == 0){ 31 | 32 | $(searchField).animate({ 33 | 34 | width: '45%' 35 | 36 | }, 400); 37 | 38 | $(icon).animate({ 39 | 40 | right: '58%' 41 | 42 | }, 400); 43 | 44 | }; 45 | }); 46 | 47 | // cancels default action of the form 48 | 49 | $('#search-form').submit(function(e){ 50 | 51 | e.preventDefault(); 52 | 53 | }) 54 | 55 | }); 56 | 57 | 58 | function search(){ 59 | 60 | //Clear Results 61 | 62 | $('#results').html(''); 63 | $('.buttons').html(''); 64 | 65 | //Get Form Input 66 | 67 | q = $('#query').val(); 68 | 69 | //Run GET request on API 70 | 71 | $.get("https://www.googleapis.com/youtube/v3/commentThreads", 72 | { 73 | 74 | part: 'snippet, id', 75 | videoId: q, 76 | key: API_KEY}, 77 | 78 | function(data){ 79 | 80 | var nextPageToken = data.nextPageToken; //gets the pages of videos 81 | var prevPageToken = data.prevPageToken; 82 | 83 | console.log(data); 84 | 85 | $.each(data.items, function(i, items){ 86 | 87 | //Get Output 88 | var output = getOutput(items) 89 | //Display Output 90 | 91 | $('#results').append(output) 92 | 93 | 94 | }); 95 | 96 | //Display Results 97 | 98 | var buttons = getButtons(prevPageToken, nextPageToken); 99 | 100 | //Display Button 101 | 102 | $('.buttons').append(buttons) 103 | } 104 | 105 | ); 106 | 107 | } 108 | 109 | //Next Page Function 110 | 111 | function nextPage(){ 112 | 113 | var token = $('#next-button').data('token'); // .data('token') same as using data-token value. 114 | 115 | var q = $('#next-button').data('query'); 116 | 117 | 118 | //Clear Results 119 | 120 | $('#results').html(''); 121 | $('.buttons').html(''); 122 | 123 | //Get Form Input 124 | 125 | q = $('#query').val(); 126 | 127 | //Run GET request on API 128 | 129 | $.get( 130 | "https://www.googleapis.com/youtube/v3/commentThreads",{ 131 | 132 | part: 'snippet, id', 133 | videoId: q, 134 | pageToken: token, 135 | key: API_KEY}, 136 | 137 | function(data){ 138 | 139 | var nextPageToken = data.nextPageToken; //gets the pages of videos 140 | var prevPageToken = data.prevPageToken; 141 | 142 | console.log(data); 143 | 144 | $.each(data.items, function(i, items){ 145 | 146 | //Get Output 147 | var output = getOutput(items) 148 | //Display Output 149 | 150 | $('#results').append(output) 151 | 152 | 153 | }); 154 | 155 | //Display Results 156 | 157 | var buttons = getButtons(prevPageToken, nextPageToken); 158 | 159 | //Display Button 160 | 161 | $('.buttons').append(buttons) 162 | } 163 | 164 | ); 165 | 166 | 167 | 168 | } 169 | 170 | //Previous Page Function 171 | 172 | function prevPage(){ 173 | 174 | var token = $('#prev-button').data('token'); // .data('token') same as using data-token value. 175 | 176 | var q = $('#prev-button').data('query'); 177 | 178 | 179 | //Clear Results 180 | 181 | $('#results').html(''); 182 | $('.buttons').html(''); 183 | 184 | // Get Form Input 185 | q = $('#query').val(); 186 | 187 | //Run GET request on API 188 | 189 | $.get( 190 | "https://www.googleapis.com/youtube/v3/commentThreads",{ 191 | 192 | part: 'snippet, id', 193 | videoId: q, 194 | pageToken: token, 195 | key: API_KEY}, 196 | 197 | function(data){ 198 | 199 | var nextPageToken = data.nextPageToken; //gets the pages of videos 200 | var prevPageToken = data.prevPageToken; 201 | 202 | console.log(data); 203 | 204 | $.each(data.items, function(i, items){ 205 | 206 | //Get Output 207 | var output = getOutput(items) 208 | //Display Output 209 | 210 | $('#results').append(output) 211 | 212 | 213 | }); 214 | 215 | //Display Results 216 | 217 | var buttons = getButtons(prevPageToken, nextPageToken); 218 | 219 | //Display Button 220 | 221 | $('.buttons').append(buttons) 222 | } 223 | 224 | ); 225 | 226 | 227 | 228 | } 229 | 230 | 231 | //Build Output 232 | 233 | function getOutput(items){ 234 | 235 | var id = items.id; 236 | var channelId = items.snippet.topLevelComment.snippet.authorChannelId.value; 237 | var description = items.snippet.topLevelComment.snippet.textDisplay; 238 | var thumb = items.snippet.topLevelComment.snippet.authorProfileImageUrl; 239 | var authorName = items.snippet.topLevelComment.snippet.authorDisplayName; 240 | var videoDate = items.snippet.topLevelComment.snippet.publishedAt; 241 | 242 | 243 | //Build Output String 244 | 245 | var outPut = '
  • ' + 246 | '
    ' + 247 | '' + 248 | '
    ' + 249 | '
    ' + 250 | ' By '+authorName+' on '+videoDate+'' + 251 | '

    '+description+'

    ' + 252 | '
    ' + 253 | '
    • ' + 254 | '
    ' 255 | 256 | return outPut; 257 | 258 | 259 | 260 | 261 | 262 | }; 263 | 264 | //Build Buttons 265 | 266 | function getButtons(prevPageToken, nextPageToken){ 267 | 268 | if(!prevPageToken){ //if there is no previous page 269 | 270 | var btnoutput = '
    '+'
    '; 271 | 272 | } else { 273 | 274 | var btnoutput = '
    '+'' + 275 | '
    '; 277 | 278 | } 279 | 280 | return btnoutput; 281 | 282 | } -------------------------------------------------------------------------------- /web/js/search_channel_name.js: -------------------------------------------------------------------------------- 1 | // Searchbar Event Handler 2 | 3 | $(function (){ 4 | 5 | 6 | var searchField = $('#query'); 7 | var icon = $('#submit-btn'); 8 | 9 | //Focus Handler 10 | 11 | $(searchField).on('focus', function(){ 12 | 13 | $(this).animate({ 14 | 15 | width: '100%' 16 | 17 | }, 400); 18 | $(icon).animate({ 19 | 20 | right: '2%' 21 | 22 | }, 400); 23 | 24 | }); 25 | 26 | //Blur EventHandler 27 | 28 | $(searchField).on('blur', function(){ 29 | 30 | if(searchField.val() == 0){ 31 | 32 | $(searchField).animate({ 33 | 34 | width: '45%' 35 | 36 | }, 400); 37 | 38 | $(icon).animate({ 39 | 40 | right: '58%' 41 | 42 | }, 400); 43 | 44 | }; 45 | }); 46 | 47 | // cancels default action of the form 48 | 49 | $('#search-form').submit(function(e){ 50 | 51 | e.preventDefault(); 52 | 53 | }) 54 | 55 | }); 56 | 57 | 58 | function search(){ 59 | 60 | //Clear Results 61 | 62 | $('#results').html(''); 63 | $('.buttons').html(''); 64 | 65 | //Get Form Input 66 | 67 | q = $('#query').val(); 68 | 69 | //Run GET request on API 70 | 71 | $.get("https://www.googleapis.com/youtube/v3/search", 72 | { 73 | 74 | part: 'snippet, id', 75 | 76 | q: q, 77 | type: 'channel', 78 | key: API_KEY}, 79 | 80 | function(data){ 81 | 82 | var nextPageToken = data.nextPageToken; //gets the pages of videos 83 | var prevPageToken = data.prevPageToken; 84 | 85 | console.log(data); 86 | 87 | $.each(data.items, function(i, items){ 88 | 89 | //Get Output 90 | var output = getOutput(items) 91 | //Display Output 92 | 93 | $('#results').append(output) 94 | 95 | 96 | }); 97 | 98 | //Display Results 99 | 100 | var buttons = getButtons(prevPageToken, nextPageToken); 101 | 102 | //Display Button 103 | 104 | $('.buttons').append(buttons) 105 | } 106 | 107 | ); 108 | 109 | } 110 | 111 | //Next Page Function 112 | 113 | function nextPage(){ 114 | 115 | var token = $('#next-button').data('token'); // .data('token') same as using data-token value. 116 | 117 | var q = $('#next-button').data('query'); 118 | 119 | 120 | //Clear Results 121 | 122 | $('#results').html(''); 123 | $('.buttons').html(''); 124 | 125 | //Get Form Input 126 | 127 | q = $('#query').val(); 128 | 129 | //Run GET request on API 130 | 131 | $.get( 132 | "https://www.googleapis.com/youtube/v3/search",{ 133 | 134 | part: 'snippet, id', 135 | q: q, 136 | pageToken: token, 137 | type: 'channel', 138 | key: API_KEY}, 139 | 140 | function(data){ 141 | 142 | var nextPageToken = data.nextPageToken; //gets the pages of videos 143 | var prevPageToken = data.prevPageToken; 144 | 145 | console.log(data); 146 | 147 | $.each(data.items, function(i, items){ 148 | 149 | //Get Output 150 | var output = getOutput(items) 151 | //Display Output 152 | 153 | $('#results').append(output) 154 | 155 | 156 | }); 157 | 158 | //Display Results 159 | 160 | var buttons = getButtons(prevPageToken, nextPageToken); 161 | 162 | //Display Button 163 | 164 | $('.buttons').append(buttons) 165 | } 166 | 167 | ); 168 | 169 | 170 | 171 | } 172 | 173 | //Previous Page Function 174 | 175 | function prevPage(){ 176 | 177 | var token = $('#prev-button').data('token'); // .data('token') same as using data-token value. 178 | 179 | var q = $('#prev-button').data('query'); 180 | 181 | 182 | //Clear Results 183 | 184 | $('#results').html(''); 185 | $('.buttons').html(''); 186 | 187 | // Get Form Input 188 | q = $('#query').val(); 189 | 190 | //Run GET request on API 191 | 192 | $.get( 193 | "https://www.googleapis.com/youtube/v3/search",{ 194 | 195 | part: 'snippet, id', 196 | q: q, 197 | pageToken: token, 198 | type: 'channel', 199 | key: API_KEY}, 200 | 201 | function(data){ 202 | 203 | var nextPageToken = data.nextPageToken; //gets the pages of videos 204 | var prevPageToken = data.prevPageToken; 205 | 206 | console.log(data); 207 | 208 | $.each(data.items, function(i, items){ 209 | 210 | //Get Output 211 | var output = getOutput(items) 212 | //Display Output 213 | 214 | $('#results').append(output) 215 | 216 | 217 | }); 218 | 219 | //Display Results 220 | 221 | var buttons = getButtons(prevPageToken, nextPageToken); 222 | 223 | //Display Button 224 | 225 | $('.buttons').append(buttons) 226 | } 227 | 228 | ); 229 | 230 | 231 | 232 | }; 233 | 234 | 235 | 236 | //Build Output 237 | 238 | function getOutput(items){ 239 | 240 | var description = items.snippet.description; 241 | var channelId = items.snippet.channelId; 242 | var title = items.snippet.title; 243 | var thumb = items.snippet.thumbnails.high.url; 244 | var videoDate = items.snippet.publishedAt; 245 | 246 | //Build Output String 247 | 248 | var outPut = '
  • ' + 249 | '
    ' + 250 | '' + 251 | '
    ' + 252 | '
    ' + 253 | '

    '+title+'

    ' + 254 | 'Since: '+videoDate+'' + 255 | '

    '+description+'

    '+ 256 | ' Channel ID:
    ' + 257 | '
    ' + 258 | '
    • ' + 259 | '
    ' 260 | 261 | return outPut; 262 | 263 | 264 | 265 | 266 | 267 | }; 268 | 269 | //Build Buttons 270 | 271 | function getButtons(prevPageToken, nextPageToken){ 272 | 273 | if(!prevPageToken){ //if there is no previous page 274 | 275 | var btnoutput = '
    '+'
    '; 276 | 277 | } else { 278 | 279 | var btnoutput = '
    '+'' + 280 | '
    '; 282 | 283 | } 284 | 285 | return btnoutput; 286 | 287 | } -------------------------------------------------------------------------------- /web/js/search_playlists.js: -------------------------------------------------------------------------------- 1 | // Searchbar Event Handler 2 | 3 | $(function (){ 4 | 5 | 6 | var searchField = $('#query'); 7 | var icon = $('#submit-btn'); 8 | 9 | //Focus Handler 10 | 11 | $(searchField).on('focus', function(){ 12 | 13 | $(this).animate({ 14 | 15 | width: '100%' 16 | 17 | }, 400); 18 | $(icon).animate({ 19 | 20 | right: '2%' 21 | 22 | }, 400); 23 | 24 | }); 25 | 26 | //Blur EventHandler 27 | 28 | $(searchField).on('blur', function(){ 29 | 30 | if(searchField.val() == 0){ 31 | 32 | $(searchField).animate({ 33 | 34 | width: '45%' 35 | 36 | }, 400); 37 | 38 | $(icon).animate({ 39 | 40 | right: '58%' 41 | 42 | }, 400); 43 | 44 | }; 45 | }); 46 | 47 | // cancels default action of the form 48 | 49 | $('#search-form').submit(function(e){ 50 | 51 | e.preventDefault(); 52 | 53 | }) 54 | 55 | }); 56 | 57 | 58 | function search(){ 59 | 60 | //Clear Results 61 | 62 | $('#results').html(''); 63 | $('.buttons').html(''); 64 | 65 | //Get Form Input 66 | 67 | q = $('#query').val(); 68 | 69 | //Run GET request on API 70 | 71 | $.get("https://www.googleapis.com/youtube/v3/search", 72 | { 73 | 74 | part: 'snippet, id', 75 | 76 | q: q, 77 | type: 'playlist', 78 | key: API_KEY}, 79 | 80 | function(data){ 81 | 82 | var nextPageToken = data.nextPageToken; //gets the pages of playlists 83 | var prevPageToken = data.prevPageToken; 84 | 85 | console.log(data); 86 | 87 | $.each(data.items, function(i, items){ 88 | 89 | //Get Output 90 | var output = getOutput(items) 91 | //Display Output 92 | 93 | $('#results').append(output) 94 | 95 | 96 | }); 97 | 98 | //Display Results 99 | 100 | var buttons = getButtons(prevPageToken, nextPageToken); 101 | 102 | //Display Button 103 | 104 | $('.buttons').append(buttons) 105 | } 106 | 107 | ); 108 | 109 | } 110 | 111 | //Next Page Function 112 | 113 | function nextPage(){ 114 | 115 | var token = $('#next-button').data('token'); // .data('token') same as using data-token value. 116 | 117 | var q = $('#next-button').data('query'); 118 | 119 | 120 | //Clear Results 121 | 122 | $('#results').html(''); 123 | $('.buttons').html(''); 124 | 125 | //Get Form Input 126 | 127 | q = $('#query').val(); 128 | 129 | //Run GET request on API 130 | 131 | $.get( 132 | "https://www.googleapis.com/youtube/v3/search",{ 133 | 134 | part: 'snippet, id', 135 | q: q, 136 | pageToken: token, 137 | type: 'playlist', 138 | key: API_KEY}, 139 | 140 | function(data){ 141 | 142 | var nextPageToken = data.nextPageToken; //gets the pages of playlists 143 | var prevPageToken = data.prevPageToken; 144 | 145 | console.log(data); 146 | 147 | $.each(data.items, function(i, items){ 148 | 149 | //Get Output 150 | var output = getOutput(items) 151 | //Display Output 152 | 153 | $('#results').append(output) 154 | 155 | 156 | }); 157 | 158 | //Display Results 159 | 160 | var buttons = getButtons(prevPageToken, nextPageToken); 161 | 162 | //Display Button 163 | 164 | $('.buttons').append(buttons) 165 | } 166 | 167 | ); 168 | 169 | 170 | 171 | } 172 | 173 | //Previous Page Function 174 | 175 | function prevPage(){ 176 | 177 | var token = $('#prev-button').data('token'); // .data('token') same as using data-token value. 178 | 179 | var q = $('#prev-button').data('query'); 180 | 181 | 182 | //Clear Results 183 | 184 | $('#results').html(''); 185 | $('.buttons').html(''); 186 | 187 | // Get Form Input 188 | q = $('#query').val(); 189 | 190 | //Run GET request on API 191 | 192 | $.get( 193 | "https://www.googleapis.com/youtube/v3/search",{ 194 | 195 | part: 'snippet, id', 196 | q: q, 197 | pageToken: token, 198 | type: 'playlist', 199 | key: API_KEY}, 200 | 201 | function(data){ 202 | 203 | var nextPageToken = data.nextPageToken; //gets the pages of playlists 204 | var prevPageToken = data.prevPageToken; 205 | 206 | console.log(data); 207 | 208 | $.each(data.items, function(i, items){ 209 | 210 | //Get Output 211 | var output = getOutput(items) 212 | //Display Output 213 | 214 | $('#results').append(output) 215 | 216 | 217 | }); 218 | 219 | //Display Results 220 | 221 | var buttons = getButtons(prevPageToken, nextPageToken); 222 | 223 | //Display Button 224 | 225 | $('.buttons').append(buttons) 226 | } 227 | 228 | ); 229 | 230 | 231 | 232 | }; 233 | 234 | 235 | 236 | //Build Output 237 | 238 | function getOutput(items){ 239 | 240 | var playlistId = items.id.playlistId; 241 | var description = items.snippet.description; 242 | var channelId = items.snippet.channelId; 243 | var title = items.snippet.title; 244 | var thumb = items.snippet.thumbnails.high.url; 245 | var channelTitle = items.snippet.channelTitle; 246 | var playlistDate = items.snippet.publishedAt; 247 | 248 | //Build Output String 249 | 250 | var outPut = '
  • ' + 251 | '
    ' + 252 | '' + 253 | '
    ' + 254 | '
    ' + 255 | '

    '+title+'

    ' + 256 | ' By '+channelTitle+' on '+playlistDate+'' + 257 | '

    '+description+'

    '+ 258 | ' Channel ID:
    ' + 259 | '
    ' + 260 | '
    • ' + 261 | '
    ' 262 | 263 | return outPut; 264 | 265 | 266 | 267 | 268 | 269 | }; 270 | 271 | //Build Buttons 272 | 273 | function getButtons(prevPageToken, nextPageToken){ 274 | 275 | if(!prevPageToken){ //if there is no previous page 276 | 277 | var btnoutput = '
    '+'
    '; 278 | 279 | } else { 280 | 281 | var btnoutput = '
    '+'' + 282 | '
    '; 284 | 285 | } 286 | 287 | return btnoutput; 288 | 289 | } -------------------------------------------------------------------------------- /web/js/search_playlists_channelID.js: -------------------------------------------------------------------------------- 1 | // Searchbar Event Handler 2 | 3 | $(function (){ 4 | 5 | 6 | var searchField = $('#query'); 7 | var icon = $('#submit-btn'); 8 | 9 | //Focus Handler 10 | 11 | $(searchField).on('focus', function(){ 12 | 13 | $(this).animate({ 14 | 15 | width: '100%' 16 | 17 | }, 400); 18 | $(icon).animate({ 19 | 20 | right: '2%' 21 | 22 | }, 400); 23 | 24 | }); 25 | 26 | //Blur EventHandler 27 | 28 | $(searchField).on('blur', function(){ 29 | 30 | if(searchField.val() == 0){ 31 | 32 | $(searchField).animate({ 33 | 34 | width: '45%' 35 | 36 | }, 400); 37 | 38 | $(icon).animate({ 39 | 40 | right: '58%' 41 | 42 | }, 400); 43 | 44 | }; 45 | }); 46 | 47 | // cancels default action of the form 48 | 49 | $('#search-form').submit(function(e){ 50 | 51 | e.preventDefault(); 52 | 53 | }) 54 | 55 | }); 56 | 57 | 58 | function search(){ 59 | 60 | //Clear Results 61 | 62 | $('#results').html(''); 63 | $('.buttons').html(''); 64 | 65 | //Get Form Input 66 | 67 | q = $('#query').val(); 68 | 69 | //Run GET request on API 70 | 71 | $.get("https://www.googleapis.com/youtube/v3/playlists", 72 | { 73 | 74 | part: 'snippet, id', 75 | channelId: q, 76 | key: API_KEY}, 77 | 78 | function(data){ 79 | 80 | var nextPageToken = data.nextPageToken; //gets the pages of videos 81 | var prevPageToken = data.prevPageToken; 82 | 83 | console.log(data); 84 | 85 | $.each(data.items, function(i, items){ 86 | 87 | //Get Output 88 | var output = getOutput(items) 89 | //Display Output 90 | 91 | $('#results').append(output) 92 | 93 | 94 | }); 95 | 96 | //Display Results 97 | 98 | var buttons = getButtons(prevPageToken, nextPageToken); 99 | 100 | //Display Button 101 | 102 | $('.buttons').append(buttons) 103 | } 104 | 105 | ); 106 | 107 | } 108 | 109 | //Next Page Function 110 | 111 | function nextPage(){ 112 | 113 | var token = $('#next-button').data('token'); // .data('token') same as using data-token value. 114 | 115 | var q = $('#next-button').data('query'); 116 | 117 | 118 | //Clear Results 119 | 120 | $('#results').html(''); 121 | $('.buttons').html(''); 122 | 123 | //Get Form Input 124 | 125 | q = $('#query').val(); 126 | 127 | //Run GET request on API 128 | 129 | $.get( 130 | "https://www.googleapis.com/youtube/v3/playlists",{ 131 | 132 | part: 'snippet, id', 133 | channelId: q, 134 | pageToken: token, 135 | key: API_KEY}, 136 | 137 | function(data){ 138 | 139 | var nextPageToken = data.nextPageToken; //gets the pages of videos 140 | var prevPageToken = data.prevPageToken; 141 | 142 | console.log(data); 143 | 144 | $.each(data.items, function(i, items){ 145 | 146 | //Get Output 147 | var output = getOutput(items) 148 | //Display Output 149 | 150 | $('#results').append(output) 151 | 152 | 153 | }); 154 | 155 | //Display Results 156 | 157 | var buttons = getButtons(prevPageToken, nextPageToken); 158 | 159 | //Display Button 160 | 161 | $('.buttons').append(buttons) 162 | } 163 | 164 | ); 165 | 166 | 167 | 168 | } 169 | 170 | //Previous Page Function 171 | 172 | function prevPage(){ 173 | 174 | var token = $('#prev-button').data('token'); // .data('token') same as using data-token value. 175 | 176 | var q = $('#prev-button').data('query'); 177 | 178 | 179 | //Clear Results 180 | 181 | $('#results').html(''); 182 | $('.buttons').html(''); 183 | 184 | // Get Form Input 185 | q = $('#query').val(); 186 | 187 | //Run GET request on API 188 | 189 | $.get( 190 | "https://www.googleapis.com/youtube/v3/playlists",{ 191 | 192 | part: 'snippet, id', 193 | channelId: q, 194 | pageToken: token, 195 | key: API_KEY}, 196 | 197 | function(data){ 198 | 199 | var nextPageToken = data.nextPageToken; //gets the pages of videos 200 | var prevPageToken = data.prevPageToken; 201 | 202 | console.log(data); 203 | 204 | $.each(data.items, function(i, items){ 205 | 206 | //Get Output 207 | var output = getOutput(items) 208 | //Display Output 209 | 210 | $('#results').append(output) 211 | 212 | 213 | }); 214 | 215 | //Display Results 216 | 217 | var buttons = getButtons(prevPageToken, nextPageToken); 218 | 219 | //Display Button 220 | 221 | $('.buttons').append(buttons) 222 | } 223 | 224 | ); 225 | 226 | 227 | 228 | } 229 | 230 | 231 | //Build Output 232 | 233 | function getOutput(items){ 234 | 235 | var id = items.id; 236 | var description = items.snippet.description; 237 | var title = items.snippet.title; 238 | var thumb = items.snippet.thumbnails.high.url; 239 | var channelTitle = items.snippet.channelTitle; 240 | var channelID = items.snippet.channelId; 241 | var videoDate = items.snippet.publishedAt; 242 | 243 | //Build Output String 244 | 245 | var outPut = '
  • ' + 246 | '
    ' + 247 | '' + 248 | '
    ' + 249 | '
    ' + 250 | '

    '+title+'

    ' + 251 | ' By '+channelTitle+' on '+videoDate+'' + 252 | '

    '+description+'

    ' + 253 | '
    ' + 254 | '
    • ' + 255 | '
    ' 256 | 257 | return outPut; 258 | 259 | 260 | 261 | 262 | 263 | }; 264 | 265 | //Build Buttons 266 | 267 | function getButtons(prevPageToken, nextPageToken){ 268 | 269 | if(!prevPageToken){ //if there is no previous page 270 | 271 | var btnoutput = '
    '+'
    '; 272 | 273 | } else { 274 | 275 | var btnoutput = '
    '+'' + 276 | '
    '; 278 | 279 | } 280 | 281 | return btnoutput; 282 | 283 | } -------------------------------------------------------------------------------- /web/js/search_videos.js: -------------------------------------------------------------------------------- 1 | // Searchbar Event Handler 2 | 3 | $(function (){ 4 | 5 | 6 | var searchField = $('#query'); 7 | var icon = $('#submit-btn'); 8 | 9 | //Focus Handler 10 | 11 | $(searchField).on('focus', function(){ 12 | 13 | $(this).animate({ 14 | 15 | width: '100%' 16 | 17 | }, 400); 18 | $(icon).animate({ 19 | 20 | right: '2%' 21 | 22 | }, 400); 23 | 24 | }); 25 | 26 | //Blur EventHandler 27 | 28 | $(searchField).on('blur', function(){ 29 | 30 | if(searchField.val() == 0){ 31 | 32 | $(searchField).animate({ 33 | 34 | width: '45%' 35 | 36 | }, 400); 37 | 38 | $(icon).animate({ 39 | 40 | right: '58%' 41 | 42 | }, 400); 43 | 44 | }; 45 | }); 46 | 47 | // cancels default action of the form 48 | 49 | $('#search-form').submit(function(e){ 50 | 51 | e.preventDefault(); 52 | 53 | }) 54 | 55 | }); 56 | 57 | 58 | function search(){ 59 | 60 | //Clear Results 61 | 62 | $('#results').html(''); 63 | $('.buttons').html(''); 64 | 65 | //Get Form Input 66 | 67 | q = $('#query').val(); 68 | 69 | //Run GET request on API 70 | 71 | $.get("https://www.googleapis.com/youtube/v3/search", 72 | { 73 | 74 | part: 'snippet, id', 75 | 76 | q: q, 77 | type: 'video', 78 | key: API_KEY}, 79 | 80 | function(data){ 81 | 82 | var nextPageToken = data.nextPageToken; //gets the pages of videos 83 | var prevPageToken = data.prevPageToken; 84 | 85 | console.log(data); 86 | 87 | $.each(data.items, function(i, items){ 88 | 89 | //Get Output 90 | var output = getOutput(items) 91 | //Display Output 92 | 93 | $('#results').append(output) 94 | 95 | 96 | }); 97 | 98 | //Display Results 99 | 100 | var buttons = getButtons(prevPageToken, nextPageToken); 101 | 102 | //Display Button 103 | 104 | $('.buttons').append(buttons) 105 | } 106 | 107 | ); 108 | 109 | } 110 | 111 | //Next Page Function 112 | 113 | function nextPage(){ 114 | 115 | var token = $('#next-button').data('token'); // .data('token') same as using data-token value. 116 | 117 | var q = $('#next-button').data('query'); 118 | 119 | 120 | //Clear Results 121 | 122 | $('#results').html(''); 123 | $('.buttons').html(''); 124 | 125 | //Get Form Input 126 | 127 | q = $('#query').val(); 128 | 129 | //Run GET request on API 130 | 131 | $.get( 132 | "https://www.googleapis.com/youtube/v3/search",{ 133 | 134 | part: 'snippet, id', 135 | q: q, 136 | pageToken: token, 137 | type: 'video', 138 | key: API_KEY}, 139 | 140 | function(data){ 141 | 142 | var nextPageToken = data.nextPageToken; //gets the pages of videos 143 | var prevPageToken = data.prevPageToken; 144 | 145 | console.log(data); 146 | 147 | $.each(data.items, function(i, items){ 148 | 149 | //Get Output 150 | var output = getOutput(items) 151 | //Display Output 152 | 153 | $('#results').append(output) 154 | 155 | 156 | }); 157 | 158 | //Display Results 159 | 160 | var buttons = getButtons(prevPageToken, nextPageToken); 161 | 162 | //Display Button 163 | 164 | $('.buttons').append(buttons) 165 | } 166 | 167 | ); 168 | 169 | 170 | 171 | } 172 | 173 | //Previous Page Function 174 | 175 | function prevPage(){ 176 | 177 | var token = $('#prev-button').data('token'); // .data('token') same as using data-token value. 178 | 179 | var q = $('#prev-button').data('query'); 180 | 181 | 182 | //Clear Results 183 | 184 | $('#results').html(''); 185 | $('.buttons').html(''); 186 | 187 | // Get Form Input 188 | q = $('#query').val(); 189 | 190 | //Run GET request on API 191 | 192 | $.get( 193 | "https://www.googleapis.com/youtube/v3/search",{ 194 | 195 | part: 'snippet, id', 196 | q: q, 197 | pageToken: token, 198 | type: 'video', 199 | key: API_KEY}, 200 | 201 | function(data){ 202 | 203 | var nextPageToken = data.nextPageToken; //gets the pages of videos 204 | var prevPageToken = data.prevPageToken; 205 | 206 | console.log(data); 207 | 208 | $.each(data.items, function(i, items){ 209 | 210 | //Get Output 211 | var output = getOutput(items) 212 | //Display Output 213 | 214 | $('#results').append(output) 215 | 216 | 217 | }); 218 | 219 | //Display Results 220 | 221 | var buttons = getButtons(prevPageToken, nextPageToken); 222 | 223 | //Display Button 224 | 225 | $('.buttons').append(buttons) 226 | } 227 | 228 | ); 229 | 230 | 231 | 232 | }; 233 | 234 | 235 | 236 | //Build Output 237 | 238 | function getOutput(items){ 239 | 240 | var videoId = items.id.videoId; 241 | var description = items.snippet.description; 242 | var channelId = items.snippet.channelId; 243 | var title = items.snippet.title; 244 | var thumb = items.snippet.thumbnails.high.url; 245 | var channelTitle = items.snippet.channelTitle; 246 | var videoDate = items.snippet.publishedAt; 247 | 248 | //Build Output String 249 | 250 | var outPut = '
  • ' + 251 | '
    ' + 252 | '' + 253 | '
    ' + 254 | '
    ' + 255 | '

    '+title+'

    ' + 256 | ' By '+channelTitle+' on '+videoDate+'' + 257 | '

    '+description+'

    '+ 258 | ' Channel ID:
    ' + 259 | 'Video ID:    ' + 260 | '
    ' + 261 | '
    • ' + 262 | '
    ' 263 | 264 | return outPut; 265 | 266 | 267 | 268 | 269 | 270 | }; 271 | 272 | //Build Buttons 273 | 274 | function getButtons(prevPageToken, nextPageToken){ 275 | 276 | if(!prevPageToken){ //if there is no previous page 277 | 278 | var btnoutput = '
    '+'
    '; 279 | 280 | } else { 281 | 282 | var btnoutput = '
    '+'' + 283 | '
    '; 285 | 286 | } 287 | 288 | return btnoutput; 289 | 290 | } -------------------------------------------------------------------------------- /web/js/specific_channel_name.js: -------------------------------------------------------------------------------- 1 | // Searchbar Event Handler 2 | 3 | $(function (){ 4 | 5 | 6 | var searchField = $('#query'); 7 | var icon = $('#submit-btn'); 8 | 9 | //Focus Handler 10 | 11 | $(searchField).on('focus', function(){ 12 | 13 | $(this).animate({ 14 | 15 | width: '100%' 16 | 17 | }, 400); 18 | $(icon).animate({ 19 | 20 | right: '2%' 21 | 22 | }, 400); 23 | 24 | }); 25 | 26 | //Blur EventHandler 27 | 28 | $(searchField).on('blur', function(){ 29 | 30 | if(searchField.val() == 0){ 31 | 32 | $(searchField).animate({ 33 | 34 | width: '45%' 35 | 36 | }, 400); 37 | 38 | $(icon).animate({ 39 | 40 | right: '58%' 41 | 42 | }, 400); 43 | 44 | }; 45 | }); 46 | 47 | // cancels default action of the form 48 | 49 | $('#search-form').submit(function(e){ 50 | 51 | e.preventDefault(); 52 | 53 | }) 54 | 55 | }); 56 | 57 | 58 | function search(){ 59 | 60 | //Clear Results 61 | 62 | $('#results').html(''); 63 | $('.buttons').html(''); 64 | 65 | //Get Form Input 66 | 67 | q = $('#query').val(); 68 | 69 | //Run GET request on API 70 | 71 | $.get("https://www.googleapis.com/youtube/v3/channels", 72 | { 73 | 74 | part: 'snippet, id, contentDetails, statistics, status', 75 | 76 | forUsername: q, 77 | key: API_KEY}, 78 | 79 | function(data){ 80 | 81 | var nextPageToken = data.nextPageToken; //gets the pages of videos 82 | var prevPageToken = data.prevPageToken; 83 | 84 | console.log(data); 85 | 86 | $.each(data.items, function(i, items){ 87 | 88 | //Get Output 89 | var output = getOutput(items) 90 | //Display Output 91 | 92 | $('#results').append(output) 93 | 94 | 95 | }); 96 | 97 | //Display Results 98 | 99 | var buttons = getButtons(prevPageToken, nextPageToken); 100 | 101 | //Display Button 102 | 103 | $('.buttons').append(buttons) 104 | } 105 | 106 | ); 107 | 108 | } 109 | 110 | //Next Page Function 111 | 112 | function nextPage(){ 113 | 114 | var token = $('#next-button').data('token'); // .data('token') same as using data-token value. 115 | 116 | var q = $('#next-button').data('query'); 117 | 118 | 119 | //Clear Results 120 | 121 | $('#results').html(''); 122 | $('.buttons').html(''); 123 | 124 | //Get Form Input 125 | 126 | q = $('#query').val(); 127 | 128 | //Run GET request on API 129 | 130 | $.get( 131 | "https://www.googleapis.com/youtube/v3/channels", 132 | { 133 | 134 | part: 'snippet, id, contentDetails, statistics, status', 135 | forUsername: q, 136 | pageToken: token, 137 | key: API_KEY}, 138 | 139 | function(data){ 140 | 141 | var nextPageToken = data.nextPageToken; //gets the pages of videos 142 | var prevPageToken = data.prevPageToken; 143 | 144 | console.log(data); 145 | 146 | $.each(data.items, function(i, items){ 147 | 148 | //Get Output 149 | var output = getOutput(items) 150 | //Display Output 151 | 152 | $('#results').append(output) 153 | 154 | 155 | }); 156 | 157 | //Display Results 158 | 159 | var buttons = getButtons(prevPageToken, nextPageToken); 160 | 161 | //Display Button 162 | 163 | $('.buttons').append(buttons) 164 | } 165 | 166 | ); 167 | 168 | 169 | 170 | } 171 | 172 | //Previous Page Function 173 | 174 | function prevPage(){ 175 | 176 | var token = $('#prev-button').data('token'); // .data('token') same as using data-token value. 177 | 178 | var q = $('#prev-button').data('query'); 179 | 180 | 181 | //Clear Results 182 | 183 | $('#results').html(''); 184 | $('.buttons').html(''); 185 | 186 | // Get Form Input 187 | q = $('#query').val(); 188 | 189 | //Run GET request on API 190 | 191 | $.get( 192 | "https://www.googleapis.com/youtube/v3/channels", 193 | { 194 | 195 | part: 'snippet, id, contentDetails, statistics, status', 196 | forUsername: q, 197 | pageToken: token, 198 | key: API_KEY}, 199 | 200 | function(data){ 201 | 202 | var nextPageToken = data.nextPageToken; //gets the pages of videos 203 | var prevPageToken = data.prevPageToken; 204 | 205 | console.log(data); 206 | 207 | $.each(data.items, function(i, items){ 208 | 209 | //Get Output 210 | var output = getOutput(items) 211 | //Display Output 212 | 213 | $('#results').append(output) 214 | 215 | 216 | }); 217 | 218 | //Display Results 219 | 220 | var buttons = getButtons(prevPageToken, nextPageToken); 221 | 222 | //Display Button 223 | 224 | $('.buttons').append(buttons) 225 | } 226 | 227 | ); 228 | 229 | 230 | 231 | }; 232 | 233 | 234 | 235 | //Build Output 236 | 237 | function getOutput(items){ 238 | 239 | var channelId = items.id; 240 | var description = items.snippet.description; 241 | var title = items.snippet.title; 242 | var thumb = items.snippet.thumbnails.high.url; 243 | var channelDate = items.snippet.publishedAt; 244 | var uploadsPlaylist = items.contentDetails.relatedPlaylists.uploads; 245 | var viewCount = items.statistics.viewCount; 246 | var subscriberCount = items.statistics.subscriberCount; 247 | var videoCount = items.statistics.videoCount; 248 | var privacyStatus = items.status.privacyStatus; 249 | 250 | //Build Output String 251 | 252 | var outPut = '
  • ' + 253 | '
    ' + 254 | '' + 255 | 'Channel status: '+privacyStatus+'
    ' + 256 | '
    ' + 257 | '
    ' + 258 | '

    '+title+'

    ' + 259 | 'Views: '+viewCount+' | Subscirbers: '+subscriberCount+'
    ' + 260 | 'Joined on: '+channelDate+'
    ' + 261 | '

    '+description+'

    '+ 262 | 'Uploaded Videos playlist ('+videoCount+')
    ' + 263 | 'Channel ID:' + 264 | '
    • ' + 265 | '
    ' 266 | 267 | return outPut; 268 | 269 | }; 270 | 271 | //Build Buttons 272 | 273 | function getButtons(prevPageToken, nextPageToken){ 274 | 275 | if(!prevPageToken){ //if there is no previous page 276 | 277 | var btnoutput = '
    '+'
    '; 278 | 279 | } else { 280 | 281 | var btnoutput = '
    '+'' + 282 | '
    '; 284 | 285 | } 286 | 287 | return btnoutput; 288 | 289 | } -------------------------------------------------------------------------------- /web/menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
    Home
    13 | 14 | 15 | 16 |
    Search Video
    17 | 18 | 19 | 20 |
    History
    21 | 22 | 23 | 24 |
    Subscriptions
    25 | 26 | 27 | 28 |
    Watch Later
    29 | 30 | 31 | 32 |
    Liked Videos
    33 | 34 | 35 | 36 |
    Guide Builder
    37 | 38 | 39 | 40 |
    Search Channels
    41 | 42 | 43 | 44 |
    Search Playlists
    45 | 46 | 47 | 48 |
    Read comments
    49 | 50 | 51 | 52 |
    53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /web/read_comments.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |

    VerduraComments

    19 | Go back to menu 20 |

    Read top comment for a specific video (require videoID) 🥗

    21 |
    22 |
    23 |
    24 |
    25 | 26 | 27 |
    28 |
    29 |
      30 |
      31 |
      32 | 38 |
      39 | 40 | 41 | -------------------------------------------------------------------------------- /web/search_channel_name.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
      18 |
      19 |

      VerduraChannels (by title)

      20 | Go back to menu
      21 |

      Useful if you don't rembember the precise name of the Channel ID 🥗

      22 |
      23 |
      24 |
      25 |
      26 | 27 | 28 | 29 | 30 |
      31 |
      32 | 33 |
        34 |
        35 |
        36 | 42 |
        43 | 44 | -------------------------------------------------------------------------------- /web/search_playlists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
        18 |
        19 |

        VerduraPlaylists (by title)

        20 | Go back to menu 21 |

        Search by title any public playlist on YouTube 🥗

        22 |
        23 |
        24 |
        25 |
        26 | 27 | 28 | 29 | 30 |
        31 |
        32 | 33 |
          34 |
          35 |
          36 | 42 |
          43 | 44 | -------------------------------------------------------------------------------- /web/search_playlists_channelID.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
          17 |
          18 |

          VerduraPlaylists (by channelID)

          19 | Go back to menu 20 |

          Useful to narrow down only the playlists from specific channel 🥗

          21 |
          22 |
          23 |
          24 |
          25 | 26 | 27 | 28 | 29 |
          30 |
          31 | 32 |
            33 |
            34 |
            35 | 41 |
            42 | 43 | -------------------------------------------------------------------------------- /web/search_videos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
            18 |
            19 |

            VerduraVideos (by title)

            20 | Go back to menu 21 |

            Search by title any public video on YouTube 🥗

            22 |
            23 |
            24 |
            25 |
            26 | 27 | 28 | 29 | 30 |
            31 |
            32 | 33 |
              34 |
              35 |
              36 | 42 |
              43 | 44 | -------------------------------------------------------------------------------- /web/specific_channel_id.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
              18 |
              19 |

              VerduraChannels (specific channel id)

              20 | Go back to menu
              21 |

              View statistics from a specific channels and the Upload Video playlist 🥗

              22 |
              23 |
              24 |
              25 |
              26 | 27 | 28 | 29 | 30 |
              31 |
              32 | 33 |
                34 |
                35 |
                36 | 42 |
                43 | 44 | -------------------------------------------------------------------------------- /web/specific_channel_name.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
                18 |
                19 |

                VerduraChannels (specific channel name)

                20 | Go back to menu
                21 |

                View statistics from a specific channels and the Upload Video playlist 🥗

                22 |
                23 |
                24 |
                25 |
                26 | 27 | 28 | 29 | 30 |
                31 |
                32 | 33 |
                  34 |
                  35 |
                  36 | 42 |
                  43 | 44 | -------------------------------------------------------------------------------- /weblight/css/menu.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: transparent; 3 | font-family: Roboto, Arial, 'Sans Serif', 'YT Sans'; 4 | text-transform: uppercase; 5 | 6 | } 7 | .divmenu { 8 | font-size:medium; 9 | border-bottom:red 1px outset; 10 | block-size:inline-block; 11 | margin:2px; 12 | 13 | } 14 | .divmenu:hover { 15 | font-weight: bold; 16 | color: #FAFAFA; 17 | border-bottom:white inset; 18 | background-color: red; 19 | margin:2px; 20 | } 21 | .imgmenu { 22 | vertical-align: middle; 23 | } 24 | .divinside:hover { 25 | -webkit-filter: invert(100%); 26 | color: #FAFAFA; 27 | } -------------------------------------------------------------------------------- /weblight/img/guide_builder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /weblight/img/history.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /weblight/img/home.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /weblight/img/liked_videos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /weblight/img/read_comments.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /weblight/img/search_channels.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /weblight/img/search_playlists.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /weblight/img/search_videos.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /weblight/img/subscriptions.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /weblight/img/verdurify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /weblight/img/watch_later.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /weblight/menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
                  Home
                  13 | 14 | 15 | 16 |
                  Search Video
                  17 | 18 | 19 | 20 |
                  History
                  21 | 22 | 23 | 24 |
                  Subscriptions
                  25 | 26 | 27 | 28 |
                  Watch Later
                  29 | 30 | 31 | 32 |
                  Liked Videos
                  33 | 34 | 35 | 36 |
                  Guide Builder
                  37 | 38 | 39 | 40 |
                  41 | 42 | 43 | 44 | 45 | --------------------------------------------------------------------------------