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

24
frontend/index.html
View File

@ -8,13 +8,13 @@
<link rel="stylesheet" type="text/css" href="assets/style.css"> <link rel="stylesheet" type="text/css" href="assets/style.css">
</head> </head>
<body> <body>
<form class="search-grid" action="https://duckduckgo.com/"> <form class="search-grid" action="{{ .SearchFormAction }}">
<div class="search-logo"> <div class="search-logo">
<img als="girl_juice" src="assets/girl_juice.png" /> <img als="girl_juice" src="assets/girl_juice.png" />
<h2 class="phrases"></h2> <h2 class="phrases"></h2>
<img als="girl_juice" src="assets/girl_juice.png" /> <img als="girl_juice" src="assets/girl_juice.png" />
</div> </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> </form>
<script> <script>
@ -25,23 +25,29 @@
] ]
Array.from(document.querySelectorAll(".phrases")).forEach(element => { 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() { document.addEventListener('DOMContentLoaded', function() {
const marqueeElement = document.body; const marqueeElement = document.body;
let position = 0; let xPosition = 0;
const speed = 1; // Adjust speed here (lower is slower) let yPosition = 0;
const xSpeed = {{ .BackgroundScrollX }}; // Adjust speed here (lower is slower)
const ySpeed = {{ .BackgroundScrollY }};
function animateMarquee() { function animateMarquee() {
position -= speed; xPosition -= xSpeed;
yPosition -= ySpeed;
// Reset position when the image has scrolled completely // Reset position when the image has scrolled completely
if (Math.abs(position) >= marqueeElement.offsetWidth) { if (Math.abs(xPosition) >= marqueeElement.offsetWidth) {
position = 0; 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); requestAnimationFrame(animateMarquee);
} }