Last active
January 27, 2021 16:03
-
-
Save silverkorn/a53d8b51e9c28dea9712467a87437515 to your computer and use it in GitHub Desktop.
Dynamic Wallpaper fetched from Pexel API designed to be compatible w/ for FL Studio background. Change "pexelsAPIToken" to your personal token (https://www.pexels.com/api/new/) & "searchTerms" to what you want to see. Usage: Double-click change image & Right-click change brightness of image.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script type="text/javascript"> | |
| var searchTerms = "forest city night japan"; // <- Insert your image style preference | |
| var pexelsAPIToken = ""; // <- Insert your Pexel API token here | |
| var url = | |
| "https://api.pexels.com/v1/search?query=" + searchTerms.replace(/\s+/g, '+') + | |
| "&min_width=" + window.innerWidth + "&min_height=" + window.innerHeight + "&per_page=1&page="; | |
| </script> | |
| <style> | |
| body { | |
| margin: 0; | |
| text-align: center; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| .parent { | |
| height: 0; | |
| #padding-bottom: 56.25%; | |
| /* 16:9 */ | |
| position: relative; | |
| } | |
| .child { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| img { | |
| position: relative; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .card-overlay { | |
| background-color: #000000; | |
| } | |
| .card-overlay img { | |
| opacity: 0.625; | |
| } | |
| </style> | |
| </head> | |
| <body scroll="no" onLoad="initPexels();" style="background-color:#202020;"> | |
| <div class="parent"> | |
| <div class="child"> | |
| <div class="card-overlay"> | |
| <img id="image" src="" /> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| document.getElementById('image').addEventListener("dblclick", function () { | |
| initPexels(); | |
| }); | |
| document.getElementById('image').addEventListener('contextmenu', function (ev) { | |
| ev.preventDefault(); | |
| if (document.getElementById('image').style.opacity <= 0.125) { | |
| document.getElementById('image').style.opacity = 1; | |
| } else { | |
| document.getElementById('image').style.opacity = document.getElementById('image').style.opacity - 0.125; | |
| } | |
| }, false); | |
| </script> | |
| <script type="text/javascript"> | |
| // Pexels API | |
| function initPexelsHandler() { | |
| if (this.status == 200 && this.responseText != null) { | |
| var pexelsResults = JSON.parse(this.responseText); | |
| setRandomImageFromPexels(pexelsResults.total_results); | |
| } | |
| } | |
| function initPexels() { | |
| var client = new XMLHttpRequest(); | |
| client.onload = initPexelsHandler; | |
| client.open( | |
| "GET", | |
| url + "1" | |
| ); | |
| client.setRequestHeader("Authorization", pexelsAPIToken); | |
| client.send(); | |
| } | |
| function setRandomImageFromPexelsHandler() { | |
| if (this.status == 200 && this.responseText != null) { | |
| var pexelsResults = JSON.parse(this.responseText); | |
| document.getElementById('image').src = | |
| pexelsResults.photos[0].src.original + | |
| "?auto=compress&cs=tinysrgb&fit=crop&h=" + window.innerHeight + "&w=" + window.innerWidth; | |
| } else { | |
| setTimeout(function () { | |
| setImageFromPexels(); | |
| }, 3000); | |
| } | |
| } | |
| function setRandomImageFromPexels(totalResults) { | |
| var client = new XMLHttpRequest(); | |
| client.onload = setRandomImageFromPexelsHandler; | |
| client.open( | |
| "GET", | |
| url + (Math.floor(Math.random() * Math.floor(totalResults) + 1)) | |
| ); | |
| client.setRequestHeader("Authorization", pexelsAPIToken); | |
| client.send(); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment