rattatwinko/PyPost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed some things. and did some UI changes

Browse Source
This commit is contained in:
rattatwinko
2025-09-24 10:18:04 +02:00
parent 5e5ab6c6cc
commit 508624febc
11 changed files with 150 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
html/base/index.html
View File

@@ -7,14 +7,18 @@
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;}
#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>
<script>
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>
<link rel="icon" type="image/x-icon" href="../../css/favicon/favicon.ico">
</head>
<body>
@@ -32,77 +36,18 @@
</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 -->
<!-- load scripts needed for indexer -->
<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;
<script src="../../js/search.js" defer></script>
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 style=" position: absolute; bottom: 0; width: 100%;">
<p></p>
</footer>
</body>
</html>