|
|
<!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 id="body" class="body-font">
|
|
|
<!-- <div class="back">
|
|
|
</div> -->
|
|
|
<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="25" max="60" value="25" />
|
|
|
</button>
|
|
|
<button id="font-change">
|
|
|
<label for="font-change-2">Change Font</label>
|
|
|
</button>
|
|
|
</div>
|
|
|
<div class="display-text" id="display-text">
|
|
|
<div class="everything">
|
|
|
<div class="left">
|
|
|
|
|
|
<h1 id="title"> <span>Добродошли и добро Вас нашли</span> <br>Senka's User Page</h1>
|
|
|
<p id="intro">
|
|
|
Like many people in the creative industry I have a different cv and biography depending on the project I'm doing and the funding application I'm applying for.
|
|
|
But I generally have an interest in archives, media theory, storytelling and writing.
|
|
|
(Knowledge production, how do we learn collectivelly and the like...)<br>
|
|
|
Here I will ramble about and place the following: <br>
|
|
|
<ul id="intro">
|
|
|
<li>things I researched</li>
|
|
|
<li>little web experiments</li>
|
|
|
</ul>
|
|
|
</p>
|
|
|
<p>text text text text text text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text exttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text textexttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text texttext text text text</p>
|
|
|
<!-- <button onClick="document.getElementById('map1').scrollIntoView({behavior: 'smooth'});">🡣</button> -->
|
|
|
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<img alt="A pack of bulls in autumn nature standing as if their posing for an indie rock band photo" src="important.jpg">
|
|
|
<img alt="A pack of bulls in autumn nature standing as if their posing for an indie rock band photo" src="important.jpg">
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script type="text/javascript">
|
|
|
// const canvas = document.getElementById("myCanvas"),
|
|
|
// ctx = canvas.getContext("2d"),
|
|
|
// image = new Image();
|
|
|
|
|
|
// // Wait for the sprite sheet to load
|
|
|
// image.onload = () => {
|
|
|
// Promise.all([
|
|
|
// // Cut out two sprites from the sprite sheet
|
|
|
// createImageBitmap(image, 0, 0, 432, 432),
|
|
|
// // createImageBitmap(image, 432, 0, 432, 432),
|
|
|
// ]).then((sprites) => {
|
|
|
// // Draw each sprite onto the canvas
|
|
|
// ctx.drawImage(sprites[0], 0, 0);
|
|
|
// // ctx.drawImage(sprites[1], 102, 32);
|
|
|
// // Create a linear gradient
|
|
|
// // The start gradient point is at x=20, y=0
|
|
|
// // The end gradient point is at x=220, y=0
|
|
|
// const gradient = ctx.createLinearGradient(20, 0, 220, 0);
|
|
|
|
|
|
// // Add three color stops
|
|
|
// gradient.addColorStop(0, "green");
|
|
|
// gradient.addColorStop(0.5, "cyan");
|
|
|
// gradient.addColorStop(1, "green");
|
|
|
|
|
|
// // Set the fill style and draw a rectangle
|
|
|
// ctx.fillStyle = gradient;
|
|
|
// ctx.fillRect(20, 20, 200, 100);
|
|
|
// });
|
|
|
// };
|
|
|
// // Load the sprite sheet from an image file
|
|
|
// image.src = "important.jpg";
|
|
|
|
|
|
|
|
|
// Change font size button
|
|
|
// Get the toggle button
|
|
|
var toggleButtonTwo = document.getElementById("font-change");
|
|
|
console.log("It's getting the body for the 2md time");
|
|
|
// Add a click event listener to the toggle button
|
|
|
toggleButtonTwo.addEventListener("click", function() {
|
|
|
// Get the body element
|
|
|
var body = document.getElementsByTagName("body")[0];
|
|
|
// var bodyFont = body.classList == "body-font"
|
|
|
// var highContrast = body.classList == "high-contrast"
|
|
|
|
|
|
// Toggle the "different-font" class on the body element
|
|
|
var bodyClasses = document.body.classList.value;
|
|
|
if (bodyClasses.includes("body-font")){
|
|
|
document.body.classList.remove("body-font");
|
|
|
document.body.classList.remove("third-font");
|
|
|
document.body.classList.add("different-font");
|
|
|
} else if (bodyClasses.includes("different-font")){
|
|
|
document.body.classList.remove("body-font");
|
|
|
document.body.classList.remove("different-font");
|
|
|
document.body.classList.add("third-font");
|
|
|
} else if (bodyClasses.includes("third-font")){
|
|
|
document.body.classList.remove("third-font");
|
|
|
document.body.classList.add("body-font");
|
|
|
document.body.classList.remove("different-font");
|
|
|
|
|
|
}
|
|
|
// if ( body.classList == "body-font" || body.classList == "body-font high-contrast"){
|
|
|
// body.classList.remove("body-font");
|
|
|
// body.classList.add("different-font");}
|
|
|
// else if(body.classList == "different-font" || body.classList == "different-font high-contrast"){
|
|
|
// body.classList.remove("different-font");
|
|
|
// body.classList.add("different-font-2");
|
|
|
// body.classList.remove("body-font");
|
|
|
// console.log("It worked!");
|
|
|
// } else{
|
|
|
// body.classList.remove("different-font-2");
|
|
|
// body.classList.add("body-font");
|
|
|
// }
|
|
|
// if ( body.classList == "body-font high-contrast"){
|
|
|
// body.classList.remove("body-font");
|
|
|
// body.classList.add("different-font");}
|
|
|
// else if(body.classList == "different-font high-contrast"){
|
|
|
// body.classList.remove("different-font")
|
|
|
// body.classList.add("different-font-2");
|
|
|
// console.log("It worked!")
|
|
|
// } else{
|
|
|
// body.classList.remove("different-font-2")
|
|
|
// body.classList.add("body-font");
|
|
|
// }
|
|
|
});
|
|
|
|
|
|
// Getting the toggle button
|
|
|
var toggleButton = document.getElementById("toggle-high-contrast");
|
|
|
|
|
|
// Added a click event listener to the toggle button
|
|
|
toggleButton.addEventListener("click", function() {
|
|
|
// Getting the body element
|
|
|
var body = document.getElementsByTagName("body")[0];
|
|
|
// Toggle the "high-contrast" class on the body element
|
|
|
body.classList.toggle("high-contrast");
|
|
|
body.classList.remove("back")
|
|
|
});
|
|
|
|
|
|
// Slider for font size
|
|
|
const fontSizeSlider = document.getElementById("font-size-slider");
|
|
|
const displayText = document.getElementById("display-text");
|
|
|
function changeSize(){
|
|
|
const fontSize = fontSizeSlider.value;
|
|
|
displayText.style.fontSize = `${fontSize}px`;
|
|
|
}
|
|
|
|
|
|
fontSizeSlider.addEventListener("input", () => {
|
|
|
changeSize();
|
|
|
});
|
|
|
changeSize();
|
|
|
|
|
|
</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> |