You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.9 KiB
HTML
53 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport"
|
|
content="width=device-width,
|
|
initial-scale=1.0"/>
|
|
<title> Senka's user page</title>
|
|
<link rel="stylesheet" href="index style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="buttons">
|
|
<button id="toggle-high-contrast">Contrast</button>
|
|
<button class="slider-container">
|
|
<label for="font-size-slider" >Font Size</label>
|
|
<input type="range" id="font-size-slider" min="20" max="40" value="20" />
|
|
</button>
|
|
</div>
|
|
<div class="display-text" id="display-text">
|
|
<h1 id="title">Senka's User page</h1>
|
|
<p id="intro"> Here I will ramble about the following: <br>
|
|
</p>
|
|
<img alt="A pack of bulls in autumn nature standing as if their posing for an indie rock band photo" src="important.jpg">
|
|
<button id="down" onClick="document.getElementById('map1').scrollIntoView({behavior: 'smooth'});">🡣</button>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// Get the toggle button
|
|
var toggleButton = document.getElementById("toggle-high-contrast");
|
|
|
|
// Add a click event listener to the toggle button
|
|
toggleButton.addEventListener("click", function() {
|
|
// Get the body element
|
|
var body = document.getElementsByTagName("body")[0];
|
|
// Toggle the "high-contrast" class on the body element
|
|
body.classList.toggle("high-contrast");
|
|
});
|
|
// Slider for font size
|
|
const fontSizeSlider = document.getElementById("font-size-slider");
|
|
const displayText = document.getElementById("display-text");
|
|
|
|
fontSizeSlider.addEventListener("input", () => {
|
|
const fontSize = fontSizeSlider.value;
|
|
displayText.style.fontSize = `${fontSize}px`;
|
|
//
|
|
|
|
});
|
|
</script>
|
|
<script src="https://issue.xpub.nl/23/quilt/quilt.js" data-cutFileName="false" data-cutFileName="false"></script>
|
|
<link rel="stylesheet" type="text/css" href="https://issue.xpub.nl/23/quilt/quilt.css">
|
|
|
|
</body>
|
|
</html> |