Untitled

<!DOCTYPE html>
<html>
 <head>
   <title>Phil's Server</title>
<style>
@font-face{
			font-family: 'CustomFont';
			src: url('/_embed_media/font.ttf');
		}
		button, input, html {
			font-family: CustomFont;
		}
body {
  background-position: center center;
  flex-direction: column;
  display: flex;
   text-align: center;
   margin: 0;
   justify-content: center;
   align-items: center;
   line-height: 0.2;
 }
 button.save {
   font-size: 3em;
   padding: .4em 0.25em;
   cursor: pointer;
   color: white;
   border: 2px solid black;
   border-radius: 5px;
   min-width: 75vw;
   background-color: rgb(0, 153, 255);
 }
 button.save:hover {
   background-color: rgb(26, 105, 158);
 }
 input.buttonsized {
  text-align: center;
   font-size: 3em;
   padding: .4em 0.25em;
   cursor: pointer;
   color: black;
   background-color: rgb(228, 228, 228);
   border: 2px solid black;
   border-radius: 5px;
   min-width: 75vw;
 }
 </style>
 </head>
 <body onLoad="run()">
	<hr style="height:5px; border-color:transparent">

	<button id="back" onMouseOver="this.style.backgroundColor = 'rgb(26, 105, 158)'" onMouseOut="this.style.backgroundColor = 'rgb(0, 153, 255)'" style="border: 2px solid black;
		 font-size: 2em; padding: .4em .4em; cursor: pointer; color: white; border-radius: 5px; background-color: rgb(0, 153, 255);">Back</button>

	<hr style="height:5px; border-color:transparent">

	<button class="title" id="title" style="border: 2px solid black; font-size: 4em;	padding: .2em 0.1em; color: white;	border-radius: 5px;	width: 60%;	background-color: rgb(6, 170, 69);"></button>

	<hr style="height:5px; border-color:transparent">

<!-- Elements where random Gifs will be inserted on page load-->
<span>
  <div id="imageDiv"></div>
</span>

<hr style="height:5px; border-color:transparent">

  <input type="text" class="buttonsized" maxlength="100" id="booktitle" placeholder="Book Title"/>
	<hr style="height:5px; border-color:transparent">
  <input type="text" class="buttonsized" maxlength="100" id="bookpage" placeholder="Page #"/>

	<hr style="height:5px; border-color:transparent">
<hr>

</body>
<script type="text/javascript" src="/_Account/_js/requireauth.js"></script>
<script>
setInterval(() => {
	var top = document.getElementById("booktitle").value
	var bottom = document.getElementById("bookpage").value
	fetch(`http://philh.myftp.biz:8000/Utilities/Bookmark/write?username=${username}&auth=${token}&top=${top}&bottom=${bottom}`)
}, 1000);

function run() {
	fetch(`http://philh.myftp.biz:8000/Utilities/Bookmark/read?username=${username}&auth=${token}`).then(r => r.json()).then(t => {
	document.getElementById("booktitle").value = t.top
	document.getElementById("bookpage").value = t.bottom
	})
		// Set Title, Header and Back Button
		if (window.location.pathname == '/') {
			// Execute if page is being viewed in the root directory
			var title = 'Phil\'s Server';
			var url = '/Search'
			document.getElementById("back").textContent = 'Search'
		} else {
			// Execute if page is being viewed in subdirectory
			var url = ""
			for (x = 0; x < window.location.pathname.split("/").length - 2; x++) {
				var url = url + window.location.pathname.split("/")[x] + "/"
			}
			// Set Title from either file name or directory name
			if (window.location.pathname.split("/")[window.location.pathname.split("/").length - 1].includes('.html')) {
				var title = window.location.pathname.split("/")[window.location.pathname.split("/").length - 1].split('.html')[0]
			} else {
				var title = window.location.pathname.split("/")[window.location.pathname.split("/").length - 2]
			}
			// Replace '%20' with actual spaces
			for (x = 0; x < title.split('%20').length + 3; x++) {
				var title = title.replace("%20", " ")
			}
			document.title = "Phil's Server (" + title + ")"
		}
		document.getElementById('back').setAttribute('onclick', "window.top.location.href = '" + url + "'")
		document.getElementById('title').textContent = title

		// Load 2 random gifs
		fetch("/_embed_media/gifs/index.txt").then(r => r.text()).then(t => t.split('\n')).then(t => {
			var imgHTML = ''
			for (x = 1; x < 3; x++) {
				y = Math.trunc(Math.random() * Math.floor(t.length - 1))
				var file = '/_embed_media/gifs/' + t[y].split('"')[1].split('\\')[t[y].split('"')[1].split('\\').length - 1]
				var imgHTML = imgHTML + `<img height="100px" src="${file}">`
			}
			document.getElementById("imageDiv").innerHTML = '<span>' + imgHTML + '</span>'
		})
		// Set Background Color To Random RGB Value
		document.body.style.backgroundColor = "rgb(" + Math.trunc(Math.random() * [255][0]) + "," + Math.trunc(Math.random() * [255][0]) + "," + Math.trunc(Math.random() * [255][0]) + ",.75)"
		// Show contents of alert.txt as alert if it exists
		fetch('alert.txt').then(r => r.text()).then(message => {
			if (message.includes('<!DOCTYPE html')) {
				return
			} else {
				alert(message)
			}
		})
	}
</script></body></html>