109 lines
4.0 KiB
HTML
109 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Auto Index</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; margin: 20px; }
|
|
h1 { color: #333; }
|
|
li { list-style: none; background: url("../../css/icons/item.webp") no-repeat left center; background-size: 15px 20px; padding-left: 25px; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); padding-bottom: 5px; }
|
|
li:hover { font-size: larger; }
|
|
#available { padding-left: 40px; margin-bottom: 0.1em;}
|
|
ul { padding-left: 100px; margin-top: 0.2em;}
|
|
#nojs { display: inline-block;color: red;transition: transform 0.7s cubic-bezier(0.215, 0.610, 0.355, 1); }
|
|
/*#nojs:hover { transform: skewX(-12deg);}*/
|
|
#nonenormalul { list-style: disc inside; margin: 1em 0; padding-left: 40px; background: none; }
|
|
#nonenormalul li { list-style: inherit; margin: 0; padding: 0; background: none; transition: font-size 0.5s cubic-bezier(0.075, 0.82, 0.165, 1); }
|
|
#nonenormalul li:hover { font-size: larger; }
|
|
</style>
|
|
<link rel="icon" type="image/x-icon" href="../../css/favicon/favicon.ico">
|
|
</head>
|
|
<body>
|
|
<noscript>
|
|
<div style="display: inline-flex; align-items: center;">
|
|
<img src="../../css/icons/script.webp" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />
|
|
<h1 id="nojs" style="margin: 0;">Please enable Javascript!</h1>
|
|
</div>
|
|
<p>
|
|
<i><strong> If you might be wondering, what does the Script do?</strong></i><br/>
|
|
<ul id="nonenormalul">
|
|
<li>It strips the .HTML ending from each file you see in the list below</li>
|
|
<li>It isnt necessary, but visually tweaks the page.</li>
|
|
<li>It enables the "Back" Function for Headers</li>
|
|
</ul>
|
|
</p>
|
|
</noscript>
|
|
<script>
|
|
// we just repurpouse the nojs from css
|
|
// much easier than adding a new element
|
|
console.log("javascript is enabled! good!")
|
|
document.write('<h1 id="nojs" style="color:black; display: flex; align-items: center;"><img src="../../css/icons/folder.webp" width="45" height="45" style="vertical-align: middle; margin-right: 8px;" />Index of PyPost</h1>');
|
|
</script>
|
|
<p id="available">
|
|
<img src="../../css/icons/available.webp" width="40" height="40" style="vertical-align: middle; display: inline; /*margin-right: 8px;*/ padding-right: 5px;" />
|
|
Available pages:
|
|
</p>
|
|
<!-- CONTENT -->
|
|
|
|
|
|
<script src="../../js/normal.js"></script>
|
|
<script type="text/javascript">
|
|
function search_ul_items() {
|
|
const query = document.getElementById('searchbox').value.toLowerCase();
|
|
const ul = document.querySelector('ul'); // only one UL
|
|
if (!ul) return;
|
|
|
|
const items = ul.querySelectorAll('li');
|
|
items.forEach(li => {
|
|
if (li.textContent.toLowerCase().includes(query)) {
|
|
li.style.display = 'list-item';
|
|
} else {
|
|
li.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Create search box and insert before the available pages paragraph
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
const searchDiv = document.createElement('div');
|
|
searchDiv.style.marginBottom = '16px';
|
|
searchDiv.style.paddingLeft = '19px';
|
|
searchDiv.innerHTML = `
|
|
<input
|
|
type="text"
|
|
id="searchbox"
|
|
placeholder="Search pages..."
|
|
style="
|
|
padding: 6px 6px 6px 28px;
|
|
font-size: 1em;
|
|
width: 220px;
|
|
background: url('../../css/icons/search.png') no-repeat 6px center;
|
|
background-size: 20px 20px;
|
|
"
|
|
title="Search for pages (italic)"
|
|
/>
|
|
`;
|
|
const available = document.getElementById('available');
|
|
available.parentNode.insertBefore(searchDiv, available);
|
|
|
|
const searchbox = document.getElementById('searchbox');
|
|
if (searchbox) {
|
|
searchbox.title = "Search for pages";
|
|
searchbox.style.fontStyle = "italic";
|
|
}
|
|
|
|
document.getElementById('searchbox').addEventListener('input', search_ul_items);
|
|
});
|
|
</script>
|
|
|
|
<footer style="
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
">
|
|
<p>
|
|
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|