Hazel/transfem-startpage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fully templated index.html

Browse Source
This commit is contained in:
Hazel Noack 2025-07-03 14:38:00 +02:00
parent f32461649b
commit bbe7c76ae0
1 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/index.html
View File

@ -8,13 +8,13 @@
<link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
<form class="search-grid" action="https://duckduckgo.com/">
<form class="search-grid" action="{{ .SearchFormAction }}">
<div class="search-logo">
<img als="girl_juice" src="assets/girl_juice.png" />
<h2 class="phrases"></h2>
<img als="girl_juice" src="assets/girl_juice.png" />
</div>
<input name="q" type="text" class="grid-item" class="search" placeholder="Search DuckDuckGo :3 :3 :3" />
<input name="{{ .SearchInputName }}" type="text" class="grid-item" class="search" placeholder="{{ .SearchPlaceholder }}" />
</form>
<script>
@ -25,23 +25,29 @@
]
Array.from(document.querySelectorAll(".phrases")).forEach(element => {
// element.textContent = phrases[Math.floor(Math.random()*phrases.length)];
element.textContent = phrases[Math.floor(Math.random()*phrases.length)];
})
document.addEventListener('DOMContentLoaded', function() {
const marqueeElement = document.body;
let position = 0;
const speed = 1; // Adjust speed here (lower is slower)
let xPosition = 0;
let yPosition = 0;
const xSpeed = {{ .BackgroundScrollX }}; // Adjust speed here (lower is slower)
const ySpeed = {{ .BackgroundScrollY }};
function animateMarquee() {
position -= speed;
xPosition -= xSpeed;
yPosition -= ySpeed;
// Reset position when the image has scrolled completely
if (Math.abs(position) >= marqueeElement.offsetWidth) {
position = 0;
if (Math.abs(xPosition) >= marqueeElement.offsetWidth) {
xPosition = 0;
}
if (Math.abs(yPosition) >= marqueeElement.offsetHeight) {
yPosition = 0;
}
marqueeElement.style.backgroundPosition = `${position}px 0`;
marqueeElement.style.backgroundPosition = `${xPosition}px ${yPosition}px`;
requestAnimationFrame(animateMarquee);
}