Merge pull request #37 from SchBenedikt/Background

Background Image

index.html

@@ -50,6 +50,7 @@ <h2>About Me</h2>
               onkeydown="handleKeyDown(event)"
             />
             <button onclick="updateUsername()">Update</button>
+
           </div>
           <select
             class="gh-search-list"
@@ -86,5 +87,26 @@ <h2 id="overlay-title"></h2>
     <script type="text/javascript" src="js/predict.js"></script>
     <script type="text/javascript" src="js/settings.js"></script>
     <script type="text/javascript" src="js/index.js"></script>
+
+    <script>
+      if (isUnsplashEnabled()) {
+        fetch('https://source.unsplash.com/1600x900/?nature')
+          .then(response => {
+            document.body.style.backgroundImage = `url(${response.url})`;
+          })
+          .catch(error => console.error('Fehler beim Laden des Hintergrundbilds:', error));
+      }
+
+      window.addEventListener('resize', () => {
+        const windowHeight = window.innerHeight;
+        const formHeight = document.getElementById('form').offsetHeight;
+        const padding = (windowHeight - formHeight) / 2;
+        document.body.style.paddingTop = padding + 'px';
+      });
+
+      window.dispatchEvent(new Event('resize'));
+
+
+    </script>
   </body>
 </html>